From 60916ba765716276a0873e687104ccf2cce847c3 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 10:47:20 +0100
Subject: [PATCH 01/10] feat: logout werkt en initialen zijn deze van ingelogde
 user

---
 frontend/src/components/MenuBar.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index f942babc..45ff871c 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -15,9 +15,8 @@
 
     const role = auth.authState.activeRole;
 
-    //TODO: use authState form services map to get user token
-    const name = "Kurt Cobain";
-    const initials = name
+    const name : string = auth.authState.user!.profile.name!;
+    const initials : string = name
         .split(" ")
         .map((n) => n[0])
         .join("");
@@ -34,6 +33,11 @@
         localStorage.setItem("user-lang", langCode);
         console.log(langCode);
     };
+
+    // when the user wants to logout, the authentication must be set to False
+    function performLogout() {
+        auth.logout();
+    }
 </script>
 
 <template>
@@ -107,7 +111,7 @@
             </div>
             <div class="right">
                 <li>
-                    <router-link :to="`/login`">
+                    <v-btn @click="performLogout" to="/login" style="background-color: transparent; box-shadow: none !important;">
                         <v-tooltip
                             :text="t('logout')"
                             location="bottom"
@@ -121,7 +125,7 @@
                                 ></v-icon>
                             </template>
                         </v-tooltip>
-                    </router-link>
+                    </v-btn>
                 </li>
                 <li>
                     <v-avatar

From 31681121023c4603d0d3d64a931e633910fe998d Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 10:47:53 +0100
Subject: [PATCH 02/10] fix: knop toegevoegd wanneer ingelogd op homepage om op
 ingelogde homepage terecht te kunnen komen

---
 frontend/src/views/HomePage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index e9d53770..9b419ecd 100644
--- a/frontend/src/views/HomePage.vue
+++ b/frontend/src/views/HomePage.vue
@@ -19,6 +19,7 @@
             <p>
                 Your access token for the backend is: <code>{{ auth.authState.user?.access_token }}</code>
             </p>
+            <v-btn to="/user">home</v-btn>
         </div>
 
         <v-btn @click="testAuthenticated">Send test request</v-btn>

From 29949462ed813b1624437b31b77df87b9099c001 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 11:48:11 +0100
Subject: [PATCH 03/10] style: menubalk klapt in als het scherm te klein wordt
 om alle componenten te tonen

---
 frontend/src/components/MenuBar.vue | 107 +++++++++++++++++++++++++---
 1 file changed, 97 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 45ff871c..c34946a0 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -9,14 +9,10 @@
 
     const { t, locale } = useI18n();
 
-    // Instantiate variables to use in html to render right
-    // Links and content dependent on the role (student or teacher)
-    const path = "/user";
-
     const role = auth.authState.activeRole;
 
-    const name : string = auth.authState.user!.profile.name!;
-    const initials : string = name
+    const name: string = auth.authState.user!.profile.name!;
+    const initials: string = name
         .split(" ")
         .map((n) => n[0])
         .join("");
@@ -34,6 +30,8 @@
         console.log(langCode);
     };
 
+    const drawer = ref(false);
+
     // when the user wants to logout, the authentication must be set to False
     function performLogout() {
         auth.logout();
@@ -42,12 +40,85 @@
 
 <template>
     <main>
+        <v-app 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">
+                        <img class="dwengo_logo" :src="dwengoLogo" style="width: 100px;" />
+                        <p class="caption" style="font-size: smaller;">{{ t(`${role}`) }}</p>
+                    </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>{{ 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>{{ 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>{{ t("discussions") }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+        </v-app>
+
         <nav class="menu">
             <div class="left">
                 <ul>
                     <li>
                         <router-link
-                            :to="`${path}`"
+                            to="/user"
                             class="dwengo_home"
                         >
                             <img
@@ -69,14 +140,14 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/class`"
+                            to="/user/class"
                             class="menu_item"
                             >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
-                            :to="`${path}/discussion`"
+                            to="/user/discussion"
                             class="menu_item"
                             >{{ t("discussions") }}
                         </router-link>
@@ -111,7 +182,11 @@
             </div>
             <div class="right">
                 <li>
-                    <v-btn @click="performLogout" to="/login" style="background-color: transparent; box-shadow: none !important;">
+                    <v-btn
+                        @click="performLogout"
+                        to="/login"
+                        style="background-color: transparent; box-shadow: none !important"
+                    >
                         <v-tooltip
                             :text="t('logout')"
                             location="bottom"
@@ -192,4 +267,16 @@
     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 532fab11db434ea25c309759f441557d0a6d60ed Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 11:48:55 +0100
Subject: [PATCH 04/10] fix: extra knop toegevoegd om van login scherm naar
 home pagina te gaan om te vermijden dat telkens naar / gegaan moet worden om
 daar op die knop te duwen

---
 frontend/src/views/LoginPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/LoginPage.vue b/frontend/src/views/LoginPage.vue
index a538a80c..90ac3f1d 100644
--- a/frontend/src/views/LoginPage.vue
+++ b/frontend/src/views/LoginPage.vue
@@ -70,6 +70,7 @@
                 You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})
             </p>
             <v-btn @click="performLogout">Logout</v-btn>
+            <v-btn to="/user">home</v-btn>
         </div>
     </main>
 </template>

From 0b298a5543043a8ee7b56b4a5f9d811b351e5433 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Wed, 19 Mar 2025 20:00:05 +0100
Subject: [PATCH 05/10] style: rol bewoog wanneer schermgrootte veranderde

---
 frontend/src/components/MenuBar.vue | 115 +++++++++++++++++++---------
 1 file changed, 77 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index c34946a0..42b4543d 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -41,72 +41,111 @@
 <template>
     <main>
         <v-app class="menu_collapsed">
-            <v-app-bar app style="background-color: #f6faf2;">
+            <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">
-                        <img class="dwengo_logo" :src="dwengoLogo" style="width: 100px;" />
-                        <p class="caption" style="font-size: smaller;">{{ t(`${role}`) }}</p>
+                    <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>
+                    <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">
+                <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" />
+                            <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-navigation-drawer
+                v-model="drawer"
+                app
+            >
                 <v-list>
-
-                    <v-list-item to="/user/assignment" link>
+                    <v-list-item
+                        to="/user/assignment"
+                        link
+                    >
                         <v-list-item-content>
-                            <v-list-item-title>{{ t("assignments") }}</v-list-item-title>
+                            <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
+                        to="/user/class"
+                        link
+                    >
                         <v-list-item-content>
-                            <v-list-item-title>{{ t("classes") }}</v-list-item-title>
+                            <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
+                        to="/user/discussion"
+                        link
+                    >
                         <v-list-item-content>
-                            <v-list-item-title>{{ t("discussions") }}</v-list-item-title>
+                            <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
                 </v-list>

From 52075011b13be7c731361122661a4bef04cf217e Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Sat, 22 Mar 2025 15:44:55 +0100
Subject: [PATCH 06/10] style: titels in menubalk met hoofdletter

---
 frontend/src/components/MenuBar.vue |  3 ++-
 frontend/src/i18n/locale/de.json    | 17 ++++++++++++++++-
 frontend/src/i18n/locale/en.json    | 19 ++++++++++++++-----
 frontend/src/i18n/locale/fr.json    | 19 +++++++++++++++++--
 frontend/src/i18n/locale/nl.json    | 19 ++++++++++++++-----
 5 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 42b4543d..29f9efb3 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -21,13 +21,14 @@
     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);
-        console.log(langCode);
     };
 
     const drawer = ref(false);
diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index a1a699e5..4a6ebc9a 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -1,3 +1,18 @@
 {
-    "welcome": "Willkommen"
+    "welcome": "Willkommen",
+    "student": "schüler",
+    "teacher": "lehrer",
+    "assignments": "Aufgaben",
+    "classes": "Klasses",
+    "discussions": "Diskussionen",
+    "login": "einloggen",
+    "logout": "ausloggen",
+    "homeTitle": "Unsere Stärken",
+    "homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
+    "homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
+    "innovative": "Innovativ",
+    "researchBased": "Forschungsbasiert",
+    "inclusive": "Inclusiv",
+    "sociallyRelevant": "Gesellschaftlich relevant",
+    "translate": "übersetzen"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index c75bfc5d..2a0f246f 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -2,8 +2,17 @@
     "welcome": "Welcome",
     "student": "student",
     "teacher": "teacher",
-    "assignments": "assignments",
-    "classes": "classes",
-    "discussions": "discussions",
-    "logout": "log out"
-}
+    "assignments": "Assignments",
+    "classes": "Classes",
+    "discussions": "Discussions",
+    "logout": "log out",
+    "homeTitle": "Our strengths",
+    "homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
+    "homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
+    "innovative": "Innovative",
+    "researchBased": "Research-based",
+    "inclusive": "Inclusive",
+    "sociallyRelevant": "Socially relevant",
+    "login": "login",
+    "translate": "translate"
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index 86fe964d..f0e0cd56 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -1,3 +1,18 @@
 {
-    "welcome": "Bienvenue"
-}
+    "welcome": "Bienvenue",
+    "student": "élève",
+    "teacher": "enseignant",
+    "assignments": "Travails",
+    "classes": "Classes",
+    "discussions": "Discussions",
+    "login": "se connecter",
+    "logout": "se déconnecter",
+    "homeTitle": "Nos atouts",
+    "homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
+    "homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
+    "innovative": "Innovatif",
+    "researchBased": "Fondé sur la recherche",
+    "inclusive": "Inclusif",
+    "sociallyRelevant": "Socialement pertinent",
+    "translate": "traduire"
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 97ec9b49..c2932819 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -2,8 +2,17 @@
     "welcome": "Welkom",
     "student": "leerling",
     "teacher": "leerkracht",
-    "assignments": "opdrachten",
-    "classes": "klassen",
-    "discussions": "discussies",
-    "logout": "log uit"
-}
+    "assignments": "Opdrachten",
+    "classes": "Klassen",
+    "discussions": "Discussies",
+    "logout": "log uit",
+    "homeTitle": "Onze sterke punten",
+    "homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
+    "homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",
+    "innovative": "Innovatief",
+    "researchBased": "Onderzoeksgedreven",
+    "inclusive": "Inclusief",
+    "sociallyRelevant": "Maatschappelijk relevant",
+    "login": "inloggen",
+    "translate": "vertalen"
+}
\ No newline at end of file

From 7602e5a2a1d1b34979d751fc07caa0cc3c97f7cf Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Sat, 22 Mar 2025 15:03:19 +0000
Subject: [PATCH 07/10] style: fix linting issues met Prettier

---
 frontend/src/i18n/locale/en.json | 2 +-
 frontend/src/i18n/locale/fr.json | 2 +-
 frontend/src/i18n/locale/nl.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 2a0f246f..08bed3d1 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -15,4 +15,4 @@
     "sociallyRelevant": "Socially relevant",
     "login": "login",
     "translate": "translate"
-}
\ No newline at end of file
+}
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index f0e0cd56..4dbcc490 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -15,4 +15,4 @@
     "inclusive": "Inclusif",
     "sociallyRelevant": "Socialement pertinent",
     "translate": "traduire"
-}
\ No newline at end of file
+}
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index c2932819..7b6b9aef 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -15,4 +15,4 @@
     "sociallyRelevant": "Maatschappelijk relevant",
     "login": "inloggen",
     "translate": "vertalen"
-}
\ No newline at end of file
+}

From 43a0cba3006f58838301618b1a01f060c0dbac7d Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Sat, 22 Mar 2025 16:48:15 +0100
Subject: [PATCH 08/10] feat: voeg verschillende vertalingen toe in de json
 files

---
 frontend/src/i18n/locale/de.json | 2 ++
 frontend/src/i18n/locale/en.json | 2 ++
 frontend/src/i18n/locale/fr.json | 2 ++
 frontend/src/i18n/locale/nl.json | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index 4a6ebc9a..d2777496 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -7,6 +7,8 @@
     "discussions": "Diskussionen",
     "login": "einloggen",
     "logout": "ausloggen",
+    "cancel": "kündigen",
+    "logoutVerification": "Sind Sie sicher, dass Sie sich abmelden wollen?",
     "homeTitle": "Unsere Stärken",
     "homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
     "homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 2a0f246f..7e03fe35 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -6,6 +6,8 @@
     "classes": "Classes",
     "discussions": "Discussions",
     "logout": "log out",
+    "cancel": "cancel",
+    "logoutVerification": "Are you sure you want to log out?",
     "homeTitle": "Our strengths",
     "homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
     "homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index f0e0cd56..52bd4449 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -7,6 +7,8 @@
     "discussions": "Discussions",
     "login": "se connecter",
     "logout": "se déconnecter",
+    "cancel": "annuler",
+    "logoutVerification": "Êtes-vous sûr de vouloir vous déconnecter ?",
     "homeTitle": "Nos atouts",
     "homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
     "homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index c2932819..f06453ee 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -6,6 +6,8 @@
     "classes": "Klassen",
     "discussions": "Discussies",
     "logout": "log uit",
+    "cancel": "annuleren",
+    "logoutVerification": "Bent u zeker dat u wilt uitloggen?",
     "homeTitle": "Onze sterke punten",
     "homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
     "homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",

From 639b765112bc14e5584cdf854ba890b8ef30c8e6 Mon Sep 17 00:00:00 2001
From: Laure Jablonski <laure.jablonski@ugent.be>
Date: Sat, 22 Mar 2025 16:48:36 +0100
Subject: [PATCH 09/10] feat: er komt een popup scherm bij het uitloggen
 waarbij nog geannuleerd kan worden

---
 frontend/src/components/MenuBar.vue | 50 ++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 29f9efb3..59a52874 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -31,12 +31,15 @@
         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, the authentication must be set to False
-    function performLogout() {
+    // 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>
@@ -222,7 +225,7 @@
             </div>
             <div class="right">
                 <li>
-                    <v-btn
+                    <!-- <v-btn
                         @click="performLogout"
                         to="/login"
                         style="background-color: transparent; box-shadow: none !important"
@@ -240,7 +243,44 @@
                                 ></v-icon>
                             </template>
                         </v-tooltip>
-                    </v-btn>
+                    </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

From 9dbb962d9fbfbe943833e53714200a4211bc2971 Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Sat, 22 Mar 2025 15:49:19 +0000
Subject: [PATCH 10/10] style: fix linting issues met Prettier

---
 frontend/src/components/MenuBar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 59a52874..e66a645a 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -276,7 +276,11 @@
                                         :text="t('cancel')"
                                         @click="isActive.value = false"
                                     ></v-btn>
-                                    <v-btn :text="t('logout')"  @click="performLogout" to="/login"></v-btn>
+                                    <v-btn
+                                        :text="t('logout')"
+                                        @click="performLogout"
+                                        to="/login"
+                                    ></v-btn>
                                 </v-card-actions>
                             </v-card>
                         </template>