Login form

software/src/App.vue

@@ -48,7 +48,13 @@ requestAllCategories()
 
     <v-main>
       <!-- Here changes the router the content -->
-      <router-view></router-view>
+      <v-container>
+        <v-row>
+          <v-col>
+            <router-view></router-view>
+          </v-col>
+        </v-row>
+      </v-container>
     </v-main>
   </v-app>
 </template>

software/src/data/enums/languageEnum.ts

@@ -0,0 +1,4 @@
+export enum LanguageEnum {
+  GERMAN = "Deutsch",
+  ENGLISH = "English"
+}

software/src/data/stores/userStore.ts

@@ -1,9 +1,11 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 import { ThemeEnum } from "../enums/themeEnums";
+import { LanguageEnum } from "../enums/languageEnum";
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED)
+    theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED),
+    language: useLocalStorage<LanguageEnum>("hackmycart/userStore/language", LanguageEnum.GERMAN)
   })
 })

software/src/pages/loginPage/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import LoginForm from './loginForm.vue';
+
+</script>
+
+<template>
+  <v-container max-width="600">
+    <v-row>
+      <v-col>
+        <login-form />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/loginPage/loginForm.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <v-card title="Login" prepend-icon="mdi-login" elevation="8">
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field label="Username" prepend-icon="mdi-account" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-text-field label="Passwort" prepend-icon="mdi-key" type="password" clearable />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <!-- todo -->
+          <v-btn prepend-icon="mdi-send" color="primary" block>Login</v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-card-text class="text-center">
+      <a
+        class="text-secondary text-decoration-none"
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+      <!-- todo -->
+        Nicht keinen Account? Jetzt anmelden! <v-icon icon="mdi-chevron-right"></v-icon>
+      </a>
+    </v-card-text>
+  </v-card>
+</template>

software/src/pages/preferencesPage/index.vue

@@ -9,26 +9,19 @@ const banner: Ref<BannerModel> = ref(new BannerModel())
 </script>
 
 <template>
-  <v-container>
+  <v-container max-width="800">
+    <alert-banner v-model:alert-banner="banner" />
+
     <v-row>
       <v-col>
-        <v-container max-width="800">
-          <alert-banner v-model:alert-banner="banner" />
+        <page-setup />
+      </v-col>
+    </v-row>
 
-          <v-row>
-            <v-col>
-              <page-setup />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <system-setup v-model:alert-banner="banner" />
-            </v-col>
-          </v-row>
-        </v-container>
+    <v-row>
+      <v-col>
+        <system-setup v-model:alert-banner="banner" />
       </v-col>
     </v-row>
   </v-container>
-  
 </template>

software/src/pages/preferencesPage/pageSetup.vue

@@ -2,24 +2,36 @@
 import { ThemeEnum } from '@/data/enums/themeEnums';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from '@/data/stores/userStore';
+import { LanguageEnum } from '@/data/enums/languageEnum';
 
 const userStore = useUserStore()
 const theme = useTheme()
 const themeEnums = Object.values(ThemeEnum)
+const languages = Object.values(LanguageEnum)
 
 function changeTheme() {
   theme.global.name.value = userStore.theme
 }
+
+function changeLanguage() {
+  // todo
+}
 </script>
 
 <template>
-  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard">
+  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard" elevation="8">
     <v-container>
       <v-row>
         <v-col>
           <v-select v-model="userStore.theme" :items="themeEnums" label="Selected theme" @update:model-value="changeTheme" />
         </v-col>
       </v-row>
+
+      <v-row>
+        <v-col>
+          <v-select v-model="userStore.language" :items="languages" label="Sprache" @update:model-value="changeLanguage" />
+        </v-col>
+      </v-row>
     </v-container>
   </v-card>
 </template>

software/src/pages/preferencesPage/systemSetup.vue

@@ -20,7 +20,7 @@ function resetSettings() {
 </script>
 
 <template>
-  <v-card title="System Setup" prepend-icon="mdi-engine">
+  <v-card title="System Setup" prepend-icon="mdi-engine" elevation="8">
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">

software/src/router/routes.ts

@@ -2,12 +2,14 @@ import AccountPage from "@/pages/AccountPage.vue";
 import OrdersPage from "@/pages/OrdersPage.vue";
 import PreferencesPage from "@/pages/preferencesPage/index.vue";
 import ProductsPage from "@/pages/ProductsPage.vue";
+import LoginPage from "@/pages/loginPage/index.vue"
 
 const routes = [
   { path: '/', component: ProductsPage },
   { path: '/account', component: AccountPage },
   { path: '/orders', component: OrdersPage },
   { path: '/preferences', component: PreferencesPage },
+  { path: '/login', component: LoginPage },
 ]
 
 export default routes