Login form

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">