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