Fix for #553, #564 and #407

Author: oharsta

client/src/components/LanguageSelector.jsx

@@ -5,9 +5,12 @@ import {replaceQueryParameter} from "../utils/QueryParameters";
 import {stopEvent} from "../utils/Utils";
 import "./LanguageSelector.scss"
 import {languageSwitched} from "../utils/Date";
+import {useAppStore} from "../stores/AppStore";
 
 export const LanguageSelector = () => {
 
+    const {config} = useAppStore(state => state);
+
     const handleChooseLocale = locale => e => {
         stopEvent(e);
         Cookies.set("lang", locale, {expires: 356, secure: document.location.protocol.endsWith("https")});
@@ -26,15 +29,15 @@ export const LanguageSelector = () => {
         );
     }
 
+    const languages = config.languages.split(",").map(lang => lang.trim());
     return (
         <nav className="sds--language-switcher sds--text--body--small" aria-label="Language">
             <ul>
-                <li>{renderLocaleChooser("nl")}
-                    <span className="sds--language-sds--divider">|</span>
-                </li>
-                <li>
-                    {renderLocaleChooser("en")}
-                </li>
+                {languages.map((lang, index) =>
+                    <li key={index}>{renderLocaleChooser(lang)}
+                        {(index + 1) < languages.length && <span className="sds--language-sds--divider">|</span>}
+                    </li>
+                )}
             </ul>
         </nav>
     );

client/src/locale/I18n.js

@@ -1,5 +1,6 @@
 import en from "./en";
 import nl from "./nl";
+import pt from "./pt";
 
 import {I18n as I18nRemote} from "i18n-js";
 
@@ -12,6 +13,7 @@ import {useAppStore} from "../stores/AppStore";
 const I18n = new I18nRemote({
     en: en,
     nl: nl,
+    pt: pt,
 });
 
 // DetermineLanguage based on parameter, cookie and finally navigator
@@ -24,7 +26,7 @@ if (isEmpty(parameterByName)) {
 if (isEmpty(parameterByName)) {
     parameterByName = navigator.language.toLowerCase().substring(0, 2);
 }
-if (["nl", "en"].indexOf(parameterByName) === -1) {
+if (["nl", "en", "pt"].indexOf(parameterByName) === -1) {
     parameterByName = "en";
 }
 I18n.locale = parameterByName;

client/src/locale/en.js

@@ -268,6 +268,7 @@ const en = {
         roleExpiryDate: "Role expiry date",
         roleExpiryDateQuestion: "Set a custom role expiration",
         roleExpiryDateInfo: "This role will be removed from the user {{expiry}}",
+        roleExpiryDateInfoOn: "This role will be removed from the user on {{date}}",
         roleExpiryDateInfoDefault: "By default this role will be removed from a user after {{days}} days",
         removeRole: "Remove role",
         after: "After",

client/src/locale/nl.js

@@ -268,6 +268,7 @@ const nl = {
         roleExpiryDate: "Verloopdatum rol",
         roleExpiryDateQuestion: "Zet een specifieke verloopdatum voor de rol",
         roleExpiryDateInfo: "Deze rol wordt verwijderd van de gebruiker {{expiry}}",
+        roleExpiryDateInfoOn: "Deze rol wordt verwijderd van de gebruiker op {{date}}",
         roleExpiryDateInfoDefault: "Default wordt deze rol verwijderd van de gebruiker na 365 dagen",
         removeRole: "Verwijder rol",
         after: "Na",
@@ -553,3 +554,4 @@ const nl = {
 }
 
 export default nl;
+