Add language change screen.

src/PageState.js

@@ -70,6 +70,10 @@ export class PageState extends Page {
     let curPage = localStorage.getItem('currentPage') || "HOME";
     return realPages[curPage];
   }
+  get currentPageString() {
+    let key = getKeyByObjectPropertyValue(realPages, this.currentPage);
+    return key;
+  }
   set currentPage(value) {
     let key = getKeyByObjectPropertyValue(realPages, value);
     localStorage.setItem('currentPage', key);

src/main.js

@@ -40,6 +40,7 @@ import {
   KeyValueDeletePage,
   KeyValueSecretsEditPage,
   PwGenPage,
+  SetLanguagePage,
 } from "./pages";
 
 const pages = {
@@ -50,6 +51,7 @@ const pages = {
   LOGIN: new LoginPage(),
   SET_VAULT_URL: new SetVaultURLPage(),
   UNSEAL: new UnsealPage(),
+  SET_LANGUAGE: new SetLanguagePage(),
   TRANSIT_VIEW: new TransitViewPage(),
   TRANSIT_VIEW_SECRET: new TransitViewSecretPage(),
   TRANSIT_ENCRYPT: new TransitEncryptPage(),
@@ -159,7 +161,7 @@ function onLoad() {
   renderPage();
 
   setInterval(async () => {
-    if (pageState.currentPage != "UNSEAL") {
+    if (pageState.currentPageString != "UNSEAL") {
       if (!localStorage.getItem('apiurl')) { return; }
       let sealStatus = await getSealStatus();
       if (sealStatus.sealed) {

src/pageUtils.js

@@ -15,8 +15,8 @@ export function setErrorText(text) {
   });
 }
 
-export function changePage(page) {
-  if (pageState.currentPage) {
+export function changePage(page, shouldSwitch = true) {
+  if (pageState.currentPage && shouldSwitch) {
     pageState.currentPage.cleanup();
   }
   if (typeof page == 'object') {
@@ -24,8 +24,10 @@ export function changePage(page) {
   } else {
     pageState.currentPage = realPages[page];
   }
+  if (shouldSwitch) {
     renderPage();
   }
+}
 
 export function renderPage() {
   console.log("Rendering Page: ", pageState.currentPage.name);

src/pages/Home.js

@@ -11,6 +11,10 @@ export class HomePage extends Page {
   }
   async render() {
     pageContent.innerHTML = "";
+    if (!localStorage.getItem("language")) {
+      changePage("SET_LANGUAGE");
+      return;
+    }
     if (!getAPIURL()) {
       changePage("SET_VAULT_URL");
       return;

src/pages/Me.js

@@ -54,7 +54,17 @@ export class MePage extends Page {
               });
             }
           })
+        }),
+        makeElement({
+          tag: "li",
+          children: makeElement({
+            tag: "a",
+            text: i18next.t("change_language_btn"),
+            onclick: () => {
+              changePage("SET_LANGUAGE");
+            }
           })
+        }),
       ]
     }));
   }

src/pages/SetLanguage.js

@@ -0,0 +1,63 @@
+import { Page } from "../types/Page.js";
+import { setPageContent, changePage } from "../pageUtils.js";
+import { makeElement } from "../htmlUtils.js";
+import { Margin } from "../elements/Margin.js";
+import i18next from 'i18next';
+
+let languages = ["en", "de", "nl", "ru"];
+
+export class SetLanguagePage extends Page {
+  constructor() {
+    super();
+  }
+  render() {
+    let setLanguageForm = makeElement({
+      tag: "form",
+      id: "setLanguageForm",
+      children: [
+        Margin(makeElement({
+          tag: "select",
+          class: ["uk-select", "uk-form-width-large"],
+          attributes: {
+            name: "language"
+          },
+          children: languages.map(function (languageID) {
+            return makeElement({
+              tag: "option",
+              text: i18next.getFixedT(languageID, null)("language_name"),
+              value: languageID
+            })
+          })
+        })
+        ),
+        makeElement({
+          tag: "p",
+          id: "errorText",
+          class: "uk-text-danger"
+        }),
+        makeElement({
+          tag: "button",
+          class: ["uk-button", "uk-button-primary"],
+          text: i18next.t("set_language_btn"),
+          attributes: {
+            type: "submit",
+          }
+        })
+      ]
+    });
+    setPageContent(setLanguageForm);
+    setLanguageForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      let formData = new FormData(setLanguageForm);
+      let language = formData.get("language");
+      localStorage.setItem('language', language);
+      i18next.changeLanguage(language).then((t) => {
+          changePage("HOME", false);
+          location.reload();
+      });
+    });
+  }
+  get name() {
+    return i18next.t("set_language_title");
+  }
+}

src/pages/index.js

@@ -1,17 +1,18 @@
 export { HomePage } from "./Home.js";
-export { MePage } from "./Me.js";
-export { TOTPViewPage } from "./TOTP/TOTPView.js";
-export { NewTOTPPage } from "./TOTP/NewTOTP.js";
 export { LoginPage } from "./Login.js";
 export { SetVaultURLPage } from "./SetVaultURL.js";
+export { MePage } from "./Me.js";
 export { UnsealPage } from "./Unseal.js";
+export { PwGenPage } from "./PwGen.js";
+export { SetLanguagePage } from "./SetLanguage.js";
+export { TOTPViewPage } from "./TOTP/TOTPView.js";
+export { NewTOTPPage } from "./TOTP/NewTOTP.js";
 export { KeyValueViewPage } from "./KeyValue/KeyValueView.js";
 export { KeyValueSecretsPage } from "./KeyValue/KeyValueSecrets.js";
 export { KeyValueVersionsPage } from "./KeyValue/KeyValueVersions.js";
 export { KeyValueNewPage } from "./KeyValue/KeyValueNew.js";
 export { KeyValueDeletePage } from "./KeyValue/KeyValueDelete.js";
 export { KeyValueSecretsEditPage } from "./KeyValue/KeyValueSecretsEdit.js";
-export { PwGenPage } from "./PwGen.js";
 export { TransitViewPage } from "./Transit/TransitView.js";
 export { TransitViewSecretPage } from "./Transit/TransitViewSecret.js";
 export { TransitEncryptPage } from "./Transit/TransitEncrypt.js";

src/translations/en.js

@@ -18,11 +18,14 @@ module.exports = {
 
   "vaulturl_text": "Vault URL: {{text}}",
   "password_generator_btn": "Password Generator",
+  "change_language_btn": "Change Language",
   "your_token_expires_in": "Your token expires in {{date, until_date}}",
 
   "unseal_vault_text": "Unseal the Vault",
   "submit_key_btn": "Submit Key",
   "key_input_placeholder": "Key",
-  "unseal_keys_progress": "Keys: {{progress}}/{{keys_needed}}"
+  "unseal_keys_progress": "Keys: {{progress}}/{{keys_needed}}",
 
+  "set_language_title": "Set Language",
+  "set_language_btn": "Set Language",
 }