Account login possible

software/src/pages/loginPage/index.vue

@@ -20,7 +20,7 @@ const banner = ref(new BannerModel())
     <v-expand-transition>
       <v-row v-if="!showRegisterCard">
         <v-col>
-          <login-form v-model:show-register-card="showRegisterCard" />
+          <login-form v-model:show-register-card="showRegisterCard" v-model:banner="banner" />
         </v-col>
       </v-row>
     </v-expand-transition>

software/src/pages/loginPage/loginForm.vue

@@ -1,5 +1,37 @@
 <script setup lang="ts">
+import BannerModel from '@/data/models/bannerModel';
+import { useUserStore } from '@/data/stores/userStore';
+import axios from 'axios';
+import { ref } from 'vue';
+
+const userStore = useUserStore()
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
+const banner = defineModel("banner", { type: BannerModel })
+const username = ref("")
+const password = ref("")
+
+function startLogin() {
+  axios.post('http://127.0.0.1:3000/accounts/login', { 
+    username: username.value,
+    password: password.value
+  })
+  .then(res => {
+    if (res.status == 200) {
+      banner.value.message = "Logged in!"
+      banner.value.color = "green"
+      banner.value.icon = "mdi-check"
+      banner.value.show = true
+
+      userStore.userAccountId = res.data.userAccountId
+    }
+  })
+  .catch(res => {
+    banner.value.message = "Wrong Username or Password!"
+    banner.value.color = "red"
+    banner.value.icon = "mdi-alert-circle"
+    banner.value.show = true
+  })
+}
 </script>
 
 <template>
@@ -7,13 +39,13 @@ const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, defaul
     <v-container>
       <v-row>
         <v-col>
-          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable />
+          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable v-model="username"/>
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
-          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable />
+          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable v-model="password" />
         </v-col>
       </v-row>
     </v-container>
@@ -23,7 +55,7 @@ const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, defaul
         {{ $t('noAccountRegister') }}
       </v-btn>
       <v-spacer />
-      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary">{{ $t('login') }}</v-btn>
+      <v-btn variant="outlined" append-icon="mdi-arrow-right" color="primary" @click="startLogin">{{ $t('login') }}</v-btn>
     </v-card-actions>
 
   </v-card>

software/src/pages/loginPage/registerForm.vue

@@ -9,9 +9,9 @@ const banner = defineModel("banner", { required: true, type: BannerModel })
 const showRegisterCard = defineModel("showRegisterCard", { type: Boolean, default: false })
 
 function registerUser() {
-  axios.post('http://127.0.0.1:3000/accounts/', newUser.value)
+  axios.post('http://127.0.0.1:3000/accounts/register', newUser.value)
     .then(res => {
-      console.log(res.status)
+      console.log(res)
       if (res.status == 200) {
         banner.value.message = "Created!"
         banner.value.color = "green"
@@ -20,6 +20,7 @@ function registerUser() {
       }
     })
     .catch((error) => {
+      console.log(error)
       if (error.status == 400) {
         banner.value.color = "red"
         banner.value.icon = "mdi-alert-circle"