Merge pull request #6 from sebadob/i18n-base

i18n for login page
sebadob · Aug 2, 2023 · 99e454e · 99e454e
2 parents a68c652 + be959ec
commit 99e454e
Show file tree

Hide file tree

Showing 19 changed files with 388 additions and 212 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -52,6 +52,7 @@
   %sveltekit.head%
 </head>
 <body>
+<template id="i18n">{{ i18n }}</template>
 <input name="rauthy-csrf-token" id="{{ csrf_token }}" type="hidden"/>
 <input name="rauthy-data" id="{{ data }}" type="hidden"/>
 <input name="rauthy-action" id="{{ action }}" type="hidden"/>

diff --git a/frontend/src/components/admin/AdminMainPre.svelte b/frontend/src/components/admin/AdminMainPre.svelte
@@ -22,9 +22,11 @@
             if (resAdmin.ok) {
                 sessionInfo = body;
                 isAdmin = true;
-            } else {
+            } else if (res.status === 406 ) {
                 mfaReqErr = true;
                 sessionInfo = {};
+            } else {
+                sessionInfo = {};
             }
         } else {
             redirectToLogin();
@@ -48,7 +50,6 @@
                 Afterwards, you need to do a logout and log back in.
             </div>
             <Button on:click={() => window.location.href = '/auth/v1/account'}>ACCOUNT</Button>
-            <!--            <Button on:click={() => window.location.href = '/auth/v1/account.html'}>ACCOUNT</Button>-->
         </div>
     {:else if !isAdmin}
         <div class="noAdmin">

diff --git a/frontend/src/components/webauthn/WebauthnRequest.svelte b/frontend/src/components/webauthn/WebauthnRequest.svelte
@@ -4,6 +4,7 @@
     import Loading from "$lib/Loading.svelte";
     import {webauthnAuth} from "../../utils/webauthn.js";
 
+    export let t;
     export let data;
     export let purpose = 'Login';
     export let onError = () => {
@@ -61,13 +62,14 @@
 
             <div class="contentRow">
                 <div class="contentHeader">
-                    Please login with your MFA device
+                    {t.provideMfa}
                 </div>
             </div>
 
             <div class="contentRow">
                 <div class="contentHeader">
-                    Request expires:
+                    {t.requestRxpires}
+                    :
                 </div>
                 <div>
                     <progress value={$progress} max={data.exp}></progress>
@@ -77,7 +79,7 @@
             <div class="contentRow">
                 {#if success}
                     <div class="good">
-                        Acknowledged
+                        {t.mfaAck}
                     </div>
                 {:else if err}
                     <div class="err">

diff --git a/frontend/src/lib/I18n.svelte b/frontend/src/lib/I18n.svelte
diff --git a/frontend/src/lib/LangSelector.svelte b/frontend/src/lib/LangSelector.svelte
@@ -1,8 +1,6 @@
 <script>
     import {onMount} from "svelte";
-    import {getCookie} from "./utils/helpers.js";
-
-    export let style = "position: absolute; top: 0; right: 17px; display: flex;";
+    import {getCookie} from "$lib/utils/helpers.js";
 
     const attrs = ';Path=/;SameSite=Lax;Max-Age=157680000';
     let lang;
@@ -14,40 +12,37 @@
     // Tries to an already set language in various places, including legacy Meteo Admin UI locations
     function readLang() {
         // Priority: cookie -> local storage -> Admin UI Cookie -> Admin UI Local Storage
-        let cookie = getCookie('LOCALE');
+        let cookie = getCookie('locale');
         if (cookie) {
             lang = cookie;
             return;
         }
 
-        let locale = localStorage.getItem('LOCALE');
-        if (locale) {
-            document.cookie = 'LOCALE=' + locale + attrs;
-            lang = locale;
-            return;
-        }
-
-        let legacy = localStorage.getItem('i18NextLng');
-        if (legacy) {
-            document.cookie = 'LOCALE=' + locale + attrs;
-            lang = legacy;
-            return;
-        }
+        // let locale = localStorage.getItem('locale');
+        // if (locale) {
+        //     document.cookie = 'locale=' + locale + attrs;
+        //     lang = locale;
+        //     return;
+        // }
 
-        // If we could not find any value until now, we are assuming 'de' as default
-        document.cookie = 'LOCALE=de' + attrs;
-        lang = 'de';
+        lang = navigator.language;
+        console.log('navigator.language: ' + lang);
+        // If we could not find any value until now, we are assuming 'en' as default
+        // document.cookie = 'locale=en' + attrs;
+        // lang = 'en';
     }
 
     function switchLang(l) {
-        document.cookie = 'LOCALE=' + l + attrs;
+        document.cookie = 'locale=' + l + attrs;
         lang = l;
         window.location.reload();
     }
 </script>
 
-<div style={style}>
+<div>
     <div
+            role="button"
+            tabindex="0"
             class={'de' === lang ? 'lang selected' : 'lang'}
             on:click={() => switchLang('de')}
             on:keypress={() => switchLang('de')}
@@ -56,6 +51,8 @@
     </div>
 
     <div
+            role="button"
+            tabindex="0"
             class={'en' === lang ? 'lang selected' : 'lang'}
             on:click={() => switchLang('en')}
             on:keypress={() => switchLang('en')}
@@ -64,6 +61,8 @@
     </div>
 
     <div
+            role="button"
+            tabindex="0"
             class={'fr' === lang ? 'lang selected' : 'lang'}
             on:click={() => switchLang('fr')}
             on:keypress={() => switchLang('fr')}