Remove unnecessary OneTimePassword component

resources/js/components/TwofaccountShow.vue

@@ -5,7 +5,10 @@
         </figure>
         <p class="is-size-4 has-text-grey-light">{{ service }}</p>
         <p class="is-size-6 has-text-grey">{{ account }}</p>
-        <slot></slot>
+        <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 v-for="n in 30"></li>
+        </ul>
     </div>
 </template>
 
@@ -13,8 +16,81 @@
     export default {
         data() {
             return {
+                totp : '',
+                timerID: null,
+                position: null,
+                AccountId : null
             }
         },
+
         props: ['twofaccountid', 'service', 'account', 'icon'],
+
+        methods: {
+            getOTP: function () {
+
+                axios.get('api/twofaccounts/' + this.AccountId + '/totp').then(response => {
+                    let spacePosition = Math.ceil(response.data.totp.length / 2);
+                    
+                    this.totp = response.data.totp.substr(0, spacePosition) + " " + response.data.totp.substr(spacePosition);
+                    this.position = response.data.position;
+
+                    let dots = this.$el.querySelector('.dots');
+
+                    // clear active dots
+                    while (dots.querySelector('[data-is-active]')) {
+                        dots.querySelector('[data-is-active]').removeAttribute('data-is-active');
+                    }
+
+                    // set dot at given position as the active one
+                    let active = dots.querySelector('li:nth-child(' + (this.position + 1 ) + ')');
+                    active.setAttribute('data-is-active', true);
+
+                    let self = this;
+
+                    this.timerID = setInterval(function() {
+
+                        let sibling = active.nextSibling;
+
+                            if(active.nextSibling === null) {
+                                console.log('no more sibling to activate, we refresh the TOTP')
+                                self.stopLoop()
+                                self.getOTP();
+                            }
+                            else
+                            {
+                                active.removeAttribute('data-is-active');
+                                sibling.setAttribute('data-is-active', true);
+                                active = sibling
+                            }
+
+                    }, 1000);
+                })
+            },
+
+            clearOTP: function() {
+                this.stopLoop()
+                this.timerID = null
+                this.totp = '... ...'
+                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()
+        }
     }
 </script>