Add translations on Me and Home page.

src/main.js

@@ -67,6 +67,7 @@ const pages = {
 import i18next from 'i18next';
 import translation_en from './translations/en.js'
 import translation_de from './translations/de.js'
+import formatDistance from 'date-fns/formatDistance';
 
 
 
@@ -123,7 +124,7 @@ function onLoad() {
           children: [
             ListItem(makeElement({
               tag: "a",
-              text: "Me",
+              text: i18next.t("me_btn"),
               onclick: _ => { changePage("ME"); }
             }))
           ]
@@ -142,7 +143,7 @@ function onLoad() {
           tag: "h3",
           class: "uk-card-title",
           id: "pageTitle",
-          text: "Title"
+          text: ""
         }),
         makeElement({
           tag: "div",
@@ -174,7 +175,12 @@ document.addEventListener('DOMContentLoaded', function () {
     resources: {
       en: { translation: translation_en },
       de: { translation: translation_de },
-
+    },
+    interpolation: {
+      format: function (value, format, _) {
+        if (format === 'until_date' && value instanceof Date) return formatDistance(new Date(), new Date(value));
+        return value;
+      }
     }
   }).then(function (t) {
     onLoad();

src/pages/Home.js

@@ -3,7 +3,7 @@ import { setErrorText, changePage } from "../pageUtils.js";
 import { getAPIURL, getToken } from "../utils.js";
 import { makeElement } from "../htmlUtils.js";
 import { getSealStatus, lookupSelf, getMounts } from "../api.js";
-import formatDistance from 'date-fns/formatDistance';
+import i18next from 'i18next';
 
 export class HomePage extends Page {
   constructor() {
@@ -35,14 +35,14 @@ export class HomePage extends Page {
           tag: "li",
           children: makeElement({
             tag: "span",
-            text: `VaultURL: ${getAPIURL()}`
+            html: i18next.t("vaulturl_text", {"text": getAPIURL()})
           })
         }),
         makeElement({
           tag: "li",
           children: makeElement({
             tag: "a",
-            text: "Password Generator",
+            text: i18next.t("password_generator_btn"),
             onclick: () => {
               changePage("PW_GEN");
             }
@@ -54,10 +54,9 @@ export class HomePage extends Page {
 
     try {
       let selfTokenInfo = await lookupSelf();
-      let expireTime = formatDistance(new Date(), new Date(selfTokenInfo.expire_time));
       textList.appendChild(makeElement({
         tag: "li",
-        text: `Your token expires in ${expireTime}`
+        text: i18next.t("your_token_expires_in", {"date": new Date(selfTokenInfo.expire_time)})
       }));
     } catch (e) {
       setErrorText(e.message);
@@ -128,6 +127,6 @@ export class HomePage extends Page {
     });
   }
   get name() {
-    return "Home";
+    return i18next.t("home_page_title");
   }
 }

src/pages/Me.js

@@ -4,15 +4,14 @@ import { makeElement } from "../htmlUtils.js";
 import { getToken } from "../utils.js";
 import { renewSelf } from "../api.js";
 import ClipboardJS from "clipboard";
+import i18next from 'i18next';
 
 
 export class MePage extends Page {
   constructor() {
     super();
   }
-  goBack() {
-    changePage("HOME");
-  }
+
   async render() {
     setPageContent(makeElement({
       tag: "ul",
@@ -22,7 +21,7 @@ export class MePage extends Page {
           tag: "li",
           children: makeElement({
             tag: "a",
-            text: "Log Out",
+            text: i18next.t("log_out_btn"),
             onclick: () => {
               localStorage.removeItem("token");
               changePage("HOME");
@@ -33,7 +32,7 @@ export class MePage extends Page {
           tag: "li",
           children: makeElement({
             tag: "a",
-            text: "Copy Token",
+            text: i18next.t("copy_token_btn"),
             attributes: {
               "data-clipboard-text": getToken(),
             },
@@ -46,7 +45,7 @@ export class MePage extends Page {
           tag: "li",
           children: makeElement({
             tag: "a",
-            text: "Renew Lease",
+            text: i18next.t("renew_lease_btn"),
             onclick: () => {
               renewSelf().then(() => {
                 changePage("HOME");
@@ -61,6 +60,6 @@ export class MePage extends Page {
   }
 
   get name() {
-    return "Me";
+    return i18next.t("me_page_title");
   }
 }

src/translations/de.js

@@ -1,4 +1,5 @@
 module.exports = {
+  // These are the buttons on the top bar.
   "home_btn": "Startseite",
   "back_btn": "Zurück",
   "refresh_btn": "Neu laden"

src/translations/en.js

@@ -1,5 +1,20 @@
 module.exports = {
+  // These are the buttons on the top bar.
   "home_btn": "Home",
   "back_btn": "Back",
-  "refresh_btn": "Refresh"
+  "refresh_btn": "Refresh",
+  "me_btn": "Me",
+  // These are the page titles
+  "me_page_title": "Me",
+  "home_page_title": "Home",
+
+  // These are all o the other translations
+  "log_out_btn": "Log Out",
+  "copy_token_btn": "Copy Token",
+  "renew_lease_btn": "Renew Token Lease",
+
+  "vaulturl_text": "Vault URL: {{text}}",
+  "password_generator_btn": "Password Generator",
+  "your_token_expires_in": "Your token expires in {{date, until_date}}"
+
 }