@@ -89,5 +89,5 @@ - Import corresponding moment locales in `frontend/hooks/useLocale.ts`
 - Add language key to `locales` field in `frontend/next-i18next.config.js`
 - Add language key to `lang` field in `backend/src/api/event/content-types/event/schema.json`
 - Add language key to `lang` field in `backend/src/extensions/users-permissions/content-types/user/schema.json`
-- Add `PROTECTED.languages.<lang>: <Lang label>` in `frontend/locales/en.json` (See existing keys)
+- Add language translation in `frontend/locales/constants.ts` (See existing keys)
 - (Re)start backend and run `yarn gql` from frontend directory

@@ -2,7 +2,7 @@ import FormControl from '@mui/material/FormControl';
 import {Enum_Event_Lang} from '../../generated/graphql';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
-import {useTranslation} from 'next-i18next';
+import {langs, langLocales} from '../../locales/constants';
 
 type Props = {
   value: Enum_Event_Lang;
@@ -10,7 +10,6 @@ onChange: (lang: Enum_Event_Lang) => void;
 };
 
 const LangSelector = (props: Props) => {
-  const {t} = useTranslation();
   return (
     <FormControl fullWidth>
       <Select
@@ -20,9 +19,14 @@ variant="standard"
         value={props.value}
         onChange={e => props.onChange(e.target.value)}
       >
-        <MenuItem value={'fr'}>{t`PROTECTED.languages.fr`}</MenuItem>
-        <MenuItem value={'en'}>{t`PROTECTED.languages.en`}</MenuItem>
-        <MenuItem value={'nl'}>{t`PROTECTED.languages.nl`}</MenuItem>
+        {langs.map(
+          lang =>
+            langLocales[lang] && (
+              <MenuItem value={lang} key={lang}>
+                {langLocales[lang]}
+              </MenuItem>
+            )
+        )}
       </Select>
     </FormControl>
   );

@@ -5,10 +5,10 @@ import Icon from '@mui/material/Icon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {useTranslation} from 'next-i18next';
-import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
 import withLanguagesSelection, {
   LanguageSelectionComponentProps,
 } from './withLanguagesSelection';
+import {langLocales, langs} from '../../locales/constants';
 
 const IconLanguageSelection = ({
   language,
@@ -22,7 +22,7 @@ const handleClick = event => {
     setAnchorEl(event.currentTarget);
   };
 
-  const onConfirm = (lang: SupportedLocales) => {
+  const onConfirm = (lang: (typeof langs)[number]) => {
     setAnchorEl(null);
     onChangeLang(lang);
   };
@@ -52,13 +52,13 @@ keepMounted
         open={Boolean(anchorEl)}
         onClose={() => setAnchorEl(null)}
       >
-        {Object.keys(SupportedLocales).map(locale => (
+        {langs.map(lang => (
           <MenuItem
-            key={locale}
-            disabled={language === SupportedLocales[locale]}
-            onClick={() => onConfirm(SupportedLocales[locale])}
+            key={lang}
+            disabled={language === lang}
+            onClick={() => onConfirm(lang)}
           >
-            {t(`PROTECTED.languages.${locale}`)}
+            {langLocales[lang]}
           </MenuItem>
         ))}
       </Menu>

@@ -4,10 +4,10 @@ import MenuItem from '@mui/material/MenuItem';
 import Box from '@mui/material/Box';
 import {useTheme} from '@mui/material/styles';
 import {useTranslation} from 'next-i18next';
-import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
 import withLanguagesSelection, {
   LanguageSelectionComponentProps,
 } from './withLanguagesSelection';
+import {langLocales, langs} from '../../locales/constants';
 
 const Languages = ({
   language,
@@ -21,7 +21,7 @@ const handleClick = event => {
     setSelecting(!isSelecting);
   };
 
-  const onConfirm = (lang: SupportedLocales) => {
+  const onConfirm = (lang: (typeof langs)[number]) => {
     setSelecting(false);
     onChangeLang(lang);
   };
@@ -38,13 +38,13 @@ overflow: 'hidden',
         }}
         dense
       >
-        {Object.keys(SupportedLocales).map(locale => (
+        {langs.map(lang => (
           <MenuItem
-            key={locale}
-            disabled={language === SupportedLocales[locale]}
-            onClick={() => onConfirm(SupportedLocales[locale])}
+            key={lang}
+            disabled={language === lang}
+            onClick={() => onConfirm(lang)}
           >
-            {t(`PROTECTED.languages.${locale}`)}
+            {langLocales[lang]}
           </MenuItem>
         ))}
       </MenuList>

@@ -0,0 +1,9 @@ 
+export const langLocales = {
+  en: 'English (100%)',
+  fr: 'Français (100%)',
+  nl: 'Nederlands (97%)',
+  de: 'Deutsch (97%)',
+  it: 'Italiano (97%)',
+};
+
+export const langs = Object.keys(langLocales);

@@ -197,11 +197,6 @@ "profile.password_changed": "Password updated",
   "profile.stripe_link.button": "History",
   "profile.stripe_link.title": "Billing",
   "profile.title": "Profile",
-  "PROTECTED.languages.en": "English (100%)",
-  "PROTECTED.languages.fr": "Français (100%)",
-  "PROTECTED.languages.nl": "Nederlands (97%)",
-  "PROTECTED.languages.de": "Deutsch (96%)",
-  "PROTECTED.languages.it": "Italiano (100%)",
   "signin.email": "Email",
   "signin.emailConfirmation": "Your account has been confirmed. You can now login.",
   "signin.errors.CredentialsSignin": "Check your email and password. If your account is linked to Google, please use the Google auth. button.",

@@ -197,11 +197,6 @@ "profile.password_changed": "Mot de passe mis à jour",
   "profile.stripe_link.button": "Historique",
   "profile.stripe_link.title": "Facturation",
   "profile.title": "Profil",
-  "PROTECTED.languages.en": "English (100%)",
-  "PROTECTED.languages.fr": "Français (100%)",
-  "PROTECTED.languages.nl": "Nederlands (97%)",
-  "PROTECTED.languages.de": "Deutsch (96%)",
-  "PROTECTED.languages.it": "Italiano (100%)",
   "signin.email": "Email",
   "signin.emailConfirmation": "Votre compte a bien été confirmé. Vous pouvez maintenant vous connecter.",
   "signin.errors.CredentialsSignin": "Vérifiez votre email et mot de passe. Si votre compte est lié à Google, merci d'utiliser l'authentification Google.",

@@ -186,8 +186,6 @@ "profile.password_changed": "Zaktualizowano hasło",
   "profile.stripe_link.button": "Historia",
   "profile.stripe_link.title": "Rachunek",
   "profile.title": "Profil",
-  "PROTECTED.languages.en": "English",
-  "PROTECTED.languages.fr": "Français",
   "signin.email": "E-mail",
   "signin.emailConfirmation": "Twoje konto zostało potwierdzone. Teraz można się zalogować.",
   "signin.errors.CredentialsSignin": "",
@@ -286,7 +284,6 @@ "travel.vehicle.title": "",
   "event.filter.dates": "Wiele dat",
   "passenger.informations.notSpecify": "Nie podano",
   "placeInput.item.noCoordinates": "Brak koordynatów",
-  "PROTECTED.languages.nl": "Holandia",
   "travel.removePassengerModal.cancel": "Anuluj",
   "event.filter.title": "Filtruj daty",
   "event.filter.allDates": "Wszystkie daty"

@@ -28,6 +28,7 @@ import {
   EventByUuidDocument,
   useUpdateEventMutation,
 } from '../../../generated/graphql';
+import {langLocales} from '../../../locales/constants';
 
 interface Props {
   eventUUID: string;
@@ -286,7 +287,7 @@ onChange={lang => setEventUpdate({lang})}
                 />
               ) : (
                 <Typography id="EventLang" sx={{pr: 3}}>
-                  {t(`PROTECTED.languages.${event.lang}`)}
+                  {langLocales[event.lang]}
                 </Typography>
               )}
             </Box>