Merge pull request #124 from SELab-2/feat/router-reinitialization

feat: Verbetering en simplificatie van de router

frontend/src/components/MenuBar.vue

@@ -1,27 +1,28 @@
 <script setup lang="ts">
     import { ref } from "vue";
-    import { useRoute } from "vue-router";
-    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
     import { useI18n } from "vue-i18n";
 
-    const route = useRoute();
+    import auth from "@/services/auth/auth-service.ts";
+
+    // Import assets
+    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
+
     const { t, locale } = useI18n();
 
     // Instantiate variables to use in html to render right
     // Links and content dependent on the role (student or teacher)
-    const isTeacher = route.path.includes("teacher");
+    const path = "/user";
 
-    const userId = route.params.id as string;
+    const role = auth.authState.activeRole;
 
-    const role = isTeacher ? "teacher" : "student";
+    //TODO: use authState form services map to get user token
     const name = "Kurt Cobain";
     const initials = name
         .split(" ")
-        .map((n) => {
+        .map((n) => n[0])
-            return n[0];
-        })
         .join("");
 
+    // Available languages
     const languages = ref([
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
@@ -42,7 +43,7 @@
                 <ul>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}`"
+                            :to="`${path}`"
                             class="dwengo_home"
                         >
                             <img
@@ -56,7 +57,7 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/assignment`"
+                            :to="`/user/assignment`"
                             class="menu_item"
                         >
                             {{ t("assignments") }}
@@ -64,14 +65,14 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/class`"
+                            :to="`${path}/class`"
                             class="menu_item"
                             >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/discussion`"
+                            :to="`${path}/discussion`"
                             class="menu_item"
                             >{{ t("discussions") }}
                         </router-link>

frontend/src/router/index.ts

@@ -1,13 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import MenuBar from "@/components/MenuBar.vue";
-import StudentHomepage from "@/views/StudentHomepage.vue";
+import StudentHomepage from "@/views/homepage/StudentHomepage.vue";
-import StudentAssignments from "@/views/assignments/StudentAssignments.vue";
-import StudentClasses from "@/views/classes/StudentClasses.vue";
-import StudentDiscussions from "@/views/discussions/StudentDiscussions.vue";
-import TeacherHomepage from "@/views/TeacherHomepage.vue";
-import TeacherAssignments from "@/views/assignments/TeacherAssignments.vue";
-import TeacherClasses from "@/views/classes/TeacherClasses.vue";
-import TeacherDiscussions from "@/views/discussions/TeacherDiscussions.vue";
 import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
 import SingleClass from "@/views/classes/SingleClass.vue";
 import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
@@ -16,6 +9,10 @@ import CreateClass from "@/views/classes/CreateClass.vue";
 import CreateAssignment from "@/views/assignments/CreateAssignment.vue";
 import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue";
 import CallbackPage from "@/views/CallbackPage.vue";
+import UserDiscussions from "@/views/discussions/UserDiscussions.vue";
+import UserClasses from "@/views/classes/UserClasses.vue";
+import UserAssignments from "@/views/classes/UserAssignments.vue";
+import authState from "@/services/auth/auth-service.ts";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -24,105 +21,104 @@ const router = createRouter({
             path: "/",
             name: "home",
             component: () => import("../views/HomePage.vue"),
+            meta: { requiresAuth: false },
         },
         {
             path: "/login",
             name: "LoginPage",
             component: () => import("../views/LoginPage.vue"),
+            meta: { requiresAuth: false },
         },
         {
             path: "/callback",
             component: CallbackPage,
+            meta: { requiresAuth: false },
         },
+
         {
-            path: "/student/:id",
+            path: "/user",
             component: MenuBar,
+            meta: { requiresAuth: true },
             children: [
                 {
                     path: "home",
-                    name: "StudentHomePage",
+                    name: "UserHomePage",
                     component: StudentHomepage,
                 },
                 {
                     path: "assignment",
-                    name: "StudentAssignments",
+                    name: "UserAssignments",
-                    component: StudentAssignments,
+                    component: UserAssignments,
                 },
                 {
                     path: "class",
-                    name: "StudentClasses",
+                    name: "UserClasses",
-                    component: StudentClasses,
+                    component: UserClasses,
                 },
                 {
                     path: "discussion",
-                    name: "StudentDiscussions",
+                    name: "UserDiscussions",
-                    component: StudentDiscussions,
+                    component: UserDiscussions,
                 },
             ],
         },
 
-        {
-            path: "/teacher/:id",
-            component: MenuBar,
-            children: [
-                {
-                    path: "home",
-                    name: "TeacherHomepage",
-                    component: TeacherHomepage,
-                },
-                {
-                    path: "assignment",
-                    name: "TeacherAssignments",
-                    component: TeacherAssignments,
-                },
-                {
-                    path: "class",
-                    name: "TeacherClasses",
-                    component: TeacherClasses,
-                },
-                {
-                    path: "discussion",
-                    name: "TeacherDiscussions",
-                    component: TeacherDiscussions,
-                },
-            ],
-        },
         {
             path: "/assignment/create",
             name: "CreateAssigment",
             component: CreateAssignment,
+            meta: { requiresAuth: true },
         },
         {
             path: "/assignment/:id",
             name: "SingleAssigment",
             component: SingleAssignment,
+            meta: { requiresAuth: true },
         },
         {
             path: "/class/create",
             name: "CreateClass",
             component: CreateClass,
+            meta: { requiresAuth: true },
         },
         {
             path: "/class/:id",
             name: "SingleClass",
             component: SingleClass,
+            meta: { requiresAuth: true },
         },
         {
             path: "/discussion/create",
             name: "CreateDiscussion",
             component: CreateDiscussion,
+            meta: { requiresAuth: true },
         },
         {
             path: "/discussion/:id",
             name: "SingleDiscussion",
             component: SingleDiscussion,
+            meta: { requiresAuth: true },
         },
         {
             path: "/:catchAll(.*)",
             name: "NotFound",
             component: NotFound,
+            meta: { requiresAuth: false },
         },
     ],
 });
 
+router.beforeEach(async (to, from, next) => {
+    // Verify if user is logged in before accessing certain routes
+    if (to.meta.requiresAuth) {
+        if (!authState.isLoggedIn.value) {
+            next("/login");
+        } else {
+            next();
+        }
+    } else {
+        next();
+    }
+});
+
 export default router;

frontend/src/services/auth/auth-service.ts

@@ -20,6 +20,15 @@ async function getUserManagers(): Promise<UserManagersForRoles> {
     };
 }
 
+/**
+ * Information about the current authentication state.
+ */
+const authState = reactive<AuthState>({
+    user: null,
+    accessToken: null,
+    activeRole: authStorage.getActiveRole() || null,
+});
+
 /**
  * Load the information about who is currently logged in from the IDP.
  */
@@ -35,15 +44,6 @@ async function loadUser(): Promise<User | null> {
     return user;
 }
 
-/**
- * Information about the current authentication state.
- */
-const authState = reactive<AuthState>({
-    user: null,
-    accessToken: null,
-    activeRole: authStorage.getActiveRole() || null,
-});
-
 const isLoggedIn = computed(() => authState.user !== null);
 
 /**

frontend/src/views/discussions/UserDiscussions.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <main></main>
+</template>
+
+<style scoped></style>

frontend/src/views/homepage/StudentHomepage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <main></main>
+</template>
+
+<style scoped></style>

frontend/src/views/homepage/TeacherHomepage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <main></main>
+</template>
+
+<style scoped></style>

frontend/src/views/homepage/UserHomePage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <main></main>
+</template>
+
+<style scoped></style>