Account login possible

2024-09-11 14:54:33 +02:00
parent fd06b8a9a4
commit 55fd203c7f
10 changed files with 122 additions and 48 deletions
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
-import vuetify from './plugins/vuetify';
-import { useBasketStore } from './data/stores/basketStore';
 import { i18n } from './plugins/i18n';
+import { ref } from 'vue';
+import vuetify from './plugins/vuetify';
+import navigationDrawer from './components/navigationDrawer.vue';

 const userStore = useUserStore()
-const basketStore = useBasketStore()
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)

@@ -24,39 +23,7 @@ i18n.global.locale = userStore.language
    </v-app-bar>

    <v-navigation-drawer :rail="navRail" permanent>
-      <v-list>
-        <v-list-subheader>
-          <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
-          <div v-else></div>
-        </v-list-subheader>
-        <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/" link />
-        <v-list-item :title="$t('menu.basket')" to="/basket" link >
-          <template v-slot:prepend>
-            <v-badge color="primary" :content="basketStore.itemsInBasket.length">
-              <v-icon icon="mdi-cart" />
-            </v-badge>
-          </template>
-        </v-list-item>
-
-        <v-divider />
-
-        <v-list-subheader>
-          <div v-if="!navRail">{{ $t('menu.account') }}</div>
-          <div v-else></div>
-        </v-list-subheader>
-        <v-list-item :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
-        <v-list-item :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
-        <v-list-item :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
-
-        <v-divider />
-        
-        <v-list-subheader>
-          <div v-if="!navRail">{{ $t('menu.systemAndHelp') }}</div>
-          <div v-else></div>
-        </v-list-subheader>
-        <v-list-item :title="$t('menu.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
-        <v-list-item :title="$t('menu.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
-      </v-list>
+      <navigation-drawer v-model:nav-rail="navRail" />
    </v-navigation-drawer>

    <v-main>
--- a/software/src/components/navigationDrawer.vue
+++ b/software/src/components/navigationDrawer.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useUserStore } from '@/data/stores/userStore';
+import { useBasketStore } from '@/data/stores/basketStore';
+import vuetify from '@/plugins/vuetify';
+
+const userStore = useUserStore()
+const basketStore = useBasketStore()
+const navRail = defineModel("navRail", { type: Boolean })
+</script>
+
+<template>
+  <v-list>
+    <v-list-subheader>
+      <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
+      <div v-else></div>
+    </v-list-subheader>
+    <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/" link />
+    <v-list-item :title="$t('menu.basket')" to="/basket" link >
+      <template v-slot:prepend>
+        <v-badge color="primary" :content="basketStore.itemsInBasket.length">
+          <v-icon icon="mdi-cart" />
+        </v-badge>
+      </template>
+    </v-list-item>
+
+    <v-divider />
+
+    <v-list-subheader>
+      <div v-if="!navRail">{{ $t('menu.account') }}</div>
+      <div v-else></div>
+    </v-list-subheader>
+    <v-list-item v-if="userStore.userAccountId == -1" :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
+    <v-list-item v-else :title="$t('logout')" prepend-icon="mdi-logout" @click="userStore.userAccountId = -1" link />
+
+    <v-list-item v-if="userStore.userAccountId != -1" :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
+    <v-list-item v-if="userStore.userAccountId != -1" :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />
+
+    <v-divider />
+    
+    <v-list-subheader>
+      <div v-if="!navRail">{{ $t('menu.systemAndHelp') }}</div>
+      <div v-else></div>
+    </v-list-subheader>
+    <v-list-item :title="$t('menu.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
+    <v-list-item :title="$t('menu.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
+  </v-list>
+</template>
--- a/software/src/data/stores/userStore.ts
+++ b/software/src/data/stores/userStore.ts
@@ -6,6 +6,7 @@ import { LanguageEnum } from "../enums/languageEnum";
 export const useUserStore = defineStore('user', {
  state: () => ({
    theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED),
-    language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN)
+    language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN),
+    userAccountId: useLocalStorage<number>("hackmycart/userStore/userAccountId", -1)
  })
 })
--- a/software/src/locales/english.json
+++ b/software/src/locales/english.json
@@ -46,5 +46,6 @@
    "postalCode": "Postal Code",
    "city": "City"
  },
-  "backToLogin": "Back to Login"
+  "backToLogin": "Back to Login",
+  "logout": "Logout"
 }
--- a/software/src/locales/german.json
+++ b/software/src/locales/german.json
@@ -46,5 +46,6 @@
    "postalCode": "Postleitzahl",
    "city": "Stadt"
  },
-  "backToLogin": "Zurück zum Login"
+  "backToLogin": "Zurück zum Login",
+  "logout": "Ausloggen"
 }
--- a/software/src/pages/loginPage/index.vue
+++ b/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>
--- a/software/src/pages/loginPage/loginForm.vue
+++ b/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>
--- a/software/src/pages/loginPage/registerForm.vue
+++ b/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"