Login form

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