From 5bb4ad3823b4da892b167cd8f232c597c7a749a1 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 22 Jan 2020 12:30:18 +0100
Subject: [PATCH] Add Copy to clipboard on OTP popup

---
 package-lock.json                           |  5 +++++
 package.json                                |  1 +
 resources/js/app.js                         |  1 +
 resources/js/components/OneTimePassword.vue | 16 ++++++++++++++--
 resources/js/langs/locales.js               |  3 ++-
 resources/js/packages/clipboard.js          |  4 ++++
 resources/lang/en/commons.php               |  1 +
 7 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/packages/clipboard.js

diff --git a/package-lock.json b/package-lock.json
index b3e86a05..590073ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9111,6 +9111,11 @@
             "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
             "dev": true
         },
+        "v-clipboard": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.2.tgz",
+            "integrity": "sha512-8Nch/q4j4e5BqHFuKUReKBvB7lzn9FQTEuPa54pmfX44VYhWnxAoSHuMwm2Qf9EnyCSEmczqj2VYPsU2BEe6Mw=="
+        },
         "v8-compile-cache": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
diff --git a/package.json b/package.json
index 7ccffa1d..c70ab180 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.12.0",
         "@fortawesome/free-solid-svg-icons": "^5.12.0",
         "@fortawesome/vue-fontawesome": "^0.1.9",
+        "v-clipboard": "^2.2.2",
         "vue-i18n": "^8.15.3",
         "vue-router": "^3.1.3"
     }
diff --git a/resources/js/app.js b/resources/js/app.js
index 35a88699..0e65a4fe 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,6 +2,7 @@ import Vue          from 'vue'
 import router       from './routes'
 import i18n         from './langs/i18n'
 import FontAwesome  from './packages/fontawesome'
+import Clipboard    from './packages/clipboard'
 import App          from './components/App'
 
 import './components'
diff --git a/resources/js/components/OneTimePassword.vue b/resources/js/components/OneTimePassword.vue
index 68acea6e..d30a1dd3 100644
--- a/resources/js/components/OneTimePassword.vue
+++ b/resources/js/components/OneTimePassword.vue
@@ -1,13 +1,14 @@
 <template>
     <div>
-        <p id="otp" title="refresh" class="is-size-1 has-text-white">{{ totp }}</p>
+        <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => totp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ totp }}</p>
         <ul class="dots">
-            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+            <li v-for="n in 30"></li>
         </ul>
     </div>
 </template>
 
 <script>
+
     export default {
         data() {
             return {
@@ -65,6 +66,7 @@
                     }, 1000);
                 })
             },
+
             clearOTP: function() {
                 this.stopLoop()
                 this.timerID = null
@@ -72,9 +74,19 @@
                 this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
                 this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);
             },
+
             stopLoop: function() {
                 clearInterval(this.timerID)
+            },
+
+            clipboardSuccessHandler ({ value, event }) {
+                console.log('success', value)
+            },
+
+            clipboardErrorHandler ({ value, event }) {
+                console.log('error', value)
             }
+
         },
         beforeDestroy () {
             this.stopLoop()
diff --git a/resources/js/langs/locales.js b/resources/js/langs/locales.js
index 39c97ebc..a82495c4 100644
--- a/resources/js/langs/locales.js
+++ b/resources/js/langs/locales.js
@@ -26,7 +26,8 @@ export default {
             }
         },
         "commons": {
-            "cancel": "Cancel"
+            "cancel": "Cancel",
+            "copy_to_clipboard": "Copy to clipboard"
         },
         "errors": {
             "resource_not_found": "Resource not found",
diff --git a/resources/js/packages/clipboard.js b/resources/js/packages/clipboard.js
new file mode 100644
index 00000000..9ae11bdc
--- /dev/null
+++ b/resources/js/packages/clipboard.js
@@ -0,0 +1,4 @@
+import Vue       from 'vue'
+import Clipboard from 'v-clipboard'
+ 
+Vue.use(Clipboard)
\ No newline at end of file
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index 88af8a4b..26909eb5 100644
--- a/resources/lang/en/commons.php
+++ b/resources/lang/en/commons.php
@@ -14,5 +14,6 @@
     */
 
     'cancel' => 'Cancel',
+    'copy_to_clipboard' => 'Copy to clipboard',
 
 ];
\ No newline at end of file