From fbfe54879a6eaf6b41f6c9e441f5f31faa5302f9 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Tue, 25 Mar 2025 21:45:58 +0000
Subject: [PATCH 1/5] style: fix linting issues met ESLint

---
 frontend/src/queries/themes.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/queries/themes.ts b/frontend/src/queries/themes.ts
index 9892c141..a4317c09 100644
--- a/frontend/src/queries/themes.ts
+++ b/frontend/src/queries/themes.ts
@@ -4,22 +4,18 @@ import {type MaybeRefOrGetter, toValue} from "vue";
 
 const themeController = getThemeController();
 
-export const useThemeQuery = (language: MaybeRefOrGetter<string>) => {
-    return useQuery({
+export const useThemeQuery = (language: MaybeRefOrGetter<string>) => useQuery({
         queryKey: ['themes', language],
         queryFn: () => {
             const lang = toValue(language);
             return themeController.getAll(lang);
         },
-        enabled: () => !!toValue(language),
+        enabled: () => Boolean(toValue(language)),
     });
-};
 
-export const useThemeHruidsQuery = (themeKey: string | null) => {
-    return useQuery({
+export const useThemeHruidsQuery = (themeKey: string | null) => useQuery({
         queryKey: ['theme-hruids', themeKey],
         queryFn: () => themeController.getHruidsByKey(themeKey!),
-        enabled: !!themeKey,
+        enabled: Boolean(themeKey),
     });
-};
 

From 0661e705b35db1ea20560e7fa15b7d92611993f8 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Tue, 25 Mar 2025 21:46:03 +0000
Subject: [PATCH 2/5] style: fix linting issues met Prettier

---
 frontend/src/App.vue                         |   9 +-
 frontend/src/components/BrowseThemes.vue     |  69 +++++-----
 frontend/src/components/MenuBar.old.vue      |   2 +-
 frontend/src/components/MenuBar.vue          |  18 ++-
 frontend/src/components/ThemeCard.vue        |  77 +++++------
 frontend/src/controllers/base-controller.ts  |   2 +-
 frontend/src/controllers/controllers.ts      |   2 +-
 frontend/src/controllers/themes.ts           |   2 +-
 frontend/src/main.ts                         |   2 +-
 frontend/src/queries/themes.ts               |  17 +--
 frontend/src/services/auth/auth-service.ts   |   2 +-
 frontend/src/utils/constants.ts              |  73 +++++++----
 frontend/src/views/HomePage.vue              |   2 +-
 frontend/src/views/SingleTheme.vue           |  10 +-
 frontend/src/views/homepage/UserHomePage.vue | 128 +++++++++----------
 15 files changed, 225 insertions(+), 190 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d4cbafde..d37d117d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
     import auth from "@/services/auth/auth-service.ts";
     import MenuBar from "@/components/MenuBar.vue";
-    import {useRoute} from "vue-router";
-    import {computed} from "vue";
+    import { useRoute } from "vue-router";
+    import { computed } from "vue";
 
     const route = useRoute();
     auth.loadUser();
@@ -11,10 +11,7 @@
         requiresAuth?: boolean;
     }
 
-    const showMenuBar = computed(() =>
-        (route.meta as RouteMeta).requiresAuth
-        && auth.authState.user
-    )
+    const showMenuBar = computed(() => (route.meta as RouteMeta).requiresAuth && auth.authState.user);
 </script>
 
 <template>
diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index eeea2c81..97ff8352 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,47 +1,56 @@
 <script setup lang="ts">
-import ThemeCard from "@/components/ThemeCard.vue";
-import { ref, watchEffect, computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
-import { useThemeQuery } from "@/queries/themes.ts";
+    import ThemeCard from "@/components/ThemeCard.vue";
+    import { ref, watchEffect, computed } from "vue";
+    import { useI18n } from "vue-i18n";
+    import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
+    import { useThemeQuery } from "@/queries/themes.ts";
 
-const props = defineProps({
-    selectedTheme: { type: String, required: true },
-    selectedAge: { type: String, required: true }
-});
+    const props = defineProps({
+        selectedTheme: { type: String, required: true },
+        selectedAge: { type: String, required: true },
+    });
 
-const { locale } = useI18n();
-const language = computed(() => locale.value);
+    const { locale } = useI18n();
+    const language = computed(() => locale.value);
 
-const { data: allThemes, isLoading, error } = useThemeQuery(language);
+    const { data: allThemes, isLoading, error } = useThemeQuery(language);
 
-const allCards = ref([]);
-const cards = ref([]);
+    const allCards = ref([]);
+    const cards = ref([]);
 
-watchEffect(() => {
-    const themes = allThemes.value ?? [];
-    allCards.value = themes;
+    watchEffect(() => {
+        const themes = allThemes.value ?? [];
+        allCards.value = themes;
 
-    if (props.selectedTheme) {
-        cards.value = themes.filter((theme) =>
-            THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
-            AGE_TO_THEMES[props.selectedAge]?.includes(theme.key)
-        );
-    } else {
-        cards.value = themes;
-    }
-});
+        if (props.selectedTheme) {
+            cards.value = themes.filter(
+                (theme) =>
+                    THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
+                    AGE_TO_THEMES[props.selectedAge]?.includes(theme.key),
+            );
+        } else {
+            cards.value = themes;
+        }
+    });
 </script>
 
-
 <template>
     <v-container>
-        <div v-if="isLoading" class="text-center py-10">
-            <v-progress-circular indeterminate color="primary" />
+        <div
+            v-if="isLoading"
+            class="text-center py-10"
+        >
+            <v-progress-circular
+                indeterminate
+                color="primary"
+            />
             <p>Loading...</p>
         </div>
 
-        <div v-else-if="error" class="text-center py-10 text-error">
+        <div
+            v-else-if="error"
+            class="text-center py-10 text-error"
+        >
             <v-icon large>mdi-alert-circle</v-icon>
             <p>Error loading: {{ error.message }}</p>
         </div>
diff --git a/frontend/src/components/MenuBar.old.vue b/frontend/src/components/MenuBar.old.vue
index 40195b42..4945aec2 100644
--- a/frontend/src/components/MenuBar.old.vue
+++ b/frontend/src/components/MenuBar.old.vue
@@ -22,7 +22,7 @@
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
         { name: "Français", code: "fr" },
-        { name: "Deutsch", code: "de" }
+        { name: "Deutsch", code: "de" },
     ]);
 
     // Logic to change the language of the website to the selected language
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 56c3cb31..df1102ca 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -22,7 +22,7 @@
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
         { name: "Français", code: "fr" },
-        { name: "Deutsch", code: "de" }
+        { name: "Deutsch", code: "de" },
     ]);
 
     // Logic to change the language of the website to the selected language
@@ -43,8 +43,14 @@
 </script>
 
 <template>
-    <v-app-bar class="app-bar" app>
-        <v-app-bar-nav-icon class="menu_collapsed" @click="drawer = !drawer" />
+    <v-app-bar
+        class="app-bar"
+        app
+    >
+        <v-app-bar-nav-icon
+            class="menu_collapsed"
+            @click="drawer = !drawer"
+        />
         <router-link
             to="/user"
             class="dwengo_home"
@@ -55,9 +61,7 @@
                     alt="Dwengo logo"
                     :src="dwengoLogo"
                 />
-                <p
-                    class="caption"
-                >
+                <p class="caption">
                     {{ t(`${role}`) }}
                 </p>
             </div>
@@ -156,7 +160,7 @@
             size="large"
             color="#0e6942"
             class="user-button"
-        >{{ initials }}</v-avatar
+            >{{ initials }}</v-avatar
         >
     </v-app-bar>
     <v-navigation-drawer
diff --git a/frontend/src/components/ThemeCard.vue b/frontend/src/components/ThemeCard.vue
index ac9b3904..7064b63c 100644
--- a/frontend/src/components/ThemeCard.vue
+++ b/frontend/src/components/ThemeCard.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+    import { useI18n } from "vue-i18n";
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-defineProps<{
-    path: string;
-    title: string;
-    description: string;
-    image: string;
-}>();
+    defineProps<{
+        path: string;
+        title: string;
+        description: string;
+        image: string;
+    }>();
 </script>
 
 <template>
@@ -31,7 +31,10 @@ defineProps<{
         </v-card-title>
         <v-card-text class="description flex-grow-1">{{ description }}</v-card-text>
         <v-card-actions>
-            <v-btn :to="`theme/${path}`" variant="text">
+            <v-btn
+                :to="`theme/${path}`"
+                variant="text"
+            >
                 {{ t("read-more") }}
             </v-btn>
         </v-card-actions>
@@ -39,36 +42,36 @@ defineProps<{
 </template>
 
 <style scoped>
-.theme-card {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 1rem;
-    cursor: pointer;
-}
+    .theme-card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 1rem;
+        cursor: pointer;
+    }
 
-.theme-card:hover {
-    background-color: rgba(0, 0, 0, 0.03);
-}
+    .theme-card:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+    }
 
-.title-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    text-align: left;
-    justify-content: flex-start;
-}
+    .title-container {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        text-align: left;
+        justify-content: flex-start;
+    }
 
-.title-image {
-    flex-shrink: 0;
-    border-radius: 5px;
-    margin-left: 0;
-}
+    .title-image {
+        flex-shrink: 0;
+        border-radius: 5px;
+        margin-left: 0;
+    }
 
-.title {
-    flex-grow: 1;
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
+    .title {
+        flex-grow: 1;
+        white-space: normal;
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
 </style>
diff --git a/frontend/src/controllers/base-controller.ts b/frontend/src/controllers/base-controller.ts
index adc0c8c0..c6024e52 100644
--- a/frontend/src/controllers/base-controller.ts
+++ b/frontend/src/controllers/base-controller.ts
@@ -1,4 +1,4 @@
-import {apiConfig} from "@/config.ts";
+import { apiConfig } from "@/config.ts";
 
 export class BaseController {
     protected baseUrl: string;
diff --git a/frontend/src/controllers/controllers.ts b/frontend/src/controllers/controllers.ts
index b3bbeb61..ad526276 100644
--- a/frontend/src/controllers/controllers.ts
+++ b/frontend/src/controllers/controllers.ts
@@ -1,4 +1,4 @@
-import {ThemeController} from "@/controllers/themes.ts";
+import { ThemeController } from "@/controllers/themes.ts";
 
 export function controllerGetter<T>(Factory: new () => T): () => T {
     let instance: T | undefined;
diff --git a/frontend/src/controllers/themes.ts b/frontend/src/controllers/themes.ts
index 447c9248..bc76985e 100644
--- a/frontend/src/controllers/themes.ts
+++ b/frontend/src/controllers/themes.ts
@@ -1,4 +1,4 @@
-import {BaseController} from "@/controllers/base-controller.ts";
+import { BaseController } from "@/controllers/base-controller.ts";
 
 export class ThemeController extends BaseController {
     constructor() {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fc531957..5945a2ab 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -10,7 +10,7 @@ import i18n from "./i18n/i18n.ts";
 // Components
 import App from "./App.vue";
 import router from "./router";
-import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
+import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
 
 const app = createApp(App);
 
diff --git a/frontend/src/queries/themes.ts b/frontend/src/queries/themes.ts
index a4317c09..4568b7b4 100644
--- a/frontend/src/queries/themes.ts
+++ b/frontend/src/queries/themes.ts
@@ -1,11 +1,12 @@
-import { useQuery } from '@tanstack/vue-query';
-import { getThemeController } from '@/controllers/controllers';
-import {type MaybeRefOrGetter, toValue} from "vue";
+import { useQuery } from "@tanstack/vue-query";
+import { getThemeController } from "@/controllers/controllers";
+import { type MaybeRefOrGetter, toValue } from "vue";
 
 const themeController = getThemeController();
 
-export const useThemeQuery = (language: MaybeRefOrGetter<string>) => useQuery({
-        queryKey: ['themes', language],
+export const useThemeQuery = (language: MaybeRefOrGetter<string>) =>
+    useQuery({
+        queryKey: ["themes", language],
         queryFn: () => {
             const lang = toValue(language);
             return themeController.getAll(lang);
@@ -13,9 +14,9 @@ export const useThemeQuery = (language: MaybeRefOrGetter<string>) => useQuery({
         enabled: () => Boolean(toValue(language)),
     });
 
-export const useThemeHruidsQuery = (themeKey: string | null) => useQuery({
-        queryKey: ['theme-hruids', themeKey],
+export const useThemeHruidsQuery = (themeKey: string | null) =>
+    useQuery({
+        queryKey: ["theme-hruids", themeKey],
         queryFn: () => themeController.getHruidsByKey(themeKey!),
         enabled: Boolean(themeKey),
     });
-
diff --git a/frontend/src/services/auth/auth-service.ts b/frontend/src/services/auth/auth-service.ts
index a779c8a0..9fc0c434 100644
--- a/frontend/src/services/auth/auth-service.ts
+++ b/frontend/src/services/auth/auth-service.ts
@@ -5,7 +5,7 @@
 import { computed, reactive } from "vue";
 import type { AuthState, Role, UserManagersForRoles } from "@/services/auth/auth.d.ts";
 import { User, UserManager } from "oidc-client-ts";
-import {AUTH_CONFIG_ENDPOINT, loadAuthConfig} from "@/services/auth/auth-config-loader.ts";
+import { AUTH_CONFIG_ENDPOINT, loadAuthConfig } from "@/services/auth/auth-config-loader.ts";
 import authStorage from "./auth-storage.ts";
 import { loginRoute } from "@/config.ts";
 import apiClient from "@/services/api-client.ts";
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index e046d9c3..b56437d7 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -1,37 +1,64 @@
 export const THEMES_KEYS = [
-    "kiks", "art", "socialrobot", "agriculture", "wegostem",
-    "computational_thinking", "math_with_python", "python_programming",
-    "stem", "care", "chatbot", "physical_computing", "algorithms", "basics_ai"
+    "kiks",
+    "art",
+    "socialrobot",
+    "agriculture",
+    "wegostem",
+    "computational_thinking",
+    "math_with_python",
+    "python_programming",
+    "stem",
+    "care",
+    "chatbot",
+    "physical_computing",
+    "algorithms",
+    "basics_ai",
 ];
 
 export const THEMESITEMS: Record<string, string[]> = {
-    "all": THEMES_KEYS,
-    "culture": ["art", "wegostem", "chatbot"],
+    all: THEMES_KEYS,
+    culture: ["art", "wegostem", "chatbot"],
     "electricity-and-mechanics": ["socialrobot", "wegostem", "stem", "physical_computing"],
     "nature-and-climate": ["kiks", "agriculture"],
-    "agriculture": ["agriculture"],
-    "society": ["kiks", "socialrobot", "care", "chatbot"],
-    "math": ["kiks", "math_with_python", "python_programming", "stem", "care", "basics_ai"],
-    "technology": ["socialrobot", "wegostem", "computational_thinking", "stem", "physical_computing", "basics_ai"],
-    "algorithms": ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
+    agriculture: ["agriculture"],
+    society: ["kiks", "socialrobot", "care", "chatbot"],
+    math: ["kiks", "math_with_python", "python_programming", "stem", "care", "basics_ai"],
+    technology: ["socialrobot", "wegostem", "computational_thinking", "stem", "physical_computing", "basics_ai"],
+    algorithms: ["math_with_python", "python_programming", "stem", "algorithms", "basics_ai"],
 };
 
-export const AGEITEMS = [
-    "all", "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"
-];
+export const AGEITEMS = ["all", "primary-school", "lower-secondary", "upper-secondary", "high-school", "older"];
 
 export const AGE_TO_THEMES: Record<string, string[]> = {
-    "all": THEMES_KEYS,
+    all: THEMES_KEYS,
     "primary-school": ["wegostem", "computational_thinking", "physical_computing"],
     "lower-secondary": ["socialrobot", "art", "wegostem", "computational_thinking", "physical_computing"],
-    "upper-secondary": ["kiks", "art", "socialrobot", "agriculture",
-        "computational_thinking", "math_with_python", "python_programming",
-        "stem", "care", "chatbot", "algorithms", "basics_ai"],
-    "high-school": [
-        "kiks", "art", "agriculture", "computational_thinking", "math_with_python", "python_programming",
-        "stem", "care", "chatbot", "algorithms", "basics_ai"
+    "upper-secondary": [
+        "kiks",
+        "art",
+        "socialrobot",
+        "agriculture",
+        "computational_thinking",
+        "math_with_python",
+        "python_programming",
+        "stem",
+        "care",
+        "chatbot",
+        "algorithms",
+        "basics_ai",
     ],
-    "older": [
-        "kiks", "computational_thinking", "algorithms", "basics_ai"
-    ]
+    "high-school": [
+        "kiks",
+        "art",
+        "agriculture",
+        "computational_thinking",
+        "math_with_python",
+        "python_programming",
+        "stem",
+        "care",
+        "chatbot",
+        "algorithms",
+        "basics_ai",
+    ],
+    older: ["kiks", "computational_thinking", "algorithms", "basics_ai"],
 };
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index 0899902d..436205e6 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -28,7 +28,7 @@
                     alt="Dwengo logo"
                     style="align-self: center"
                 />
-                <h1> {{ t("homeTitle") }}</h1>
+                <h1>{{ t("homeTitle") }}</h1>
                 <p class="info">
                     {{ t("homeIntroduction1") }}
                 </p>
diff --git a/frontend/src/views/SingleTheme.vue b/frontend/src/views/SingleTheme.vue
index 73336fa3..1a35a59f 100644
--- a/frontend/src/views/SingleTheme.vue
+++ b/frontend/src/views/SingleTheme.vue
@@ -1,11 +1,7 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
-<main></main>
+    <main></main>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/homepage/UserHomePage.vue b/frontend/src/views/homepage/UserHomePage.vue
index b6cdea17..c4f933a5 100644
--- a/frontend/src/views/homepage/UserHomePage.vue
+++ b/frontend/src/views/homepage/UserHomePage.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import {ref, watch} from "vue";
-    import {useI18n} from "vue-i18n";
-    import {THEMESITEMS, AGE_TO_THEMES} from "@/utils/constants.ts";
+    import { ref, watch } from "vue";
+    import { useI18n } from "vue-i18n";
+    import { THEMESITEMS, AGE_TO_THEMES } from "@/utils/constants.ts";
     import BrowseThemes from "@/components/BrowseThemes.vue";
 
-    const {t, locale} = useI18n();
+    const { t, locale } = useI18n();
 
-    const selectedThemeKey = ref<string>('all');
-    const selectedAgeKey = ref<string>('all');
+    const selectedThemeKey = ref<string>("all");
+    const selectedAgeKey = ref<string>("all");
 
     const allThemes = ref(Object.keys(THEMESITEMS));
     const availableThemes = ref([...allThemes.value]);
@@ -17,18 +17,17 @@ import {ref, watch} from "vue";
 
     // Reset selection when language changes
     watch(locale, () => {
-        selectedThemeKey.value = 'all';
-        selectedAgeKey.value = 'all';
+        selectedThemeKey.value = "all";
+        selectedAgeKey.value = "all";
     });
 
-
     watch(selectedThemeKey, () => {
         if (selectedThemeKey.value === "all") {
             availableAges.value = [...allAges.value]; // Reset to all ages
         } else {
             const themes = THEMESITEMS[selectedThemeKey.value];
-            availableAges.value = allAges.value.filter(age =>
-                AGE_TO_THEMES[age]?.some(theme => themes.includes(theme))
+            availableAges.value = allAges.value.filter((age) =>
+                AGE_TO_THEMES[age]?.some((theme) => themes.includes(theme)),
             );
         }
     });
@@ -38,32 +37,31 @@ import {ref, watch} from "vue";
             availableThemes.value = [...allThemes.value]; // Reset to all themes
         } else {
             const themes = AGE_TO_THEMES[selectedAgeKey.value];
-            availableThemes.value = allThemes.value.filter(theme =>
-                THEMESITEMS[theme]?.some(theme => themes.includes(theme))
+            availableThemes.value = allThemes.value.filter((theme) =>
+                THEMESITEMS[theme]?.some((theme) => themes.includes(theme)),
             );
         }
     });
-
 </script>
 
 <template>
     <div class="main-container">
         <h1 class="title">{{ t("themes") }}</h1>
         <v-container class="dropdowns">
-            <v-select class="v-select"
-                      :label="t('choose-theme')"
-                      :items="availableThemes.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
-                      v-model="selectedThemeKey"
-                      item-title="title"
-                      item-value="value"
-                      variant="outlined"
+            <v-select
+                class="v-select"
+                :label="t('choose-theme')"
+                :items="availableThemes.map((theme) => ({ title: t(`theme-options.${theme}`), value: theme }))"
+                v-model="selectedThemeKey"
+                item-title="title"
+                item-value="value"
+                variant="outlined"
             />
 
-
             <v-select
                 class="v-select"
                 :label="t('choose-age')"
-                :items="availableAges.map(age => ({ key: age, label: t(`age-options.${age}`), value: age }))"
+                :items="availableAges.map((age) => ({ key: age, label: t(`age-options.${age}`), value: age }))"
                 v-model="selectedAgeKey"
                 item-title="label"
                 item-value="key"
@@ -71,55 +69,55 @@ import {ref, watch} from "vue";
             ></v-select>
         </v-container>
 
-        <BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
+        <BrowseThemes
+            :selectedTheme="selectedThemeKey ?? ''"
+            :selectedAge="selectedAgeKey ?? ''"
+        />
     </div>
 </template>
 
 <style scoped>
-.main-container {
-    min-height: 100vh;
-    min-width: 100vw;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.title {
-    max-width: 50rem;
-    margin-left: 1rem;
-    margin-top: 1rem;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-}
-
-
-.dropdowns {
-    display: flex;
-    justify-content: space-between;
-    gap: 5rem;
-    width: 80%;
-}
-
-.v-select {
-    flex: 1;
-    min-width: 100px;
-}
-
-
-@media (max-width: 768px) {
     .main-container {
-        padding: 1rem;
-    }
-}
-
-@media (max-width: 700px) {
-    .dropdowns {
+        min-height: 100vh;
+        min-width: 100vw;
+        display: flex;
         flex-direction: column;
-        gap: 1rem;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .title {
+        max-width: 50rem;
+        margin-left: 1rem;
+        margin-top: 1rem;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+    }
+
+    .dropdowns {
+        display: flex;
+        justify-content: space-between;
+        gap: 5rem;
         width: 80%;
     }
-}
 
+    .v-select {
+        flex: 1;
+        min-width: 100px;
+    }
+
+    @media (max-width: 768px) {
+        .main-container {
+            padding: 1rem;
+        }
+    }
+
+    @media (max-width: 700px) {
+        .dropdowns {
+            flex-direction: column;
+            gap: 1rem;
+            width: 80%;
+        }
+    }
 </style>

From d8e5fed2fe4671508b0e5c6f0c0200cc2bd11b00 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger
 <165218235+geraldschmittinger@users.noreply.github.com>
Date: Wed, 26 Mar 2025 11:30:17 +0100
Subject: [PATCH 3/5] fix(frontend): Redirect na login

Na de login moet de gebruiker naar `/user` i.p.v. `/` geredirect worden
---
 frontend/src/views/CallbackPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/CallbackPage.vue b/frontend/src/views/CallbackPage.vue
index 306dfe10..7f4d4958 100644
--- a/frontend/src/views/CallbackPage.vue
+++ b/frontend/src/views/CallbackPage.vue
@@ -8,7 +8,7 @@
     onMounted(async () => {
         try {
             await auth.handleLoginCallback();
-            await router.replace("/"); // Redirect to home (or dashboard)
+            await router.replace("/user"); // Redirect to theme page
         } catch (error) {
             console.error("OIDC callback error:", error);
         }

From b3d17f4cb836b809ba83e7d33abea24914c15782 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Wed, 26 Mar 2025 18:46:13 +0100
Subject: [PATCH 4/5] fix: overbodige file verwijderd

---
 frontend/src/components/MenuBar.old.vue | 367 ------------------------
 1 file changed, 367 deletions(-)
 delete mode 100644 frontend/src/components/MenuBar.old.vue

diff --git a/frontend/src/components/MenuBar.old.vue b/frontend/src/components/MenuBar.old.vue
deleted file mode 100644
index 4945aec2..00000000
--- a/frontend/src/components/MenuBar.old.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<script setup lang="ts">
-    import { ref } from "vue";
-    import { useI18n } from "vue-i18n";
-
-    import auth from "@/services/auth/auth-service.ts";
-
-    // Import assets
-    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
-
-    const { t, locale } = useI18n();
-
-    const role = auth.authState.activeRole;
-
-    const name: string = auth.authState.user!.profile.name!;
-    const initials: string = name
-        .split(" ")
-        .map((n) => n[0])
-        .join("");
-
-    // Available languages
-    const languages = ref([
-        { name: "English", code: "en" },
-        { name: "Nederlands", code: "nl" },
-        { name: "Français", code: "fr" },
-        { name: "Deutsch", code: "de" },
-    ]);
-
-    // Logic to change the language of the website to the selected language
-    const changeLanguage = (langCode: string) => {
-        locale.value = langCode;
-        localStorage.setItem("user-lang", langCode);
-    };
-
-    // contains functionality to let the collapsed menu appear and disappear
-    // when the screen size varies
-    const drawer = ref(false);
-
-    // when the user wants to logout, a popup is shown to verify this
-    // if verified, the user should be logged out
-    const performLogout = () => {
-        auth.logout();
-    };
-</script>
-
-<template>
-    <main>
-        <div class="menu_collapsed">
-            <v-app-bar
-                app
-                style="background-color: #f6faf2"
-            >
-                <template v-slot:prepend>
-                    <v-app-bar-nav-icon @click="drawer = !drawer" />
-                </template>
-
-                <v-app-bar-title>
-                    <router-link
-                        to="/user"
-                        class="dwengo_home"
-                    >
-                        <div>
-                            <img
-                                class="dwengo_logo"
-                                :src="dwengoLogo"
-                                style="width: 100px"
-                            />
-                            <p
-                                class="caption"
-                                style="font-size: smaller"
-                            >
-                                {{ t(`${role}`) }}
-                            </p>
-                        </div>
-                    </router-link>
-                </v-app-bar-title>
-
-                <v-spacer></v-spacer>
-
-                <v-menu open-on-hover>
-                    <template v-slot:activator="{ props }">
-                        <v-btn
-                            v-bind="props"
-                            icon
-                            variant="text"
-                        >
-                            <v-icon
-                                icon="mdi-translate"
-                                size="small"
-                                color="#0e6942"
-                            ></v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item
-                            v-for="(language, index) in languages"
-                            :key="index"
-                            @click="changeLanguage(language.code)"
-                        >
-                            <v-list-item-title>{{ language.name }}</v-list-item-title>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-
-                <v-btn
-                    @click="performLogout"
-                    text
-                >
-                    <v-tooltip
-                        :text="t('logout')"
-                        location="bottom"
-                    >
-                        <template v-slot:activator="{ props }">
-                            <v-icon
-                                v-bind="props"
-                                icon="mdi-logout"
-                                size="x-large"
-                                color="#0e6942"
-                            />
-                        </template>
-                    </v-tooltip>
-                </v-btn>
-            </v-app-bar>
-
-            <v-navigation-drawer
-                v-model="drawer"
-                app
-            >
-                <v-list>
-                    <v-list-item
-                        to="/user/assignment"
-                        link
-                    >
-                        <v-list-item-content>
-                            <v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
-                        </v-list-item-content>
-                    </v-list-item>
-
-                    <v-list-item
-                        to="/user/class"
-                        link
-                    >
-                        <v-list-item-content>
-                            <v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
-                        </v-list-item-content>
-                    </v-list-item>
-
-                    <v-list-item
-                        to="/user/discussion"
-                        link
-                    >
-                        <v-list-item-content>
-                            <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
-                        </v-list-item-content>
-                    </v-list-item>
-                </v-list>
-            </v-navigation-drawer>
-        </div>
-        <v-app-bar app>
-            <nav class="menu">
-                <div class="left">
-                    <ul>
-                        <li>
-                            <router-link
-                                to="/user"
-                                class="dwengo_home"
-                            >
-                                <img
-                                    class="dwengo_logo"
-                                    :src="dwengoLogo"
-                                />
-                                <p class="caption">
-                                    {{ t(`${role}`) }}
-                                </p>
-                            </router-link>
-                        </li>
-                        <li>
-                            <router-link
-                                :to="`/user/assignment`"
-                                class="menu_item"
-                            >
-                                {{ t("assignments") }}
-                            </router-link>
-                        </li>
-                        <li>
-                            <router-link
-                                to="/user/class"
-                                class="menu_item"
-                                >{{ t("classes") }}</router-link
-                            >
-                        </li>
-                        <li>
-                            <router-link
-                                to="/user/discussion"
-                                class="menu_item"
-                                >{{ t("discussions") }}
-                            </router-link>
-                        </li>
-                        <li>
-                            <v-menu open-on-hover>
-                                <template v-slot:activator="{ props }">
-                                    <v-btn
-                                        v-bind="props"
-                                        icon
-                                        variant="text"
-                                    >
-                                        <v-icon
-                                            icon="mdi-translate"
-                                            size="small"
-                                            color="#0e6942"
-                                        ></v-icon>
-                                    </v-btn>
-                                </template>
-                                <v-list>
-                                    <v-list-item
-                                        v-for="(language, index) in languages"
-                                        :key="index"
-                                        @click="changeLanguage(language.code)"
-                                    >
-                                        <v-list-item-title>{{ language.name }}</v-list-item-title>
-                                    </v-list-item>
-                                </v-list>
-                            </v-menu>
-                        </li>
-                    </ul>
-                </div>
-                <div class="right">
-                    <li>
-                        <!-- <v-btn
-                            @click="performLogout"
-                            to="/login"
-                            style="background-color: transparent; box-shadow: none !important"
-                        >
-                            <v-tooltip
-                                :text="t('logout')"
-                                location="bottom"
-                            >
-                                <template v-slot:activator="{ props }">
-                                    <v-icon
-                                        v-bind="props"
-                                        icon="mdi-logout"
-                                        size="x-large"
-                                        color="#0e6942"
-                                    ></v-icon>
-                                </template>
-                            </v-tooltip>
-                        </v-btn> -->
-                        <v-dialog max-width="500">
-                            <template v-slot:activator="{ props: activatorProps }">
-                                <v-btn
-                                    v-bind="activatorProps"
-                                    style="background-color: transparent; box-shadow: none !important"
-                                >
-                                    <v-tooltip
-                                        :text="t('logout')"
-                                        location="bottom"
-                                    >
-                                        <template v-slot:activator="{ props }">
-                                            <v-icon
-                                                v-bind="props"
-                                                icon="mdi-logout"
-                                                size="x-large"
-                                                color="#0e6942"
-                                            >
-                                            </v-icon>
-                                        </template>
-                                    </v-tooltip>
-                                </v-btn>
-                            </template>
-
-                            <template v-slot:default="{ isActive }">
-                                <v-card :title="t('logoutVerification')">
-                                    <v-card-actions>
-                                        <v-spacer></v-spacer>
-
-                                        <v-btn
-                                            :text="t('cancel')"
-                                            @click="isActive.value = false"
-                                        ></v-btn>
-                                        <v-btn
-                                            :text="t('logout')"
-                                            @click="performLogout"
-                                            to="/login"
-                                        ></v-btn>
-                                    </v-card-actions>
-                                </v-card>
-                            </template>
-                        </v-dialog>
-                    </li>
-                    <li>
-                        <v-avatar
-                            size="large"
-                            color="#0e6942"
-                            style="font-size: large; font-weight: bold"
-                            >{{ initials }}</v-avatar
-                        >
-                    </li>
-                </div>
-            </nav>
-        </v-app-bar>
-    </main>
-</template>
-
-<style scoped>
-    .menu {
-        background-color: #f6faf2;
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .right {
-        align-items: center;
-        padding: 10px;
-    }
-
-    .right li {
-        margin-left: 15px;
-    }
-
-    nav ul {
-        display: flex;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        gap: 15px;
-        align-items: center;
-    }
-
-    li {
-        display: inline;
-    }
-
-    .dwengo_home {
-        text-align: center;
-        text-decoration: none;
-    }
-
-    .dwengo_logo {
-        width: 150px;
-    }
-
-    .caption {
-        color: black;
-        margin-top: -25px;
-    }
-
-    .menu_item {
-        color: #0e6942;
-        text-decoration: none;
-        font-size: large;
-    }
-
-    nav a.router-link-active {
-        font-weight: bold;
-    }
-
-    @media (max-width: 700px) {
-        .menu {
-            display: none;
-        }
-    }
-
-    @media (min-width: 701px) {
-        .menu_collapsed {
-            display: none;
-        }
-    }
-</style>

From 00fb333ae8df5bdaa3ff623985d443aa2b643729 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Wed, 26 Mar 2025 18:47:08 +0100
Subject: [PATCH 5/5] style: linting

---
 frontend/src/components/MenuBar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index df1102ca..50c2eabe 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -31,12 +31,12 @@
         localStorage.setItem("user-lang", langCode);
     };
 
-    // contains functionality to let the collapsed menu appear and disappear
-    // when the screen size varies
+    // Contains functionality to let the collapsed menu appear and disappear
+    // When the screen size varies
     const drawer = ref(false);
 
-    // when the user wants to logout, a popup is shown to verify this
-    // if verified, the user should be logged out
+    // When the user wants to logout, a popup is shown to verify this
+    // If verified, the user should be logged out
     const performLogout = () => {
         auth.logout();
     };