extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-02-02 11:39:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

Simplify Dots component & Fix TotpLooper refresh latency

Browse Source
This commit is contained in:
Bubka 2023-05-29 11:33:30 +02:00
parent 5e38c960f5
commit a15160319e
5 changed files with 180 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/components/Dots.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ul class="dots"> <ul class="dots">
<li v-for="n in 10" :key="n"></li> <li v-for="n in stepCount" :key="n" :data-is-active="n == activeDot ? true : null"></li>
</ul> </ul>
</template> </template>
@ -10,28 +10,34 @@
data() { data() {
return { return {
activeDot: 0
} }
}, },
mounted() {
if (this.initialIndex != null) {
this.turnOn(this.initialIndex)
}
},
props: {
stepCount: {
type: Number,
default: 10
},
initialIndex: {
type: Number,
default: null
},
},
methods: { methods: {
/** /**
* *
*/ */
turnOn: function(index) { turnOn: function(index) {
const dots = this.$el.querySelectorAll('[data-is-active]') this.activeDot = index < 10 ? index + 1 : 1
dots.forEach((dot) => {
dot.removeAttribute('data-is-active')
});
if (index < 10) {
const dot = this.$el.querySelector('.dots li:nth-child(' + (index + 1) + ')')
if (dot) {
dot.setAttribute('data-is-active', true)
}
}
else {
this.$el.querySelector('.dots li:nth-child(1)').setAttribute('data-is-active', true)
}
}, },
}, },
} }

291
resources/js/components/OtpDisplayer.vue
View File

@ -10,16 +10,27 @@
{{ displayPwd(this.internal_password) }} {{ displayPwd(this.internal_password) }}
</span> </span>
</p> </p>
<ul class="dots" v-show="isTimeBased(internal_otp_type)"> <dots v-show="isTimeBased(internal_otp_type)" ref="dots"></dots>
<li v-for="n in 10" :key="n"></li>
</ul>
<ul v-show="isHMacBased(internal_otp_type)"> <ul v-show="isHMacBased(internal_otp_type)">
<li>counter: {{ internal_counter }}</li> <li>counter: {{ internal_counter }}</li>
</ul> </ul>
<totp-looper
v-if="this.hasTOTP"
:period="internal_period"
:generated_at="internal_generated_at"
:autostart="false"
v-on:loop-ended="getOtp()"
v-on:loop-started="turnDotsOn($event)"
v-on:stepped-up="turnDotsOn($event)"
ref="looper"
></totp-looper>
</div> </div>
</template> </template>
<script> <script>
import TotpLooper from './TotpLooper'
import Dots from './Dots'
export default { export default {
name: 'OtpDisplayer', name: 'OtpDisplayer',
@ -35,12 +46,10 @@
internal_algorithm: null, internal_algorithm: null,
internal_period: null, internal_period: null,
internal_counter: null, internal_counter: null,
internal_password : '', internal_password: '',
internal_uri : '', internal_uri: '',
lastActiveDot: null, internal_generated_at: null,
remainingTimeout: null, hasTOTP: false
firstDotToNextOneTimeout: null,
dotToDotInterval: null
} }
}, },
@ -61,28 +70,26 @@
computed: { computed: {
// displayedOtp() { },
// let pwd = this.internal_password
// if (this.$root.userPreferences.formatPassword && pwd.length > 0) { components: {
// const x = Math.ceil(this.$root.userPreferences.formatPasswordBy < 1 ? pwd.length * this.$root.userPreferences.formatPasswordBy : this.$root.userPreferences.formatPasswordBy) TotpLooper,
// const chunks = pwd.match(new RegExp(`.{1,${x}}`, 'g')); Dots,
// if (chunks) {
// pwd = chunks.join(' ')
// }
// }
// return this.$root.userPreferences.showOtpAsDot ? pwd.replace(/[0-9]/g, '●') : pwd
// },
}, },
mounted: function() { mounted: function() {
this.show()
}, },
// created() {
// },
methods: { methods: {
/**
*
*/
turnDotsOn(stepIndex) {
this.$refs.dots.turnOn(stepIndex)
},
copyOTP (otp, permit_closing) { copyOTP (otp, permit_closing) {
// see https://web.dev/async-clipboard/ for future Clipboard API usage. // see https://web.dev/async-clipboard/ for future Clipboard API usage.
// The API should allow to copy the password on each trip without user interaction. // The API should allow to copy the password on each trip without user interaction.
@ -158,11 +165,8 @@
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
try { try {
if(this.isTimeBased(this.internal_otp_type)) { if( this.isTimeBased(this.internal_otp_type) || this.isHMacBased(this.internal_otp_type)) {
await this.startTotpLoop() await this.getOtp()
}
else if(this.isHMacBased(this.internal_otp_type)) {
await this.getHOTP()
} }
else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } }); else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
@ -180,184 +184,101 @@
} }
}, },
/**
*
*/
getOtp: async function() { getOtp: async function() {
try { await this.axios(this.getOtpRequest()).then(response => {
let request, password
if(this.internal_id) { let otp = response.data
request = {
method: 'get', this.internal_password = otp.password
url: '/api/v1/twofaccounts/' + this.internal_id + '/otp'
} if(this.$root.userPreferences.copyOtpOnDisplay) {
} this.copyOTP(otp.password)
else if(this.internal_uri) {
request = {
method: 'post',
url: '/api/v1/twofaccounts/otp',
data: {
uri: this.internal_uri
}
}
}
else {
request = {
method: 'post',
url: '/api/v1/twofaccounts/otp',
data: {
service : this.internal_service,
account : this.internal_account,
icon : this.internal_icon,
otp_type : this.internal_otp_type,
secret : this.internal_secret,
digits : this.internal_digits,
algorithm : this.internal_algorithm,
period : this.internal_period,
counter : this.internal_counter,
}
}
} }
await this.axios(request).then(response => { if (this.isTimeBased(otp.otp_type)) {
if(this.$root.userPreferences.copyOtpOnDisplay) { this.internal_generated_at = otp.generated_at
this.copyOTP(response.data.password) this.internal_period = otp.period
} this.hasTOTP = true
password = response.data
})
return password this.$nextTick(() => {
this.$refs.looper.startLoop()
})
}
else if (this.isHMacBased(otp.otp_type)) {
} this.internal_counter = otp.counter
catch(error) {
// returned counter & uri are incremented
this.$emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
}
})
.catch(error => {
if (error.response.status === 422) { if (error.response.status === 422) {
this.$emit('validation-error', error.response) this.$emit('validation-error', error.response)
} }
throw error throw error
} })
}, },
startTotpLoop: async function() { /**
*
*/
getOtpRequest() {
let otp = await this.getOtp() if(this.internal_id) {
return {
this.internal_password = otp.password method: 'get',
this.internal_otp_type = otp.otp_type url: '/api/v1/twofaccounts/' + this.internal_id + '/otp'
let generated_at = otp.generated_at
let period = otp.period
let elapsedTimeInCurrentPeriod,
remainingTimeBeforeEndOfPeriod,
durationBetweenTwoDots,
durationFromFirstToNextDot,
dots
// |<----period p----->|
// | | |
// |------- ··· ------------|--------|----------|---------->
// | | | |
// unix T0 Tp.start Tgen_at Tp.end
// | | |
// elapsedTimeInCurrentPeriod--|<------>| |
// (in ms) | | |
// ● ● ● ● ●|● ◌ ◌ ◌ ◌ |
// | | || |
// | | |<-------->|--remainingTimeBeforeEndOfPeriod (for remainingTimeout)
// durationBetweenTwoDots-->|-|< ||
// (for dotToDotInterval) | | >||<---durationFromFirstToNextDot (for firstDotToNextOneTimeout)
// |
// |
// dotIndex
// The elapsed time from the start of the period that contains the OTP generated_at timestamp and the OTP generated_at timestamp itself
elapsedTimeInCurrentPeriod = generated_at % period
// Switch off all dots
dots = this.$el.querySelector('.dots')
while (dots.querySelector('[data-is-active]')) {
dots.querySelector('[data-is-active]').removeAttribute('data-is-active');
}
// We determine the position of the closest dot next to the generated_at timestamp
let relativePosition = (elapsedTimeInCurrentPeriod * 10) / period
let dotIndex = (Math.floor(relativePosition) +1)
// We switch the dot on
this.lastActiveDot = dots.querySelector('li:nth-child(' + dotIndex + ')');
this.lastActiveDot.setAttribute('data-is-active', true);
// Main timeout that run until the end of the period
remainingTimeBeforeEndOfPeriod = period - elapsedTimeInCurrentPeriod
let self = this; // because of the setInterval/setTimeout closures
this.remainingTimeout = setTimeout(function() {
self.stopLoop()
self.startTotpLoop();
}, remainingTimeBeforeEndOfPeriod*1000);
// During the remainingTimeout countdown we have to show a next dot every durationBetweenTwoDots seconds
// except for the first next dot
durationBetweenTwoDots = period / 10 // we have 10 dots
durationFromFirstToNextDot = (Math.ceil(elapsedTimeInCurrentPeriod / durationBetweenTwoDots) * durationBetweenTwoDots) - elapsedTimeInCurrentPeriod
this.firstDotToNextOneTimeout = setTimeout(function() {
if( durationFromFirstToNextDot > 0 ) {
self.activateNextDot()
dotIndex += 1
} }
self.dotToDotInterval = setInterval(function() { }
self.activateNextDot() else if(this.internal_uri) {
dotIndex += 1 return {
}, durationBetweenTwoDots*1000) method: 'post',
}, durationFromFirstToNextDot*1000) url: '/api/v1/twofaccounts/otp',
data: {
uri: this.internal_uri
}
}
}
else {
return {
method: 'post',
url: '/api/v1/twofaccounts/otp',
data: {
service : this.internal_service,
account : this.internal_account,
icon : this.internal_icon,
otp_type : this.internal_otp_type,
secret : this.internal_secret,
digits : this.internal_digits,
algorithm : this.internal_algorithm,
period : this.internal_period,
counter : this.internal_counter,
}
}
}
}, },
/**
getHOTP: async function() { *
*/
let otp = await this.getOtp()
this.internal_password = otp.password
this.internal_counter = otp.counter
// returned counter & uri are incremented
this.$emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
},
clearOTP: function() { clearOTP: function() {
this.stopLoop() this.internal_id = this.internal_counter = this.internal_generated_at = null
this.internal_id = this.remainingTimeout = this.dotToDotInterval = this.firstDotToNextOneTimeout = this.elapsedTimeInCurrentPeriod = this.internal_counter = null
this.internal_service = this.internal_account = this.internal_icon = this.internal_otp_type = this.internal_secret = '' this.internal_service = this.internal_account = this.internal_icon = this.internal_otp_type = this.internal_secret = ''
this.internal_password = '... ...' this.internal_password = '... ...'
this.hasTOTP = false
try { this.$refs.looper?.clearLooper();
this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);
}
catch(e) {
// we do not throw anything
}
},
stopLoop: function() {
if( this.isTimeBased(this.internal_otp_type) ) {
clearTimeout(this.remainingTimeout)
clearTimeout(this.firstDotToNextOneTimeout)
clearInterval(this.dotToDotInterval)
}
},
activateNextDot: function() {
if(this.lastActiveDot.nextSibling !== null) {
this.lastActiveDot.removeAttribute('data-is-active')
this.lastActiveDot.nextSibling.setAttribute('data-is-active', true)
this.lastActiveDot = this.lastActiveDot.nextSibling
}
}, },
/**
*
*/
focusOnOTP() { focusOnOTP() {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.otp.focus() this.$refs.otp.focus()
@ -367,7 +288,7 @@
}, },
beforeDestroy () { beforeDestroy () {
this.stopLoop()
} }
} }
</script> </script>

50
resources/js/components/TotpLooper.vue
View File

@ -1,12 +1,5 @@
<template> <template>
<div class="has-text-light"> <div>
<!-- <span>period = {{ period }}</span><br />
<span>Started_at = {{ generatedAt }}</span><br />
<span>active step = {{ stepIndex }}/{{ step_count }}</span><br /><br />
<span>elapsedTimeInCurrentPeriod = {{ elapsedTimeInCurrentPeriod }}</span><br />
<span>remainingTimeBeforeEndOfPeriod = {{ remainingTimeBeforeEndOfPeriod }}</span><br />
<span>durationBetweenTwoSteps = {{ durationBetweenTwoSteps }}</span><br />
<hr /> -->
</div> </div>
</template> </template>
@ -25,10 +18,16 @@
}, },
props: { props: {
step_count: Number, step_count: {
period : null, type: Number,
default: 10
},
period : Number,
generated_at: Number, generated_at: Number,
autostart: {
type: Boolean,
default: true
},
}, },
computed: { computed: {
@ -70,8 +69,9 @@
}, },
mounted: function() { mounted: function() {
this.generatedAt = this.generated_at if (this.autostart == true) {
this.startLoop() this.startLoop()
}
}, },
methods: { methods: {
@ -79,6 +79,8 @@
startLoop: function() { startLoop: function() {
this.clearLooper() this.clearLooper()
this.generatedAt = this.generated_at
this.$emit('loop-started', this.initialStepIndex) this.$emit('loop-started', this.initialStepIndex)
this.stepIndex = this.initialStepIndex this.stepIndex = this.initialStepIndex
@ -86,6 +88,7 @@
// Main timeout that run until the end of the period // Main timeout that run until the end of the period
this.remainingTimeout = setTimeout(function() { this.remainingTimeout = setTimeout(function() {
self.clearLooper()
self.$emit('loop-ended') self.$emit('loop-ended')
}, this.remainingTimeBeforeEndOfPeriod*1000); }, this.remainingTimeBeforeEndOfPeriod*1000);
@ -107,26 +110,13 @@
}, durationFromInitialToNextStep*1000) }, durationFromInitialToNextStep*1000)
}, },
clearLooper: function() { clearLooper: function() {
// if( this.isTimeBased(this.internal_otp_type) ) { clearTimeout(this.remainingTimeout)
clearTimeout(this.remainingTimeout) clearTimeout(this.initialStepToNextStepTimeout)
clearTimeout(this.initialStepToNextStepTimeout) clearInterval(this.stepToStepInterval)
clearInterval(this.stepToStepInterval) this.stepIndex = this.generatedAt = null
this.stepIndex = null
// }
}, },
// activateNextStep: function() {
// if(this.lastActiveStep.nextSibling !== null) {
// this.lastActiveStep.removeAttribute('data-is-active')
// this.lastActiveStep.nextSibling.setAttribute('data-is-active', true)
// this.lastActiveStep = this.lastActiveStep.nextSibling
// }
// },
}, },
beforeDestroy () { beforeDestroy () {

41
resources/js/views/Accounts.vue
View File

@ -159,7 +159,7 @@
{{ $t('commons.generate') }} {{ $t('commons.generate') }}
</button> </button>
</span> </span>
<dots v-if="account.otp_type.includes('totp')" :class="'condensed'" :ref="'dots_' + account.period"></dots> <dots v-if="account.otp_type.includes('totp')" @hook:mounted="turnDotsOnFromCache(account.period)" :class="'condensed'" :ref="'dots_' + account.period"></dots>
</div> </div>
</transition> </transition>
<transition name="fadeInOut"> <transition name="fadeInOut">
@ -229,15 +229,14 @@
</vue-footer> </vue-footer>
</div> </div>
<span v-if="!this.$root.userPreferences.getOtpOnRequest"> <span v-if="!this.$root.userPreferences.getOtpOnRequest">
<totp-looper <totp-looper
v-for="period in periods" v-for="period in periods"
:key="period.period" :key="period.period"
:period="period.period" :period="period.period"
:generated_at="period.generated_at" :generated_at="period.generated_at"
:step_count="10"
v-on:loop-ended="updateTotps(period.period)" v-on:loop-ended="updateTotps(period.period)"
v-on:loop-started="turnDotsOn(period.period, $event)" v-on:loop-started="setCurrentStep(period.period, $event)"
v-on:stepped-up="turnDotsOn(period.period, $event)" v-on:stepped-up="setCurrentStep(period.period, $event)"
ref="loopers" ref="loopers"
></totp-looper> ></totp-looper>
</span> </span>
@ -305,6 +304,7 @@
form: new Form({ form: new Form({
value: this.$root.userPreferences.activeGroup, value: this.$root.userPreferences.activeGroup,
}), }),
stepIndexes: {}
} }
}, },
@ -445,6 +445,23 @@
} }
}, },
/**
*
*/
setCurrentStep(period, stepIndex) {
this.stepIndexes[period] = stepIndex
this.turnDotsOn(period, stepIndex)
},
/**
*
*/
turnDotsOnFromCache(period, stepIndex) {
if (this.stepIndexes[period] != undefined) {
this.turnDotsOn(period, this.stepIndexes[period])
}
},
/** /**
* *
*/ */
@ -466,7 +483,9 @@
this.$refs.loopers.forEach((looper) => { this.$refs.loopers.forEach((looper) => {
if (looper.period == period) { if (looper.period == period) {
looper.generatedAt = account.otp.generated_at looper.generatedAt = account.otp.generated_at
looper.startLoop(); this.$nextTick(() => {
looper.startLoop()
})
} }
}) })
}) })
@ -509,7 +528,7 @@
accounts.push(data) accounts.push(data)
}) })
if ( this.accounts.length > 0 && !objectEquals(accounts, this.accounts) && !forceRefresh ) { if ( this.accounts.length > 0 && !objectEquals(accounts, this.accounts, {depth: 1}) && !forceRefresh ) {
this.$notify({ type: 'is-dark', text: '<span class="is-size-7">' + this.$t('commons.some_data_have_changed') + '</span><br /><a href="." class="button is-rounded is-warning is-small">' + this.$t('commons.reload') + '</a>', duration:-1, closeOnClick: false }) this.$notify({ type: 'is-dark', text: '<span class="is-size-7">' + this.$t('commons.some_data_have_changed') + '</span><br /><a href="." class="button is-rounded is-warning is-small">' + this.$t('commons.reload') + '</a>', duration:-1, closeOnClick: false })
} }
else if( this.accounts.length === 0 && accounts.length === 0 ) { else if( this.accounts.length === 0 && accounts.length === 0 ) {

6
resources/lang/en/settings.php
View File

@ -133,10 +133,10 @@
'help' => 'Set how and when <abbr title="One-Time Passwords">OTPs</abbr> are displayed.<br/>', 'help' => 'Set how and when <abbr title="One-Time Passwords">OTPs</abbr> are displayed.<br/>',
], ],
'otp_generation_on_request' => 'After a click/tap', 'otp_generation_on_request' => 'After a click/tap',
'otp_generation_on_request_legend' => 'Single, in its own view', 'otp_generation_on_request_legend' => 'Alone, in its own view',
'otp_generation_on_request_title' => 'Click an account to get a password in a dedicated view', 'otp_generation_on_request_title' => 'Click an account to get a password in a dedicated view',
'otp_generation_on_home' => 'Constently', 'otp_generation_on_home' => 'Constantly',
'otp_generation_on_home_legend' => 'All, on home', 'otp_generation_on_home_legend' => 'All of them, on home',
'otp_generation_on_home_title' => 'Show all passwords in the main view, without doing anything', 'otp_generation_on_home_title' => 'Show all passwords in the main view, without doing anything',
'never' => 'Never', 'never' => 'Never',
'on_otp_copy' => 'On security code copy', 'on_otp_copy' => 'On security code copy',