From d4fef5323b8e3509e2c81054c7f541829d66ffe1 Mon Sep 17 00:00:00 2001 From: Kitteh Date: Mon, 19 Apr 2021 20:17:07 +0100 Subject: [PATCH] Add language change screen. --- src/PageState.js | 4 +++ src/main.js | 4 ++- src/pageUtils.js | 8 +++-- src/pages/Home.js | 4 +++ src/pages/Me.js | 12 +++++++- src/pages/SetLanguage.js | 63 ++++++++++++++++++++++++++++++++++++++++ src/pages/index.js | 9 +++--- src/translations/en.js | 5 +++- 8 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 src/pages/SetLanguage.js diff --git a/src/PageState.js b/src/PageState.js index 0c7ebfc..9c5baa7 100644 --- a/src/PageState.js +++ b/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); diff --git a/src/main.js b/src/main.js index 90a9d37..19bf3fc 100644 --- a/src/main.js +++ b/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) { diff --git a/src/pageUtils.js b/src/pageUtils.js index 714687b..342938d 100644 --- a/src/pageUtils.js +++ b/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,7 +24,9 @@ export function changePage(page) { } else { pageState.currentPage = realPages[page]; } - renderPage(); + if (shouldSwitch) { + renderPage(); + } } export function renderPage() { diff --git a/src/pages/Home.js b/src/pages/Home.js index 51526f8..58bd0fb 100644 --- a/src/pages/Home.js +++ b/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; diff --git a/src/pages/Me.js b/src/pages/Me.js index 5109abb..83ac8e3 100644 --- a/src/pages/Me.js +++ b/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"); + } + }) + }), ] })); } diff --git a/src/pages/SetLanguage.js b/src/pages/SetLanguage.js new file mode 100644 index 0000000..d370794 --- /dev/null +++ b/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"); + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 4118677..3b64bd7 100644 --- a/src/pages/index.js +++ b/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"; diff --git a/src/translations/en.js b/src/translations/en.js index 1827091..dbcaff1 100644 --- a/src/translations/en.js +++ b/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", } \ No newline at end of file