From 703726523705e653e4d6cdd45177ef9f3b7f7758 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 30 Jun 2023 17:31:05 +0200
Subject: [PATCH] Show spinners while OTPs are refreshing

---
 resources/js/packages/fontawesome.js |  6 ++++--
 resources/js/views/Accounts.vue      | 10 +++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/js/packages/fontawesome.js b/resources/js/packages/fontawesome.js
index c7634c3d..63131129 100644
--- a/resources/js/packages/fontawesome.js
+++ b/resources/js/packages/fontawesome.js
@@ -41,7 +41,8 @@ import {
     faFileDownload,
     faSun,
     faMoon,
-    faDesktop
+    faDesktop,
+    faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -87,7 +88,8 @@ library.add(
     faFileDownload,
     faSun,
     faMoon,
-    faDesktop
+    faDesktop,
+    faCircleNotch
 );
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
\ No newline at end of file
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 95ece961..984178e1 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -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')">
                                             {{ displayPwd(account.otp.password) }}
                                         </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>
                                             <!-- get hotp button -->
                                             <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({
                     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
              */
             async updateTotps(period) {
+                this.isRenewingOTPs = true
                 this.axios.get('api/v1/twofaccounts?withOtp=1&ids=' + this.accountIdsWithPeriod(period).join(',')).then(response => {
                     response.data.forEach((account) => {
                         const index = this.accounts.findIndex(acc => acc.id === account.id)
@@ -490,6 +495,9 @@
                         })
                     })
                 })
+                .finally(() => {
+                    this.isRenewingOTPs = false
+                })
             },
 
             /**