New "about" section on PreferencesPage, add new exercise descriptions/steps

software/src/pages/misc/preferencesPage/aboutSection.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import packageJson from './../../../../package.json'
+
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.aboutProject')"
+    icon="mdi-information"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item
+          title="Software Version"
+          :subtitle="packageJson.version"
+          prepend-icon="mdi-counter"
+        />
+        <v-list-item 
+          title="Lizenz"
+          subtitle="MIT"
+          prepend-icon="mdi-license"
+        />
+        <v-list-item
+          title="Entwickler"
+          subtitle="Tobias Zoghaib"
+          prepend-icon="mdi-account"
+        />
+        <v-list-item 
+          title="Entwickelt im Auftrag"
+          subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
+          prepend-icon="mdi-school"
+        />
+        <v-list-item 
+          title="Copyright"
+          subtitle="2024"
+          prepend-icon="mdi-copyright"
+        />
+      </v-list>
+    </template>
+  </card-view>
+</template>

software/src/pages/misc/preferencesPage/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import pageSetup from './pageSetup.vue';
 import systemSetup from './systemSetup.vue';
+import aboutSection from './aboutSection.vue';
 </script>
 
 <template>
@@ -16,5 +17,11 @@ import systemSetup from './systemSetup.vue';
         <system-setup />
       </v-col>
     </v-row>
+
+    <v-row>
+      <v-col>
+        <about-section />
+      </v-col>
+    </v-row>
   </v-container>
 </template>

software/src/pages/misc/preferencesPage/pageSetup.vue

@@ -30,6 +30,7 @@ function changeLanguage() {
           :items="themeEnums"
           :label="$t('preferences.selectedTheme')"
           @update:model-value="changeTheme"
+          variant="outlined"
           hide-details
         />
       </v-col>
@@ -42,6 +43,7 @@ function changeLanguage() {
           :items="$i18n.availableLocales" 
           :label="$t('preferences.language')"
           @update:model-value="changeLanguage"
+          variant="outlined"
           hide-details
         />
       </v-col>

software/src/pages/misc/preferencesPage/systemSetup.vue

@@ -1,59 +1,13 @@
 <script setup lang="ts">
-import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
-import { useFeedbackStore } from '@/stores/feedback.store';
 import cardView from '@/components/basics/cardView.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { ref } from 'vue';
 import confirmDialog from '@/components/basics/confirmDialog.vue';
-import { fetchServerState, resetDatabase, resetExerciseProgress } from '@/data/api/mainApi';
 import { ServerStateEnum } from '@/data/enums/serverStateEnum';
-import packageJson from './../../../../package.json'
+import { usePreferencesStore } from '@/stores/preferences.store';
 
-const feedbackStore = useFeedbackStore()
-const showConfirmDeleteDbDialog = ref(false)
-const showConfirmDeleteExerciseProgressDialog = ref(false)
-const serverOnline = ref(ServerStateEnum.PENDING)
-
-fetchServerState()
-  .then(result => {
-    if (result.status == 200) {
-      serverOnline.value = ServerStateEnum.ONLINE
-    } else {
-      serverOnline.value = ServerStateEnum.OFFLINE
-    }
-  })
-  .catch(error => {
-    serverOnline.value = ServerStateEnum.OFFLINE
-  })
-
-async function resetDb() {
-  serverOnline.value = ServerStateEnum.PENDING
-
-  await resetDatabase()
-    .then(result => {
-      if (result.status == 200) {
-        feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
-        serverOnline.value = ServerStateEnum.ONLINE
-      }
-
-      showConfirmDeleteDbDialog.value = false
-    })
-}
-
-async function resetExerciseProg() {
-  serverOnline.value = ServerStateEnum.PENDING
-
-  await resetExerciseProgress()
-    .then(result => {
-      if (result.status == 200) {
-        feedbackStore.changeBanner(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
-        serverOnline.value = ServerStateEnum.ONLINE
-      }
-
-      showConfirmDeleteExerciseProgressDialog.value = false
-    })
-}
+const preferenceStore = usePreferencesStore()
 
+preferenceStore.getServerState()
 </script>
 
 <template>
@@ -64,36 +18,32 @@ async function resetExerciseProg() {
     <v-row>
       <v-col>
         {{ $t('preferences.serverState') }}:
-        <span v-if="serverOnline == ServerStateEnum.ONLINE" class="text-green">
+        <span v-if="preferenceStore.serverState == ServerStateEnum.ONLINE" class="text-green">
           <v-icon icon="mdi-check" />
           Online
         </span>
 
-        <span v-else-if="serverOnline == ServerStateEnum.OFFLINE" class="text-red">
+        <span v-else-if="preferenceStore.serverState == ServerStateEnum.OFFLINE" class="text-red">
           <v-icon icon="mdi-alert-circle" />
           Offline
         </span>
 
-        <span v-else-if="serverOnline == ServerStateEnum.PENDING" class="text-orange">
+        <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>
-        Software Version: {{ packageJson.version }}
-      </v-col>
-    </v-row>
+    
 
     <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
-          @click="showConfirmDeleteDbDialog = true"
+          @click="preferenceStore.showDeleteDbDialog = true"
           prepend-icon="mdi-database-refresh"
           color="red"
-          :disabled="serverOnline != ServerStateEnum.ONLINE"
+          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
         >
           {{ $t('preferences.resetDatabase.resetDatabase') }}
         </outlined-button>
@@ -103,10 +53,10 @@ async function resetExerciseProg() {
     <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
-        @click="showConfirmDeleteExerciseProgressDialog = true"
+        @click="preferenceStore.showDeleteExerciseDialog = true"
           prepend-icon="mdi-progress-close"
           color="red"
-          :disabled="serverOnline != ServerStateEnum.ONLINE"
+          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
         >
           {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
         </outlined-button>
@@ -118,15 +68,17 @@ async function resetExerciseProg() {
   <confirm-dialog
     :title="$t('preferences.resetDatabase.dialog.title')"
     :description="$t('preferences.resetDatabase.dialog.description')"
-    v-model="showConfirmDeleteDbDialog"
-    :onConfirm="resetDb"
+    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="showConfirmDeleteExerciseProgressDialog"
-    :onConfirm="resetExerciseProg"
+    v-model="preferenceStore.showDeleteExerciseDialog"
+    :onConfirm="preferenceStore.resetExerciseProg"
+    :loading="preferenceStore.fetchInProgress"
   />
 </template>