extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-25 22:41:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor OTP displayer to ease steamtotp support

Browse Source
This commit is contained in:
Bubka 2022-06-25 17:35:29 +02:00
parent c998356ba5
commit 1d99c27675
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/js/components/OtpDisplayer.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-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
<p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p> <p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
<p class="is-size-1 has-text-white is-clickable" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => internal_password.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ displayedOtp }}</p> <p class="is-size-1 has-text-white is-clickable" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => internal_password.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ displayedOtp }}</p>
<ul class="dots" v-show="internal_otp_type === 'totp'"> <ul class="dots" v-show="isTimeBased(internal_otp_type)">
<li v-for="n in 10"></li> <li v-for="n in 10"></li>
</ul> </ul>
<ul v-show="internal_otp_type === 'hotp'"> <ul v-show="isHMacBased(internal_otp_type)">
<li>counter: {{ internal_counter }}</li> <li>counter: {{ internal_counter }}</li>
</ul> </ul>
</div> </div>
@ -60,7 +60,7 @@
const spacePosition = Math.ceil(this.internal_password.length / 2) const spacePosition = Math.ceil(this.internal_password.length / 2)
let pwd = this.internal_password.substr(0, spacePosition) + " " + this.internal_password.substr(spacePosition) let pwd = this.internal_password.substr(0, spacePosition) + " " + this.internal_password.substr(spacePosition)
return this.$root.appSettings.showOtpAsDot ? pwd.replace(/[0-9]/g, '●') : pwd return this.$root.appSettings.showOtpAsDot ? pwd.replace(/[0-9]/g, '●') : pwd
} },
}, },
mounted: function() { mounted: function() {
@ -69,6 +69,14 @@
methods: { methods: {
isTimeBased: function(otp_type) {
return (otp_type === 'totp' || otp_type === 'steamtotp')
},
isHMacBased: function(otp_type) {
return otp_type === 'hotp'
},
async show(id) { async show(id) {
// 3 possible cases : // 3 possible cases :
@ -100,7 +108,7 @@
this.internal_icon = data.icon this.internal_icon = data.icon
this.internal_otp_type = data.otp_type this.internal_otp_type = data.otp_type
if( data.otp_type === 'hotp' && data.counter ) { if( this.isHMacBased(data.otp_type) && data.counter ) {
this.internal_counter = data.counter this.internal_counter = data.counter
} }
} }
@ -113,16 +121,13 @@
if( this.internal_id || this.uri || this.secret ) { // minimun required vars to get an otp from the backend if( this.internal_id || this.uri || this.secret ) { // minimun required vars to get an otp from the backend
switch(this.internal_otp_type) { if(this.isTimeBased(this.internal_otp_type)) {
case 'totp': await this.startTotpLoop()
await this.startTotpLoop() }
break; else if(this.isHMacBased(this.internal_otp_type)) {
case 'hotp': await this.getHOTP()
await this.getHOTP() }
break; else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
default:
this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
}
this.$parent.isActive = true this.$parent.isActive = true
} }
@ -259,7 +264,7 @@
stopLoop: function() { stopLoop: function() {
if( this.internal_otp_type === 'totp' ) { if( this.isTimeBased(this.internal_otp_type) ) {
clearTimeout(this.remainingTimeout) clearTimeout(this.remainingTimeout)
clearTimeout(this.firstDotToNextOneTimeout) clearTimeout(this.firstDotToNextOneTimeout)
clearInterval(this.dotToDotInterval) clearInterval(this.dotToDotInterval)