Redirecting when creation of project is succesful or showing error message on failure

frontend/public/locales/en/translation.json

@@ -123,7 +123,9 @@
     "noFilesPlaceholder": "No assignment files given yet",
     "noRegexPlaceholder": "No regex added yet",
     "clearSelected": "Clear Selection",
-    "faultySubmission": "Some fields were left open or there is no valid runner/file combination"
+    "faultySubmission": "Some fields were left open or there is no valid runner/file combination",
+    "unauthorized": "You are unauthorized to upload a project for this course",
+    "submissionError": "Submission failed, please try again"
   },
   "student" : {
     "myProjects": "My Projects",

frontend/public/locales/nl/translation.json

@@ -91,7 +91,9 @@
     "uploadError": "Project is niet goed geformatteerd",
     "noDeadlinesPlaceholder": "Nog geen opgegeven deadlines",
     "noFilesPlaceholder": "Nog geen opgave bestanden geupload",
-    "noRegexPlaceholder": "Nog geen regex toegevoegd"
+    "noRegexPlaceholder": "Nog geen regex toegevoegd",
+    "unauthorized": "U heeft niet de juiste rechten om een project aan te maken voor dit vak",
+    "submissionError": "Er is een fout opgetreden bij het indienen van uw project, probeer het later opnieuw."
   },
   "projectView": {
     "submitNetworkError": "Er is iets mislopen bij het opslaan van uw indiening. Probeer het later opnieuw.",

frontend/src/components/ProjectForm/ProjectForm.tsx

@@ -22,14 +22,15 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import DeadlineCalender from "../Calender/DeadlineCalender.tsx";
 import { Deadline } from "../../types/deadline";
 import {InfoOutlined} from "@mui/icons-material";
-import {Link, useLoaderData, useLocation} from "react-router-dom";
+import {Link, useLoaderData, useLocation, useNavigate} from "react-router-dom";
 import FolderDragDrop from "../FolderUpload/FolderUpload.tsx";
 import TabPanel from "@mui/lab/TabPanel";
 import {TabContext} from "@mui/lab";
 import FileStuctureForm from "./FileStructureForm.tsx";
 import AdvancedRegex from "./AdvancedRegex.tsx";
 import RunnerSelecter from "./RunnerSelecter.tsx";
 import { authenticatedFetch } from "../../utils/authenticated-fetch.ts";
+import i18next from "i18next";
 
 interface Course {
   course_id: string;
@@ -77,13 +78,16 @@ export default function ProjectForm() {
   const [runner, setRunner] = useState<string>('');
   const [validRunner, setValidRunner] = useState(true);
   const [validSubmission, setValidSubmission] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const courses = useLoaderData() as Course[]
 
   const [courseId, setCourseId] = useState<string>('');
   const [courseName, setCourseName] = useState<string>('');
   const location = useLocation();
 
+  const navigate = useNavigate();
+
   useEffect(() =>{
     const urlParams = new URLSearchParams(location.search);
     const initialCourseId = urlParams.get('course_id') || '';
@@ -142,9 +146,15 @@ export default function ProjectForm() {
 
     if (runner === "CUSTOM") {
       setValidRunner(constainsDocker);
+      if (!constainsDocker) {
+        setErrorMessage(t("faultySubmission"));
+      }
       setValidSubmission(constainsDocker);
     } else {
       setValidRunner(containsRuntest);
+      if(!containsRuntest) {
+        setErrorMessage(t("faultySubmission"));
+      }
       setValidSubmission(containsRuntest);
     }
   }
@@ -177,6 +187,7 @@ export default function ProjectForm() {
 
     if (!assignmentFile || !validRunner) {
       setValidSubmission(false);
+      setErrorMessage(t("faultySubmission"));
       return;
     }
 
@@ -212,8 +223,20 @@ export default function ProjectForm() {
     })
 
     if (!response.ok) {
-      throw new Error(t("uploadError"));
+      setValidSubmission(false);
+      if (response.status === 403) {
+        setErrorMessage(t("unauthorized"));
+      }
+      else {
+        setErrorMessage(t("submissionError"));
+      }
+      return;
     }
+
+    response.json().then((data) => {
+      const projectData = data.data;
+      navigate(`/${i18next.language}/projects/${projectData.project_id}`);
+    })
   }
 
   const handleCourseChange = (e: SelectChangeEvent<string>) => {
@@ -422,7 +445,7 @@ export default function ProjectForm() {
             {
               !validSubmission && (
                 <Typography style={{color: 'red', paddingTop: "20px" }}>
-                  {t("faultySubmission")} ⚠️
+                  {errorMessage} ⚠️
                 </Typography>
               )
             }