From f051c0ba72b52bc88868b7f0a43c2b91b3e9a001 Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 13:54:44 +0200
Subject: [PATCH 1/7] Implements a "warn" prop for "Input.vue" that warns
 instead of errors when

the regex is not valid. Uses it for the username to allow for uncommon usernames

that are currently not accounted for with teh regex.
---
 .../settings/components/Input.vue             | 107 ++++++++++++------
 .../settings/composables/logins.ts            |  40 +++----
 .../onboardingPages/04_LoginAccept.vue        |  65 ++++++-----
 .../settings/settingPages/AutoLogin.vue       | 104 +++++++++--------
 4 files changed, 178 insertions(+), 138 deletions(-)

diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 1984c7b4..011c9d8c 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,90 +7,123 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      >
+      />
       <component
         :is="statusIcon"
-        :class="`input__icon ${modelValue.length > 0 ? 'input__icon--visible' : ''}`"
+        :class="`input__icon ${
+          modelValue.length > 0 ? 'input__icon--visible' : ''
+        }`"
       />
     </div>
     <span
-      :style="`opacity: ${!valid && modelValue.length > 0 ? 1 : 0}`"
-    >{{ errorMessage }}</span>
+      :style="`opacity: ${(!valid || warn) && modelValue.length > 0 ? 1 : 0}`"
+      >{{ errorMessage }}</span
+    >
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType, computed, onMounted, watchEffect } from 'vue'
-import { PhXCircle, PhCheckCircle } from '@dnlsndr/vue-phosphor-icons'
+import {
+  defineComponent,
+  ref,
+  PropType,
+  computed,
+  onMounted,
+  watchEffect,
+} from "vue";
+import {
+  PhXCircle,
+  PhCheckCircle,
+  PhWarningCircle,
+} from "@dnlsndr/vue-phosphor-icons";
 
 export default defineComponent({
   components: {
     PhXCircle,
-    PhCheckCircle
+    PhCheckCircle,
+    PhWarningCircle,
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: 'text'
+      default: "text",
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null
+      default: null,
     },
     modelValue: {
       type: String as PropType<string>,
-      default: ''
+      default: "",
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false
+      default: false,
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false
-    }
+      default: false,
+    },
+    warn: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
-  emits: ['update:modelValue', 'update:valid'],
-  setup (props, { emit }) {
-    const statusIcon = ref('PhCheckCircle')
-    const state = ref('')
+  emits: ["update:modelValue", "update:valid"],
+  setup(props, { emit }) {
+    const statusIcon = ref("PhCheckCircle");
+    const state = ref("");
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue))
+    const correctPattern = computed(() => props.pattern.test(props.modelValue));
 
-    const emitState = ($event : Event) => {
-      const target = $event.target as HTMLInputElement
-      emit('update:modelValue', target.value)
-      emit('update:valid', correctPattern.value)
-    }
+    const emitState = ($event: Event) => {
+      const target = $event.target as HTMLInputElement;
+      emit("update:modelValue", target.value);
+      emit("update:valid", correctPattern.value || props.warn);
+    };
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
-        state.value = correctPattern.value ? 'input--correct' : 'input--false'
-        statusIcon.value = correctPattern.value ? 'PhCheckCircle' : 'PhXCircle'
-        emit('update:valid', correctPattern.value)
-      } else { state.value = '' }
-    })
+        state.value = correctPattern.value
+          ? "input--correct"
+          : props.warn
+          ? "input--warn"
+          : "input--false";
+        statusIcon.value = correctPattern.value
+          ? "PhCheckCircle"
+          : props.warn
+          ? "PhWarningCircle"
+          : "PhXCircle";
+        emit("update:valid", correctPattern.value || props.warn);
+      } else {
+        state.value = "";
+      }
+    });
 
     onMounted(() => {
-      if (props.column) { document.querySelectorAll('.input-container')?.forEach((el) => el.classList.add('input-container--column')) }
-    })
+      if (props.column) {
+        document
+          .querySelectorAll(".input-container")
+          ?.forEach((el) => el.classList.add("input-container--column"));
+      }
+    });
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state
-    }
-  }
-})
+      state,
+    };
+  },
+});
 </script>
 
 <style lang="sass" scoped>
@@ -124,6 +157,8 @@ html:not(.light) .input-container--column
 
     &--correct
         --clr-state: var(--clr-primary)
+    &--warn
+        --clr-state: var(--clr-warning)
     &--false
         --clr-state: var(--clr-alert)
 
diff --git a/src/freshContent/settings/composables/logins.ts b/src/freshContent/settings/composables/logins.ts
index 51d6fa36..e5a17849 100644
--- a/src/freshContent/settings/composables/logins.ts
+++ b/src/freshContent/settings/composables/logins.ts
@@ -1,32 +1,34 @@
-import type { Login } from '../types/Login'
+import type { Login } from "../types/Login";
 
 export const useLogins = () => ({
-  logins
-})
+  logins,
+});
 
 const logins: Login[] = [
   {
-    id: 'zih',
-    title: 'Werde in alle Online-Portale der TU Dresden automatisch angemeldet.',
-    name: 'Selma',
+    id: "zih",
+    title:
+      "Werde in alle Online-Portale der TU Dresden automatisch angemeldet.",
+    name: "Selma",
     state: false,
-    usernamePlaceholder: 'Nutzername (selma-Login)',
+    usernamePlaceholder: "Nutzername (selma-Login)",
     usernamePattern: /^(s{1}\d{7}|[a-z]{4}\d{3}[a-z])$/,
-    usernameError: "Ohne @mailbox.tu-dresden.de, also z.B. 's3276763' oder 'luka075d'",
-    passwordPlaceholder: 'Passwort (selma-Login)',
+    usernameError:
+      "Normalerweise ohne @mailbox.tu-dresden.de in der Form 's3276763' oder 'luka075d'.",
+    passwordPlaceholder: "Passwort (selma-Login)",
     passwordPattern: /.{5,}/,
-    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
+    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
   },
   {
-    id: 'slub',
-    title: 'Werde automatisch auf der SLUB-Seite angemeldet.',
-    name: 'Slub',
+    id: "slub",
+    title: "Werde automatisch auf der SLUB-Seite angemeldet.",
+    name: "Slub",
     state: false,
-    usernamePlaceholder: 'Benutzernummer (SLUB-Login)',
+    usernamePlaceholder: "Benutzernummer (SLUB-Login)",
     usernamePattern: /^[0-9]{7}$/,
-    usernameError: 'die Nutzernummer findest du u.a. auf deiner SLUB-Karte',
-    passwordPlaceholder: 'Passwort (SLUB-Login)',
+    usernameError: "die Nutzernummer findest du u.a. auf deiner SLUB-Karte",
+    passwordPlaceholder: "Passwort (SLUB-Login)",
     passwordPattern: /.{5,}/,
-    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
-  }
-]
+    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
+  },
+];
diff --git a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
index f3d426f8..22b9c358 100644
--- a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
+++ b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
@@ -1,74 +1,73 @@
 <template>
   <div class="title">
-    <h1 class="upper">
-      AutoLogin
-    </h1>
+    <h1 class="upper">AutoLogin</h1>
     <h2>in die Onlineportale der TU Dresden</h2>
   </div>
   <div class="inputs">
     <CustomInput
       v-model="username"
       v-model:valid="usernameValid"
-      placeholder="Nutzername (selma-Login)"
-      :pattern="/^(s{1}\d{7}|[a-z]{4}\d{3}[a-z])$/i"
-      error-message="Ohne @mailbox.tu-dresden.de, also z.B. 's3276763' oder 'luka075d'"
+      :placeholder="zihLogin.usernamePlaceholder"
+      :pattern="zihLogin.usernamePattern"
+      :error-message="zihLogin.usernameError"
       :column="true"
+      warn
     />
     <CustomInput
       v-model="password"
       v-model:valid="passwordValid"
-      placeholder="Password (selma-Login)"
-      :pattern="/.{5,}/"
+      :pattern="zihLogin.passwordPattern"
+      :placeholder="zihLogin.passwordPlaceholder"
       type="password"
-      error-message="Das Passwort muss mindestens 5 Zeichen haben!"
+      :error-message="zihLogin.passwordError"
       :column="true"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
+import { defineComponent, ref, computed, watch } from "vue";
 
 // components
-import Input from '../components/Input.vue'
+import Input from "../components/Input.vue";
 
 // composables
-import { useUserData } from '../composables/user-data'
-import { useStepper } from '../composables/stepper'
+import { useUserData } from "../composables/user-data";
+import { useStepper } from "../composables/stepper";
+import { useLogins } from "../composables/logins";
 
 export default defineComponent({
   components: {
     //    Onboarding,
-    CustomInput: Input
+    CustomInput: Input,
   },
-  setup () {
-    const {
-      stepWidth,
-    }  = useStepper()
-    const { saveUserData } = useUserData()
-    const username = ref('')
-    const password = ref('')
-    const usernameValid = ref(false)
-    const passwordValid = ref(false)
+  setup() {
+    const { stepWidth } = useStepper();
+    const { saveUserData } = useUserData();
+    const { logins } = useLogins();
+    const zihLogin = logins[0];
+    const username = ref("");
+    const password = ref("");
+    const usernameValid = ref(false);
+    const passwordValid = ref(false);
 
     // jump next step if ready was never set to true
-    stepWidth.value = 2
+    stepWidth.value = 2;
 
-    const ready = computed(() => usernameValid.value && passwordValid.value)
+    const ready = computed(() => usernameValid.value && passwordValid.value);
 
     watch(ready, async () => {
       if (ready.value === true) {
-        await saveUserData(username.value, password.value, 'zih')
-        stepWidth.value = 1
+        await saveUserData(username.value, password.value, "zih");
+        stepWidth.value = 1;
       } else {
-        stepWidth.value = 2
+        stepWidth.value = 2;
       }
-    })
-
-    return { username, password, usernameValid, passwordValid }
-  }
-})
+    });
 
+    return { username, password, usernameValid, passwordValid, zihLogin };
+  },
+});
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/settingPages/AutoLogin.vue b/src/freshContent/settings/settingPages/AutoLogin.vue
index 05c3ac4b..952bfd82 100644
--- a/src/freshContent/settings/settingPages/AutoLogin.vue
+++ b/src/freshContent/settings/settingPages/AutoLogin.vue
@@ -1,16 +1,15 @@
 <template>
-  <LoginTabs
-    v-model="currentLogin"
-    :options="logins"
-  />
+  <LoginTabs v-model="currentLogin" :options="logins" />
   <h2>{{ currentLogin.title }}</h2>
-  <h2 :class="`state ${currentLogin.state ? 'state--active' : 'state--inactive'}`">
+  <h2
+    :class="`state ${currentLogin.state ? 'state--active' : 'state--inactive'}`"
+  >
     {{ currentLogin.state ? "Aktuell gespeichert" : "Nicht gespeichert" }}
   </h2>
   <p class="max-line p-margin">
-    Dafür müssen deine {{ currentLogin.name }} Login-Daten sicher auf diesem PC gespeichert werden.
-    Die Daten werden nur lokal und verschlüsselt gespeichert.
-    Du kannst sie jederzeit löschen.
+    Dafür müssen deine {{ currentLogin.name }} Login-Daten sicher auf diesem PC
+    gespeichert werden. Die Daten werden nur lokal und verschlüsselt
+    gespeichert. Du kannst sie jederzeit löschen.
   </p>
 
   <p class="p-margin important">
@@ -23,6 +22,7 @@
       :pattern="currentLogin.usernamePattern"
       :placeholder="currentLogin.usernamePlaceholder"
       :error-message="currentLogin.usernameError"
+      warn
     />
 
     <CustomInput
@@ -49,69 +49,73 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, watchEffect } from 'vue'
+import { ref, defineComponent, watchEffect } from "vue";
 
 // components
-import Input from '../components/Input.vue'
-import Button from '../components/Button.vue'
-import LoginTabs from '../components/LoginTabs.vue'
+import Input from "../components/Input.vue";
+import Button from "../components/Button.vue";
+import LoginTabs from "../components/LoginTabs.vue";
 
 // composables
-import { useLogins } from '../composables/logins'
-import { useChrome } from '../composables/chrome'
-import { useUserData } from '../composables/user-data'
+import { useLogins } from "../composables/logins";
+import { useChrome } from "../composables/chrome";
+import { useUserData } from "../composables/user-data";
 
 export default defineComponent({
   components: {
     CustomInput: Input,
     CustomButton: Button,
-    LoginTabs
+    LoginTabs,
   },
-  setup () {
-    const { logins } = useLogins()
-    const { sendChromeRuntimeMessage } = useChrome()
-    const { saveUserData, deleteUserData } = useUserData()
+  setup() {
+    const { logins } = useLogins();
+    const { sendChromeRuntimeMessage } = useChrome();
+    const { saveUserData, deleteUserData } = useUserData();
 
-    const currentLogin = ref(logins[0])
+    const currentLogin = ref(logins[0]);
 
-    const username = ref('')
-    const password = ref('')
-    const usernameValid = ref(false)
-    const passwordValid = ref(false)
+    const username = ref("");
+    const password = ref("");
+    const usernameValid = ref(false);
+    const passwordValid = ref(false);
 
-    const autoLoginActive = ref(false)
+    const autoLoginActive = ref(false);
 
     // get state of login
     watchEffect(async () => {
-      currentLogin.value.state = await sendChromeRuntimeMessage({
-        cmd: 'check_user_data',
-        platform: currentLogin.value.id
-      }) as boolean
-    })
+      currentLogin.value.state = (await sendChromeRuntimeMessage({
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    });
 
-    const submitSave = async ($event : MouseEvent) => {
-      const target = $event.target as HTMLButtonElement
+    const submitSave = async ($event: MouseEvent) => {
+      const target = $event.target as HTMLButtonElement;
 
-      if (target.disabled) return
+      if (target.disabled) return;
 
       // await this one to get back the new value in last line, otherwise could run too late
-      await saveUserData(username.value, password.value, currentLogin.value.id)
+      await saveUserData(username.value, password.value, currentLogin.value.id);
 
       // reset values
-      username.value = ''
-      password.value = ''
-      usernameValid.value = false
-      passwordValid.value = false
-      currentLogin.value.state =
-            await sendChromeRuntimeMessage({ cmd: 'check_user_data', platform: currentLogin.value.id }) as boolean
-    }
+      username.value = "";
+      password.value = "";
+      usernameValid.value = false;
+      passwordValid.value = false;
+      currentLogin.value.state = (await sendChromeRuntimeMessage({
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    };
 
     const submitDelete = async () => {
       // await this one to get back the new value in last line, otherwise could run too late
-      await deleteUserData(currentLogin.value.id)
-      currentLogin.value.state =
-            await sendChromeRuntimeMessage({ cmd: 'check_user_data', platform: currentLogin.value.id }) as boolean
-    }
+      await deleteUserData(currentLogin.value.id);
+      currentLogin.value.state = (await sendChromeRuntimeMessage({
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    };
 
     return {
       logins,
@@ -122,10 +126,10 @@ export default defineComponent({
       passwordValid,
       autoLoginActive,
       submitSave,
-      submitDelete
-    }
-  }
-})
+      submitDelete,
+    };
+  },
+});
 </script>
 
 <style lang="sass" scoped>

From 1c8f1abf8e4ab8c6db66748a77c038f6805054e5 Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 13:55:18 +0200
Subject: [PATCH 2/7] Version number up.

---
 src/manifest.json | 220 ++++++++++++----------------------------------
 1 file changed, 54 insertions(+), 166 deletions(-)

diff --git a/src/manifest.json b/src/manifest.json
index c4e789f5..6308c01d 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,13 +1,8 @@
 {
   "name": "TUfast TU Dresden",
-  "version": "7.0.0.1",
+  "version": "7.0.0.2",
   "description": "Das Produktivitäts-Tool für TU Dresden Studierende 🚀",
-  "permissions": [
-    "storage",
-    "system.cpu",
-    "alarms",
-    "*://*/"
-  ],
+  "permissions": ["storage", "system.cpu", "alarms", "*://*/"],
   "optional_permissions": [
     "tabs",
     "webRequest",
@@ -21,37 +16,22 @@
   },
   "content_scripts": [
     {
-      "js": [
-        "contentScripts/login/medELearning.js"
-      ],
+      "js": ["contentScripts/login/medELearning.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://elearning.med.tu-dresden.de/*"
-      ]
+      "matches": ["https://elearning.med.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/idp.js"
-      ],
+      "js": ["contentScripts/login/idp.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://idp.tu-dresden.de/*",
-        "https://idp2.tu-dresden.de/*"
-      ]
+      "matches": ["https://idp.tu-dresden.de/*", "https://idp2.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/forward/jexam.js"
-      ],
+      "js": ["contentScripts/forward/jexam.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://jexam.inf.tu-dresden.de/"
-      ]
+      "matches": ["https://jexam.inf.tu-dresden.de/"]
     },
     {
-      "js": [
-        "contentScripts/forward/searchEngines/generic.js"
-      ],
+      "js": ["contentScripts/forward/searchEngines/generic.js"],
       "run_at": "document_start",
       "matches": [
         "https://www.google.de/search?*q=*",
@@ -66,34 +46,24 @@
       ]
     },
     {
-      "js": [
-        "contentScripts/login/jexam.js"
-      ],
+      "js": ["contentScripts/login/jexam.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://jexam.inf.tu-dresden.de/*"
-      ]
+      "matches": ["https://jexam.inf.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/other/hisqis/pimpAndInjectModules.js"
-      ],
+      "js": ["contentScripts/other/hisqis/pimpAndInjectModules.js"],
       "css": [
         "styles/components/gradeTable.css",
         "styles/contentScripts/hisqis.css"
       ],
       "run_at": "document_idle",
-      "matches": [
-        "https://qis.dez.tu-dresden.de/qisserver/servlet/*"
-      ],
+      "matches": ["https://qis.dez.tu-dresden.de/qisserver/servlet/*"],
       "include_globs": [
         "*state=notenspiegelStudent*&next=list.vm&nextdir=qispos/notenspiegel/student&createInfos=Y&struct=auswahlBaum&nodeID=auswahlBaum*expand=0*"
       ]
     },
     {
-      "js": [
-        "contentScripts/forward/opal.js"
-      ],
+      "js": ["contentScripts/forward/opal.js"],
       "run_at": "document_start",
       "matches": [
         "*://opal.de/*",
@@ -101,27 +71,17 @@
       ]
     },
     {
-      "js": [
-        "contentScripts/login/selma.js"
-      ],
+      "js": ["contentScripts/login/selma.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://selma.tu-dresden.de/*"
-      ]
+      "matches": ["https://selma.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/qis.js"
-      ],
+      "js": ["contentScripts/login/qis.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://qis.dez.tu-dresden.de/qisserver/servlet*"
-      ]
+      "matches": ["https://qis.dez.tu-dresden.de/qisserver/servlet*"]
     },
     {
-      "js": [
-        "contentScripts/login/opalHome.js"
-      ],
+      "js": ["contentScripts/login/opalHome.js"],
       "run_at": "document_idle",
       "matches": [
         "https://bildungsportal.sachsen.de/opal/resource*",
@@ -130,18 +90,10 @@
       ]
     },
     {
-      "js": [
-        "contentScripts/login/matrix.js"
-      ],
+      "js": ["contentScripts/login/matrix.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://matrix.tu-dresden.de/*"
-      ],
-      "include_globs": [
-        "*/welcome",
-        "*/login",
-        "*://matrix.tu-dresden.de/"
-      ]
+      "matches": ["https://matrix.tu-dresden.de/*"],
+      "include_globs": ["*/welcome", "*/login", "*://matrix.tu-dresden.de/"]
     },
     {
       "js": [
@@ -149,23 +101,15 @@
         "contentScripts/login/owa.js"
       ],
       "run_at": "document_idle",
-      "matches": [
-        "https://msx.tu-dresden.de/*"
-      ]
+      "matches": ["https://msx.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/cloudstore.js"
-      ],
+      "js": ["contentScripts/login/cloudstore.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://cloudstore.zih.tu-dresden.de/*"
-      ]
+      "matches": ["https://cloudstore.zih.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/opalMain.js"
-      ],
+      "js": ["contentScripts/login/opalMain.js"],
       "run_at": "document_idle",
       "matches": [
         "https://bildungsportal.sachsen.de/opal/shiblogin*",
@@ -184,129 +128,73 @@
         "styles/contentScripts/opal/banner.css"
       ],
       "run_at": "document_idle",
-      "matches": [
-        "https://bildungsportal.sachsen.de/opal/*"
-      ]
+      "matches": ["https://bildungsportal.sachsen.de/opal/*"]
     },
     {
-      "js": [
-        "contentScripts/other/opal/viewPdfInNewTab.js"
-      ],
+      "js": ["contentScripts/other/opal/viewPdfInNewTab.js"],
       "run_at": "document_start",
-      "matches": [
-        "https://bildungsportal.sachsen.de/opal/*"
-      ]
+      "matches": ["https://bildungsportal.sachsen.de/opal/*"]
     },
     {
-      "js": [
-        "contentScripts/other/opal/parseCourses.js"
-      ],
-      "css": [
-        "styles/components/notification.css"
-      ],
+      "js": ["contentScripts/other/opal/parseCourses.js"],
+      "css": ["styles/components/notification.css"],
       "run_at": "document_idle",
-      "matches": [
-        "https://bildungsportal.sachsen.de/opal/auth/resource/*"
-      ]
+      "matches": ["https://bildungsportal.sachsen.de/opal/auth/resource/*"]
     },
     {
-      "js": [
-        "contentScripts/login/medEPortal.js"
-      ],
+      "js": ["contentScripts/login/medEPortal.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://eportal.med.tu-dresden.de/*"
-      ]
+      "matches": ["https://eportal.med.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/lskonline.js"
-      ],
+      "js": ["contentScripts/login/lskonline.js"],
       "run_at": "document_start",
-      "matches": [
-        "https://lskonline.tu-dresden.de/*"
-      ]
+      "matches": ["https://lskonline.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/tex.js"
-      ],
+      "js": ["contentScripts/login/tex.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://tex.zih.tu-dresden.de/*"
-      ]
+      "matches": ["https://tex.zih.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/videocampus.js"
-      ],
+      "js": ["contentScripts/login/videocampus.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://videocampus.sachsen.de/*"
-      ]
+      "matches": ["https://videocampus.sachsen.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/gitlabMN.js"
-      ],
+      "js": ["contentScripts/login/gitlabMN.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://gitlab.mn.tu-dresden.de/*"
-      ]
+      "matches": ["https://gitlab.mn.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/gitlabInfSE.js"
-      ],
+      "js": ["contentScripts/login/gitlabInfSE.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://se-gitlab.inf.tu-dresden.de/*"
-      ]
+      "matches": ["https://se-gitlab.inf.tu-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/gitlabInfIMLD.js"
-      ],
+      "js": ["contentScripts/login/gitlabInfIMLD.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://git.imld.de/*"
-      ]
+      "matches": ["https://git.imld.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/gitlabTUC.js"
-      ],
+      "js": ["contentScripts/login/gitlabTUC.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://gitlab.hrz.tu-chemnitz.de/*"
-      ]
+      "matches": ["https://gitlab.hrz.tu-chemnitz.de/*"]
     },
     {
-      "js": [
-        "contentScripts/login/slub.js"
-      ],
+      "js": ["contentScripts/login/slub.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://*.slub-dresden.de/*"
-      ]
+      "matches": ["https://*.slub-dresden.de/*"]
     },
     {
-      "js": [
-        "contentScripts/forward/searchEngines/qwant.js"
-      ],
+      "js": ["contentScripts/forward/searchEngines/qwant.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://www.qwant.com/*"
-      ]
+      "matches": ["https://www.qwant.com/*"]
     },
     {
-      "js": [
-        "contentScripts/forward/searchEngines/startpage.js"
-      ],
+      "js": ["contentScripts/forward/searchEngines/startpage.js"],
       "run_at": "document_idle",
-      "matches": [
-        "https://www.startpage.com/*"
-      ]
+      "matches": ["https://www.startpage.com/*"]
     }
   ],
   "icons": {

From a4f2cd0bcbfbf2113dd62b1899887146af4074b3 Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 14:28:55 +0200
Subject: [PATCH 3/7] run npm test.

---
 src/contentScripts/owa.js                     |  28 +-
 src/freshContent/popup/popup.js               | 771 +++++++++---------
 src/freshContent/settings/Settings.vue        | 161 ++--
 .../settings/components/Input.vue             |  83 +-
 .../settings/components/Onboarding.vue        |  45 +-
 .../settings/components/OnboardingButton.vue  |  37 +-
 .../settings/components/Setting.vue           |   1 -
 .../settings/components/Stepper.vue           |  12 +-
 .../settings/composables/logins.ts            |  36 +-
 .../settings/composables/stepper.ts           |  44 +-
 .../onboardingPages/03_LoginSetup.vue         |   7 +-
 .../onboardingPages/04_LoginAccept.vue        |  52 +-
 .../settings/settingPages/AutoLogin.vue       |  89 +-
 .../settings/settingPages/SearchEngines.vue   |  51 +-
 src/freshContent/settings/types/Setting.ts    |   8 +-
 15 files changed, 721 insertions(+), 704 deletions(-)

diff --git a/src/contentScripts/owa.js b/src/contentScripts/owa.js
index c754613a..01a0b04d 100644
--- a/src/contentScripts/owa.js
+++ b/src/contentScripts/owa.js
@@ -1,9 +1,9 @@
-chrome.storage.local.get(['isEnabled', 'loggedOutOwa'], function (result) {
+chrome.storage.local.get(['isEnabled', 'loggedOutOwa'], (result) => {
   if (result.isEnabled && !result.loggedOutOwa) {
     if (document.readyState !== 'loading') {
       loginOWA(result.loggedOutOwa)
     } else {
-      document.addEventListener('DOMContentLoaded', function () {
+      document.addEventListener('DOMContentLoaded', () => {
         loginOWA(result.loggedOutOwa)
       })
     }
@@ -19,26 +19,26 @@ chrome.storage.local.get(['isEnabled', 'loggedOutOwa'], function (result) {
 })
 
 // detecting logout
-document.addEventListener('DOMNodeInserted', function (e) {
+document.addEventListener('DOMNodeInserted', (e) => {
   // old owa version
   if (document.querySelectorAll('[aria-label="Abmelden"]')[0]) {
-    document.querySelectorAll('[aria-label="Abmelden"]')[0].addEventListener('click', function () {
-      console.log("OLD LOGOUT DETECTED")
+    document.querySelectorAll('[aria-label="Abmelden"]')[0].addEventListener('click', () => {
+      console.log('OLD LOGOUT DETECTED')
       chrome.runtime.sendMessage({ cmd: 'logged_out', portal: 'loggedOutOwa' })
     })
   }
   // new owa version
   if (document.querySelectorAll("[autoid='_ho2_2']")[1] && document.querySelectorAll("[autoid='_ho2_2']")[1].innerHTML === 'Abmelden') {
-    document.querySelectorAll("[autoid='_ho2_2']")[1].addEventListener('click', function () {
-      console.log("LOGOUT DETECTED")
+    document.querySelectorAll("[autoid='_ho2_2']")[1].addEventListener('click', () => {
+      console.log('LOGOUT DETECTED')
       chrome.runtime.sendMessage({ cmd: 'logged_out', portal: 'loggedOutOwa' })
     })
   }
 }, false)
 
-function loginOWA(loggedOutOwa) {
+function loginOWA (loggedOutOwa) {
   if (document.getElementById('username') && document.getElementById('password') && !loggedOutOwa) {
-    chrome.runtime.sendMessage({ cmd: 'get_user_data' }, function (result) {
+    chrome.runtime.sendMessage({ cmd: 'get_user_data' }, (result) => {
       if (!(result.asdf === undefined || result.fdsa === undefined)) {
         chrome.runtime.sendMessage({ cmd: 'show_ok_badge', timeout: 2000 })
         chrome.runtime.sendMessage({ cmd: 'save_clicks', click_count: 1 })
@@ -55,16 +55,16 @@ function loginOWA(loggedOutOwa) {
   // detecting logout
   // old owa version
   if (document.querySelectorAll('[aria-label="Abmelden"]')[0]) {
-    document.querySelectorAll('[aria-label="Abmelden"]')[0].addEventListener('click', function () {
-      console.log("OLD LOGOUT DETECTED")
+    document.querySelectorAll('[aria-label="Abmelden"]')[0].addEventListener('click', () => {
+      console.log('OLD LOGOUT DETECTED')
       chrome.runtime.sendMessage({ cmd: 'logged_out', portal: 'loggedOutOwa' })
     })
   }
   // new owa version
   if (document.querySelectorAll("[autoid='_ho2_2']")[1] && document.querySelectorAll("[autoid='_ho2_2']")[1].innerHTML === 'Abmelden') {
-    document.querySelectorAll("[autoid='_ho2_2']")[1].addEventListener('click', function () {
+    document.querySelectorAll("[autoid='_ho2_2']")[1].addEventListener('click', () => {
       chrome.runtime.sendMessage({ cmd: 'logged_out', portal: 'loggedOutOwa' })
-      console.log("LOGOUT DETECTED")
+      console.log('LOGOUT DETECTED')
     })
   }
 }
@@ -85,7 +85,7 @@ window.onload = function () {
   })
 }
 
-function readMailObserver() {
+function readMailObserver () {
   // use mutation observer to detect page changes
   const config = { attributes: true, childList: true, subtree: true, characterData: true }
   let nrUnreadMails
diff --git a/src/freshContent/popup/popup.js b/src/freshContent/popup/popup.js
index eabda7f6..b128ae31 100644
--- a/src/freshContent/popup/popup.js
+++ b/src/freshContent/popup/popup.js
@@ -1,39 +1,39 @@
-import studiengangConfig from "../studies.json";
+import studiengangConfig from '../studies.json'
 
 const shareHTML =
-  '<div style=height:450px;width:510px;overflow:hidden><div class=the-middle style=white-space:nowrap;display:inline><div class=tufast_text><span class=tufasst_name>Hilf deinen Mitstudierenden</span></div><div class="tufast_text" style=position:relative;top:6px><img class="imgicon huge invert" src=../../assets/images/tufast48.png style=position:relative;top:-7px;left:0px><span class="tufasst_name huge" style=position:relative;top:-7px;left:3px>TUfast</span><span class=tufasst_name> &nbsp;zu entdecken</span></div><div class=grey><span class=tufasst_name>und <a class=grey_a id=rewards_link href=javascript:void(0)>sammle coole Raketen</a>!</span></div><div id=download-section><div>Teilen mit</div><div class=download-link><img class=imgicon src=../../assets/icons/gmail.png> <span class=browser_name><a href="mailto:?subject=Probiere%20mal%20TUfast!%20%F0%9F%9A%80&body=Hey%20%3A)%0A%0Akennst%20du%20schon%20TUfast%3F%0A%0ATUfast%20hilft%20beim%20t%C3%A4glichen%20Arbeiten%20mit%20den%20Online-Portalen%20der%20TU%20Dresden.%0ADamit%20spare%20ich%20viel%20Zeit%20und%20nervige%20Klicks.%0A%0ATUfast%20ist%20eine%20Erweiterung%20f%C3%BCr%20den%20Browser%20und%20wurde%20von%20Studenten%20entwickelt.%0AProbiere%20es%20jetzt%20auf%20www.tu-fast.de%20!%0A%0ALiebe%20Gr%C3%BC%C3%9Fe%C2%A0%F0%9F%96%90"target=_blank>E-Mail</a></span></div><div class=download-link><img class=imgicon src=../../assets/icons/wa2.png style=height:1.4em><span class=browser_name> <a href="https://api.whatsapp.com/send?text=Hey%2C%20kennst%20du%20schon%20TUfast%3F%20%F0%9F%9A%80%0A%0AMacht%20das%20arbeiten%20mit%20allen%20Online-Portalen%20der%20TU%20Dresden%20produktiver%20und%20hat%20mir%20schon%20viel%20Zeit%20und%20nervige%20Klicks%20gespart.%20Eine%20richtig%20n%C3%BCtzliche%20Browsererweiterung%20f%C3%BCr%20Studenten!%0A%0AProbiers%20gleich%20mal%20aus%20auf%20www.tu-fast.de%20%F0%9F%96%90"target=_blank>WhatsApp</a></span></div><div class=download-link><span class=browser_name>oder <a href=https://www.tu-fast.de target=_blank>www.tu-fast.de</a></span></div></div></div><div class=the-bottom><p>Gemacht mit 🖤 von Studenten | <a href=https://github.com/TUfast-TUD/TUfast_TUD target=_blank>GitHub</a> | <a href="mailto:frage@tu-fast.de?subject=Feedback%20TUfast"target=_blank>Kontakt</a></div></div>';
+  '<div style=height:450px;width:510px;overflow:hidden><div class=the-middle style=white-space:nowrap;display:inline><div class=tufast_text><span class=tufasst_name>Hilf deinen Mitstudierenden</span></div><div class="tufast_text" style=position:relative;top:6px><img class="imgicon huge invert" src=../../assets/images/tufast48.png style=position:relative;top:-7px;left:0px><span class="tufasst_name huge" style=position:relative;top:-7px;left:3px>TUfast</span><span class=tufasst_name> &nbsp;zu entdecken</span></div><div class=grey><span class=tufasst_name>und <a class=grey_a id=rewards_link href=javascript:void(0)>sammle coole Raketen</a>!</span></div><div id=download-section><div>Teilen mit</div><div class=download-link><img class=imgicon src=../../assets/icons/gmail.png> <span class=browser_name><a href="mailto:?subject=Probiere%20mal%20TUfast!%20%F0%9F%9A%80&body=Hey%20%3A)%0A%0Akennst%20du%20schon%20TUfast%3F%0A%0ATUfast%20hilft%20beim%20t%C3%A4glichen%20Arbeiten%20mit%20den%20Online-Portalen%20der%20TU%20Dresden.%0ADamit%20spare%20ich%20viel%20Zeit%20und%20nervige%20Klicks.%0A%0ATUfast%20ist%20eine%20Erweiterung%20f%C3%BCr%20den%20Browser%20und%20wurde%20von%20Studenten%20entwickelt.%0AProbiere%20es%20jetzt%20auf%20www.tu-fast.de%20!%0A%0ALiebe%20Gr%C3%BC%C3%9Fe%C2%A0%F0%9F%96%90"target=_blank>E-Mail</a></span></div><div class=download-link><img class=imgicon src=../../assets/icons/wa2.png style=height:1.4em><span class=browser_name> <a href="https://api.whatsapp.com/send?text=Hey%2C%20kennst%20du%20schon%20TUfast%3F%20%F0%9F%9A%80%0A%0AMacht%20das%20arbeiten%20mit%20allen%20Online-Portalen%20der%20TU%20Dresden%20produktiver%20und%20hat%20mir%20schon%20viel%20Zeit%20und%20nervige%20Klicks%20gespart.%20Eine%20richtig%20n%C3%BCtzliche%20Browsererweiterung%20f%C3%BCr%20Studenten!%0A%0AProbiers%20gleich%20mal%20aus%20auf%20www.tu-fast.de%20%F0%9F%96%90"target=_blank>WhatsApp</a></span></div><div class=download-link><span class=browser_name>oder <a href=https://www.tu-fast.de target=_blank>www.tu-fast.de</a></span></div></div></div><div class=the-bottom><p>Gemacht mit 🖤 von Studenten | <a href=https://github.com/TUfast-TUD/TUfast_TUD target=_blank>GitHub</a> | <a href="mailto:frage@tu-fast.de?subject=Feedback%20TUfast"target=_blank>Kontakt</a></div></div>'
 const bananaHTML =
-  '<a tabindex="-1" href="https://www.buymeacoffee.com/olihausdoerfer" target="_blank"style = "position: fixed; bottom: 68px; right: -75px; width:240px; height: auto;" > <img tabindex="-1" style="width: 160px;"src="https://img.buymeacoffee.com/button-api/?text=Buy me a Mate&emoji=🍾&slug=olihausdoerfer&button_colour=fbd54b&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>';
+  '<a tabindex="-1" href="https://www.buymeacoffee.com/olihausdoerfer" target="_blank"style = "position: fixed; bottom: 68px; right: -75px; width:240px; height: auto;" > <img tabindex="-1" style="width: 160px;"src="https://img.buymeacoffee.com/button-api/?text=Buy me a Mate&emoji=🍾&slug=olihausdoerfer&button_colour=fbd54b&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>'
 
 const starRatingSettings = {
   // initial rating value
-  rating: "0.0",
+  rating: '0.0',
 
   // max rating value
-  maxRating: "5",
+  maxRating: '5',
 
   // min rating value
-  minRating: "0.0",
+  minRating: '0.0',
 
   // readonly mode?
-  readOnly: "no",
+  readOnly: 'no',
 
   // custom rating symbols here
-  starImage: "../../assets/icons/starRate.png",
-  emptyStarImage: "../../assets/icons/starbackground.png",
+  starImage: '../../assets/icons/starRate.png',
+  emptyStarImage: '../../assets/icons/starbackground.png',
 
   // symbol size
-  starSize: "18",
+  starSize: '18',
 
   // step size for fractional rating
-  step: "0.5",
-};
+  step: '0.5'
+}
 
 // change this, if you want to highlight the dropdown arrow for the studiengang selection
 // this can be used e.g. if a new studiengang was added
 // settings this to false (bool-value) will cause no action
 // dropdown_update_id is a random string
-const dropdownUpdateId = "56tzoguhjk";
+const dropdownUpdateId = '56tzoguhjk'
 
 // TODO
 window.onload = async () => {
@@ -42,36 +42,36 @@ window.onload = async () => {
   const result = await new Promise((resolve) =>
     chrome.storage.local.get(
       [
-        "dashboardDisplay",
-        "ratingEnabledFlag",
-        "savedClickCounter",
-        "studiengang",
-        "closedIntro1",
-        "ratedCourses",
-        "closedOutro1",
-        "theme",
-        "closedMsg1",
+        'dashboardDisplay',
+        'ratingEnabledFlag',
+        'savedClickCounter',
+        'studiengang',
+        'closedIntro1',
+        'ratedCourses',
+        'closedOutro1',
+        'theme',
+        'closedMsg1'
       ],
       resolve
     )
-  );
+  )
 
   // set initial theme
-  if (result.theme === "system") {
-    document.documentElement.removeAttribute("data-theme");
+  if (result.theme === 'system') {
+    document.documentElement.removeAttribute('data-theme')
   } else {
-    document.documentElement.setAttribute("data-theme", result.theme);
+    document.documentElement.setAttribute('data-theme', result.theme)
   }
 
   // prevent transition on page load
   setTimeout(() => {
-    document.documentElement.removeAttribute("data-preload");
-  }, 500);
+    document.documentElement.removeAttribute('data-preload')
+  }, 500)
 
   // display courses
-  const dashboardDisplay = result.dashboardDisplay;
-  const courseList = await loadCourses(dashboardDisplay);
-  const htmlList = document.getElementsByClassName("list")[0];
+  const dashboardDisplay = result.dashboardDisplay
+  const courseList = await loadCourses(dashboardDisplay)
+  const htmlList = document.getElementsByClassName('list')[0]
   displayCourseList(
     courseList,
     htmlList,
@@ -81,192 +81,192 @@ window.onload = async () => {
     result.closedOutro1,
     result.ratingEnabledFlag,
     result.closedMsg1
-  );
-  if (document.getElementById("intro")) {
-    document.getElementById("intro").onclick = removeIntro;
+  )
+  if (document.getElementById('intro')) {
+    document.getElementById('intro').onclick = removeIntro
   }
-  if (document.getElementById("outro")) {
-    document.getElementById("outro").onclick = removeOutro;
+  if (document.getElementById('outro')) {
+    document.getElementById('outro').onclick = removeOutro
   }
-  if (document.getElementById("msg1")) {
-    document.getElementById("msg1").onclick = removeMsg1;
+  if (document.getElementById('msg1')) {
+    document.getElementById('msg1').onclick = removeMsg1
   }
 
   // filter list
-  listSearchFunction();
+  listSearchFunction()
 
   // display saved clicks
-  const time = clicksToTime(result.savedClickCounter || 0);
+  const time = clicksToTime(result.savedClickCounter || 0)
   document.getElementById(
-    "saved_clicks"
+    'saved_clicks'
   ).innerHTML = `<text><font color='green'>${result.savedClickCounter || 0
-    } Klicks</font> gespart: <a href='javascript:void(0)' id='time' target='_blank'>${time}</a></text>`;
-  document.getElementById("time").onclick = openSettingsTimeSection;
+    } Klicks</font> gespart: <a href='javascript:void(0)' id='time' target='_blank'>${time}</a></text>`
+  document.getElementById('time').onclick = openSettingsTimeSection
 
   // display banana at each end of semester for two weeks!
-  let bananaTime = false;
-  const d = new Date();
-  const month = d.getMonth() + 1; // starts at 0
-  const day = d.getDate();
-  if ((month === 7 && day < 15) || (month === 1 && day > 15)) bananaTime = true;
+  let bananaTime = false
+  const d = new Date()
+  const month = d.getMonth() + 1 // starts at 0
+  const day = d.getDate()
+  if ((month === 7 && day < 15) || (month === 1 && day > 15)) bananaTime = true
   if (result.savedClickCounter > 100 && bananaTime) {
-    document.getElementById("banana").innerHTML = bananaHTML;
+    document.getElementById('banana').innerHTML = bananaHTML
   }
 
   // exclusive style adjustments
-  customizeForStudiengang(result.studiengang);
+  customizeForStudiengang(result.studiengang)
 
   // assign switch function
-  document.getElementById("switch").addEventListener("change", saveEnabled);
+  document.getElementById('switch').addEventListener('change', saveEnabled)
 
   // asign input search fct
   // onkeydown?
-  document.getElementById("searchListInput").onkeyup = listSearchFunction;
+  document.getElementById('searchListInput').onkeyup = listSearchFunction
 
-  document.getElementById("settings").onclick = openSettings;
-  document.getElementById("share").onclick = openShare;
+  document.getElementById('settings').onclick = openSettings
+  document.getElementById('share').onclick = openShare
 
-  await displayEnabled();
+  await displayEnabled()
 
   // bind enter key --> when enter key is pressed the first course in list is clicked
-  document.getElementById("list").addEventListener("keyup", (event) => {
-    if (event.key === "Enter") {
+  document.getElementById('list').addEventListener('keyup', (event) => {
+    if (event.key === 'Enter') {
       // Cancel the default action, if needed
       // event.preventDefault();
       // Click the first element which is visible
-      const listEntries = document.getElementsByClassName("list-entry-wrapper");
+      const listEntries = document.getElementsByClassName('list-entry-wrapper')
       for (const entry of listEntries) {
-        if (!(entry.style.display === "none")) {
-          entry.firstElementChild.click();
-          break;
+        if (!(entry.style.display === 'none')) {
+          entry.firstElementChild.click()
+          break
         }
       }
     }
-  });
+  })
 
   // set custom dropdown styles and js for studiengang selection
   // Close the dropdown menu if the user clicks outside of it
   window.onclick = (event) => {
-    if (!event.target.matches(".select_studiengang_btn")) {
+    if (!event.target.matches('.select_studiengang_btn')) {
       const dropdowns = document.getElementsByClassName(
-        "select_studiengang_dropdown_content"
-      );
+        'select_studiengang_dropdown_content'
+      )
       for (const dropdown of dropdowns) {
-        if (dropdown.classList.contains("show")) {
-          dropdown.classList.remove("show");
+        if (dropdown.classList.contains('show')) {
+          dropdown.classList.remove('show')
         }
       }
     }
-  };
+  }
 
   // studiengang selection drop-down
-  document.getElementById("select_studiengang_btn").onclick =
-    selectStudiengangDropdown;
-  addDropdownOptions();
+  document.getElementById('select_studiengang_btn').onclick =
+    selectStudiengangDropdown
+  addDropdownOptions()
 
   // highlight studiengang selection (only once)
   // Promisified until usage of Manifest V3
   const studiengangResult = await new Promise((resolve) =>
     chrome.storage.local.get(
-      ["updateCustomizeStudiengang", "savedClickCounter"],
+      ['updateCustomizeStudiengang', 'savedClickCounter'],
       resolve
     )
-  );
+  )
   if (
     studiengangResult.updateCustomizeStudiengang !== dropdownUpdateId &&
     dropdownUpdateId !== false &&
     studiengangResult.savedClickCounter > -1
   ) {
-    document.getElementById("select_studiengang_dropdown_id").style.border =
-      "2px solid red";
+    document.getElementById('select_studiengang_dropdown_id').style.border =
+      '2px solid red'
   }
 
   // we need to set dropdown selection max-height, in case the dashboard is small
   // before wait XXXms because everything needs to be loaded first
-  await new Promise((resolve) => setTimeout(resolve, 200));
+  await new Promise((resolve) => setTimeout(resolve, 200))
   document.getElementById(
-    "select_studiengang_dropdown_content"
-  ).style.maxHeight = (document.body.offsetHeight - 45).toString() + "px";
+    'select_studiengang_dropdown_content'
+  ).style.maxHeight = (document.body.offsetHeight - 45).toString() + 'px'
 
   // show star rating
   // eslint-disable-next-line no-undef
   rateSystem(
-    "myRatingClassName",
+    'myRatingClassName',
     starRatingSettings,
     (rating, ratingTargetElement) => {
       // callback for clicking on star rating. We dont do anything here.
     }
-  );
-};
+  )
+}
 
-async function changeStudiengangSelection() {
-  const studiengang = this.getAttribute("studiengang");
+async function changeStudiengangSelection () {
+  const studiengang = this.getAttribute('studiengang')
 
-  if (studiengang === "addStudiengang") {
+  if (studiengang === 'addStudiengang') {
     chrome.runtime.sendMessage({
-      cmd: "open_settings_page",
-      params: "add_studiengang",
-    });
-    return;
+      cmd: 'open_settings_page',
+      params: 'add_studiengang'
+    })
+    return
   }
 
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set({ studiengang: studiengang }, resolve)
-  );
-  customizeForStudiengang(studiengang);
+  )
+  customizeForStudiengang(studiengang)
 }
 
-function addDropdownOptions() {
+function addDropdownOptions () {
   const dropdownContent = document.getElementById(
-    "select_studiengang_dropdown_content"
-  );
+    'select_studiengang_dropdown_content'
+  )
 
   // set footer icons
   Object.keys(studiengangConfig).forEach((key) => {
-    const listEntry = document.createElement("p");
+    const listEntry = document.createElement('p')
     listEntry.style =
-      "display:flex;align-items: center; min-height: 36px; padding-left: 10px; padding-right: 5px; border-radius: 3px;";
-    listEntry.onclick = changeStudiengangSelection;
-    listEntry.setAttribute("studiengang", key);
+      'display:flex;align-items: center; min-height: 36px; padding-left: 10px; padding-right: 5px; border-radius: 3px;'
+    listEntry.onclick = changeStudiengangSelection
+    listEntry.setAttribute('studiengang', key)
 
-    const listTxt = document.createElement("text");
-    listTxt.style = "flex:10";
-    listTxt.innerHTML = studiengangConfig[key].name;
+    const listTxt = document.createElement('text')
+    listTxt.style = 'flex:10'
+    listTxt.innerHTML = studiengangConfig[key].name
 
-    listEntry.appendChild(listTxt);
+    listEntry.appendChild(listTxt)
 
     if (studiengangConfig[key].fsr_icon) {
-      const listImg = document.createElement("img");
+      const listImg = document.createElement('img')
       listImg.style =
-        "flex: 1;height: 30px; width: auto; vertical-align:middle";
-      listImg.src = studiengangConfig[key].fsr_icon;
+        'flex: 1;height: 30px; width: auto; vertical-align:middle'
+      listImg.src = studiengangConfig[key].fsr_icon
       if (studiengangConfig[key].invert_icon_dark_theme) {
-        listImg.className += " invert";
+        listImg.className += ' invert'
       }
 
-      listEntry.appendChild(listImg);
+      listEntry.appendChild(listImg)
     }
 
-    dropdownContent.appendChild(listEntry);
-  });
+    dropdownContent.appendChild(listEntry)
+  })
 }
 
 // dashboard adjustments for studiengang
-function customizeForStudiengang(studiengang) {
+function customizeForStudiengang (studiengang) {
   // set footer icons
   if (studiengangConfig[studiengang].footer_icons_display) {
     // set visibility for all icons to none
-    const icons = document.getElementById("settings-footer-bar-icons").children;
+    const icons = document.getElementById('settings-footer-bar-icons').children
     for (let i = 0; i < icons.length; i++) {
-      icons[i].style.display = "none";
+      icons[i].style.display = 'none'
     }
 
     // set visible icons
     studiengangConfig[studiengang].footer_icons_display.forEach((element) => {
-      const icon = document.getElementById(element);
-      if (icon) icon.style.display = "flex";
-    });
+      const icon = document.getElementById(element)
+      if (icon) icon.style.display = 'flex'
+    })
   }
 
   // set footer icon links
@@ -274,125 +274,125 @@ function customizeForStudiengang(studiengang) {
     Object.keys(studiengangConfig[studiengang].footer_icons_links).forEach(
       (key) => {
         document.getElementById(key).href =
-          studiengangConfig[studiengang].footer_icons_links[key];
+          studiengangConfig[studiengang].footer_icons_links[key]
       }
-    );
+    )
   }
 
   // set fsr icon
   if (studiengangConfig[studiengang].fsr_icon) {
-    document.getElementById("fsr_icon").src =
-      studiengangConfig[studiengang].fsr_icon;
-    document.getElementById("fsr_icon").style =
-      studiengangConfig[studiengang].fsr_icon_dashboard_style;
+    document.getElementById('fsr_icon').src =
+      studiengangConfig[studiengang].fsr_icon
+    document.getElementById('fsr_icon').style =
+      studiengangConfig[studiengang].fsr_icon_dashboard_style
     if (studiengangConfig[studiengang].invert_icon_dark_theme) {
-      document.getElementById("fsr_icon").className += " invert";
+      document.getElementById('fsr_icon').className += ' invert'
     }
   } else {
-    document.getElementById("fsr_icon").style.display = "none";
+    document.getElementById('fsr_icon').style.display = 'none'
   }
 
   // set fsr icon 2
   if (studiengangConfig[studiengang].fsr_icon_2) {
-    document.getElementById("fsr_icon_2").src =
-      studiengangConfig[studiengang].fsr_icon_2;
-    document.getElementById("fsr_icon_2").style =
-      studiengangConfig[studiengang].fsr_icon_dashboard_style_2;
+    document.getElementById('fsr_icon_2').src =
+      studiengangConfig[studiengang].fsr_icon_2
+    document.getElementById('fsr_icon_2').style =
+      studiengangConfig[studiengang].fsr_icon_dashboard_style_2
   } else {
-    document.getElementById("fsr_icon_2").style.display = "none";
+    document.getElementById('fsr_icon_2').style.display = 'none'
   }
 
   // set fsr link
   if (studiengangConfig[studiengang].fsr_link) {
-    document.getElementById("fsr_link").href =
-      studiengangConfig[studiengang].fsr_link;
-    document.getElementById("fsr_link").style.display = "unset";
+    document.getElementById('fsr_link').href =
+      studiengangConfig[studiengang].fsr_link
+    document.getElementById('fsr_link').style.display = 'unset'
   } else {
-    document.getElementById("fsr_link").style.display = "none";
+    document.getElementById('fsr_link').style.display = 'none'
   }
 
   // set fsr link 2
   if (studiengangConfig[studiengang].fsr_link_2) {
-    document.getElementById("fsr_link_2").href =
-      studiengangConfig[studiengang].fsr_link_2;
-    document.getElementById("fsr_link_2").style.display = "unset";
+    document.getElementById('fsr_link_2').href =
+      studiengangConfig[studiengang].fsr_link_2
+    document.getElementById('fsr_link_2').style.display = 'unset'
   } else {
-    document.getElementById("fsr_link_2").style.display = "none";
+    document.getElementById('fsr_link_2').style.display = 'none'
   }
 
   // set pa link
   if (studiengangConfig[studiengang].pa_link) {
-    document.getElementById("pa").href = studiengangConfig[studiengang].pa_link;
+    document.getElementById('pa').href = studiengangConfig[studiengang].pa_link
   }
 }
 
-function clicksToTime(clicks) {
-  clicks = clicks * 3;
-  const secs = clicks % 60;
-  const mins = Math.floor(clicks / 60);
-  return mins + "min " + secs + "s";
+function clicksToTime (clicks) {
+  clicks = clicks * 3
+  const secs = clicks % 60
+  const mins = Math.floor(clicks / 60)
+  return mins + 'min ' + secs + 's'
 }
 
-async function openSettings() {
-  chrome.runtime.sendMessage({ cmd: "open_settings_page", param: "" }); // for some reason I need to pass empty param - else it wont work in ff
-  const isFirefox = navigator.userAgent.includes("Firefox/"); // attention: no failsave browser detection
-  if (isFirefox) window.close();
-  return false; // Required for ff
+async function openSettings () {
+  chrome.runtime.sendMessage({ cmd: 'open_settings_page', param: '' }) // for some reason I need to pass empty param - else it wont work in ff
+  const isFirefox = navigator.userAgent.includes('Firefox/') // attention: no failsave browser detection
+  if (isFirefox) window.close()
+  return false // Required for ff
 }
 
-async function openShare() {
-  document.getElementById("list").innerHTML = shareHTML; // it needs to be injected this way, else click doesnt work
-  await new Promise((resolve) => setTimeout(resolve, 500));
+async function openShare () {
+  document.getElementById('list').innerHTML = shareHTML // it needs to be injected this way, else click doesnt work
+  await new Promise((resolve) => setTimeout(resolve, 500))
   document
-    .getElementById("rewards_link")
-    .addEventListener("click", async (e) => {
+    .getElementById('rewards_link')
+    .addEventListener('click', async (e) => {
       // click handler needs to be set this way
       chrome.runtime.sendMessage({
-        cmd: "open_settings_page",
-        params: "rocket_icons_settings",
-      }); // for some reason I need to pass empty param - else it wont work in ff
-      const isFirefox = navigator.userAgent.includes("Firefox/"); // attention: no failsave browser detection
-      if (isFirefox) window.close();
-      return false; // Required for ff
-    });
+        cmd: 'open_settings_page',
+        params: 'rocket_icons_settings'
+      }) // for some reason I need to pass empty param - else it wont work in ff
+      const isFirefox = navigator.userAgent.includes('Firefox/') // attention: no failsave browser detection
+      if (isFirefox) window.close()
+      return false // Required for ff
+    })
 }
 
-async function openSettingsTimeSection() {
+async function openSettingsTimeSection () {
   chrome.runtime.sendMessage({
-    cmd: "open_settings_page",
-    params: "time_settings",
-  });
-  const isFirefox = navigator.userAgent.includes("Firefox/"); // attention: no failsave browser detection
-  if (isFirefox) window.close();
-  return false; // Required for ff
+    cmd: 'open_settings_page',
+    params: 'time_settings'
+  })
+  const isFirefox = navigator.userAgent.includes('Firefox/') // attention: no failsave browser detection
+  if (isFirefox) window.close()
+  return false // Required for ff
 }
 
-function listSearchFunction() {
-  const filter = document.getElementById("searchListInput").value.toLowerCase();
-  const listEntries = document.querySelectorAll("#list .list-entry-wrapper");
+function listSearchFunction () {
+  const filter = document.getElementById('searchListInput').value.toLowerCase()
+  const listEntries = document.querySelectorAll('#list .list-entry-wrapper')
 
   for (const entry of listEntries) {
     try {
-      const txtValue = entry.firstChild.text.toLowerCase();
+      const txtValue = entry.firstChild.text.toLowerCase()
       if (!txtValue.includes(filter)) {
-        entry.style.display = "none";
+        entry.style.display = 'none'
       } else {
-        entry.style.display = "block";
+        entry.style.display = 'block'
       }
     } catch (e) {
       console.log(
-        "Could not set visibility of item. Does not necessarily need to be an error."
-      );
+        'Could not set visibility of item. Does not necessarily need to be an error.'
+      )
     }
   }
 
   // always show "Klicke hier, um die Kursliste manuell zu aktualisieren..."
-  if (listEntries[listEntries.length - 1].innerHTML.includes("aktualisieren")) {
-    listEntries[listEntries.length - 1].style.display = "block";
+  if (listEntries[listEntries.length - 1].innerHTML.includes('aktualisieren')) {
+    listEntries[listEntries.length - 1].style.display = 'block'
   }
 }
 
-function displayCourseList(
+function displayCourseList (
   courseList,
   htmlList,
   type,
@@ -402,22 +402,22 @@ function displayCourseList(
   ratingEnabledFlag,
   closedMsg1
 ) {
-  let link = "";
-  let name = "";
-  let imgSrc = "";
+  let link = ''
+  let name = ''
+  let imgSrc = ''
   switch (type) {
-    case "favoriten":
-      link = "https://bildungsportal.sachsen.de/opal/auth/resource/favorites";
-      name = "Klicke, um deine OPAL-Kurse zu importieren";
-      imgSrc = "../../assets/icons/star.png";
-      break;
-    case "meine_kurse":
-      link = "https://bildungsportal.sachsen.de/opal/auth/resource/courses";
-      name = "Klicke, um deine OPAL-Kurse zu importieren";
-      imgSrc = "../../assets/icons/CoursesOpalIcon.png";
-      break;
+    case 'favoriten':
+      link = 'https://bildungsportal.sachsen.de/opal/auth/resource/favorites'
+      name = 'Klicke, um deine OPAL-Kurse zu importieren'
+      imgSrc = '../../assets/icons/star.png'
+      break
+    case 'meine_kurse':
+      link = 'https://bildungsportal.sachsen.de/opal/auth/resource/courses'
+      name = 'Klicke, um deine OPAL-Kurse zu importieren'
+      imgSrc = '../../assets/icons/CoursesOpalIcon.png'
+      break
     default:
-      break;
+      break
   }
 
   if (
@@ -425,351 +425,350 @@ function displayCourseList(
     courseList.length === 0 ||
     courseList === false
   ) {
-    courseList = [];
-    courseList.push({ name, link, img: "../../assets/icons/reload.png" });
+    courseList = []
+    courseList.push({ name, link, img: '../../assets/icons/reload.png' })
   } else {
     courseList.push({
-      name: "Diese Kursliste jetzt aktualisieren...",
+      name: 'Diese Kursliste jetzt aktualisieren...',
       link,
-      img: "../../assets/icons/reload.png",
-    });
+      img: '../../assets/icons/reload.png'
+    })
   }
 
   // determine when to show outro and intro for course rating
   // THIS NEEDS TO BE ADAPTED FOR EACH SEMESTER because ratedCourses is never purged for now - its only expanded. However, courses which are not longer in courseList shouldnt be in ratedCourses either!
-  ratedCourses = ratedCourses || [];
+  ratedCourses = ratedCourses || []
   const showIntro =
     ratingEnabledFlag &&
     !closedIntro1 &&
     courseList.length > 1 &&
-    !(courseList.length - 2 < ratedCourses.length);
+    !(courseList.length - 2 < ratedCourses.length)
   const showOutro =
     ratingEnabledFlag &&
     !closedOutro1 &&
     courseList.length > 1 &&
     !showIntro &&
-    courseList.length - 2 < ratedCourses.length;
-  const d = new Date();
-  const month = d.getMonth() + 1; // starts at 0
-  const day = d.getDate();
+    courseList.length - 2 < ratedCourses.length
+  const d = new Date()
+  const month = d.getMonth() + 1 // starts at 0
+  const day = d.getDate()
   //  show gOPAL-Banner at beginning of semester. showMsg1 is resetted in background.js
   const showMsg1 =
-    !showIntro && !showOutro && !closedMsg1 && month === 10 && day < 20;
+    !showIntro && !showOutro && !closedMsg1 && month === 10 && day < 20
 
   // add introduction to course Rating element
   if (showIntro) {
-    const introRating = document.createElement("div");
-    introRating.id = "intro_rating";
-    const introRatingText = document.createElement("p");
-    introRating.classList.add("list-entry-wrapper");
-    introRatingText.classList.add("list-intro");
+    const introRating = document.createElement('div')
+    introRating.id = 'intro_rating'
+    const introRatingText = document.createElement('p')
+    introRating.classList.add('list-entry-wrapper')
+    introRatingText.classList.add('list-intro')
 
     introRatingText.innerHTML =
-      "<b>Wir suchen den besten Kurs an der TU Dresden. Bewerte jetzt deine Kurse mit 1-5 Sternen!</b> Deine Bewertung ist zu 100% völlig anonym. Die Ergebnisse der Abstimmung veröffentlichen wir anschließend. Details und die Erweiterung zur Datenschutzerklärung gibts <a target='_blank' href='https://tu-fast.de/datenschutz'>hier</a>. <a id='intro' href='#'>Schließen</a>.";
-    introRating.appendChild(introRatingText);
-    htmlList.appendChild(introRating);
+      "<b>Wir suchen den besten Kurs an der TU Dresden. Bewerte jetzt deine Kurse mit 1-5 Sternen!</b> Deine Bewertung ist zu 100% völlig anonym. Die Ergebnisse der Abstimmung veröffentlichen wir anschließend. Details und die Erweiterung zur Datenschutzerklärung gibts <a target='_blank' href='https://tu-fast.de/datenschutz'>hier</a>. <a id='intro' href='#'>Schließen</a>."
+    introRating.appendChild(introRatingText)
+    htmlList.appendChild(introRating)
   }
 
   // add outro to course Rating element
   if (showOutro) {
-    const outroRating = document.createElement("div");
-    outroRating.id = "outro_rating";
-    const outroRatingText = document.createElement("p");
-    outroRating.classList.add("list-entry-wrapper");
-    outroRatingText.classList.add("list-outro");
+    const outroRating = document.createElement('div')
+    outroRating.id = 'outro_rating'
+    const outroRatingText = document.createElement('p')
+    outroRating.classList.add('list-entry-wrapper')
+    outroRatingText.classList.add('list-outro')
 
     outroRatingText.innerHTML =
-      "<b>Danke für's Abstimmen. Über die Ergebnisse wirst du benachrichtigt!</b> Teile <a target='_blank' href='https://www.tu-fast.de'>www.tu-fast.de</a> jetzt mit deinen Freunden, damit auch sie die Kurse bewerten. Damit k&ouml;nnen wir die Lehre an der TU verbessern! Danke &#x1f499;<br><a id='outro' href='#'>Schließen</a>.";
-    outroRating.appendChild(outroRatingText);
-    htmlList.appendChild(outroRating);
+      "<b>Danke für's Abstimmen. Über die Ergebnisse wirst du benachrichtigt!</b> Teile <a target='_blank' href='https://www.tu-fast.de'>www.tu-fast.de</a> jetzt mit deinen Freunden, damit auch sie die Kurse bewerten. Damit k&ouml;nnen wir die Lehre an der TU verbessern! Danke &#x1f499;<br><a id='outro' href='#'>Schließen</a>."
+    outroRating.appendChild(outroRatingText)
+    htmlList.appendChild(outroRating)
   }
 
   // add msg1
   if (showMsg1) {
-    const msg1 = document.createElement("div");
-    msg1.id = "msg1-wrapper";
-    const msg1Text = document.createElement("p");
-    msg1.classList.add("list-entry-wrapper");
-    msg1Text.classList.add("list-outro");
+    const msg1 = document.createElement('div')
+    msg1.id = 'msg1-wrapper'
+    const msg1Text = document.createElement('p')
+    msg1.classList.add('list-entry-wrapper')
+    msg1Text.classList.add('list-outro')
 
     msg1Text.innerHTML =
-      "<b>Tipp für Erstis: Erfahre alles wichtige rund um dein Studium mit gOPAL - dem mobilen Studienassistenzsystem! Hier <a target='_blank' href='https://tu-dresden.de/mz/projekte/projektoverview/mobiles-studienassistenzsystem-gopal'>gOPAL öffnen.</a> <a id='msg1' href='#'>Schließen</a>.";
-    msg1.appendChild(msg1Text);
-    htmlList.appendChild(msg1);
+      "<b>Tipp für Erstis: Erfahre alles wichtige rund um dein Studium mit gOPAL - dem mobilen Studienassistenzsystem! Hier <a target='_blank' href='https://tu-dresden.de/mz/projekte/projektoverview/mobiles-studienassistenzsystem-gopal'>gOPAL öffnen.</a> <a id='msg1' href='#'>Schließen</a>."
+    msg1.appendChild(msg1Text)
+    htmlList.appendChild(msg1)
   }
 
   courseList.forEach((element) => {
-    const listEntrywrapper = document.createElement("div");
-    const listEntry = document.createElement("a");
-    const listImg = document.createElement("div");
-    const listText = document.createElement("div");
-    const img = document.createElement("img");
-    const rateEntryWrapper = document.createElement("div");
-    const rateEntry = document.createElement("div");
-    const confirmEntry = document.createElement("div");
-    const confirmEntryLink = document.createElement("a");
-
-    listEntrywrapper.className = "list-entry-wrapper";
-
-    rateEntryWrapper.style.display = "flex";
-    rateEntryWrapper.style.alignItems = "center";
-    rateEntryWrapper.style.marginBottom = "7px";
-    rateEntryWrapper.id = element.name + " Wrapper";
-    rateEntry.style.flex = 1;
-    rateEntry.style.marginLeft = "150px";
-    confirmEntry.style.flex = 2;
-
-    confirmEntryLink.setAttribute("courseRef", element.name);
-    confirmEntryLink.style.fontSize = "15px";
-    confirmEntryLink.href = "#";
+    const listEntrywrapper = document.createElement('div')
+    const listEntry = document.createElement('a')
+    const listImg = document.createElement('div')
+    const listText = document.createElement('div')
+    const img = document.createElement('img')
+    const rateEntryWrapper = document.createElement('div')
+    const rateEntry = document.createElement('div')
+    const confirmEntry = document.createElement('div')
+    const confirmEntryLink = document.createElement('a')
+
+    listEntrywrapper.className = 'list-entry-wrapper'
+
+    rateEntryWrapper.style.display = 'flex'
+    rateEntryWrapper.style.alignItems = 'center'
+    rateEntryWrapper.style.marginBottom = '7px'
+    rateEntryWrapper.id = element.name + ' Wrapper'
+    rateEntry.style.flex = 1
+    rateEntry.style.marginLeft = '150px'
+    confirmEntry.style.flex = 2
+
+    confirmEntryLink.setAttribute('courseRef', element.name)
+    confirmEntryLink.style.fontSize = '15px'
+    confirmEntryLink.href = '#'
     confirmEntryLink.innerHTML =
-      "Fertig <text style='font-size:14px'>✅</text>";
-    confirmEntryLink.onclick = sendRating;
-    confirmEntry.appendChild(confirmEntryLink);
+      "Fertig <text style='font-size:14px'>✅</text>"
+    confirmEntryLink.onclick = sendRating
+    confirmEntry.appendChild(confirmEntryLink)
 
     // this is the structure required by starRating.js
-    const rateEntryInner1 = document.createElement("div");
-    const rateEntryInner2 = document.createElement("div");
-    rateEntryInner1.className = "starRatingContainer";
-    rateEntryInner2.className = "myRatingClassName";
-    rateEntryInner2.id = element.name;
-    rateEntryInner1.appendChild(rateEntryInner2);
-    rateEntry.appendChild(rateEntryInner1);
-
-    listEntry.className = "list-entry";
-    listEntry.href = element.link;
-    listEntry.target = "_blank";
-    listEntry.onclick = saveTwoClicks;
-
-    listImg.className = "list-entry-img";
-
-    listText.className = "list-entry-text";
-    listText.innerHTML = element.name;
-
-    img.className = "list-img";
-    img.src = imgSrc;
-
-    if (element.img === "../../assets/icons/reload.png") {
-      img.src = "../../assets/icons/reload.png";
-      img.className += " invert";
+    const rateEntryInner1 = document.createElement('div')
+    const rateEntryInner2 = document.createElement('div')
+    rateEntryInner1.className = 'starRatingContainer'
+    rateEntryInner2.className = 'myRatingClassName'
+    rateEntryInner2.id = element.name
+    rateEntryInner1.appendChild(rateEntryInner2)
+    rateEntry.appendChild(rateEntryInner1)
+
+    listEntry.className = 'list-entry'
+    listEntry.href = element.link
+    listEntry.target = '_blank'
+    listEntry.onclick = saveTwoClicks
+
+    listImg.className = 'list-entry-img'
+
+    listText.className = 'list-entry-text'
+    listText.innerHTML = element.name
+
+    img.className = 'list-img'
+    img.src = imgSrc
+
+    if (element.img === '../../assets/icons/reload.png') {
+      img.src = '../../assets/icons/reload.png'
+      img.className += ' invert'
     }
 
-    listImg.appendChild(img);
+    listImg.appendChild(img)
     if (!(element.img === false)) {
-      listEntry.appendChild(listImg);
+      listEntry.appendChild(listImg)
     }
-    listEntry.appendChild(listText);
-    listEntrywrapper.appendChild(listEntry);
-    rateEntryWrapper.appendChild(rateEntry);
-    rateEntryWrapper.appendChild(confirmEntry);
-    let isRated = false;
+    listEntry.appendChild(listText)
+    listEntrywrapper.appendChild(listEntry)
+    rateEntryWrapper.appendChild(rateEntry)
+    rateEntryWrapper.appendChild(confirmEntry)
+    let isRated = false
     if (ratedCourses === undefined) {
-      isRated = false;
+      isRated = false
     } else {
-      isRated = ratedCourses.includes(element.name);
+      isRated = ratedCourses.includes(element.name)
     }
     if (
       !(
-        element.name === "Diese Kursliste jetzt aktualisieren..." ||
-        element.name === "Klicke, um deine OPAL-Kurse zu importieren" ||
+        element.name === 'Diese Kursliste jetzt aktualisieren...' ||
+        element.name === 'Klicke, um deine OPAL-Kurse zu importieren' ||
         isRated
       ) &&
       ratingEnabledFlag
-    )
-      listEntrywrapper.appendChild(rateEntryWrapper);
-    htmlList.appendChild(listEntrywrapper);
-  });
+    ) { listEntrywrapper.appendChild(rateEntryWrapper) }
+    htmlList.appendChild(listEntrywrapper)
+  })
 
   // Create button so switch courses <> favorites
-  const listEntry = document.createElement("a");
-  const listImg = document.createElement("div");
-  const listText = document.createElement("div");
-  const img = document.createElement("img");
+  const listEntry = document.createElement('a')
+  const listImg = document.createElement('div')
+  const listText = document.createElement('div')
+  const img = document.createElement('img')
 
-  listImg.className = "list-entry-img";
+  listImg.className = 'list-entry-img'
 
-  listEntry.className = "list-entry";
-  listEntry.href = "javascript:void(0)";
-  listEntry.onclick = switchCoursesToShow;
+  listEntry.className = 'list-entry'
+  listEntry.href = 'javascript:void(0)'
+  listEntry.onclick = switchCoursesToShow
 
-  listText.className = "list-entry-text";
+  listText.className = 'list-entry-text'
 
-  img.className = "list-img";
+  img.className = 'list-img'
 
-  if (type === "favoriten") img.src = "../../assets/icons/CoursesOpalIcon.png";
-  if (type === "meine_kurse") img.src = "../../assets/icons/star.png";
+  if (type === 'favoriten') img.src = '../../assets/icons/CoursesOpalIcon.png'
+  if (type === 'meine_kurse') img.src = '../../assets/icons/star.png'
 
-  listImg.appendChild(img);
-  listEntry.appendChild(listImg);
+  listImg.appendChild(img)
+  listEntry.appendChild(listImg)
 
-  if (type === "favoriten")
-    listText.innerHTML = 'Wechsel zu "Meine Kurse" ... ';
-  if (type === "meine_kurse")
-    listText.innerHTML = 'Wechsel zu "Meine Favoriten" ...';
+  if (type === 'favoriten') { listText.innerHTML = 'Wechsel zu "Meine Kurse" ... ' }
+  if (type === 'meine_kurse') { listText.innerHTML = 'Wechsel zu "Meine Favoriten" ...' }
 
-  listEntry.appendChild(listText);
-  htmlList.appendChild(listEntry);
+  listEntry.appendChild(listText)
+  htmlList.appendChild(listEntry)
 }
 
-async function switchCoursesToShow() {
+async function switchCoursesToShow () {
   // Promisified until usage of Manifest V3
   const result = await new Promise((resolve) =>
-    chrome.storage.local.get(["dashboardDisplay"], resolve)
-  );
-  if (result.dashboardDisplay === "meine_kurse")
+    chrome.storage.local.get(['dashboardDisplay'], resolve)
+  )
+  if (result.dashboardDisplay === 'meine_kurse') {
     await new Promise((resolve) =>
-      chrome.storage.local.set({ dashboardDisplay: "favoriten" }, resolve)
-    );
-  if (result.dashboardDisplay === "favoriten")
+      chrome.storage.local.set({ dashboardDisplay: 'favoriten' }, resolve)
+    )
+  }
+  if (result.dashboardDisplay === 'favoriten') {
     await new Promise((resolve) =>
-      chrome.storage.local.set({ dashboardDisplay: "meine_kurse" }, resolve)
-    );
-  location.reload();
+      chrome.storage.local.set({ dashboardDisplay: 'meine_kurse' }, resolve)
+    )
+  }
+  location.reload()
 }
 
-async function saveTwoClicks() {
-  chrome.runtime.sendMessage({ cmd: "save_clicks", click_count: 2 });
+async function saveTwoClicks () {
+  chrome.runtime.sendMessage({ cmd: 'save_clicks', click_count: 2 })
 }
 
 // changeIsEnabledState
-async function saveEnabled() {
+async function saveEnabled () {
   // only save, if user data is available. Else forward to settings page
   // Promisified until usage of Manifest V3
   const isEnabled = await new Promise((resolve) =>
-    chrome.storage.local.get(["isEnabled"], resolve)
-  );
+    chrome.storage.local.get(['isEnabled'], resolve)
+  )
   // Promisified until usage of Manifest V3
   // If there are multiple platforms user data has to be checked for every platform
   const userDataAvail = await new Promise((resolve) =>
-    chrome.runtime.sendMessage({ cmd: "check_user_data" }, resolve)
-  );
-  await userDataAvail;
+    chrome.runtime.sendMessage({ cmd: 'check_user_data' }, resolve)
+  )
+  await userDataAvail
   if (userDataAvail) {
     // Promisified until usage of Manifest V3
     await new Promise((resolve) =>
       chrome.storage.local.set({ isEnabled: !isEnabled.isEnabled }, resolve)
-    );
+    )
   } else {
     chrome.runtime.sendMessage({
-      cmd: "open_settings_page",
-      params: "auto_login_settings",
-    });
-    window.close();
+      cmd: 'open_settings_page',
+      params: 'auto_login_settings'
+    })
+    window.close()
   }
 }
 
 // set switch
-async function displayEnabled() {
+async function displayEnabled () {
   // Promisified until usage of Manifest V3
   const isEnabled = await new Promise((resolve) =>
-    chrome.storage.local.get(["isEnabled"], resolve)
-  );
-  document.getElementById("switch").checked = !!isEnabled.isEnabled;
+    chrome.storage.local.get(['isEnabled'], resolve)
+  )
+  document.getElementById('switch').checked = !!isEnabled.isEnabled
 }
 
 // return course_list = [{link:link, name: name}, ...]
-async function loadCourses(type) {
+async function loadCourses (type) {
   // Promisified until usage of Manifest V3
   const data = await new Promise((resolve) =>
-    chrome.storage.local.get(["favoriten", "meine_kurse"], resolve)
-  );
+    chrome.storage.local.get(['favoriten', 'meine_kurse'], resolve)
+  )
   try {
-    return JSON.parse(data[type]);
+    return JSON.parse(data[type])
   } catch {
-    return false;
+    return false
   }
 }
 
 /* When the user clicks on the button,
 toggle between hiding and showing the dropdown content */
-async function selectStudiengangDropdown() {
+async function selectStudiengangDropdown () {
   document
-    .getElementById("select_studiengang_dropdown_content")
-    .classList.toggle("show");
-  document.getElementById("select_studiengang_dropdown_id").style.border =
-    "none";
+    .getElementById('select_studiengang_dropdown_content')
+    .classList.toggle('show')
+  document.getElementById('select_studiengang_dropdown_id').style.border =
+    'none'
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set(
       { updateCustomizeStudiengang: dropdownUpdateId },
       resolve
     )
-  );
+  )
 }
 
-async function sendRating() {
-  const course = this.getAttribute("courseref");
-  const rating = document.getElementById(course).dataset.rating;
+async function sendRating () {
+  const course = this.getAttribute('courseref')
+  const rating = document.getElementById(course).dataset.rating
 
-  console.log("GOT THE FOLLOWING RATING:");
-  console.log(course);
-  console.log(rating);
+  console.log('GOT THE FOLLOWING RATING:')
+  console.log(course)
+  console.log(rating)
 
   // rating cannot be zero
-  if (rating === "0.0") {
-    alert("Bitte bewerte den Kurs mit Sternen, bevor du dein Rating abgibst!");
-    return;
+  if (rating === '0.0') {
+    alert('Bitte bewerte den Kurs mit Sternen, bevor du dein Rating abgibst!')
+    return
   }
 
   // add to rated list
   // Promisified until usage of Manifest V3
   const ratedCoursesFetch = await new Promise((resolve) =>
-    chrome.storage.local.get(["ratedCourses"], resolve)
-  );
-  const updatedCourseList = ratedCoursesFetch.ratedCourses || [];
-  updatedCourseList.push(course);
+    chrome.storage.local.get(['ratedCourses'], resolve)
+  )
+  const updatedCourseList = ratedCoursesFetch.ratedCourses || []
+  updatedCourseList.push(course)
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set({ ratedCourses: updatedCourseList }, resolve)
-  );
+  )
 
   // remove the rating div
-  document.getElementById(course + " Wrapper").remove();
+  document.getElementById(course + ' Wrapper').remove()
 
   // send rating
-  let courseURI = course.replaceAll("/", ""); // very important, as it is interpreted as documents and collections in the db
-  courseURI = encodeURIComponent(courseURI);
+  let courseURI = course.replaceAll('/', '') // very important, as it is interpreted as documents and collections in the db
+  courseURI = encodeURIComponent(courseURI)
   courseURI = courseURI
-    .replaceAll("!", "%21")
-    .replaceAll("'", "%27")
-    .replaceAll("(", "%28")
-    .replaceAll(")", "%29")
-    .replaceAll("~", "%7E");
-  const ratingURI = rating.replace(".", ",");
+    .replaceAll('!', '%21')
+    .replaceAll("'", '%27')
+    .replaceAll('(', '%28')
+    .replaceAll(')', '%29')
+    .replaceAll('~', '%7E')
+  const ratingURI = rating.replace('.', ',')
   // console.log(courseURI)
 
   // IF YOU ARE TRYING TO HACK please use the following domain instead: https://us-central1-tufastcourseratinghack.cloudfunctions.net/setRatingHACK . It has the same services running. Let me know if you find any security issues - thanks! - oli
   const url =
-    "https://us-central1-tufastcourserating2.cloudfunctions.net/setRating?rating=" +
+    'https://us-central1-tufastcourserating2.cloudfunctions.net/setRating?rating=' +
     ratingURI +
-    "&course=" +
-    courseURI;
+    '&course=' +
+    courseURI
   // console.log(url)
 
-  const resp = await fetch(url);
-  console.log(await resp.text());
+  const resp = await fetch(url)
+  console.log(await resp.text())
 }
 
-async function removeIntro() {
-  document.getElementById("intro_rating").remove();
+async function removeIntro () {
+  document.getElementById('intro_rating').remove()
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set({ closedIntro1: true }, resolve)
-  );
+  )
 }
 
-async function removeOutro() {
-  document.getElementById("outro_rating").remove();
+async function removeOutro () {
+  document.getElementById('outro_rating').remove()
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set({ closedOutro1: true }, resolve)
-  );
+  )
 }
 
-async function removeMsg1() {
-  document.getElementById("msg1-wrapper").remove();
+async function removeMsg1 () {
+  document.getElementById('msg1-wrapper').remove()
   // Promisified until usage of Manifest V3
   await new Promise((resolve) =>
     chrome.storage.local.set({ closedMsg1: true }, resolve)
-  );
+  )
 }
diff --git a/src/freshContent/settings/Settings.vue b/src/freshContent/settings/Settings.vue
index 2f7f07f5..bd431c20 100644
--- a/src/freshContent/settings/Settings.vue
+++ b/src/freshContent/settings/Settings.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="main-grid">
     <header class="main-grid__header">
-      <h1 class="upper txt-bold main-grid__title">Willkommen bei TUfast 🚀</h1>
+      <h1 class="upper txt-bold main-grid__title">
+        Willkommen bei TUfast 🚀
+      </h1>
       <h3 class="txt-bold main-grid__subtitle">
         Hier kannst du alle Funktionen entdecken und Einstellungen vornehmen.
       </h3>
@@ -36,7 +38,10 @@
       <component :is="currentSetting.settingsPage" />
     </template>
   </Card>
-  <teleport v-if="!hideWelcome" to="body">
+  <teleport
+    v-if="!hideWelcome"
+    to="body"
+  >
     <Onboarding
       :current-step="currentOnboardingStep"
       :h1="onboardingSteps[currentOnboardingStep - 1].h1"
@@ -50,47 +55,47 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref } from "vue";
+import { defineComponent, onBeforeMount, ref } from 'vue'
 
 // types
-import type { Setting } from "./types/Setting";
+import type { Setting } from './types/Setting'
 
 // Components
-import ColorSwitch from "./components/ColorSwitch.vue";
-import LanguageSelect from "./components/LanguageSelect.vue";
-import Statistics from "./components/Statistics.vue";
-import Dropdown from "./components/Dropdown.vue";
-import SettingTile from "./components/SettingTile.vue";
-import Onboarding from "./components/Onboarding.vue";
-import Card from "./components/Card.vue";
-import Toggle from "./components/Toggle.vue";
+import ColorSwitch from './components/ColorSwitch.vue'
+import LanguageSelect from './components/LanguageSelect.vue'
+import Statistics from './components/Statistics.vue'
+import Dropdown from './components/Dropdown.vue'
+import SettingTile from './components/SettingTile.vue'
+import Onboarding from './components/Onboarding.vue'
+import Card from './components/Card.vue'
+import Toggle from './components/Toggle.vue'
 
 // Settings Page Components
-import AutoLogin from "./settingPages/AutoLogin.vue";
-import Email from "./settingPages/Email.vue";
-import OpalCourses from "./settingPages/OpalCourses.vue";
-import ImproveOpal from "./settingPages/ImproveOpal.vue";
-import Shortcuts from "./settingPages/Shortcuts.vue";
-import SearchEngines from "./settingPages/SearchEngines.vue";
-import Rockets from "./settingPages/Rockets.vue";
-import Contact from "./settingPages/Contact.vue";
+import AutoLogin from './settingPages/AutoLogin.vue'
+import Email from './settingPages/Email.vue'
+import OpalCourses from './settingPages/OpalCourses.vue'
+import ImproveOpal from './settingPages/ImproveOpal.vue'
+import Shortcuts from './settingPages/Shortcuts.vue'
+import SearchEngines from './settingPages/SearchEngines.vue'
+import Rockets from './settingPages/Rockets.vue'
+import Contact from './settingPages/Contact.vue'
 
 // Onboarding Page Components
-import Welcome from "./onboardingPages/01_Welcome.vue";
-import SearchSetup from "./onboardingPages/02_SearchSetup.vue";
-import LoginSetup from "./onboardingPages/03_LoginSetup.vue";
-import LoginAccept from "./onboardingPages/04_LoginAccept.vue";
-import EMailSetup from "./onboardingPages/05_EMailSetup.vue";
-import OpalSetup from "./onboardingPages/06_OpalSetup.vue";
-import DoneSetup from "./onboardingPages/07_DoneSetup.vue";
+import Welcome from './onboardingPages/01_Welcome.vue'
+import SearchSetup from './onboardingPages/02_SearchSetup.vue'
+import LoginSetup from './onboardingPages/03_LoginSetup.vue'
+import LoginAccept from './onboardingPages/04_LoginAccept.vue'
+import EMailSetup from './onboardingPages/05_EMailSetup.vue'
+import OpalSetup from './onboardingPages/06_OpalSetup.vue'
+import DoneSetup from './onboardingPages/07_DoneSetup.vue'
 
 // configurations
-import settings from "./settings.json";
-import onboardingSteps from "./onboarding.json";
+import settings from './settings.json'
+import onboardingSteps from './onboarding.json'
 
 // composables
-import { useChrome } from "./composables/chrome";
-import { useStepper } from "./composables/stepper";
+import { useChrome } from './composables/chrome'
+import { useStepper } from './composables/stepper'
 // Temporary fix: We need to import the Components for the icons manually as no global usage is possible
 // But we need to do this in SettingsTile.
 
@@ -118,76 +123,76 @@ export default defineComponent({
     LoginAccept,
     EMailSetup,
     OpalSetup,
-    DoneSetup,
+    DoneSetup
   },
-  setup() {
-    const { getChromeLocalStorage, setChromeLocalStorage } = useChrome();
-    const { hideWelcome, currentOnboardingStep } = useStepper();
-    const showCard = ref(false);
-    const currentSetting = ref(settings[0]);
-    const animState = ref<"dark" | "light">("dark");
+  setup () {
+    const { getChromeLocalStorage, setChromeLocalStorage } = useChrome()
+    const { hideWelcome, currentOnboardingStep } = useStepper()
+    const showCard = ref(false)
+    const currentSetting = ref(settings[0])
+    const animState = ref<'dark' | 'light'>('dark')
 
     // handles the opening of a setting card
     const openSetting = (setting: Setting) => {
-      showCard.value = true;
-      currentSetting.value = setting;
-    };
+      showCard.value = true
+      currentSetting.value = setting
+    }
 
     // toggles the theme setting inside local storage
     const toggleTheme = async () => {
-      const theme = (await getChromeLocalStorage("theme")) as "light" | "dark";
-      if (animState.value === "dark") {
-        await setChromeLocalStorage({ theme: "light" });
+      const theme = (await getChromeLocalStorage('theme')) as 'light' | 'dark'
+      if (animState.value === 'dark') {
+        await setChromeLocalStorage({ theme: 'light' })
       }
-      if (animState.value === "light") {
-        await setChromeLocalStorage({ theme: "dark" });
+      if (animState.value === 'light') {
+        await setChromeLocalStorage({ theme: 'dark' })
       }
 
-      updateTheme(theme === "dark" ? "light" : "dark");
-    };
+      updateTheme(theme === 'dark' ? 'light' : 'dark')
+    }
 
     // updates the theme classes on the <html> element
     const updateTheme = (theme: string) => {
       // shortening the rest of the logic
       const setClass = (className: string) =>
-        document.documentElement.classList.add(className);
+        document.documentElement.classList.add(className)
       const unsetClass = (className: string) =>
-        document.documentElement.classList.remove(className);
-      if (theme === "dark") {
-        animState.value = "dark";
-        setClass("dark");
-        unsetClass("light");
-      } else if (theme === "light") {
-        animState.value = "light";
-        setClass("light");
-        unsetClass("dark");
+        document.documentElement.classList.remove(className)
+      if (theme === 'dark') {
+        animState.value = 'dark'
+        setClass('dark')
+        unsetClass('light')
+      } else if (theme === 'light') {
+        animState.value = 'light'
+        setClass('light')
+        unsetClass('dark')
       }
-    };
+    }
 
     // sets the right theme on initial load
     const themeSetup = async () => {
-      let selectedTheme = (await getChromeLocalStorage("theme")) as
-        | "dark"
-        | "light"
-        | "system";
-      if (selectedTheme === "system") {
+      let selectedTheme = (await getChromeLocalStorage('theme')) as
+        | 'dark'
+        | 'light'
+        | 'system'
+      if (selectedTheme === 'system') {
         // check if user prefers some color theme
-        selectedTheme = window.matchMedia("(prefers-color-scheme: light)")
+        selectedTheme = window.matchMedia('(prefers-color-scheme: light)')
           .matches
-          ? "light"
-          : "dark";
-        await setChromeLocalStorage({ theme: selectedTheme });
+          ? 'light'
+          : 'dark'
+        await setChromeLocalStorage({ theme: selectedTheme })
       }
-      updateTheme(selectedTheme);
-    };
+      updateTheme(selectedTheme)
+    }
 
     // lifecycle hook - runs some startup logic before load of settings page
     onBeforeMount(async () => {
       hideWelcome.value = (await getChromeLocalStorage(
-        "hideWelcome"
-      )) as boolean;
-      themeSetup();
-    });
+        'hideWelcome'
+      )) as boolean
+      themeSetup()
+    })
 
     return {
       hideWelcome,
@@ -198,10 +203,10 @@ export default defineComponent({
       currentSetting,
       openSetting,
       toggleTheme,
-      animState,
-    };
-  },
-});
+      animState
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 011c9d8c..01d7a6c3 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,7 +7,7 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      />
+      >
       <component
         :is="statusIcon"
         :class="`input__icon ${
@@ -17,8 +17,7 @@
     </div>
     <span
       :style="`opacity: ${(!valid || warn) && modelValue.length > 0 ? 1 : 0}`"
-      >{{ errorMessage }}</span
-    >
+    >{{ errorMessage }}</span>
   </div>
 </template>
 
@@ -29,101 +28,101 @@ import {
   PropType,
   computed,
   onMounted,
-  watchEffect,
-} from "vue";
+  watchEffect
+} from 'vue'
 import {
   PhXCircle,
   PhCheckCircle,
-  PhWarningCircle,
-} from "@dnlsndr/vue-phosphor-icons";
+  PhWarningCircle
+} from '@dnlsndr/vue-phosphor-icons'
 
 export default defineComponent({
   components: {
     PhXCircle,
     PhCheckCircle,
-    PhWarningCircle,
+    PhWarningCircle
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: "text",
+      default: 'text'
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null,
+      default: null
     },
     modelValue: {
       type: String as PropType<string>,
-      default: "",
+      default: ''
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     warn: {
       type: Boolean as PropType<boolean>,
-      default: false,
-    },
+      default: false
+    }
   },
-  emits: ["update:modelValue", "update:valid"],
-  setup(props, { emit }) {
-    const statusIcon = ref("PhCheckCircle");
-    const state = ref("");
+  emits: ['update:modelValue', 'update:valid'],
+  setup (props, { emit }) {
+    const statusIcon = ref('PhCheckCircle')
+    const state = ref('')
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue));
+    const correctPattern = computed(() => props.pattern.test(props.modelValue))
 
     const emitState = ($event: Event) => {
-      const target = $event.target as HTMLInputElement;
-      emit("update:modelValue", target.value);
-      emit("update:valid", correctPattern.value || props.warn);
-    };
+      const target = $event.target as HTMLInputElement
+      emit('update:modelValue', target.value)
+      emit('update:valid', correctPattern.value || props.warn)
+    }
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
         state.value = correctPattern.value
-          ? "input--correct"
+          ? 'input--correct'
           : props.warn
-          ? "input--warn"
-          : "input--false";
+            ? 'input--warn'
+            : 'input--false'
         statusIcon.value = correctPattern.value
-          ? "PhCheckCircle"
+          ? 'PhCheckCircle'
           : props.warn
-          ? "PhWarningCircle"
-          : "PhXCircle";
-        emit("update:valid", correctPattern.value || props.warn);
+            ? 'PhWarningCircle'
+            : 'PhXCircle'
+        emit('update:valid', correctPattern.value || props.warn)
       } else {
-        state.value = "";
+        state.value = ''
       }
-    });
+    })
 
     onMounted(() => {
       if (props.column) {
         document
-          .querySelectorAll(".input-container")
-          ?.forEach((el) => el.classList.add("input-container--column"));
+          .querySelectorAll('.input-container')
+          ?.forEach((el) => el.classList.add('input-container--column'))
       }
-    });
+    })
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state,
-    };
-  },
-});
+      state
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/components/Onboarding.vue b/src/freshContent/settings/components/Onboarding.vue
index 0fbfc90f..c92a1e00 100644
--- a/src/freshContent/settings/components/Onboarding.vue
+++ b/src/freshContent/settings/components/Onboarding.vue
@@ -20,7 +20,10 @@
           currentStep === stepsCount ? 'onboarding__footer--center' : ''
         }`"
       >
-        <div v-if="currentStep !== stepsCount" class="footer-text">
+        <div
+          v-if="currentStep !== stepsCount"
+          class="footer-text"
+        >
           <h2 class="footer-text__title">
             {{ h1 }}
           </h2>
@@ -39,52 +42,52 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType } from 'vue'
 
 // components
-import { PhX } from "@dnlsndr/vue-phosphor-icons";
-import Stepper from "./Stepper.vue";
-import OnboardingButton from "./OnboardingButton.vue";
+import { PhX } from '@dnlsndr/vue-phosphor-icons'
+import Stepper from './Stepper.vue'
+import OnboardingButton from './OnboardingButton.vue'
 
 // composables
-import { useStepper } from "../composables/stepper";
+import { useStepper } from '../composables/stepper'
 
 export default defineComponent({
   components: {
     Stepper,
     OnboardingButton,
-    PhX,
+    PhX
   },
   props: {
     h1: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     h2: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     currentStep: {
       type: Number as PropType<number>,
-      required: true,
-    },
+      required: true
+    }
   },
-  emits: ["close-me", "next"],
-  setup() {
-    const { stepsCount, close } = useStepper();
+  emits: ['close-me', 'next'],
+  setup () {
+    const { stepsCount, close } = useStepper()
 
     setTimeout(() => {
       document
-        .querySelector(".onboarding")
-        ?.classList.remove("onboarding--opening");
-    }, 800);
+        .querySelector('.onboarding')
+        ?.classList.remove('onboarding--opening')
+    }, 800)
 
     return {
       stepsCount,
-      close,
-    };
-  },
-});
+      close
+    }
+  }
+})
 </script>
 
 <style lang="sass">
diff --git a/src/freshContent/settings/components/OnboardingButton.vue b/src/freshContent/settings/components/OnboardingButton.vue
index a3ec1a52..780ba7f2 100644
--- a/src/freshContent/settings/components/OnboardingButton.vue
+++ b/src/freshContent/settings/components/OnboardingButton.vue
@@ -1,8 +1,19 @@
 <template>
-  <div class="onboarding-btn" @click="next()">
+  <div
+    class="onboarding-btn"
+    @click="next()"
+  >
     <div class="onboarding-btn__inner">
-      <svg class="onboarding-btn__progress" viewBox="0 0 100 100">
-        <circle cx="50" cy="50" r="45" :style="`--done: ${(percentDone / 100) * 280}`" />
+      <svg
+        class="onboarding-btn__progress"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          :style="`--done: ${(percentDone / 100) * 280}`"
+        />
       </svg>
       <PhArrowRight class="onboarding-btn__arrow" />
     </div>
@@ -10,27 +21,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue'
 
 // components
-import { PhArrowRight } from "@dnlsndr/vue-phosphor-icons";
+import { PhArrowRight } from '@dnlsndr/vue-phosphor-icons'
 
 // composables
-import { useStepper } from "../composables/stepper";
+import { useStepper } from '../composables/stepper'
 
 export default defineComponent({
   components: {
-    PhArrowRight,
+    PhArrowRight
   },
-  setup() {
-    const { next, percentDone } = useStepper();
+  setup () {
+    const { next, percentDone } = useStepper()
 
     return {
       next,
-      percentDone,
-    };
-  },
-});
+      percentDone
+    }
+  }
+})
 </script>
 
 <style lang="sass">
diff --git a/src/freshContent/settings/components/Setting.vue b/src/freshContent/settings/components/Setting.vue
index c41c9959..54d6a718 100644
--- a/src/freshContent/settings/components/Setting.vue
+++ b/src/freshContent/settings/components/Setting.vue
@@ -74,7 +74,6 @@ export default defineComponent({
 
   &--column span
     text-align: center
-        
 
 .light
     & .setting--column .setting__toggle
diff --git a/src/freshContent/settings/components/Stepper.vue b/src/freshContent/settings/components/Stepper.vue
index 7ad7187d..1666c7a7 100644
--- a/src/freshContent/settings/components/Stepper.vue
+++ b/src/freshContent/settings/components/Stepper.vue
@@ -3,7 +3,9 @@
     <div
       v-for="step of stepsCount"
       :key="step"
-      :class="`stepper__step ${step === currentOnboardingStep ? 'stepper__step--current' : ''}`"
+      :class="`stepper__step ${
+        step === currentOnboardingStep ? 'stepper__step--current' : ''
+      }`"
     />
   </div>
 </template>
@@ -12,21 +14,17 @@
 import { defineComponent } from 'vue'
 
 // types
-import type { PropType } from 'vue'
 
 // composables
 import { useStepper } from '../composables/stepper'
 
 export default defineComponent({
   setup () {
-    const {
-      stepsCount,
-      currentOnboardingStep,
-    } = useStepper()
+    const { stepsCount, currentOnboardingStep } = useStepper()
 
     return {
       stepsCount,
-      currentOnboardingStep,
+      currentOnboardingStep
     }
   }
 })
diff --git a/src/freshContent/settings/composables/logins.ts b/src/freshContent/settings/composables/logins.ts
index e5a17849..6f18e385 100644
--- a/src/freshContent/settings/composables/logins.ts
+++ b/src/freshContent/settings/composables/logins.ts
@@ -1,34 +1,34 @@
-import type { Login } from "../types/Login";
+import type { Login } from '../types/Login'
 
 export const useLogins = () => ({
-  logins,
-});
+  logins
+})
 
 const logins: Login[] = [
   {
-    id: "zih",
+    id: 'zih',
     title:
-      "Werde in alle Online-Portale der TU Dresden automatisch angemeldet.",
-    name: "Selma",
+      'Werde in alle Online-Portale der TU Dresden automatisch angemeldet.',
+    name: 'Selma',
     state: false,
-    usernamePlaceholder: "Nutzername (selma-Login)",
+    usernamePlaceholder: 'Nutzername (selma-Login)',
     usernamePattern: /^(s{1}\d{7}|[a-z]{4}\d{3}[a-z])$/,
     usernameError:
       "Normalerweise ohne @mailbox.tu-dresden.de in der Form 's3276763' oder 'luka075d'.",
-    passwordPlaceholder: "Passwort (selma-Login)",
+    passwordPlaceholder: 'Passwort (selma-Login)',
     passwordPattern: /.{5,}/,
-    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
+    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
   },
   {
-    id: "slub",
-    title: "Werde automatisch auf der SLUB-Seite angemeldet.",
-    name: "Slub",
+    id: 'slub',
+    title: 'Werde automatisch auf der SLUB-Seite angemeldet.',
+    name: 'Slub',
     state: false,
-    usernamePlaceholder: "Benutzernummer (SLUB-Login)",
+    usernamePlaceholder: 'Benutzernummer (SLUB-Login)',
     usernamePattern: /^[0-9]{7}$/,
-    usernameError: "die Nutzernummer findest du u.a. auf deiner SLUB-Karte",
-    passwordPlaceholder: "Passwort (SLUB-Login)",
+    usernameError: 'die Nutzernummer findest du u.a. auf deiner SLUB-Karte',
+    passwordPlaceholder: 'Passwort (SLUB-Login)',
     passwordPattern: /.{5,}/,
-    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
-  },
-];
+    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
+  }
+]
diff --git a/src/freshContent/settings/composables/stepper.ts b/src/freshContent/settings/composables/stepper.ts
index 57343e0a..bc33dea1 100644
--- a/src/freshContent/settings/composables/stepper.ts
+++ b/src/freshContent/settings/composables/stepper.ts
@@ -1,9 +1,9 @@
-import { ref } from "vue";
-import steps from "../onboarding.json";
+import { ref } from 'vue'
+import steps from '../onboarding.json'
 
-import { useChrome } from "../composables/chrome";
+import { useChrome } from '../composables/chrome'
 
-const { setChromeLocalStorage } = useChrome();
+const { setChromeLocalStorage } = useChrome()
 
 export const useStepper = () => ({
   stepWidth,
@@ -12,33 +12,33 @@ export const useStepper = () => ({
   next,
   hideWelcome,
   percentDone,
-  close,
-});
+  close
+})
 
-const stepWidth = ref(1);
-const currentOnboardingStep = ref(1);
-const stepsCount = ref(steps.length);
-const percentDone = ref(0);
-const hideWelcome = ref(false);
+const stepWidth = ref(1)
+const currentOnboardingStep = ref(1)
+const stepsCount = ref(steps.length)
+const percentDone = ref(0)
+const hideWelcome = ref(false)
 
 const next = () => {
   if (currentOnboardingStep.value < stepsCount.value) {
-    currentOnboardingStep.value += stepWidth.value;
-    stepWidth.value = 1;
-    percentDone.value = (currentOnboardingStep.value / stepsCount.value) * 100;
+    currentOnboardingStep.value += stepWidth.value
+    stepWidth.value = 1
+    percentDone.value = (currentOnboardingStep.value / stepsCount.value) * 100
   } else {
-    close();
+    close()
   }
-};
+}
 
 const close = () => {
-  document.querySelector(".onboarding")?.classList.add("onboarding--closing");
-  setTimeout(disableWelcome, 650);
-};
+  document.querySelector('.onboarding')?.classList.add('onboarding--closing')
+  setTimeout(disableWelcome, 650)
+}
 
 // disables the welcome message once the user
 // did the onboarding once (or canceled it)
 const disableWelcome = async () => {
-  await setChromeLocalStorage({ hideWelcome: true });
-  hideWelcome.value = true;
-};
+  await setChromeLocalStorage({ hideWelcome: true })
+  hideWelcome.value = true
+}
diff --git a/src/freshContent/settings/onboardingPages/03_LoginSetup.vue b/src/freshContent/settings/onboardingPages/03_LoginSetup.vue
index 3fd7fe06..ecc85a2b 100644
--- a/src/freshContent/settings/onboardingPages/03_LoginSetup.vue
+++ b/src/freshContent/settings/onboardingPages/03_LoginSetup.vue
@@ -30,14 +30,11 @@ export default defineComponent({
   emits: ['accept'],
   setup (_) {
     const { stepWidth } = useStepper()
-    
+
     const accept = ref(true)
 
     const setStepWidth = () => {
-      if (accept.value)
-        stepWidth.value = 1
-      else
-        stepWidth.value = 3
+      if (accept.value) { stepWidth.value = 1 } else { stepWidth.value = 3 }
     }
 
     return { accept, setStepWidth }
diff --git a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
index 22b9c358..b71ce596 100644
--- a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
+++ b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="title">
-    <h1 class="upper">AutoLogin</h1>
+    <h1 class="upper">
+      AutoLogin
+    </h1>
     <h2>in die Onlineportale der TU Dresden</h2>
   </div>
   <div class="inputs">
@@ -26,48 +28,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from "vue";
+import { defineComponent, ref, computed, watch } from 'vue'
 
 // components
-import Input from "../components/Input.vue";
+import Input from '../components/Input.vue'
 
 // composables
-import { useUserData } from "../composables/user-data";
-import { useStepper } from "../composables/stepper";
-import { useLogins } from "../composables/logins";
+import { useUserData } from '../composables/user-data'
+import { useStepper } from '../composables/stepper'
+import { useLogins } from '../composables/logins'
 
 export default defineComponent({
   components: {
     //    Onboarding,
-    CustomInput: Input,
+    CustomInput: Input
   },
-  setup() {
-    const { stepWidth } = useStepper();
-    const { saveUserData } = useUserData();
-    const { logins } = useLogins();
-    const zihLogin = logins[0];
-    const username = ref("");
-    const password = ref("");
-    const usernameValid = ref(false);
-    const passwordValid = ref(false);
+  setup () {
+    const { stepWidth } = useStepper()
+    const { saveUserData } = useUserData()
+    const { logins } = useLogins()
+    const zihLogin = logins[0]
+    const username = ref('')
+    const password = ref('')
+    const usernameValid = ref(false)
+    const passwordValid = ref(false)
 
     // jump next step if ready was never set to true
-    stepWidth.value = 2;
+    stepWidth.value = 2
 
-    const ready = computed(() => usernameValid.value && passwordValid.value);
+    const ready = computed(() => usernameValid.value && passwordValid.value)
 
     watch(ready, async () => {
       if (ready.value === true) {
-        await saveUserData(username.value, password.value, "zih");
-        stepWidth.value = 1;
+        await saveUserData(username.value, password.value, 'zih')
+        stepWidth.value = 1
       } else {
-        stepWidth.value = 2;
+        stepWidth.value = 2
       }
-    });
+    })
 
-    return { username, password, usernameValid, passwordValid, zihLogin };
-  },
-});
+    return { username, password, usernameValid, passwordValid, zihLogin }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/settingPages/AutoLogin.vue b/src/freshContent/settings/settingPages/AutoLogin.vue
index 952bfd82..5370cbd3 100644
--- a/src/freshContent/settings/settingPages/AutoLogin.vue
+++ b/src/freshContent/settings/settingPages/AutoLogin.vue
@@ -1,5 +1,8 @@
 <template>
-  <LoginTabs v-model="currentLogin" :options="logins" />
+  <LoginTabs
+    v-model="currentLogin"
+    :options="logins"
+  />
   <h2>{{ currentLogin.title }}</h2>
   <h2
     :class="`state ${currentLogin.state ? 'state--active' : 'state--inactive'}`"
@@ -49,73 +52,73 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, watchEffect } from "vue";
+import { ref, defineComponent, watchEffect } from 'vue'
 
 // components
-import Input from "../components/Input.vue";
-import Button from "../components/Button.vue";
-import LoginTabs from "../components/LoginTabs.vue";
+import Input from '../components/Input.vue'
+import Button from '../components/Button.vue'
+import LoginTabs from '../components/LoginTabs.vue'
 
 // composables
-import { useLogins } from "../composables/logins";
-import { useChrome } from "../composables/chrome";
-import { useUserData } from "../composables/user-data";
+import { useLogins } from '../composables/logins'
+import { useChrome } from '../composables/chrome'
+import { useUserData } from '../composables/user-data'
 
 export default defineComponent({
   components: {
     CustomInput: Input,
     CustomButton: Button,
-    LoginTabs,
+    LoginTabs
   },
-  setup() {
-    const { logins } = useLogins();
-    const { sendChromeRuntimeMessage } = useChrome();
-    const { saveUserData, deleteUserData } = useUserData();
+  setup () {
+    const { logins } = useLogins()
+    const { sendChromeRuntimeMessage } = useChrome()
+    const { saveUserData, deleteUserData } = useUserData()
 
-    const currentLogin = ref(logins[0]);
+    const currentLogin = ref(logins[0])
 
-    const username = ref("");
-    const password = ref("");
-    const usernameValid = ref(false);
-    const passwordValid = ref(false);
+    const username = ref('')
+    const password = ref('')
+    const usernameValid = ref(false)
+    const passwordValid = ref(false)
 
-    const autoLoginActive = ref(false);
+    const autoLoginActive = ref(false)
 
     // get state of login
     watchEffect(async () => {
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    });
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    })
 
     const submitSave = async ($event: MouseEvent) => {
-      const target = $event.target as HTMLButtonElement;
+      const target = $event.target as HTMLButtonElement
 
-      if (target.disabled) return;
+      if (target.disabled) return
 
       // await this one to get back the new value in last line, otherwise could run too late
-      await saveUserData(username.value, password.value, currentLogin.value.id);
+      await saveUserData(username.value, password.value, currentLogin.value.id)
 
       // reset values
-      username.value = "";
-      password.value = "";
-      usernameValid.value = false;
-      passwordValid.value = false;
+      username.value = ''
+      password.value = ''
+      usernameValid.value = false
+      passwordValid.value = false
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    };
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    }
 
     const submitDelete = async () => {
       // await this one to get back the new value in last line, otherwise could run too late
-      await deleteUserData(currentLogin.value.id);
+      await deleteUserData(currentLogin.value.id)
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    };
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    }
 
     return {
       logins,
@@ -126,10 +129,10 @@ export default defineComponent({
       passwordValid,
       autoLoginActive,
       submitSave,
-      submitDelete,
-    };
-  },
-});
+      submitDelete
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/settingPages/SearchEngines.vue b/src/freshContent/settings/settingPages/SearchEngines.vue
index 4ad90bde..016f4e84 100644
--- a/src/freshContent/settings/settingPages/SearchEngines.vue
+++ b/src/freshContent/settings/settingPages/SearchEngines.vue
@@ -9,61 +9,62 @@
   </p>
 
   <p class="search-terms">
-    <template v-for="site in uniqueSites" :key="site">
-      {{ site[0] }} → {{ site[1].name }}<br />
+    <template
+      v-for="site in uniqueSites"
+      :key="site"
+    >
+      {{ site[0] }} → {{ site[1].name }}<br>
     </template>
   </p>
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref, watch } from "vue";
+import { defineComponent, onBeforeMount, ref, watch } from 'vue'
 
 // types
-import type { ResponseSE } from "../types/SettingHandler";
+import type { ResponseSE } from '../types/SettingHandler'
 
 // components
-import Setting from "../components/Setting.vue";
+import Setting from '../components/Setting.vue'
 
 // composables
-import { useSettingHandler } from "../composables/setting-handler";
+import { useSettingHandler } from '../composables/setting-handler'
 
 // the actual sites
-import sites from "../../../contentScripts/forward/searchEngines/sites.json";
+import sites from '../../../contentScripts/forward/searchEngines/sites.json'
 
 export default defineComponent({
   components: {
-    Setting,
+    Setting
   },
-  setup() {
-    const { se } = useSettingHandler();
-    const searchEngineActive = ref(false);
+  setup () {
+    const { se } = useSettingHandler()
+    const searchEngineActive = ref(false)
 
     const uniqueSites = Object.entries(sites)
       .filter(([_, site], idx, arr) => {
-        return arr.findIndex(([_, site2]) => site2.url === site.url) === idx;
+        return arr.findIndex(([_, site2]) => site2.url === site.url) === idx
       })
-      .sort((a, b) => a[0].localeCompare(b[0]));
+      .sort((a, b) => a[0].localeCompare(b[0]))
 
     onBeforeMount(async () => {
-      const { redirect } = (await se("check", "redirect")) as ResponseSE;
+      const { redirect } = (await se('check', 'redirect')) as ResponseSE
 
-      searchEngineActive.value = redirect;
+      searchEngineActive.value = redirect
 
-      watch(searchEngineActive, seUpdate);
-    });
+      watch(searchEngineActive, seUpdate)
+    })
 
     const seUpdate = async () => {
-      if (searchEngineActive.value)
-        searchEngineActive.value = (await se("enable", "redirect")) as boolean;
-      else await se("disable", "redirect");
-    };
+      if (searchEngineActive.value) { searchEngineActive.value = (await se('enable', 'redirect')) as boolean } else await se('disable', 'redirect')
+    }
 
     return {
       searchEngineActive,
-      uniqueSites,
-    };
-  },
-});
+      uniqueSites
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/types/Setting.ts b/src/freshContent/settings/types/Setting.ts
index fd060876..a45763ef 100644
--- a/src/freshContent/settings/types/Setting.ts
+++ b/src/freshContent/settings/types/Setting.ts
@@ -1,5 +1,5 @@
-interface Setting {
-    title: string,
-    icon: string,
-    settingsPage: string,
+export interface Setting {
+    title: string;
+    icon: string;
+    settingsPage: string;
 }

From e30fe3c25f8adbc7724708a4ce73a3e9507a539d Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 14:48:03 +0200
Subject: [PATCH 4/7] Changes warning message for username input.

---
 .../settings/components/Input.vue             | 87 +++++++++---------
 .../settings/composables/logins.ts            | 38 ++++----
 .../settings/settingPages/AutoLogin.vue       | 89 +++++++++----------
 3 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 01d7a6c3..4590064b 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,7 +7,7 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      >
+      />
       <component
         :is="statusIcon"
         :class="`input__icon ${
@@ -16,8 +16,11 @@
       />
     </div>
     <span
-      :style="`opacity: ${(!valid || warn) && modelValue.length > 0 ? 1 : 0}`"
-    >{{ errorMessage }}</span>
+      :style="`opacity: ${
+        (!correctPattern || warn) && modelValue.length > 0 ? 1 : 0
+      }`"
+      >{{ errorMessage }}</span
+    >
   </div>
 </template>
 
@@ -28,101 +31,101 @@ import {
   PropType,
   computed,
   onMounted,
-  watchEffect
-} from 'vue'
+  watchEffect,
+} from "vue";
 import {
   PhXCircle,
   PhCheckCircle,
-  PhWarningCircle
-} from '@dnlsndr/vue-phosphor-icons'
+  PhWarningCircle,
+} from "@dnlsndr/vue-phosphor-icons";
 
 export default defineComponent({
   components: {
     PhXCircle,
     PhCheckCircle,
-    PhWarningCircle
+    PhWarningCircle,
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: 'text'
+      default: "text",
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null
+      default: null,
     },
     modelValue: {
       type: String as PropType<string>,
-      default: ''
+      default: "",
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false
+      default: false,
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false
+      default: false,
     },
     warn: {
       type: Boolean as PropType<boolean>,
-      default: false
-    }
+      default: false,
+    },
   },
-  emits: ['update:modelValue', 'update:valid'],
-  setup (props, { emit }) {
-    const statusIcon = ref('PhCheckCircle')
-    const state = ref('')
+  emits: ["update:modelValue", "update:valid"],
+  setup(props, { emit }) {
+    const statusIcon = ref("PhCheckCircle");
+    const state = ref("");
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue))
+    const correctPattern = computed(() => props.pattern.test(props.modelValue));
 
     const emitState = ($event: Event) => {
-      const target = $event.target as HTMLInputElement
-      emit('update:modelValue', target.value)
-      emit('update:valid', correctPattern.value || props.warn)
-    }
+      const target = $event.target as HTMLInputElement;
+      emit("update:modelValue", target.value);
+      emit("update:valid", correctPattern.value || props.warn);
+    };
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
         state.value = correctPattern.value
-          ? 'input--correct'
+          ? "input--correct"
           : props.warn
-            ? 'input--warn'
-            : 'input--false'
+          ? "input--warn"
+          : "input--false";
         statusIcon.value = correctPattern.value
-          ? 'PhCheckCircle'
+          ? "PhCheckCircle"
           : props.warn
-            ? 'PhWarningCircle'
-            : 'PhXCircle'
-        emit('update:valid', correctPattern.value || props.warn)
+          ? "PhWarningCircle"
+          : "PhXCircle";
+        emit("update:valid", correctPattern.value || props.warn);
       } else {
-        state.value = ''
+        state.value = "";
       }
-    })
+    });
 
     onMounted(() => {
       if (props.column) {
         document
-          .querySelectorAll('.input-container')
-          ?.forEach((el) => el.classList.add('input-container--column'))
+          .querySelectorAll(".input-container")
+          ?.forEach((el) => el.classList.add("input-container--column"));
       }
-    })
+    });
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state
-    }
-  }
-})
+      state,
+    };
+  },
+});
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/composables/logins.ts b/src/freshContent/settings/composables/logins.ts
index 6f18e385..5fd058f8 100644
--- a/src/freshContent/settings/composables/logins.ts
+++ b/src/freshContent/settings/composables/logins.ts
@@ -1,34 +1,34 @@
-import type { Login } from '../types/Login'
+import type { Login } from "../types/Login";
 
 export const useLogins = () => ({
-  logins
-})
+  logins,
+});
 
 const logins: Login[] = [
   {
-    id: 'zih',
+    id: "zih",
     title:
-      'Werde in alle Online-Portale der TU Dresden automatisch angemeldet.',
-    name: 'Selma',
+      "Werde in alle Online-Portale der TU Dresden automatisch angemeldet.",
+    name: "Selma",
     state: false,
-    usernamePlaceholder: 'Nutzername (selma-Login)',
+    usernamePlaceholder: "Nutzername (selma-Login)",
     usernamePattern: /^(s{1}\d{7}|[a-z]{4}\d{3}[a-z])$/,
     usernameError:
-      "Normalerweise ohne @mailbox.tu-dresden.de in der Form 's3276763' oder 'luka075d'.",
-    passwordPlaceholder: 'Passwort (selma-Login)',
+      "Der Nutzername hat die Form 's3276763' oder 'luka075d'. Speichere deine aktuelle Eingabe nur, wenn du dir sicher bist.",
+    passwordPlaceholder: "Passwort (selma-Login)",
     passwordPattern: /.{5,}/,
-    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
+    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
   },
   {
-    id: 'slub',
-    title: 'Werde automatisch auf der SLUB-Seite angemeldet.',
-    name: 'Slub',
+    id: "slub",
+    title: "Werde automatisch auf der SLUB-Seite angemeldet.",
+    name: "Slub",
     state: false,
-    usernamePlaceholder: 'Benutzernummer (SLUB-Login)',
+    usernamePlaceholder: "Benutzernummer (SLUB-Login)",
     usernamePattern: /^[0-9]{7}$/,
-    usernameError: 'die Nutzernummer findest du u.a. auf deiner SLUB-Karte',
-    passwordPlaceholder: 'Passwort (SLUB-Login)',
+    usernameError: "die Nutzernummer findest du u.a. auf deiner SLUB-Karte",
+    passwordPlaceholder: "Passwort (SLUB-Login)",
     passwordPattern: /.{5,}/,
-    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
-  }
-]
+    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
+  },
+];
diff --git a/src/freshContent/settings/settingPages/AutoLogin.vue b/src/freshContent/settings/settingPages/AutoLogin.vue
index 5370cbd3..952bfd82 100644
--- a/src/freshContent/settings/settingPages/AutoLogin.vue
+++ b/src/freshContent/settings/settingPages/AutoLogin.vue
@@ -1,8 +1,5 @@
 <template>
-  <LoginTabs
-    v-model="currentLogin"
-    :options="logins"
-  />
+  <LoginTabs v-model="currentLogin" :options="logins" />
   <h2>{{ currentLogin.title }}</h2>
   <h2
     :class="`state ${currentLogin.state ? 'state--active' : 'state--inactive'}`"
@@ -52,73 +49,73 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, watchEffect } from 'vue'
+import { ref, defineComponent, watchEffect } from "vue";
 
 // components
-import Input from '../components/Input.vue'
-import Button from '../components/Button.vue'
-import LoginTabs from '../components/LoginTabs.vue'
+import Input from "../components/Input.vue";
+import Button from "../components/Button.vue";
+import LoginTabs from "../components/LoginTabs.vue";
 
 // composables
-import { useLogins } from '../composables/logins'
-import { useChrome } from '../composables/chrome'
-import { useUserData } from '../composables/user-data'
+import { useLogins } from "../composables/logins";
+import { useChrome } from "../composables/chrome";
+import { useUserData } from "../composables/user-data";
 
 export default defineComponent({
   components: {
     CustomInput: Input,
     CustomButton: Button,
-    LoginTabs
+    LoginTabs,
   },
-  setup () {
-    const { logins } = useLogins()
-    const { sendChromeRuntimeMessage } = useChrome()
-    const { saveUserData, deleteUserData } = useUserData()
+  setup() {
+    const { logins } = useLogins();
+    const { sendChromeRuntimeMessage } = useChrome();
+    const { saveUserData, deleteUserData } = useUserData();
 
-    const currentLogin = ref(logins[0])
+    const currentLogin = ref(logins[0]);
 
-    const username = ref('')
-    const password = ref('')
-    const usernameValid = ref(false)
-    const passwordValid = ref(false)
+    const username = ref("");
+    const password = ref("");
+    const usernameValid = ref(false);
+    const passwordValid = ref(false);
 
-    const autoLoginActive = ref(false)
+    const autoLoginActive = ref(false);
 
     // get state of login
     watchEffect(async () => {
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: 'check_user_data',
-        platform: currentLogin.value.id
-      })) as boolean
-    })
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    });
 
     const submitSave = async ($event: MouseEvent) => {
-      const target = $event.target as HTMLButtonElement
+      const target = $event.target as HTMLButtonElement;
 
-      if (target.disabled) return
+      if (target.disabled) return;
 
       // await this one to get back the new value in last line, otherwise could run too late
-      await saveUserData(username.value, password.value, currentLogin.value.id)
+      await saveUserData(username.value, password.value, currentLogin.value.id);
 
       // reset values
-      username.value = ''
-      password.value = ''
-      usernameValid.value = false
-      passwordValid.value = false
+      username.value = "";
+      password.value = "";
+      usernameValid.value = false;
+      passwordValid.value = false;
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: 'check_user_data',
-        platform: currentLogin.value.id
-      })) as boolean
-    }
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    };
 
     const submitDelete = async () => {
       // await this one to get back the new value in last line, otherwise could run too late
-      await deleteUserData(currentLogin.value.id)
+      await deleteUserData(currentLogin.value.id);
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: 'check_user_data',
-        platform: currentLogin.value.id
-      })) as boolean
-    }
+        cmd: "check_user_data",
+        platform: currentLogin.value.id,
+      })) as boolean;
+    };
 
     return {
       logins,
@@ -129,10 +126,10 @@ export default defineComponent({
       passwordValid,
       autoLoginActive,
       submitSave,
-      submitDelete
-    }
-  }
-})
+      submitDelete,
+    };
+  },
+});
 </script>
 
 <style lang="sass" scoped>

From 76be909b777741c6771e62053bbad872bb1a1f2a Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 14:55:29 +0200
Subject: [PATCH 5/7] run `npm run test`

---
 .../settings/components/Input.vue             | 83 +++++++++--------
 .../settings/composables/logins.ts            | 36 ++++----
 .../settings/settingPages/AutoLogin.vue       | 89 ++++++++++---------
 3 files changed, 105 insertions(+), 103 deletions(-)

diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 4590064b..39477e1e 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,7 +7,7 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      />
+      >
       <component
         :is="statusIcon"
         :class="`input__icon ${
@@ -19,8 +19,7 @@
       :style="`opacity: ${
         (!correctPattern || warn) && modelValue.length > 0 ? 1 : 0
       }`"
-      >{{ errorMessage }}</span
-    >
+    >{{ errorMessage }}</span>
   </div>
 </template>
 
@@ -31,101 +30,101 @@ import {
   PropType,
   computed,
   onMounted,
-  watchEffect,
-} from "vue";
+  watchEffect
+} from 'vue'
 import {
   PhXCircle,
   PhCheckCircle,
-  PhWarningCircle,
-} from "@dnlsndr/vue-phosphor-icons";
+  PhWarningCircle
+} from '@dnlsndr/vue-phosphor-icons'
 
 export default defineComponent({
   components: {
     PhXCircle,
     PhCheckCircle,
-    PhWarningCircle,
+    PhWarningCircle
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: "text",
+      default: 'text'
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null,
+      default: null
     },
     modelValue: {
       type: String as PropType<string>,
-      default: "",
+      default: ''
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     warn: {
       type: Boolean as PropType<boolean>,
-      default: false,
-    },
+      default: false
+    }
   },
-  emits: ["update:modelValue", "update:valid"],
-  setup(props, { emit }) {
-    const statusIcon = ref("PhCheckCircle");
-    const state = ref("");
+  emits: ['update:modelValue', 'update:valid'],
+  setup (props, { emit }) {
+    const statusIcon = ref('PhCheckCircle')
+    const state = ref('')
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue));
+    const correctPattern = computed(() => props.pattern.test(props.modelValue))
 
     const emitState = ($event: Event) => {
-      const target = $event.target as HTMLInputElement;
-      emit("update:modelValue", target.value);
-      emit("update:valid", correctPattern.value || props.warn);
-    };
+      const target = $event.target as HTMLInputElement
+      emit('update:modelValue', target.value)
+      emit('update:valid', correctPattern.value || props.warn)
+    }
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
         state.value = correctPattern.value
-          ? "input--correct"
+          ? 'input--correct'
           : props.warn
-          ? "input--warn"
-          : "input--false";
+            ? 'input--warn'
+            : 'input--false'
         statusIcon.value = correctPattern.value
-          ? "PhCheckCircle"
+          ? 'PhCheckCircle'
           : props.warn
-          ? "PhWarningCircle"
-          : "PhXCircle";
-        emit("update:valid", correctPattern.value || props.warn);
+            ? 'PhWarningCircle'
+            : 'PhXCircle'
+        emit('update:valid', correctPattern.value || props.warn)
       } else {
-        state.value = "";
+        state.value = ''
       }
-    });
+    })
 
     onMounted(() => {
       if (props.column) {
         document
-          .querySelectorAll(".input-container")
-          ?.forEach((el) => el.classList.add("input-container--column"));
+          .querySelectorAll('.input-container')
+          ?.forEach((el) => el.classList.add('input-container--column'))
       }
-    });
+    })
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state,
-    };
-  },
-});
+      state
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/composables/logins.ts b/src/freshContent/settings/composables/logins.ts
index 5fd058f8..aff473b4 100644
--- a/src/freshContent/settings/composables/logins.ts
+++ b/src/freshContent/settings/composables/logins.ts
@@ -1,34 +1,34 @@
-import type { Login } from "../types/Login";
+import type { Login } from '../types/Login'
 
 export const useLogins = () => ({
-  logins,
-});
+  logins
+})
 
 const logins: Login[] = [
   {
-    id: "zih",
+    id: 'zih',
     title:
-      "Werde in alle Online-Portale der TU Dresden automatisch angemeldet.",
-    name: "Selma",
+      'Werde in alle Online-Portale der TU Dresden automatisch angemeldet.',
+    name: 'Selma',
     state: false,
-    usernamePlaceholder: "Nutzername (selma-Login)",
+    usernamePlaceholder: 'Nutzername (selma-Login)',
     usernamePattern: /^(s{1}\d{7}|[a-z]{4}\d{3}[a-z])$/,
     usernameError:
       "Der Nutzername hat die Form 's3276763' oder 'luka075d'. Speichere deine aktuelle Eingabe nur, wenn du dir sicher bist.",
-    passwordPlaceholder: "Passwort (selma-Login)",
+    passwordPlaceholder: 'Passwort (selma-Login)',
     passwordPattern: /.{5,}/,
-    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
+    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
   },
   {
-    id: "slub",
-    title: "Werde automatisch auf der SLUB-Seite angemeldet.",
-    name: "Slub",
+    id: 'slub',
+    title: 'Werde automatisch auf der SLUB-Seite angemeldet.',
+    name: 'Slub',
     state: false,
-    usernamePlaceholder: "Benutzernummer (SLUB-Login)",
+    usernamePlaceholder: 'Benutzernummer (SLUB-Login)',
     usernamePattern: /^[0-9]{7}$/,
-    usernameError: "die Nutzernummer findest du u.a. auf deiner SLUB-Karte",
-    passwordPlaceholder: "Passwort (SLUB-Login)",
+    usernameError: 'die Nutzernummer findest du u.a. auf deiner SLUB-Karte',
+    passwordPlaceholder: 'Passwort (SLUB-Login)',
     passwordPattern: /.{5,}/,
-    passwordError: "Das Passwort muss mindestens 5 Zeichen lang sein!",
-  },
-];
+    passwordError: 'Das Passwort muss mindestens 5 Zeichen lang sein!'
+  }
+]
diff --git a/src/freshContent/settings/settingPages/AutoLogin.vue b/src/freshContent/settings/settingPages/AutoLogin.vue
index 952bfd82..5370cbd3 100644
--- a/src/freshContent/settings/settingPages/AutoLogin.vue
+++ b/src/freshContent/settings/settingPages/AutoLogin.vue
@@ -1,5 +1,8 @@
 <template>
-  <LoginTabs v-model="currentLogin" :options="logins" />
+  <LoginTabs
+    v-model="currentLogin"
+    :options="logins"
+  />
   <h2>{{ currentLogin.title }}</h2>
   <h2
     :class="`state ${currentLogin.state ? 'state--active' : 'state--inactive'}`"
@@ -49,73 +52,73 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, watchEffect } from "vue";
+import { ref, defineComponent, watchEffect } from 'vue'
 
 // components
-import Input from "../components/Input.vue";
-import Button from "../components/Button.vue";
-import LoginTabs from "../components/LoginTabs.vue";
+import Input from '../components/Input.vue'
+import Button from '../components/Button.vue'
+import LoginTabs from '../components/LoginTabs.vue'
 
 // composables
-import { useLogins } from "../composables/logins";
-import { useChrome } from "../composables/chrome";
-import { useUserData } from "../composables/user-data";
+import { useLogins } from '../composables/logins'
+import { useChrome } from '../composables/chrome'
+import { useUserData } from '../composables/user-data'
 
 export default defineComponent({
   components: {
     CustomInput: Input,
     CustomButton: Button,
-    LoginTabs,
+    LoginTabs
   },
-  setup() {
-    const { logins } = useLogins();
-    const { sendChromeRuntimeMessage } = useChrome();
-    const { saveUserData, deleteUserData } = useUserData();
+  setup () {
+    const { logins } = useLogins()
+    const { sendChromeRuntimeMessage } = useChrome()
+    const { saveUserData, deleteUserData } = useUserData()
 
-    const currentLogin = ref(logins[0]);
+    const currentLogin = ref(logins[0])
 
-    const username = ref("");
-    const password = ref("");
-    const usernameValid = ref(false);
-    const passwordValid = ref(false);
+    const username = ref('')
+    const password = ref('')
+    const usernameValid = ref(false)
+    const passwordValid = ref(false)
 
-    const autoLoginActive = ref(false);
+    const autoLoginActive = ref(false)
 
     // get state of login
     watchEffect(async () => {
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    });
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    })
 
     const submitSave = async ($event: MouseEvent) => {
-      const target = $event.target as HTMLButtonElement;
+      const target = $event.target as HTMLButtonElement
 
-      if (target.disabled) return;
+      if (target.disabled) return
 
       // await this one to get back the new value in last line, otherwise could run too late
-      await saveUserData(username.value, password.value, currentLogin.value.id);
+      await saveUserData(username.value, password.value, currentLogin.value.id)
 
       // reset values
-      username.value = "";
-      password.value = "";
-      usernameValid.value = false;
-      passwordValid.value = false;
+      username.value = ''
+      password.value = ''
+      usernameValid.value = false
+      passwordValid.value = false
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    };
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    }
 
     const submitDelete = async () => {
       // await this one to get back the new value in last line, otherwise could run too late
-      await deleteUserData(currentLogin.value.id);
+      await deleteUserData(currentLogin.value.id)
       currentLogin.value.state = (await sendChromeRuntimeMessage({
-        cmd: "check_user_data",
-        platform: currentLogin.value.id,
-      })) as boolean;
-    };
+        cmd: 'check_user_data',
+        platform: currentLogin.value.id
+      })) as boolean
+    }
 
     return {
       logins,
@@ -126,10 +129,10 @@ export default defineComponent({
       passwordValid,
       autoLoginActive,
       submitSave,
-      submitDelete,
-    };
-  },
-});
+      submitDelete
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>

From 2de0a8634635fd2483f2d43800ac983ee1929421 Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 15:11:59 +0200
Subject: [PATCH 6/7] Fixes overflow warning message.

---
 .../settings/components/Input.vue             | 84 ++++++++++---------
 .../onboardingPages/04_LoginAccept.vue        | 54 ++++++------
 2 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 39477e1e..61cfc4d8 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,7 +7,7 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      >
+      />
       <component
         :is="statusIcon"
         :class="`input__icon ${
@@ -19,7 +19,8 @@
       :style="`opacity: ${
         (!correctPattern || warn) && modelValue.length > 0 ? 1 : 0
       }`"
-    >{{ errorMessage }}</span>
+      >{{ errorMessage }}</span
+    >
   </div>
 </template>
 
@@ -30,101 +31,101 @@ import {
   PropType,
   computed,
   onMounted,
-  watchEffect
-} from 'vue'
+  watchEffect,
+} from "vue";
 import {
   PhXCircle,
   PhCheckCircle,
-  PhWarningCircle
-} from '@dnlsndr/vue-phosphor-icons'
+  PhWarningCircle,
+} from "@dnlsndr/vue-phosphor-icons";
 
 export default defineComponent({
   components: {
     PhXCircle,
     PhCheckCircle,
-    PhWarningCircle
+    PhWarningCircle,
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: 'text'
+      default: "text",
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null
+      default: null,
     },
     modelValue: {
       type: String as PropType<string>,
-      default: ''
+      default: "",
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false
+      default: false,
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true
+      required: true,
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false
+      default: false,
     },
     warn: {
       type: Boolean as PropType<boolean>,
-      default: false
-    }
+      default: false,
+    },
   },
-  emits: ['update:modelValue', 'update:valid'],
-  setup (props, { emit }) {
-    const statusIcon = ref('PhCheckCircle')
-    const state = ref('')
+  emits: ["update:modelValue", "update:valid"],
+  setup(props, { emit }) {
+    const statusIcon = ref("PhCheckCircle");
+    const state = ref("");
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue))
+    const correctPattern = computed(() => props.pattern.test(props.modelValue));
 
     const emitState = ($event: Event) => {
-      const target = $event.target as HTMLInputElement
-      emit('update:modelValue', target.value)
-      emit('update:valid', correctPattern.value || props.warn)
-    }
+      const target = $event.target as HTMLInputElement;
+      emit("update:modelValue", target.value);
+      emit("update:valid", correctPattern.value || props.warn);
+    };
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
         state.value = correctPattern.value
-          ? 'input--correct'
+          ? "input--correct"
           : props.warn
-            ? 'input--warn'
-            : 'input--false'
+          ? "input--warn"
+          : "input--false";
         statusIcon.value = correctPattern.value
-          ? 'PhCheckCircle'
+          ? "PhCheckCircle"
           : props.warn
-            ? 'PhWarningCircle'
-            : 'PhXCircle'
-        emit('update:valid', correctPattern.value || props.warn)
+          ? "PhWarningCircle"
+          : "PhXCircle";
+        emit("update:valid", correctPattern.value || props.warn);
       } else {
-        state.value = ''
+        state.value = "";
       }
-    })
+    });
 
     onMounted(() => {
       if (props.column) {
         document
-          .querySelectorAll('.input-container')
-          ?.forEach((el) => el.classList.add('input-container--column'))
+          .querySelectorAll(".input-container")
+          ?.forEach((el) => el.classList.add("input-container--column"));
       }
-    })
+    });
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state
-    }
-  }
-})
+      state,
+    };
+  },
+});
 </script>
 
 <style lang="sass" scoped>
@@ -136,6 +137,7 @@ export default defineComponent({
 
     &--column
         flex-direction: column
+        max-width: 100%
 
 html:not(.light) .input-container--column
         & .input
diff --git a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
index b71ce596..c8d23b19 100644
--- a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
+++ b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="title">
-    <h1 class="upper">
-      AutoLogin
-    </h1>
+    <h1 class="upper">AutoLogin</h1>
     <h2>in die Onlineportale der TU Dresden</h2>
   </div>
   <div class="inputs">
@@ -28,48 +26,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
+import { defineComponent, ref, computed, watch } from "vue";
 
 // components
-import Input from '../components/Input.vue'
+import Input from "../components/Input.vue";
 
 // composables
-import { useUserData } from '../composables/user-data'
-import { useStepper } from '../composables/stepper'
-import { useLogins } from '../composables/logins'
+import { useUserData } from "../composables/user-data";
+import { useStepper } from "../composables/stepper";
+import { useLogins } from "../composables/logins";
 
 export default defineComponent({
   components: {
     //    Onboarding,
-    CustomInput: Input
+    CustomInput: Input,
   },
-  setup () {
-    const { stepWidth } = useStepper()
-    const { saveUserData } = useUserData()
-    const { logins } = useLogins()
-    const zihLogin = logins[0]
-    const username = ref('')
-    const password = ref('')
-    const usernameValid = ref(false)
-    const passwordValid = ref(false)
+  setup() {
+    const { stepWidth } = useStepper();
+    const { saveUserData } = useUserData();
+    const { logins } = useLogins();
+    const zihLogin = logins[0];
+    const username = ref("");
+    const password = ref("");
+    const usernameValid = ref(false);
+    const passwordValid = ref(false);
 
     // jump next step if ready was never set to true
-    stepWidth.value = 2
+    stepWidth.value = 2;
 
-    const ready = computed(() => usernameValid.value && passwordValid.value)
+    const ready = computed(() => usernameValid.value && passwordValid.value);
 
     watch(ready, async () => {
       if (ready.value === true) {
-        await saveUserData(username.value, password.value, 'zih')
-        stepWidth.value = 1
+        await saveUserData(username.value, password.value, "zih");
+        stepWidth.value = 1;
       } else {
-        stepWidth.value = 2
+        stepWidth.value = 2;
       }
-    })
+    });
 
-    return { username, password, usernameValid, passwordValid, zihLogin }
-  }
-})
+    return { username, password, usernameValid, passwordValid, zihLogin };
+  },
+});
 </script>
 
 <style lang="sass" scoped>
@@ -82,6 +80,8 @@ export default defineComponent({
     flex-direction: column
     align-items: center
     gap: .8rem
+    max-width: 90%
+
 .info
     margin-top: .8rem
     width: 70%

From 9d55adae8ed7fda6e5e74e23ce31921b4972a399 Mon Sep 17 00:00:00 2001
From: Noxdor <lennart@guderian.de>
Date: Mon, 17 Oct 2022 15:39:40 +0200
Subject: [PATCH 7/7] Fixes now the issue with warning msg still being
 displayed if regex correct.

---
 .../settings/components/Input.vue             | 87 +++++++++----------
 .../onboardingPages/04_LoginAccept.vue        | 52 +++++------
 2 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/src/freshContent/settings/components/Input.vue b/src/freshContent/settings/components/Input.vue
index 61cfc4d8..cc708e61 100644
--- a/src/freshContent/settings/components/Input.vue
+++ b/src/freshContent/settings/components/Input.vue
@@ -7,7 +7,7 @@
         :type="type"
         :placeholder="placeholder"
         @input="emitState"
-      />
+      >
       <component
         :is="statusIcon"
         :class="`input__icon ${
@@ -16,11 +16,8 @@
       />
     </div>
     <span
-      :style="`opacity: ${
-        (!correctPattern || warn) && modelValue.length > 0 ? 1 : 0
-      }`"
-      >{{ errorMessage }}</span
-    >
+      :style="`opacity: ${!correctPattern && modelValue.length > 0 ? 1 : 0}`"
+    >{{ errorMessage }}</span>
   </div>
 </template>
 
@@ -31,101 +28,101 @@ import {
   PropType,
   computed,
   onMounted,
-  watchEffect,
-} from "vue";
+  watchEffect
+} from 'vue'
 import {
   PhXCircle,
   PhCheckCircle,
-  PhWarningCircle,
-} from "@dnlsndr/vue-phosphor-icons";
+  PhWarningCircle
+} from '@dnlsndr/vue-phosphor-icons'
 
 export default defineComponent({
   components: {
     PhXCircle,
     PhCheckCircle,
-    PhWarningCircle,
+    PhWarningCircle
   },
   props: {
     type: {
       type: String as PropType<string>,
-      default: "text",
+      default: 'text'
     },
     placeholder: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     pattern: {
       type: Object as PropType<RegExp>,
-      default: null,
+      default: null
     },
     modelValue: {
       type: String as PropType<string>,
-      default: "",
+      default: ''
     },
     valid: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     errorMessage: {
       type: String as PropType<string>,
-      required: true,
+      required: true
     },
     column: {
       type: Boolean as PropType<boolean>,
-      default: false,
+      default: false
     },
     warn: {
       type: Boolean as PropType<boolean>,
-      default: false,
-    },
+      default: false
+    }
   },
-  emits: ["update:modelValue", "update:valid"],
-  setup(props, { emit }) {
-    const statusIcon = ref("PhCheckCircle");
-    const state = ref("");
+  emits: ['update:modelValue', 'update:valid'],
+  setup (props, { emit }) {
+    const statusIcon = ref('PhCheckCircle')
+    const state = ref('')
 
-    const correctPattern = computed(() => props.pattern.test(props.modelValue));
+    const correctPattern = computed(() => props.pattern.test(props.modelValue))
 
     const emitState = ($event: Event) => {
-      const target = $event.target as HTMLInputElement;
-      emit("update:modelValue", target.value);
-      emit("update:valid", correctPattern.value || props.warn);
-    };
+      const target = $event.target as HTMLInputElement
+      emit('update:modelValue', target.value)
+      emit('update:valid', correctPattern.value || props.warn)
+    }
 
     watchEffect(() => {
       if (props.modelValue.length > 0) {
         state.value = correctPattern.value
-          ? "input--correct"
+          ? 'input--correct'
           : props.warn
-          ? "input--warn"
-          : "input--false";
+            ? 'input--warn'
+            : 'input--false'
         statusIcon.value = correctPattern.value
-          ? "PhCheckCircle"
+          ? 'PhCheckCircle'
           : props.warn
-          ? "PhWarningCircle"
-          : "PhXCircle";
-        emit("update:valid", correctPattern.value || props.warn);
+            ? 'PhWarningCircle'
+            : 'PhXCircle'
+        emit('update:valid', correctPattern.value || props.warn)
       } else {
-        state.value = "";
+        state.value = ''
       }
-    });
+    })
 
     onMounted(() => {
       if (props.column) {
         document
-          .querySelectorAll(".input-container")
-          ?.forEach((el) => el.classList.add("input-container--column"));
+          .querySelectorAll('.input-container')
+          ?.forEach((el) => el.classList.add('input-container--column'))
       }
-    });
+    })
 
     return {
       statusIcon,
       correctPattern,
       emitState,
-      state,
-    };
-  },
-});
+      state
+    }
+  }
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
index c8d23b19..26189d90 100644
--- a/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
+++ b/src/freshContent/settings/onboardingPages/04_LoginAccept.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="title">
-    <h1 class="upper">AutoLogin</h1>
+    <h1 class="upper">
+      AutoLogin
+    </h1>
     <h2>in die Onlineportale der TU Dresden</h2>
   </div>
   <div class="inputs">
@@ -26,48 +28,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch } from "vue";
+import { defineComponent, ref, computed, watch } from 'vue'
 
 // components
-import Input from "../components/Input.vue";
+import Input from '../components/Input.vue'
 
 // composables
-import { useUserData } from "../composables/user-data";
-import { useStepper } from "../composables/stepper";
-import { useLogins } from "../composables/logins";
+import { useUserData } from '../composables/user-data'
+import { useStepper } from '../composables/stepper'
+import { useLogins } from '../composables/logins'
 
 export default defineComponent({
   components: {
     //    Onboarding,
-    CustomInput: Input,
+    CustomInput: Input
   },
-  setup() {
-    const { stepWidth } = useStepper();
-    const { saveUserData } = useUserData();
-    const { logins } = useLogins();
-    const zihLogin = logins[0];
-    const username = ref("");
-    const password = ref("");
-    const usernameValid = ref(false);
-    const passwordValid = ref(false);
+  setup () {
+    const { stepWidth } = useStepper()
+    const { saveUserData } = useUserData()
+    const { logins } = useLogins()
+    const zihLogin = logins[0]
+    const username = ref('')
+    const password = ref('')
+    const usernameValid = ref(false)
+    const passwordValid = ref(false)
 
     // jump next step if ready was never set to true
-    stepWidth.value = 2;
+    stepWidth.value = 2
 
-    const ready = computed(() => usernameValid.value && passwordValid.value);
+    const ready = computed(() => usernameValid.value && passwordValid.value)
 
     watch(ready, async () => {
       if (ready.value === true) {
-        await saveUserData(username.value, password.value, "zih");
-        stepWidth.value = 1;
+        await saveUserData(username.value, password.value, 'zih')
+        stepWidth.value = 1
       } else {
-        stepWidth.value = 2;
+        stepWidth.value = 2
       }
-    });
+    })
 
-    return { username, password, usernameValid, passwordValid, zihLogin };
-  },
-});
+    return { username, password, usernameValid, passwordValid, zihLogin }
+  }
+})
 </script>
 
 <style lang="sass" scoped>