Add Copy to clipboard on OTP popup

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",

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"
     }

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'

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()

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",

resources/js/packages/clipboard.js

@@ -0,0 +1,4 @@
+import Vue       from 'vue'
+import Clipboard from 'v-clipboard'
+ 
+Vue.use(Clipboard)

resources/lang/en/commons.php

@@ -14,5 +14,6 @@
     */
 
     'cancel' => 'Cancel',
+    'copy_to_clipboard' => 'Copy to clipboard',
 
 ];