i18n and label

SELab-2 · Mar 31, 2024 · 3b8af4d · 3b8af4d
1 parent 94e68d6
commit 3b8af4d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git 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"
   }
diff --git 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"
   }
diff --git 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>