Implementing exercise 3.2

backend/images/scripts/test.js

@@ -0,0 +1,25 @@
+let username = document.getElementById("txt-username")
+let password = document.getElementById("txt-password")
+let loginBtn = document.getElementById("btn-login")
+
+console.log("Active")
+
+function grabData() {
+  console.log("Grabbed Username: " + username?.value + ", grabbed password: " + password?.value)
+}
+
+username?.addEventListener("keypress", (event) => {
+  if (event.key === "Enter") {
+    grabData()
+  }
+})
+
+password?.addEventListener("keypress", (event) => {
+  if (event.key === "Enter") {
+    grabData()
+  }
+})
+
+loginBtn?.addEventListener("click", (event) => {
+  grabData()
+})

backend/routes/files.routes.ts

@@ -30,10 +30,14 @@ files.get("/:folder", async (req: Request, res: Response) => {
   let result = []
   let fileNames = fs.readdirSync("./backend/images/" + req.params.folder + "/")
 
+
   fileNames.forEach(file => {
+    let resData = fs.readFileSync("./backend/images/" + req.params.folder + "/" + file, "utf8")
+
     result.push({
       name: file,
       size: fs.statSync("./backend/images/" + req.params.folder + "/" + file).size,
+      content: resData,
       url: "http://localhost:3000/static/" + req.params.folder + "/" + file
     })
   })

src/components/navigation/companyFooter.vue

@@ -52,9 +52,13 @@ watch(() => route.path, () => {
 
           <!-- Logic to check, if exercise 3.1 is solved -->
           <div v-for="query in route.query">
-            <span v-if="String(query).startsWith('<iframe')">
+            <span v-if="String(query).startsWith('<img src=1 onerror=alert(')">
               {{ exerciseStore.solveExercise(3, 1) }}
             </span>
+
+            <span v-if="String(query).startsWith('<img src=1 onerror=import(')">
+              {{ exerciseStore.solveExercise(3, 2) }}
+            </span>
           </div>
         </v-col>
       </v-row>

src/components/navigation/urlBar.vue

@@ -10,6 +10,10 @@ function navigate() {
   router.push(newPath)
 }
 
+function refreshPage() {
+  window.location.reload()
+}
+
 watch(() => router.currentRoute.value.fullPath, () => {
   path.value = "https://www.eventmaster.com" + router.currentRoute.value.fullPath
 })
@@ -61,7 +65,7 @@ watch(() => router.currentRoute.value.fullPath, () => {
         <v-btn
           density="comfortable"
           icon="mdi-refresh"
-          @click="router.replace({ path: router.currentRoute.value.fullPath })"
+          @click="refreshPage()"
         />
       </v-col>
 

src/pages/account/loginPage/loginForm.vue

@@ -2,6 +2,7 @@
 import cardView from '@/components/basics/cardView.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { useAccountStore } from '@/stores/account.store';
+import { watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 const accountStore = useAccountStore()
@@ -33,6 +34,7 @@ async function startLogin() {
           variant="outlined"
           clearable
           @keyup.enter="startLogin"
+          id="txt-username"
         />
       </v-col>
     </v-row>
@@ -47,6 +49,7 @@ async function startLogin() {
           v-model="accountStore.loginData.password"
           clearable
           @keyup.enter="startLogin"
+          id="txt-password"
         />
       </v-col>
     </v-row>
@@ -65,6 +68,7 @@ async function startLogin() {
         @click="startLogin"
         :loading="accountStore.fetchInProgress"
         color="green"
+        id="btn-login"
       >
         {{ $t('account.login.login') }}
       </outlined-button>

src/pages/admin/filesAdminPage/index.vue

@@ -16,6 +16,7 @@ filesStore.getStaticFolders()
     :add-button-string="$t('misc.uploadFile')"
     :fetch-in-progress="filesStore.fetchInProgress"
     :on-add-click="() => { filesStore.showFileUploadDialog = true }"
+    :hide-add-button="true" 
   >
     <v-row >
       <v-col cols="2" class="border">
@@ -48,9 +49,28 @@ filesStore.getStaticFolders()
       </v-col>
 
       <v-col class="border">
-        <v-img
+        <v-row>
-          v-if="filesStore.selectedFile != undefined"
+          <v-col>
-          :src="filesStore.selectedFile.url" max-height="400" />
+            {{ filesStore.selectedFile.url }}
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-textarea
+              v-if="filesStore.selectedFile != undefined && filesStore.selectedFile.name.endsWith('html')"
+              :model-value="filesStore.selectedFile.content"
+              variant="outlined"
+              label="Content"
+              height="300"
+              rows="30"
+            />
+            <v-img
+              v-else-if="filesStore.selectedFile != undefined"
+              :src="filesStore.selectedFile.url" max-height="400"
+            />
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
   </admin-data-layout>

src/stores/files.store.ts

@@ -12,9 +12,9 @@ export const useFilesStore = defineStore('filesStore', {
     selectedFolder: ref<{name: string, nrOfItems: number}>(),
 
     /** List of files on the server */
-    staticFiles: ref<Array<{name: string, size: number, url: string}>>([]),
+    staticFiles: ref<Array<{name: string, size: number, content: string, url: string}>>([]),
 
-    selectedFile: ref<{name: string, size: number, url: string}>(),
+    selectedFile: ref<{name: string, size: number, content: string, url: string}>(),
 
     showFileUploadDialog: ref(false),