Add user preference to auto-close OTP after timeout

This commit is contained in:
Bubka
2024-06-21 14:23:03 +02:00
parent 2f05f4993c
commit 570f3bb9bd
5 changed files with 59 additions and 14 deletions

View File

@ -53,6 +53,7 @@
const dots = ref()
const totpLooper = ref()
const otpSpanTag = ref()
const autoCloseTimeout = ref(null)
watch(
() => props.icon,
@ -121,6 +122,10 @@
try {
await getOtp()
focusOnOTP()
if (user.preferences.getOtpOnRequest && parseInt(user.preferences.autoCloseTimeout) > 0) {
startAutoCloseTimer()
}
}
catch(error) {
clearOTP()
@ -191,6 +196,15 @@
}
}
/**
* Triggers the component closing
*/
function closeMe() {
emit("please-close-me");
revealPassword.value = false
clearOTP()
}
/**
* Reset component's refs
*/
@ -199,6 +213,7 @@
otpauthParams.value.service = otpauthParams.value.account = otpauthParams.value.icon = otpauthParams.value.otp_type = otpauthParams.value.secret = ''
password.value = '... ...'
hasTOTP.value = false
clearTimeout(autoCloseTimeout.value)
totpLooper.value?.clearLooper();
}
@ -226,9 +241,7 @@
user.logout({ kicked: true})
}
else if(user.preferences.closeOtpOnCopy && (permit_closing || false) === true) {
emit("please-close-me");
revealPassword.value = false
clearOTP()
closeMe()
}
if(user.preferences.clearSearchOnCopy) {
@ -273,6 +286,17 @@
show,
clearOTP
})
/**
* Starts an auto close timer
*/
function startAutoCloseTimer() {
let duration = parseInt(user.preferences.autoCloseTimeout) // in minutes
autoCloseTimeout.value = setTimeout(function() {
closeMe()
}, duration * 60 * 1000);
}
</script>

View File

@ -19,22 +19,29 @@
type: String,
default: ''
},
isIndented: Boolean,
isDisabled: Boolean,
})
const selected = ref(props.modelValue)
</script>
<template>
<div class="field">
<label class="label" v-html="$t(label)"></label>
<div class="control">
<div class="select">
<select v-model="selected" v-on:change="$emit('update:modelValue', $event.target.value)">
<option v-for="option in options" :value="option.value">{{ $t(option.text) }}</option>
</select>
</div>
<div class="field is-flex">
<div v-if="isIndented" class="mx-2 pr-1" :style="{ 'opacity': isDisabled ? '0.5' : '1' }">
<FontAwesomeIcon class="has-text-grey" :icon="['fas', 'chevron-right']" transform="rotate-135"/>
</div>
<div>
<label class="label" v-html="$t(label)" :style="{ 'opacity': isDisabled ? '0.5' : '1' }"></label>
<div class="control">
<div class="select">
<select v-model="selected" v-on:change="$emit('update:modelValue', $event.target.value)" :disabled="isDisabled">
<option v-for="option in options" :value="option.value">{{ $t(option.text) }}</option>
</select>
</div>
</div>
<FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
<p class="help" v-html="$t(help)" v-if="help"></p>
</div>
<FieldError v-if="fieldError != undefined" :error="fieldError" :field="fieldName" />
<p class="help" v-html="$t(help)" v-if="help"></p>
</div>
</template>