Add translations on clipboard copy messages and copyable modal.

src/elements/CopyableInputBox.js

@@ -1,6 +1,5 @@
 import ClipboardJS from "clipboard";
-import UIkit from 'uikit/dist/js/uikit.min.js';
+import { addClipboardNotifications } from "../pageUtils.js";
-
 import { makeFormIcon, makeElement } from "../htmlUtils.js";
 import { MarginInline } from "./MarginInline.js";
 
@@ -10,9 +9,7 @@ export function CopyableInputBox(text, copyable = true) {
   if (copyable) {
     inputBoxCopyButton = makeFormIcon("copy");
     let clipboard = new ClipboardJS(inputBoxCopyButton);
-    clipboard.on('success', _ => {
+    addClipboardNotifications(clipboard, 600);
-      UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 600 });
-    });
   }
 
   let inputBoxInput = makeElement({

src/elements/CopyableModal.js

@@ -1,7 +1,8 @@
 import { makeElement } from "../htmlUtils.js";
+import { addClipboardNotifications } from "../pageUtils.js";
 import ClipboardJS from "clipboard";
-import UIkit from 'uikit/dist/js/uikit.min.js';
 import FileSaver from 'file-saver';
+import i18next from 'i18next';
 
 export function CopyableModal(name, contentString) {
   return makeElement({
@@ -51,7 +52,7 @@ export function CopyableModal(name, contentString) {
                 type: "button",
                 "data-clipboard-text": contentString
               },
-              text: "Download",
+              text: i18next.t("copy_modal_download_btn"),
               onclick: _ => {
                 var blob = new Blob([contentString], {type: "text/plain;charset=utf-8"});
                 FileSaver.saveAs(blob, "result.txt");
@@ -64,19 +65,17 @@ export function CopyableModal(name, contentString) {
                 type: "button",
                 "data-clipboard-text": contentString
               },
-              text: "Copy",
+              text: i18next.t("copy_modal_copy_btn"),
               thenRun: (e) => {
                 let clipboard = new ClipboardJS(e);
-                clipboard.on('success', _ => {
+                addClipboardNotifications(clipboard);
-                  UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 1000 });
-                });
               }
             }),
             makeElement({
               tag: "button",
               class: ["uk-button", "uk-button-secondary", "uk-modal-close"],
               attributes: { type: "button" },
-              text: "Close"
+              text: i18next.t("copy_modal_close_btn")
             }),
 
           ]

src/pageUtils.js

@@ -1,6 +1,23 @@
 import UIkit from 'uikit/dist/js/uikit.min.js';
 import { makeElement } from "./htmlUtils.js";
+import i18next from 'i18next';
 
+export function addClipboardNotifications(clipboard, timeout = 1000) {
+  clipboard.on('success', _ => {
+    UIkit.notification(i18next.t("notification_copy_success"), {
+      status: 'success',
+      timeout: timeout
+    });
+  });
+  clipboard.on('error', function (e) {
+    UIkit.notification(i18next.t("notification_copy_error", {
+      "error": e.message
+    }), {
+      status: 'danger',
+      timeout: timeout
+    });
+  });
+}
 
 export function setErrorText(text) {
   let errorTextElement = document.querySelector("#errorText");
@@ -68,7 +85,7 @@ export function setTitleElement(pageState) {
 
           if (pageState.currentMountType.startsWith("kv") || pageState.currentMountType == "cubbyhole") {
             changePage("KEY_VALUE_VIEW");
-          } else if (pageState.currentMountType == "totp"){
+          } else if (pageState.currentMountType == "totp") {
             changePage("TOTP");
           } else if (pageState.currentMountType == "transit") {
             changePage("TRANSIT_VIEW");

src/pages/Me.js

@@ -1,5 +1,5 @@
 import { Page } from "../types/Page.js";
-import { setErrorText, setPageContent, changePage } from "../pageUtils.js";
+import { addClipboardNotifications, setErrorText, setPageContent, changePage } from "../pageUtils.js";
 import { makeElement } from "../htmlUtils.js";
 import { getToken } from "../utils.js";
 import { renewSelf } from "../api.js";
@@ -37,7 +37,8 @@ export class MePage extends Page {
               "data-clipboard-text": getToken(),
             },
             thenRun: (e) => {
-              new ClipboardJS(e);
+              let clipboard = new ClipboardJS(e);
+              addClipboardNotifications(clipboard);
             }
           })
         }),

src/translations/en.js

@@ -8,6 +8,15 @@ module.exports = {
   "refresh_btn": "Refresh",
   "me_btn": "Me/Settings",
 
+  // General Notification Messages
+  "notification_copy_success": "Copied to clipboard.",
+
+  // Copyable Modal
+  "copy_modal_download_btn": "Download",
+  "copy_modal_copy_btn": "Copy",
+  "copy_modal_close_btn": "Close",
+
+
   // Me Page
   "me_page_title": "Me/Settings",
   "log_out_btn": "Log Out",