From 26ddf1d7625a3837d8269a2da08c2d9613be32b0 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 9 May 2024 15:42:10 +0200
Subject: [PATCH 01/15] fix: make project creation working again after backend
 changes

---
 backend/api/serializers/project_serializer.py | 19 +++++++---
 frontend/src/assets/lang/app/en.json          |  2 +-
 .../composables/services/project.service.ts   | 36 +++++++++++--------
 .../src/views/projects/CreateProjectView.vue  | 20 ++++++-----
 4 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/backend/api/serializers/project_serializer.py b/backend/api/serializers/project_serializer.py
index 0f705cf5..087fa6f6 100644
--- a/backend/api/serializers/project_serializer.py
+++ b/backend/api/serializers/project_serializer.py
@@ -111,11 +111,7 @@ def create(self, validated_data):
         project = super().create(validated_data)
 
         # Create groups for the project, if specified
-        if number_groups:
-            for _ in range(number_groups):
-                Group.objects.create(project=project)
-
-        elif project.group_size == 1:
+        if project.group_size == 1:
             # If the group_size is set to one, create a group for each student
             students = project.course.students.all()
 
@@ -123,6 +119,19 @@ def create(self, validated_data):
                 group = Group.objects.create(project=project)
                 group.students.add(student)
 
+        elif number_groups:
+
+            for _ in range(number_groups):
+                Group.objects.create(project=project)
+
+        else:
+            # If no number of groups is passed, create #students / group_size groups
+            number_students = project.course.students.count()
+            group_size = project.group_size
+
+            for _ in range(0, number_students, group_size):
+                group = Group.objects.create(project=project)
+
         # If a zip_structure is provided, parse it to create the structure checks
         zip_structure: InMemoryUploadedFile | None = self.context['request'].FILES.get('zip_structure')
         if zip_structure:
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index d2f951a7..7e1905fc 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -69,7 +69,7 @@
             "max_score": "Maximum score that can be achieved",
             "visibility": "Make project visible to students",
             "scoreVisibility": "Make score, when uploaded, automatically visible to students",
-            "dockerUpload": "Upload a Dockerfile",
+            "bashUpload": "Upload a bash script for automatic testing",
             "submissionStructure": "Structure of how a submission should be made",
             "noStudents": "No students in this group",
             "locked": "Closed",
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 9c3bdbd4..fc0bd13c 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -75,22 +75,30 @@ export function useProject(): ProjectState {
 
     async function createProject(projectData: Project, courseId: string, numberOfGroups: number): Promise<void> {
         const endpoint = endpoints.projects.byCourse.replace('{courseId}', courseId);
+
+        // Initialize an empty object to hold the data to send
+        const requestData: Record<string, unknown> = {
+            name: projectData.name,
+            description: projectData.description,
+            visible: projectData.visible,
+            archived: projectData.archived,
+            locked_groups: projectData.locked_groups,
+            start_date: projectData.start_date,
+            deadline: projectData.deadline,
+            max_score: projectData.max_score,
+            score_visible: projectData.score_visible,
+            group_size: projectData.group_size,
+            zip_structure: projectData.structure_file,
+        };
+
+        // Check if the number of groups should be included, only if it is greater than 0
+        if (numberOfGroups > 0) {
+            requestData.number_groups = numberOfGroups;
+        }
+
         await create<Project>(
             endpoint,
-            {
-                name: projectData.name,
-                description: projectData.description,
-                visible: projectData.visible,
-                archived: projectData.archived,
-                locked_groups: projectData.locked_groups,
-                start_date: projectData.start_date,
-                deadline: projectData.deadline,
-                max_score: projectData.max_score,
-                score_visible: projectData.score_visible,
-                group_size: projectData.group_size,
-                number_groups: numberOfGroups,
-                zip_structure: projectData.structure_file,
-            },
+            requestData,
             project,
             Project.fromJSON,
             'multipart/form-data',
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 88c83ec7..6ad707d4 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -9,6 +9,7 @@ import Editor from '@/components/forms/Editor.vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import { SubmissionStatus } from '@/types/SubmisionStatus';
 import { reactive, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -38,7 +39,7 @@ const form = reactive({
     maxScore: 10,
     visibility: true,
     scoreVisibility: false,
-    dockerScript: null,
+    bashScript: null,
     submissionStructure: null,
 });
 
@@ -56,9 +57,9 @@ const rules = computed(() => {
     };
 });
 
-// Function to handle the file upload of a docker script
-const onDockerScriptUpload = (event: any): void => {
-    form.dockerScript = event.files[0];
+// Function to handle the file upload of a bash script
+const onBashScriptUpload = (event: any): void => {
+    form.bashScript = event.files[0];
 };
 
 // Function to handle the file upload of a zip file containing the submission structure
@@ -96,6 +97,7 @@ async function submitProject(): Promise<void> {
                 form.scoreVisibility,
                 form.groupSize,
                 course.value,
+                new SubmissionStatus(0, 0, 0), // Default submission status
                 form.submissionStructure,
             ),
             params.courseId as string,
@@ -226,18 +228,18 @@ async function submitProject(): Promise<void> {
                 </div>
 
                 <div class="col-12 lg:col-6">
-                    <!-- Upload field for docker script -->
+                    <!-- Upload field for bash script -->
                     <div class="field col">
-                        <label for="dockerScript">
-                            {{ t('views.projects.dockerUpload') }}
+                        <label for="bashScript">
+                            {{ t('views.projects.bashUpload') }}
                         </label>
                         <FileUpload
-                            input="dockerScript"
+                            input="bashScript"
                             mode="basic"
                             accept=".sh"
                             :multiple="false"
                             title="hellaur"
-                            @select="onDockerScriptUpload"
+                            @select="onBashScriptUpload"
                         />
                     </div>
 

From adec3f1113e63a09344a71cafa33770061aa23dd Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 9 May 2024 18:14:12 +0200
Subject: [PATCH 02/15] chore: init layout extra checks

---
 frontend/src/assets/lang/app/nl.json          |  13 +-
 .../components/projects/ExtraChecksUpload.vue | 195 ++++++++++++++++++
 .../src/views/projects/CreateProjectView.vue  |  22 +-
 3 files changed, 211 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/projects/ExtraChecksUpload.vue

diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 92456aa0..2d05624a 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -69,9 +69,18 @@
             "max_score": "Maximale te behalen score",
             "visibility": "Project zichtbaar maken voor studenten",
             "scoreVisibility": "Maak score, wanneer ingevuld, automatisch zichtbaar voor studenten",
-            "dockerUpload": "Upload een Dockerfile",
             "submissionStructure": "Structuur van hoe de indiening moet gebeuren",
-            "noStudents": "Geen studenten in deze groep"
+            "noStudents": "Geen studenten in deze groep",
+            "extraChecks": {
+                "title": "Voeg een automatische check toe",
+                "add": "Nieuwe check",
+                "name": "Naam",
+                "bashScript": "Bash script",
+                "dockerImage": "Docker image",
+                "timeLimit": "Tijdslimiet voor de uitvoering (in seconden)",
+                "memoryLimit": "Geheugenlimiet voor de uitvoering (in MB)",
+                "showLog": "Toon logbestand aan studenten"
+            }
         },
         "submissions": {
             "title": "Inzendingen",
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
new file mode 100644
index 00000000..cf7b1767
--- /dev/null
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { PrimeIcons } from 'primevue/api';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import InputNumber from 'primevue/inputnumber';
+import InputText from 'primevue/inputtext';
+import FileUpload from 'primevue/fileupload';
+import InputSwitch from 'primevue/inputswitch';
+import { useI18n } from 'vue-i18n';
+import { type Course } from '@/types/Course.ts';
+import { ref, reactive, computed } from 'vue';
+import { required, helpers } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+/* Composable injections */
+const { t } = useI18n();
+
+/* Props */
+// const props = defineProps<{ course: Course }>();
+
+/* State for the dialog to create an extra check */
+const displayExtraCheckCreation = ref(false);
+
+/* Form content */
+const form = reactive({
+    name: '',
+    dockerImage: null,
+    bashFile: null,
+    timeLimit: 30,
+    memoryLimit: 128,
+    showLog: true,
+});
+
+// Define validation rules for each form field
+const rules = computed(() => {
+    return {
+        name: { required: helpers.withMessage(t('validations.required'), required) },
+        dockerImage: { required: helpers.withMessage(t('validations.required'), required) },
+        bashFile: { required: helpers.withMessage(t('validations.required'), required) },
+        timeLimit: { required: helpers.withMessage(t('validations.required'), required) },
+        memoryLimit: { required: helpers.withMessage(t('validations.required'), required) },
+    };
+});
+
+// useVuelidate function to perform form validation
+const v$ = useVuelidate(rules, form);
+
+/**
+ * Function to save the extra check
+ */
+ async function saveExtraCheck(): Promise<void> {
+    // // Validate the form
+    // const validated = await v$.value.$validate();
+
+    // // Get the course object from the course ID
+    // await getCourseByID(params.courseId as string);
+
+    // // Only submit the form if the validation was successful
+    // if (validated && course.value !== null) {
+
+    // }
+}
+
+/**
+ * Function to upload the bash script
+ */
+function onBashScriptUpload(event: any): void {
+    form.bashFile = event.files[0];
+}
+
+/**
+ * Function to upload the docker image
+ */
+function onDockerImageUpload(event: any): void {
+    form.dockerImage = event.files[0];
+}
+</script>
+
+<template>
+    <Button
+        class="p-button-primary"
+        @click="displayExtraCheckCreation = true"
+        :icon="PrimeIcons.PLUS"
+        :label="t('views.projects.extraChecks.add')"
+        icon-pos="left"
+    />
+    <Dialog
+        v-model:visible="displayExtraCheckCreation"
+        class="m-3"
+        :draggable="false"
+        :contentStyle="{ 'min-width': '50vw', 'max-width': '1080px' }"
+        modal
+    >
+        <template #header>
+            <h2 class="my-3 text-primary">
+                {{ t('views.projects.extraChecks.add') }}
+            </h2>
+        </template>
+        <template #default>
+            <!-- Extra checks form -->
+            <form @submit.prevent="saveExtraCheck">
+                <div class="grid">
+                    <div class="col-12 lg:col-6">
+                        <div class="grid formgrid">
+                            <!-- Extra check name -->
+                            <div class="field col-12">
+                                <label for="name">
+                                    {{ t('views.projects.extraChecks.name') }}
+                                </label>
+                                <InputText id="projectName" class="w-full" v-model="form.name" />
+                                <ErrorMessage :field="v$.name" />
+                            </div>
+                        </div>
+
+                        <div class="grid">
+                            <!-- Bash script -->
+                            <div class="field col">
+                                <label for="bashScript">
+                                    {{ t('views.projects.extraChecks.bashScript') }}
+                                </label>
+                                <FileUpload
+                                    input="bashScript"
+                                    mode="basic"
+                                    accept=".sh"
+                                    :multiple="false"
+                                    title="hellaur"
+                                    @select="onBashScriptUpload"
+                                />
+                            </div>
+                        </div>
+
+                        <div class="grid align-items-end">
+                            <!-- Time limit -->
+                            <div class="field col">
+                                <label for="timeLimit">
+                                    {{ t('views.projects.extraChecks.timeLimit') }}
+                                </label>
+                                <InputNumber id="timeLimit" class="w-full" v-model="form.timeLimit" :min="10" :max="1000" />
+                                <ErrorMessage :field="v$.timeLimit" />
+                            </div>
+
+                            <div class="field col">
+                                <label for="memoryLimit">
+                                    {{ t('views.projects.extraChecks.memoryLimit') }}
+                                </label>
+                                <InputNumber id="numberOfGroups" class="w-full" v-model="form.memoryLimit" :min="50" :max="1024" />
+                                <ErrorMessage :field="v$.memoryLimit" />
+                            </div>
+                        </div>
+
+                        <!-- Visibility of the log files for students -->
+                        <div class="grid">
+                            <div class="flex align-items-center field-checkbox col-12">
+                                <InputSwitch id="showLog" v-model="form.showLog" />
+                                <label for="showLog">{{ t('views.projects.extraChecks.showLog') }}</label>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div class="col-12 lg:col-6">
+                        <!-- List to select/add the docker image -->
+                        <div class="grid">
+                            <!-- Docker image -->
+                            <div class="field col">
+                                <label for="dockerImage">
+                                    {{ t('views.projects.extraChecks.dockerImage') }}
+                                </label>
+                                <FileUpload
+                                    input="dockerImage"
+                                    mode="basic"
+                                    :multiple="false"
+                                    title="hellaur"
+                                    @select="onDockerImageUpload"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Submit button -->
+                <div class="grid align-items-end justify-content-end mr-3">
+                    <Button
+                        :label="t('views.projects.extraChecks.add')"
+                        type="submit"
+                        icon="pi pi-plus"
+                        iconPos="left"
+                        rounded
+                    />
+                </div>
+            </form>
+        </template>
+    </Dialog>
+</template>
+
+<style scoped lang="scss"></style>
\ No newline at end of file
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 6ad707d4..b1c5ae82 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -18,6 +18,7 @@ import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useCourses } from '@/composables/services/course.service';
+import ExtraChecksUpload from '@/components/projects/ExtraChecksUpload.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -39,7 +40,6 @@ const form = reactive({
     maxScore: 10,
     visibility: true,
     scoreVisibility: false,
-    bashScript: null,
     submissionStructure: null,
 });
 
@@ -57,11 +57,6 @@ const rules = computed(() => {
     };
 });
 
-// Function to handle the file upload of a bash script
-const onBashScriptUpload = (event: any): void => {
-    form.bashScript = event.files[0];
-};
-
 // Function to handle the file upload of a zip file containing the submission structure
 const onZipStructureUpload = (event: any): void => {
     form.submissionStructure = event.files[0];
@@ -229,18 +224,11 @@ async function submitProject(): Promise<void> {
 
                 <div class="col-12 lg:col-6">
                     <!-- Upload field for bash script -->
-                    <div class="field col">
-                        <label for="bashScript">
-                            {{ t('views.projects.bashUpload') }}
+                    <div class="field col-8">
+                        <label for="extraChecks">
+                            {{ t('views.projects.extraChecks.title') }}
                         </label>
-                        <FileUpload
-                            input="bashScript"
-                            mode="basic"
-                            accept=".sh"
-                            :multiple="false"
-                            title="hellaur"
-                            @select="onBashScriptUpload"
-                        />
+                        <ExtraChecksUpload id="extraChecks" />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->

From 43cd898a310c1e8c75049e4dab95ffbf7bf24b39 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 9 May 2024 19:29:30 +0200
Subject: [PATCH 03/15] chore: data table for docker images

---
 backend/api/views/docker_view.py              |  2 +-
 .../components/projects/ExtraChecksUpload.vue | 43 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/backend/api/views/docker_view.py b/backend/api/views/docker_view.py
index fb1b0346..6f3e9858 100644
--- a/backend/api/views/docker_view.py
+++ b/backend/api/views/docker_view.py
@@ -18,7 +18,7 @@ class DockerImageViewSet(RetrieveModelMixin, CreateModelMixin, UpdateModelMixin,
 
     queryset = DockerImage.objects.all()
     serializer_class = DockerImageSerializer
-    permission_classes = [DockerPermission, IsAdminUser]
+    permission_classes = [DockerPermission | IsAdminUser]
 
     @action(detail=False)
     def search(self, request: Request) -> Response:
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index cf7b1767..4605e5ee 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -6,14 +6,18 @@ import InputNumber from 'primevue/inputnumber';
 import InputText from 'primevue/inputtext';
 import FileUpload from 'primevue/fileupload';
 import InputSwitch from 'primevue/inputswitch';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import { useI18n } from 'vue-i18n';
-import { type Course } from '@/types/Course.ts';
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { useDockerImages } from '@/composables/services/docker.service.ts';
 
 /* Composable injections */
 const { t } = useI18n();
+const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
 
 /* Props */
 // const props = defineProps<{ course: Course }>();
@@ -74,6 +78,13 @@ function onBashScriptUpload(event: any): void {
 function onDockerImageUpload(event: any): void {
     form.dockerImage = event.files[0];
 }
+
+/**
+ * Load the docker images when the component is mounted
+ */
+onMounted(async () => {
+    await getDockerImages();
+});
 </script>
 
 <template>
@@ -160,20 +171,20 @@ function onDockerImageUpload(event: any): void {
 
                     <div class="col-12 lg:col-6">
                         <!-- List to select/add the docker image -->
-                        <div class="grid">
-                            <!-- Docker image -->
-                            <div class="field col">
-                                <label for="dockerImage">
-                                    {{ t('views.projects.extraChecks.dockerImage') }}
-                                </label>
-                                <FileUpload
-                                    input="dockerImage"
-                                    mode="basic"
-                                    :multiple="false"
-                                    title="hellaur"
-                                    @select="onDockerImageUpload"
-                                />
-                            </div>
+                        <div class="grid formgrid">
+                            <label for="dockerImage">
+                                {{ t('views.projects.extraChecks.dockerImage') }}
+                            </label>
+                            <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2">
+                                <Column field="name" header="Name"></Column>
+                                <Column field="public" header="Public">
+                                    <template #body="slotProps">
+                                        <!-- Use conditional rendering to display a check or cross -->
+                                        <span v-if="slotProps.data.public">&#10003;</span> <!-- Check mark for true -->
+                                        <span v-else>&#10005;</span> <!-- Cross mark for false -->
+                                    </template>
+                                </Column>                            
+                            </DataTable>
                         </div>
                     </div>
                 </div>

From 9ab771cf540cb7e6f593c84ae12d8db1f6942241 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 9 May 2024 21:19:35 +0200
Subject: [PATCH 04/15] chore: possibility to add private docker image

---
 .../components/projects/ExtraChecksUpload.vue | 35 +++++++++++++++----
 .../src/views/projects/UpdateProjectView.vue  |  1 -
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index 4605e5ee..5867681b 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -9,6 +9,7 @@ import InputSwitch from 'primevue/inputswitch';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import ErrorMessage from '@/components/forms/ErrorMessage.vue';
+import { DockerImage } from '@/types/DockerImage';
 import { useI18n } from 'vue-i18n';
 import { ref, reactive, computed, onMounted } from 'vue';
 import { required, helpers } from '@vuelidate/validators';
@@ -75,8 +76,21 @@ function onBashScriptUpload(event: any): void {
 /**
  * Function to upload the docker image
  */
-function onDockerImageUpload(event: any): void {
-    form.dockerImage = event.files[0];
+async function onDockerImageUpload(event: any): Promise<void> {
+    // Create a new docker image
+    const dockerImage = new DockerImage(
+        '',    // The ID is not needed
+        event.files[0].name,
+        '',    // File string is not needed
+        false, // Docker image should be private, no possibility to upload public images
+        '',    // No owner is needed
+    );
+
+    // Create the docker image in the backend
+    await createDockerImage(dockerImage, event.files[0]);
+
+    // Refresh the list of docker images
+    await getDockerImages();
 }
 
 /**
@@ -134,7 +148,6 @@ onMounted(async () => {
                                     mode="basic"
                                     accept=".sh"
                                     :multiple="false"
-                                    title="hellaur"
                                     @select="onBashScriptUpload"
                                 />
                             </div>
@@ -175,16 +188,24 @@ onMounted(async () => {
                             <label for="dockerImage">
                                 {{ t('views.projects.extraChecks.dockerImage') }}
                             </label>
-                            <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2">
+                            <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2" scrollable scrollHeight="300px">
                                 <Column field="name" header="Name"></Column>
                                 <Column field="public" header="Public">
                                     <template #body="slotProps">
-                                        <!-- Use conditional rendering to display a check or cross -->
-                                        <span v-if="slotProps.data.public">&#10003;</span> <!-- Check mark for true -->
-                                        <span v-else>&#10005;</span> <!-- Cross mark for false -->
+                                        <!-- Use check and cross icons to indicate if the image is public or not -->
+                                        <i v-if="slotProps.data.public" class="pi pi-check"/>
+                                        <i v-else class="pi pi-times"/>
                                     </template>
                                 </Column>                            
                             </DataTable>
+
+                            <!-- Button to add a private docker image for this project -->
+                            <FileUpload
+                                mode="basic"
+                                :multiple="false"
+                                :auto="true"
+                                @select="onDockerImageUpload"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 66eb805e..75500cfb 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -244,7 +244,6 @@ async function submitProject(): Promise<void> {
                             mode="basic"
                             accept=".sh"
                             :multiple="false"
-                            title="hellaur"
                             @select="onDockerScriptUpload"
                         />
                     </div>

From 9ed0c5445fa6fd0da52d1b288b8149ecbb63259d Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Thu, 9 May 2024 23:00:06 +0200
Subject: [PATCH 05/15] chore: display list of extra checks that were made

---
 frontend/src/assets/lang/app/nl.json          |   2 +-
 .../components/projects/ExtraChecksUpload.vue | 121 +++++++++++++-----
 frontend/src/types/ExtraCheck.ts              |  30 ++++-
 .../src/views/projects/CreateProjectView.vue  |  12 +-
 .../src/views/projects/UpdateProjectView.vue  |   2 +
 5 files changed, 131 insertions(+), 36 deletions(-)

diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 2d05624a..12503c2f 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -72,7 +72,7 @@
             "submissionStructure": "Structuur van hoe de indiening moet gebeuren",
             "noStudents": "Geen studenten in deze groep",
             "extraChecks": {
-                "title": "Voeg een automatische check toe",
+                "title": "Automatische checks voor project",
                 "add": "Nieuwe check",
                 "name": "Naam",
                 "bashScript": "Bash script",
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index 5867681b..79120de9 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -8,10 +8,13 @@ import FileUpload from 'primevue/fileupload';
 import InputSwitch from 'primevue/inputswitch';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
+import DataView from 'primevue/dataview';
+import ButtonGroup from 'primevue/buttongroup';
 import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import { DockerImage } from '@/types/DockerImage';
+import { ExtraCheck } from '@/types/ExtraCheck';
 import { useI18n } from 'vue-i18n';
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
@@ -21,11 +24,14 @@ const { t } = useI18n();
 const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
 
 /* Props */
-// const props = defineProps<{ course: Course }>();
+const props = defineProps<{ createChecksBackend: Boolean }>();
 
 /* State for the dialog to create an extra check */
 const displayExtraCheckCreation = ref(false);
 
+/* List with the extra checks */
+const extraChecks = ref<ExtraCheck[]>([]);
+
 /* Form content */
 const form = reactive({
     name: '',
@@ -54,16 +60,39 @@ const v$ = useVuelidate(rules, form);
  * Function to save the extra check
  */
  async function saveExtraCheck(): Promise<void> {
-    // // Validate the form
-    // const validated = await v$.value.$validate();
+    // Validate the form
+    const validated = await v$.value.$validate();
+
+    // Save the extra checks component
+    if (validated) {
+        // Create the extra check
+        const extraCheck = new ExtraCheck(
+            '',    // The ID is not needed
+            form.name,
+            form.dockerImage,
+            form.bashFile,
+            form.timeLimit,
+            form.memoryLimit,
+            form.showLog,
+        );
+
+        // Add the extra check to the list with checks that should be created, if the creation is successful
+        extraChecks.value.push(extraCheck);
 
-    // // Get the course object from the course ID
-    // await getCourseByID(params.courseId as string);
+        // Close the dialog
+        displayExtraCheckCreation.value = false;
 
-    // // Only submit the form if the validation was successful
-    // if (validated && course.value !== null) {
+        // Reset the form
+        form.name = '';
+        form.dockerImage = null;
+        form.bashFile = null;
+        form.timeLimit = 30;
+        form.memoryLimit = 128;
+        form.showLog = true;
 
-    // }
+        // Reset the validation
+        v$.value.$reset();
+    }
 }
 
 /**
@@ -93,6 +122,19 @@ async function onDockerImageUpload(event: any): Promise<void> {
     await getDockerImages();
 }
 
+/**
+ * Watcher to create the checks in the backend when the signal is received
+ */
+watch(() => props.createChecksBackend, async (value) => {
+    if (value) {
+        // Create the extra checks in the backend
+        extraChecks.value.forEach(async (extraCheck) => {
+            // Create the extra check in the backend
+            // await createExtraCheck(extraCheck);
+        });
+    }
+});
+
 /**
  * Load the docker images when the component is mounted
  */
@@ -102,6 +144,20 @@ onMounted(async () => {
 </script>
 
 <template>
+    <!-- List with the extra checks -->
+    <DataView :value="extraChecks" data-key="id">
+        <template #list="slotProps">
+            <div v-for="(item, index) in slotProps.items" :key="index" class="flex align-items-center justify-content-between mr-6">
+                <p class="text-lg font-semibold">{{ item.name }}</p>
+
+                <ButtonGroup class="flex gap-2">
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger" @click="extraChecks.splice(index, 1)" />
+                </ButtonGroup>
+            </div>
+        </template>
+    </DataView>
+
+    <!-- Button to add a new extra check -->
     <Button
         class="p-button-primary"
         @click="displayExtraCheckCreation = true"
@@ -150,6 +206,7 @@ onMounted(async () => {
                                     :multiple="false"
                                     @select="onBashScriptUpload"
                                 />
+                                <ErrorMessage :field="v$.bashFile" />
                             </div>
                         </div>
 
@@ -185,27 +242,31 @@ onMounted(async () => {
                     <div class="col-12 lg:col-6">
                         <!-- List to select/add the docker image -->
                         <div class="grid formgrid">
-                            <label for="dockerImage">
-                                {{ t('views.projects.extraChecks.dockerImage') }}
-                            </label>
-                            <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2" scrollable scrollHeight="300px">
-                                <Column field="name" header="Name"></Column>
-                                <Column field="public" header="Public">
-                                    <template #body="slotProps">
-                                        <!-- Use check and cross icons to indicate if the image is public or not -->
-                                        <i v-if="slotProps.data.public" class="pi pi-check"/>
-                                        <i v-else class="pi pi-times"/>
-                                    </template>
-                                </Column>                            
-                            </DataTable>
-
-                            <!-- Button to add a private docker image for this project -->
-                            <FileUpload
-                                mode="basic"
-                                :multiple="false"
-                                :auto="true"
-                                @select="onDockerImageUpload"
-                            />
+                            <div class="col">
+                                <label for="dockerImage">
+                                    {{ t('views.projects.extraChecks.dockerImage') }}
+                                </label>
+                                <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2" scrollable scrollHeight="300px">
+                                    <Column field="name" header="Name"></Column>
+                                    <Column field="public" header="Public">
+                                        <template #body="slotProps">
+                                            <!-- Use check and cross icons to indicate if the image is public or not -->
+                                            <i v-if="slotProps.data.public" class="pi pi-check"/>
+                                            <i v-else class="pi pi-times"/>
+                                        </template>
+                                    </Column>                            
+                                </DataTable>
+                                <ErrorMessage :field="v$.dockerImage" />
+
+                                <!-- Button to add a private docker image for this project -->
+                                <FileUpload
+                                    mode="basic"
+                                    :multiple="false"
+                                    :auto="true"
+                                    @select="onDockerImageUpload"
+                                    :chooseLabel="t('views.projects.extraChecks.dockerImage')"
+                                />
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/frontend/src/types/ExtraCheck.ts b/frontend/src/types/ExtraCheck.ts
index ba0bb614..6847a6fa 100644
--- a/frontend/src/types/ExtraCheck.ts
+++ b/frontend/src/types/ExtraCheck.ts
@@ -1,4 +1,30 @@
+import { DockerImage } from "./DockerImage";
+
 export class ExtraCheck {
-    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-    constructor() {}
+    constructor(
+        public id: string,
+        public name: string,
+        public dockerImage: DockerImage | null,
+        public bashFile: File | null,
+        public timeLimit: number,
+        public memoryLimit: number,
+        public showLog: boolean,
+    ) {}
+
+    /**
+     * Convert an extra check object to a extraCheck instance.
+     *
+     * @param extraCheck
+     */
+    static fromJSON(extraCheck: ExtraCheck): ExtraCheck {
+        return new ExtraCheck(
+            extraCheck.id,
+            extraCheck.name,
+            null,
+            null,
+            extraCheck.timeLimit,
+            extraCheck.memoryLimit,
+            extraCheck.showLog,
+        );
+    }
 }
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index b1c5ae82..e7cba59a 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -10,7 +10,7 @@ import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
 import { SubmissionStatus } from '@/types/SubmisionStatus';
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Project } from '@/types/Project';
@@ -29,6 +29,9 @@ const { params } = useRoute();
 const { createProject } = useProject();
 const { course, getCourseByID } = useCourses();
 
+/* State */
+const createExtraChecksBackend = ref<boolean>(false);
+
 /* Form content */
 const form = reactive({
     name: '',
@@ -99,6 +102,9 @@ async function submitProject(): Promise<void> {
             form.numberOfGroups ?? 0,
         );
 
+        // Make sure the extra checks are created in the backend
+        createExtraChecksBackend.value = true;
+
         // Redirect to the dashboard overview
         await push({ name: 'dashboard' });
     }
@@ -224,11 +230,11 @@ async function submitProject(): Promise<void> {
 
                 <div class="col-12 lg:col-6">
                     <!-- Upload field for bash script -->
-                    <div class="field col-8">
+                    <div class="field col">
                         <label for="extraChecks">
                             {{ t('views.projects.extraChecks.title') }}
                         </label>
-                        <ExtraChecksUpload id="extraChecks" />
+                        <ExtraChecksUpload id="extraChecks" :create-checks-backend="createExtraChecksBackend" />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 75500cfb..b129b510 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -9,6 +9,7 @@ import Editor from '@/components/forms/Editor.vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import { SubmissionStatus } from '@/types/SubmisionStatus';
 import { reactive, computed, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -112,6 +113,7 @@ async function submitProject(): Promise<void> {
                 form.scoreVisibility,
                 form.groupSize,
                 course.value,
+                new SubmissionStatus(0, 0, 0), // Default submission status
                 form.submissionStructure,
             ),
         );

From f612e8697cee1a0f5bca2d47f98244ef79f7035b Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Fri, 10 May 2024 17:07:47 +0200
Subject: [PATCH 06/15] fix: refix code for sharing course link

---
 backend/api/serializers/course_serializer.py | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/backend/api/serializers/course_serializer.py b/backend/api/serializers/course_serializer.py
index d363fd11..5d995446 100644
--- a/backend/api/serializers/course_serializer.py
+++ b/backend/api/serializers/course_serializer.py
@@ -130,13 +130,6 @@ class CourseCloneSerializer(serializers.Serializer):
 class SaveInvitationLinkSerializer(serializers.Serializer):
     link_duration = serializers.IntegerField(required=True)
 
-    def validate(self, attrs):
-        # Check if there is no course with the same invitation link.
-        if Course.objects.filter(invitation_link=attrs["invitation_link"]).exists():
-            raise ValidationError(gettext("courses.error.invitation_link"))
-
-        return attrs
-
     def create(self, validated_data):
         # Save the invitation link and the expiration date.
         if "course" not in self.context:

From 5d1be8cc3764097255c629023e9a61d04204fdb9 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Fri, 10 May 2024 21:48:56 +0200
Subject: [PATCH 07/15] chore: backend requests for extra checks creation

---
 backend/api/models/checks.py                  |  7 ------
 .../components/projects/ExtraChecksUpload.vue |  6 +++--
 .../projects/ProjectCreateButton.vue          |  2 +-
 .../composables/services/project.service.ts   | 22 +++++++++++++++++++
 frontend/src/config/endpoints.ts              |  1 +
 .../src/views/projects/CreateProjectView.vue  | 12 +++++++---
 6 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/backend/api/models/checks.py b/backend/api/models/checks.py
index ccf511e6..efc7b42d 100644
--- a/backend/api/models/checks.py
+++ b/backend/api/models/checks.py
@@ -66,13 +66,6 @@ class ExtraCheck(models.Model):
         null=False
     )
 
-    # Name of the extra check
-    name = models.CharField(
-        max_length=255,
-        blank=False,
-        null=False
-    )
-
     # Link to the project
     project = models.ForeignKey(
         Project,
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index 79120de9..51c7eb9b 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -18,13 +18,15 @@ import { ref, reactive, computed, onMounted, watch } from 'vue';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
+import { useProject } from '@/composables/services/project.service.ts';
 
 /* Composable injections */
 const { t } = useI18n();
 const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
+const { addExtraCheck } = useProject();
 
 /* Props */
-const props = defineProps<{ createChecksBackend: Boolean }>();
+const props = defineProps<{ projectId: string, createChecksBackend: Boolean }>();
 
 /* State for the dialog to create an extra check */
 const displayExtraCheckCreation = ref(false);
@@ -130,7 +132,7 @@ watch(() => props.createChecksBackend, async (value) => {
         // Create the extra checks in the backend
         extraChecks.value.forEach(async (extraCheck) => {
             // Create the extra check in the backend
-            // await createExtraCheck(extraCheck);
+            await addExtraCheck(extraCheck, props.projectId);
         });
     }
 });
diff --git a/frontend/src/components/projects/ProjectCreateButton.vue b/frontend/src/components/projects/ProjectCreateButton.vue
index fd18a5d9..4fdeaa8a 100644
--- a/frontend/src/components/projects/ProjectCreateButton.vue
+++ b/frontend/src/components/projects/ProjectCreateButton.vue
@@ -53,7 +53,7 @@ const handleCreateButton = (): void => {
         >
             <template #header>
                 <h2 class="my-3 text-primary">
-                    {{ t('components.button.selectCourse') }}
+                    {{ t('components.list.selectCourse') }}
                 </h2>
             </template>
             <template #default>
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index fc0bd13c..233ad98c 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -4,6 +4,7 @@ import { endpoints } from '@/config/endpoints.ts';
 import axios from 'axios';
 import { create, deleteId, get, getList, patch, processError } from '@/composables/services/helpers.ts';
 import { type Response } from '@/types/Response.ts';
+import { ExtraCheck } from '@/types/ExtraCheck';
 
 interface ProjectState {
     projects: Ref<Project[] | null>;
@@ -17,11 +18,13 @@ interface ProjectState {
     createProject: (projectData: Project, courseId: string, numberOfGroups: number) => Promise<void>;
     updateProject: (projectData: Project) => Promise<void>;
     deleteProject: (id: string) => Promise<void>;
+    addExtraCheck: (extraCheckData: ExtraCheck, projectId: string) => Promise<void>;
 }
 
 export function useProject(): ProjectState {
     const projects = ref<Project[] | null>(null);
     const project = ref<Project | null>(null);
+    const extraCheck = ref<ExtraCheck | null>(null);
     const response = ref<Response | null>(null);
 
     async function getProjectByID(id: string): Promise<void> {
@@ -132,6 +135,23 @@ export function useProject(): ProjectState {
         await deleteId<Project>(endpoint, project, Project.fromJSON);
     }
 
+    async function addExtraCheck(extraCheckData: ExtraCheck, projectId: string): Promise<void> {
+        const endpoint = endpoints.projects.extraChecks.replace('{projectId}', projectId);
+        await create<ExtraCheck>(
+            endpoint, 
+            {
+                name: extraCheckData.name,
+                docker_image: extraCheckData.dockerImage?.id,
+                file: extraCheckData.bashFile,
+                time_limit: extraCheckData.timeLimit,
+                memory_limit: extraCheckData.memoryLimit,
+                show_log: extraCheckData.showLog,
+            },
+            extraCheck, 
+            ExtraCheck.fromJSON
+        );
+    }
+
     return {
         projects,
         project,
@@ -145,5 +165,7 @@ export function useProject(): ProjectState {
         createProject,
         updateProject,
         deleteProject,
+
+        addExtraCheck,
     };
 }
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index 2fe0acbe..d30d5a89 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -67,6 +67,7 @@ export const endpoints = {
         byStudent: '/api/students/{studentId}/projects/',
         byTeacher: '/api/teachers/{teacherId}/projects/',
         byAssistant: '/api/assistants/{assistantId}/projects/',
+        extraChecks: '/api/projects/{projectId}/extra_checks/',
     },
     submissions: {
         retrieve: '/api/submissions/{id}',
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index e7cba59a..bf22ecc4 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -26,11 +26,12 @@ const { push } = useRouter();
 const { params } = useRoute();
 
 /* Service injection */
-const { createProject } = useProject();
+const { project, createProject } = useProject();
 const { course, getCourseByID } = useCourses();
 
 /* State */
 const createExtraChecksBackend = ref<boolean>(false);
+const projectId = ref<string>('');
 
 /* Form content */
 const form = reactive({
@@ -74,6 +75,8 @@ const v$ = useVuelidate(rules, form);
 async function submitProject(): Promise<void> {
     // Validate the form
     const validated = await v$.value.$validate();
+    console.log('validated', validated);
+    console.log(v$.value.$errors);
 
     // Get the course object from the course ID
     await getCourseByID(params.courseId as string);
@@ -103,7 +106,10 @@ async function submitProject(): Promise<void> {
         );
 
         // Make sure the extra checks are created in the backend
-        createExtraChecksBackend.value = true;
+        if (project.value !== null){
+            projectId.value = project.value.id;
+            createExtraChecksBackend.value = true;
+        }
 
         // Redirect to the dashboard overview
         await push({ name: 'dashboard' });
@@ -234,7 +240,7 @@ async function submitProject(): Promise<void> {
                         <label for="extraChecks">
                             {{ t('views.projects.extraChecks.title') }}
                         </label>
-                        <ExtraChecksUpload id="extraChecks" :create-checks-backend="createExtraChecksBackend" />
+                        <ExtraChecksUpload id="extraChecks" :create-checks-backend="createExtraChecksBackend" :project-id="projectId" />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->

From 91fb1d57f36d300d3a9b60b41252a687e09d515e Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Fri, 10 May 2024 22:58:49 +0200
Subject: [PATCH 08/15] chore: working creation of extra check

---
 .../composables/services/project.service.ts   |  3 ++-
 .../src/views/projects/CreateProjectView.vue  | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 233ad98c..1384f854 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -148,7 +148,8 @@ export function useProject(): ProjectState {
                 show_log: extraCheckData.showLog,
             },
             extraCheck, 
-            ExtraCheck.fromJSON
+            ExtraCheck.fromJSON,
+            'multipart/form-data',
         );
     }
 
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index bf22ecc4..4406b442 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -66,17 +66,28 @@ const onZipStructureUpload = (event: any): void => {
     form.submissionStructure = event.files[0];
 };
 
-// useVuelidate function to perform form validation
+// Vuelidate validation
 const v$ = useVuelidate(rules, form);
 
+// Validate the create project form
+const validateForm = () => {
+    v$.value.name.$touch();
+    v$.value.startDate.$touch();
+    v$.value.deadline.$touch();
+    v$.value.groupSize.$touch();
+    v$.value.maxScore.$touch();
+    return ! v$.value.name.$invalid && ! v$.value.startDate.$invalid && ! v$.value.deadline.$invalid 
+    && ! v$.value.groupSize.$invalid && ! v$.value.maxScore.$invalid;
+};
+
 /**
  * Function to submit the project form.
  */
 async function submitProject(): Promise<void> {
     // Validate the form
-    const validated = await v$.value.$validate();
-    console.log('validated', validated);
-    console.log(v$.value.$errors);
+    const validated = validateForm();
+
+    console.log('validated', v$.value.$errors);
 
     // Get the course object from the course ID
     await getCourseByID(params.courseId as string);

From 9651a5a7b32d70757648e7807e92e54019ffaa07 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 11 May 2024 15:17:25 +0200
Subject: [PATCH 09/15] fix: translations + empty checks list

---
 frontend/src/assets/lang/app/en.json               | 13 ++++++++++++-
 frontend/src/assets/lang/app/nl.json               |  3 ++-
 .../src/components/projects/ExtraChecksUpload.vue  |  9 +++++----
 frontend/src/views/projects/CreateProjectView.vue  | 14 +++++++-------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index 7e1905fc..15cbbd29 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -73,7 +73,18 @@
             "submissionStructure": "Structure of how a submission should be made",
             "noStudents": "No students in this group",
             "locked": "Closed",
-            "unlocked": "Open"
+            "unlocked": "Open",
+            "extraChecks": {
+                "title": "Automatic checks on a submission",
+                "add": "New check",
+                "name": "Name",
+                "public": "Public",
+                "bashScript": "Bash script",
+                "dockerImage": "Docker image",
+                "timeLimit": "Time limit for execution (in seconds)",
+                "memoryLimit": "Memory limit for execution (in MB)",
+                "showLog": "Show logfile to students"
+            }
         },
         "submissions": {
             "title": "Submissions",
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 12503c2f..7e10cb4b 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -72,9 +72,10 @@
             "submissionStructure": "Structuur van hoe de indiening moet gebeuren",
             "noStudents": "Geen studenten in deze groep",
             "extraChecks": {
-                "title": "Automatische checks voor project",
+                "title": "Automatische checks op een indiening",
                 "add": "Nieuwe check",
                 "name": "Naam",
+                "public": "Publiek",
                 "bashScript": "Bash script",
                 "dockerImage": "Docker image",
                 "timeLimit": "Tijdslimiet voor de uitvoering (in seconden)",
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index 51c7eb9b..ae2a7bfa 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -147,17 +147,18 @@ onMounted(async () => {
 
 <template>
     <!-- List with the extra checks -->
-    <DataView :value="extraChecks" data-key="id">
+    <DataView :value="extraChecks" data-key="id" v-if="extraChecks.length > 0">
         <template #list="slotProps">
             <div v-for="(item, index) in slotProps.items" :key="index" class="flex align-items-center justify-content-between mr-6">
                 <p class="text-lg font-semibold">{{ item.name }}</p>
 
                 <ButtonGroup class="flex gap-2">
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger" @click="extraChecks.splice(index, 1)" />
+                    <Button icon="pi pi-times" class="p-button p-button-danger" @click="extraChecks.splice(index, 1)" />
                 </ButtonGroup>
             </div>
         </template>
     </DataView>
+    
 
     <!-- Button to add a new extra check -->
     <Button
@@ -249,8 +250,8 @@ onMounted(async () => {
                                     {{ t('views.projects.extraChecks.dockerImage') }}
                                 </label>
                                 <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2" scrollable scrollHeight="300px">
-                                    <Column field="name" header="Name"></Column>
-                                    <Column field="public" header="Public">
+                                    <Column field="name" :header="t('views.projects.extraChecks.name')"></Column>
+                                    <Column field="public" :header="t('views.projects.extraChecks.public')">
                                         <template #body="slotProps">
                                             <!-- Use check and cross icons to indicate if the image is public or not -->
                                             <i v-if="slotProps.data.public" class="pi pi-check"/>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 4406b442..d3fbc20f 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -87,8 +87,6 @@ async function submitProject(): Promise<void> {
     // Validate the form
     const validated = validateForm();
 
-    console.log('validated', v$.value.$errors);
-
     // Get the course object from the course ID
     await getCourseByID(params.courseId as string);
 
@@ -245,12 +243,10 @@ async function submitProject(): Promise<void> {
                     />
                 </div>
 
-                <div class="col-12 lg:col-6">
+                <div class="col-12 lg:col-6 checks">
                     <!-- Upload field for bash script -->
                     <div class="field col">
-                        <label for="extraChecks">
-                            {{ t('views.projects.extraChecks.title') }}
-                        </label>
+                        <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload id="extraChecks" :create-checks-backend="createExtraChecksBackend" :project-id="projectId" />
                     </div>
 
@@ -273,5 +269,9 @@ async function submitProject(): Promise<void> {
     </BaseLayout>
 </template>
 
-<style scoped></style>
+<style scoped>
+.checks .field.col > * {
+    display: block;
+}
+</style>
 @/types/Project

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

---
 .../components/projects/ExtraChecksUpload.vue | 81 ++++++++++++-------
 .../composables/services/project.service.ts   | 12 +--
 frontend/src/types/ExtraCheck.ts              |  2 +-
 .../src/views/projects/CreateProjectView.vue  | 19 +++--
 4 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index ae2a7bfa..a0cb4e74 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -26,7 +26,7 @@ const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
 const { addExtraCheck } = useProject();
 
 /* Props */
-const props = defineProps<{ projectId: string, createChecksBackend: Boolean }>();
+const props = defineProps<{ projectId: string; createChecksBackend: boolean }>();
 
 /* State for the dialog to create an extra check */
 const displayExtraCheckCreation = ref(false);
@@ -61,7 +61,7 @@ const v$ = useVuelidate(rules, form);
 /**
  * Function to save the extra check
  */
- async function saveExtraCheck(): Promise<void> {
+async function saveExtraCheck(): Promise<void> {
     // Validate the form
     const validated = await v$.value.$validate();
 
@@ -69,7 +69,7 @@ const v$ = useVuelidate(rules, form);
     if (validated) {
         // Create the extra check
         const extraCheck = new ExtraCheck(
-            '',    // The ID is not needed
+            '', // The ID is not needed
             form.name,
             form.dockerImage,
             form.bashFile,
@@ -110,15 +110,15 @@ function onBashScriptUpload(event: any): void {
 async function onDockerImageUpload(event: any): Promise<void> {
     // Create a new docker image
     const dockerImage = new DockerImage(
-        '',    // The ID is not needed
-        event.files[0].name,
-        '',    // File string is not needed
+        '', // The ID is not needed
+        event.files[0].name as string,
+        '', // File string is not needed
         false, // Docker image should be private, no possibility to upload public images
-        '',    // No owner is needed
+        '', // No owner is needed
     );
 
     // Create the docker image in the backend
-    await createDockerImage(dockerImage, event.files[0]);
+    await createDockerImage(dockerImage, event.files[0] as File);
 
     // Refresh the list of docker images
     await getDockerImages();
@@ -127,15 +127,18 @@ async function onDockerImageUpload(event: any): Promise<void> {
 /**
  * Watcher to create the checks in the backend when the signal is received
  */
-watch(() => props.createChecksBackend, async (value) => {
-    if (value) {
-        // Create the extra checks in the backend
-        extraChecks.value.forEach(async (extraCheck) => {
-            // Create the extra check in the backend
-            await addExtraCheck(extraCheck, props.projectId);
-        });
-    }
-});
+watch(
+    () => props.createChecksBackend,
+    async (value) => {
+        if (value) {
+            // Create the extra checks in the backend
+            extraChecks.value.forEach((extraCheck) => {
+                // Create the extra check in the backend
+                await addExtraCheck(extraCheck, props.projectId);
+            });
+        }
+    },
+);
 
 /**
  * Load the docker images when the component is mounted
@@ -149,7 +152,11 @@ onMounted(async () => {
     <!-- List with the extra checks -->
     <DataView :value="extraChecks" data-key="id" v-if="extraChecks.length > 0">
         <template #list="slotProps">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="flex align-items-center justify-content-between mr-6">
+            <div
+                v-for="(item, index) in slotProps.items"
+                :key="index"
+                class="flex align-items-center justify-content-between mr-6"
+            >
                 <p class="text-lg font-semibold">{{ item.name }}</p>
 
                 <ButtonGroup class="flex gap-2">
@@ -158,7 +165,6 @@ onMounted(async () => {
             </div>
         </template>
     </DataView>
-    
 
     <!-- Button to add a new extra check -->
     <Button
@@ -219,7 +225,13 @@ onMounted(async () => {
                                 <label for="timeLimit">
                                     {{ t('views.projects.extraChecks.timeLimit') }}
                                 </label>
-                                <InputNumber id="timeLimit" class="w-full" v-model="form.timeLimit" :min="10" :max="1000" />
+                                <InputNumber
+                                    id="timeLimit"
+                                    class="w-full"
+                                    v-model="form.timeLimit"
+                                    :min="10"
+                                    :max="1000"
+                                />
                                 <ErrorMessage :field="v$.timeLimit" />
                             </div>
 
@@ -227,7 +239,13 @@ onMounted(async () => {
                                 <label for="memoryLimit">
                                     {{ t('views.projects.extraChecks.memoryLimit') }}
                                 </label>
-                                <InputNumber id="numberOfGroups" class="w-full" v-model="form.memoryLimit" :min="50" :max="1024" />
+                                <InputNumber
+                                    id="numberOfGroups"
+                                    class="w-full"
+                                    v-model="form.memoryLimit"
+                                    :min="50"
+                                    :max="1024"
+                                />
                                 <ErrorMessage :field="v$.memoryLimit" />
                             </div>
                         </div>
@@ -239,7 +257,6 @@ onMounted(async () => {
                                 <label for="showLog">{{ t('views.projects.extraChecks.showLog') }}</label>
                             </div>
                         </div>
-
                     </div>
 
                     <div class="col-12 lg:col-6">
@@ -249,15 +266,25 @@ onMounted(async () => {
                                 <label for="dockerImage">
                                     {{ t('views.projects.extraChecks.dockerImage') }}
                                 </label>
-                                <DataTable v-model:selection="form.dockerImage" :value="dockerImages" selectionMode="single" dataKey="id" tableStyle="min-width: 30rem" id="dockerImage" class="w-full mt-2 mb-2" scrollable scrollHeight="300px">
+                                <DataTable
+                                    v-model:selection="form.dockerImage"
+                                    :value="dockerImages"
+                                    selectionMode="single"
+                                    dataKey="id"
+                                    tableStyle="min-width: 30rem"
+                                    id="dockerImage"
+                                    class="w-full mt-2 mb-2"
+                                    scrollable
+                                    scrollHeight="300px"
+                                >
                                     <Column field="name" :header="t('views.projects.extraChecks.name')"></Column>
                                     <Column field="public" :header="t('views.projects.extraChecks.public')">
                                         <template #body="slotProps">
                                             <!-- Use check and cross icons to indicate if the image is public or not -->
-                                            <i v-if="slotProps.data.public" class="pi pi-check"/>
-                                            <i v-else class="pi pi-times"/>
+                                            <i v-if="slotProps.data.public" class="pi pi-check" />
+                                            <i v-else class="pi pi-times" />
                                         </template>
-                                    </Column>                            
+                                    </Column>
                                 </DataTable>
                                 <ErrorMessage :field="v$.dockerImage" />
 
@@ -288,4 +315,4 @@ onMounted(async () => {
     </Dialog>
 </template>
 
-<style scoped lang="scss"></style>
\ No newline at end of file
+<style scoped lang="scss"></style>
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 1384f854..827e5a8b 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -99,13 +99,7 @@ export function useProject(): ProjectState {
             requestData.number_groups = numberOfGroups;
         }
 
-        await create<Project>(
-            endpoint,
-            requestData,
-            project,
-            Project.fromJSON,
-            'multipart/form-data',
-        );
+        await create<Project>(endpoint, requestData, project, Project.fromJSON, 'multipart/form-data');
     }
 
     async function updateProject(projectData: Project): Promise<void> {
@@ -138,7 +132,7 @@ export function useProject(): ProjectState {
     async function addExtraCheck(extraCheckData: ExtraCheck, projectId: string): Promise<void> {
         const endpoint = endpoints.projects.extraChecks.replace('{projectId}', projectId);
         await create<ExtraCheck>(
-            endpoint, 
+            endpoint,
             {
                 name: extraCheckData.name,
                 docker_image: extraCheckData.dockerImage?.id,
@@ -147,7 +141,7 @@ export function useProject(): ProjectState {
                 memory_limit: extraCheckData.memoryLimit,
                 show_log: extraCheckData.showLog,
             },
-            extraCheck, 
+            extraCheck,
             ExtraCheck.fromJSON,
             'multipart/form-data',
         );
diff --git a/frontend/src/types/ExtraCheck.ts b/frontend/src/types/ExtraCheck.ts
index 6847a6fa..26d34d38 100644
--- a/frontend/src/types/ExtraCheck.ts
+++ b/frontend/src/types/ExtraCheck.ts
@@ -1,4 +1,4 @@
-import { DockerImage } from "./DockerImage";
+import { type DockerImage } from './DockerImage';
 
 export class ExtraCheck {
     constructor(
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index d3fbc20f..7102989c 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -70,14 +70,19 @@ const onZipStructureUpload = (event: any): void => {
 const v$ = useVuelidate(rules, form);
 
 // Validate the create project form
-const validateForm = () => {
+const validateForm = (): boolean => {
     v$.value.name.$touch();
     v$.value.startDate.$touch();
     v$.value.deadline.$touch();
     v$.value.groupSize.$touch();
     v$.value.maxScore.$touch();
-    return ! v$.value.name.$invalid && ! v$.value.startDate.$invalid && ! v$.value.deadline.$invalid 
-    && ! v$.value.groupSize.$invalid && ! v$.value.maxScore.$invalid;
+    return (
+        !v$.value.name.$invalid &&
+        !v$.value.startDate.$invalid &&
+        !v$.value.deadline.$invalid &&
+        !v$.value.groupSize.$invalid &&
+        !v$.value.maxScore.$invalid
+    );
 };
 
 /**
@@ -115,7 +120,7 @@ async function submitProject(): Promise<void> {
         );
 
         // Make sure the extra checks are created in the backend
-        if (project.value !== null){
+        if (project.value !== null) {
             projectId.value = project.value.id;
             createExtraChecksBackend.value = true;
         }
@@ -247,7 +252,11 @@ async function submitProject(): Promise<void> {
                     <!-- Upload field for bash script -->
                     <div class="field col">
                         <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
-                        <ExtraChecksUpload id="extraChecks" :create-checks-backend="createExtraChecksBackend" :project-id="projectId" />
+                        <ExtraChecksUpload
+                            id="extraChecks"
+                            :create-checks-backend="createExtraChecksBackend"
+                            :project-id="projectId"
+                        />
                     </div>
 
                     <!-- Upload field for a zip file that contains the submission structure -->

From 3531a462a7e4227bbadc828658e8b5ddda2c8873 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 11 May 2024 22:11:18 +0200
Subject: [PATCH 11/15] chore: extra checks services + edit project
 functionality

---
 .../components/projects/ExtraChecksUpload.vue | 60 +++++++++++++------
 .../services/extra_checks.service.ts          | 56 +++++++++++++++++
 .../composables/services/project.service.ts   | 23 -------
 frontend/src/config/endpoints.ts              |  5 +-
 frontend/src/types/ExtraCheck.ts              | 20 +++----
 .../src/views/projects/CreateProjectView.vue  |  4 +-
 .../src/views/projects/UpdateProjectView.vue  | 59 +++++++++++-------
 7 files changed, 153 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/composables/services/extra_checks.service.ts

diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index a0cb4e74..35bfc327 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -9,7 +9,6 @@ import InputSwitch from 'primevue/inputswitch';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import DataView from 'primevue/dataview';
-import ButtonGroup from 'primevue/buttongroup';
 import ErrorMessage from '@/components/forms/ErrorMessage.vue';
 import { DockerImage } from '@/types/DockerImage';
 import { ExtraCheck } from '@/types/ExtraCheck';
@@ -18,12 +17,12 @@ import { ref, reactive, computed, onMounted, watch } from 'vue';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useDockerImages } from '@/composables/services/docker.service.ts';
-import { useProject } from '@/composables/services/project.service.ts';
+import { useExtraCheck } from '@/composables/services/extra_checks.service';
 
 /* Composable injections */
 const { t } = useI18n();
 const { dockerImages, getDockerImages, createDockerImage } = useDockerImages();
-const { addExtraCheck } = useProject();
+const { extraChecks, getExtraChecksByProject, addExtraCheck, deleteExtraCheck } = useExtraCheck();
 
 /* Props */
 const props = defineProps<{ projectId: string; createChecksBackend: boolean }>();
@@ -31,8 +30,11 @@ const props = defineProps<{ projectId: string; createChecksBackend: boolean }>()
 /* State for the dialog to create an extra check */
 const displayExtraCheckCreation = ref(false);
 
-/* List with the extra checks */
-const extraChecks = ref<ExtraCheck[]>([]);
+/* List with all the extra checks */
+const extraChecksList = ref<ExtraCheck[]>([]);
+
+/* List with the extra checks that are already in the backend */
+const extraChecksInBackendList = ref<ExtraCheck[]>([]);
 
 /* Form content */
 const form = reactive({
@@ -78,8 +80,8 @@ async function saveExtraCheck(): Promise<void> {
             form.showLog,
         );
 
-        // Add the extra check to the list with checks that should be created, if the creation is successful
-        extraChecks.value.push(extraCheck);
+        // Add the extra check to the list with checks
+        extraChecksList.value.push(extraCheck);
 
         // Close the dialog
         displayExtraCheckCreation.value = false;
@@ -114,7 +116,7 @@ async function onDockerImageUpload(event: any): Promise<void> {
         event.files[0].name as string,
         '', // File string is not needed
         false, // Docker image should be private, no possibility to upload public images
-        '', // No owner is needed
+        '', // Owner is not needed
     );
 
     // Create the docker image in the backend
@@ -131,26 +133,50 @@ watch(
     () => props.createChecksBackend,
     async (value) => {
         if (value) {
-            // Create the extra checks in the backend
-            extraChecks.value.forEach((extraCheck) => {
-                // Create the extra check in the backend
-                await addExtraCheck(extraCheck, props.projectId);
+            // Create the extra checks in the backend. If a check has already an id, this means that the check is already in the backend.
+            // If this is the case, the check should not be created again.
+            extraChecksList.value.forEach((extraCheck) => {
+                // Create the extra check in the backend, if the check has no id yet
+                if (extraCheck.id === ''){
+                    addExtraCheck(extraCheck, props.projectId);
+                }
+            });
+
+            // Delete all the extra checks that are in the backend list, but not in the extra checks list. 
+            // This means that the user has removed the extra check from the list and it should be deleted from the backend.
+            extraChecksInBackendList.value.forEach((extraCheck) => {
+                if (!extraChecksList.value.includes(extraCheck)){
+                    // Delete the extra check from the backend
+                    deleteExtraCheck(extraCheck.id);
+                }
             });
         }
     },
 );
 
 /**
- * Load the docker images when the component is mounted
+ * Load the docker images and extra checks when the component is mounted
  */
 onMounted(async () => {
     await getDockerImages();
+
+    // If a project ID is provided, load the extra checks for this project
+    if (props.projectId){
+        // Load the extra checks for the project
+        await getExtraChecksByProject(props.projectId);
+
+        // Save the extra checks in the list
+        extraChecksList.value = extraChecks.value ?? [];
+        
+        // Save the checks that are already in the backend in a separate list (to avoid duplicated / enable deletion)
+        extraChecksInBackendList.value = extraChecks.value?.slice() ?? [];
+    }
 });
 </script>
 
 <template>
     <!-- List with the extra checks -->
-    <DataView :value="extraChecks" data-key="id" v-if="extraChecks.length > 0">
+    <DataView :value="extraChecksList" data-key="id" v-if="extraChecksList.length > 0">
         <template #list="slotProps">
             <div
                 v-for="(item, index) in slotProps.items"
@@ -159,9 +185,7 @@ onMounted(async () => {
             >
                 <p class="text-lg font-semibold">{{ item.name }}</p>
 
-                <ButtonGroup class="flex gap-2">
-                    <Button icon="pi pi-times" class="p-button p-button-danger" @click="extraChecks.splice(index, 1)" />
-                </ButtonGroup>
+                <Button icon="pi pi-times" class="p-button p-button-danger" @click="extraChecksList.splice(index, 1)" />
             </div>
         </template>
     </DataView>
@@ -174,6 +198,7 @@ onMounted(async () => {
         :label="t('views.projects.extraChecks.add')"
         icon-pos="left"
     />
+    <!-- Dialog with a form to create a new extra check -->
     <Dialog
         v-model:visible="displayExtraCheckCreation"
         class="m-3"
@@ -266,6 +291,7 @@ onMounted(async () => {
                                 <label for="dockerImage">
                                     {{ t('views.projects.extraChecks.dockerImage') }}
                                 </label>
+                                <!-- Data table with the docker images -->
                                 <DataTable
                                     v-model:selection="form.dockerImage"
                                     :value="dockerImages"
diff --git a/frontend/src/composables/services/extra_checks.service.ts b/frontend/src/composables/services/extra_checks.service.ts
new file mode 100644
index 00000000..1986ef6c
--- /dev/null
+++ b/frontend/src/composables/services/extra_checks.service.ts
@@ -0,0 +1,56 @@
+import { type Ref, ref } from 'vue';
+import { endpoints } from '@/config/endpoints.ts';
+import { create, deleteId, getList } from '@/composables/services/helpers.ts';
+import { ExtraCheck } from '@/types/ExtraCheck';
+import { Response } from '@/types/Response';
+
+interface ExtraCheckState {
+    extraCheck: Ref<ExtraCheck | null>;
+    extraChecks: Ref<ExtraCheck[] | null>;
+    getExtraChecksByProject: (projectId: string) => Promise<void>;
+    addExtraCheck: (extraCheckData: ExtraCheck, projectId: string) => Promise<void>;
+    deleteExtraCheck: (extraCheckId: string) => Promise<void>;
+}
+
+export function useExtraCheck(): ExtraCheckState {
+    const extraCheck = ref<ExtraCheck | null>(null);
+    const extraChecks = ref<ExtraCheck[] | null>(null);
+    const response = ref<Response | null>(null);
+
+    async function getExtraChecksByProject(projectId: string): Promise<void> {
+        const endpoint = endpoints.extraChecks.byProject.replace('{projectId}', projectId);
+        await getList<ExtraCheck>(endpoint, extraChecks, ExtraCheck.fromJSON);
+    }
+
+    async function addExtraCheck(extraCheckData: ExtraCheck, projectId: string): Promise<void> {
+        const endpoint = endpoints.extraChecks.byProject.replace('{projectId}', projectId);
+        await create<ExtraCheck>(
+            endpoint,
+            {
+                name: extraCheckData.name,
+                docker_image: extraCheckData.docker_image?.id,
+                file: extraCheckData.file,
+                time_limit: extraCheckData.time_limit,
+                memory_limit: extraCheckData.memory_limit,
+                show_log: extraCheckData.show_log,
+            },
+            extraCheck,
+            ExtraCheck.fromJSON,
+            'multipart/form-data',
+        );
+    }
+
+    async function deleteExtraCheck(extraCheckId: string): Promise<void> {
+        const endpoint = endpoints.extraChecks.retrieve.replace('{id}', extraCheckId);
+        await deleteId(endpoint, response, Response.fromJSON);
+    }    
+
+    return {
+        extraCheck,
+        extraChecks,
+
+        getExtraChecksByProject,
+        addExtraCheck,
+        deleteExtraCheck,
+    };
+}
diff --git a/frontend/src/composables/services/project.service.ts b/frontend/src/composables/services/project.service.ts
index 827e5a8b..f7e8fc79 100644
--- a/frontend/src/composables/services/project.service.ts
+++ b/frontend/src/composables/services/project.service.ts
@@ -4,7 +4,6 @@ import { endpoints } from '@/config/endpoints.ts';
 import axios from 'axios';
 import { create, deleteId, get, getList, patch, processError } from '@/composables/services/helpers.ts';
 import { type Response } from '@/types/Response.ts';
-import { ExtraCheck } from '@/types/ExtraCheck';
 
 interface ProjectState {
     projects: Ref<Project[] | null>;
@@ -18,13 +17,11 @@ interface ProjectState {
     createProject: (projectData: Project, courseId: string, numberOfGroups: number) => Promise<void>;
     updateProject: (projectData: Project) => Promise<void>;
     deleteProject: (id: string) => Promise<void>;
-    addExtraCheck: (extraCheckData: ExtraCheck, projectId: string) => Promise<void>;
 }
 
 export function useProject(): ProjectState {
     const projects = ref<Project[] | null>(null);
     const project = ref<Project | null>(null);
-    const extraCheck = ref<ExtraCheck | null>(null);
     const response = ref<Response | null>(null);
 
     async function getProjectByID(id: string): Promise<void> {
@@ -129,24 +126,6 @@ export function useProject(): ProjectState {
         await deleteId<Project>(endpoint, project, Project.fromJSON);
     }
 
-    async function addExtraCheck(extraCheckData: ExtraCheck, projectId: string): Promise<void> {
-        const endpoint = endpoints.projects.extraChecks.replace('{projectId}', projectId);
-        await create<ExtraCheck>(
-            endpoint,
-            {
-                name: extraCheckData.name,
-                docker_image: extraCheckData.dockerImage?.id,
-                file: extraCheckData.bashFile,
-                time_limit: extraCheckData.timeLimit,
-                memory_limit: extraCheckData.memoryLimit,
-                show_log: extraCheckData.showLog,
-            },
-            extraCheck,
-            ExtraCheck.fromJSON,
-            'multipart/form-data',
-        );
-    }
-
     return {
         projects,
         project,
@@ -160,7 +139,5 @@ export function useProject(): ProjectState {
         createProject,
         updateProject,
         deleteProject,
-
-        addExtraCheck,
     };
 }
diff --git a/frontend/src/config/endpoints.ts b/frontend/src/config/endpoints.ts
index d30d5a89..a468d0c9 100644
--- a/frontend/src/config/endpoints.ts
+++ b/frontend/src/config/endpoints.ts
@@ -67,7 +67,6 @@ export const endpoints = {
         byStudent: '/api/students/{studentId}/projects/',
         byTeacher: '/api/teachers/{teacherId}/projects/',
         byAssistant: '/api/assistants/{assistantId}/projects/',
-        extraChecks: '/api/projects/{projectId}/extra_checks/',
     },
     submissions: {
         retrieve: '/api/submissions/{id}',
@@ -79,4 +78,8 @@ export const endpoints = {
         retrieve: '/api/structureChecks/{id}',
         byProject: '/api/projects/{projectId}/structureChecks/',
     },
+    extraChecks: {
+        retrieve: '/api/extra-checks/{id}/',
+        byProject: '/api/projects/{projectId}/extra_checks/',
+    },
 };
diff --git a/frontend/src/types/ExtraCheck.ts b/frontend/src/types/ExtraCheck.ts
index 26d34d38..de6c6269 100644
--- a/frontend/src/types/ExtraCheck.ts
+++ b/frontend/src/types/ExtraCheck.ts
@@ -4,11 +4,11 @@ export class ExtraCheck {
     constructor(
         public id: string,
         public name: string,
-        public dockerImage: DockerImage | null,
-        public bashFile: File | null,
-        public timeLimit: number,
-        public memoryLimit: number,
-        public showLog: boolean,
+        public docker_image: DockerImage | null,
+        public file: File | null,
+        public time_limit: number,
+        public memory_limit: number,
+        public show_log: boolean,
     ) {}
 
     /**
@@ -20,11 +20,11 @@ export class ExtraCheck {
         return new ExtraCheck(
             extraCheck.id,
             extraCheck.name,
-            null,
-            null,
-            extraCheck.timeLimit,
-            extraCheck.memoryLimit,
-            extraCheck.showLog,
+            extraCheck.docker_image,
+            extraCheck.file,
+            extraCheck.time_limit,
+            extraCheck.memory_limit,
+            extraCheck.show_log,
         );
     }
 }
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 7102989c..c72a41d7 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -9,6 +9,7 @@ import Editor from '@/components/forms/Editor.vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import ExtraChecksUpload from '@/components/projects/ExtraChecksUpload.vue';
 import { SubmissionStatus } from '@/types/SubmisionStatus';
 import { reactive, computed, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
@@ -18,7 +19,6 @@ import { useProject } from '@/composables/services/project.service';
 import { required, helpers } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useCourses } from '@/composables/services/course.service';
-import ExtraChecksUpload from '@/components/projects/ExtraChecksUpload.vue';
 
 /* Composable injections */
 const { t } = useI18n();
@@ -249,7 +249,7 @@ async function submitProject(): Promise<void> {
                 </div>
 
                 <div class="col-12 lg:col-6 checks">
-                    <!-- Upload field for bash script -->
+                    <!-- Extra checks upload -->
                     <div class="field col">
                         <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index b129b510..4369ac79 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -9,8 +9,9 @@ import Editor from '@/components/forms/Editor.vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
+import ExtraChecksUpload from '@/components/projects/ExtraChecksUpload.vue';
 import { SubmissionStatus } from '@/types/SubmisionStatus';
-import { reactive, computed, onMounted } from 'vue';
+import { reactive, computed, onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Project } from '@/types/Project';
@@ -28,6 +29,9 @@ const { params } = useRoute();
 const { course, getCourseByID } = useCourses();
 const { project, getProjectByID, updateProject } = useProject();
 
+/* State */
+const createExtraChecksBackend = ref<boolean>(false);
+
 /* Load project data */
 onMounted(async () => {
     await getProjectByID(params.projectId as string);
@@ -55,7 +59,6 @@ const form = reactive({
     maxScore: 10,
     visibility: true,
     scoreVisibility: false,
-    dockerScript: null,
     submissionStructure: null,
 });
 
@@ -73,11 +76,6 @@ const rules = computed(() => {
     };
 });
 
-// Function to handle the file upload of a docker script
-const onDockerScriptUpload = (event: any): void => {
-    form.dockerScript = event.files[0];
-};
-
 // Function to handle the file upload of a zip file containing the submission structure
 const onZipStructureUpload = (event: any): void => {
     form.submissionStructure = event.files[0];
@@ -86,12 +84,28 @@ const onZipStructureUpload = (event: any): void => {
 // useVuelidate function to perform form validation
 const v$ = useVuelidate(rules, form);
 
+// Validate the create project form
+const validateForm = (): boolean => {
+    v$.value.name.$touch();
+    v$.value.startDate.$touch();
+    v$.value.deadline.$touch();
+    v$.value.groupSize.$touch();
+    v$.value.maxScore.$touch();
+    return (
+        !v$.value.name.$invalid &&
+        !v$.value.startDate.$invalid &&
+        !v$.value.deadline.$invalid &&
+        !v$.value.groupSize.$invalid &&
+        !v$.value.maxScore.$invalid
+    );
+};
+
 /**
  * Function to submit the project form.
  */
 async function submitProject(): Promise<void> {
     // Validate the form
-    const validated = await v$.value.$validate();
+    const validated = validateForm();
 
     // Get the course object from the course ID
     await getCourseByID(params.courseId as string);
@@ -118,6 +132,9 @@ async function submitProject(): Promise<void> {
             ),
         );
 
+        // Make sure the extra checks are updated in the backend
+        createExtraChecksBackend.value = true;
+
         // Redirect to the project overview
         await push({
             name: 'course-project',
@@ -135,7 +152,7 @@ async function submitProject(): Promise<void> {
         </Title>
 
         <!-- Project form -->
-        <form @submit.prevent="submitProject">
+        <form @submit.prevent="submitProject" v-if="project">
             <div class="grid">
                 <div class="col-12 lg:col-6">
                     <div class="grid formgrid">
@@ -235,18 +252,14 @@ async function submitProject(): Promise<void> {
                     />
                 </div>
 
-                <div class="col-12 lg:col-6">
-                    <!-- Upload field for docker script -->
+                <div class="col-12 lg:col-6 checks">
+                    <!-- Extra checks upload -->
                     <div class="field col">
-                        <label for="dockerScript">
-                            {{ t('views.projects.dockerUpload') }}
-                        </label>
-                        <FileUpload
-                            input="dockerScript"
-                            mode="basic"
-                            accept=".sh"
-                            :multiple="false"
-                            @select="onDockerScriptUpload"
+                        <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
+                        <ExtraChecksUpload
+                            id="extraChecks"
+                            :create-checks-backend="createExtraChecksBackend"
+                            :project-id="project.id"
                         />
                     </div>
 
@@ -269,5 +282,9 @@ async function submitProject(): Promise<void> {
     </BaseLayout>
 </template>
 
-<style scoped></style>
+<style scoped>
+.checks .field.col > * {
+    display: block;
+}
+</style>
 @/types/Project

From 629779d4a0f25fbdc12b4f9b516aadaee265475e Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Sat, 11 May 2024 22:20:59 +0200
Subject: [PATCH 12/15] fix: linting

---
 frontend/src/components/projects/ExtraChecksUpload.vue | 10 +++++-----
 .../src/composables/services/extra_checks.service.ts   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index 35bfc327..b1aecb9e 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -137,15 +137,15 @@ watch(
             // If this is the case, the check should not be created again.
             extraChecksList.value.forEach((extraCheck) => {
                 // Create the extra check in the backend, if the check has no id yet
-                if (extraCheck.id === ''){
+                if (extraCheck.id === '') {
                     addExtraCheck(extraCheck, props.projectId);
                 }
             });
 
-            // Delete all the extra checks that are in the backend list, but not in the extra checks list. 
+            // Delete all the extra checks that are in the backend list, but not in the extra checks list.
             // This means that the user has removed the extra check from the list and it should be deleted from the backend.
             extraChecksInBackendList.value.forEach((extraCheck) => {
-                if (!extraChecksList.value.includes(extraCheck)){
+                if (!extraChecksList.value.includes(extraCheck)) {
                     // Delete the extra check from the backend
                     deleteExtraCheck(extraCheck.id);
                 }
@@ -161,13 +161,13 @@ onMounted(async () => {
     await getDockerImages();
 
     // If a project ID is provided, load the extra checks for this project
-    if (props.projectId){
+    if (props.projectId !== '') {
         // Load the extra checks for the project
         await getExtraChecksByProject(props.projectId);
 
         // Save the extra checks in the list
         extraChecksList.value = extraChecks.value ?? [];
-        
+
         // Save the checks that are already in the backend in a separate list (to avoid duplicated / enable deletion)
         extraChecksInBackendList.value = extraChecks.value?.slice() ?? [];
     }
diff --git a/frontend/src/composables/services/extra_checks.service.ts b/frontend/src/composables/services/extra_checks.service.ts
index 1986ef6c..cca16721 100644
--- a/frontend/src/composables/services/extra_checks.service.ts
+++ b/frontend/src/composables/services/extra_checks.service.ts
@@ -43,7 +43,7 @@ export function useExtraCheck(): ExtraCheckState {
     async function deleteExtraCheck(extraCheckId: string): Promise<void> {
         const endpoint = endpoints.extraChecks.retrieve.replace('{id}', extraCheckId);
         await deleteId(endpoint, response, Response.fromJSON);
-    }    
+    }
 
     return {
         extraCheck,

From e392eb5008c7e208690741cbaa6bec2c0f24c7ab Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 13 May 2024 16:16:28 +0200
Subject: [PATCH 13/15] fix: fixes after review lander

---
 backend/api/serializers/project_serializer.py        |  3 ++-
 frontend/src/assets/lang/app/en.json                 |  3 +--
 frontend/src/assets/lang/app/nl.json                 |  2 +-
 .../src/components/projects/ExtraChecksUpload.vue    | 12 ++++++------
 frontend/src/views/projects/CreateProjectView.vue    |  2 +-
 frontend/src/views/projects/UpdateProjectView.vue    |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/backend/api/serializers/project_serializer.py b/backend/api/serializers/project_serializer.py
index 087fa6f6..274d4e55 100644
--- a/backend/api/serializers/project_serializer.py
+++ b/backend/api/serializers/project_serializer.py
@@ -81,7 +81,8 @@ def validate(self, attrs):
                 raise ValidationError(gettext("project.errors.context"))
 
         # Check if start date of the project is not in the past
-        if "start_date" in attrs and attrs["start_date"] < timezone.now().replace(hour=0, minute=0, second=0):
+        if "start_date" in attrs and not self.partial and \
+                attrs["start_date"] < timezone.now().replace(hour=0, minute=0, second=0):
             raise ValidationError(gettext("project.errors.start_date_in_past"))
 
         # Set the start date depending on if it is a partial update and whether it was given by the user
diff --git a/frontend/src/assets/lang/app/en.json b/frontend/src/assets/lang/app/en.json
index 15cbbd29..0869a26a 100644
--- a/frontend/src/assets/lang/app/en.json
+++ b/frontend/src/assets/lang/app/en.json
@@ -69,7 +69,6 @@
             "max_score": "Maximum score that can be achieved",
             "visibility": "Make project visible to students",
             "scoreVisibility": "Make score, when uploaded, automatically visible to students",
-            "bashUpload": "Upload a bash script for automatic testing",
             "submissionStructure": "Structure of how a submission should be made",
             "noStudents": "No students in this group",
             "locked": "Closed",
@@ -83,7 +82,7 @@
                 "dockerImage": "Docker image",
                 "timeLimit": "Time limit for execution (in seconds)",
                 "memoryLimit": "Memory limit for execution (in MB)",
-                "showLog": "Show logfile to students"
+                "showLog": "Making the extra logs of the docker container visible to the students"
             }
         },
         "submissions": {
diff --git a/frontend/src/assets/lang/app/nl.json b/frontend/src/assets/lang/app/nl.json
index 7e10cb4b..4d8dad64 100644
--- a/frontend/src/assets/lang/app/nl.json
+++ b/frontend/src/assets/lang/app/nl.json
@@ -80,7 +80,7 @@
                 "dockerImage": "Docker image",
                 "timeLimit": "Tijdslimiet voor de uitvoering (in seconden)",
                 "memoryLimit": "Geheugenlimiet voor de uitvoering (in MB)",
-                "showLog": "Toon logbestand aan studenten"
+                "showLog": "Maak de extra logs van de docker container zichtbaar voor de studenten"
             }
         },
         "submissions": {
diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index b1aecb9e..ce09dd88 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -181,11 +181,11 @@ onMounted(async () => {
             <div
                 v-for="(item, index) in slotProps.items"
                 :key="index"
-                class="flex align-items-center justify-content-between mr-6"
             >
-                <p class="text-lg font-semibold">{{ item.name }}</p>
-
-                <Button icon="pi pi-times" class="p-button p-button-danger" @click="extraChecksList.splice(index, 1)" />
+                <div class="flex align-items-center justify-content-between">
+                    <p style="max-width: 300px">{{ item.name }}</p>
+                    <Button icon="pi pi-times" class="p-button-danger p-button-sm" @click="extraChecksList.splice(index, 1)" />
+                </div>
             </div>
         </template>
     </DataView>
@@ -277,8 +277,8 @@ onMounted(async () => {
 
                         <!-- Visibility of the log files for students -->
                         <div class="grid">
-                            <div class="flex align-items-center field-checkbox col-12">
-                                <InputSwitch id="showLog" v-model="form.showLog" />
+                            <div class="field-checkbox col-12">
+                                <InputSwitch id="showLog" v-model="form.showLog" style="min-width: 50px;"/>
                                 <label for="showLog">{{ t('views.projects.extraChecks.showLog') }}</label>
                             </div>
                         </div>
diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index c72a41d7..7edbade4 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -250,7 +250,7 @@ async function submitProject(): Promise<void> {
 
                 <div class="col-12 lg:col-6 checks">
                     <!-- Extra checks upload -->
-                    <div class="field col">
+                    <div class="field col-8">
                         <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload
                             id="extraChecks"
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 4369ac79..4585ef43 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -254,7 +254,7 @@ async function submitProject(): Promise<void> {
 
                 <div class="col-12 lg:col-6 checks">
                     <!-- Extra checks upload -->
-                    <div class="field col">
+                    <div class="field col-8">
                         <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload
                             id="extraChecks"

From 129ecc2e1df9d78b43589875c4986769dee6b8b0 Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 13 May 2024 16:22:46 +0200
Subject: [PATCH 14/15] fix: linting

---
 .../src/components/projects/ExtraChecksUpload.vue   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/projects/ExtraChecksUpload.vue b/frontend/src/components/projects/ExtraChecksUpload.vue
index ce09dd88..aa96f0ae 100644
--- a/frontend/src/components/projects/ExtraChecksUpload.vue
+++ b/frontend/src/components/projects/ExtraChecksUpload.vue
@@ -178,13 +178,14 @@ onMounted(async () => {
     <!-- List with the extra checks -->
     <DataView :value="extraChecksList" data-key="id" v-if="extraChecksList.length > 0">
         <template #list="slotProps">
-            <div
-                v-for="(item, index) in slotProps.items"
-                :key="index"
-            >
+            <div v-for="(item, index) in slotProps.items" :key="index">
                 <div class="flex align-items-center justify-content-between">
                     <p style="max-width: 300px">{{ item.name }}</p>
-                    <Button icon="pi pi-times" class="p-button-danger p-button-sm" @click="extraChecksList.splice(index, 1)" />
+                    <Button
+                        icon="pi pi-times"
+                        class="p-button-danger p-button-sm"
+                        @click="extraChecksList.splice(index, 1)"
+                    />
                 </div>
             </div>
         </template>
@@ -278,7 +279,7 @@ onMounted(async () => {
                         <!-- Visibility of the log files for students -->
                         <div class="grid">
                             <div class="field-checkbox col-12">
-                                <InputSwitch id="showLog" v-model="form.showLog" style="min-width: 50px;"/>
+                                <InputSwitch id="showLog" v-model="form.showLog" style="min-width: 50px" />
                                 <label for="showLog">{{ t('views.projects.extraChecks.showLog') }}</label>
                             </div>
                         </div>

From f773c15c44ee446f7c70cf3b82be5aa8561237af Mon Sep 17 00:00:00 2001
From: Bram Meir <bram.meir@ugent.be>
Date: Mon, 13 May 2024 18:44:41 +0200
Subject: [PATCH 15/15] fix: try fix margin

---
 frontend/src/views/projects/CreateProjectView.vue | 2 +-
 frontend/src/views/projects/UpdateProjectView.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/projects/CreateProjectView.vue b/frontend/src/views/projects/CreateProjectView.vue
index 7edbade4..a5a07015 100644
--- a/frontend/src/views/projects/CreateProjectView.vue
+++ b/frontend/src/views/projects/CreateProjectView.vue
@@ -251,7 +251,7 @@ async function submitProject(): Promise<void> {
                 <div class="col-12 lg:col-6 checks">
                     <!-- Extra checks upload -->
                     <div class="field col-8">
-                        <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
+                        <label for="extraChecks" class="mr-4">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload
                             id="extraChecks"
                             :create-checks-backend="createExtraChecksBackend"
diff --git a/frontend/src/views/projects/UpdateProjectView.vue b/frontend/src/views/projects/UpdateProjectView.vue
index 4585ef43..ed290c01 100644
--- a/frontend/src/views/projects/UpdateProjectView.vue
+++ b/frontend/src/views/projects/UpdateProjectView.vue
@@ -255,7 +255,7 @@ async function submitProject(): Promise<void> {
                 <div class="col-12 lg:col-6 checks">
                     <!-- Extra checks upload -->
                     <div class="field col-8">
-                        <label for="extraChecks">{{ t('views.projects.extraChecks.title') }}</label>
+                        <label for="extraChecks" class="mr-4">{{ t('views.projects.extraChecks.title') }}</label>
                         <ExtraChecksUpload
                             id="extraChecks"
                             :create-checks-backend="createExtraChecksBackend"