From 61954536e50e924e56b27118bab4af7bdb5b1fda Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Thu, 29 Apr 2021 10:38:42 +0100
Subject: [PATCH] Add translations on clipboard copy messages and copyable
 modal.

---
 src/elements/CopyableInputBox.js |  7 ++-----
 src/elements/CopyableModal.js    | 13 ++++++-------
 src/pageUtils.js                 | 19 ++++++++++++++++++-
 src/pages/Me.js                  |  5 +++--
 src/translations/en.js           |  9 +++++++++
 5 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/elements/CopyableInputBox.js b/src/elements/CopyableInputBox.js
index c19d58d..b19b175 100644
--- a/src/elements/CopyableInputBox.js
+++ b/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', _ => {
-      UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 600 });
-    });
+    addClipboardNotifications(clipboard, 600);
   }
 
   let inputBoxInput = makeElement({
diff --git a/src/elements/CopyableModal.js b/src/elements/CopyableModal.js
index b5b0a2b..1c2c55a 100644
--- a/src/elements/CopyableModal.js
+++ b/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', _ => {
-                  UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 1000 });
-                });
+                addClipboardNotifications(clipboard);
               }
             }),
             makeElement({
               tag: "button",
               class: ["uk-button", "uk-button-secondary", "uk-modal-close"],
               attributes: { type: "button" },
-              text: "Close"
+              text: i18next.t("copy_modal_close_btn")
             }),
 
           ]
diff --git a/src/pageUtils.js b/src/pageUtils.js
index 8086a7a..65d2f05 100644
--- a/src/pageUtils.js
+++ b/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");
diff --git a/src/pages/Me.js b/src/pages/Me.js
index 83ac8e3..50f5eb8 100644
--- a/src/pages/Me.js
+++ b/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);
             }
           })
         }),
diff --git a/src/translations/en.js b/src/translations/en.js
index 0a4824e..063de93 100644
--- a/src/translations/en.js
+++ b/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",