tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Merge pull request #152 from SELab-2/fix/typeerror-bij-het-reloaden-van-een-pagina-met-menubalk-#150

Browse source 
fix: `TypeError` bij het reloaden van een pagina met menubalk (#150) + kleine fixes
This commit is contained in:
Gerald Schmittinger 2025-03-30 16:07:27 +02:00 • committed by GitHub
commit c6aea229f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 177 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/src/controllers/students.ts
View file

@ -60,7 +60,7 @@ export async function createStudentHandler(req: Request, res: Response) {
if (!newUser) { if (!newUser) {
res.status(500).json({ res.status(500).json({
error: 'Something went wrong while creating student' error: 'Something went wrong while creating student',
}); });
return; return;
} }

1
backend/src/services/learning-objects.ts
View file

@ -92,4 +92,3 @@ export async function getLearningObjectsFromPath(hruid: string, language: string
export async function getLearningObjectIdsFromPath(hruid: string, language: string): Promise<string[]> { export async function getLearningObjectIdsFromPath(hruid: string, language: string): Promise<string[]> {
return (await fetchLearningObjects(hruid, false, language)) as string[]; return (await fetchLearningObjects(hruid, false, language)) as string[];
} }

18
frontend/src/App.vue
View file

@ -1,10 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import auth from "@/services/auth/auth-service.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(); auth.loadUser();
interface RouteMeta {
requiresAuth?: boolean;
}
const showMenuBar = computed(() => (route.meta as RouteMeta).requiresAuth && auth.authState.user);
</script> </script>
<template> <template>
<router-view /> <v-app>
<menu-bar v-if="showMenuBar"></menu-bar>
<v-main>
<router-view />
</v-main>
</v-app>
</template> </template>
<style scoped></style> <style scoped></style>

389
frontend/src/components/MenuBar.vue
View file

@ -31,79 +31,95 @@
localStorage.setItem("user-lang", langCode); localStorage.setItem("user-lang", langCode);
}; };
// contains functionality to let the collapsed menu appear and disappear // Contains functionality to let the collapsed menu appear and disappear
// when the screen size varies // When the screen size varies
const drawer = ref(false); const drawer = ref(false);
// when the user wants to logout, a popup is shown to verify this // When the user wants to logout, a popup is shown to verify this
// if verified, the user should be logged out // If verified, the user should be logged out
const performLogout = () => { const performLogout = () => {
auth.logout(); auth.logout();
}; };
</script> </script>
<template> <template>
<main> <v-app-bar
<v-app class="menu_collapsed"> class="app-bar"
<v-app-bar app
app >
style="background-color: #f6faf2" <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> {{ t("assignments") }}
<v-app-bar-nav-icon @click="drawer = !drawer" /> </v-btn>
</template> <v-btn
class="menu_item"
<v-app-bar-title> variant="text"
<router-link to="/user/class"
to="/user" >
class="dwengo_home" {{ 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> <v-icon
<img icon="mdi-translate"
class="dwengo_logo" size="small"
:src="dwengoLogo" color="#0e6942"
style="width: 100px" ></v-icon>
/> </v-btn>
<p </template>
class="caption" <v-list>
style="font-size: smaller" <v-list-item
> v-for="(language, index) in languages"
{{ t(`${role}`) }} :key="index"
</p> @click="changeLanguage(language.code)"
</div> >
</router-link> <v-list-item-title>{{ language.name }}</v-list-item-title>
</v-app-bar-title> </v-list-item>
</v-list>
<v-spacer></v-spacer> </v-menu>
</v-toolbar-items>
<v-menu open-on-hover> <v-spacer></v-spacer>
<template v-slot:activator="{ props }"> <v-dialog max-width="500">
<v-btn <template v-slot:activator="{ props: activatorProps }">
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 <v-btn
@click="performLogout" v-bind="activatorProps"
text :rounded="true"
variant="text"
> >
<v-tooltip <v-tooltip
:text="t('logout')" :text="t('logout')"
@ -115,201 +131,81 @@
icon="mdi-logout" icon="mdi-logout"
size="x-large" size="x-large"
color="#0e6942" color="#0e6942"
/> >
</v-icon>
</template> </template>
</v-tooltip> </v-tooltip>
</v-btn> </v-btn>
</v-app-bar> </template>
<v-navigation-drawer <template v-slot:default="{ isActive }">
v-model="drawer" <v-card :title="t('logoutVerification')">
app <v-card-actions>
> <v-spacer></v-spacer>
<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 <v-btn
to="/user/class" :text="t('cancel')"
link @click="isActive.value = false"
> ></v-btn>
<v-list-item-content> <v-btn
<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
:text="t('logout')" :text="t('logout')"
location="bottom" @click="performLogout"
> to="/login"
<template v-slot:activator="{ props }"> ></v-btn>
<v-icon </v-card-actions>
v-bind="props" </v-card>
icon="mdi-logout" </template>
size="x-large" </v-dialog>
color="#0e6942" <v-avatar
></v-icon> size="large"
</template> color="#0e6942"
</v-tooltip> class="user-button"
</v-btn> --> >{{ initials }}</v-avatar
<v-dialog max-width="500"> >
<template v-slot:activator="{ props: activatorProps }"> </v-app-bar>
<v-btn <v-navigation-drawer
v-bind="activatorProps" v-model="drawer"
style="background-color: transparent; box-shadow: none !important" temporary
> app
<v-tooltip >
:text="t('logout')" <v-list>
location="bottom" <v-list-item
> to="/user/assignment"
<template v-slot:activator="{ props }"> link
<v-icon >
v-bind="props" <v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
icon="mdi-logout" </v-list-item>
size="x-large"
color="#0e6942"
>
</v-icon>
</template>
</v-tooltip>
</v-btn>
</template>
<template v-slot:default="{ isActive }"> <v-list-item
<v-card :title="t('logoutVerification')"> to="/user/class"
<v-card-actions> link
<v-spacer></v-spacer> >
<v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
</v-list-item>
<v-btn <v-list-item
:text="t('cancel')" to="/user/discussion"
@click="isActive.value = false" link
></v-btn> >
<v-btn <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
:text="t('logout')" </v-list-item>
@click="performLogout" </v-list>
to="/login" </v-navigation-drawer>
></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>
</template> </template>
<style scoped> <style scoped>
.app-bar {
background-color: #f6faf2;
}
.menu { .menu {
background-color: #f6faf2; background-color: #f6faf2;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.user-button {
.right { margin-right: 10px;
align-items: center; font-size: large;
padding: 10px; font-weight: bold;
} }
.right li { .right li {
@ -347,16 +243,19 @@
color: #0e6942; color: #0e6942;
text-decoration: none; text-decoration: none;
font-size: large; font-size: large;
} text-transform: none;
nav a.router-link-active {
font-weight: bold;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.menu { .menu {
display: none; display: none;
} }
.caption {
font-size: smaller;
}
.dwengo_logo {
width: 100px;
}
} }
@media (min-width: 701px) { @media (min-width: 701px) {

2
frontend/src/router/index.ts
View file

@ -1,5 +1,4 @@
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
import MenuBar from "@/components/MenuBar.vue";
import SingleAssignment from "@/views/assignments/SingleAssignment.vue"; import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
import SingleClass from "@/views/classes/SingleClass.vue"; import SingleClass from "@/views/classes/SingleClass.vue";
import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue"; import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
@ -38,7 +37,6 @@ const router = createRouter({
{ {
path: "/user", path: "/user",
component: MenuBar,
meta: { requiresAuth: true }, meta: { requiresAuth: true },
children: [ children: [
{ {

5
frontend/src/services/auth/auth-config-loader.ts
View file

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

4
frontend/src/services/auth/auth-service.ts
View file

@ -5,7 +5,7 @@
import { computed, reactive } from "vue"; import { computed, reactive } from "vue";
import type { AuthState, Role, UserManagersForRoles } from "@/services/auth/auth.d.ts"; import type { AuthState, Role, UserManagersForRoles } from "@/services/auth/auth.d.ts";
import { User, UserManager } from "oidc-client-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 authStorage from "./auth-storage.ts";
import { loginRoute } from "@/config.ts"; import { loginRoute } from "@/config.ts";
import apiClient from "@/services/api-client.ts"; import apiClient from "@/services/api-client.ts";
@ -108,7 +108,7 @@ async function logout(): Promise<void> {
apiClient.interceptors.request.use( apiClient.interceptors.request.use(
async (reqConfig) => { async (reqConfig) => {
const token = authState?.user?.access_token; const token = authState?.user?.access_token;
if (token) { if (token && reqConfig.url !== AUTH_CONFIG_ENDPOINT) {
reqConfig.headers.Authorization = `Bearer ${token}`; reqConfig.headers.Authorization = `Bearer ${token}`;
} }
return reqConfig; return reqConfig;

2
frontend/src/views/CallbackPage.vue
View file

@ -8,7 +8,7 @@
onMounted(async () => { onMounted(async () => {
try { try {
await auth.handleLoginCallback(); await auth.handleLoginCallback();
await router.replace("/"); // Redirect to home (or dashboard) await router.replace("/user"); // Redirect to theme page
} catch (error) { } catch (error) {
console.error("OIDC callback error:", error); console.error("OIDC callback error:", error);
} }

13
frontend/src/views/HomePage.vue
View file

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