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

2024-11-01 03:56:38 +01:00
parent b6205f374b
commit 9052c59254
10 changed files with 209 additions and 75 deletions
--- a/software/backend/data/exercises.json
+++ b/software/backend/data/exercises.json
@@ -27,7 +27,32 @@
      "nameDe": "SQL Injections",
      "nameEn": "SQL Injections",
      "groupNr": 1,
-      "exercises": []
+      "exercises": [
+        {
+          "nameDe": "Accountnamen auslesen",
+          "nameEn": "Readout account names",
+          "exerciseNr": 1,
+          "descriptionDe": "Lasse dir alle Accountnamen über das Suchfeld ausgeben",
+          "descriptionEn": "Readout all account names via the search field",
+          "solved": false
+        },
+        {
+          "nameDe": "Passwort auslesen",
+          "nameEn": "Readout password",
+          "exerciseNr": 2,
+          "descriptionDe": "Versuche ein Passwort aus der Datenbank eines Accounts auszulesen",
+          "descriptionEn": "Get the password of an account from the database",
+          "solved": false
+        },
+        {
+          "nameDe": "Verändere deine Account Berechtigungen",
+          "nameEn": "Change your account role",
+          "exerciseNr": 3,
+          "descriptionDe": "Ändere die Berechtigungen deines Accounts",
+          "descriptionEn": "Change the privileges of your account",
+          "solved": false
+        }
+      ]
    },
    {
      "nameDe": "Broken Access Control",
@@ -41,6 +66,14 @@
          "descriptionDe": "Manipuliere die URL so, dass du das Admin-Panel erreichen kannst",
          "descriptionEn": "Manipulate the URL and access the admin panel",
          "solved": false
+        },
+        {
+          "nameDe": "Das versteckte Konzert buchen",
+          "nameEn": "Book the hidden concert",
+          "exerciseNr": 2,
+          "descriptionDe": "Manipuliere die URL so, dass du das ausgebuchte Konzert aufrufen kannst und buche ein Ticket dafür",
+          "descriptionEn": "Manipulate the URL and access the sold out concert and buy a ticket",
+          "solved": false
        }
      ]
    },
@@ -56,6 +89,22 @@
          "descriptionDe": "Nimm dir eine URL des Shops und erweitere sie mit JavaScript Code so, dass beim Öffnen des Links eine 'Hallo Welt' Nachricht erscheint",
          "descriptionEn": "Take an URL of the shop and extend it with JavaScript code so that a 'Hello World' message appears whent the link is opened",
          "solved": false
+        },
+        {
+          "nameDe": "Ein externes Script aufrufen",
+          "nameEn": "Run an external script",
+          "exerciseNr": 2,
+          "descriptionDe": "Bearbeite die URL des Shops so, dass du das Script ausführen kannst",
+          "descriptionEn": "Create an URL of the shop, which calls the script",
+          "solved": false
+        },
+        {
+          "nameDe": "Hacken mit eigenem Script",
+          "nameEn": "Hack with your script",
+          "exerciseNr": 3,
+          "descriptionDe": "Schreibe eine JavaScript Datei, lade sie über das Admin Panel hoch und kreiere eine URL, welche es ausführt",
+          "descriptionEn": "Write our own JavaScript file, upload it via Admin Panel and create an URL to execute it",
+          "solved": false
        }
      ]
    }
--- a/software/src/components/basics/cardView.vue
+++ b/software/src/components/basics/cardView.vue
@@ -29,8 +29,8 @@ defineProps({
          style="background-color: transparent"
        >
          <div>
-            <div class="pl-2 py-1">
-              <v-icon :icon="icon" v-if="icon" /> &nbsp;{{ title }}
+            <div class="pl-2 py-1 d-flex justify-center">
+              <v-icon :icon="icon" v-if="icon" />&nbsp;{{ title }}
            </div>
            <div>
              <v-card-subtitle >{{ subtitle }}</v-card-subtitle>
@@ -40,9 +40,9 @@ defineProps({
      </v-sheet>
    </v-card-title>

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

-    <v-container>
+    <v-container v-if="$slots.default">
      <v-row>
        <v-col>
          <slot></slot>
--- a/software/src/components/basics/confirmDialog.vue
+++ b/software/src/components/basics/confirmDialog.vue
@@ -8,12 +8,12 @@ const showDialog: ModelRef<boolean> = defineModel()
 const props = defineProps({
  title: String,
  description: String,
-  onConfirm: Function
+  onConfirm: Function,
+  loading: Boolean
 })

 function confirmPressed() {
  props.onConfirm()
-  showDialog.value = false
 }
 </script>

@@ -22,6 +22,7 @@ function confirmPressed() {
    :title="title"
    max-width="400"
    v-model="showDialog"
+    persistent
  >
    {{ description }}

@@ -30,6 +31,7 @@ function confirmPressed() {
        @click="showDialog = false" 
        prepend-icon="mdi-close"
        color="orange"
+        :loading="loading"
      >
        {{ $t("misc.actions.cancel") }}
      </outlined-button>
@@ -38,6 +40,7 @@ function confirmPressed() {
        @click="confirmPressed"
        prepend-icon="mdi-check"
        color="red"
+        :loading="loading"
      >
        {{ $t("misc.actions.confirm") }}
      </outlined-button>
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -143,7 +143,8 @@
        "title": "Übungsfortschritt zurücksetzen?",
        "description": "Soll der Bearbeitungsfortschritt der Übungen wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
      }
-    }
+    },
+    "aboutProject": "Über das Projekt"
  },
  "help": {
    "scoreBoard": {
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -143,7 +143,8 @@
        "title": "Reset exercise progress?",
        "description": "Do you really want to reset the exercise progress? This is permanent!"
      }
-    }
+    },
+    "aboutProject": "About the project"
  },
  "help": {
    "scoreBoard": {
--- a/software/src/pages/misc/preferencesPage/aboutSection.vue
+++ b/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>
--- a/software/src/pages/misc/preferencesPage/index.vue
+++ b/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>
--- a/software/src/pages/misc/preferencesPage/pageSetup.vue
+++ b/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>
--- a/software/src/pages/misc/preferencesPage/systemSetup.vue
+++ b/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>
--- a/software/src/stores/preferences.store.ts
+++ b/software/src/stores/preferences.store.ts
@@ -3,6 +3,10 @@ import { useLocalStorage } from "@vueuse/core";
 import { ThemeEnum } from "../data/enums/themeEnums";
 import { LanguageEnum } from "../data/enums/languageEnum";
 import { ref } from "vue";
+import { fetchServerState, resetDatabase, resetExerciseProgress } from "@/data/api/mainApi";
+import { ServerStateEnum } from "@/data/enums/serverStateEnum";
+import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
+import { useFeedbackStore } from "./feedback.store";

 export const usePreferencesStore = defineStore('preferencesStore', {
  state: () => ({
@@ -13,6 +17,79 @@ export const usePreferencesStore = defineStore('preferencesStore', {
    language: useLocalStorage<LanguageEnum>("hackmycart/preferencesStore/language", LanguageEnum.GERMAN),

    /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
+
+    /** State of the server */
+    serverState: ref<ServerStateEnum>(ServerStateEnum.PENDING),
+
+    /** Show the "Delete DB?" confirm dialog */
+    showDeleteDbDialog: ref(false),
+
+    /** Show the "Delete Exercise progress?" confirm dialog */
+    showDeleteExerciseDialog: ref(false)
  }),
+
+  actions: {
+    /**
+     * Request the state of the backend server
+     */
+    async getServerState() {
+      this.fetchInProgress = true
+
+      fetchServerState()
+        .then(result => {
+          if (result.status == 200) {
+            this.serverState = ServerStateEnum.ONLINE
+          } else {
+            this.serverState = ServerStateEnum.OFFLINE
+          }
+
+          this.fetchInProgress = false
+        })
+        .catch(error => {
+          this.serverState = ServerStateEnum.OFFLINE
+          this.fetchInProgress = false
+        })
+    },
+
+    /**
+     * Resets the database (without exercise tables)
+     */
+    async resetDb() {
+      const feedbackStore = useFeedbackStore()
+      this.serverState = ServerStateEnum.PENDING
+      this.fetchInProgress = true
+
+      await resetDatabase()
+        .then(result => {
+          if (result.status == 200) {
+            feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
+            this.serverState = ServerStateEnum.ONLINE
+          }
+
+          this.fetchInProgress = false
+          this.showDeleteDbDialog = false
+        })
+    },
+
+    /**
+     * Resets the exercise progress
+     */
+    async resetExerciseProg() {
+      const feedbackStore = useFeedbackStore()
+      this.serverState = ServerStateEnum.PENDING
+      this.fetchInProgress = true
+
+      await resetExerciseProgress()
+        .then(result => {
+          if (result.status == 200) {
+            feedbackStore.changeBanner(BannerStateEnum.EXERCISEPROGRESSRESETSUCCESSFUL)
+            this.serverState = ServerStateEnum.ONLINE
+          }
+
+          this.fetchInProgress = false
+          this.showDeleteExerciseDialog = false
+        })
+    }
+  }
 })