extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-16 08:37:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Test button to preview OTP before account storage

Browse Source
This commit is contained in:
Bubka
2020-02-05 23:45:53 +01:00
parent 2bc505558b
commit 4263951ef6
5 changed files with 76 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/js/components/TwofaccountShow.vue
View File

@ -6,10 +6,10 @@
<p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
<p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
<p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
<ul class="dots" v-if="internal_type === 'totp'">
<ul class="dots" v-if="type === 'totp'">
<li v-for="n in 30"></li>
</ul>
<ul v-else-if="internal_type === 'hotp'">
<ul v-else-if="type === 'hotp'">
<li>counter: {{ counter }}</li>
</ul>
</div>
@ -22,9 +22,9 @@
id: null,
internal_service: '',
internal_account: '',
internal_icon: '',
internal_uri: '',
internal_type: '',
internal_icon: '',
type: '',
otp : '',
timerID: null,
position: null,
@ -32,64 +32,55 @@
}
},
computed: {
setService: {
get: function () { return this.internal_service },
set: function(value) { this.internal_service = value }
},
setAccount: {
get: function () { return this.internal_account },
set: function(value) { this.internal_account = value }
},
setIcon: {
get: function () { return this.internal_icon },
set: function(value) { this.internal_icon = value }
},
setUri: {
get: function () { return this.internal_uri },
set: function(value) { this.internal_uri = value }
},
setType: {
get: function () { return this.internal_type },
set: function(value) { this.internal_type = value }
},
},
props: {
service: '',
account: '',
uri : '',
type: '',
icon: ''
},
mounted: function() {
if( this.uri && this.type ) {
this.setService = this.service
this.setAccount = this.account
this.setUri = this.uri
this.setType = this.type
this.internal_type === 'totp' ? this.getTOTP() : this.getHOTP()
}
this.showAccount()
},
methods: {
async getAccount(id) {
async showAccount(id) {
// 2 possible cases :
// - ID is provided so we fetch the account data from db but without the uri.
// This prevent the uri (a sensitive data) to transit via http request unnecessarily. In this
// case this.type is send by the backend.
// - an URI has been set in $parent because we need to preview some OTP before storing the account.
// So this.type is set on client side from the provided URI
this.id = id
const { data } = await this.axios.get('api/twofaccounts/' + this.id)
if( this.id || this.uri ) {
if( this.id ) {
this.setService = data.service
this.setAccount = data.account
this.setIcon = data.icon
this.setType = data.type
const { data } = await this.axios.get('api/twofaccounts/' + this.id)
this.internal_type === 'totp' ? await this.getTOTP() : await this.getHOTP()
this.$parent.isActive = true
this.internal_service = data.service
this.internal_account = data.account
this.internal_icon = data.icon
this.type = data.type
}
else {
this.internal_service = this.service
this.internal_account = this.account
this.internal_icon = this.icon
this.internal_uri = this.uri
}
if( !this.type ) {
this.type = this.internal_uri.slice(0, 15 ) === "otpauth://totp/" ? 'totp' : 'hotp';
}
this.type === 'totp' ? await this.getTOTP() : await this.getHOTP()
this.$parent.isActive = true
}
},
getTOTP: function() {
@ -135,7 +126,7 @@
getHOTP: function() {
this.axios.get('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
this.axios.post('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
let spacePosition = Math.ceil(response.data.otp.length / 2);
this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
@ -146,7 +137,7 @@
clearOTP: function() {
this.stopLoop()
this.id = this.timerID = this.position = this.counter = null
this.service = this.account = this.icon = this.type = ''
this.internal_service = this.internal_account = this.internal_icon = this.internal_uri = ''
this.otp = '... ...'
this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);