From ea1cc042edf208999e69e1e4067e4e13172607f2 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 11:35:35 +0200
Subject: [PATCH 1/6] chore: improved layout

---
 frontend/src/assets/img/logo-tiny.png         | Bin 0 -> 6363 bytes
 frontend/src/assets/lang/nl.json              |   5 +-
 .../src/components/courses/CourseList.vue     |   2 +-
 frontend/src/components/layout/BaseLayout.vue |   2 +-
 frontend/src/components/layout/Header.vue     |  61 +++++++++++++++---
 .../src/components/projects/ProjectCard.vue   |   2 +-
 .../projects/ProjectCreateButton.vue          |  60 +++++++++--------
 frontend/src/router/router.ts                 |   6 +-
 frontend/src/views/calendar/CalendarView.vue  |   4 +-
 .../dashboard/roles/TeacherDashboardView.vue  |   2 +-
 10 files changed, 97 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/assets/img/logo-tiny.png

diff --git a/frontend/src/assets/img/logo-tiny.png b/frontend/src/assets/img/logo-tiny.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2bd9887aa4a981f8e2795c9a9c913af0b6ddcd6
GIT binary patch
literal 6363
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
R#Xlqf7B_8f;I4T+{vWw#ZAkzC

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index 2556ed9e..a4a6d000 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -101,8 +101,9 @@
         }
     },
     "components": {
-        "buttons": {
-            "academic_year": "Academiejaar {0}"
+        "button": {
+            "academic_year": "Academiejaar {0}",
+            "create_project": "Maak een nieuw project"
         },
         "card": {
             "open": "Details"
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
index 5cc39c62..f10ff35d 100644
--- a/frontend/src/components/courses/CourseList.vue
+++ b/frontend/src/components/courses/CourseList.vue
@@ -26,7 +26,7 @@ const { t } = useI18n();
         <template v-if="courses !== null">
             <template v-if="courses.length > 0">
                 <div
-                    class="col-12 md:col-6 lg:col-4"
+                    class="col-12 lg:col-6"
                     :class="'xl:col-' + 12 / cols"
                     v-for="course in courses"
                     :key="course.id"
diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue
index deac8a68..27f27830 100644
--- a/frontend/src/components/layout/BaseLayout.vue
+++ b/frontend/src/components/layout/BaseLayout.vue
@@ -5,7 +5,7 @@ import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <template>
-    <div id="layout" class="w-12 lg:w-9 mx-auto">
+    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto">
         <Header />
 
         <Body id="body">
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 47d0682e..19d89972 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import en from '@/assets/img/logo-en.png';
 import nl from '@/assets/img/logo-nl.png';
+import tiny from '@/assets/img/logo-tiny.png';
 import Button from 'primevue/button';
 import LanguageSelector from '@/components/LanguageSelector.vue';
+import RoleSelector from '@/components/RoleSelector.vue';
+import Sidebar from 'primevue/sidebar';
 import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useAuthStore } from '@/store/authentication.store.ts';
 import { storeToRefs } from 'pinia';
-import RoleSelector from '@/components/RoleSelector.vue';
 
 /* Composables */
 const { user, isAuthenticated } = storeToRefs(useAuthStore());
 const { t, locale } = useI18n();
 
-/* Localization variables */
+/* State */
+const showSidebar = ref(false);
+
 const logo = computed(() => {
     if (locale.value === 'nl') {
         return nl;
@@ -49,14 +53,21 @@ const items = computed(() => [
 
 <template>
     <div class="flex w-full">
-        <div class="w-full lg:w-2 flex align-items-center p-3 lg:pl-0">
-            <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
+        <!-- Logo -->
+        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3 ">
+            <RouterLink :to="'/'">
+                <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
+            </RouterLink>
         </div>
+        <!-- Content -->
         <div class="flex flex-column w-full lg:w-10">
+            <!-- Header -->
             <div id="header" class="w-full flex text-white p-4">
-                <div class="flex align-items-end">
+                <!-- Title -->
+                <div class="hidden md:flex align-items-end">
                     <h1 class="text-white m-0">Ypovoli</h1>
                 </div>
+                <!-- User information -->
                 <div class="text-right ml-auto text-sm flex flex-column align-items-end gap-3">
                     <div class="flex align-items-center gap-3">
                         <template v-if="user !== null && user.hasMultipleRoles()">
@@ -65,12 +76,19 @@ const items = computed(() => [
                         </template>
                         <!-- Language selector -->
                         <LanguageSelector />
+                        <!-- Menu selector -->
+                        <span @click="showSidebar = !showSidebar" class="md:hidden pi pi-bars cursor-pointer" />
                     </div>
                     <div>
                         <!-- User information -->
                         <template v-if="user !== null">
                             <RouterLink :to="{ name: 'logout' }" class="text-white">
-                                {{ t('layout.header.user', [user.getFullName()]) }}
+                                <span class="hidden md:inline">
+                                    {{ t('layout.header.user', [user.getFullName()]) }}
+                                </span>
+                                <span class="inline md:hidden">
+                                    {{ user.getFullName() }}
+                                </span>
                             </RouterLink>
                         </template>
                         <!-- Login button -->
@@ -88,7 +106,7 @@ const items = computed(() => [
                 </div>
             </div>
             <!-- Navigation -->
-            <div id="navigation" class="w-full h-full flex">
+            <div id="navigation" class="hidden md:flex w-full h-full">
                 <template v-if="isAuthenticated">
                     <RouterLink :to="{ name: item.route }" v-for="item in items" :key="item.route" class="nav-item">
                         <div
@@ -101,6 +119,33 @@ const items = computed(() => [
                 </template>
             </div>
         </div>
+        <Sidebar v-model:visible="showSidebar">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-column h-full">
+                    <div class="flex align-items-center justify-content-between p-4 pb-2 flex-shrink-0">
+                        <span class="inline-flex align-items-center gap-2">
+                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2"/> <span class="font-bold text-2xl text-primary">Ypovoli</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"/>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto px-2">
+                        <ul class="list-none p-0 m-0">
+                            <li v-for="item in items">
+                                <RouterLink :to="{name: item.route}"
+                                            @click="closeCallback"
+                                            class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
+                                            v-ripple>
+                                    <i class="mr-2" :class="'pi pi-' + item.icon"/>
+                                    <span class="font-medium">{{ item.label }}</span>
+                                </RouterLink>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </template>
+        </Sidebar>
     </div>
 </template>
 
diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue
index d462a283..f2832c15 100644
--- a/frontend/src/components/projects/ProjectCard.vue
+++ b/frontend/src/components/projects/ProjectCard.vue
@@ -52,7 +52,7 @@ const { t } = useI18n();
         <template #footer>
             <RouterLink
                 :to="{
-                    name: 'courseProject',
+                    name: 'course-project',
                     params: {
                         courseId: course.id,
                         projectId: project.id,
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index 164e5fba..f1597ba8 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -12,7 +12,7 @@ const { t } = useI18n();
 const { push } = useRouter();
 
 /* Props */
-const props = defineProps<{ courses: Course[] }>();
+const props = defineProps<{ courses: Course[], label?: string, severity?: string }>();
 
 /* Dialog state to select the course you want to create a project for */
 const displayCourseSelection = ref(false);
@@ -25,34 +25,38 @@ const createProjectForCourse = (courseId: string): void => {
 </script>
 
 <template>
-    <!-- Button to create a new project -->
-    <Button
-        v-if="props.courses && props.courses.length > 0"
-        :icon="PrimeIcons.PLUS"
-        icon-pos="right"
-        class="custom-button"
-        @click="displayCourseSelection = true"
-    />
-    <!-- Dialog to select the course you want to create a project for -->
-    <Dialog
-        v-model:visible="displayCourseSelection"
-        modal
-        :draggable="false"
-        :contentStyle="{ width: '50vw' }"
-        :header="t('views.dashboard.select_course')"
-    >
-        <!-- List of courses to select from-->
-        <div v-if="props.courses && props.courses.length > 0">
-            <div
-                v-for="course in props.courses"
-                :key="course.id"
-                class="course-item"
-                @click="createProjectForCourse(course.id)"
-            >
-                <span class="course-name">{{ course.name }}</span>
+    <div>
+        <!-- Button to create a new project -->
+        <Button
+            v-if="props.courses && props.courses.length > 0"
+            :icon="PrimeIcons.PLUS"
+            icon-pos="right"
+            :label="label ?? ''"
+            :severity="severity ?? 'primary'"
+            class="custom-button"
+            @click="displayCourseSelection = true"
+        />
+        <!-- Dialog to select the course you want to create a project for -->
+        <Dialog
+            v-model:visible="displayCourseSelection"
+            modal
+            :draggable="false"
+            :contentStyle="{ width: '50vw' }"
+            :header="t('views.dashboard.select_course')"
+        >
+            <!-- List of courses to select from-->
+            <div v-if="props.courses && props.courses.length > 0">
+                <div
+                    v-for="course in props.courses"
+                    :key="course.id"
+                    class="course-item"
+                    @click="createProjectForCourse(course.id)"
+                >
+                    <span class="course-name">{{ course.name }}</span>
+                </div>
             </div>
-        </div>
-    </Dialog>
+        </Dialog>
+    </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
index deda535e..8c5aea6e 100644
--- a/frontend/src/router/router.ts
+++ b/frontend/src/router/router.ts
@@ -49,15 +49,15 @@ const routes: RouteRecordRaw[] = [
                     { path: 'edit', component: UpdateCourseView, name: 'course-edit' },
                     // Projects
                     {
-                        path: 'courseProjects',
+                        path: 'projects',
                         children: [
-                            { path: '', component: Dummy, name: 'courseProjects' },
+                            { path: '', component: Dummy, name: 'course-projects' },
                             { path: 'create', component: CreateProjectView, name: 'project-create' },
                             // Single project
                             {
                                 path: ':projectId',
                                 children: [
-                                    { path: '', component: SingleProjectView, name: 'courseProject' },
+                                    { path: '', component: SingleProjectView, name: 'course-project' },
                                     { path: 'edit', component: Dummy, name: 'project-edit' },
                                     { path: 'groups', component: Dummy, name: 'project-groups' },
                                     { path: 'submit', component: Dummy, name: 'project-submit' },
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index 0392bc33..a2d823ab 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -196,7 +196,7 @@ watch(selectedDate, (date) => {
                                 >
                                     <RouterLink
                                         :to="{
-                                            name: 'courseProject',
+                                            name: 'course-project',
                                             params: {
                                                 courseId: project.course?.id,
                                                 projectId: project.id,
@@ -220,7 +220,7 @@ watch(selectedDate, (date) => {
 
                     <template v-if="user?.isTeacher() || user?.isAssistant()">
                         <!-- Add project button -->
-                        <ProjectCreateButton :courses="coursesWithProjectCreationPossibility" />
+                        <ProjectCreateButton severity="secondary" :courses="coursesWithProjectCreationPossibility" />
                     </template>
                 </div>
             </div>
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index aaa02c18..83059a7e 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -71,7 +71,7 @@ watch(
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
         <!-- Create project button -->
-        <ProjectCreateButton :courses="filteredCourses" />
+        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.create_project')" />
     </div>
     <!-- Project list body -->
     <ProjectList :courses="filteredCourses" />

From e594692bb087259c792c244a4741e1923bd634b6 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 11:36:42 +0200
Subject: [PATCH 2/6] chore: refactored teacher command

---
 backend/api/management/commands/make_teacher.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/api/management/commands/make_teacher.py b/backend/api/management/commands/make_teacher.py
index a44d7e58..90502d63 100644
--- a/backend/api/management/commands/make_teacher.py
+++ b/backend/api/management/commands/make_teacher.py
@@ -19,6 +19,6 @@ def handle(self, *args, **options):
             return
 
         user = user.get()
-        Teacher(user_ptr=user).save_base(raw=True)
+        Teacher.create(user)
 
         self.stdout.write(self.style.SUCCESS('Successfully made the user teacher!'))

From 6f3468ee43796175a88ae86405bbeb9f260a88df Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 15:50:36 +0200
Subject: [PATCH 3/6] chore: better calendar, form layouts

---
 frontend/src/assets/lang/nl.json              |   7 +-
 .../components/courses/CourseDetailCard.vue   |   8 +-
 .../src/components/courses/CourseList.vue     |  19 +-
 frontend/src/components/layout/BaseLayout.vue |   3 +-
 frontend/src/components/layout/Footer.vue     |   2 +-
 frontend/src/components/layout/Header.vue     |  28 ++-
 .../projects/ProjectCreateButton.vue          |  61 ++---
 .../src/components/projects/ProjectList.vue   |   2 +-
 .../composables/services/students.service.ts  |   5 +-
 .../composables/services/teachers.service.ts  |   7 +-
 frontend/src/main.scss                        |   5 +
 .../src/views/authentication/LoginView.vue    |  57 ++---
 frontend/src/views/calendar/CalendarView.vue  |  78 ++++---
 .../src/views/courses/SearchCourseView.vue    |   2 +-
 .../dashboard/roles/StudentDashboardView.vue  |   2 +-
 .../dashboard/roles/TeacherDashboardView.vue  |   6 +-
 .../src/views/projects/CreateProjectView.vue  | 208 +++++++++---------
 frontend/src/views/projects/ProjectView.vue   |   2 +-
 18 files changed, 267 insertions(+), 235 deletions(-)

diff --git a/frontend/src/assets/lang/nl.json b/frontend/src/assets/lang/nl.json
index a4a6d000..d2b514a1 100644
--- a/frontend/src/assets/lang/nl.json
+++ b/frontend/src/assets/lang/nl.json
@@ -103,10 +103,11 @@
     "components": {
         "button": {
             "academic_year": "Academiejaar {0}",
-            "create_project": "Maak een nieuw project"
+            "createProject": "Maak een nieuw project"
         },
         "card": {
-            "open": "Details"
+            "open": "Details",
+            "newProject": "Nieuw Project"
         },
         "submission" : "Indienen"
     },
@@ -148,7 +149,7 @@
         "am": "voormiddag",
         "apply": "Toepassen",
         "cancel": "Annuleer",
-        "choose": "Kies",
+        "choose": "Kies een bestand",
         "chooseDate": "Kies datum",
         "chooseMonth": "Kies maand",
         "chooseYear": "Kies jaar",
diff --git a/frontend/src/components/courses/CourseDetailCard.vue b/frontend/src/components/courses/CourseDetailCard.vue
index fae89e68..f19cd6cc 100644
--- a/frontend/src/components/courses/CourseDetailCard.vue
+++ b/frontend/src/components/courses/CourseDetailCard.vue
@@ -36,9 +36,11 @@ const { getRandomImport } = useGlob(import.meta.glob('@/assets/img/placeholders/
             {{ course.getExcerpt() }}
         </template>
         <template #footer>
-            <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
-                <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
-            </RouterLink>
+            <slot :course="course" name="footer">
+                <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                </RouterLink>
+            </slot>
         </template>
     </Card>
 </template>
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
index f10ff35d..ec9009a9 100644
--- a/frontend/src/components/courses/CourseList.vue
+++ b/frontend/src/components/courses/CourseList.vue
@@ -4,6 +4,8 @@ import CourseDetailCard from '@/components/courses/CourseDetailCard.vue';
 import CourseGeneralCard from '@/components/courses/CourseGeneralCard.vue';
 import { type Course } from '@/types/Course.ts';
 import { useI18n } from 'vue-i18n';
+import { PrimeIcons } from 'primevue/api';
+import Button from 'primevue/button';
 
 /* Props */
 interface Props {
@@ -25,13 +27,16 @@ const { t } = useI18n();
     <div class="grid align-items-stretch">
         <template v-if="courses !== null">
             <template v-if="courses.length > 0">
-                <div
-                    class="col-12 lg:col-6"
-                    :class="'xl:col-' + 12 / cols"
-                    v-for="course in courses"
-                    :key="course.id"
-                >
-                    <CourseDetailCard :course="course" v-if="detail" />
+                <div class="col-12 md:col-6" :class="'xl:col-' + 12 / cols" v-for="course in courses" :key="course.id">
+                    <CourseDetailCard :course="course" v-if="detail">
+                        <template #footer="{ course }">
+                            <slot name="footer" :course="course">
+                                <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
+                                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                                </RouterLink>
+                            </slot>
+                        </template>
+                    </CourseDetailCard>
                     <CourseGeneralCard class="h-full" :course="course" v-else />
                 </div>
             </template>
diff --git a/frontend/src/components/layout/BaseLayout.vue b/frontend/src/components/layout/BaseLayout.vue
index 27f27830..c15fcf32 100644
--- a/frontend/src/components/layout/BaseLayout.vue
+++ b/frontend/src/components/layout/BaseLayout.vue
@@ -5,7 +5,7 @@ import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <template>
-    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto">
+    <div id="layout" class="w-12 lg:w-11 xl:w-9 mx-auto h-100">
         <Header />
 
         <Body id="body">
@@ -19,6 +19,7 @@ import Footer from '@/components/layout/Footer.vue';
 <style scoped>
 #layout {
     max-width: 1460px;
+    height: 100vh;
 
     #body {
         min-height: calc(100vh - (180px + 175px));
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index 3ac8e1bc..d229e1ed 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -11,7 +11,7 @@ const logo: Record<string, string> = { nl, en };
 </script>
 
 <template>
-    <div id="footer" class="p-4 py-3">
+    <div id="footer" class="p-4 py-3 mt-auto">
         <div class="w-full lg:w-2 flex align-items-center py-3">
             <img class="w-full max-w-9rem" :src="logo[locale]" :alt="t('layout.header.logo')" />
         </div>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index 19d89972..973e5261 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -54,7 +54,7 @@ const items = computed(() => [
 <template>
     <div class="flex w-full">
         <!-- Logo -->
-        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3 ">
+        <div class="lg:w-2 lg:pl-0 flex align-items-center p-3">
             <RouterLink :to="'/'">
                 <img class="w-full max-w-9rem" :src="logo" :alt="t('layout.header.logo')" />
             </RouterLink>
@@ -124,20 +124,30 @@ const items = computed(() => [
                 <div class="flex flex-column h-full">
                     <div class="flex align-items-center justify-content-between p-4 pb-2 flex-shrink-0">
                         <span class="inline-flex align-items-center gap-2">
-                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2"/> <span class="font-bold text-2xl text-primary">Ypovoli</span>
+                            <img :alt="t('layout.header.logo')" :src="tiny" class="w-2rem mr-2" />
+                            <span class="font-bold text-2xl text-primary">Ypovoli</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"/>
+                            <Button
+                                type="button"
+                                @click="closeCallback"
+                                icon="pi pi-times"
+                                rounded
+                                outlined
+                                class="h-2rem w-2rem"
+                            />
                         </span>
                     </div>
                     <div class="overflow-y-auto px-2">
                         <ul class="list-none p-0 m-0">
-                            <li v-for="item in items">
-                                <RouterLink :to="{name: item.route}"
-                                            @click="closeCallback"
-                                            class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
-                                            v-ripple>
-                                    <i class="mr-2" :class="'pi pi-' + item.icon"/>
+                            <li v-for="item in items" :key="item.route">
+                                <RouterLink
+                                    :to="{ name: item.route }"
+                                    @click="closeCallback"
+                                    class="flex align-items-center cursor-pointer p-3 text-black-alpha-90 border-bottom-1 border-300"
+                                    v-ripple
+                                >
+                                    <i class="mr-2" :class="'pi pi-' + item.icon" />
                                     <span class="font-medium">{{ item.label }}</span>
                                 </RouterLink>
                             </li>
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index f1597ba8..3d684175 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
 import { useI18n } from 'vue-i18n';
 import { type Course } from '@/types/Course.ts';
 import { PrimeIcons } from 'primevue/api';
-import Dialog from 'primevue/dialog';
-import Button from 'primevue/button';
-import { useRouter } from 'vue-router';
 import { ref } from 'vue';
+import CourseList from '@/components/courses/CourseList.vue';
 
 /* Composable injections */
 const { t } = useI18n();
-const { push } = useRouter();
 
 /* Props */
-const props = defineProps<{ courses: Course[], label?: string, severity?: string }>();
+const props = defineProps<{ courses: Course[]; label?: string; severity?: string }>();
 
 /* Dialog state to select the course you want to create a project for */
 const displayCourseSelection = ref(false);
-
-/* Method to route to the project creation view */
-const createProjectForCourse = (courseId: string): void => {
-    push({ name: 'project-create', params: { courseId } });
-    displayCourseSelection.value = false;
-};
 </script>
 
 <template>
@@ -39,38 +32,28 @@ const createProjectForCourse = (courseId: string): void => {
         <!-- Dialog to select the course you want to create a project for -->
         <Dialog
             v-model:visible="displayCourseSelection"
-            modal
+            class="m-3"
             :draggable="false"
-            :contentStyle="{ width: '50vw' }"
-            :header="t('views.dashboard.select_course')"
-        >
-            <!-- List of courses to select from-->
-            <div v-if="props.courses && props.courses.length > 0">
-                <div
-                    v-for="course in props.courses"
-                    :key="course.id"
-                    class="course-item"
-                    @click="createProjectForCourse(course.id)"
-                >
-                    <span class="course-name">{{ course.name }}</span>
-                </div>
-            </div>
+            :contentStyle="{ 'min-width': '50vw' }"
+            modal>
+            <template #header>
+                <h2 class="my-3 text-primary">
+                    {{ t('views.dashboard.select_course') }}
+                </h2>
+            </template>
+            <template #default>
+                <!-- List of courses to select from-->
+                <CourseList :cols="3" :courses="props.courses">
+                    <template #footer="{ course }">
+                        <RouterLink :to="{ name: 'project-create', params: { courseId: course.id } }">
+                            <Button :icon="PrimeIcons.PLUS" :label="t('components.card.newProject')" icon-pos="right" outlined />
+                        </RouterLink>
+                    </template>
+                </CourseList>
+            </template>
         </Dialog>
     </div>
 </template>
 
 <style scoped lang="scss">
-.course-item {
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    transition: background-color 0.3s;
-}
-.course-item:hover {
-    background-color: #f0f0f0;
-}
-.course-name {
-    font-weight: bold;
-}
 </style>
diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue
index 4fdf4a24..68cfd2f2 100644
--- a/frontend/src/components/projects/ProjectList.vue
+++ b/frontend/src/components/projects/ProjectList.vue
@@ -82,7 +82,7 @@ watch(
         <template v-if="sortedProjects !== null">
             <template v-if="sortedProjects.length > 0">
                 <div
-                    class="col-12 md:col-6 lg:col-4"
+                    class="col-12 md:col-6"
                     :class="'xl:col-' + 12 / cols"
                     v-for="project in sortedProjects"
                     :key="project.id"
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index ddd296cb..9d7f6579 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -80,9 +80,8 @@ export function useStudents(): StudentsState {
         await create<Student>(
             endpoint,
             {
-                email: studentData.email,
-                first_name: studentData.first_name,
-                last_name: studentData.last_name,
+                user: studentData.id,
+                student_id: studentData.studentId
             },
             student,
             Student.fromJSON,
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 4c7d7ada..575533da 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -5,6 +5,7 @@ import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
 import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
 import { useCourses } from '@/composables/services/courses.service.ts';
+import { User } from '@/types/users/User.ts';
 
 interface TeacherState {
     teachers: Ref<Teacher[] | null>;
@@ -57,14 +58,12 @@ export function useTeacher(): TeacherState {
         await deleteIdWithData<Response>(endpoint, { teacherId }, response, Response.fromJSON);
     }
 
-    async function createTeacher(teacherData: Teacher): Promise<void> {
+    async function createTeacher(user: User): Promise<void> {
         const endpoint = endpoints.teachers.index;
         await create<Teacher>(
             endpoint,
             {
-                email: teacherData.email,
-                first_name: teacherData.first_name,
-                last_name: teacherData.last_name,
+                user: user.id
             },
             teacher,
             Teacher.fromJSON,
diff --git a/frontend/src/main.scss b/frontend/src/main.scss
index 599ef42d..63093b0a 100644
--- a/frontend/src/main.scss
+++ b/frontend/src/main.scss
@@ -10,6 +10,11 @@ body {
     padding: 0;
     overflow-x: hidden;
     line-height: 1.6rem;
+    min-height: 100vh;
+
+    #app {
+        min-height: 100vh;
+    }
 
     * {
         box-sizing: border-box;
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index f316e3b1..c068dd43 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -12,39 +12,42 @@ const { t } = useI18n();
 
 <template>
     <BaseLayout>
-        <div class="flex w-12 lg:w-10 mx-auto mb-8">
-            <div class="w-5 bg-primary text-white p-5">
-                <Title color="contrast">
-                    {{ t('views.login.title') }}
-                </Title>
-                <div class="mb-4 mt-3">
-                    {{ t('views.login.subtitle') }}
+        <div class="flex pb-7 h-full">
+            <div class="flex flex-column md:flex-row align-self-center w-12 lg:w-10 mx-auto">
+                <div class="w-12 md:w-5 bg-primary text-white p-5">
+                    <Title color="contrast">
+                        {{ t('views.login.title') }}
+                    </Title>
+                    <div class="mb-4 mt-3">
+                        {{ t('views.login.subtitle') }}
+                    </div>
+                    <a :href="endpoints.auth.login">
+                        <Button
+                            icon-pos="right"
+                            :icon="PrimeIcons.ARROW_RIGHT"
+                            :label="t('views.login.button')"
+                            severity="secondary"
+                        />
+                    </a>
                 </div>
-                <a :href="endpoints.auth.login">
-                    <Button
-                        icon-pos="right"
-                        :icon="PrimeIcons.ARROW_RIGHT"
-                        :label="t('views.login.button')"
-                        severity="secondary"
-                    />
-                </a>
-            </div>
-            <div class="w-7 relative surface-100 p-4">
-                <img :src="Illustration" :alt="t('views.login.illustration')" class="w-15rem" />
-                <div
-                    class="absolute bottom-0 right-0 bg-primary text-white p-4 w-20rem"
-                    style="transform: translateY(50%)"
-                >
-                    <h1 class="mt-0">
-                        {{ t('views.login.card.title') }}
-                    </h1>
-                    <span>
+                <div class="w-12 md:w-7 flex flex-column md:flex-row align-items-center md:align-items-end justify-content-between relative surface-100">
+                    <img :src="Illustration" :alt="t('views.login.illustration')" class="w-10rem md:w-15rem m-4 ml-7" />
+                    <div
+                        class="bg-primary text-white p-4 w-full md:w-20rem"
+                    >
+                        <h1 class="mt-0">
+                            {{ t('views.login.card.title') }}
+                        </h1>
+                        <span>
                         {{ t('views.login.card.subtitle') }}
                     </span>
+                    </div>
                 </div>
             </div>
         </div>
     </BaseLayout>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss">
+
+</style>
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index a2d823ab..c7eefea0 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -3,6 +3,8 @@ import moment from 'moment';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import Calendar, { type CalendarDateSlotOptions } from 'primevue/calendar';
 import Title from '@/components/layout/Title.vue';
+import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
+import Skeleton from 'primevue/skeleton';
 import { useProject } from '@/composables/services/project.service';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -11,7 +13,6 @@ import { storeToRefs } from 'pinia';
 import { type Project } from '@/types/Projects.ts';
 import { type RoleUser } from '@/types/users/Generics.ts';
 import { useRoute, useRouter } from 'vue-router';
-import ProjectCreateButton from '@/components/projects/ProjectCreateButton.vue';
 
 /* Composable injections */
 const { t, locale } = useI18n();
@@ -19,7 +20,7 @@ const { query } = useRoute();
 const { push } = useRouter();
 
 /* Component state */
-const allProjects = ref<Project[]>([]);
+const allProjects = ref<Project[]|null>(null);
 const selectedDate = ref<Date>(getQueryDate());
 
 /* Service injection */
@@ -36,7 +37,7 @@ const formattedDate = computed(() => {
 const projectsWithDeadline = computed(() => {
     return allProjects.value?.filter((project) => {
         return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
-    });
+    }) ?? null;
 });
 
 /* Courses that take place on the selected date in the calendar => no display when the date is in the past */
@@ -56,10 +57,12 @@ const coursesWithProjectCreationPossibility = computed(() => {
 async function loadProjects(): Promise<void> {
     if (user.value !== null) {
         // Clear the old data, so that the data from another role is not displayed
-        allProjects.value = [];
+        allProjects.value = null;
 
         // Load the projects of the courses
         if (user.value.isSpecificRole()) {
+            let _allProjects: Project[] = [];
+
             // Cast the generic user to a specific role
             const role = user.value as RoleUser;
 
@@ -72,8 +75,10 @@ async function loadProjects(): Promise<void> {
                 });
 
                 // Concatenate the projects
-                allProjects.value = allProjects.value.concat(projects.value ?? []);
+                _allProjects = _allProjects.concat(projects.value ?? []);
             }
+
+            allProjects.value = _allProjects;
         }
     }
 }
@@ -177,50 +182,57 @@ watch(selectedDate, (date) => {
             <div class="col-12 md:col-6">
                 <div class="surface-100 p-6">
                     <!-- Selected date on the calendar -->
-                    <Title class="mb-6 font-extrabold">{{ formattedDate }}</Title>
+                    <Title class="mb-6 font-extrabold">
+                        {{ formattedDate }}
+                    </Title>
 
                     <!-- Listing projects with given deadline -->
                     <div class="flex flex-column gap-4">
-                        <template v-if="projectsWithDeadline.length > 0">
-                            <!-- Project cards -->
-                            <div class="flex border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
-                                <!-- Icon -->
-                                <div
-                                    class="bg-primary flex justify-content-center align-items-center p-4 w-3 w-7rem h-7rem"
-                                >
-                                    <span class="pi pi-book text-6xl" />
-                                </div>
-                                <!-- Details -->
-                                <div
-                                    class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-9"
-                                >
-                                    <RouterLink
-                                        :to="{
+                        <template v-if="projectsWithDeadline !== null">
+                            <template v-if="projectsWithDeadline.length > 0">
+                                <!-- Project cards -->
+                                <div class="flex flex-column xl:flex-row border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
+                                    <!-- Icon -->
+                                    <div
+                                        class="bg-primary flex justify-content-center align-items-center p-4 xl:w-7rem xl:h-7rem"
+                                    >
+                                        <span class="pi pi-book text-6xl" />
+                                    </div>
+                                    <!-- Details -->
+                                    <div
+                                        class="flex flex-column gap-3 justify-content-center bg-white text-black-alpha-80 p-3 w-full"
+                                    >
+                                        <RouterLink
+                                            :to="{
                                             name: 'course-project',
                                             params: {
                                                 courseId: project.course?.id,
                                                 projectId: project.id,
                                             },
                                         }"
-                                    >
-                                        <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
-                                            {{ project.name }} <span class="pi pi-arrow-right text-xl" />
-                                        </h3>
-                                    </RouterLink>
-                                    <p class="font-bold m-0">
-                                        {{ project.course?.name }}
-                                    </p>
+                                        >
+                                            <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
+                                                {{ project.name }} <span class="pi pi-arrow-right text-xl" />
+                                            </h3>
+                                        </RouterLink>
+                                        <p class="font-bold m-0">
+                                            {{ project.course?.name }}
+                                        </p>
+                                    </div>
                                 </div>
-                            </div>
+                            </template>
+                            <template v-else>
+                                <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                            </template>
                         </template>
                         <template v-else>
-                            <p class="m-0">{{ t('views.calendar.noProjects') }}</p>
+                            <Skeleton height="7rem"/>
                         </template>
                     </div>
 
-                    <template v-if="user?.isTeacher() || user?.isAssistant()">
+                    <template v-if="coursesWithProjectCreationPossibility.length > 0 && user?.isTeacher() || user?.isAssistant()">
                         <!-- Add project button -->
-                        <ProjectCreateButton severity="secondary" :courses="coursesWithProjectCreationPossibility" />
+                        <ProjectCreateButton class="mt-5" :label="t('components.button.createProject')" severity="secondary" :courses="coursesWithProjectCreationPossibility" />
                     </template>
                 </div>
             </div>
diff --git a/frontend/src/views/courses/SearchCourseView.vue b/frontend/src/views/courses/SearchCourseView.vue
index 4565d5fa..a745561e 100644
--- a/frontend/src/views/courses/SearchCourseView.vue
+++ b/frontend/src/views/courses/SearchCourseView.vue
@@ -102,7 +102,7 @@ onMounted(async () => {
                     </AccordionTab>
                 </Accordion>
             </div>
-            <div class="col-12 xl:col-9">
+            <div class="col-12 xl:col-9 mt-4 xl:mt-0">
                 <Title>
                     {{ t('views.courses.search.title') }}
                 </Title>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index fd4e67c4..ed91c7e8 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -40,7 +40,7 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
 
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index 83059a7e..b4406f65 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -44,7 +44,7 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex justify-content-between align-items-center mb-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
         <!-- Course list controls -->
@@ -66,12 +66,12 @@ watch(
     <!-- Course list body -->
     <CourseList :courses="filteredCourses" />
     <!-- Project heading -->
-    <div class="flex justify-content-between align-items-center my-6">
+    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mt-6 mb-5">
         <!-- Project list title -->
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
         <!-- Create project button -->
-        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.create_project')" />
+        <ProjectCreateButton :courses="filteredCourses" :label="t('components.button.createProject')" />
     </div>
     <!-- Project list body -->
     <ProjectList :courses="filteredCourses" />
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 9dc09265..e3a4087a 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -3,19 +3,19 @@ import Calendar from 'primevue/calendar';
 import BaseLayout from '@/components/layout/BaseLayout.vue';
 import FileUpload from 'primevue/fileupload';
 import Title from '@/components/layout/Title.vue';
-import { reactive, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import { reactive, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { Project } from '@/types/Projects';
 import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -66,12 +66,15 @@ const onZipStructureUpload = (event: any): void => {
 // useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
-const submitProject = async (): Promise<void> => {
+/**
+ * Function to submit the project form.
+ */
+async function submitProject(): Promise<void> {
     // Validate the form
-    const result = await v$.value.$validate();
+    const validated = await v$.value.$validate();
 
     // Only submit the form if the validation was successful
-    if (result) {
+    if (validated) {
         // Pass the project data to the service
         await createProject(
             new Project(
@@ -92,115 +95,140 @@ const submitProject = async (): Promise<void> => {
         );
 
         // Redirect to the dashboard overview
-        push({ name: 'dashboard' });
+        await push({ name: 'dashboard' });
     }
-};
+}
 </script>
 
 <template>
     <BaseLayout>
+        <!-- Create project heading -->
+        <Title class="mb-6">
+            {{ t('views.projects.create') }}
+        </Title>
+
         <!-- Project form -->
         <form @submit.prevent="submitProject">
-            <div class="grid fadein">
-                <div class="col-12 md:col-10">
-                    <!-- Create project heading -->
-                    <Title class="mb-6">{{ t('views.projects.create') }}</Title>
-
-                    <!-- Project name -->
-                    <div class="mb-4">
-                        <label for="projectName">{{ t('views.projects.name') }}</label>
-                        <InputText id="projectName" v-model="form.name" />
-                        <ErrorMessage :field="v$.name" />
-                    </div>
-
-                    <!-- Project description -->
-                    <div class="mb-4">
-                        <label for="projectDescription">{{ t('views.projects.description') }}</label>
-                        <Textarea id="projectDescription" v-model="form.description" autoResize rows="5" cols="30" />
-                    </div>
-
-                    <!-- Start date of the project -->
-                    <div class="mb-4">
-                        <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
-                        <Calendar
-                            id="projectStartDate"
-                            v-model="form.startDate"
-                            dateFormat="dd-mm-yy"
-                            :min-date="new Date()"
-                            showIcon
-                        />
-                        <ErrorMessage :field="v$.startDate" />
+            <div class="grid">
+                <div class="col-12 lg:col-6">
+                    <div class="grid formgrid">
+                        <!-- Project name -->
+                        <div class="field col-12">
+                            <label for="projectName">
+                                {{ t('views.projects.name') }}
+                            </label>
+                            <InputText id="projectName" class="w-full" v-model="form.name" />
+                            <ErrorMessage :field="v$.name" />
+                        </div>
                     </div>
 
-                    <!-- Deadline of the project -->
-                    <div class="mb-4">
-                        <label for="projectDeadline">{{ t('views.projects.deadline') }}</label>
-                        <Calendar
-                            id="projectDeadline"
-                            v-model="form.deadline"
-                            dateFormat="dd-mm-yy"
-                            :min-date="form.startDate"
-                            showTime
-                            hourFormat="24"
-                            showIcon
-                        />
-                        <ErrorMessage :field="v$.deadline" />
+                    <div class="grid">
+                        <!-- Project description -->
+                        <div class="field col">
+                            <label for="projectDescription">
+                                {{ t('views.projects.description') }}
+                            </label>
+                            <Textarea id="projectDescription" class="w-full" v-model="form.description" autoResize rows="5" cols="30" />
+                        </div>
                     </div>
 
-                    <!-- Group size for the project -->
-                    <div class="mb-4">
-                        <label for="groupSize">{{ t('views.projects.group_size') }}</label>
-                        <InputNumber id="groupSize" v-model="form.groupSize" :min="1" />
-                        <ErrorMessage :field="v$.groupSize" />
+                    <div class="grid">
+                        <!-- Start date of the project -->
+                        <div class="field col">
+                            <label for="projectStartDate">{{ t('views.projects.start_date') }}</label>
+                            <Calendar
+                                id="projectStartDate"
+                                class="w-full"
+                                v-model="form.startDate"
+                                dateFormat="dd-mm-yy"
+                                :min-date="new Date()"
+                                showIcon
+                            />
+                            <ErrorMessage :field="v$.startDate" />
+                        </div>
+
+                        <!-- Deadline of the project -->
+                        <div class="field col">
+                            <label for="projectDeadline">{{ t('views.projects.deadline') }}</label>
+                            <Calendar
+                                id="projectDeadline"
+                                class="w-full"
+                                v-model="form.deadline"
+                                dateFormat="dd-mm-yy"
+                                :min-date="form.startDate"
+                                showTime
+                                hourFormat="24"
+                                showIcon
+                            />
+                            <ErrorMessage :field="v$.deadline" />
+                        </div>
                     </div>
 
-                    <!-- Max score for the project -->
-                    <div class="mb-4">
-                        <label for="maxScore">{{ t('views.projects.max_score') }}</label>
-                        <InputNumber id="maxScore" v-model="form.maxScore" :min="1" />
-                        <ErrorMessage :field="v$.maxScore" />
+                    <div class="grid align-items-end">
+                        <!-- Group size for the project -->
+                        <div class="field col">
+                            <label for="groupSize">
+                                {{ t('views.projects.group_size') }}
+                            </label>
+                            <InputNumber id="groupSize" class="w-full" v-model="form.groupSize" :min="1" />
+                            <ErrorMessage :field="v$.groupSize" />
+                        </div>
+
+                        <!-- Max score for the project -->
+                        <div class="field col">
+                            <label for="maxScore">{{ t('views.projects.max_score') }}</label>
+                            <InputNumber id="maxScore" class="w-full" v-model="form.maxScore" :min="1" />
+                            <ErrorMessage :field="v$.maxScore" />
+                        </div>
                     </div>
 
                     <!-- Visibility of the project -->
-                    <div class="mb-4">
-                        <label for="visibility">{{ t('views.projects.visibility') }}</label>
-                        <InputSwitch id="visibility" v-model="form.visibility" />
+                    <div class="grid">
+                        <div class="flex align-items-center field-checkbox col-12">
+                            <InputSwitch id="visibility" v-model="form.visibility" />
+                            <label for="visibility">{{ t('views.projects.visibility') }}</label>
+                        </div>
                     </div>
 
                     <!-- Score visibility of the project -->
-                    <div class="mb-4">
-                        <label for="scoreVisibility">{{ t('views.projects.score_visibility') }}</label>
-                        <InputSwitch id="scoreVisibility" v-model="form.scoreVisibility" />
+                    <div class="grid">
+                        <div class="flex align-items-center field-checkbox col-12">
+                            <InputSwitch id="scoreVisibility" v-model="form.scoreVisibility" />
+                            <label for="scoreVisibility">{{ t('views.projects.score_visibility') }}</label>
+                        </div>
                     </div>
 
                     <!-- Submit button -->
-                    <div class="flex justify-end">
-                        <Button
-                            :label="t('views.projects.create')"
-                            type="submit"
-                            icon="pi pi-check"
-                            iconPos="right"
-                            rounded
-                        />
-                    </div>
+                    <Button
+                        :label="t('views.projects.create')"
+                        type="submit"
+                        icon="pi pi-check"
+                        iconPos="right"
+                        rounded
+                    />
                 </div>
 
-                <div class="col-12 md:col-10">
+                <div class="col-12 lg:col-6">
                     <!-- Upload field for docker script -->
-                    <div class="mt-7 mb-4">
-                        <label for="dockerScript">{{ t('views.projects.docker_upload') }}</label>
+                    <div class="field col">
+                        <label for="dockerScript">
+                            {{ t('views.projects.docker_upload') }}
+                        </label>
                         <FileUpload
-                            id="dockerScript"
+                            input="dockerScript"
                             mode="basic"
                             accept=".sh"
                             :multiple="false"
+                            title="hellaur"
                             @select="onDockerScriptUpload"
                         />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->
-                    <div class="mb-4">
-                        <label for="submissionStructure">{{ t('views.projects.submission_structure') }}</label>
+                    <div class="field col">
+                        <label for="submissionStructure">
+                            {{ t('views.projects.submission_structure') }}
+                        </label>
                         <FileUpload
                             id="submissionStructure"
                             mode="basic"
@@ -216,20 +244,4 @@ const submitProject = async (): Promise<void> => {
 </template>
 
 <style scoped>
-/* Flex column layout for label and input */
-.mb-4 {
-    display: flex;
-    flex-direction: column;
-}
-
-/* Add margin between label and input */
-label {
-    margin-bottom: 0.5rem;
-}
-
-.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
 </style>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index cd0f505d..76ed46a0 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -33,7 +33,7 @@ const filteredCourses = computed(
 <template>
     <BaseLayout>
         <!-- Project heading -->
-        <div class="flex justify-content-between align-items-center mb-6">
+        <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-5">
             <!-- Project list title -->
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <YearSelector :years="allYears" v-model="selectedYear" v-if="user" />

From d24003ce2ece0c635c817d780ea86e3629a10e0c Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 15:51:14 +0200
Subject: [PATCH 4/6] chore: linting

---
 .../components/courses/CourseDetailCard.vue   |  7 ++-
 .../src/components/courses/CourseList.vue     |  7 ++-
 .../projects/ProjectCreateButton.vue          | 13 ++++--
 .../composables/services/students.service.ts  |  2 +-
 .../composables/services/teachers.service.ts  |  4 +-
 .../src/views/authentication/LoginView.vue    | 16 +++----
 frontend/src/views/calendar/CalendarView.vue  | 44 +++++++++++++------
 .../dashboard/roles/StudentDashboardView.vue  |  4 +-
 .../dashboard/roles/TeacherDashboardView.vue  |  8 +++-
 .../src/views/projects/CreateProjectView.vue  | 12 +++--
 frontend/src/views/projects/ProjectView.vue   |  4 +-
 11 files changed, 82 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/courses/CourseDetailCard.vue b/frontend/src/components/courses/CourseDetailCard.vue
index f19cd6cc..24377d9a 100644
--- a/frontend/src/components/courses/CourseDetailCard.vue
+++ b/frontend/src/components/courses/CourseDetailCard.vue
@@ -38,7 +38,12 @@ const { getRandomImport } = useGlob(import.meta.glob('@/assets/img/placeholders/
         <template #footer>
             <slot :course="course" name="footer">
                 <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
-                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                    <Button
+                        :icon="PrimeIcons.ARROW_RIGHT"
+                        :label="t('components.card.open')"
+                        icon-pos="right"
+                        outlined
+                    />
                 </RouterLink>
             </slot>
         </template>
diff --git a/frontend/src/components/courses/CourseList.vue b/frontend/src/components/courses/CourseList.vue
index ec9009a9..b233528d 100644
--- a/frontend/src/components/courses/CourseList.vue
+++ b/frontend/src/components/courses/CourseList.vue
@@ -32,7 +32,12 @@ const { t } = useI18n();
                         <template #footer="{ course }">
                             <slot name="footer" :course="course">
                                 <RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
-                                    <Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
+                                    <Button
+                                        :icon="PrimeIcons.ARROW_RIGHT"
+                                        :label="t('components.card.open')"
+                                        icon-pos="right"
+                                        outlined
+                                    />
                                 </RouterLink>
                             </slot>
                         </template>
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index 3d684175..44597f2f 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -35,7 +35,8 @@ const displayCourseSelection = ref(false);
             class="m-3"
             :draggable="false"
             :contentStyle="{ 'min-width': '50vw' }"
-            modal>
+            modal
+        >
             <template #header>
                 <h2 class="my-3 text-primary">
                     {{ t('views.dashboard.select_course') }}
@@ -46,7 +47,12 @@ const displayCourseSelection = ref(false);
                 <CourseList :cols="3" :courses="props.courses">
                     <template #footer="{ course }">
                         <RouterLink :to="{ name: 'project-create', params: { courseId: course.id } }">
-                            <Button :icon="PrimeIcons.PLUS" :label="t('components.card.newProject')" icon-pos="right" outlined />
+                            <Button
+                                :icon="PrimeIcons.PLUS"
+                                :label="t('components.card.newProject')"
+                                icon-pos="right"
+                                outlined
+                            />
                         </RouterLink>
                     </template>
                 </CourseList>
@@ -55,5 +61,4 @@ const displayCourseSelection = ref(false);
     </div>
 </template>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index 9d7f6579..3d8548c9 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -81,7 +81,7 @@ export function useStudents(): StudentsState {
             endpoint,
             {
                 user: studentData.id,
-                student_id: studentData.studentId
+                student_id: studentData.studentId,
             },
             student,
             Student.fromJSON,
diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 575533da..33db570b 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -5,7 +5,7 @@ import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
 import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
 import { useCourses } from '@/composables/services/courses.service.ts';
-import { User } from '@/types/users/User.ts';
+import { type User } from '@/types/users/User.ts';
 
 interface TeacherState {
     teachers: Ref<Teacher[] | null>;
@@ -63,7 +63,7 @@ export function useTeacher(): TeacherState {
         await create<Teacher>(
             endpoint,
             {
-                user: user.id
+                user: user.id,
             },
             teacher,
             Teacher.fromJSON,
diff --git a/frontend/src/views/authentication/LoginView.vue b/frontend/src/views/authentication/LoginView.vue
index c068dd43..c6e30bf3 100644
--- a/frontend/src/views/authentication/LoginView.vue
+++ b/frontend/src/views/authentication/LoginView.vue
@@ -30,17 +30,17 @@ const { t } = useI18n();
                         />
                     </a>
                 </div>
-                <div class="w-12 md:w-7 flex flex-column md:flex-row align-items-center md:align-items-end justify-content-between relative surface-100">
+                <div
+                    class="w-12 md:w-7 flex flex-column md:flex-row align-items-center md:align-items-end justify-content-between relative surface-100"
+                >
                     <img :src="Illustration" :alt="t('views.login.illustration')" class="w-10rem md:w-15rem m-4 ml-7" />
-                    <div
-                        class="bg-primary text-white p-4 w-full md:w-20rem"
-                    >
+                    <div class="bg-primary text-white p-4 w-full md:w-20rem">
                         <h1 class="mt-0">
                             {{ t('views.login.card.title') }}
                         </h1>
                         <span>
-                        {{ t('views.login.card.subtitle') }}
-                    </span>
+                            {{ t('views.login.card.subtitle') }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -48,6 +48,4 @@ const { t } = useI18n();
     </BaseLayout>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
diff --git a/frontend/src/views/calendar/CalendarView.vue b/frontend/src/views/calendar/CalendarView.vue
index c7eefea0..b7933afe 100644
--- a/frontend/src/views/calendar/CalendarView.vue
+++ b/frontend/src/views/calendar/CalendarView.vue
@@ -20,7 +20,7 @@ const { query } = useRoute();
 const { push } = useRouter();
 
 /* Component state */
-const allProjects = ref<Project[]|null>(null);
+const allProjects = ref<Project[] | null>(null);
 const selectedDate = ref<Date>(getQueryDate());
 
 /* Service injection */
@@ -35,9 +35,11 @@ const formattedDate = computed(() => {
 
 /* Filter the projects on the date selected on the calendar */
 const projectsWithDeadline = computed(() => {
-    return allProjects.value?.filter((project) => {
-        return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
-    }) ?? null;
+    return (
+        allProjects.value?.filter((project) => {
+            return moment(project.deadline).isSame(moment(selectedDate.value), 'day');
+        }) ?? null
+    );
 });
 
 /* Courses that take place on the selected date in the calendar => no display when the date is in the past */
@@ -191,7 +193,11 @@ watch(selectedDate, (date) => {
                         <template v-if="projectsWithDeadline !== null">
                             <template v-if="projectsWithDeadline.length > 0">
                                 <!-- Project cards -->
-                                <div class="flex flex-column xl:flex-row border-round-md" v-for="project in projectsWithDeadline" :key="project.id">
+                                <div
+                                    class="flex flex-column xl:flex-row border-round-md"
+                                    v-for="project in projectsWithDeadline"
+                                    :key="project.id"
+                                >
                                     <!-- Icon -->
                                     <div
                                         class="bg-primary flex justify-content-center align-items-center p-4 xl:w-7rem xl:h-7rem"
@@ -204,12 +210,12 @@ watch(selectedDate, (date) => {
                                     >
                                         <RouterLink
                                             :to="{
-                                            name: 'course-project',
-                                            params: {
-                                                courseId: project.course?.id,
-                                                projectId: project.id,
-                                            },
-                                        }"
+                                                name: 'course-project',
+                                                params: {
+                                                    courseId: project.course?.id,
+                                                    projectId: project.id,
+                                                },
+                                            }"
                                         >
                                             <h3 class="flex gap-3 align-items-center text-primary m-0 text-xl">
                                                 {{ project.name }} <span class="pi pi-arrow-right text-xl" />
@@ -226,13 +232,23 @@ watch(selectedDate, (date) => {
                             </template>
                         </template>
                         <template v-else>
-                            <Skeleton height="7rem"/>
+                            <Skeleton height="7rem" />
                         </template>
                     </div>
 
-                    <template v-if="coursesWithProjectCreationPossibility.length > 0 && user?.isTeacher() || user?.isAssistant()">
+                    <template
+                        v-if="
+                            (coursesWithProjectCreationPossibility.length > 0 && user?.isTeacher()) ||
+                            user?.isAssistant()
+                        "
+                    >
                         <!-- Add project button -->
-                        <ProjectCreateButton class="mt-5" :label="t('components.button.createProject')" severity="secondary" :courses="coursesWithProjectCreationPossibility" />
+                        <ProjectCreateButton
+                            class="mt-5"
+                            :label="t('components.button.createProject')"
+                            severity="secondary"
+                            :courses="coursesWithProjectCreationPossibility"
+                        />
                     </template>
                 </div>
             </div>
diff --git a/frontend/src/views/dashboard/roles/StudentDashboardView.vue b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
index ed91c7e8..77e10ef0 100644
--- a/frontend/src/views/dashboard/roles/StudentDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/StudentDashboardView.vue
@@ -40,7 +40,9 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
+    <div
+        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6"
+    >
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
 
diff --git a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
index b4406f65..ef6edf5f 100644
--- a/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
+++ b/frontend/src/views/dashboard/roles/TeacherDashboardView.vue
@@ -44,7 +44,9 @@ watch(
 
 <template>
     <!-- Course heading -->
-    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6">
+    <div
+        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-6"
+    >
         <!-- Course list title -->
         <Title class="m-0">{{ t('views.dashboard.courses') }}</Title>
         <!-- Course list controls -->
@@ -66,7 +68,9 @@ watch(
     <!-- Course list body -->
     <CourseList :courses="filteredCourses" />
     <!-- Project heading -->
-    <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mt-6 mb-5">
+    <div
+        class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mt-6 mb-5"
+    >
         <!-- Project list title -->
         <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
 
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index e3a4087a..71327383 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -128,7 +128,14 @@ async function submitProject(): Promise<void> {
                             <label for="projectDescription">
                                 {{ t('views.projects.description') }}
                             </label>
-                            <Textarea id="projectDescription" class="w-full" v-model="form.description" autoResize rows="5" cols="30" />
+                            <Textarea
+                                id="projectDescription"
+                                class="w-full"
+                                v-model="form.description"
+                                autoResize
+                                rows="5"
+                                cols="30"
+                            />
                         </div>
                     </div>
 
@@ -243,5 +250,4 @@ async function submitProject(): Promise<void> {
     </BaseLayout>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/projects/ProjectView.vue b/frontend/src/views/projects/ProjectView.vue
index 76ed46a0..6e7ee7cc 100644
--- a/frontend/src/views/projects/ProjectView.vue
+++ b/frontend/src/views/projects/ProjectView.vue
@@ -33,7 +33,9 @@ const filteredCourses = computed(
 <template>
     <BaseLayout>
         <!-- Project heading -->
-        <div class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-5">
+        <div
+            class="flex gap-6 flex-column md:flex-row justify-content-between align-items-start md:align-items-center mb-5"
+        >
             <!-- Project list title -->
             <Title class="m-0">{{ t('views.dashboard.projects') }}</Title>
             <YearSelector :years="allYears" v-model="selectedYear" v-if="user" />

From 2675ed8f32a5ba531393eb9f6f0f0815f6c41bc6 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 16:02:29 +0200
Subject: [PATCH 5/6] chore: undo student service

---
 frontend/src/composables/services/students.service.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/composables/services/students.service.ts b/frontend/src/composables/services/students.service.ts
index 3d8548c9..ddd296cb 100644
--- a/frontend/src/composables/services/students.service.ts
+++ b/frontend/src/composables/services/students.service.ts
@@ -80,8 +80,9 @@ export function useStudents(): StudentsState {
         await create<Student>(
             endpoint,
             {
-                user: studentData.id,
-                student_id: studentData.studentId,
+                email: studentData.email,
+                first_name: studentData.first_name,
+                last_name: studentData.last_name,
             },
             student,
             Student.fromJSON,

From 741d61668b81f8b4289e8b9d49525ad468c02428 Mon Sep 17 00:00:00 2001
From: EwoutV <ewoutverlinde@hotmail.com>
Date: Fri, 12 Apr 2024 16:04:05 +0200
Subject: [PATCH 6/6] chore: undo teachers service

---
 frontend/src/composables/services/teachers.service.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/composables/services/teachers.service.ts b/frontend/src/composables/services/teachers.service.ts
index 33db570b..4c7d7ada 100644
--- a/frontend/src/composables/services/teachers.service.ts
+++ b/frontend/src/composables/services/teachers.service.ts
@@ -5,7 +5,6 @@ import { type Ref, ref } from 'vue';
 import { endpoints } from '@/config/endpoints.ts';
 import { get, getList, create, deleteId, deleteIdWithData } from '@/composables/services/helpers.ts';
 import { useCourses } from '@/composables/services/courses.service.ts';
-import { type User } from '@/types/users/User.ts';
 
 interface TeacherState {
     teachers: Ref<Teacher[] | null>;
@@ -58,12 +57,14 @@ export function useTeacher(): TeacherState {
         await deleteIdWithData<Response>(endpoint, { teacherId }, response, Response.fromJSON);
     }
 
-    async function createTeacher(user: User): Promise<void> {
+    async function createTeacher(teacherData: Teacher): Promise<void> {
         const endpoint = endpoints.teachers.index;
         await create<Teacher>(
             endpoint,
             {
-                user: user.id,
+                email: teacherData.email,
+                first_name: teacherData.first_name,
+                last_name: teacherData.last_name,
             },
             teacher,
             Teacher.fromJSON,