313 error state on commit doesnt update

src/App.tsx

@@ -19,6 +19,7 @@ import ContentWrapper from './components/ContentWrapper/ContentWrapper';
 import AdminAuthWrapper from './components/AdminAuthWrapper/AdminAuthWrapper';
 import LangProvider from './components/LangProvider/LangProvider';
 import AuthProvider from './components/AuthProvider/AuthProvider';
+import PrivacyPolicy from './components/ContentWrapper/PrivacyPolicy/PrivacyPolicy';
 
 /**
  * Root Component
@@ -146,6 +147,14 @@ export default function App() {
                                 </ContentWrapper>
                             }
                         />
+                        <Route
+                            path="/privacy-policy"
+                            element={
+                                <ContentWrapper>
+                                    <PrivacyPolicy />
+                                </ContentWrapper>
+                            }
+                        />
                     </Routes>
                 </Router>
             </AuthProvider>

src/components/ContentWrapper/Footer/Footer.css

@@ -25,8 +25,4 @@
 
 .footer-link:hover {
     color: #06f87f;
-}
-
-.datenschutzerklaerung {
-    display: none;
 }

src/components/ContentWrapper/Footer/Footer.scss

@@ -29,7 +29,3 @@
 .footer-link:hover {
     color: $amplimind-accent-green;
 }
-
-.datenschutzerklaerung {
-    display: none;
-}

src/components/ContentWrapper/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import './Footer.css';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 /**
  * Footer component that displays the footer of the application.
@@ -34,11 +35,11 @@ export default function Footer() {
                 >
                     GitHub
                 </a>
-                <a className="footer-link datenschutzerklaerung" href="">
-                    GitHub
-                </a>
+                <Link to="/privacy-policy" className="footer-link datenschutzerklaerung">
+                    {t('privacyPolicy', {ns: "privacyPolicy"})}
+                </Link>
             </div>
-            <p data-testid="license-text">License Text</p>
+            <p data-testid="license-text">{t('licenseText', {ns: "license"})}</p>
         </div>
     );
 }

src/components/ContentWrapper/PrivacyPolicy/PrivacyPolicy.scss

@@ -0,0 +1,9 @@
+@import '../../../theme/theme.scss';
+
+.privacy-policy-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}

src/components/ContentWrapper/PrivacyPolicy/PrivacyPolicy.tsx

@@ -0,0 +1,12 @@
+import './PrivacyPolicy.css';
+import { useTranslation } from 'react-i18next';
+
+export default function PrivacyPolicy() {
+    const { t } = useTranslation('privacyPolicy');
+    return (
+        <div className="privacy-policy-container">
+            <h1>{t('privacyPolicy')}</h1>
+            your content here
+        </div>
+    );
+}

src/i18n.ts

@@ -10,6 +10,8 @@ import enInvite from './locales/en/invite.json';
 import enResetPassword from './locales/en/resetPassword.json';
 import enAdmin from './locales/en/admin.json';
 import enPasswordStrength from './locales/en/passwordStrength.json';
+import enLicense from './locales/en/license.json';
+import enPrivacyPolicy from './locales/en/privacyPolicy.json';
 
 // Deutsch / German
 import deMain from './locales/de/main.json';
@@ -19,6 +21,8 @@ import deInvite from './locales/de/invite.json';
 import deResetPassword from './locales/de/resetPassword.json';
 import deAdmin from './locales/de/admin.json';
 import dePasswordStrength from './locales/de/passwordStrength.json';
+import deLicense from './locales/de/license.json';
+import dePrivacyPolicy from './locales/de/privacyPolicy.json';
 
 const resources = {
     en: {
@@ -29,6 +33,8 @@ const resources = {
         resetPassword: enResetPassword,
         admin: enAdmin,
         passwordStrength: enPasswordStrength,
+        license: enLicense,
+        privacyPolicy: enPrivacyPolicy,
     },
     de: {
         main: deMain,
@@ -38,6 +44,8 @@ const resources = {
         resetPassword: deResetPassword,
         admin: deAdmin,
         passwordStrength: dePasswordStrength,
+        license: deLicense,
+        privacyPolicy: dePrivacyPolicy,
     },
 };
 

src/locales/de/license.json

@@ -0,0 +1,3 @@
+{
+    "licenseText": "Lizenztext"
+}

src/locales/de/privacyPolicy.json

@@ -0,0 +1,3 @@
+{
+    "privacyPolicy": "Datenschutzerklärung"
+}

src/locales/de/userProject.json

@@ -31,5 +31,7 @@
     "errorZIPBombDetected": "Der Inhalt der ZIP Datei, die sie hochgeladen haben übersteigt die maximale Größe von 100MB oder enthält weitere ZIP Dateien.",
     "errorZIPFileTooLarge": "Die ZIP Datei, die sie hochgeladen haben übersteigt die maximale Größe von 100MB.",
     "linterResult": "Dein Linting Ergebnis",
-    "errorServerConfig": "Serverkonfigurationsfehler. Bitte kontaktieren Sie einen Administrator."
+    "errorServerConfig": "Serverkonfigurationsfehler. Bitte kontaktieren Sie einen Administrator.",
+    "browse": "Durchsuchen...",
+    "noFileSelected": "Keine Datei ausgewählt."
 }

src/locales/en/license.json

@@ -0,0 +1,3 @@
+{
+    "licenseText": "License Text"
+}

src/locales/en/privacyPolicy.json

@@ -0,0 +1,3 @@
+{
+    "privacyPolicy": "Privacy Policy"
+}

src/locales/en/userProject.json

@@ -31,5 +31,7 @@
     "errorZIPBombDetected": "Your ZIP files content exceeds 100MB or contains nested ZIP files.",
     "errorZIPFileTooLarge": "Your ZIP file exceeds the maximum size of 100MB.",
     "linterResult": "Your linting result",
-    "errorServerConfig": "Server configuration error. Please contact an admin."
+    "errorServerConfig": "Server configuration error. Please contact an admin.",
+    "browse": "Browse...",
+    "noFileSelected": "No file selected."
 }

src/pages/Commit/Commit.tsx

@@ -11,6 +11,8 @@ import submission from '../../services/submission';
 import { StatusCodes } from 'http-status-codes';
 import project from '../../services/project';
 import { useNavigate } from 'react-router-dom';
+import { useLocaleContext } from '../../components/Context/LocaleContext/useLocaleContext';
+import LocalizedFileInput from './components/LocalizedFileInput';
 
 const Commit = () => {
     // Context
@@ -21,6 +23,13 @@ const Commit = () => {
      * @type {TFunction<[string, string], undefined>}
      */
     const { t } = useTranslation(['userProject', 'main']);
+    /**
+     * locale context as key for error components
+     * @author David Linhardt
+     *
+     * @type {string}
+     */
+    const { locale } = useLocaleContext();
 
     // States
     /**
@@ -185,7 +194,7 @@ const Commit = () => {
         switch (e.target.name) {
             case 'language':
                 if (e.target.value.length == 0) {
-                    newError.language.message = t('emptyInput');
+                    newError.language.message = 'emptyInput';
                     newError.language.valid = false;
                 } else {
                     newError.language.message = '';
@@ -194,7 +203,7 @@ const Commit = () => {
                 break;
             case 'version':
                 if (e.target.value.length == 0) {
-                    newError.version.message = t('emptyInput');
+                    newError.version.message = 'emptyInput';
                     newError.version.valid = false;
                 } else {
                     newError.version.message = '';
@@ -203,10 +212,10 @@ const Commit = () => {
                 break;
             case 'filePath':
                 if (e.target.value.length == 0) {
-                    newError.filePath.message = t('noFile');
+                    newError.filePath.message = 'noFile';
                     newError.filePath.valid = false;
                 } else if (!e.target.value.endsWith('.zip')) {
-                    newError.filePath.message = t('noValidFile');
+                    newError.filePath.message = 'noValidFile';
                     newError.filePath.valid = false;
                 } else {
                     newError.filePath.message = '';
@@ -398,7 +407,7 @@ const Commit = () => {
                                     className="input"
                                 />
                             </div>
-                            <ErrorComponent text={errors.language.message} />
+                            <ErrorComponent text={t(errors.language.message)} key={locale + "language"} />
                             <br />
                             <div className="oneLine">
                                 <label htmlFor="version">
@@ -414,7 +423,7 @@ const Commit = () => {
                                     className="input"
                                 />
                             </div>
-                            <ErrorComponent text={errors.version.message} />
+                            <ErrorComponent text={t(errors.version.message)} key={locale + "version"} />
                             <h3>{t('optionalChatLabel')}</h3>
                             <textarea
                                 className="optionalMessage"
@@ -429,14 +438,8 @@ const Commit = () => {
                                 {t('uploadExerciseLabel')}
                                 <span className="required">*</span>:
                             </h4>
-                            <input
-                                data-testid="fileUpload"
-                                name="filePath"
-                                type="file"
-                                onChange={mapFilePath}
-                                accept=".zip"
-                            />
-                            <ErrorComponent text={errors.filePath.message} />
+                            <LocalizedFileInput onChange={mapFilePath} accept=".zip" />
+                            <ErrorComponent text={t(errors.filePath.message)} key={locale + "path"} />
                             <br />
                             <div className="commit-button">
                                 <Button

src/pages/Commit/components/LocalizedFileInput.scss

@@ -0,0 +1,5 @@
+@import '../../../theme/theme.scss';
+
+.localized-file-input-span {
+    margin-left: 7px;
+}

src/pages/Commit/components/LocalizedFileInput.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import './LocalizedFileInput.css';
+
+interface LocalizedFileInputProps {
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    accept: string;
+}
+
+const LocalizedFileInput: React.FC<LocalizedFileInputProps> = ({ onChange, accept }) => {
+    const { t } = useTranslation(['userProject']);
+    const [fileName, setFileName] = useState<string>("");
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files.length > 0) {
+            setFileName(event.target.files[0].name);
+        }
+        else {
+            setFileName("");
+        }
+        onChange(event);
+    };
+
+    return (
+        <div>
+            <input
+                type='file'
+                accept={accept}
+                style={{ display: 'none' }}
+                onChange={handleFileChange}
+                id='fileInput'
+                name='filePath'
+                data-testid="fileUpload"
+            />
+            <label htmlFor='fileInput' className='custom-file-input'>
+                <button type="button">
+                    {t('browse')}
+                </button>
+            </label>
+            <span className='localized-file-input-span'>{(fileName === "") ? t('noFileSelected') : (fileName)}</span>
+        </div>
+    );
+};
+
+export default LocalizedFileInput;