Move banner system to store, migrate login/register API handling to own file, display Account details on accountPage

software/src/pages/accountPage/index.vue

@@ -1,23 +1,83 @@
 <script setup lang="ts">
-import axios from 'axios';
+import { useUserStore } from '@/data/stores/userStore';
 
 
-axios.get("http://127.0.0.1:3000/")
+const userStore = useUserStore()
 </script>
 
 <template>
-  <v-container>
+  <v-container max-width="1000">
     <v-row>
       <v-col>
-        <v-card>
-          <v-row>
-            <v-col>
-              <v-text-field :label="$t('account.username')"  disabled />
-            </v-col>
-            <v-col>
-              <v-text-field  />
-            </v-col>
-          </v-row>
+        <v-card title="Account">
+          <v-container>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :label="$t('account.username')"
+                  v-model="userStore.userAccount.username"
+                  disabled
+                />
+              </v-col>
+              <v-col>
+                <v-text-field
+                  :label="$t('account.password')"
+                  v-model="userStore.userAccount.password"
+                  type="password"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.firstName')"
+                  v-model="userStore.userAccount.firstName"
+                />
+              </v-col>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.lastName')"
+                  v-model="userStore.userAccount.lastName"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.street')"
+                  v-model="userStore.userAccount.street"
+                />
+              </v-col>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.houseNumber')"
+                  v-model="userStore.userAccount.houseNumber"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.postalCode')"
+                  v-model="userStore.userAccount.postalCode"
+                />
+              </v-col>
+              <v-col>
+                <v-text-field
+                  :label="$t('userInfo.city')"
+                  v-model="userStore.userAccount.city"
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+
+          <v-card-actions>
+            <!-- todo -->
+            <v-btn >Save</v-btn>
+          </v-card-actions>
         </v-card>
       </v-col>
     </v-row>

software/src/pages/loginPage/index.vue

@@ -2,25 +2,23 @@
 import { ref } from 'vue';
 import loginForm from './loginForm.vue';
 import registerForm from './registerForm.vue';
-import BannerModel from '@/data/models/bannerModel';
 import alertBanner from '@/components/alertBanner.vue';
 
 const showRegisterCard = ref(false)
-const banner = ref(new BannerModel())
 </script>
 
 <template>
   <v-container max-width="800">
     <v-row>
       <v-col>
-        <alert-banner v-model:alert-banner="banner" />
+        <alert-banner />
       </v-col>
     </v-row>
 
     <v-expand-transition>
       <v-row v-if="!showRegisterCard">
         <v-col>
-          <login-form v-model:show-register-card="showRegisterCard" v-model:banner="banner" />
+          <login-form v-model:show-register-card="showRegisterCard" />
         </v-col>
       </v-row>
     </v-expand-transition>
@@ -28,7 +26,7 @@ const banner = ref(new BannerModel())
     <v-expand-transition>
       <v-row v-if="showRegisterCard">
         <v-col>
-          <register-form v-model:banner="banner" v-model:show-register-card="showRegisterCard" />
+          <register-form v-model:show-register-card="showRegisterCard" />
         </v-col>
       </v-row>
     </v-expand-transition>

software/src/pages/loginPage/loginForm.vue

@@ -1,33 +1,15 @@
 <script setup lang="ts">
 import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
-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.bannerState = BannerStateEnum.LOGINSUCCESSFUL
-      banner.value.show = true
-
-      userStore.userAccountId = res.data.userAccountId
-    }
-  })
-  .catch(res => {
-    banner.value.bannerState = BannerStateEnum.WRONGLOGIN
-    banner.value.show = true
-  })
+  userStore.login(username.value, password.value)
 }
 </script>
 

software/src/pages/loginPage/registerForm.vue

@@ -1,31 +1,13 @@
 <script setup lang="ts">
 import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
 import { AccountModel } from '@/data/models/accountModel';
-import BannerModel from '@/data/models/bannerModel';
+import { useUserStore } from '@/data/stores/userStore';
 import axios from 'axios';
 import { ref } from 'vue';
 
 const newUser = ref(new AccountModel())
-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/register', newUser.value)
-    .then(res => {
-      console.log(res)
-      if (res.status == 200) {
-        banner.value.bannerState = BannerStateEnum.LOGINSUCCESSFUL
-        banner.value.show = true
-      }
-    })
-    .catch((error) => {
-      console.log(error)
-      if (error.status == 400) {
-        banner.value.bannerState = BannerStateEnum.WRONGLOGIN
-        banner.value.show = true
-      }
-    })
-}
+const userStore = useUserStore()
 </script>
 
 <template>
@@ -103,7 +85,7 @@ function registerUser() {
         </v-btn>
       <v-spacer />
       <v-btn prepend-icon="mdi-account-plus" color="primary" variant="outlined" 
-        @click="registerUser">
+        @click="userStore.registerAccount(newUser)">
           {{ $t('account.register') }}
         </v-btn>
     </template>

software/src/pages/preferencesPage/index.vue

@@ -2,15 +2,12 @@
 import { Ref, ref } from 'vue';
 import pageSetup from './pageSetup.vue';
 import systemSetup from './systemSetup.vue';
-import BannerModel from '@/data/models/bannerModel';
 import alertBanner from '@/components/alertBanner.vue';
-
-const banner: Ref<BannerModel> = ref(new BannerModel())
 </script>
 
 <template>
   <v-container max-width="800">
-    <alert-banner v-model:alert-banner="banner" />
+    <alert-banner />
 
     <v-row>
       <v-col>
@@ -20,7 +17,7 @@ const banner: Ref<BannerModel> = ref(new BannerModel())
 
     <v-row>
       <v-col>
-        <system-setup v-model:alert-banner="banner" />
+        <system-setup />
       </v-col>
     </v-row>
   </v-container>

software/src/pages/preferencesPage/systemSetup.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
-import BannerModel from '@/data/models/bannerModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import axios from 'axios';
 
-const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
+const feedbackStore = useFeedbackStore()
 
 function resetDb() {
   axios.get("http://127.0.0.1:3000/api/resetdatabase")
     .then(res => {
       if (res.status == 200) {
-        alertBanner.value.bannerState = BannerStateEnum.DATABASERESETSUCCESSFUL
-        alertBanner.value.show = true
+        feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
       }
     })
   // todo: Request all data