From 3b8af4da58b647ed7cda0df2a12bf1e23a093035 Mon Sep 17 00:00:00 2001
From: cmekeirl <cedric.mekeirle@ugent.be>
Date: Sun, 31 Mar 2024 14:26:06 +0200
Subject: [PATCH] i18n and label

---
 frontend/public/locales/en/translation.json    |  5 ++++-
 frontend/public/locales/nl/translation.json    |  5 ++++-
 frontend/src/components/Courses/CourseForm.tsx | 11 +++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 1447580c..76ab2d85 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -3,5 +3,8 @@
     "myProjects": "My Projects",
     "myCourses": "My Courses",
     "login": "Login",
-    "home": "Home"
+    "home": "Home",
+    "courseName": "Course Name",
+    "submit": "Submit",
+    "emptyCourseName": "Course name should not be empty"
   }
\ No newline at end of file
diff --git a/frontend/public/locales/nl/translation.json b/frontend/public/locales/nl/translation.json
index c852df96..2ad2a8bf 100644
--- a/frontend/public/locales/nl/translation.json
+++ b/frontend/public/locales/nl/translation.json
@@ -3,5 +3,8 @@
     "myProjects": "Mijn Projecten",
     "myCourses": "Mijn Vakken",
     "login": "Login",
-    "home": "Home"
+    "home": "Home",
+    "courseName": "Vak Naam",
+    "submit": "Opslaan",
+    "emptyCourseName": "Vak naam mag niet leeg zijn"
   }
\ No newline at end of file
diff --git a/frontend/src/components/Courses/CourseForm.tsx b/frontend/src/components/Courses/CourseForm.tsx
index 3cfbabf7..ba1d2e66 100644
--- a/frontend/src/components/Courses/CourseForm.tsx
+++ b/frontend/src/components/Courses/CourseForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useState } from 'react';
-import { FormControl, Box, TextField, Button} from '@mui/material';
+import { FormControl, Box, TextField, Button, FormLabel} from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Renders the CourseForm component.
@@ -10,6 +11,8 @@ export function CourseForm(): JSX.Element {
   const [courseName, setCourseName] = useState('');
   const [error, setError] = useState('');
 
+  const { t } = useTranslation();
+
   const apiHost = import.meta.env.VITE_API_HOST;
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +24,7 @@ export function CourseForm(): JSX.Element {
     e.preventDefault(); // Prevents the default form submission behaviour
     
     if (!courseName.trim()) {
-      setError('Course name should not be empty');
+      setError(t('emptyCourseName'));
       return;
     }
 
@@ -33,8 +36,8 @@ export function CourseForm(): JSX.Element {
     <Box display="flex" justifyContent="center" alignItems="center" height="90vh" position="relative">
       <form onSubmit={handleSubmit}>
         <FormControl>
+          <FormLabel htmlFor="course-name">{t('courseName')}</FormLabel>
           <TextField
-            label="course name"
             value={courseName}
             onChange={handleInputChange}
             error={!!error} // Applying error style if there's an error message
@@ -50,7 +53,7 @@ export function CourseForm(): JSX.Element {
             right: '30rem',
           }}
         >
-          Submit
+          {t('submit')}
         </Button>
       </form>
     </Box>