First startup dialog, factory reset

2024-11-08 13:45:09 +01:00
parent 0a1d85a0fe
commit be1bc85f40
19 changed files with 452 additions and 156 deletions
--- a/software/backend/scripts/databaseHelper.ts
+++ b/software/backend/scripts/databaseHelper.ts
@@ -90,12 +90,12 @@ export async function prepopulateDatabase() {
  {
    await City.create(city)
      .then(async cityDataset => {
-        for (let location of city.locations) 
+        for (let { ...location } of city.locations) 
        {
          location["cityId"] = cityDataset.id
          location["urlName"] = location.name.replaceAll(" ", "-").toLowerCase()
-          location["imageIndoor"] = "http://localhost:3000/static/" + location["imageIndoor"]
-          location["imageOutdoor"] = "http://localhost:3000/static/" + location["imageOutdoor"]
+          location.imageIndoor = "http://localhost:3000/static/" + location["imageIndoor"]
+          location.imageOutdoor = "http://localhost:3000/static/" + location["imageOutdoor"]

          await Location.create(location)
            .then(async locationDataset => {
@@ -240,7 +240,7 @@ export async function prepopulateDatabase() {
  let concerts = []
  let ratings = []

-  for(let band of bandsConcerts.bands) {
+  for(let { ...band } of bandsConcerts.bands) {
    band.imageMembers = "http://localhost:3000/static/" + band.imageMembers
    band.images = band.images.map(image => "http://localhost:3000/static/" + image)
    band.logo = "http://localhost:3000/static/" + band.logo
@@ -282,11 +282,9 @@ export async function prepopulateDatabase() {
        }

        for (let member of band.members) {
-          member.image = "http://localhost:3000/static/" + member.image
-
          bandMembers.push({
            name: member.name,
-            image: member.image,
+            image: "http://localhost:3000/static/" + member.image,
            bandId: dataset.dataValues.id
          })
        }
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -9,8 +9,6 @@ import { useFeedbackStore } from './stores/feedback.store';
 import companyFooter from './components/navigation/companyFooter.vue';
 import urlBar from './components/navigation/urlBar.vue';
 import { useRouter } from 'vue-router';
-import actionDialog from './components/basics/actionDialog.vue';
-import CircularProgressIndeterminate from './components/basics/circularProgressIndeterminate.vue';

 const preferencesStore = usePreferencesStore()
 const feedbackStore = useFeedbackStore()
@@ -19,18 +17,18 @@ const router = useRouter()

 theme.global.name.value = preferencesStore.theme

-
-// First startup
-if (preferencesStore.firstStartup) {
-  preferencesStore.firstStartupRoutine()
-}
-
-
 // Global watcher
+// Watch for language change
 watch(() => preferencesStore.language, () => {
  i18n.global.locale = preferencesStore.language
 }, { immediate: true })

+// Watch for theme change
+watch(() => preferencesStore.theme, () => {
+  theme.global.name.value = preferencesStore.theme
+})
+
+// Watch for 404 page directions
 watch(() => feedbackStore.notFound, () => {
  if (feedbackStore.notFound) {
    feedbackStore.notFound = false
@@ -92,23 +90,4 @@ watch(() => feedbackStore.notFound, () => {
      <company-footer />
    </v-main>
  </v-app>
-
-  <action-dialog
-    v-model="preferencesStore.firstStartup"
-    :title="$t('misc.firstStartup.title')"
-    persistent
-    max-width="600"
-  >
-    <v-row>
-      <v-col>
-        {{ $t('misc.firstStartup.description') }}
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col class="text-center pa-8">
-        <circular-progress-indeterminate />
-      </v-col>
-    </v-row>
-  </action-dialog>
 </template>
--- a/software/src/components/basics/actionDialog.vue
+++ b/software/src/components/basics/actionDialog.vue
@@ -23,9 +23,11 @@ defineProps({
      :icon="icon"
      :tonal="false"
    >
+      <template #default v-if="$slots.default">
        <slot></slot>
+      </template>

-      <template #borderless>
+      <template #borderless v-if="$slots.borderless">
        <slot name="borderless"></slot>
      </template>

--- a/software/src/components/pageParts/serverStateText.vue
+++ b/software/src/components/pageParts/serverStateText.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { usePreferencesStore } from '@/stores/preferences.store';
+import { ServerStateEnum } from '@/data/enums/serverStateEnum';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <span
+    v-if="preferencesStore.serverState == ServerStateEnum.PENDING || preferencesStore.fetchInProgress"
+    class="text-orange"
+  >
+    <v-icon icon="mdi-clock" />
+    Pending...
+  </span>
+
+  <span
+    v-else-if="preferencesStore.serverState == ServerStateEnum.ONLINE"
+    class="text-green"
+  >
+    <v-icon icon="mdi-check" />
+    Online
+  </span>
+
+  <span
+    v-else="preferencesStore.serverState == ServerStateEnum.OFFLINE"
+    class="text-red"
+  >
+    <v-icon icon="mdi-alert-circle" />
+    Offline
+  </span>
+</template>
--- a/software/src/data/enums/themeEnums.ts
+++ b/software/src/data/enums/themeEnums.ts
@@ -1,5 +1,4 @@
 export enum ThemeEnum {
-  DARKBLUE = "dark",
-  LIGHTBLUE = "light",
-
+  DARK = "dark",
+  LIGHT = "light",
 }
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -148,7 +148,15 @@
        "description": "Soll der Bearbeitungsfortschritt der Übungen wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
      }
    },
-    "aboutProject": "Über das Projekt"
+    "aboutProject": "Über das Projekt",
+    "resetFirstStartup": "Einrichtungsassistenten starten",
+    "factoryReset": {
+      "factoryReset": "Zurücksetzen auf Werkseinstellungen",
+      "dialog": {
+        "title": "Aus Werkseinstellungen zurücksetzen?",
+        "description": "Sollen alle Einstellungen und Daten auf Werkseinstellungen zurückgesetzt werden? Alle Änderungen und Fortschritte gehen verloren!"
+      }
+    }
  },
  "help": {
    "scoreBoard": {
@@ -201,7 +209,8 @@
      "filtering": "Filtern",
      "cancel": "Abbrechen",
      "more": "Mehr",
-      "confirm": "Bestätigen"
+      "confirm": "Bestätigen",
+      "next": "Weiter"
    },
    "validation": {
      "required": "Darf nicht leer bleiben",
@@ -216,8 +225,19 @@
    "uploadFile": "Datei hochladen",
    "firstStartup": {
      "title": "Ersteinrichtung",
-      "description": "Die Datenbank wird eingerichtet. Dies kann 1-2 Minuten dauern. Bitte warten..."
-    }
+      "description": "Die Datenbank wird eingerichtet. Bitte warten...",
+      "createDatabase": "Erstelle Datenbank...",
+      "complete": "Fertig",
+      "finished": "Abgeschlossen",
+      "createExercises": "Erstelle Aufgaben...",
+      "connectToServer": "Server",
+      "database": "Datenbank",
+      "exercises": "Aufgaben",
+      "userData": "Persönliche Daten"
+    },
+    "user": "Angaben zur Person",
+    "registrationNumber": "Matrikelnummer",
+    "yourFullName": "Vollständiger Name"
  },
  "genre": {
    "withoutBand": "ohne Band"
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -148,7 +148,15 @@
        "description": "Do you really want to reset the exercise progress? This is permanent!"
      }
    },
-    "aboutProject": "About the project"
+    "aboutProject": "About the project",
+    "resetFirstStartup": "Start first startup dialog",
+    "factoryReset": {
+      "factoryReset": "Factory reset",
+      "dialog": {
+        "title": "Factory reset?",
+        "description": "Do you really want to reset everything? Every change will be lost!"
+      }
+    }
  },
  "help": {
    "scoreBoard": {
@@ -201,7 +209,8 @@
      "filtering": "Filter",
      "cancel": "Cancel",
      "more": "More",
-      "confirm": "Confirm"
+      "confirm": "Confirm",
+      "next": "Next"
    },
    "validation": {
      "required": "Must not remain empty",
@@ -216,8 +225,19 @@
    "uploadFile": "Upload file",
    "firstStartup": {
      "title": "First startup",
-      "description": "Creating database. This could take 1-2 minutes. Please wait..."
-    }
+      "description": "Creating database. Please wait...",
+      "createDatabase": "Create Database...",
+      "complete": "Complete",
+      "createExercises": "Create Exercises...",
+      "finished": "Finished",
+      "connectToServer": "Server",
+      "database": "Database",
+      "exercises": "Exercises",
+      "userData": "User data"
+    },
+    "user": "About person",
+    "registrationNumber": "Matrikel number",
+    "yourFullName": "Full name"
  },
  "genre": {
    "withoutBand": "without Band"
--- a/software/src/pages/misc/homePage/bandsSection.vue
+++ b/software/src/pages/misc/homePage/bandsSection.vue
--- a/software/src/pages/misc/homePage/index.vue
+++ b/software/src/pages/misc/homePage/index.vue
@@ -4,20 +4,30 @@ import { useLocationStore } from '@/stores/location.store';
 import bandSection from './bandsSection.vue';
 import UpcomingConcertsSection from './upcomingConcertsSection.vue';
 import TopLocationsSection from './topLocationsSection.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import welcomeDialog from './welcomeDialog.vue';
+import { ref } from 'vue';

 const concertStore = useConcertStore()
 const locationStore = useLocationStore()
+const preferencesStore = usePreferencesStore()
+const showWelcomeDialog = ref(false)

 concertStore.getUpcomingConcerts()
 locationStore.getTopLocations()
+
+// First startup
+if (preferencesStore.firstStartup) {
+  showWelcomeDialog.value = true
+}
 </script>

 <template>
  <div class="pt-4">
-    <band-section />
+    <band-section v-if="!preferencesStore.firstStartup" />
  </div>

-  <v-container>
+  <v-container v-if="!preferencesStore.firstStartup">
    <v-row>
      <v-spacer />

@@ -30,4 +40,6 @@ locationStore.getTopLocations()
      <v-spacer />
    </v-row>
  </v-container>
+
+  <welcome-dialog :model-value="showWelcomeDialog" />
 </template>
--- a/software/src/pages/misc/homePage/topLocationsSection.vue
+++ b/software/src/pages/misc/homePage/topLocationsSection.vue
--- a/software/src/pages/misc/homePage/upcomingConcertsSection.vue
+++ b/software/src/pages/misc/homePage/upcomingConcertsSection.vue
--- a/software/src/pages/misc/homePage/welcomeDialog.vue
+++ b/software/src/pages/misc/homePage/welcomeDialog.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import { ref, watch } from 'vue';
+
+const preferencesStore = usePreferencesStore()
+const feedbackStore = useFeedbackStore()
+const showDialog = defineModel()
+const currentStep = ref(0)
+
+const steps = [
+  feedbackStore.i18n.t('misc.firstStartup.connectToServer'),
+  feedbackStore.i18n.t('misc.firstStartup.database'),
+  feedbackStore.i18n.t('misc.firstStartup.exercises'),
+  feedbackStore.i18n.t('misc.firstStartup.userData'),
+]
+
+preferencesStore.getServerState()
+
+
+watch(() => currentStep.value, () => {
+  switch(currentStep.value) {
+    case 2: {
+      preferencesStore.resetDb();
+      break;
+    }
+
+    case 3: {
+      preferencesStore.resetExerciseProg();
+      break;
+    }
+
+    case 4: {
+      
+      break;
+    }
+  }
+})
+</script>
+
+<template>
+  <action-dialog
+    v-model="showDialog"
+    :title="$t('misc.firstStartup.title')"
+    icon="mdi-human-greeting"
+    max-width="800"
+    persistent
+  >
+    <template #borderless>
+      <v-stepper
+        v-model="currentStep"
+        alt-labels
+        flat
+      >
+        <template #default="{ prev, next}">
+          <!-- Header items -->
+          <v-stepper-header>
+            <template v-for="(step, n) in steps">
+              <v-stepper-item
+                :complete="currentStep > n + 1"
+                :title="step"
+                :value="n + 1"
+                complete-icon="mdi-check"
+                color="green"
+              />
+
+              <v-divider v-if="n < steps.length - 1" />
+            </template>
+          </v-stepper-header>
+
+
+          <!-- Content -->
+          <v-stepper-window>
+            <v-stepper-window-item
+              :value="1"
+              class="text-h4 text-center"
+            >
+              <div>
+                {{ $t('preferences.serverState') }}:
+              </div>
+
+              <server-state-text />
+            </v-stepper-window-item>
+
+            <v-stepper-window-item
+              :value="2"
+            >
+              <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
+                <div class="pb-4">
+                  {{ $t('misc.firstStartup.createDatabase') }}
+                </div>
+
+                <v-progress-linear indeterminate />
+              </div>
+
+              <div v-else class="text-center text-h4 pb-4 text-green">
+                <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+              </div>
+            </v-stepper-window-item>
+
+
+            <v-stepper-window-item
+              :value="3"
+            >
+              <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
+                <div class="pb-4">
+                  {{ $t('misc.firstStartup.createExercises') }}
+                </div>
+                
+                <v-progress-linear indeterminate />
+              </div>
+
+              <div v-else class="text-center text-h4 pb-4 text-green">
+                <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+              </div>
+            </v-stepper-window-item>
+
+
+            <v-stepper-window-item
+              :value="4"
+            >
+              <v-container class="px-0 py-2">
+                <v-row>
+                  <v-col>
+                    <v-text-field
+                      variant="outlined"
+                      hide-details
+                      :label="$t('misc.yourFullName')"
+                      v-model="preferencesStore.studentName"
+                    />
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col>
+                    <v-text-field
+                      variant="outlined"
+                      hide-details
+                      :label="$t('misc.registrationNumber')"
+                      v-model="preferencesStore.registrationNumber"
+                    />
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-stepper-window-item>
+          </v-stepper-window>
+
+
+          <!-- Next/Previous buttons -->
+          <v-stepper-actions
+            @click:next="next"
+          >
+            <template #prev="{ props }">
+              <v-spacer />
+            </template>
+
+            <template #next="{ props }">
+              <outlined-button
+                v-if="currentStep < 4"
+                @click="props.onClick()"
+                :disabled="preferencesStore.fetchInProgress"
+              >
+                {{ $t('misc.actions.next') }}
+              </outlined-button>
+
+              <outlined-button
+                v-else
+                @click="showDialog = false; preferencesStore.firstStartup = false"
+                :disabled="preferencesStore.studentName.length == 0 || 
+                  preferencesStore.registrationNumber.length == 0"
+                prepend-icon="mdi-check"
+                color="green"
+              >
+                {{ $t('misc.firstStartup.complete') }}
+              </outlined-button>
+            </template>
+          </v-stepper-actions>
+        </template>
+      </v-stepper>
+    </template>
+  </action-dialog>
+</template>
--- a/software/src/pages/misc/preferencesPage/index.vue
+++ b/software/src/pages/misc/preferencesPage/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import pageSetup from './pageSetup.vue';
-import systemSetup from './systemSetup.vue';
+import pageSetup from './pageSetupSection.vue';
+import systemSetup from './systemSetupSection.vue';
 import aboutSection from './aboutSection.vue';
+import userSection from './userSection.vue';
 </script>

 <template>
@@ -12,6 +13,12 @@ import aboutSection from './aboutSection.vue';
      </v-col>
    </v-row>

+    <v-row>
+      <v-col>
+        <user-section />
+      </v-col>
+    </v-row>
+
    <v-row>
      <v-col>
        <system-setup />
--- a/software/src/pages/misc/preferencesPage/pageSetupSection.vue
+++ b/software/src/pages/misc/preferencesPage/pageSetupSection.vue
@@ -1,21 +1,10 @@
 <script setup lang="ts">
 import { ThemeEnum } from '@/data/enums/themeEnums';
-import { useTheme } from 'vuetify/lib/framework.mjs';
-import { i18n } from '@/plugins/i18n';
 import cardView from '@/components/basics/cardView.vue';
 import { usePreferencesStore } from '@/stores/preferences.store';

 const preferencesStore = usePreferencesStore()
-const theme = useTheme()
 const themeEnums = Object.values(ThemeEnum)
-
-function changeTheme() {
-  theme.global.name.value = preferencesStore.theme
-}
-
-function changeLanguage() {
-  i18n.global.locale = preferencesStore.language
-}
 </script>

 <template>
@@ -29,7 +18,6 @@ function changeLanguage() {
          v-model="preferencesStore.theme"
          :items="themeEnums"
          :label="$t('preferences.selectedTheme')"
-          @update:model-value="changeTheme"
          variant="outlined"
          hide-details
        />
@@ -42,7 +30,6 @@ function changeLanguage() {
          v-model="preferencesStore.language"
          :items="$i18n.availableLocales" 
          :label="$t('preferences.language')"
-          @update:model-value="changeLanguage"
          variant="outlined"
          hide-details
        />
--- a/software/src/pages/misc/preferencesPage/systemSetup.vue
+++ b/software/src/pages/misc/preferencesPage/systemSetup.vue
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import confirmDialog from '@/components/basics/confirmDialog.vue';
-import { ServerStateEnum } from '@/data/enums/serverStateEnum';
-import { usePreferencesStore } from '@/stores/preferences.store';
-
-const preferenceStore = usePreferencesStore()
-
-preferenceStore.getServerState()
-</script>
-
-<template>
-  <card-view
-    :title="$t('preferences.systemSetup')"
-    icon="mdi-engine"
-  >
-    <v-row>
-      <v-col>
-        {{ $t('preferences.serverState') }}:
-        <span v-if="preferenceStore.serverState == ServerStateEnum.ONLINE" class="text-green">
-          <v-icon icon="mdi-check" />
-          Online
-        </span>
-
-        <span v-else-if="preferenceStore.serverState == ServerStateEnum.OFFLINE" class="text-red">
-          <v-icon icon="mdi-alert-circle" />
-          Offline
-        </span>
-
-        <span v-else-if="preferenceStore.serverState == ServerStateEnum.PENDING" class="text-orange">
-          <v-icon icon="mdi-clock" />
-          Pending...
-        </span>
-      </v-col>
-    </v-row>
-
-    
-
-    <v-row>
-      <v-col class="d-flex justify-center align-center">
-        <outlined-button
-          @click="preferenceStore.showDeleteDbDialog = true"
-          prepend-icon="mdi-database-refresh"
-          color="red"
-          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
-        >
-          {{ $t('preferences.resetDatabase.resetDatabase') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col class="d-flex justify-center align-center">
-        <outlined-button
-        @click="preferenceStore.showDeleteExerciseDialog = true"
-          prepend-icon="mdi-progress-close"
-          color="red"
-          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
-        >
-          {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-  </card-view>
-
-  <!-- Confirm delete database -->
-  <confirm-dialog
-    :title="$t('preferences.resetDatabase.dialog.title')"
-    :description="$t('preferences.resetDatabase.dialog.description')"
-    v-model="preferenceStore.showDeleteDbDialog"
-    :onConfirm="preferenceStore.resetDb"
-    :loading="preferenceStore.fetchInProgress"
-  />
-
-  <!-- Confirm delete exercise progress -->
-  <confirm-dialog
-    :title="$t('preferences.resetExerciseProgress.dialog.title')"
-    :description="$t('preferences.resetExerciseProgress.dialog.description')"
-    v-model="preferenceStore.showDeleteExerciseDialog"
-    :onConfirm="preferenceStore.resetExerciseProg"
-    :loading="preferenceStore.fetchInProgress"
-  />
-</template>
--- a/software/src/pages/misc/preferencesPage/systemSetupSection.vue
+++ b/software/src/pages/misc/preferencesPage/systemSetupSection.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import confirmDialog from '@/components/basics/confirmDialog.vue';
+import { ServerStateEnum } from '@/data/enums/serverStateEnum';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+import { useRouter } from 'vue-router';
+
+const preferenceStore = usePreferencesStore()
+const router = useRouter()
+
+preferenceStore.getServerState()
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.systemSetup')"
+    icon="mdi-engine"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item class="text-h6 text-center">
+          {{ $t('preferences.serverState') }}: <server-state-text />
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showDeleteDbDialog = true"
+            prepend-icon="mdi-database-refresh"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.resetDatabase.resetDatabase') }}
+          </outlined-button>
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showDeleteExerciseDialog = true"
+            prepend-icon="mdi-progress-close"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
+          </outlined-button>
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showFactoryResetDialog = true"
+            prepend-icon="mdi-factory"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.factoryReset.factoryReset') }}
+          </outlined-button>
+        </v-list-item>
+      </v-list>
+    </template>
+  </card-view>
+
+  <!-- Confirm delete database -->
+  <confirm-dialog
+    :title="$t('preferences.resetDatabase.dialog.title')"
+    :description="$t('preferences.resetDatabase.dialog.description')"
+    v-model="preferenceStore.showDeleteDbDialog"
+    :onConfirm="preferenceStore.resetDb"
+    :loading="preferenceStore.fetchInProgress"
+  />
+
+  <!-- Confirm delete exercise progress -->
+  <confirm-dialog
+    :title="$t('preferences.resetExerciseProgress.dialog.title')"
+    :description="$t('preferences.resetExerciseProgress.dialog.description')"
+    v-model="preferenceStore.showDeleteExerciseDialog"
+    :onConfirm="preferenceStore.resetExerciseProg"
+    :loading="preferenceStore.fetchInProgress"
+  />
+
+  <confirm-dialog
+    :title="$t('preferences.factoryReset.dialog.title')"
+    :description="$t('preferences.factoryReset.dialog.description')"
+    v-model="preferenceStore.showFactoryResetDialog"
+    :onConfirm="() => {
+      preferenceStore.resetToFactorySettings()
+      router.push('/')
+    }"
+    :loading="preferenceStore.fetchInProgress"
+  />
+</template>
--- a/software/src/pages/misc/preferencesPage/userSection.vue
+++ b/software/src/pages/misc/preferencesPage/userSection.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <card-view icon="mdi-account-school" :title="$t('misc.user')">
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          hide-details
+          :label="$t('misc.yourFullName')"
+          v-model="preferencesStore.studentName"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          hide-details
+          :label="$t('misc.registrationNumber')"
+          v-model="preferencesStore.registrationNumber"
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>
--- a/software/src/router/routes.ts
+++ b/software/src/router/routes.ts
@@ -1,5 +1,5 @@
 import BasketPage from "@/pages/misc/basketPage/index.vue"
-import HomePage from "@/pages/homePage/index.vue"
+import HomePage from "@/pages/misc/homePage/index.vue"
 import { adminRoutes } from "./admin.routes";
 import BandsPage from "@/pages/bands/bandsPage/index.vue"
 import BandDetailPage from "@/pages/bands/bandDetailPage/index.vue"
--- a/software/src/stores/preferences.store.ts
+++ b/software/src/stores/preferences.store.ts
@@ -7,11 +7,12 @@ import { fetchFileNames, fetchServerState, resetDatabase, resetExerciseProgress
 import { ServerStateEnum } from "@/data/enums/serverStateEnum";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { useFeedbackStore } from "./feedback.store";
+import { useBasketStore } from "./basket.store";

 export const usePreferencesStore = defineStore('preferencesStore', {
  state: () => ({
    /** Selected theme by user */
-    theme: useLocalStorage<ThemeEnum>("hackmycart/preferencesStore/theme", ThemeEnum.DARKBLUE),
+    theme: useLocalStorage<ThemeEnum>("hackmycart/preferencesStore/theme", ThemeEnum.DARK),

    /** Selected language by user */
    language: useLocalStorage<LanguageEnum>("hackmycart/preferencesStore/language", LanguageEnum.GERMAN),
@@ -28,11 +29,20 @@ export const usePreferencesStore = defineStore('preferencesStore', {
    /** Show the "Delete Exercise progress?" confirm dialog */
    showDeleteExerciseDialog: ref(false),

+    /** Show the "Factory reset" confirm dialog */
+    showFactoryResetDialog: ref(false),
+
    /** List of files on the server */
    staticFiles: ref([]),

    /** Marks the first run of the app */
-    firstStartup: useLocalStorage<Boolean>("hackmycart/preferencesStore/firstStartup", true)
+    firstStartup: useLocalStorage<Boolean>("hackmycart/preferencesStore/firstStartup", true),
+
+    /** Full name of student */
+    studentName: useLocalStorage<String>("hackmycart/preferencesStore/studentName", ""),
+
+    /** Matrikel number */
+    registrationNumber: useLocalStorage<String>("hackmycart/preferencesStore/registrationNumber", "")
  }),

  actions: {
@@ -108,11 +118,17 @@ export const usePreferencesStore = defineStore('preferencesStore', {
        })
    },

-    async firstStartupRoutine() {
-      await this.resetDb()
-      await this.resetExerciseProg()
+    resetToFactorySettings() {
+      const basketStore = useBasketStore()

-      this.firstStartup = false
+      this.firstStartup = true
+      this.studentName = ""
+      this.registrationNumber = ""
+      this.theme = "dark"
+      this.language = LanguageEnum.GERMAN
+      basketStore.itemsInBasket = []
+      
+      this.showFactoryResetDialog = false
    }
  }
 })