Remove unnecessary OneTimePassword component

resources/js/components/OneTimePassword.vue

@@ -1,90 +0,0 @@
-<template>
-    <div>
-        <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>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                totp : '',
-                componentKey: 0,
-                timerID: null,
-                position: null,
-                AccountId : null
-            }
-        },
-
-        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>

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>

resources/js/views/Accounts.vue

@@ -44,8 +44,8 @@
                 :twofaccountid='twofaccount.id'
                 :service='twofaccount.service'
                 :icon='twofaccount.icon'
-                :account='twofaccount.account'>
+                :account='twofaccount.account'
-                <one-time-password ref="OneTimePassword"></one-time-password>
+                ref="TwofaccountShow" >
             </twofaccount-show>
         </modal>
         <footer class="has-background-black-ter">
@@ -84,7 +84,6 @@
 
     import Modal from '../components/Modal'
     import TwofaccountShow from '../components/TwofaccountShow'
-    import OneTimePassword from '../components/OneTimePassword'
 
     export default {
         data(){
@@ -135,7 +134,7 @@
             // stop OTP generation on modal close
             this.$on('modalClose', function() {
                 console.log('modalClose triggered')
-                this.$refs.OneTimePassword.clearOTP()
+                this.$refs.TwofaccountShow.clearOTP()
 
                 this.twofaccount.id = ''
                 this.twofaccount.service = ''
@@ -148,27 +147,26 @@
         components: {
             Modal,
             TwofaccountShow,
-            OneTimePassword
         },
 
         methods: {
-            getAccount(id) {
+            async getAccount(id) {
 
-                axios.get('api/twofaccounts/' + id)
+                const { data } = await axios.get('api/twofaccounts/' + id)
-                .then(response => {
-                    this.twofaccount.id = response.data.id
-                    this.twofaccount.service = response.data.service
-                    this.twofaccount.account = response.data.account
-                    this.twofaccount.icon = response.data.icon
-
-                    this.$refs.OneTimePassword.AccountId = response.data.id
-                    this.$refs.OneTimePassword.getOTP()
-                    this.ShowTwofaccountInModal = true;
-                })
                 .catch(error => {
                     this.$router.push({ name: 'genericError', params: { err: error.response } });
                 });
 
+                this.twofaccount.id = data.id
+                this.twofaccount.service = data.service
+                this.twofaccount.account = data.account
+                this.twofaccount.icon = data.icon
+
+                this.$refs.TwofaccountShow.AccountId = data.id
+                await this.$refs.TwofaccountShow.getOTP()
+
+                this.ShowTwofaccountInModal = true
+
             },
 
             deleteAccount:  function (id) {