fix: Merge dev into feat/assignment-page

frontend/src/App.vue

@@ -3,6 +3,9 @@
     import MenuBar from "@/components/MenuBar.vue";
     import { useRoute } from "vue-router";
     import { computed } from "vue";
+    import authService from "@/services/auth/auth-service.ts";
+
+    void authService.loadUser();
 
     const route = useRoute();
     interface RouteMeta {

frontend/src/components/MenuBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
     import { ref } from "vue";
     import { useI18n } from "vue-i18n";
+    import { useRouter } from "vue-router";
 
     import auth from "@/services/auth/auth-service.ts";
 
@@ -10,9 +11,10 @@
     const { t, locale } = useI18n();
 
     const role = auth.authState.activeRole;
+    const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
 
-    const name = ref(auth.authState.user!.profile.name!);
-    const initials: string = name.value
+    const name: string = auth.authState.user!.profile.name!;
+    const initials: string = name
         .split(" ")
         .map((n) => n[0])
         .join("");

frontend/src/config.ts

@@ -1,8 +1,24 @@
 export const apiConfig = {
-    baseUrl:
-        window.location.hostname === "localhost" && !(window.location.port === "80" || window.location.port === "")
-            ? "http://localhost:3000/api"
-            : window.location.origin + "/api",
+    baseUrl: ((): string => {
+        if (import.meta.env.MODE === "test") {
+            // TODO Remove hardcoding
+            return "http://localhost:9876/api";
+        }
+
+        if (import.meta.env.VITE_API_BASE_URL) {
+            return import.meta.env.VITE_API_BASE_URL;
+        }
+
+        if (
+            window.location.hostname === "localhost" &&
+            !(window.location.port === "80" || window.location.port === "")
+        ) {
+            return "http://localhost:3000/api";
+        }
+
+        // Fallback to the current origin with "/api" suffix
+        return `${window.location.origin}/api`;
+    })(),
 };
 
 export const loginRoute = "/login";

frontend/src/controllers/base-controller.ts

@@ -1,6 +1,7 @@
 import apiClient from "@/services/api-client/api-client.ts";
 import type { AxiosResponse, ResponseType } from "axios";
 import { HttpErrorResponseException } from "@/exception/http-error-response-exception.ts";
+import { apiConfig } from "@/config.ts";
 
 export abstract class BaseController {
     protected basePath: string;
@@ -16,9 +17,18 @@ export abstract class BaseController {
     }
 
     protected async get<T>(path: string, queryParams?: QueryParams, responseType?: ResponseType): Promise<T> {
-        const response = await apiClient.get<T>(this.absolutePathFor(path), { params: queryParams, responseType });
-        BaseController.assertSuccessResponse(response);
-        return response.data;
+        try {
+            const response = await apiClient.get<T>(this.absolutePathFor(path), { params: queryParams, responseType });
+            BaseController.assertSuccessResponse(response);
+            return response.data;
+        } catch (error) {
+            if (error instanceof HttpErrorResponseException) {
+                throw error;
+            }
+            throw new Error(
+                `An unexpected error occurred while fetching data from ${apiConfig.baseUrl}${this.absolutePathFor(path)}: ${error}`,
+            );
+        }
     }
 
     protected async post<T>(path: string, body: unknown, queryParams?: QueryParams): Promise<T> {

frontend/src/main.ts

@@ -12,11 +12,9 @@ import App from "./App.vue";
 import router from "./router";
 import { aliases, mdi } from "vuetify/iconsets/mdi";
 import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
-import authService from "./services/auth/auth-service.ts";
 
 const app = createApp(App);
 
-await authService.loadUser();
 app.use(router);
 
 const link = document.createElement("link");

frontend/src/router/index.ts

@@ -142,7 +142,7 @@ const router = createRouter({
 router.beforeEach(async (to, _from, next) => {
     // Verify if user is logged in before accessing certain routes
     if (to.meta.requiresAuth) {
-        if (!authService.isLoggedIn.value) {
+        if (!authService.isLoggedIn.value && !(await authService.loadUser())) {
             next("/login");
         } else {
             next();

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

@@ -37,7 +37,20 @@ async function loadUser(): Promise<User | null> {
     if (!activeRole) {
         return null;
     }
-    const user = await (await getUserManagers())[activeRole].getUser();
+
+    const userManager = (await getUserManagers())[activeRole];
+    let user = await userManager.getUser(); // Load the user from the local storage.
+    if (!user) {
+        // If the user is not in the local storage, he could still be authenticated in Keycloak.
+        try {
+            user = await userManager.signinSilent();
+        } catch (_: unknown) {
+            // When the user was previously logged in and then logged out, signinSilent throws an error.
+            // In that case, the user is not authenticated anymore, so we set him to null.
+            user = null;
+        }
+    }
+
     setUserAuthInfo(user);
     authState.activeRole = activeRole ?? null;
     return user;