extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-23 06:38:34 +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>
<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>
</template>
@ -10,28 +10,34 @@
data() {
return {
activeDot: 0
}
},
mounted() {
if (this.initialIndex != null) {
this.turnOn(this.initialIndex)
}
},
props: {
stepCount: {
type: Number,
default: 10
},
initialIndex: {
type: Number,
default: null
},
},
methods: {
/**
*
*/
turnOn: function(index) {
const dots = this.$el.querySelectorAll('[data-is-active]')
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)
}
this.activeDot = index < 10 ? index + 1 : 1
},
},
}

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

@ -10,16 +10,27 @@
{{ displayPwd(this.internal_password) }}
</span>
</p>
<ul class="dots" v-show="isTimeBased(internal_otp_type)">
<li v-for="n in 10" :key="n"></li>
</ul>
<dots v-show="isTimeBased(internal_otp_type)" ref="dots"></dots>
<ul v-show="isHMacBased(internal_otp_type)">
<li>counter: {{ internal_counter }}</li>
</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>
</template>
<script>
import TotpLooper from './TotpLooper'
import Dots from './Dots'
export default {
name: 'OtpDisplayer',
@ -35,12 +46,10 @@
internal_algorithm: null,
internal_period: null,
internal_counter: null,
internal_password : '',
internal_uri : '',
lastActiveDot: null,
remainingTimeout: null,
firstDotToNextOneTimeout: null,
dotToDotInterval: null
internal_password: '',
internal_uri: '',
internal_generated_at: null,
hasTOTP: false
}
},
@ -61,28 +70,26 @@
computed: {
// displayedOtp() {
// let pwd = this.internal_password
// if (this.$root.userPreferences.formatPassword && pwd.length > 0) {
// const x = Math.ceil(this.$root.userPreferences.formatPasswordBy < 1 ? pwd.length * this.$root.userPreferences.formatPasswordBy : this.$root.userPreferences.formatPasswordBy)
// const chunks = pwd.match(new RegExp(`.{1,${x}}`, 'g'));
// if (chunks) {
// pwd = chunks.join(' ')
// }
// }
// return this.$root.userPreferences.showOtpAsDot ? pwd.replace(/[0-9]/g, '●') : pwd
// },
},
components: {
TotpLooper,
Dots,
},
mounted: function() {
this.show()
},
// created() {
// },
methods: {
/**
*
*/
turnDotsOn(stepIndex) {
this.$refs.dots.turnOn(stepIndex)
},
copyOTP (otp, permit_closing) {
// 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.
@ -158,11 +165,8 @@
if( this.internal_id || this.uri || this.secret ) { // minimun required vars to get an otp from the backend
try {
if(this.isTimeBased(this.internal_otp_type)) {
await this.startTotpLoop()
}
else if(this.isHMacBased(this.internal_otp_type)) {
await this.getHOTP()
if( this.isTimeBased(this.internal_otp_type) || this.isHMacBased(this.internal_otp_type)) {
await this.getOtp()
}
else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
@ -180,184 +184,101 @@
}
},
/**
*
*/
getOtp: async function() {
try {
let request, password
await this.axios(this.getOtpRequest()).then(response => {
if(this.internal_id) {
request = {
method: 'get',
url: '/api/v1/twofaccounts/' + this.internal_id + '/otp'
}
}
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,
}
}
let otp = response.data
this.internal_password = otp.password
if(this.$root.userPreferences.copyOtpOnDisplay) {
this.copyOTP(otp.password)
}
await this.axios(request).then(response => {
if(this.$root.userPreferences.copyOtpOnDisplay) {
this.copyOTP(response.data.password)
}
password = response.data
})
if (this.isTimeBased(otp.otp_type)) {
this.internal_generated_at = otp.generated_at
this.internal_period = otp.period
this.hasTOTP = true
return password
this.$nextTick(() => {
this.$refs.looper.startLoop()
})
}
else if (this.isHMacBased(otp.otp_type)) {
}
catch(error) {
this.internal_counter = otp.counter
// returned counter & uri are incremented
this.$emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
}
})
.catch(error => {
if (error.response.status === 422) {
this.$emit('validation-error', error.response)
}
throw error
}
})
},
startTotpLoop: async function() {
/**
*
*/
getOtpRequest() {
let otp = await this.getOtp()
this.internal_password = otp.password
this.internal_otp_type = otp.otp_type
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
if(this.internal_id) {
return {
method: 'get',
url: '/api/v1/twofaccounts/' + this.internal_id + '/otp'
}
self.dotToDotInterval = setInterval(function() {
self.activateNextDot()
dotIndex += 1
}, durationBetweenTwoDots*1000)
}, durationFromFirstToNextDot*1000)
}
else if(this.internal_uri) {
return {
method: 'post',
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() {
this.stopLoop()
this.internal_id = this.remainingTimeout = this.dotToDotInterval = this.firstDotToNextOneTimeout = this.elapsedTimeInCurrentPeriod = this.internal_counter = null
this.internal_id = this.internal_counter = this.internal_generated_at = null
this.internal_service = this.internal_account = this.internal_icon = this.internal_otp_type = this.internal_secret = ''
this.internal_password = '... ...'
this.hasTOTP = false
try {
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
}
this.$refs.looper?.clearLooper();
},
/**
*
*/
focusOnOTP() {
this.$nextTick(() => {
this.$refs.otp.focus()
@ -367,7 +288,7 @@
},
beforeDestroy () {
this.stopLoop()
}
}
</script>

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

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

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

@ -159,7 +159,7 @@
{{ $t('commons.generate') }}
</button>
</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>
</transition>
<transition name="fadeInOut">
@ -229,15 +229,14 @@
</vue-footer>
</div>
<span v-if="!this.$root.userPreferences.getOtpOnRequest">
<totp-looper
v-for="period in periods"
:key="period.period"
:period="period.period"
:generated_at="period.generated_at"
:step_count="10"
<totp-looper
v-for="period in periods"
:key="period.period"
:period="period.period"
:generated_at="period.generated_at"
v-on:loop-ended="updateTotps(period.period)"
v-on:loop-started="turnDotsOn(period.period, $event)"
v-on:stepped-up="turnDotsOn(period.period, $event)"
v-on:loop-started="setCurrentStep(period.period, $event)"
v-on:stepped-up="setCurrentStep(period.period, $event)"
ref="loopers"
></totp-looper>
</span>
@ -305,6 +304,7 @@
form: new Form({
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) => {
if (looper.period == period) {
looper.generatedAt = account.otp.generated_at
looper.startLoop();
this.$nextTick(() => {
looper.startLoop()
})
}
})
})
@ -509,7 +528,7 @@
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 })
}
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/>',
],
'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_home' => 'Constently',
'otp_generation_on_home_legend' => 'All, on home',
'otp_generation_on_home' => 'Constantly',
'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',
'never' => 'Never',
'on_otp_copy' => 'On security code copy',