Show spinners while OTPs are refreshing

This commit is contained in:
Bubka 2023-06-30 17:31:05 +02:00
parent a51f0bb2d9
commit 7037265237
2 changed files with 13 additions and 3 deletions

View File

@ -41,7 +41,8 @@ import {
faFileDownload, faFileDownload,
faSun, faSun,
faMoon, faMoon,
faDesktop faDesktop,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
@ -87,7 +88,8 @@ library.add(
faFileDownload, faFileDownload,
faSun, faSun,
faMoon, faMoon,
faDesktop faDesktop,
faCircleNotch
); );
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

View File

@ -153,6 +153,9 @@
<span v-if="account.otp != undefined" class="is-clickable has-nowrap has-text-grey is-size-5 ml-4" @click="copyOTP(account.otp.password)" @keyup.enter="copyOTP(account.otp.password)" :title="$t('commons.copy_to_clipboard')"> <span v-if="account.otp != undefined" class="is-clickable has-nowrap has-text-grey is-size-5 ml-4" @click="copyOTP(account.otp.password)" @keyup.enter="copyOTP(account.otp.password)" :title="$t('commons.copy_to_clipboard')">
{{ displayPwd(account.otp.password) }} {{ displayPwd(account.otp.password) }}
</span> </span>
<span v-else-if="isRenewingOTPs" class="has-nowrap has-text-grey has-text-centered is-size-5 ml-4">
<font-awesome-icon :icon="['fas', 'circle-notch']" spin />
</span>
<span v-else> <span v-else>
<!-- get hotp button --> <!-- get hotp button -->
<button class="button tag" :class="$root.showDarkMode ? 'is-dark' : 'is-white'" @click="showAccount(account)" :title="$t('twofaccounts.import.import_this_account')"> <button class="button tag" :class="$root.showDarkMode ? 'is-dark' : 'is-white'" @click="showAccount(account)" :title="$t('twofaccounts.import.import_this_account')">
@ -304,7 +307,8 @@
form: new Form({ form: new Form({
value: this.$root.userPreferences.activeGroup, value: this.$root.userPreferences.activeGroup,
}), }),
stepIndexes: {} stepIndexes: {},
isRenewingOTPs: false
} }
}, },
@ -475,6 +479,7 @@
* Fetch all accounts set with the given period to get fresh OTPs * Fetch all accounts set with the given period to get fresh OTPs
*/ */
async updateTotps(period) { async updateTotps(period) {
this.isRenewingOTPs = true
this.axios.get('api/v1/twofaccounts?withOtp=1&ids=' + this.accountIdsWithPeriod(period).join(',')).then(response => { this.axios.get('api/v1/twofaccounts?withOtp=1&ids=' + this.accountIdsWithPeriod(period).join(',')).then(response => {
response.data.forEach((account) => { response.data.forEach((account) => {
const index = this.accounts.findIndex(acc => acc.id === account.id) const index = this.accounts.findIndex(acc => acc.id === account.id)
@ -490,6 +495,9 @@
}) })
}) })
}) })
.finally(() => {
this.isRenewingOTPs = false
})
}, },
/** /**