diff options
| author | stuebinm | 2021-04-08 17:44:53 +0200 |
|---|---|---|
| committer | stuebinm | 2021-04-08 17:53:10 +0200 |
| commit | 3890d8ac88b2fdfa7b54d433e8e2edf2164be6f0 (patch) | |
| tree | 375aafba67ee4c7a314bd55d17f89275bd691698 /site/index.html | |
| parent | 7e38d7f84463342dd428e7400777fdc675a8fbce (diff) | |
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.
Diffstat (limited to 'site/index.html')
| -rw-r--r-- | site/index.html | 31 |
1 files changed, 17 insertions, 14 deletions
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 () } |