From e8ffd926cc78d58d003de1cc98589ef4945a52ca Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 2 May 2024 14:57:43 +0200
Subject: [PATCH 01/11] chore: start hash

---
 backend/api/serializers/course_serializer.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index 66de92ce..f7746aaa 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -1,3 +1,4 @@
+from passlib.hash import pbkdf2_sha256
 from nh3 import clean
 from datetime import timedelta
 from django.utils import timezone
@@ -81,6 +82,9 @@ def create(self, validated_data):
             course.faculty = faculty
             course.save()
 
+        # Compute the invitation link hash, with a size
+        course.invitation_link = pbkdf2_sha256.hash(f'{course.id}{course.academic_startyear}', salt_size=16)
+
         return course
 
     def update(self, instance, validated_data):

From df043c93e4eef53d176c0ba1613626e2001d5c82 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 11:21:51 +0200
Subject: [PATCH 02/11] chore: init refactor

---
 backend/api/serializers/course_serializer.py  |  12 +-
 backend/api/views/course_view.py              |  19 +--
 frontend/src/types/filter/Filter.ts           |  19 ---
 .../src/views/courses/CreateCourseView.vue    |   1 +
 .../src/views/courses/SearchCourseView.vue    | 151 +++++++++++++-----
 .../search/ProtectedSearchCourseView.vue      |  87 ----------
 .../courses/search/PublicSearchCourseView.vue | 129 ---------------
 7 files changed, 125 insertions(+), 293 deletions(-)
 delete mode 100644 frontend/src/views/courses/search/ProtectedSearchCourseView.vue
 delete mode 100644 frontend/src/views/courses/search/PublicSearchCourseView.vue

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index f7746aaa..b1c4c347 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -1,4 +1,4 @@
-from passlib.hash import pbkdf2_sha256
+import hashlib
 from nh3 import clean
 from datetime import timedelta
 from django.utils import timezone
@@ -77,13 +77,17 @@ def create(self, validated_data):
         # Create the course
         course = super().create(validated_data)
 
+        # Compute the invitation link hash
+        course.invitation_link = hashlib.sha256(f'{course.id}{course.academic_startyear}'.encode()).hexdigest()
+        course.invitation_link_expires = timezone.now()
+
         # Link the faculty, if specified
         if faculty is not None:
             course.faculty = faculty
             course.save()
-
-        # Compute the invitation link hash, with a size
-        course.invitation_link = pbkdf2_sha256.hash(f'{course.id}{course.academic_startyear}', salt_size=16)
+        else:
+            course.faculty = "noo"
+            course.save()
 
         return course
 
diff --git a/backend/api/views/course_view.py b/backend/api/views/course_view.py
index d3f0c888..c33dccd2 100644
--- a/backend/api/views/course_view.py
+++ b/backend/api/views/course_view.py
@@ -68,26 +68,9 @@ def update(self, request: Request, *_, **__):
     def search(self, request: Request) -> Response:
         # Extract filter params
         search = request.query_params.get("search", "")
-        invitation_link = request.query_params.get("invitationLink", "")
         years = request.query_params.getlist("years[]")
         faculties = request.query_params.getlist("faculties[]")
 
-        # If the invitation link was passed, then only the private course with the invitation link should be returned
-        if invitation_link != "none":
-
-            # Filter based on invitation link, and that the invitation link is not expired
-            queryset = self.get_queryset().filter(
-                invitation_link=invitation_link,
-                invitation_link_expires__gte=timezone.now()
-            )
-
-            # Serialize the resulting queryset
-            serializer = self.serializer_class(self.paginate_queryset(queryset), many=True, context={
-                "request": request
-            })
-
-            return self.get_paginated_response(serializer.data)
-
         # Filter the queryset based on the search term
         queryset = self.get_queryset().filter(
             name__icontains=search
@@ -101,7 +84,7 @@ def search(self, request: Request) -> Response:
         if faculties:
             queryset = queryset.filter(faculty__in=faculties)
 
-        # No invitation link was passed, so filter out private courses
+        # Public courses search so filter out private courses
         queryset = queryset.filter(private_course=False)
 
         # Serialize the resulting queryset
diff --git a/frontend/src/types/filter/Filter.ts b/frontend/src/types/filter/Filter.ts
index 53282372..59236fd3 100644
--- a/frontend/src/types/filter/Filter.ts
+++ b/frontend/src/types/filter/Filter.ts
@@ -14,10 +14,6 @@ export type CourseFilter = {
     years: string[];
 } & Filter;
 
-export type PrivateCourseFilter = {
-    invitationLink: string;
-} & Filter;
-
 export type DockerImageFilter = {
     id: string;
     name: string;
@@ -64,7 +60,6 @@ export function getUserFilters(query: LocationQuery): UserFilter {
 export function getCourseFilters(query: LocationQuery): CourseFilter {
     const filters: CourseFilter = {
         search: query.search?.toString() ?? '',
-        invitationLink: 'none',
         faculties: [],
         years: [],
     };
@@ -80,20 +75,6 @@ export function getCourseFilters(query: LocationQuery): CourseFilter {
     return filters;
 }
 
-/**
- * Get the private course filters from the query.
- *
- * @param query
- */
-export function getPrivateCourseFilters(query: LocationQuery): PrivateCourseFilter {
-    const filters: PrivateCourseFilter = {
-        search: query.search?.toString() ?? '',
-        invitationLink: query.invitationLink?.toString() ?? '',
-    };
-
-    return filters;
-}
-
 /**
  * Get the docker image filters from the query.
  *
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index 5b91b764..eeafbc05 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -66,6 +66,7 @@ async function submitCourse(): Promise<void> {
                 form.description,
                 getAcademicYear(),
                 form.private,
+                null, // No invitation link
                 null, // No parent course
                 form.faculty,
             ),
diff --git a/frontend/src/views/courses/SearchCourseView.vue b/frontend/src/views/courses/SearchCourseView.vue
index 31d5a4f3..8692b3ca 100644
--- a/frontend/src/views/courses/SearchCourseView.vue
+++ b/frontend/src/views/courses/SearchCourseView.vue
@@ -1,49 +1,128 @@
 <script setup lang="ts">
-import SelectButton from 'primevue/selectbutton';
-import { computed, ref } from 'vue';
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Checkbox from 'primevue/checkbox';
+import Paginator from 'primevue/paginator';
+import Title from '@/components/layout/Title.vue';
+import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import CourseGeneralList from '@/components/courses/CourseGeneralList.vue';
+import { onMounted } from 'vue';
+import { useCourses } from '@/composables/services/course.service.ts';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { useFaculty } from '@/composables/services/faculty.service.ts';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-import PublicSearchCourseView from './search/PublicSearchCourseView.vue';
-import ProtectedSearchCourseView from './search/ProtectedSearchCourseView.vue';
+import { useFilter } from '@/composables/filters/filter.ts';
+import { usePaginator } from '@/composables/filters/paginator.ts';
+import { useRoute } from 'vue-router';
+import { getCourseFilters } from '@/types/filter/Filter.ts';
+import { getAcademicYears } from '@/types/Course.ts';
 
 /* Composable injections */
 const { t } = useI18n();
+const { query } = useRoute();
+const { user } = storeToRefs(useAuthStore());
+const { faculties, getFaculties } = useFaculty();
+const { pagination, searchCourses } = useCourses();
+const { onPaginate, resetPagination, page, first, pageSize } = usePaginator();
+const { filter, onFilter } = useFilter(getCourseFilters(query));
 
-/* State of the public/protected course */
-const publicCourses = ref<boolean>(true);
+/**
+ * Fetch the courses based on the filter.
+ */
+async function fetchCourses(): Promise<void> {
+    await searchCourses(filter.value, page.value, pageSize.value);
+}
 
-/* Options for the select button */
-const options = computed(() => [
-    { label: t('components.button.public'), value: true },
-    { label: t('components.button.protected'), value: false },
-]);
+/* Fetch the faculties */
+onMounted(async () => {
+    // Fetch the faculties
+    await getFaculties();
+
+    /* Search courses on page change */
+    onPaginate(fetchCourses);
+
+    /* Search courses on filter change */
+    onFilter(fetchCourses);
+
+    /* Reset pagination on filter change */
+    onFilter(
+        async () => {
+            await resetPagination([pagination]);
+        },
+        0,
+        false,
+    );
+});
 </script>
 
 <template>
-    <!-- If the public option is set, display the search option for all the public courses -->
-    <PublicSearchCourseView v-if="publicCourses">
-        <template #publicButton>
-            <SelectButton
-                v-model="publicCourses"
-                :options="options"
-                option-value="value"
-                option-label="label"
-                :allow-empty="false"
-            />
-        </template>
-    </PublicSearchCourseView>
-
-    <!-- If the protected option is set, display the search option for all the protected courses -->
-    <ProtectedSearchCourseView v-else>
-        <template #publicButton>
-            <SelectButton
-                v-model="publicCourses"
-                :options="options"
-                option-value="value"
-                option-label="label"
-                :allow-empty="false"
-            />
-        </template>
-    </ProtectedSearchCourseView>
+    <BaseLayout>
+        <div class="grid">
+            <div class="col-12 xl:col-3">
+                <Accordion :active-index="[0]" multiple>
+                    <AccordionTab :header="t('views.courses.search.search')">
+                        <IconField iconPosition="left">
+                            <InputText
+                                :placeholder="t('views.courses.search.placeholder')"
+                                v-model="filter.search"
+                                class="w-full"
+                            />
+                            <InputIcon class="pi pi-search"></InputIcon>
+                        </IconField>
+                    </AccordionTab>
+                    <AccordionTab :header="t('views.courses.search.faculty')" v-if="faculties">
+                        <div v-for="faculty in faculties" :key="faculty.id" class="flex align-items-center mb-2">
+                            <Checkbox
+                                v-model="filter.faculties"
+                                :inputId="faculty.id"
+                                name="faculties"
+                                :value="faculty.id"
+                            />
+                            <label :for="faculty.id" class="ml-2 text-sm">{{ faculty.name }}</label>
+                        </div>
+                    </AccordionTab>
+                    <AccordionTab :header="t('views.courses.search.year')" v-if="user && pagination !== null">
+                        <div
+                            v-for="year in getAcademicYears(pagination.min_year, pagination.max_year)"
+                            :key="year"
+                            class="flex align-items-center mb-2"
+                        >
+                            <Checkbox
+                                v-model="filter.years"
+                                :inputId="year.toString()"
+                                name="faculties"
+                                :value="year"
+                            />
+                            <label :for="year.toString()" class="ml-2 text-sm"> {{ year }} - {{ year + 1 }} </label>
+                        </div>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <div class="col-12 xl:col-9 mt-4 xl:mt-0">
+                <div class="flex justify-content-between align-items-center">
+                    <Title>
+                        {{ t('views.courses.search.title') }}
+                    </Title>
+                </div>
+
+                <p class="mt-3" v-if="pagination">
+                    {{ t('views.courses.search.results', [pagination.count]) }}
+                </p>
+
+                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3">
+                    <template #empty>
+                        <p>{{ t('components.list.noCourses.search') }}</p>
+                    </template>
+                </CourseGeneralList>
+
+                <Paginator :rows="pageSize" :total-records="pagination?.count" v-model:first="first" />
+            </div>
+        </div>
+    </BaseLayout>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/frontend/src/views/courses/search/ProtectedSearchCourseView.vue b/frontend/src/views/courses/search/ProtectedSearchCourseView.vue
deleted file mode 100644
index caac1fb9..00000000
--- a/frontend/src/views/courses/search/ProtectedSearchCourseView.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import InputText from 'primevue/inputtext';
-import Button from 'primevue/button';
-import ProtectedSearchStepper from '@/components/courses/search/ProtectedSearchStepper.vue';
-import Title from '@/components/layout/Title.vue';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import { useI18n } from 'vue-i18n';
-import { ref, onMounted } from 'vue';
-import CourseGeneralList from '@/components/courses/CourseGeneralList.vue';
-import { useCourses } from '@/composables/services/course.service.ts';
-import { usePaginator } from '@/composables/filters/paginator.ts';
-import { useFilter } from '@/composables/filters/filter.ts';
-import { getPrivateCourseFilters } from '@/types/filter/Filter.ts';
-import { useRoute } from 'vue-router';
-
-/* Composable injections */
-const { t } = useI18n();
-const { query } = useRoute();
-
-/* State */
-const searchQuery = ref('');
-const { pagination, searchCourses } = useCourses();
-const { onPaginate, resetPagination, page, pageSize } = usePaginator();
-const { filter, onFilter } = useFilter(getPrivateCourseFilters(query));
-
-/**
- * Fetch the courses based on the filter.
- */
-async function fetchCourses(): Promise<void> {
-    filter.value.invitationLink = searchQuery.value;
-    await searchCourses(filter.value, page.value, pageSize.value);
-}
-
-onMounted(async () => {
-    /* Search courses on page change */
-    onPaginate(fetchCourses);
-
-    /* Search courses on filter change */
-    onFilter(fetchCourses);
-
-    /* Reset pagination on filter change */
-    onFilter(
-        async () => {
-            await resetPagination([pagination]);
-        },
-        0,
-        false,
-    );
-});
-</script>
-
-<template>
-    <BaseLayout>
-        <div class="grid">
-            <div class="col-12 xl:col-3">
-                <ProtectedSearchStepper />
-            </div>
-            <div class="col-12 xl:col-9 mt-4 xl:mt-0">
-                <div class="flex justify-content-between align-items-center">
-                    <Title>
-                        {{ t('views.courses.search.title') }}
-                    </Title>
-                    <slot name="publicButton" />
-                </div>
-
-                <span class="relative flex mt-4">
-                    <InputText
-                        v-model="searchQuery"
-                        :placeholder="t('views.courses.searchByLink.placeholder')"
-                        style="width: 80%"
-                        type="search"
-                    />
-                    <Button @click="fetchCourses" icon="pi pi-search" class="p-button-primary" />
-                </span>
-
-                <!-- Founded courses -->
-                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3">
-                    <template #empty>
-                        <p>{{ t('components.list.noCourses.search') }}</p>
-                    </template>
-                </CourseGeneralList>
-            </div>
-        </div>
-    </BaseLayout>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/frontend/src/views/courses/search/PublicSearchCourseView.vue b/frontend/src/views/courses/search/PublicSearchCourseView.vue
deleted file mode 100644
index 8fa70dc1..00000000
--- a/frontend/src/views/courses/search/PublicSearchCourseView.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
-import InputText from 'primevue/inputtext';
-import IconField from 'primevue/iconfield';
-import InputIcon from 'primevue/inputicon';
-import Checkbox from 'primevue/checkbox';
-import Paginator from 'primevue/paginator';
-import Title from '@/components/layout/Title.vue';
-import BaseLayout from '@/components/layout/base/BaseLayout.vue';
-import CourseGeneralList from '@/components/courses/CourseGeneralList.vue';
-import { onMounted } from 'vue';
-import { useCourses } from '@/composables/services/course.service.ts';
-import { useAuthStore } from '@/store/authentication.store.ts';
-import { useFaculty } from '@/composables/services/faculty.service.ts';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-import { useFilter } from '@/composables/filters/filter.ts';
-import { usePaginator } from '@/composables/filters/paginator.ts';
-import { useRoute } from 'vue-router';
-import { getCourseFilters } from '@/types/filter/Filter.ts';
-import { getAcademicYears } from '@/types/Course.ts';
-
-/* Composable injections */
-const { t } = useI18n();
-const { query } = useRoute();
-const { user } = storeToRefs(useAuthStore());
-const { faculties, getFaculties } = useFaculty();
-const { pagination, searchCourses } = useCourses();
-const { onPaginate, resetPagination, page, first, pageSize } = usePaginator();
-const { filter, onFilter } = useFilter(getCourseFilters(query));
-
-/**
- * Fetch the courses based on the filter.
- */
-async function fetchCourses(): Promise<void> {
-    await searchCourses(filter.value, page.value, pageSize.value);
-}
-
-/* Fetch the faculties */
-onMounted(async () => {
-    // Fetch the faculties
-    await getFaculties();
-
-    /* Search courses on page change */
-    onPaginate(fetchCourses);
-
-    /* Search courses on filter change */
-    onFilter(fetchCourses);
-
-    /* Reset pagination on filter change */
-    onFilter(
-        async () => {
-            await resetPagination([pagination]);
-        },
-        0,
-        false,
-    );
-});
-</script>
-
-<template>
-    <BaseLayout>
-        <div class="grid">
-            <div class="col-12 xl:col-3">
-                <Accordion :active-index="[0]" multiple>
-                    <AccordionTab :header="t('views.courses.search.search')">
-                        <IconField iconPosition="left">
-                            <InputText
-                                :placeholder="t('views.courses.search.placeholder')"
-                                v-model="filter.search"
-                                class="w-full"
-                            />
-                            <InputIcon class="pi pi-search"></InputIcon>
-                        </IconField>
-                    </AccordionTab>
-                    <AccordionTab :header="t('views.courses.search.faculty')" v-if="faculties">
-                        <div v-for="faculty in faculties" :key="faculty.id" class="flex align-items-center mb-2">
-                            <Checkbox
-                                v-model="filter.faculties"
-                                :inputId="faculty.id"
-                                name="faculties"
-                                :value="faculty.id"
-                            />
-                            <label :for="faculty.id" class="ml-2 text-sm">{{ faculty.name }}</label>
-                        </div>
-                    </AccordionTab>
-                    <AccordionTab :header="t('views.courses.search.year')" v-if="user && pagination !== null">
-                        <div
-                            v-for="year in getAcademicYears(pagination.min_year, pagination.max_year)"
-                            :key="year"
-                            class="flex align-items-center mb-2"
-                        >
-                            <Checkbox
-                                v-model="filter.years"
-                                :inputId="year.toString()"
-                                name="faculties"
-                                :value="year"
-                            />
-                            <label :for="year.toString()" class="ml-2 text-sm"> {{ year }} - {{ year + 1 }} </label>
-                        </div>
-                    </AccordionTab>
-                </Accordion>
-            </div>
-            <div class="col-12 xl:col-9 mt-4 xl:mt-0">
-                <div class="flex justify-content-between align-items-center">
-                    <Title>
-                        {{ t('views.courses.search.title') }}
-                    </Title>
-                    <slot name="publicButton" />
-                </div>
-
-                <p class="mt-3" v-if="pagination">
-                    {{ t('views.courses.search.results', [pagination.count]) }}
-                </p>
-
-                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3">
-                    <template #empty>
-                        <p>{{ t('components.list.noCourses.search') }}</p>
-                    </template>
-                </CourseGeneralList>
-
-                <Paginator :rows="pageSize" :total-records="pagination?.count" v-model:first="first" />
-            </div>
-        </div>
-    </BaseLayout>
-</template>
-
-<style scoped lang="scss"></style>

From b71b4792bd220a0af7b77675d7916157f25007c1 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 11:42:17 +0200
Subject: [PATCH 03/11] chore: invitation link displayed from backend

---
 backend/api/serializers/course_serializer.py  | 12 ++++
 .../components/courses/ShareCourseButton.vue  | 52 ++++++--------
 .../courses/search/ProtectedSearchStepper.vue | 71 -------------------
 .../composables/services/course.service.ts    |  7 +-
 4 files changed, 35 insertions(+), 107 deletions(-)
 delete mode 100644 frontend/src/components/courses/search/ProtectedSearchStepper.vue

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index b1c4c347..c770fbb7 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -5,6 +5,7 @@
 from django.utils.translation import gettext
 from rest_framework import serializers
 from rest_framework.exceptions import ValidationError
+from api.permissions.role_permissions import is_teacher
 from api.serializers.student_serializer import StudentIDSerializer
 from api.serializers.teacher_serializer import TeacherIDSerializer
 from api.serializers.faculty_serializer import FacultySerializer
@@ -46,6 +47,17 @@ def validate(self, attrs: dict) -> dict:
         attrs['description'] = clean(attrs['description'])
         return attrs
 
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+
+        # If you are a teacher, you can see the invitation link of the course
+        if is_teacher(self.context["request"].user):
+            # Teacher can only see the invitation link if they are part of the course
+            if instance.teachers.filter(id=self.context["request"].user.id).exists():
+                data["invitation_link"] = instance.invitation_link
+
+        return data
+
     class Meta:
         model = Course
         fields = [
diff --git a/frontend/src/components/courses/ShareCourseButton.vue b/frontend/src/components/courses/ShareCourseButton.vue
index 5396fc02..0dc3bda9 100644
--- a/frontend/src/components/courses/ShareCourseButton.vue
+++ b/frontend/src/components/courses/ShareCourseButton.vue
@@ -6,12 +6,12 @@ import InputText from 'primevue/inputtext';
 import { useI18n } from 'vue-i18n';
 import { type Course } from '@/types/Course.ts';
 import { PrimeIcons } from 'primevue/api';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useCourses } from '@/composables/services/course.service';
 
 /* Composable injections */
 const { t } = useI18n();
-const { saveInvitationLink } = useCourses();
+const { activateInvitationLink } = useCourses();
 
 /* Props */
 const props = defineProps<{ course: Course }>();
@@ -19,9 +19,6 @@ const props = defineProps<{ course: Course }>();
 /* State for the dialog to share a course */
 const displayShareCourse = ref(false);
 
-/* Invitation link for the course */
-const link = ref<string>('KVC Westerlo');
-
 /* Number of days the invitation link is valid */
 const linkDuration = ref<number>(7);
 
@@ -29,16 +26,15 @@ const linkDuration = ref<number>(7);
  * Opens the dialog to share the course, and generates a random invitation link.
  */
 function openShareCourseDialog(): void {
-    link.value = generateRandomInvitationLink();
     displayShareCourse.value = true;
 }
 
 /**
- * Creates an invitation link for the course.
+ * Activates the invitation link for the course, with the specified duration.
  */
 async function handleShare(): Promise<void> {
     // Save the invitation link for the course
-    await saveInvitationLink(props.course.id, link.value, linkDuration.value);
+    await activateInvitationLink(props.course.id, linkDuration.value);
 
     // Close the dialog
     displayShareCourse.value = false;
@@ -48,28 +44,25 @@ async function handleShare(): Promise<void> {
  * Copies the invitation link to the clipboard.
  */
 function copyToClipboard(): void {
-    navigator.clipboard
-        .writeText(link.value)
-        .then(() => {
-            console.log('Link copied to clipboard');
-        })
-        .catch((err) => {
-            console.error('Failed to copy text: ', err);
-        });
+    if (props.course.invitation_link){
+        navigator.clipboard
+            .writeText(invitationLink.value)
+            .then(() => {
+                console.log('Link copied to clipboard');
+            })
+            .catch((err) => {
+                console.error('Failed to copy text: ', err);
+            });
+    }
 }
 
 /**
- * Generates a random invitation link for the course.
+ * Returns the course's invitation link, formatted as the full URL.
  */
-function generateRandomInvitationLink(): string {
-    let result = '';
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const charactersLength = characters.length;
-    for (let i = 0; i < 20; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-}
+const invitationLink = computed(() => {
+    return `${window.location}/join/${props.course.invitation_link}`;
+});
+
 </script>
 
 <template>
@@ -109,13 +102,8 @@ function generateRandomInvitationLink(): string {
                 <div class="grid">
                     <div class="flex align-items-center col-12 gap-2">
                         <label for="link">{{ t('views.courses.share.link') }}</label>
-                        <InputText v-model="link" disabled style="width: 25%" />
+                        <InputText v-model="invitationLink" disabled style="width: 70%" />
                         <Button @click="copyToClipboard()" icon="pi pi-copy" class="p-button-text no-outline" />
-                        <Button
-                            @click="link = generateRandomInvitationLink()"
-                            icon="pi pi-refresh"
-                            class="p-button-text no-outline"
-                        />
                     </div>
                 </div>
 
diff --git a/frontend/src/components/courses/search/ProtectedSearchStepper.vue b/frontend/src/components/courses/search/ProtectedSearchStepper.vue
deleted file mode 100644
index 688279db..00000000
--- a/frontend/src/components/courses/search/ProtectedSearchStepper.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import Stepper from 'primevue/stepper';
-import StepperPanel from 'primevue/stepperpanel';
-import Button from 'primevue/button';
-import { useI18n } from 'vue-i18n';
-
-/* Composable injections */
-const { t } = useI18n();
-</script>
-
-<template>
-    <Stepper orientation="vertical">
-        <StepperPanel :header="t('protectedCourses.screen1.title')">
-            <template #content="{ nextCallback }">
-                <div class="flex flex-column h-12rem">
-                    <div
-                        class="border-4 surface-border border-round flex-auto flex justify-content-center align-items-center"
-                    >
-                        {{ t('protectedCourses.screen1.content') }}
-                    </div>
-                </div>
-                <div class="flex py-4 justify-content-end">
-                    <Button
-                        icon="pi pi-arrow-right"
-                        iconPos="right"
-                        @click="nextCallback"
-                        text
-                        class="p-button-rounded"
-                    />
-                </div>
-            </template>
-        </StepperPanel>
-        <StepperPanel :header="t('protectedCourses.screen2.title')">
-            <template #content="{ prevCallback, nextCallback }">
-                <div class="flex flex-column h-12rem">
-                    <div
-                        class="border-4 surface-border border-round flex-auto flex justify-content-center align-items-center"
-                    >
-                        {{ t('protectedCourses.screen2.content') }}
-                    </div>
-                </div>
-                <div class="flex py-4 gap-2 justify-content-between">
-                    <Button icon="pi pi-arrow-left" @click="prevCallback" text class="p-button-rounded" />
-                    <Button
-                        icon="pi pi-arrow-right"
-                        iconPos="right"
-                        @click="nextCallback"
-                        text
-                        class="p-button-rounded"
-                    />
-                </div>
-            </template>
-        </StepperPanel>
-        <StepperPanel :header="t('protectedCourses.screen3.title')">
-            <template #content="{ prevCallback }">
-                <div class="flex flex-column h-12rem">
-                    <div
-                        class="border-4 surface-border border-round flex-auto flex justify-content-center align-items-center"
-                    >
-                        {{ t('protectedCourses.screen3.content') }}
-                    </div>
-                </div>
-                <div class="flex py-4 justify-content-start">
-                    <Button icon="pi pi-arrow-left" @click="prevCallback" text class="p-button-rounded" />
-                </div>
-            </template>
-        </StepperPanel>
-    </Stepper>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/course.service.ts b/frontend/src/composables/services/course.service.ts
index 3b12c301..b272b4f6 100644
--- a/frontend/src/composables/services/course.service.ts
+++ b/frontend/src/composables/services/course.service.ts
@@ -19,7 +19,7 @@ interface CoursesState {
     createCourse: (courseData: Course) => Promise<void>;
     updateCourse: (courseData: Course) => Promise<void>;
     cloneCourse: (courseId: string, cloneAssistants: boolean, cloneTeachers: boolean) => Promise<void>;
-    saveInvitationLink: (courseId: string, invitationLink: string, linkDuration: number) => Promise<void>;
+    activateInvitationLink: (courseId: string, linkDuration: number) => Promise<void>;
     deleteCourse: (id: string) => Promise<void>;
 }
 
@@ -112,12 +112,11 @@ export function useCourses(): CoursesState {
         await deleteId<Course>(endpoint, course, Course.fromJSON);
     }
 
-    async function saveInvitationLink(courseId: string, invitationLink: string, linkDuration: number): Promise<void> {
+    async function activateInvitationLink(courseId: string, linkDuration: number): Promise<void> {
         const endpoint = endpoints.courses.invitationLink.replace('{courseId}', courseId);
         await create<Course>(
             endpoint,
             {
-                invitation_link: invitationLink,
                 link_duration: linkDuration,
             },
             course,
@@ -141,6 +140,6 @@ export function useCourses(): CoursesState {
         updateCourse,
         cloneCourse,
         deleteCourse,
-        saveInvitationLink,
+        activateInvitationLink,
     };
 }

From 42de12f3bd9fbff002696535d8b0ef5ae7b8630a Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 11:47:04 +0200
Subject: [PATCH 04/11] chore: update expiration date service

---
 backend/api/serializers/course_serializer.py        | 10 ----------
 backend/api/views/course_view.py                    |  2 +-
 frontend/src/composables/services/course.service.ts |  5 ++---
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index c770fbb7..4d00e057 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -129,16 +129,8 @@ class CourseCloneSerializer(serializers.Serializer):
 
 
 class SaveInvitationLinkSerializer(serializers.Serializer):
-    invitation_link = serializers.CharField(required=True)
     link_duration = serializers.IntegerField(required=True)
 
-    def validate(self, data):
-        # Check if there is no course with the same invitation link.
-        if Course.objects.filter(invitation_link=data["invitation_link"]).exists():
-            raise ValidationError(gettext("courses.error.invitation_link"))
-
-        return data
-
     def create(self, validated_data):
         # Save the invitation link and the expiration date.
         if "course" not in self.context:
@@ -146,8 +138,6 @@ def create(self, validated_data):
 
         course: Course = self.context["course"]
 
-        course.invitation_link = validated_data["invitation_link"]
-
         # Save the expiration date as the current date + the invite link expires parameter in days.
         course.invitation_link_expires = timezone.now() + timedelta(days=validated_data["link_duration"])
         course.save()
diff --git a/backend/api/views/course_view.py b/backend/api/views/course_view.py
index c33dccd2..3f94723b 100644
--- a/backend/api/views/course_view.py
+++ b/backend/api/views/course_view.py
@@ -378,7 +378,7 @@ def clone(self, request: Request, **__):
 
         return Response(course_serializer.data)
 
-    @action(detail=True, methods=["post"])
+    @action(detail=True, methods=["patch"])
     @swagger_auto_schema(request_body=SaveInvitationLinkSerializer)
     def invitation_link(self, request, **_):
         """Save the invitation link to the course"""
diff --git a/frontend/src/composables/services/course.service.ts b/frontend/src/composables/services/course.service.ts
index b272b4f6..96ae28cb 100644
--- a/frontend/src/composables/services/course.service.ts
+++ b/frontend/src/composables/services/course.service.ts
@@ -114,13 +114,12 @@ export function useCourses(): CoursesState {
 
     async function activateInvitationLink(courseId: string, linkDuration: number): Promise<void> {
         const endpoint = endpoints.courses.invitationLink.replace('{courseId}', courseId);
-        await create<Course>(
+        await patch(
             endpoint,
             {
                 link_duration: linkDuration,
             },
-            course,
-            Course.fromJSON,
+            response,
         );
     }
 

From 2c672f62b392e65516d7b1eca00bd5d9d0252980 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 13:03:12 +0200
Subject: [PATCH 05/11] chore: layout on link page course

---
 frontend/src/assets/lang/app/en.json          |   1 +
 frontend/src/assets/lang/app/nl.json          |   1 +
 frontend/src/router/router.ts                 |   7 +
 frontend/src/views/courses/JoinCourseView.vue | 122 ++++++++++++++++++
 4 files changed, 131 insertions(+)
 create mode 100644 frontend/src/views/courses/JoinCourseView.vue

diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index 11636b0f..8138e5dd 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -242,6 +242,7 @@
     },
     "confirmations": {
         "cloneCourse": "Are you sure you want to clone this coure? This will create the same course for the next academic year.",
+        "joinCourse": "Are you sure you want to enroll in this course? This will give you access to all projects, assignments, ...",
         "leaveCourse": "Are you sure you want to leave this course? You will no longer have access to this course.",
         "shareCourse": "By creating an invitation link, you allow students in possession of this link to enroll in this course. Please copy the generated link, only when you click on \"Create invitation link\" will this link become valid."
     },
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 9f11273c..8c2e49a8 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -239,6 +239,7 @@
     },
     "confirmations": {
         "cloneCourse": "Ben je zeker dat je dit vak wil klonen? Dit zal hetzelfde vak aanmaken voor het volgende academiejaar.",
+        "joinCourse": "Ben je zeker dat je jezelf wil inschrijven voor dit vak? Dit zal je toegang geven tot alle projecten, opdrachten, ...",
         "leaveCourse": "Ben je zeker dat je dit vak wil verlaten? Je zal geen toegang meer hebben tot dit vak.",
         "shareCourse": "Door het creëren van een invitatielink staat u studenten in bezit van deze link toe zich in te schrijven voor dit vak. Gelieve de gegenereerde link te kopiëren, pas wanneer u op \"Creëer invitatielink\" klikt zal deze link geldig worden."
     },
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 1a2b4f21..5c071786 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -23,6 +23,7 @@ import AdminView from '@/views/admin/AdminView.vue';
 import UsersView from '@/views/admin/UsersView.vue';
 import ProjectsView from '@/views/projects/ProjectsView.vue';
 import DockerImagesView from '@/views/admin/DockerImagesView.vue';
+import JoinCourseView from '@/views/courses/JoinCourseView.vue';
 
 const routes: RouteRecordRaw[] = [
     // Authentication
@@ -53,6 +54,12 @@ const routes: RouteRecordRaw[] = [
                 children: [
                     { path: '', component: CourseView, name: 'course' },
                     { path: 'edit', component: UpdateCourseView, name: 'course-edit' },
+                    { 
+                        path: 'join', 
+                        children: [
+                            {path: ':invitationLink', component: JoinCourseView, name: 'course-join'},
+                        ]
+                    },
                     // Projects
                     {
                         path: 'projects',
diff --git a/frontend/src/views/courses/JoinCourseView.vue b/frontend/src/views/courses/JoinCourseView.vue
new file mode 100644
index 00000000..4d91b16d
--- /dev/null
+++ b/frontend/src/views/courses/JoinCourseView.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import BaseLayout from '@/components/layout/base/BaseLayout.vue';
+import Title from '@/components/layout/Title.vue';
+import Button from 'primevue/button';
+import TeacherAssistantList from '@/components/teachers_assistants/TeacherAssistantList.vue';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { useConfirm } from 'primevue/useconfirm';
+import { onMounted, computed } from 'vue';
+import { useAssistant } from '@/composables/services/assistant.service';
+import { useTeacher } from '@/composables/services/teacher.service';
+import { useCourses } from '@/composables/services/course.service.ts';
+import { useStudents } from '@/composables/services/student.service';
+import { useRoute, useRouter } from 'vue-router';
+import { useAuthStore } from '@/store/authentication.store.ts';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+/* Service injection */
+const { t } = useI18n();
+const confirm = useConfirm();
+const { refreshUser } = useAuthStore();
+const { user } = storeToRefs(useAuthStore());
+const { params } = useRoute();
+const { push } = useRouter();
+const { course, getCourseByID } = useCourses();
+const { assistants, getAssistantsByCourse } = useAssistant();
+const { teachers, getTeachersByCourse } = useTeacher();
+const { studentJoinCourse } = useStudents();
+
+/* State */
+const instructors = computed(() => {
+    if (course.value !== null) {
+        if (course.value.teachers !== null && course.value.assistants !== null) {
+            return course.value.teachers.concat(course.value.assistants);
+        }
+    }
+
+    return null;
+});
+
+/**
+ * Join the course as a student.
+ */
+ async function joinCourse(): Promise<void> {
+    // Show a confirmation dialog before joining the course, to prevent accidental clicks
+    confirm.require({
+        message: t('confirmations.joinCourse'),
+        header: t('views.courses.enroll'),
+        accept: (): void => {
+            if (user.value !== null && course.value !== null) {
+                // Join the course
+                studentJoinCourse(course.value.id, user.value.id).then(() => {
+                    // Refresh the user so the course is added to the user's courses
+                    refreshUser();
+                    // Redirect to the dashboard
+                    push({ name: 'dashboard' });
+                });
+            }
+        },
+        reject: () => {},
+    });
+}
+
+onMounted(async () => {
+    await getCourseByID(params.courseId as string);
+
+    console.log(course.value);
+
+    // Get assistants and teachers
+    if (course.value !== null) {
+        await getAssistantsByCourse(course.value.id);
+        await getTeachersByCourse(course.value.id);
+
+        // Set the course's assistants and teachers
+        course.value.assistants = assistants.value ?? [];
+        course.value.teachers = teachers.value ?? [];
+    }
+});
+</script>
+
+<template>
+    <BaseLayout>
+        <!-- Course heading -->
+        <div class="flex justify-content-between align-items-center mb-6">
+            <!-- Course title -->
+            <Title class="m-0">{{ course?.name }}</Title>
+
+            
+            <!-- Button to join the course -->
+            <div class="text-right" v-if="user?.isStudent()">
+                <ConfirmDialog>
+                    <template #container="{ message, acceptCallback, rejectCallback }">
+                        <div class="flex flex-column p-5 surface-overlay border-round" style="max-width: 600px">
+                            <span class="font-bold text-2xl">{{ message.header }}</span>
+                            <p class="mb-4">{{ message.message }}</p>
+                            <div class="flex gap-2 justify-content-end">
+                                <Button outlined rounded @click="rejectCallback">{{ t('primevue.cancel') }}</Button>
+                                <Button @click="acceptCallback" rounded>{{ t('views.courses.enroll') }}</Button>
+                            </div>
+                        </div>
+                    </template>
+                </ConfirmDialog>
+
+                <Button @click="joinCourse" icon="pi pi-sign-in" :label="t('views.courses.enroll')"></Button>
+            </div>
+        </div>
+
+        <!-- Description -->
+        <div class="surface-300 px-4 py-3" v-html="course?.description"></div>
+
+        <!-- Heading for teachers and assistants -->
+        <div class="flex justify-content-between align-items-center my-6">
+            <Title class="m-0">{{ t('views.courses.teachersAndAssistants.title') }}</Title>
+        </div>
+
+        <!-- List with teachers and assistants -->
+        <TeacherAssistantList :course="course" :users="instructors" v-if="course" />
+
+    </BaseLayout>
+</template>
+
+<style scoped lang="scss"></style>

From 79bec467b83f06901b712b752ebab859c6698a44 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 13:28:18 +0200
Subject: [PATCH 06/11] chore: frontend validation of invitation link

---
 backend/api/serializers/course_serializer.py  |  1 +
 frontend/src/types/Course.ts                  |  2 +
 .../src/views/courses/CreateCourseView.vue    |  1 +
 frontend/src/views/courses/JoinCourseView.vue | 95 +++++++++++--------
 .../src/views/courses/UpdateCourseView.vue    |  4 +-
 5 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index 4d00e057..f331ae4d 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -55,6 +55,7 @@ def to_representation(self, instance):
             # Teacher can only see the invitation link if they are part of the course
             if instance.teachers.filter(id=self.context["request"].user.id).exists():
                 data["invitation_link"] = instance.invitation_link
+                data["invitation_link_expires"] = instance.invitation_link_expires
 
         return data
 
diff --git a/frontend/src/types/Course.ts b/frontend/src/types/Course.ts
index cbf4c4f4..f1ab4ad7 100644
--- a/frontend/src/types/Course.ts
+++ b/frontend/src/types/Course.ts
@@ -13,6 +13,7 @@ export class Course {
         public academic_startyear: number,
         public private_course: boolean = false,
         public invitation_link: string | null = null,
+        public invitation_link_expires: Date | null = null,
         public parent_course: Course | null = null,
         public faculty: Faculty | null = null,
         public teachers: Teacher[] | null = null,
@@ -55,6 +56,7 @@ export class Course {
             course.academic_startyear,
             course.private_course,
             course.invitation_link,
+            course.invitation_link_expires,
             course.parent_course,
             faculty,
         );
diff --git a/frontend/src/views/courses/CreateCourseView.vue b/frontend/src/views/courses/CreateCourseView.vue
index eeafbc05..ad57c26b 100644
--- a/frontend/src/views/courses/CreateCourseView.vue
+++ b/frontend/src/views/courses/CreateCourseView.vue
@@ -67,6 +67,7 @@ async function submitCourse(): Promise<void> {
                 getAcademicYear(),
                 form.private,
                 null, // No invitation link
+                null, // No invitation link expiration
                 null, // No parent course
                 form.faculty,
             ),
diff --git a/frontend/src/views/courses/JoinCourseView.vue b/frontend/src/views/courses/JoinCourseView.vue
index 4d91b16d..8dce619b 100644
--- a/frontend/src/views/courses/JoinCourseView.vue
+++ b/frontend/src/views/courses/JoinCourseView.vue
@@ -62,60 +62,77 @@ const instructors = computed(() => {
 }
 
 onMounted(async () => {
-    await getCourseByID(params.courseId as string);
+    await getCourseByID(params.courseId as string);    
 
-    console.log(course.value);
+    // Make sure the invitation link is valid and not expired
+    if (course.value !== null && course.value.invitation_link !== null && course.value.invitation_link_expires !== null) {
 
-    // Get assistants and teachers
-    if (course.value !== null) {
-        await getAssistantsByCourse(course.value.id);
-        await getTeachersByCourse(course.value.id);
+        // Get the expiration date and the current date
+        const expirationDate = new Date(course.value.invitation_link_expires);
+        const currentDate = new Date();
+
+        // If the expiration date is in the past, or the invitation link does not match, redirect to the dashboard
+        if (expirationDate <= currentDate || params.invitationLink !== course.value.invitation_link) {
+            // Redirect to the dashboard
+            push({ name: 'dashboard' });
+
+        }else {
+            // Get assistants and teachers
+            if (course.value !== null) {
+                await getAssistantsByCourse(course.value.id);
+                await getTeachersByCourse(course.value.id);
 
-        // Set the course's assistants and teachers
-        course.value.assistants = assistants.value ?? [];
-        course.value.teachers = teachers.value ?? [];
+                // Set the course's assistants and teachers
+                course.value.assistants = assistants.value ?? [];
+                course.value.teachers = teachers.value ?? [];
+            }
+        }
+    }else{
+        // Redirect to the dashboard, meaning the course has no invitation link set
+        push({ name: 'dashboard' });
     }
 });
 </script>
 
 <template>
     <BaseLayout>
-        <!-- Course heading -->
-        <div class="flex justify-content-between align-items-center mb-6">
-            <!-- Course title -->
-            <Title class="m-0">{{ course?.name }}</Title>
-
-            
-            <!-- Button to join the course -->
-            <div class="text-right" v-if="user?.isStudent()">
-                <ConfirmDialog>
-                    <template #container="{ message, acceptCallback, rejectCallback }">
-                        <div class="flex flex-column p-5 surface-overlay border-round" style="max-width: 600px">
-                            <span class="font-bold text-2xl">{{ message.header }}</span>
-                            <p class="mb-4">{{ message.message }}</p>
-                            <div class="flex gap-2 justify-content-end">
-                                <Button outlined rounded @click="rejectCallback">{{ t('primevue.cancel') }}</Button>
-                                <Button @click="acceptCallback" rounded>{{ t('views.courses.enroll') }}</Button>
+        <div v-if="course">
+            <!-- Course heading -->
+            <div class="flex justify-content-between align-items-center mb-6">
+                <!-- Course title -->
+                <Title class="m-0">{{ course?.name }}</Title>
+
+                
+                <!-- Button to join the course -->
+                <div class="text-right" v-if="user?.isStudent()">
+                    <ConfirmDialog>
+                        <template #container="{ message, acceptCallback, rejectCallback }">
+                            <div class="flex flex-column p-5 surface-overlay border-round" style="max-width: 600px">
+                                <span class="font-bold text-2xl">{{ message.header }}</span>
+                                <p class="mb-4">{{ message.message }}</p>
+                                <div class="flex gap-2 justify-content-end">
+                                    <Button outlined rounded @click="rejectCallback">{{ t('primevue.cancel') }}</Button>
+                                    <Button @click="acceptCallback" rounded>{{ t('views.courses.enroll') }}</Button>
+                                </div>
                             </div>
-                        </div>
-                    </template>
-                </ConfirmDialog>
+                        </template>
+                    </ConfirmDialog>
 
-                <Button @click="joinCourse" icon="pi pi-sign-in" :label="t('views.courses.enroll')"></Button>
+                    <Button @click="joinCourse" icon="pi pi-sign-in" :label="t('views.courses.enroll')"></Button>
+                </div>
             </div>
-        </div>
-
-        <!-- Description -->
-        <div class="surface-300 px-4 py-3" v-html="course?.description"></div>
 
-        <!-- Heading for teachers and assistants -->
-        <div class="flex justify-content-between align-items-center my-6">
-            <Title class="m-0">{{ t('views.courses.teachersAndAssistants.title') }}</Title>
-        </div>
+            <!-- Description -->
+            <div class="surface-300 px-4 py-3" v-html="course?.description"></div>
 
-        <!-- List with teachers and assistants -->
-        <TeacherAssistantList :course="course" :users="instructors" v-if="course" />
+            <!-- Heading for teachers and assistants -->
+            <div class="flex justify-content-between align-items-center my-6">
+                <Title class="m-0">{{ t('views.courses.teachersAndAssistants.title') }}</Title>
+            </div>
 
+            <!-- List with teachers and assistants -->
+            <TeacherAssistantList :course="course" :users="instructors" v-if="course" />
+        </div>
     </BaseLayout>
 </template>
 
diff --git a/frontend/src/views/courses/UpdateCourseView.vue b/frontend/src/views/courses/UpdateCourseView.vue
index 8d9de5da..778501fe 100644
--- a/frontend/src/views/courses/UpdateCourseView.vue
+++ b/frontend/src/views/courses/UpdateCourseView.vue
@@ -74,10 +74,12 @@ const submitCourse = async (): Promise<void> => {
             new Course(
                 course.value.id,
                 form.name,
-                form.description,
                 form.excerpt,
+                form.description,
                 course.value.academic_startyear,
                 form.private,
+                course.value.invitation_link,
+                course.value.invitation_link_expires,
                 course.value.parent_course,
                 form.faculty,
             ),

From 7e24e69ff4c3ff62212485c882eba18b6244d811 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 13:45:27 +0200
Subject: [PATCH 07/11] chore: cleanup share dialog

---
 frontend/src/assets/lang/app/en.json          |  4 ++--
 frontend/src/assets/lang/app/nl.json          |  4 ++--
 .../components/courses/ShareCourseButton.vue  | 21 ++++---------------
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index 8138e5dd..d7f32a55 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -137,7 +137,7 @@
                 "placeholder": "Find a course using the registration link"
             },
             "share": {
-                "title": "Create invitation link",
+                "title": "Activate invitation link",
                 "duration": "Validity period link (in days):",
                 "link": "Invitation link:"
             }
@@ -244,7 +244,7 @@
         "cloneCourse": "Are you sure you want to clone this coure? This will create the same course for the next academic year.",
         "joinCourse": "Are you sure you want to enroll in this course? This will give you access to all projects, assignments, ...",
         "leaveCourse": "Are you sure you want to leave this course? You will no longer have access to this course.",
-        "shareCourse": "By creating an invitation link, you allow students in possession of this link to enroll in this course. Please copy the generated link, only when you click on \"Create invitation link\" will this link become valid."
+        "shareCourse": "By activating the invitation link, you allow students in possession of this link to enroll in this course. Please copy the generated link, only when you click on \"Activate invitation link\" will this link become active."
     },
     "protectedCourses": {
         "screen1": {
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 8c2e49a8..38a60e77 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -134,7 +134,7 @@
                 "placeholder": "Zoek een vak gebruik makende van een uitnodigingslink"
             },
             "share": {
-                "title": "Creëer invitatielink",
+                "title": "Activeer invitatielink",
                 "duration": "Geldigheidsduur link (in dagen):",
                 "link": "Invitatielink:"
             }
@@ -241,7 +241,7 @@
         "cloneCourse": "Ben je zeker dat je dit vak wil klonen? Dit zal hetzelfde vak aanmaken voor het volgende academiejaar.",
         "joinCourse": "Ben je zeker dat je jezelf wil inschrijven voor dit vak? Dit zal je toegang geven tot alle projecten, opdrachten, ...",
         "leaveCourse": "Ben je zeker dat je dit vak wil verlaten? Je zal geen toegang meer hebben tot dit vak.",
-        "shareCourse": "Door het creëren van een invitatielink staat u studenten in bezit van deze link toe zich in te schrijven voor dit vak. Gelieve de gegenereerde link te kopiëren, pas wanneer u op \"Creëer invitatielink\" klikt zal deze link geldig worden."
+        "shareCourse": "Door het activeren van de invitatielink staat u studenten in bezit van deze link toe zich in te schrijven voor dit vak. Gelieve de gegenereerde link te kopiëren, pas wanneer u op \"Activeer invitatielink\" klikt zal deze link actief worden."
     },
     "protectedCourses": {
         "screen1": {
diff --git a/frontend/src/components/courses/ShareCourseButton.vue b/frontend/src/components/courses/ShareCourseButton.vue
index 0dc3bda9..de88906c 100644
--- a/frontend/src/components/courses/ShareCourseButton.vue
+++ b/frontend/src/components/courses/ShareCourseButton.vue
@@ -22,18 +22,11 @@ const displayShareCourse = ref(false);
 /* Number of days the invitation link is valid */
 const linkDuration = ref<number>(7);
 
-/**
- * Opens the dialog to share the course, and generates a random invitation link.
- */
-function openShareCourseDialog(): void {
-    displayShareCourse.value = true;
-}
-
 /**
  * Activates the invitation link for the course, with the specified duration.
  */
 async function handleShare(): Promise<void> {
-    // Save the invitation link for the course
+    // Activates the invitation link by setting an expiration date
     await activateInvitationLink(props.course.id, linkDuration.value);
 
     // Close the dialog
@@ -46,13 +39,7 @@ async function handleShare(): Promise<void> {
 function copyToClipboard(): void {
     if (props.course.invitation_link){
         navigator.clipboard
-            .writeText(invitationLink.value)
-            .then(() => {
-                console.log('Link copied to clipboard');
-            })
-            .catch((err) => {
-                console.error('Failed to copy text: ', err);
-            });
+            .writeText(invitationLink.value);
     }
 }
 
@@ -72,7 +59,7 @@ const invitationLink = computed(() => {
             icon-pos="right"
             class="custom-button"
             style="height: 51px; width: 51px"
-            @click="openShareCourseDialog"
+            @click="displayShareCourse = true"
             v-if="props.course.private_course"
         />
         <Dialog
@@ -102,7 +89,7 @@ const invitationLink = computed(() => {
                 <div class="grid">
                     <div class="flex align-items-center col-12 gap-2">
                         <label for="link">{{ t('views.courses.share.link') }}</label>
-                        <InputText v-model="invitationLink" disabled style="width: 70%" />
+                        <InputText v-model="invitationLink" disabled style="width: 50%" />
                         <Button @click="copyToClipboard()" icon="pi pi-copy" class="p-button-text no-outline" />
                     </div>
                 </div>

From 9a08ea28a2eb6de96f77ff4c4ea8fa59df6d8b49 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 15:24:18 +0200
Subject: [PATCH 08/11] fix: linting

---
 .../components/courses/ShareCourseButton.vue  |  8 ++-
 frontend/src/router/router.ts                 |  8 ++-
 frontend/src/views/courses/JoinCourseView.vue | 52 ++++++++++---------
 3 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/courses/ShareCourseButton.vue b/frontend/src/components/courses/ShareCourseButton.vue
index de88906c..288ba277 100644
--- a/frontend/src/components/courses/ShareCourseButton.vue
+++ b/frontend/src/components/courses/ShareCourseButton.vue
@@ -37,9 +37,8 @@ async function handleShare(): Promise<void> {
  * Copies the invitation link to the clipboard.
  */
 function copyToClipboard(): void {
-    if (props.course.invitation_link){
-        navigator.clipboard
-            .writeText(invitationLink.value);
+    if (props.course.invitation_link !== null) {
+        navigator.clipboard.writeText(invitationLink.value);
     }
 }
 
@@ -47,9 +46,8 @@ function copyToClipboard(): void {
  * Returns the course's invitation link, formatted as the full URL.
  */
 const invitationLink = computed(() => {
-    return `${window.location}/join/${props.course.invitation_link}`;
+    return `${window.location.toString()}/join/${props.course.invitation_link}`;
 });
-
 </script>
 
 <template>
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index 5c071786..7ba5863d 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -54,11 +54,9 @@ const routes: RouteRecordRaw[] = [
                 children: [
                     { path: '', component: CourseView, name: 'course' },
                     { path: 'edit', component: UpdateCourseView, name: 'course-edit' },
-                    { 
-                        path: 'join', 
-                        children: [
-                            {path: ':invitationLink', component: JoinCourseView, name: 'course-join'},
-                        ]
+                    {
+                        path: 'join',
+                        children: [{ path: ':invitationLink', component: JoinCourseView, name: 'course-join' }],
                     },
                     // Projects
                     {
diff --git a/frontend/src/views/courses/JoinCourseView.vue b/frontend/src/views/courses/JoinCourseView.vue
index 8dce619b..ec50dbbc 100644
--- a/frontend/src/views/courses/JoinCourseView.vue
+++ b/frontend/src/views/courses/JoinCourseView.vue
@@ -41,7 +41,7 @@ const instructors = computed(() => {
 /**
  * Join the course as a student.
  */
- async function joinCourse(): Promise<void> {
+async function joinCourse(): Promise<void> {
     // Show a confirmation dialog before joining the course, to prevent accidental clicks
     confirm.require({
         message: t('confirmations.joinCourse'),
@@ -62,33 +62,36 @@ const instructors = computed(() => {
 }
 
 onMounted(async () => {
-    await getCourseByID(params.courseId as string);    
+    await getCourseByID(params.courseId as string);
 
     // Make sure the invitation link is valid and not expired
-    if (course.value !== null && course.value.invitation_link !== null && course.value.invitation_link_expires !== null) {
-
-        // Get the expiration date and the current date
-        const expirationDate = new Date(course.value.invitation_link_expires);
-        const currentDate = new Date();
-
-        // If the expiration date is in the past, or the invitation link does not match, redirect to the dashboard
-        if (expirationDate <= currentDate || params.invitationLink !== course.value.invitation_link) {
-            // Redirect to the dashboard
-            push({ name: 'dashboard' });
-
-        }else {
-            // Get assistants and teachers
-            if (course.value !== null) {
-                await getAssistantsByCourse(course.value.id);
-                await getTeachersByCourse(course.value.id);
-
-                // Set the course's assistants and teachers
-                course.value.assistants = assistants.value ?? [];
-                course.value.teachers = teachers.value ?? [];
+    if (course.value !== null) {
+        if (course.value.invitation_link !== null && course.value.invitation_link_expires !== null) {
+            // Get the expiration date and the current date
+            const expirationDate = new Date(course.value.invitation_link_expires);
+            const currentDate = new Date();
+
+            // If the expiration date is in the past, or the invitation link does not match, redirect to the dashboard
+            if (expirationDate <= currentDate || params.invitationLink !== course.value.invitation_link) {
+                // Redirect to the dashboard
+                push({ name: 'dashboard' });
+            } else {
+                // Get assistants and teachers
+                if (course.value !== null) {
+                    await getAssistantsByCourse(course.value.id);
+                    await getTeachersByCourse(course.value.id);
+
+                    // Set the course's assistants and teachers
+                    course.value.assistants = assistants.value ?? [];
+                    course.value.teachers = teachers.value ?? [];
+                }
             }
+        } else {
+            // Redirect to the dashboard, meaning the course has no invitation link set
+            push({ name: 'dashboard' });
         }
-    }else{
-        // Redirect to the dashboard, meaning the course has no invitation link set
+    } else {
+        // Redirect to the dashboard, meaning the course does not exist
         push({ name: 'dashboard' });
     }
 });
@@ -102,7 +105,6 @@ onMounted(async () => {
                 <!-- Course title -->
                 <Title class="m-0">{{ course?.name }}</Title>
 
-                
                 <!-- Button to join the course -->
                 <div class="text-right" v-if="user?.isStudent()">
                     <ConfirmDialog>

From 0ac235a670b138d8b960bb5c616b21e2e3dc6f3d Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 16:06:49 +0200
Subject: [PATCH 09/11] fix: cleanup

---
 backend/api/serializers/course_serializer.py  |  5 +----
 frontend/src/views/courses/JoinCourseView.vue | 15 +++++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index f331ae4d..ae3b91df 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -98,9 +98,6 @@ def create(self, validated_data):
         if faculty is not None:
             course.faculty = faculty
             course.save()
-        else:
-            course.faculty = "noo"
-            course.save()
 
         return course
 
@@ -139,7 +136,7 @@ def create(self, validated_data):
 
         course: Course = self.context["course"]
 
-        # Save the expiration date as the current date + the invite link expires parameter in days.
+        # Save the expiration date as the current date + the invite link duration parameter in days.
         course.invitation_link_expires = timezone.now() + timedelta(days=validated_data["link_duration"])
         course.save()
 
diff --git a/frontend/src/views/courses/JoinCourseView.vue b/frontend/src/views/courses/JoinCourseView.vue
index ec50dbbc..659845e3 100644
--- a/frontend/src/views/courses/JoinCourseView.vue
+++ b/frontend/src/views/courses/JoinCourseView.vue
@@ -77,22 +77,17 @@ onMounted(async () => {
                 push({ name: 'dashboard' });
             } else {
                 // Get assistants and teachers
-                if (course.value !== null) {
-                    await getAssistantsByCourse(course.value.id);
-                    await getTeachersByCourse(course.value.id);
+                await getAssistantsByCourse(course.value.id);
+                await getTeachersByCourse(course.value.id);
 
-                    // Set the course's assistants and teachers
-                    course.value.assistants = assistants.value ?? [];
-                    course.value.teachers = teachers.value ?? [];
-                }
+                // Set the course's assistants and teachers
+                course.value.assistants = assistants.value ?? [];
+                course.value.teachers = teachers.value ?? [];
             }
         } else {
             // Redirect to the dashboard, meaning the course has no invitation link set
             push({ name: 'dashboard' });
         }
-    } else {
-        // Redirect to the dashboard, meaning the course does not exist
-        push({ name: 'dashboard' });
     }
 });
 </script>

From c89a0d70176d8cb3d05388a8a6f887377b8411f4 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 4 May 2024 16:15:10 +0200
Subject: [PATCH 10/11] fix: service test

---
 frontend/src/test/unit/types/course.test.ts | 1 +
 frontend/src/test/unit/types/data.ts        | 1 +
 frontend/src/test/unit/types/helper.ts      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/frontend/src/test/unit/types/course.test.ts b/frontend/src/test/unit/types/course.test.ts
index 8ea426bd..6eeff8c1 100644
--- a/frontend/src/test/unit/types/course.test.ts
+++ b/frontend/src/test/unit/types/course.test.ts
@@ -16,6 +16,7 @@ describe('course type', () => {
         expect(course.academic_startyear).toBe(courseData.academic_startyear);
         expect(course.private_course).toBe(courseData.private_course);
         expect(course.invitation_link).toBe(courseData.invitation_link);
+        expect(course.invitation_link_expires).toBe(courseData.invitation_link_expires);
         expect(course.parent_course).toBe(courseData.parent_course);
         expect(course.faculty).toBe(courseData.faculty);
         expect(course.teachers).toStrictEqual(courseData.teachers);
diff --git a/frontend/src/test/unit/types/data.ts b/frontend/src/test/unit/types/data.ts
index 9dab032b..307e73bf 100644
--- a/frontend/src/test/unit/types/data.ts
+++ b/frontend/src/test/unit/types/data.ts
@@ -67,6 +67,7 @@ export const courseData = {
     academic_startyear: 2024,
     private_course: false,
     invitation_link: null,
+    invitation_link_expires: null,
     parent_course: null,
     faculty: null,
     teachers: [],
diff --git a/frontend/src/test/unit/types/helper.ts b/frontend/src/test/unit/types/helper.ts
index 450eb419..97604c47 100644
--- a/frontend/src/test/unit/types/helper.ts
+++ b/frontend/src/test/unit/types/helper.ts
@@ -92,6 +92,7 @@ export function createCourse(courseData: any): Course {
         courseData.academic_startyear,
         courseData.private_course,
         courseData.invitation_link,
+        courseData.invitation_link_expires,
         courseData.parent_course,
         courseData.faculty,
         courseData.teachers.slice(),

From 264950c3351f04b0b846df66ecda8552a4ef62a0 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sun, 5 May 2024 13:27:57 +0200
Subject: [PATCH 11/11] fix: translations

---
 frontend/src/assets/lang/app/en.json | 2 +-
 frontend/src/assets/lang/app/nl.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index d7f32a55..d2f951a7 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -138,7 +138,7 @@
             },
             "share": {
                 "title": "Activate invitation link",
-                "duration": "Validity period link (in days):",
+                "duration": "Validity period of link (in days):",
                 "link": "Invitation link:"
             }
         }
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 38a60e77..92456aa0 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -135,7 +135,7 @@
             },
             "share": {
                 "title": "Activeer invitatielink",
-                "duration": "Geldigheidsduur link (in dagen):",
+                "duration": "Geldigheidsduur van link (in dagen):",
                 "link": "Invitatielink:"
             }
       }