From d29e2af31f754ca82fa96a618745e831736ecdaa Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Tue, 25 Mar 2025 21:39:52 +0100
Subject: [PATCH] fix(frontend): Menubalk niet tonen voor niet-aangemeldde
 gebruikers

Dit lost de fout op.
---
 frontend/src/App.vue                    |  21 +-
 frontend/src/components/MenuBar.old.vue | 367 ++++++++++++++++++++++++
 frontend/src/components/MenuBar.vue     | 345 +++++++---------------
 frontend/src/router/index.ts            |   2 -
 4 files changed, 497 insertions(+), 238 deletions(-)
 create mode 100644 frontend/src/components/MenuBar.old.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d355c43d..c592a5d7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,29 @@
 <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";
+
+    const route = useRoute();
     auth.loadUser();
+
+    interface RouteMeta {
+        requiresAuth?: boolean;
+    }
+
+    const showMenuBar = computed(() =>
+        (route.meta as RouteMeta).requiresAuth in [false, undefined]
+        && auth.authState.user
+    )
 </script>
 
 <template>
-    <router-view />
+    <v-app>
+        <menu-bar v-if="showMenuBar"></menu-bar>
+        <v-main>
+            <router-view />
+        </v-main>
+    </v-app>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/MenuBar.old.vue b/frontend/src/components/MenuBar.old.vue
new file mode 100644
index 00000000..40195b42
--- /dev/null
+++ b/frontend/src/components/MenuBar.old.vue
@@ -0,0 +1,367 @@
+<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>
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index ed80d7c2..575fb9b1 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -43,67 +43,78 @@
 </script>
 
 <template>
-    <main>
-        <v-app class="menu_collapsed">
-            <v-app-bar
-                app
-                style="background-color: #f6faf2"
+    <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"
+        >
+            <div>
+                <img
+                    class="dwengo_logo"
+                    :src="dwengoLogo"
+                />
+                <p
+                    class="caption"
+                >
+                    {{ t(`${role}`) }}
+                </p>
+            </div>
+        </router-link>
+        <v-toolbar-items class="menu">
+            <v-btn
+                class="menu_item"
+                variant="text"
+                to="/user/assignment"
             >
-                <template v-slot:prepend>
-                    <v-app-bar-nav-icon @click="drawer = !drawer" />
-                </template>
-
-                <v-app-bar-title>
-                    <router-link
-                        to="/user"
-                        class="dwengo_home"
+                {{ t("assignments") }}
+            </v-btn>
+            <v-btn
+                class="menu_item"
+                variant="text"
+                to="/user/class"
+            >
+                {{ t("classes") }}
+            </v-btn>
+            <v-btn
+                class="menu_item"
+                variant="text"
+                to="/user/discussion"
+            >
+                {{ t("discussions") }}
+            </v-btn>
+            <v-menu open-on-hover>
+                <template v-slot:activator="{ props }">
+                    <v-btn
+                        v-bind="props"
+                        icon
+                        variant="text"
                     >
-                        <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-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-toolbar-items>
+        <v-spacer></v-spacer>
+        <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
                 <v-btn
-                    @click="performLogout"
-                    text
+                    v-bind="activatorProps"
+                    :rounded="true"
+                    variant="text"
                 >
                     <v-tooltip
                         :text="t('logout')"
@@ -115,197 +126,54 @@
                                 icon="mdi-logout"
                                 size="x-large"
                                 color="#0e6942"
-                            />
+                            >
+                            </v-icon>
                         </template>
                     </v-tooltip>
                 </v-btn>
-            </v-app-bar>
+            </template>
 
-            <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>
+            <template v-slot:default="{ isActive }">
+                <v-card :title="t('logoutVerification')">
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
 
-                    <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>
-        </v-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
+                        <v-btn
+                            :text="t('cancel')"
+                            @click="isActive.value = false"
+                        ></v-btn>
+                        <v-btn
                             :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>
-        <router-view />
-    </main>
+                            @click="performLogout"
+                            to="/login"
+                        ></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </template>
+        </v-dialog>
+        <v-avatar
+            size="large"
+            color="#0e6942"
+            class="user-button"
+        >{{ initials }}</v-avatar
+        >
+    </v-app-bar>
 </template>
 
 <style scoped>
+    .app-bar {
+        background-color: #f6faf2;
+    }
     .menu {
         background-color: #f6faf2;
         display: flex;
         justify-content: space-between;
     }
+    .user-button {
+        margin-right: 10px;
+        font-size: large;
+        font-weight: bold;
+    }
 
     .right {
         align-items: center;
@@ -347,6 +215,7 @@
         color: #0e6942;
         text-decoration: none;
         font-size: large;
+        text-transform: none;
     }
 
     nav a.router-link-active {
@@ -357,6 +226,12 @@
         .menu {
             display: none;
         }
+        .caption {
+            font-size: smaller;
+        }
+        .dwengo_logo {
+            width: 100px;
+        }
     }
 
     @media (min-width: 701px) {
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0d1b5a0d..9bdee0b0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from "vue-router";
-import MenuBar from "@/components/MenuBar.vue";
 import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
 import SingleClass from "@/views/classes/SingleClass.vue";
 import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
@@ -38,7 +37,6 @@ const router = createRouter({
 
         {
             path: "/user",
-            component: MenuBar,
             meta: { requiresAuth: true },
             children: [
                 {