mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-20 11:47:53 +02:00
Remove unnecessary OneTimePassword component
This commit is contained in:
Bubka
parent
fda3f75fdb
commit
59e96a9491
@ -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>
|
||||
@ -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>
|
||||
@ -44,8 +44,8 @@
|
||||
:twofaccountid='twofaccount.id'
|
||||
:service='twofaccount.service'
|
||||
:icon='twofaccount.icon'
|
||||
:account='twofaccount.account'>
|
||||
<one-time-password ref="OneTimePassword"></one-time-password>
|
||||
:account='twofaccount.account'
|
||||
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)
|
||||
.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;
|
||||
})
|
||||
const { data } = await axios.get('api/twofaccounts/' + id)
|
||||
.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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user