From 48bfcc9c75bc2e2c5b2f0eef3a3de2b58b16e167 Mon Sep 17 00:00:00 2001
From: TobiZog <developer@zoghaib.de>
Date: Tue, 8 Oct 2024 14:30:39 +0200
Subject: [PATCH] Implement URL XSS attack

---
 README.md                                     | 14 +++++
 misc/database.drawio                          |  6 +--
 software/backend/routes/api.routes.ts         | 10 +++-
 software/backend/routes/events.routes.ts      |  1 +
 software/backend/routes/exercise.routes.ts    | 19 +++++++
 software/backend/scripts/databaseHelper.ts    | 27 ++++++----
 software/src/App.vue                          | 14 ++++-
 .../src/components/basics/confirmDialog.vue   | 12 +++--
 .../src/components/navigation/footerItems.vue | 53 +++++++++++++++++++
 software/src/data/api/exerciseApi.ts          |  6 +++
 software/src/data/stores/shoppingStore.ts     |  8 +--
 software/src/locales/de.json                  | 16 +++---
 software/src/locales/en.json                  | 16 +++---
 .../events/bandDetailPage/ratingSection.vue   |  2 +-
 .../src/pages/events/eventsPage/filterBar.vue | 20 ++++++-
 .../src/pages/events/eventsPage/index.vue     | 10 +++-
 .../system/preferencesPage/pageSetup.vue      | 16 ++++--
 .../system/preferencesPage/systemSetup.vue    | 30 +++++++----
 software/src/scripts/concertScripts.ts        | 24 +++++++--
 19 files changed, 243 insertions(+), 61 deletions(-)
 create mode 100644 software/src/components/navigation/footerItems.vue

diff --git a/README.md b/README.md
index 2beef5f..871d5d9 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,20 @@ The frontend runs on `http://localhost:5173/` and the backend on `http://localho
 
 TODO
 
+
+## Exercises
+
+### Group 0
+#### Exercise 1
+
+Solution: Create an account by click on the Account symbol (top right) -> Button "Create a new Account" -> "Create Account"
+
+### Group 3
+#### Exercise 1
+
+Solution: `http://localhost:5173/events?city=Hannover&genre=<iframe src="javascript:alert(`xss`)">` or `http://localhost:5173/events?city=<iframe src="javascript:alert(`xss`)">`
+
+
 ## Structure
 
 ### Database
diff --git a/misc/database.drawio b/misc/database.drawio
index 68b03a9..23f973b 100644
--- a/misc/database.drawio
+++ b/misc/database.drawio
@@ -1,6 +1,6 @@
 <mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.17 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36" version="24.7.17">
   <diagram name="Page-1" id="WevClHWmhzPAQ7FDN5po">
-    <mxGraphModel dx="3021" dy="1221" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="4728" dy="2205" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -862,7 +862,7 @@
             <mxPoint x="-561.2099999999999" y="180" as="targetPoint" />
           </mxGeometry>
         </mxCell>
-        <mxCell id="4QbvcL21_BjxR5MsDnpr-1" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Exercises&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#d80073;strokeColor=#A50040;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="4QbvcL21_BjxR5MsDnpr-1" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;Exercises&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#647687;strokeColor=#314354;fontColor=#ffffff;" vertex="1" parent="1">
           <mxGeometry x="-920" y="760" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="4QbvcL21_BjxR5MsDnpr-2" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;name: String&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
@@ -871,7 +871,7 @@
         <mxCell id="4QbvcL21_BjxR5MsDnpr-3" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
           <mxGeometry x="-920" y="790" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="4QbvcL21_BjxR5MsDnpr-4" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;ExerciseGroups&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#d80073;strokeColor=#A50040;fontColor=#ffffff;" vertex="1" parent="1">
+        <mxCell id="4QbvcL21_BjxR5MsDnpr-4" value="&lt;blockquote style=&quot;margin: 0px; border: none; padding: 0px;&quot;&gt;&lt;b&gt;&lt;u&gt;ExerciseGroups&lt;/u&gt;&lt;/b&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=center;fillColor=#647687;strokeColor=#314354;fontColor=#ffffff;" vertex="1" parent="1">
           <mxGeometry x="-920" y="560" width="160" height="30" as="geometry" />
         </mxCell>
         <mxCell id="4QbvcL21_BjxR5MsDnpr-5" value="&lt;blockquote style=&quot;margin: 0px 0px 0px 8px; border: none; padding: 0px;&quot;&gt;&lt;u&gt;id:&amp;nbsp;&lt;/u&gt;&lt;u style=&quot;background-color: initial;&quot;&gt;Number&lt;/u&gt;&lt;/blockquote&gt;" style="rounded=0;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
diff --git a/software/backend/routes/api.routes.ts b/software/backend/routes/api.routes.ts
index 39ae630..d55f752 100644
--- a/software/backend/routes/api.routes.ts
+++ b/software/backend/routes/api.routes.ts
@@ -1,5 +1,5 @@
 import { Request, Response, NextFunction, Router } from 'express'
-import { deleteAllTables, prepopulateDatabase } from '../scripts/databaseHelper'
+import { deleteAllTables, deleteExerciseProgressTables, prepopulateDatabase, prepopulateExerciseDatabase } from '../scripts/databaseHelper'
 
 export const api = Router()
 
@@ -15,5 +15,13 @@ api.get("/resetdatabase", async (req: Request, res: Response, next: NextFunction
   await prepopulateDatabase()
 
   // Step 3: Send status back
+  res.status(200).send()
+})
+
+api.get("/resetExerciseProgress", async (req: Request, res: Response, next: NextFunction) => {
+  deleteExerciseProgressTables()
+  
+  await prepopulateExerciseDatabase()
+  
   res.status(200).send()
 })
\ No newline at end of file
diff --git a/software/backend/routes/events.routes.ts b/software/backend/routes/events.routes.ts
index d8353d8..382ea3b 100644
--- a/software/backend/routes/events.routes.ts
+++ b/software/backend/routes/events.routes.ts
@@ -43,6 +43,7 @@ events.get("/", async (req: Request, res: Response) => {
     include: [
       {
         model: Concert,
+        required: true,
         include: [
           {
             model: Location,
diff --git a/software/backend/routes/exercise.routes.ts b/software/backend/routes/exercise.routes.ts
index 32aa8bb..3e684f4 100644
--- a/software/backend/routes/exercise.routes.ts
+++ b/software/backend/routes/exercise.routes.ts
@@ -20,4 +20,23 @@ exercises.get("/", (req: Request, res: Response) => {
   ).then(result => {
     res.status(200).json(result)
   })
+})
+
+exercises.post("/:groupNr/:exerciseNr/:state", (req: Request, res: Response) => {
+  console.log(req.params.groupNr)
+  ExerciseGroup.findOne({
+    where: { groupNr: req.params.groupNr }
+  })
+    .then(group => {
+      Exercise.findOne({
+        where: {
+          exerciseNr: req.params.exerciseNr,
+          exerciseGroupId: group.id
+        }
+      })
+        .then(exercise => {
+          exercise.update({ solved: req.params.state == "1"})
+          res.status(200).send()
+        })
+    })
 })
\ No newline at end of file
diff --git a/software/backend/scripts/databaseHelper.ts b/software/backend/scripts/databaseHelper.ts
index 7dad791..8950195 100644
--- a/software/backend/scripts/databaseHelper.ts
+++ b/software/backend/scripts/databaseHelper.ts
@@ -42,6 +42,7 @@ export function deleteAllTables() {
   Band.destroy({ truncate: true })
   Event.destroy({ truncate: true })
 
+  City.destroy({ truncate: true })
   Location.destroy({ truncate: true })
   Concert.destroy({ truncate: true })
   SeatGroup.destroy({ truncate: true })
@@ -52,11 +53,26 @@ export function deleteAllTables() {
   Payment.destroy({ truncate: true })
   Account.destroy({ truncate: true })
   AccountRole.destroy({ truncate: true})
+}
 
+export function deleteExerciseProgressTables() {
   Exercise.destroy({truncate: true})
   ExerciseGroup.destroy({truncate: true})
 }
 
+export async function prepopulateExerciseDatabase() {
+  for (let exerciseGroup of exercises.data) {
+    ExerciseGroup.create(exerciseGroup)
+      .then(async dataset => {
+        for (let exercise of exerciseGroup.exercises) {
+          exercise["exerciseGroupId"] = dataset.id
+
+          await Exercise.create(exercise)
+        }
+      })
+  }
+}
+
 /**
  * Insert default datasets in the database tables
  */
@@ -195,15 +211,4 @@ export async function prepopulateDatabase() {
         }
       })
   }
-
-  for (let exerciseGroup of exercises.data) {
-    ExerciseGroup.create(exerciseGroup)
-      .then(async dataset => {
-        for (let exercise of exerciseGroup.exercises) {
-          exercise["exerciseGroupId"] = dataset.id
-
-          await Exercise.create(exercise)
-        }
-      })
-  }
 }
\ No newline at end of file
diff --git a/software/src/App.vue b/software/src/App.vue
index 98b2e3a..72ce751 100644
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -8,11 +8,13 @@ import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
 import { useConcertStore } from './data/stores/concertStore';
 import { LocationModel } from './data/models/locations/locationModel';
+import { useShoppingStore } from './data/stores/shoppingStore';
+import footerItems from './components/navigation/footerItems.vue';
 
 const preferencesStore = usePreferencesStore()
 const concertStore = useConcertStore()
 const feedbackStore = useFeedbackStore()
-
+const shoppingStore = useShoppingStore()
 const theme = useTheme()
 
 theme.global.name.value = preferencesStore.theme
@@ -80,9 +82,19 @@ watch(() => concertStore.genreFilter, () => {
       <!-- Here changes the router the content -->
       <v-container max-width="1400" class="py-0" height="100%">
         <v-sheet color="sheet" height="100%">
+          <v-sheet color="primary" >
+            <v-breadcrumbs class="position-absolute">
+              <v-breadcrumbs-item />
+            </v-breadcrumbs>
+          </v-sheet>
+
           <router-view></router-view>
         </v-sheet>
       </v-container>
+
+      <v-footer color="secondary">
+        <footer-items />
+      </v-footer>
     </v-main>
   </v-app>
 </template>
\ No newline at end of file
diff --git a/software/src/components/basics/confirmDialog.vue b/software/src/components/basics/confirmDialog.vue
index 76e8606..dceac9b 100644
--- a/software/src/components/basics/confirmDialog.vue
+++ b/software/src/components/basics/confirmDialog.vue
@@ -23,11 +23,13 @@ function confirmPressed() {
     max-width="400"
     v-model="showDialog"
   >
-    <v-row>
-      <v-col>
-        {{ description }}
-      </v-col>
-    </v-row>
+    <v-container>
+      <v-row>
+        <v-col>
+          {{ description }}
+        </v-col>
+      </v-row>
+    </v-container>
 
     <template #actions>
       <outlined-button
diff --git a/software/src/components/navigation/footerItems.vue b/software/src/components/navigation/footerItems.vue
new file mode 100644
index 0000000..954b934
--- /dev/null
+++ b/software/src/components/navigation/footerItems.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { getAllExerciseGroups, updateExercise } from '@/data/api/exerciseApi';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+const routeItems = ref(route.path.split('/'))
+
+function solveExerciseXssInUrl() {
+  updateExercise(3, 1, true)
+}
+
+watch(() => route.path, () => {
+  routeItems.value = route.path.split("/")
+  routeItems.value = routeItems.value.filter(value => value != "")
+  
+  for (let item in routeItems.value) {
+    item.charAt(0).toUpperCase() + item.slice(1)
+  }
+})
+</script>
+
+<template>
+    <v-row>
+      <v-spacer />
+
+      <v-col>
+        {{ $t('youAreHere') }}
+        <v-breadcrumbs :items="routeItems">
+          <template v-slot:title="{ item }">
+            {{ item.title.charAt(0).toUpperCase() + item.title.slice(1) }}
+          </template>
+
+          <template v-slot:divider>
+            <v-icon icon="mdi-forward"></v-icon>
+          </template>
+        </v-breadcrumbs>
+      </v-col>
+
+      <v-col>
+        Filter:
+        <div v-for="query in route.query" v-html="query" />
+
+        <div v-for="query in route.query">
+          <span v-if="String(query).startsWith('<iframe')">
+            {{ solveExerciseXssInUrl() }}
+          </span>
+        </div>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+</template>
\ No newline at end of file
diff --git a/software/src/data/api/exerciseApi.ts b/software/src/data/api/exerciseApi.ts
index 38044da..6e21043 100644
--- a/software/src/data/api/exerciseApi.ts
+++ b/software/src/data/api/exerciseApi.ts
@@ -4,4 +4,10 @@ const BASE_URL = "http://localhost:3000/exercises"
 
 export async function getAllExerciseGroups() {
   return await axios.get(BASE_URL)
+}
+
+export async function updateExercise(exerciseGroupNr: number, exerciseNr: number, state: boolean) {
+  let url = BASE_URL + "/" + exerciseGroupNr + "/" + exerciseNr + "/" + (state ? "1" : "0")
+
+  return await axios.post(url)
 }
\ No newline at end of file
diff --git a/software/src/data/stores/shoppingStore.ts b/software/src/data/stores/shoppingStore.ts
index 6fabe04..0aabd14 100644
--- a/software/src/data/stores/shoppingStore.ts
+++ b/software/src/data/stores/shoppingStore.ts
@@ -13,8 +13,8 @@ export const useShoppingStore = defineStore("shoppingStore", {
     events: ref<Array<EventModel>>([]),
     cities: ref<Array<CityModel>>([]),
     genres: ref<Array<GenreModel>>([]),
-    cityFilterName: ref<String>(),
-    genreFilterName: ref<String>()
+    cityFilterName: ref<string>(),
+    genreFilterName: ref<string>()
   }),
 
   actions: {
@@ -23,8 +23,8 @@ export const useShoppingStore = defineStore("shoppingStore", {
       feedbackStore.fetchDataFromServerInProgress = true
 
       await fetchEvents(
-        this.cityFilterName != null ? this.cityFilterName : "",
-        this.genreFilterName != null ? this.genreFilterName : ""
+        this.cityFilterName != null && this.cityFilterName != "undefined" && !this.cityFilterName.startsWith("<") ? this.cityFilterName : "",
+        this.genreFilterName != null && this.genreFilterName != "undefined" && !this.genreFilterName.startsWith("<") ? this.genreFilterName : ""
       )
         .then(result => {
           this.events = result.data
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index ff44328..ab33998 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -5,13 +5,17 @@
   "topLocations": "Top Veranstaltungsorte",
   "tickets": "Ticket | Tickets",
   "concert": "Konzert | Konzerte",
+  "resetPreferences": "Einstellungen zurücksetzen",
+  "resetDatabase": "Datenbank zurücksetzen",
+  "resetConfirm": {
+    "title": "Datenbank zurücksetzen?",
+    "description": "Soll die Datenbank des Servers wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden! Der Bearbeitungsfortschritt der Aufgaben wird nicht gelöscht."
+  },
   "preferences": {
     "pageSetup": "Seiteneinstellungen",
     "selectedTheme": "Ausgewähltes Theme",
     "language": "Sprache",
     "systemSetup": "Systemeinstellungen",
-    "resetDatabase": "Datenbank zurücksetzen",
-    "resetPreferences": "Einstellungen zurücksetzen",
     "resetConfirm": "Soll die Datenbank wirklich zurückgesetzt werden?"
   },
   "product": {
@@ -93,10 +97,6 @@
     "deleteAccount": {
       "title": "Account löschen?",
       "description": "Soll der Account wirklich gelöscht werden? Dieser kann nicht mehr wiederhergestellt werden!"
-    },
-    "resetConfirm": {
-      "title": "Datenbank zurücksetzen?",
-      "description": "Soll die Datenbank des Servers wirklich zurückgesetzt werden? Dies kann nicht rückgänig gemacht werden!"
     }
   },
   "scoreBoard": {
@@ -161,5 +161,7 @@
   "price": "Preis",
   "standingArea": "Stehbereich",
   "exerciseGroup": "Aufgabengruppe",
-  "exercise": "Aufgabe"
+  "exercise": "Aufgabe",
+  "resetProgress": "Aufgabenfortschritt zurücksetzen",
+  "youAreHere": "Du bist hier:"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index a27803a..7f632f8 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -5,13 +5,17 @@
   "topLocations": "Top Locations",
   "tickets": "Ticket | Tickets",
   "concert": "Concert | Concerts",
+  "resetPreferences": "Reset preferences",
+  "resetDatabase": "Reset database",
+  "resetDatabaseConfirm": {
+    "title": "Reset database?",
+    "description": "Do you really want to reset the server database? This can't be undone! Progress will not be deleted."
+  },
   "preferences": {
     "pageSetup": "Page setup",
     "selectedTheme": "Selected theme",
     "language": "Language",
     "systemSetup": "System setup",
-    "resetDatabase": "Reset database",
-    "resetPreferences": "Reset preferences",
     "resetConfirm": "Really reset the database?"
   },
   "product": {
@@ -93,10 +97,6 @@
     "deleteAccount": {
       "title": "Delete account?",
       "description": "Do you really want to delete the account? This can't be undone!"
-    },
-    "resetConfirm": {
-      "title": "Reset database?",
-      "description": "Do you really want to reset the server database? This can't be undone!"
     }
   },
   "scoreBoard": {
@@ -161,5 +161,7 @@
   "price": "Price",
   "standingArea": "Standing Area",
   "exerciseGroup": "Exercise group",
-  "exercise": "Exercise"
+  "exercise": "Exercise",
+  "resetProgress": "Reset Exercise Progress",
+  "youAreHere": "You are here:"
 }
diff --git a/software/src/pages/events/bandDetailPage/ratingSection.vue b/software/src/pages/events/bandDetailPage/ratingSection.vue
index 9251228..41c6a9a 100644
--- a/software/src/pages/events/bandDetailPage/ratingSection.vue
+++ b/software/src/pages/events/bandDetailPage/ratingSection.vue
@@ -30,7 +30,7 @@ defineProps({
           readonly
         />
 
-        <div class="px-3">{{ band.ratings.length }} Bewertungen</div>
+        <div class="px-3">{{ band.ratings.length }} {{ $t('rating', band.ratings.length) }}</div>
       </div>
     </v-col>
 
diff --git a/software/src/pages/events/eventsPage/filterBar.vue b/software/src/pages/events/eventsPage/filterBar.vue
index a6adc54..b9db999 100644
--- a/software/src/pages/events/eventsPage/filterBar.vue
+++ b/software/src/pages/events/eventsPage/filterBar.vue
@@ -4,8 +4,10 @@ import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { CityModel } from '@/data/models/locations/cityModel';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
+import { useRoute, useRouter } from 'vue-router';
 
 const shoppingStore = useShoppingStore()
+const router = useRouter()
 
 shoppingStore.getCities()
 shoppingStore.getGenres()
@@ -21,6 +23,22 @@ function itemPropsGenre(genre: GenreModel) {
     title: genre.name
   }
 }
+
+function filter() {
+  let queries = {}
+
+  if (shoppingStore.cityFilterName != null && shoppingStore.cityFilterName != "undefined") {
+    queries["city"] = shoppingStore.cityFilterName
+  }
+
+  if (shoppingStore.genreFilterName != null && shoppingStore.genreFilterName != "undefined") {
+    queries["genre"] = shoppingStore.genreFilterName
+  }
+
+  router.push({ path: '/events', query: queries})
+
+  shoppingStore.getEvents()
+}
 </script>
 
 <template>
@@ -64,7 +82,7 @@ function itemPropsGenre(genre: GenreModel) {
         <outlined-button
           height="100%"
           append-icon="mdi-chevron-right"
-          @click="shoppingStore.getEvents()"
+          @click="filter"
         >
           {{ $t('filtering') }}
         </outlined-button>
diff --git a/software/src/pages/events/eventsPage/index.vue b/software/src/pages/events/eventsPage/index.vue
index 700c05f..0b7409b 100644
--- a/software/src/pages/events/eventsPage/index.vue
+++ b/software/src/pages/events/eventsPage/index.vue
@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
 import filterBar from './filterBar.vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
 import concertListItem from '@/components/pageParts/concertListItem.vue';
+import { useTemplateRef } from 'vue';
 
+const route = useRoute()
 const router = useRouter()
 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
 
+// Load query attributes
+shoppingStore.cityFilterName = String(route.query.city)
+shoppingStore.genreFilterName = String(route.query.genre)
+
 shoppingStore.getEvents()
 </script>
 
@@ -17,6 +23,7 @@ shoppingStore.getEvents()
   <v-container>
     <v-row>
       <v-spacer />
+      <!-- <div v-html="route.query.genre" /> -->
 
       <v-col cols="10">
         <v-row>
@@ -44,6 +51,7 @@ shoppingStore.getEvents()
 
             <div class="text-h5">
               {{ createDateRangeString(event) }}
+              <!-- {{ console.log(event.concerts) }} -->
             </div>
 
             <div class="text-h5">
diff --git a/software/src/pages/system/preferencesPage/pageSetup.vue b/software/src/pages/system/preferencesPage/pageSetup.vue
index 30e8634..f0fbd5b 100644
--- a/software/src/pages/system/preferencesPage/pageSetup.vue
+++ b/software/src/pages/system/preferencesPage/pageSetup.vue
@@ -19,7 +19,10 @@ function changeLanguage() {
 </script>
 
 <template>
-  <card-view :title="$t('preferences.pageSetup')" prepend-icon="mdi-view-dashboard" elevation="8">
+  <card-view
+    :title="$t('preferences.pageSetup')"
+    icon="mdi-view-dashboard"
+  >
     <v-row>
       <v-col>
         <v-select
@@ -27,15 +30,20 @@ function changeLanguage() {
           :items="themeEnums"
           :label="$t('preferences.selectedTheme')"
           @update:model-value="changeTheme"
+          hide-details
         />
       </v-col>
     </v-row>
 
     <v-row>
       <v-col>
-        <v-select v-model="preferencesStore.language" :items="$i18n.availableLocales" :label="$t('preferences.language')"
-        @update:model-value="changeLanguage"
-      />
+        <v-select
+          v-model="preferencesStore.language"
+          :items="$i18n.availableLocales" 
+          :label="$t('preferences.language')"
+          @update:model-value="changeLanguage"
+          hide-details
+        />
       </v-col>
     </v-row>
   </card-view>
diff --git a/software/src/pages/system/preferencesPage/systemSetup.vue b/software/src/pages/system/preferencesPage/systemSetup.vue
index a765a20..3d60e32 100644
--- a/software/src/pages/system/preferencesPage/systemSetup.vue
+++ b/software/src/pages/system/preferencesPage/systemSetup.vue
@@ -7,6 +7,7 @@ import { ref } from 'vue';
 import confirmDialog from '@/components/basics/confirmDialog.vue';
 import { getServerState, resetDatabase } from '@/data/api/mainApi';
 import { ServerStateEnum } from '@/data/enums/serverStateEnum';
+import packageJson from './../../../../package.json'
 
 const feedbackStore = useFeedbackStore()
 const showConfirmDialog = ref(false)
@@ -38,16 +39,12 @@ async function resetDb() {
   showConfirmDialog.value = false
   // todo: Request all data
 }
-
-function resetSettings() {
-  // todo
-}
 </script>
 
 <template>
   <card-view
     :title="$t('preferences.systemSetup')"
-    prepend-icon="mdi-engine"
+    icon="mdi-engine"
   >
     <v-row>
       <v-col>
@@ -68,6 +65,13 @@ function resetSettings() {
         </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
@@ -76,23 +80,27 @@ function resetSettings() {
           color="red"
           :disabled="serverOnline != ServerStateEnum.ONLINE"
         >
-          {{ $t('preferences.resetDatabase') }}
+          {{ $t('resetDatabase') }}
         </outlined-button>
       </v-col>
+    </v-row>
+
+    <v-row>
       <v-col class="d-flex justify-center align-center">
         <outlined-button
-          @click="resetSettings"
-          prepend-icon="mdi-cog-counterclockwise"
+          prepend-icon="mdi-progress-close"
+          color="red"
         >
-          {{ $t('preferences.resetPreferences') }}
+          {{ $t('resetProgress') }}
         </outlined-button>
       </v-col>
     </v-row>
   </card-view>
 
+
   <confirm-dialog
-    :title="$t('dialog.resetConfirm.title')"
-    :description="$t('dialog.resetConfirm.description')"
+    :title="$t('resetDatabaseConfirm.title')"
+    :description="$t('resetDatabaseConfirm.description')"
     v-model="showConfirmDialog"
     :onConfirm="resetDb"
   />
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index 17ebb30..82e8554 100644
--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -49,15 +49,23 @@ export function calcRatingValues(ratings: Array<RatingModel>) {
   return ratingValues
 }
 
-export function createDateRangeString(tour: TourModel) {
-  const dateArray = []
 
-  for (let concert of tour.concerts) {
+/**
+ * Create a date range string of all concerts from an Event
+ * 
+ * @param event EventModel with a list of concerts
+ * 
+ * @returns A date string. If one concert: dd.MM.YYYY, if two or more: dd.MM.YYYY - dd.MM.YYYY
+ */
+export function createDateRangeString(event: EventModel) {
+  const dateArray: Array<Date> = []
+
+  for (let concert of event.concerts) {
     dateArray.push(new Date(concert.date))
   }
 
   dateArray.sort(function (a, b) {
-    return a - b
+    return a.getUTCMilliseconds() - b.getUTCMilliseconds()
   })
 
 
@@ -69,6 +77,14 @@ export function createDateRangeString(tour: TourModel) {
   }
 }
 
+
+/**
+ * Search in all concerts of an Event for the show with the lowest price
+ * 
+ * @param event EventModel with a list of concerts
+ * 
+ * @returns Lowest ticket price, rounded to two floating point digits
+ */
 export function lowestTicketPrice(event: EventModel): string {
   const priceArray : Array<number> = []