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

software/src/data/api/accountApi.ts

@@ -0,0 +1,15 @@
+import axios from "axios"
+import { AccountModel } from "../models/accountModel"
+
+const BASE_URL = "http://localhost:3000/accounts"
+
+export async function login(username: string, password: string) {
+  return await axios.post(BASE_URL + "/login", { 
+      username: username,
+      password: password
+  })
+}
+
+export async function register(account: AccountModel) {
+  return await axios.post(BASE_URL + "/register", account)
+}

software/src/data/enums/bannerStateEnum.ts

@@ -2,5 +2,7 @@ export enum BannerStateEnum {
   DATABASERESETSUCCESSFUL,
   ERROR,
   WRONGLOGIN,
-  LOGINSUCCESSFUL
+  LOGINSUCCESSFUL,
+  REGISTERSUCCESSFUL,
+  USERNAMEINUSE
 }

software/src/data/models/bannerModel.ts

@@ -1,6 +0,0 @@
-import { BannerStateEnum } from "../enums/bannerStateEnum"
-
-export default class BannerModel {
-  show: boolean = false
-  bannerState: BannerStateEnum = BannerStateEnum.ERROR
-}

software/src/data/stores/feedbackStore.ts

@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { BannerStateEnum } from "../enums/bannerStateEnum";
+import { Composer } from 'vue-i18n';
+
+export const useFeedbackStore = defineStore("feedbackStore", {
+  state: () => ({
+    showBanner: ref(false),
+    title: ref(""),
+    color: ref(""),
+    icon: ref(""),
+    $i18n: {}
+  }),
+
+  getters: {
+    i18n(): Composer {
+      return this.$i18n.global as Composer
+    }
+  },
+
+  actions: {
+    changeBanner(bannerState: BannerStateEnum) {
+      switch (bannerState) {
+        case BannerStateEnum.ERROR: {
+          this.title = this.i18n.t('bannerMessages.error'); break;
+        }
+        case BannerStateEnum.DATABASERESETSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.databaseResetSuccessful'); break;
+        }
+        case BannerStateEnum.LOGINSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.loginSuccessful'); break;
+        }
+        case BannerStateEnum.WRONGLOGIN: {
+          this.title = this.i18n.t('bannerMessages.wrongLogin'); break;
+        }
+        case BannerStateEnum.REGISTERSUCCESSFUL: {
+          this.title = this.i18n.t("bannerMessages.registerSuccessful"); break;
+        }
+        case BannerStateEnum.USERNAMEINUSE: {
+          this.title = this.i18n.t("bannerMessages.usernameInUse"); break;
+        }
+      }
+
+      switch (bannerState) {
+        case BannerStateEnum.ERROR:
+        case BannerStateEnum.WRONGLOGIN:
+        case BannerStateEnum.USERNAMEINUSE:
+          this.color = "red"
+          this.icon = "mdi-alert-circle"
+          break;
+        
+        case BannerStateEnum.DATABASERESETSUCCESSFUL:
+        case BannerStateEnum.LOGINSUCCESSFUL:
+        case BannerStateEnum.REGISTERSUCCESSFUL:
+          this.color = "green"
+          this.icon = "mdi-check-circle"
+          break
+      }
+
+      this.showBanner = true
+    }
+  }
+})

software/src/data/stores/userStore.ts

@@ -2,11 +2,61 @@ import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 import { ThemeEnum } from "../enums/themeEnums";
 import { LanguageEnum } from "../enums/languageEnum";
+import { AccountModel } from "../models/accountModel";
+import { login, register } from "../api/accountApi";
+import { useFeedbackStore } from "./feedbackStore";
+import { BannerStateEnum } from "../enums/bannerStateEnum";
 
-export const useUserStore = defineStore('user', {
+export const useUserStore = defineStore('userStore', {
   state: () => ({
     theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED),
     language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN),
-    userAccountId: useLocalStorage<number>("hackmycart/userStore/userAccountId", -1)
-  })
+    userAccount: useLocalStorage<AccountModel>("hackmycart/userStore/userAccount", new AccountModel()),
+    loggedIn: useLocalStorage<Boolean>("hackmycart/userStore/loggedIn", false)
+  }),
+
+  actions: {
+    async login(username: string, password: string) {
+      const feedbackStore = useFeedbackStore()
+
+      await login(username, password)
+        .then(result => {
+          if (result.data.loginSuccessful) {
+            this.userAccount = result.data.account
+            this.loggedIn = true
+
+            feedbackStore.changeBanner(BannerStateEnum.LOGINSUCCESSFUL)
+          }
+        })
+        .catch(error => {
+          this.userAccount = new AccountModel()
+          this.loggedIn = false
+
+          feedbackStore.changeBanner(BannerStateEnum.WRONGLOGIN)
+        })
+    },
+
+    async registerAccount(account: AccountModel) {
+      const feedbackStore = useFeedbackStore()
+
+      await register(account)
+        .then(res => {
+          console.log(res)
+          if (res.status == 200) {
+            feedbackStore.changeBanner(BannerStateEnum.REGISTERSUCCESSFUL)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+          if (error.status == 400) {
+            feedbackStore.changeBanner(BannerStateEnum.USERNAMEINUSE)
+          }
+        })
+    },
+
+    logout() {
+      this.userAccount = new AccountModel()
+      this.loggedIn = false
+    }
+  }
 })