Merge pull request #237 from dedis/tagemoua-patch1

Adds translation of form

Author: Khadija21102

web/frontend/src/components/utils/ElectionFields.tsx

@@ -7,7 +7,7 @@ import { useFillLightFormInfo } from './FillFormInfo';
  * @returns the fields of a form and a function to change the status field
  */
 const FormFields = (formData: LightFormInfo) => {
-  const { title, id, status, pubKey, setStatus } = useFillLightFormInfo(formData);
+  const { title, titleFr, titleDe, id, status, pubKey, setStatus } = useFillLightFormInfo(formData);
   return { title, id, status, pubKey, setStatus };
 };
 

web/frontend/src/components/utils/FillFormInfo.tsx

@@ -15,20 +15,21 @@ const useFillFormInfo = (formData: FormInfo) => {
   const [isResultSet, setIsResultSet] = useState<boolean>(false);
 
   useEffect(() => {
-    if (formData !== null) {
-      setId(formData.FormID);
-      setStatus(formData.Status);
-      setPubKey(formData.Pubkey);
-      setRoster(formData.Roster);
-      setResult(formData.Result);
-      setChunksPerBallot(formData.ChunksPerBallot);
-      setBallotSize(formData.BallotSize);
-      setConfigObj(formData.Configuration);
-      setVoters(formData.Voters);
+    if (formData === null) {
+      return;
+    }
+    setId(formData.FormID);
+    setStatus(formData.Status);
+    setPubKey(formData.Pubkey);
+    setRoster(formData.Roster);
+    setResult(formData.Result);
+    setChunksPerBallot(formData.ChunksPerBallot);
+    setBallotSize(formData.BallotSize);
+    setConfigObj(formData.Configuration);
+    setVoters(formData.Voters);
 
-      if (formData.Result.length > 0) {
-        setIsResultSet(true);
-      }
+    if (formData.Result.length > 0) {
+      setIsResultSet(true);
     }
   }, [formData]);
 
@@ -52,6 +53,8 @@ const useFillFormInfo = (formData: FormInfo) => {
 const useFillLightFormInfo = (formData: LightFormInfo) => {
   const [id, setId] = useState<ID>('');
   const [title, setTitle] = useState<string>('');
+  const [titleFr, setTitleFr] = useState<string>('');
+  const [titleDe, setTitleDe] = useState<string>('');
   const [status, setStatus] = useState<Status>(null);
   const [pubKey, setPubKey] = useState<string>('');
 
@@ -61,12 +64,16 @@ const useFillLightFormInfo = (formData: LightFormInfo) => {
       setTitle(formData.Title);
       setStatus(formData.Status);
       setPubKey(formData.Pubkey);
+      setTitleFr(formData.TitleFr);
+      setTitleDe(formData.TitleDe);
     }
   }, [formData]);
 
   return {
     id,
     title,
+    titleFr,
+    titleDe,
     status,
     setStatus,
     pubKey,

web/frontend/src/index.tsx

@@ -7,6 +7,8 @@ import App from 'layout/App';
 import reportWebVitals from 'reportWebVitals';
 import ShortUniqueId from 'short-unique-id';
 
+import { useTranslation } from 'react-i18next';
+
 import * as endpoints from 'components/utils/Endpoints';
 
 const flashTimeout = 4000;
@@ -111,30 +113,33 @@ export const ProxyContext = createContext<ProxyState>(defaultProxyState);
 
 // A small elements to display that the page is loading, should be something
 // more elegant in the future and be its own component.
-const Loading: FC = () => (
-  <div className="flex h-screen">
-    <div className="m-auto">
-      <div className="text-center pb-2">
-        <svg
-          role="status"
-          className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-indigo-600"
-          viewBox="0 0 100 101"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-            fill="currentColor"
-          />
-          <path
-            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-            fill="currentFill"
-          />
-        </svg>
+const Loading: FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-screen">
+      <div className="m-auto">
+        <div className="text-center pb-2">
+          <svg
+            role="status"
+            className="inline w-16 h-16 mr-2 text-gray-200 animate-spin dark:text-gray-400 fill-indigo-600"
+            viewBox="0 0 100 101"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+        </div>
+        <p>{t('loading')}</p>
       </div>
-      <p>App is loading...</p>
     </div>
-  </div>
-);
+  );
+};
 
 const Failed: FC = ({ children }) => (
   <div className="flex items-center justify-center w-screen h-screen bg-gradient-to-r from-red-600 to-red-700">

web/frontend/src/language/LanguageButtons.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+type LanguageButtonsProps = {
+  availableLanguages: string[];
+  setLanguage: (lang: string) => void;
+};
+
+const LanguageButtons: FC<LanguageButtonsProps> = ({ availableLanguages, setLanguage }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="py-6 px-5 space-y-6">
+      <form className="flex gap-y-4 gap-x-8">
+        {availableLanguages.map((lang, index) => (
+          <label key={index} id={'lang' + lang}>
+            <input
+              className="hidden peer"
+              type="radio"
+              key={index}
+              id={'lang' + lang}
+              name="lang"></input>
+            <div
+              className="peer-checked:bg-gray-300 text-base font-small text-gray-900 hover:text-gray-700"
+              onClick={() => setLanguage(lang)}>
+              {t(lang)}
+            </div>
+          </label>
+        ))}
+      </form>
+    </div>
+  );
+};
+
+export default LanguageButtons;

web/frontend/src/language/de.json

@@ -44,7 +44,6 @@
     "enterMinN": "Eingabe der MinN",
     "enterMaxN": "Eingabe der MaxN",
     "enterRegex": "Geben Sie Ihre Regex ein",
-    "enterTitle": "Geben Sie Ihren Titel ein",
     "mainProperties": "Wichtigste Eigenschaften",
     "additionalProperties": "Zusätzliche Eigenschaften",
     "removeSubject": "Betreff entfernen",
@@ -90,12 +89,15 @@
     "noFile": "Keine Datei gefunden",
     "createElecDesc": "Erstellen Sie ein neues Formular, indem Sie die untenstehenden Informationen ausfüllen oder indem Sie",
     "uploadJSON": "Hochladen einer JSON-Datei",
-    "enterMainTitleLg1": "Geben Sie den Haupttitel auf Deutsch ein    ",
+    "enterMainTitleLg2": "Geben Sie den Haupttitel auf Deutsch ein    ",
     "enterMainTitleLg": "Geben Sie den Haupttitel auf Englisch ein",
-    "enterMainTitleLg2": "Geben Sie den Haupttitel auf Französisch",
-    "enterSubjectTitleLg1": "Geben Sie den Titel des Themas Deutsch ein",
+    "enterMainTitleLg1": "Geben Sie den Haupttitel auf Französisch",
+    "enterSubjectTitleLg2": "Geben Sie den Titel des Themas Deutsch ein",
     "enterSubjectTitleLg": "Geben Sie den Titel des Themas Englisch ein",
-    "enterSubjectTitleLg2": "Geben Sie den Titel des Themas Französisch ein",
+    "enterSubjectTitleLg1": "Geben Sie den Titel des Themas Französisch ein",
+    "enterTitleLg2": "Geben Sie den Titel Deutsch ein",
+    "enterTitleLg": "Geben Sie den Titel Englisch ein",
+    "enterTitleLg1": "Geben Sie den Titel Französisch ein",
     "errorCandidates": "Sie müssen mindestens einen Kandidaten hinzufügen!",
     "errorNewCandidate": "Sind Sie sicher, dass Sie nichts hinzufügen möchten?",
     "errorRetrievingForms": "Beim Abrufen aller Formulare von unserem Server scheint ein Fehler aufgetreten zu sein. Wenden Sie sich an den Administrator dieser Website. Fehler:",
@@ -263,7 +265,12 @@
     "actionTextVoter1": "Das Formular ist noch nicht geöffnet, Sie können später wiederkommen, um abzustimmen, sobald es geöffnet ist.",
     "actionTextVoter2": "Die Ergebnisse des Formulars liegen noch nicht vor.",
     "choice": "Auswahl",
-    "logoutWarning": "Sie sind dabei, sich abzumelden. Sind Sie sicher, dass Sie fortfahren möchten?",
-    "continue": "Fortfahren"
+    "logoutWarning": "Sie sind dabei, sich abzumelden. Wenn Sie gerade ein Formular ausfüllen, empfehlen wir Ihnen, das Formular als JSON zu exportieren, da Sie sonst Ihre Änderungen verlieren. Sind Sie sicher, dass Sie fortfahren möchten?",
+    "continue": "Fortfahren",
+    "enterHintLg1": "Geben Sie einen Hinweis auf Französisch ein (optional)",
+    "enterHintLg": "Geben Sie einen Hinweis auf Englisch ein (optional)",
+    "enterHintLg2": "Geben Sie einen Hinweis auf Deutsch ein (optional)",
+    "hint": "Hinweis",
+    "invalidInput": "Bitte geben Sie eine Zahl zwischen 1 und {{max}} ein."
   }
 }

web/frontend/src/language/en.json

@@ -40,8 +40,9 @@
     "enterMinN": "Enter the MinN",
     "enterMaxN": "Enter the MaxN",
     "enterRegex": "Enter your regex",
-    "enterTitle": "Enter your Title",
-    "enterHint": "Enter your Hint (optionnal)",
+    "enterHintLg": "Enter a Hint in English (optionnal)",
+    "enterHintLg1": "Enter a Hint in French (optionnal)",
+    "enterHintLg2": "Enter a Hint in German (optionnal)",
     "mainProperties": "Main properties",
     "additionalProperties": "Additional properties",
     "removeSubject": "Remove subject",
@@ -66,7 +67,7 @@
     "namePlaceHolder": "Enter the name",
     "addCandidate": "Add a candidate",
     "addUser": "Add user",
-    "role": "Role",
+    "role": "Role ",
     "roles": "Roles",
     "edit": "Edit",
     "nothingToAdd": "There is nothing to add.",
@@ -89,10 +90,13 @@
     "uploadJSON": "uploading a JSON file",
     "enterMainTitleLg": "Enter the Main Title in English",
     "enterMainTitleLg1": "Enter the Main Title in French",
-    "enterMainTitleLg2": "Enter the Main Title in Deutsch",
+    "enterMainTitleLg2": "Enter the Main Title in German",
     "enterSubjectTitleLg1": "Enter the Subject Title in French",
     "enterSubjectTitleLg": "Enter the Subject Title in English",
-    "enterSubjectTitleLg2": "Enter the Subject Title in Deutsch",
+    "enterSubjectTitleLg2": "Enter the Subject Title in German",
+    "enterTitleLg": "Enter the Title in English",
+    "enterTitleLg1": "Enter the Title in French",
+    "enterTitleLg2": "Enter the Title in German",
     "errorCandidates": "You must add at least one candidate!",
     "errorNewCandidate": "Are you sure you don't want to add ",
     "errorRetrievingForms": "An error seems to have occurred while retrieving all the forms from our server. Contact the administrator of this website. Error: ",
@@ -265,8 +269,9 @@
     "resIndiv": "Individual",
     "resGroup": "Grouped",
     "choice": "Choice",
-    "logoutWarning": "You are about to log out. Are you sure you want to continue?",
+    "logoutWarning": "You are about to log out. If you are currently filling a form, we suggest you to export the form as a JSON, otherwise you will lose your modifications. Are you sure you want to continue?",
     "continue": "Continue",
-    "invalidInput": "Please enter a number between 1 and {{max}}."
+    "invalidInput": "Please enter a number between 1 and {{max}}.",
+    "hint": "Hint"
   }
 }

web/frontend/src/language/fr.json

@@ -27,14 +27,14 @@
     "showing": "Montrer",
     "saveQuestion": "Enregistrer",
     "addRank": "Ajouter un rang",
-    "editrank": "Modifier un rang",
-    "removerank": "Enlever un rang",
-    "addSelect": "Ajouter la sélection",
+    "editrank": "Modifier le rang",
+    "removerank": "Supprimer le rang",
+    "addSelect": "Ajouter une sélection",
     "editselect": "Modifier la sélection",
     "removeselect": "Supprimer la sélection",
     "addText": "Ajouter un texte",
-    "edittext": "Modifier un texte",
-    "removetext": "Supprimer un texte",
+    "edittext": "Modifier le texte",
+    "removetext": "Supprimer le texte",
     "subject": "Sujet",
     "choices": "Choix",
     "answers": "Réponses",
@@ -44,16 +44,15 @@
     "enterMinN": "Entrer le MinN",
     "enterMaxN": "Entrer le MaxN",
     "enterRegex": "Entrer votre regex",
-    "enterTitle": "Entrer votre Titre",
     "mainProperties": "Principales propriétés",
     "additionalProperties": "Propriétés additionnels",
-    "removeSubject": "Suprimer un sujet",
+    "removeSubject": "Suprimer le sujet",
     "addSubject": "Ajouter un sujet",
     "addQuestionrank": "Rang",
-    "addQuestionselect": "Sélectionner",
+    "addQuestionselect": "Selection",
     "addQuestiontext": "Texte",
     "importFile": "Importer le fichier JSON ",
-    "enterSciper": "Merci de donner le sciper de l'utilisateur",
+    "enterSciper": "Merci de rentrer le sciper de l'utilisateur",
     "adminDetails": "Ajouter ou supprimer les rôles des utilisateurs du tableau de l'admin",
     "navBarCreateForm": "Créer un sondage",
     "homeTitle": "Bienvenue dans notre platforme de e-voting!",
@@ -73,7 +72,7 @@
     "roles": "Rôles",
     "edit": "Editer",
     "nothingToAdd": "Il y a rien à ajouter.",
-    "duplicateCandidate": "Ce candidat a déjà été ajouter.",
+    "duplicateCandidate": "Ce candidat a déjà été ajouté.",
     "add": "Ajouter",
     "exportJSON": "Exporter en JSON",
     "delete": "Supprimer",
@@ -96,6 +95,9 @@
     "enterSubjectTitleLg1": "Entrer le Titre du sujet en Français",
     "enterSubjectTitleLg": "Entrer le Titre du sujet en Anglais",
     "enterSubjectTitleLg2": "Entrer le Titre du sujet en Allemand",
+    "enterTitleLg1": "Entrer le Titre en Français",
+    "enterTitleLg": "Entrer le Titre en Anglais",
+    "enterTitleLg2": "Entrer le Titre en Allemand",
     "errorCandidates": "Vous devez ajouter au moins un candidat!",
     "errorNewCandidate": "Vous êtes de sûr de ne pas vouloir ajouter ",
     "errorRetrievingForms": "Une erreur semble s'être produite lors de la récupération des sondages sur notre serveur. Contactez l'administrateur de ce site. Erreur: ",
@@ -133,7 +135,7 @@
     "statusInitial": "Créé",
     "statusInitializedNodes": "Noeuds initialisés",
     "initializeNode": "Initialiser les noeuds",
-    "initialized": "Initializé",
+    "initialized": "Initialisé",
     "initializing": "Initialisation...",
     "settingUp": "Mise en place...",
     "statusSetup": "Configuration",
@@ -147,10 +149,10 @@
     "opening": "Ouverture...",
     "statusClose": "Fermé",
     "closing": "Fermeture...",
-    "shuffling": "Mélangé...",
-    "statusShuffle": "Les ballots ont été mélangé",
+    "shuffling": "Mélange...",
+    "statusShuffle": "Les votes ont été mélangé",
     "decrypting": "Décryptage...",
-    "statusDecrypted": "Les ballots ont été décrypté",
+    "statusDecrypted": "Les votes ont été décrypté",
     "statusPubSharesSubmitted": "PubShares ont été soumis",
     "combine": "Combiner",
     "combining": "Combiné...",
@@ -175,7 +177,7 @@
     "successRemoveUser": "Utilisateur supprimé avec succès!",
     "errorRemoveUser": "Erreur lors de la suppression de l'utilisateur",
     "errorFetchingUsers": "Erreur lors de la récupération des utilisateurs",
-    "voteFailure": "Votre ballot n'a pas été pris en compte. C'est possible que le sondage a été fermé ou annulé. Essayez de rafraichir la page.",
+    "voteFailure": "Votre vote n'a pas été pris en compte. C'est possible que le sondage a été fermé ou annulé. Essayez de rafraichir la page.",
     "ballotFailure": "Une erreur est survenu lors de l'envoi de votre ballot. Merci de contacter l'administrateur de ce site. ",
     "incompleteBallot": "Certaines réponses ne sont pas complète.",
     "selectMin": "Selectionnez {{minSelect}} {{singularPlural}}. ",
@@ -192,16 +194,16 @@
     "pluralAnswers": "réponses",
     "rankRange": "La réponse doit être entre 1 et {{max}}. ",
     "castVote": "Voter",
-    "voteExplanation": "Vous pouvez voter autant de fois que vous le souhaitez tant que le sondage est ouverte. Seul votre dernier vote sera pris en compte.",
+    "voteExplanation": "Vous pouvez voter autant de fois que vous le souhaitez tant que le sondage est ouvert. Seul votre dernier vote sera pris en compte.",
     "noVote": "Il y a actuellement rien à voter.",
     "voteAllowed": "Vous êtes autorisés à voter sur les sondages ci-dessous. Cliquez sur le titre d'un sondage pour afficher son bulletin de vote et voter.",
     "displayResults": "Les résultats de(s) sondage(s) listé(s) ci-dessous sont disponibles. Clique sur le titre d'un sondage pour y avoir accès.",
     "noResultsAvailable": "Il y a actuellement aucuns résultats disponibles.",
     "resultExplanation1": "Les résultats des questions sélectives et textuelles sont donnés en pourcentage du nombre de voix pour un candidat divisé par le nombre de bulletins de vote. ",
     "resultExplanation2": "Les résultats de la question de classement correspondent au pourcentage de la note d'un candidat. Chaque électeur donne des points aux candidats en les classant de 1 à N (le plus bas est le mieux). ",
     "resultExplanation3": "Le score correspond à la somme des points obtenus par un candidat et est divisé par le nombre total de points attribués sur l'ensemble des bulletins, puis soustrait à un",
-    "shuffle": "Mélangez",
-    "decrypt": "Décryptez",
+    "shuffle": "Mélange",
+    "decrypt": "Décryptage",
     "seeResult": "Voir les résultats",
     "totalNumberOfVotes": "Nombre total de votes : {{votes}}",
     "notEnoughBallot": "L'opération a échoué parce que moins 2 votes ont été enregistré.",
@@ -263,7 +265,12 @@
     "actionTextVoter1": "Le sondage n'est pas encore ouvert, vous pouvez revenir plus tard pour voter lorsque ce sera ouvert.",
     "actionTextVoter2": "Les résultats du sondage ne sont pas encore disponible.",
     "choice": "Choix",
-    "logoutWarning": "Vous êtes sur le point de vous déconnecter. Êtes vous sûr de vouloir continuer ?",
-    "continue": "Continuer"
+    "logoutWarning": "Vous êtes sur le point de vous déconnecter. Si vous êtes en train de remplir un sondage, nous vous suggérons d'exporter le sondage en JSON, sinon vous perdrez vos modifications. Êtes vous sûr de vouloir continuer ?",
+    "continue": "Continuer",
+    "hint": "Indication",
+    "enterHintLg": "Entrer une indication en Anglais (optionnel)",
+    "enterHintLg1": "Entrer une indication en Français (optionnel)",
+    "enterHintLg2": "Entrer une indication en Allemand (optionnel)",
+    "invalidInput": "Entrer s'il vous plaît un nombre entre 1 et {{max}}"
   }
 }

web/frontend/src/layout/App.tsx

@@ -40,7 +40,6 @@ const App = () => {
     let location = useLocation();
 
     const authCtx = useContext(AuthContext);
-
     if (!authCtx.isLogged) {
       return <Navigate to={ROUTE_LOGIN} state={{ from: location }} replace />;
     } else {