Merge branch 'dev' into refactor/linting

backend/src/app.ts

@@ -9,6 +9,7 @@ import { envVars, getNumericEnvVar } from './util/envVars.js';
 import apiRouter from './routes/router.js';
 import swaggerMiddleware from './swagger.js';
 import swaggerUi from 'swagger-ui-express';
+import { errorHandler } from './middleware/error-handling/error-handler.js';
 
 const logger: Logger = getLogger();
 
@@ -26,6 +27,8 @@ app.use('/api', apiRouter);
 // Swagger
 app.use('/api-docs', swaggerUi.serve, swaggerMiddleware);
 
+app.use(errorHandler);
+
 async function startServer(): Promise<void> {
     await initORM();
 

backend/src/controllers/learning-objects.ts

@@ -1,12 +1,16 @@
 import { Request, Response } from 'express';
 import { FALLBACK_LANG } from '../config.js';
-import { FilteredLearningObject, LearningObjectIdentifier, LearningPathIdentifier } from '../interfaces/learning-content.js';
+import {
+    FilteredLearningObject,
+    LearningObjectIdentifier,
+    LearningPathIdentifier,
+} from '../interfaces/learning-content.js';
 import learningObjectService from '../services/learning-objects/learning-object-service.js';
 import { envVars, getEnvVar } from '../util/envVars.js';
 import { Language } from '../entities/content/language.js';
-import { BadRequestException } from '../exceptions/badRequestException.js';
 import attachmentService from '../services/learning-objects/attachment-service.js';
 import { NotFoundError } from '@mikro-orm/core';
+import { BadRequestException } from '../exceptions/bad-request-exception.js';
 
 function getLearningObjectIdentifierFromRequest(req: Request): LearningObjectIdentifier {
     if (!req.params.hruid) {

backend/src/controllers/learning-paths.ts

@@ -2,14 +2,14 @@ import { Request, Response } from 'express';
 import { themes } from '../data/themes.js';
 import { FALLBACK_LANG } from '../config.js';
 import learningPathService from '../services/learning-paths/learning-path-service.js';
-import { BadRequestException } from '../exceptions/badRequestException.js';
 import { Language } from '../entities/content/language.js';
 import {
     PersonalizationTarget,
     personalizedForGroup,
     personalizedForStudent,
 } from '../services/learning-paths/learning-path-personalization-util.js';
-import { NotFoundException } from '../exceptions/notFoundException.js';
+import { BadRequestException } from '../exceptions/bad-request-exception.js';
+import { NotFoundException } from '../exceptions/not-found-exception.js';
 
 /**
  * Fetch learning paths based on query parameters.

backend/src/data/dwengo-entity-repository.ts

@@ -1,10 +1,12 @@
 import { EntityRepository, FilterQuery } from '@mikro-orm/core';
+import { EntityAlreadyExistsException } from '../exceptions/entity-already-exists-exception.js';
 
 export abstract class DwengoEntityRepository<T extends object> extends EntityRepository<T> {
-    public async save(entity: T): Promise<void> {
-        const em = this.getEntityManager();
-        em.persist(entity);
-        await em.flush();
+    public async save(entity: T, options?: { preventOverwrite?: boolean }): Promise<void> {
+        if (options?.preventOverwrite && (await this.findOne(entity))) {
+            throw new EntityAlreadyExistsException(`A ${this.getEntityName()} with this identifier already exists.`);
+        }
+        await this.getEntityManager().persistAndFlush(entity);
     }
     public async deleteWhere(query: FilterQuery<T>): Promise<void> {
         const toDelete = await this.findOne(query);

backend/src/entities/users/student.entity.ts

@@ -13,12 +13,4 @@ export class Student extends User {
 
     @ManyToMany(() => Group)
     groups!: Collection<Group>;
-
-    constructor(
-        public username: string,
-        public firstName: string,
-        public lastName: string
-    ) {
-        super();
-    }
 }

backend/src/entities/users/teacher.entity.ts

@@ -7,12 +7,4 @@ import { TeacherRepository } from '../../data/users/teacher-repository.js';
 export class Teacher extends User {
     @ManyToMany(() => Class)
     classes!: Collection<Class>;
-
-    constructor(
-        public username: string,
-        public firstName: string,
-        public lastName: string
-    ) {
-        super();
-    }
 }

backend/src/exceptions/bad-request-exception.ts

@@ -0,0 +1,10 @@
+import { ExceptionWithHttpState } from './exception-with-http-state.js';
+
+/**
+ * Exception for HTTP 400 Bad Request
+ */
+export class BadRequestException extends ExceptionWithHttpState {
+    constructor(error: string) {
+        super(400, error);
+    }
+}

backend/src/exceptions/badRequestException.ts

@@ -1,11 +0,0 @@
-import { HttpException } from './httpException.js';
-
-/**
- * Exception for HTTP 400 Bad Request
- */
-
-export class BadRequestException extends HttpException {
-    constructor(message = 'Bad Request') {
-        super(400, message);
-    }
-}

backend/src/exceptions/conflict-exception.ts

@@ -0,0 +1,12 @@
+import { ExceptionWithHttpState } from './exception-with-http-state.js';
+
+/**
+ * Exception for HTTP 409 Conflict
+ */
+export class ConflictException extends ExceptionWithHttpState {
+    public status = 409;
+
+    constructor(error: string) {
+        super(409, error);
+    }
+}

backend/src/exceptions/entity-already-exists-exception.ts

@@ -0,0 +1,7 @@
+import { ConflictException } from './conflict-exception.js';
+
+export class EntityAlreadyExistsException extends ConflictException {
+    constructor(message: string) {
+        super(message);
+    }
+}

backend/src/exceptions/exception-with-http-state.ts

@@ -0,0 +1,11 @@
+/**
+ * Exceptions which are associated with a HTTP error code.
+ */
+export abstract class ExceptionWithHttpState extends Error {
+    constructor(
+        public status: number,
+        public error: string
+    ) {
+        super(error);
+    }
+}

backend/src/exceptions/forbidden-exception.ts

@@ -0,0 +1,12 @@
+import { ExceptionWithHttpState } from './exception-with-http-state.js';
+
+/**
+ * Exception for HTTP 403 Forbidden
+ */
+export class ForbiddenException extends ExceptionWithHttpState {
+    status = 403;
+
+    constructor(message = 'Forbidden') {
+        super(403, message);
+    }
+}

backend/src/exceptions/forbiddenException.ts

@@ -1,10 +0,0 @@
-import { HttpException } from './httpException.js';
-
-/**
- * Exception for HTTP 403 Forbidden
- */
-export class ForbiddenException extends HttpException {
-    constructor(message = 'Forbidden') {
-        super(403, message);
-    }
-}

backend/src/exceptions/httpException.ts

@@ -1,8 +0,0 @@
-export class HttpException extends Error {
-    constructor(
-        public status: number,
-        message: string
-    ) {
-        super(message);
-    }
-}

backend/src/exceptions/not-found-exception.ts

@@ -0,0 +1,12 @@
+import { ExceptionWithHttpState } from './exception-with-http-state.js';
+
+/**
+ * Exception for HTTP 404 Not Found
+ */
+export class NotFoundException extends ExceptionWithHttpState {
+    public status = 404;
+
+    constructor(error: string) {
+        super(404, error);
+    }
+}

backend/src/exceptions/notFoundException.ts

@@ -1,10 +0,0 @@
-import { HttpException } from './httpException.js';
-
-/**
- * Exception for HTTP 404 Not Found
- */
-export class NotFoundException extends HttpException {
-    constructor(message = 'Not Found') {
-        super(404, message);
-    }
-}

backend/src/exceptions/unauthorized-exception.ts

@@ -0,0 +1,10 @@
+import { ExceptionWithHttpState } from './exception-with-http-state.js';
+
+/**
+ * Exception for HTTP 401 Unauthorized
+ */
+export class UnauthorizedException extends ExceptionWithHttpState {
+    constructor(message = 'Unauthorized') {
+        super(401, message);
+    }
+}

backend/src/exceptions/unauthorizedException.ts

@@ -1,10 +0,0 @@
-import { HttpException } from './httpException.js';
-
-/**
- * Exception for HTTP 401 Unauthorized
- */
-export class UnauthorizedException extends HttpException {
-    constructor(message = 'Unauthorized') {
-        super(401, message);
-    }
-}

backend/src/interfaces/student.ts

@@ -1,4 +1,5 @@
 import { Student } from '../entities/users/student.entity.js';
+import { getStudentRepository } from '../data/repositories.js';
 
 export interface StudentDTO {
     id: string;
@@ -23,7 +24,9 @@ export function mapToStudentDTO(student: Student): StudentDTO {
 }
 
 export function mapToStudent(studentData: StudentDTO): Student {
-    const student = new Student(studentData.username, studentData.firstName, studentData.lastName);
-
-    return student;
+    return getStudentRepository().create({
+        username: studentData.username,
+        firstName: studentData.firstName,
+        lastName: studentData.lastName,
+    });
 }

backend/src/interfaces/teacher.ts

@@ -1,4 +1,5 @@
 import { Teacher } from '../entities/users/teacher.entity.js';
+import { getTeacherRepository } from '../data/repositories.js';
 
 export interface TeacherDTO {
     id: string;
@@ -22,8 +23,10 @@ export function mapToTeacherDTO(teacher: Teacher): TeacherDTO {
     };
 }
 
-export function mapToTeacher(teacherDTO: TeacherDTO): Teacher {
-    const teacher = new Teacher(teacherDTO.username, teacherDTO.firstName, teacherDTO.lastName);
-
-    return teacher;
+export function mapToTeacher(teacherData: TeacherDTO): Teacher {
+    return getTeacherRepository().create({
+        username: teacherData.username,
+        firstName: teacherData.firstName,
+        lastName: teacherData.lastName,
+    });
 }

backend/src/middleware/auth/auth.ts

@@ -6,8 +6,8 @@ import jwksClient from 'jwks-rsa';
 import * as express from 'express';
 import { AuthenticatedRequest } from './authenticated-request.js';
 import { AuthenticationInfo } from './authentication-info.js';
-import { UnauthorizedException } from '../../exceptions/unauthorizedException.js';
-import { ForbiddenException } from '../../exceptions/forbiddenException.js';
+import { UnauthorizedException } from '../../exceptions/unauthorized-exception.js';
+import { ForbiddenException } from '../../exceptions/forbidden-exception.js';
 
 const JWKS_CACHE = true;
 const JWKS_RATE_LIMIT = true;

backend/src/middleware/error-handling/error-handler.ts

@@ -0,0 +1,15 @@
+import { NextFunction, Request, Response } from 'express';
+import { getLogger, Logger } from '../../logging/initalize.js';
+import { ExceptionWithHttpState } from '../../exceptions/exception-with-http-state.js';
+
+const logger: Logger = getLogger();
+
+export function errorHandler(err: unknown, _req: Request, res: Response, _: NextFunction): void {
+    if (err instanceof ExceptionWithHttpState) {
+        logger.warn(`An error occurred while handling a request: ${err} (-> HTTP ${err.status})`);
+        res.status(err.status).json(err);
+    } else {
+        logger.error(`Unexpected error occurred while handing a request: ${JSON.stringify(err)}`);
+        res.status(500).json(err);
+    }
+}

backend/src/mikro-orm.config.ts

@@ -49,6 +49,7 @@ function config(testingMode = false): Options {
             dbName: getEnvVar(envVars.DbName),
             subscribers: [new SqliteAutoincrementSubscriber()],
             entities: entities,
+            persistOnCreate: false, // Do not implicitly save entities when they are created via `create`.
             // EntitiesTs: entitiesTs,
 
             // Workaround: vitest: `TypeError: Unknown file extension ".ts"` (ERR_UNKNOWN_FILE_EXTENSION)
@@ -65,6 +66,7 @@ function config(testingMode = false): Options {
         user: getEnvVar(envVars.DbUsername),
         password: getEnvVar(envVars.DbPassword),
         entities: entities,
+        persistOnCreate: false, // Do not implicitly save entities when they are created via `create`.
         // EntitiesTs: entitiesTs,
 
         // Logging

backend/src/services/students.ts

@@ -1,4 +1,9 @@
-import { getClassRepository, getGroupRepository, getStudentRepository, getSubmissionRepository } from '../data/repositories.js';
+import {
+    getClassRepository,
+    getGroupRepository,
+    getStudentRepository,
+    getSubmissionRepository,
+} from '../data/repositories.js';
 import { AssignmentDTO } from '../interfaces/assignment.js';
 import { ClassDTO, mapToClassDTO } from '../interfaces/class.js';
 import { GroupDTO, mapToGroupDTO, mapToGroupDTOId } from '../interfaces/group.js';
@@ -27,15 +32,9 @@ export async function getStudent(username: string): Promise<StudentDTO | null> {
 export async function createStudent(userData: StudentDTO): Promise<StudentDTO | null> {
     const studentRepository = getStudentRepository();
 
-    try {
-        const newStudent = studentRepository.create(mapToStudent(userData));
-        await studentRepository.save(newStudent);
-
-        return mapToStudentDTO(newStudent);
-    } catch (e) {
-        getLogger().error(e);
-        return null;
-    }
+    const newStudent = mapToStudent(userData);
+    await studentRepository.save(newStudent, { preventOverwrite: true });
+    return mapToStudentDTO(newStudent);
 }
 
 export async function deleteStudent(username: string): Promise<StudentDTO | null> {

backend/src/services/teachers.ts

@@ -26,15 +26,10 @@ export async function getTeacher(username: string): Promise<TeacherDTO | null> {
 export async function createTeacher(userData: TeacherDTO): Promise<TeacherDTO | null> {
     const teacherRepository = getTeacherRepository();
 
-    try {
-        const newTeacher = teacherRepository.create(mapToTeacher(userData));
-        await teacherRepository.save(newTeacher);
+    const newTeacher = mapToTeacher(userData);
+    await teacherRepository.save(newTeacher, { preventOverwrite: true });
 
-        return mapToTeacherDTO(newTeacher);
-    } catch (e) {
-        getLogger().error(e);
-        return null;
-    }
+    return mapToTeacherDTO(newTeacher);
 }
 
 export async function deleteTeacher(username: string): Promise<TeacherDTO | null> {

backend/tests/data/users/students.test.ts

@@ -1,5 +1,4 @@
 import { setupTestApp } from '../../setup-tests.js';
-import { Student } from '../../../src/entities/users/student.entity.js';
 import { describe, it, expect, beforeAll } from 'vitest';
 import { StudentRepository } from '../../../src/data/users/student-repository.js';
 import { getStudentRepository } from '../../../src/data/repositories.js';
@@ -30,7 +29,7 @@ describe('StudentRepository', () => {
     });
 
     it('should return the queried student after he was added', async () => {
-        await studentRepository.insert(new Student(username, firstName, lastName));
+        await studentRepository.insert(studentRepository.create({ username, firstName, lastName }));
 
         const retrievedStudent = await studentRepository.findByUsername(username);
         expect(retrievedStudent).toBeTruthy();

backend/tests/data/users/teachers.test.ts

@@ -2,7 +2,6 @@ import { describe, it, expect, beforeAll } from 'vitest';
 import { TeacherRepository } from '../../../src/data/users/teacher-repository';
 import { setupTestApp } from '../../setup-tests';
 import { getTeacherRepository } from '../../../src/data/repositories';
-import { Teacher } from '../../../src/entities/users/teacher.entity';
 
 const username = 'testteacher';
 const firstName = 'John';
@@ -30,7 +29,7 @@ describe('TeacherRepository', () => {
     });
 
     it('should return the queried teacher after he was added', async () => {
-        await teacherRepository.insert(new Teacher(username, firstName, lastName));
+        await teacherRepository.insert(teacherRepository.create({ username, firstName, lastName }));
 
         const retrievedTeacher = await teacherRepository.findByUsername(username);
         expect(retrievedTeacher).toBeTruthy();

frontend/package.json

@@ -42,7 +42,7 @@
         "jsdom": "^26.0.0",
         "npm-run-all2": "^7.0.2",
         "typescript": "~5.7.3",
-        "vite": "^6.1.0",
+        "vite": "^6.1.2",
         "vite-plugin-vue-devtools": "^7.7.2",
         "vitest": "^3.0.5",
         "vue-tsc": "^2.2.2"

frontend/src/App.vue

@@ -1,10 +1,26 @@
 <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();
     await auth.loadUser();
+
+    interface RouteMeta {
+        requiresAuth?: boolean;
+    }
+
+    const showMenuBar = computed(() => (route.meta as RouteMeta).requiresAuth && 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>

frontend/src/components/MenuBar.vue

@@ -42,67 +42,83 @@
 </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"
+                    alt="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')"
@@ -114,201 +130,81 @@
                                 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>
+                            @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>
+    <v-navigation-drawer
+        v-model="drawer"
+        temporary
+        app
+    >
+        <v-list>
+            <v-list-item
+                to="/user/assignment"
+                link
+            >
+                <v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
+            </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-title class="menu_item">{{ t("classes") }}</v-list-item-title>
+            </v-list-item>
 
-                                    <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>
+            <v-list-item
+                to="/user/discussion"
+                link
+            >
+                <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-navigation-drawer>
 </template>
 
 <style scoped>
+    .app-bar {
+        background-color: #f6faf2;
+    }
     .menu {
         background-color: #f6faf2;
         display: flex;
         justify-content: space-between;
     }
-
-    .right {
-        align-items: center;
-        padding: 10px;
+    .user-button {
+        margin-right: 10px;
+        font-size: large;
+        font-weight: bold;
     }
 
     .right li {
@@ -346,16 +242,19 @@
         color: #0e6942;
         text-decoration: none;
         font-size: large;
-    }
-
-    nav a.router-link-active {
-        font-weight: bold;
+        text-transform: none;
     }
 
     @media (max-width: 700px) {
         .menu {
             display: none;
         }
+        .caption {
+            font-size: smaller;
+        }
+        .dwengo_logo {
+            width: 100px;
+        }
     }
 
     @media (min-width: 701px) {

frontend/src/queries/themes.ts

@@ -5,7 +5,7 @@ import { type MaybeRefOrGetter, toValue } from "vue";
 const themeController = getThemeController();
 
 export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<never, Error> {
-    return useQuery({
+    useQuery({
         queryKey: ["themes", language],
         queryFn: async () => {
             const lang = toValue(language);
@@ -16,7 +16,7 @@ export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryRetur
 }
 
 export function useThemeHruidsQuery(themeKey: string | null): UseQueryReturnType<never, Error> {
-    return useQuery({
+    useQuery({
         queryKey: ["theme-hruids", themeKey],
         queryFn: async () => themeController.getHruidsByKey(themeKey!),
         enabled: Boolean(themeKey),

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: [
                 {

frontend/src/services/auth/auth-config-loader.ts

@@ -2,11 +2,14 @@ import apiClient from "@/services/api-client.ts";
 import type { FrontendAuthConfig } from "@/services/auth/auth.d.ts";
 import type { UserManagerSettings } from "oidc-client-ts";
 
+export const AUTH_CONFIG_ENDPOINT = "auth/config";
+
 /**
  * Fetch the authentication configuration from the backend.
  */
 export async function loadAuthConfig(): Promise<Record<string, UserManagerSettings>> {
-    const authConfig = (await apiClient.get<FrontendAuthConfig>("auth/config")).data;
+    const authConfigResponse = await apiClient.get<FrontendAuthConfig>(AUTH_CONFIG_ENDPOINT);
+    const authConfig = authConfigResponse.data;
     return {
         student: {
             authority: authConfig.student.authority,

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 { 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";
@@ -108,7 +108,7 @@ async function logout(): Promise<void> {
 apiClient.interceptors.request.use(
     async (reqConfig) => {
         const token = authState?.user?.access_token;
-        if (token) {
+        if (token && reqConfig.url !== AUTH_CONFIG_ENDPOINT) {
             reqConfig.headers.Authorization = `Bearer ${token}`;
         }
         return reqConfig;

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) {
             // FIXME console.error("OIDC callback error:", error);
         }

frontend/src/views/HomePage.vue

@@ -25,9 +25,10 @@
             <div class="container_left">
                 <img
                     :src="dwengoLogo"
+                    alt="Dwengo logo"
                     style="align-self: center"
                 />
-                <h> {{ t("homeTitle") }}</h>
+                <h1>{{ t("homeTitle") }}</h1>
                 <p class="info">
                     {{ t("homeIntroduction1") }}
                 </p>
@@ -55,7 +56,7 @@
                         width="125"
                         src="/assets/home/innovative.png"
                     ></v-img>
-                    <h class="big">{{ t("innovative") }}</h>
+                    <h2 class="big">{{ t("innovative") }}</h2>
                 </div>
                 <div class="img_small">
                     <v-img
@@ -63,7 +64,7 @@
                         width="125"
                         src="/assets/home/research_based.png"
                     ></v-img>
-                    <h class="big">{{ t("researchBased") }}</h>
+                    <h2 class="big">{{ t("researchBased") }}</h2>
                 </div>
                 <div class="img_small">
                     <v-img
@@ -71,7 +72,7 @@
                         width="125"
                         src="/assets/home/inclusive.png"
                     ></v-img>
-                    <h class="big">{{ t("sociallyRelevant") }}</h>
+                    <h2 class="big">{{ t("sociallyRelevant") }}</h2>
                 </div>
                 <div class="img_small">
                     <v-img
@@ -79,7 +80,7 @@
                         width="125"
                         src="/assets/home/socially_relevant.png"
                     ></v-img>
-                    <h class="big">{{ t("inclusive") }}</h>
+                    <h2 class="big">{{ t("inclusive") }}</h2>
                 </div>
             </div>
             <div class="container_right">
@@ -158,7 +159,7 @@
         margin-bottom: 10px;
     }
 
-    h {
+    h2 {
         font-size: large;
         font-weight: bold;
         align-self: center;