Merge branch 'dev' into feat/homepagina
This commit is contained in:
Laure Jablonski
GitHub
commit
eaf6c97262
25 changed files with 622 additions and 153 deletions
|
|
@ -1,48 +1,167 @@
|
|||
<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 role = auth.authState.activeRole;
|
||||
|
||||
const userId = route.params.id as string;
|
||||
|
||||
const role = isTeacher ? "teacher" : "student";
|
||||
const name = "Kurt Cobain";
|
||||
const initials = name
|
||||
const name: string = auth.authState.user!.profile.name!;
|
||||
const initials: string = name
|
||||
.split(" ")
|
||||
.map((n) => {
|
||||
return n[0];
|
||||
})
|
||||
.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);
|
||||
console.log(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>
|
||||
<v-app 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>
|
||||
</v-app>
|
||||
|
||||
<nav class="menu">
|
||||
<div class="left">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`/${role}/${userId}`"
|
||||
to="/user"
|
||||
class="dwengo_home"
|
||||
>
|
||||
<img
|
||||
|
|
@ -56,7 +175,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`/${role}/${userId}/assignment`"
|
||||
:to="`/user/assignment`"
|
||||
class="menu_item"
|
||||
>
|
||||
{{ t("assignments") }}
|
||||
|
|
@ -64,14 +183,14 @@
|
|||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`/${role}/${userId}/class`"
|
||||
to="/user/class"
|
||||
class="menu_item"
|
||||
>{{ t("classes") }}</router-link
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
:to="`/${role}/${userId}/discussion`"
|
||||
to="/user/discussion"
|
||||
class="menu_item"
|
||||
>{{ t("discussions") }}
|
||||
</router-link>
|
||||
|
|
@ -106,7 +225,11 @@
|
|||
</div>
|
||||
<div class="right">
|
||||
<li>
|
||||
<router-link :to="`/login`">
|
||||
<!-- <v-btn
|
||||
@click="performLogout"
|
||||
to="/login"
|
||||
style="background-color: transparent; box-shadow: none !important"
|
||||
>
|
||||
<v-tooltip
|
||||
:text="t('logout')"
|
||||
location="bottom"
|
||||
|
|
@ -120,7 +243,48 @@
|
|||
></v-icon>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</router-link>
|
||||
</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
|
||||
|
|
@ -187,4 +351,16 @@
|
|||
nav a.router-link-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
.menu_collapsed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
"welcome": "Willkommen",
|
||||
"student": "schüler",
|
||||
"teacher": "lehrer",
|
||||
"assignments": "aufgaben",
|
||||
"classes": "klasses",
|
||||
"discussions": "diskussionen",
|
||||
"assignments": "Aufgaben",
|
||||
"classes": "Klasses",
|
||||
"discussions": "Diskussionen",
|
||||
"login": "einloggen",
|
||||
"logout": "ausloggen",
|
||||
"cancel": "kündigen",
|
||||
"logoutVerification": "Sind Sie sicher, dass Sie sich abmelden wollen?",
|
||||
"homeTitle": "Unsere Stärken",
|
||||
"homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
|
||||
"homeIntroduction2": "Wir fügen allen unseren Projekten ständig neue Projekte und Methoden hinzu. Für diese Projekte suchen wir immer nach einem gesellschaftlich relevanten Thema. Darüber hinaus stellen wir sicher, dass unser didaktisches Material auf wissenschaftlicher Forschung basiert, und achten stets auf die Inklusion.",
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
"welcome": "Welcome",
|
||||
"student": "student",
|
||||
"teacher": "teacher",
|
||||
"assignments": "assignments",
|
||||
"classes": "classes",
|
||||
"discussions": "discussions",
|
||||
"assignments": "Assignments",
|
||||
"classes": "Classes",
|
||||
"discussions": "Discussions",
|
||||
"logout": "log out",
|
||||
"cancel": "cancel",
|
||||
"logoutVerification": "Are you sure you want to log out?",
|
||||
"homeTitle": "Our strengths",
|
||||
"homeIntroduction1": "We develop innovative workshops and educational resources, and we provide them to students around the globe in collaboration with teachers and volunteers. Our train-the-trainer sessions enable them to bring our hands-on workshops to the students.",
|
||||
"homeIntroduction2": "We continuously add new projects and methodologies to all our projects. For these projects, we always look for a socially relevant theme. Additionally, we ensure that our didactic material is based on scientific research and always keep an eye on inclusivity.",
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
"welcome": "Bienvenue",
|
||||
"student": "élève",
|
||||
"teacher": "enseignant",
|
||||
"assignments": "travails",
|
||||
"classes": "classes",
|
||||
"discussions": "discussions",
|
||||
"assignments": "Travails",
|
||||
"classes": "Classes",
|
||||
"discussions": "Discussions",
|
||||
"login": "se connecter",
|
||||
"logout": "se déconnecter",
|
||||
"cancel": "annuler",
|
||||
"logoutVerification": "Êtes-vous sûr de vouloir vous déconnecter ?",
|
||||
"homeTitle": "Nos atouts",
|
||||
"homeIntroduction1": "Nous développons des ateliers innovants et des ressources éducatives que nous mettons à la disposition des élèves du monde entier en collaboration avec des enseignants et des bénévoles. Nos sessions de formation des formateurs leur permettent d'offrir nos ateliers pratiques aux élèves.",
|
||||
"homeIntroduction2": "Nous ajoutons continuellement de nouveaux projets et de nouvelles méthodologies à tous nos projets. Pour ces projets, nous recherchons toujours un thème socialement pertinent. En outre, nous veillons à ce que notre matériel didactique soit basé sur la recherche scientifique et nous gardons toujours un œil sur l'inclusivité.",
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
"welcome": "Welkom",
|
||||
"student": "leerling",
|
||||
"teacher": "leerkracht",
|
||||
"assignments": "opdrachten",
|
||||
"classes": "klassen",
|
||||
"discussions": "discussies",
|
||||
"assignments": "Opdrachten",
|
||||
"classes": "Klassen",
|
||||
"discussions": "Discussies",
|
||||
"logout": "log uit",
|
||||
"cancel": "annuleren",
|
||||
"logoutVerification": "Bent u zeker dat u wilt uitloggen?",
|
||||
"homeTitle": "Onze sterke punten",
|
||||
"homeIntroduction1": "We ontwikkelen innovatieve workshops en leermiddelen en bieden deze aan studenten over de hele wereld in samenwerking met leerkrachten en vrijwilligers. Onze train-de-trainer sessies stellen hen in staat om onze hands-on workshops naar de leerlingen te brengen.",
|
||||
"homeIntroduction2": "We voegen voortdurend nieuwe projecten en methodologieën toe aan al onze projecten. Voor deze projecten zoeken we altijd een maatschappelijk relevant thema. Daarnaast zorgen we ervoor dat ons didactisch materiaal gebaseerd is op wetenschappelijk onderzoek en houden we inclusiviteit altijd in het oog.",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import MenuBar from "@/components/MenuBar.vue";
|
||||
import StudentHomepage from "@/views/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 StudentHomepage from "@/views/homepage/StudentHomepage.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",
|
||||
component: StudentAssignments,
|
||||
name: "UserAssignments",
|
||||
component: UserAssignments,
|
||||
},
|
||||
{
|
||||
path: "class",
|
||||
name: "StudentClasses",
|
||||
component: StudentClasses,
|
||||
name: "UserClasses",
|
||||
component: UserClasses,
|
||||
},
|
||||
{
|
||||
path: "discussion",
|
||||
name: "StudentDiscussions",
|
||||
component: StudentDiscussions,
|
||||
name: "UserDiscussions",
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})
|
||||
</p>
|
||||
<v-btn @click="performLogout">Logout</v-btn>
|
||||
<v-btn to="/user">home</v-btn>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
7
frontend/src/views/discussions/UserDiscussions.vue
Normal file
7
frontend/src/views/discussions/UserDiscussions.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
7
frontend/src/views/homepage/StudentHomepage.vue
Normal file
7
frontend/src/views/homepage/StudentHomepage.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
7
frontend/src/views/homepage/TeacherHomepage.vue
Normal file
7
frontend/src/views/homepage/TeacherHomepage.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
7
frontend/src/views/homepage/UserHomePage.vue
Normal file
7
frontend/src/views/homepage/UserHomePage.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue