Migrated all code to use new localicious I18n

#546

README.md

@@ -87,6 +87,17 @@ If you need to register the public key in EB then issue this command and copy &
 ```
 cat myconext.crt |ghead -n -1 |tail -n +2 | tr -d '\n'; echo
 ```
+### [Translations](translations)
+
+```
+cd account-gui
+yarn localicious render ../myconext-server/src/main/resources/localizations.yaml ./src/locale/ --languages en,nl --outputTypes js -c SHARED
+rm -fr ./src/locale/js/Localizable.ts
+cd myconext-gui
+yarn localicious render ../myconext-server/src/main/resources/localizations.yaml ./src/locale/ --languages en,nl --outputTypes js -c SHARED
+rm -fr ./src/locale/js/Localizable.ts
+```
+
 ### [Miscellaneous](#miscellaneous)
 
 To get an overview of the git source file's:

account-gui/package.json

@@ -40,11 +40,13 @@
   },
   "dependencies": {
     "@github/webauthn-json": "^0.5.7",
+    "@picnicsupermarket/localicious": "^1.0.1",
     "dompurify": "^2.5.4",
     "i18n-js": "^3.3.0",
     "js-cookie": "^2.2.1",
     "postcss": "^8.4.31",
     "sass": "^1",
+    "save-dev": "^0.0.1-security",
     "svelte-routing": "^1.4.2"
   }
 }

account-gui/src/App.svelte

@@ -15,7 +15,7 @@
     import Footer from "./components/Footer.svelte";
     import {onMount} from "svelte";
     import {allowedEmailDomains, configuration, institutionalEmailDomains} from "./api";
-    import I18n from "i18n-js";
+    import I18n from "./locale/I18n";
     import {conf} from "./stores/conf";
     import {domains} from "./stores/domains";
     import Loader from "./components/Loader.svelte";
@@ -55,21 +55,20 @@
     onMount(() => configuration()
         .then(json => {
             $conf = json;
-            if (typeof window !== "undefined") {
-                const urlSearchParams = new URLSearchParams(window.location.search);
-                if (urlSearchParams.has("lang")) {
-                    I18n.locale = urlSearchParams.get("lang").toLowerCase();
-                } else if (Cookies.get("lang", {domain: $conf.domain})) {
-                    I18n.locale = Cookies.get("lang", {domain: $conf.domain}).toLowerCase();
-                } else {
-                    I18n.locale = navigator.language.toLowerCase().substring(0, 2);
-                }
+            const urlSearchParams = new URLSearchParams(window.location.search);
+            let locale = "en";
+            if (urlSearchParams.has("lang")) {
+                locale = urlSearchParams.get("lang").toLowerCase();
+            } else if (Cookies.get("lang", {domain: $conf.domain})) {
+                locale = Cookies.get("lang", {domain: $conf.domain}).toLowerCase();
             } else {
-                I18n.locale = "en";
+                locale = navigator.language.toLowerCase().substring(0, 2);
             }
-            if (["nl", "en"].indexOf(I18n.locale) < 0) {
-                I18n.locale = "en";
+            if (["nl", "en"].indexOf(locale) < 0) {
+                locale = "en";
             }
+            I18n.changeLocale(locale);
+
             $user.knownUser = Cookies.get(cookieNames.USERNAME);
             $user.email = $user.knownUser || "";
             $user.preferredLogin = Cookies.get(cookieNames.LOGIN_PREFERENCE);

account-gui/src/api/index.js

@@ -1,5 +1,5 @@
 //Internal API
-import I18n from "i18n-js";
+import I18n from "../locale/I18n";
 import {status} from "../constants/loginStatus";
 
 let csrfToken = null;
@@ -26,7 +26,7 @@ function validFetch(path, options) {
     options.headers = {
         Accept: "application/json",
         "Content-Type": "application/json",
-        "Accept-Language": I18n.locale,
+        "Accept-Language": I18n.currentLocale(),
         "X-CSRF-TOKEN": csrfToken
     };
     return fetch(path, options).then(res => validateResponse(res));
@@ -178,3 +178,8 @@ export function rememberMe(hash) {
 export function iDINIssuers() {
     return fetchJson("/myconext/api/sp/idin/issuers");
 }
+
+export function reportError(error) {
+    return postPutJson("/myconext/api/sp/error", error, "post");
+}
+

account-gui/src/components/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
 
-    import I18n from "i18n-js";
+    import I18n from "../locale/I18n";
     import Cookies from "js-cookie";
     import surfLogo from "../img/logo-surf.svg";
     import {conf} from "../stores/conf";
@@ -12,7 +12,7 @@
         window.location.search = urlSearchParams.toString();
     };
 
-    let isEn = I18n.locale === "en";
+    let isEn = I18n.currentLocale() === "en";
     let privacyUrl = isEn ? "https://eduid.nl/privacy-policy/" : "https://eduid.nl/privacy/";
     let termsUrl = isEn ? "https://eduid.nl/terms-of-use/" : "https://eduid.nl/gebruiksvoorwaarden/";
 
@@ -106,10 +106,10 @@
         </div>
 
         <ul>
-            <li class="{I18n.locale === 'en' ? 'active' : 'non_active'}">
+            <li class="{I18n.currentLocale() === 'en' ? 'active' : 'non_active'}">
                 <a href="/en" on:click|preventDefault|stopPropagation={changeLanguage("en")}>EN</a>
             </li>
-            <li class="{I18n.locale === 'nl' ? 'active' : 'non_active'}">
+            <li class="{I18n.currentLocale() === 'nl' ? 'active' : 'non_active'}">
                 <a href="/nl" on:click|preventDefault|stopPropagation={changeLanguage("nl")}>NL</a>
             </li>
         </ul>

account-gui/src/components/LoginOption.svelte

@@ -1,5 +1,5 @@
 <script>
-    import I18n from "i18n-js";
+    import I18n from "../locale/I18n";
     import {navigate} from "svelte-routing";
     import DOMPurify from "dompurify";
 

account-gui/src/components/LoginOptions.svelte

@@ -1,7 +1,7 @@
 <script>
   import Tooltip from './ToolTip.svelte';
   import question from "../icons/question.svg";
-  import I18n from "i18n-js";
+  import I18n from "../locale/I18n";
 
 </script>
 

account-gui/src/components/Modal.svelte

@@ -1,5 +1,5 @@
 <script>
-    import I18n from "i18n-js";
+    import I18n from "../locale/I18n";
     import Button from "./Button.svelte";
     import DOMPurify from "dompurify";
 

account-gui/src/components/SubContent.svelte

@@ -1,7 +1,7 @@
 <script>
     import {link, navigate} from "svelte-routing";
     import {onMount} from "svelte";
-    import I18n from "i18n-js";
+    import I18n from "../locale/I18n";
     import Modal from "../components/Modal.svelte";
 
     export let question = null;

account-gui/src/components/Verification.svelte

@@ -1,5 +1,5 @@
 <script>
-    import I18n from "i18n-js";
+    import I18n from "../locale/I18n";
     import oneMoreThingEmpty from "../icons/onemorething_empty.svg";
     import oneMoreThingFilled from "../icons/onemorething_filled.svg";
     import DOMPurify from "dompurify";

account-gui/src/locale/I18n.js

@@ -0,0 +1,42 @@
+import en from "./js/en/strings.json";
+import nl from "./js/nl/strings.json";
+import {reportError} from "../api";
+
+const translations = {
+    en: en,
+    nl: nl,
+};
+
+const format = (msg, ...args) => {
+    let result = msg;
+    for (let i = 0; i < args.length; i++) {
+        const pos = i + 1;
+        if (typeof args[i] === "string") {
+            result = result.replace("%" + pos + "$s", args[i]);
+        }
+        if (typeof args[i] === "number") {
+            result = result.replace("%" + pos + "$d", args[i]);
+        }
+    }
+    return result;
+};
+
+let locale = "en"
+
+const I18n = {
+    changeLocale: lang => locale = lang,
+    currentLocale: () => locale,
+    t: (key, model = {}, fallback = null) => {
+        const msg = translations[locale][key]
+        if (!msg) {
+            if (fallback) {
+                return fallback;
+            }
+            reportError({"Missing translation": `${key} in ${locale} translation`});
+            return `[missing "${key}" translation]`;
+        }
+        return format(msg, ...Object.values(model));
+    }
+};
+
+export default I18n;