Implement URL XSS attack

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>
 

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>

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

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>

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