From 3890d8ac88b2fdfa7b54d433e8e2edf2164be6f0 Mon Sep 17 00:00:00 2001 From: stuebinm Date: Thu, 8 Apr 2021 17:44:53 +0200 Subject: add translation logic, locales for en and de This adds a basic "replace fixed keys"-approach to translating the UI of surveys. So far this works great, but for complex things it may fail for some languages — for now I'll just try to take care not to add any output that puts things in the middle of sentences, which I think should work for a simple survey thing. The default language is still english, which is important as the language is declared withing a survey config — i.e. if loading it fails, it cannot be applied, and the "enter passphrase" dialog can also not change based on locales. This could possibly be fixed by adding an unencrypted "header" to the encrypted configs, but for now I'm not sure if that makes a lot of sense — it may be easier to just guess based on the browser's settings, and otherwise fall back to some specified default language. The "thanks for your answers"-page also has no translation so far. --- site/index.html | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) (limited to 'site/index.html') diff --git a/site/index.html b/site/index.html index 5771e94..bceb936 100644 --- a/site/index.html +++ b/site/index.html @@ -1,4 +1,4 @@ -<html> +<html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> @@ -10,6 +10,7 @@ <script type="module"> import init, { age_encrypt, age_decrypt } from "./rage_wasm.js"; + import _, { setLang } from "./i18n.js"; /// the basic idea here is to have functions which construct parts /// of the DOM that renders the survey to a user. These functions @@ -122,6 +123,8 @@ // makes a survey from a given json config object function mkSurvey (survey) { document.title = survey.title; + setLang(survey.lang); + document.getElementsByTagName("html")[0].lang = survey.lang; // make the header with general information let header = document.createElement("div"); appendChildren(header, [ @@ -146,7 +149,7 @@ }); let footer = mkElement("section"); - let submit = mkElement("button", "Submit"); + let submit = mkElement("button", _("submit")); let errormsg = mkElement("p", "", "error"); appendChildren(footer, [ mkElement("hr"), @@ -182,17 +185,17 @@ console.log(response.text()) window.location.href = "thanks.html"; } - errormsg.innerText = "POST request returned error code:\n" + errormsg.innerText = _("Error: post returned error") + "\n" + response.status + ": " + response.statusText; errormsg.hidden = false; }).catch(error => { console.log(error); - errormsg.innerText = "Error: The http POST request did not succeed."; + errormsg.innerText = _("Error: could not post"); errormsg.hidden = false; }); } else { - errormsg.innerText = "Cannot submit: not all required questions were filled in!"; + errormsg.innerText = _("Error: answers invalid"); errormsg.hidden = false; } } @@ -207,21 +210,21 @@ /// displays a passphrase prompt until the use enters a passphrase /// which age can use for successful decryption function askPassphrase (ciphertext, secondTry=false) { - document.title = "Enter Passphrase"; + document.title = _("Enter Passphrase"); let div = mkElement("div"); - let button = mkElement("button", "decrypt"); + let button = mkElement("button", _("decrypt")); let [passphrase,label] = mkOption( "password", - "please enter a passphrase to access the survey:" + _("please enter passphrase") ); passphrase.value = ""; appendChildren(div, [ - mkElement("h1", "Passphrase"), + mkElement("h1", _("Passphrase")), appendChildren(mkElement("p"),[label]), passphrase, button ].concat( - secondTry ? [mkElement("p","passphrase was incorrect!","error")] : [] + secondTry ? [mkElement("p",_("passphrase incorrect"),"error")] : [] )); root.appendChild(div); button.onclick = () => { @@ -247,7 +250,7 @@ mkElement("h1", "Error"), mkElement("p", msg, "error"), appendChildren( - mkElement("p","attempted path: ","error"), + mkElement("p",_("attempted path:"),"error"), [mkElement("tt", surveyUrl,"error")] ) ]); @@ -275,7 +278,7 @@ console.log ("survey appears to be encrypted"); askPassphrase(bytearray); } else { - mkReadError ("Could not load this survey; it appears to be in a wrong or unknown format."); + mkReadError (_("Error: unknown format")); } } /// if the survey was unencrypted, start it here. If it @@ -287,14 +290,14 @@ } // couldn't load survey json, show error message } else { - mkReadError ("Could not load this survey; are you sure that it exists?"); + mkReadError (_("Error: survey doesn't exist")); } } } } if (surveyUrl === "") { - mkReadError ("There's nothing here. Maybe try appending something after the url?\n\nAlternatively, check to see if you copied the whole url."); + mkReadError (_("Error: nothing here")); } else { main () } -- cgit v1.2.3