From 4c14586ff52b4c7fb0a8e6d7b6737f7fb22c4197 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sat, 23 Nov 2024 19:36:44 +0100
Subject: [PATCH] Fix performance issue when switching to Manage mode - Fixes
 #421

---
 resources/js/views/About.vue                  | 56 ++++++++-------
 resources/js/views/admin/Users.vue            | 27 ++++----
 resources/js/views/admin/users/Manage.vue     | 46 ++++++-------
 resources/js/views/twofaccounts/Accounts.vue  | 52 +++++++-------
 resources/js/views/twofaccounts/Capture.vue   | 60 ++++++++--------
 .../js/views/twofaccounts/CreateUpdate.vue    | 68 +++++++++----------
 resources/js/views/twofaccounts/Import.vue    | 22 +++---
 7 files changed, 152 insertions(+), 179 deletions(-)

diff --git a/resources/js/views/About.vue b/resources/js/views/About.vue
index fd241b11..57b07a07 100644
--- a/resources/js/views/About.vue
+++ b/resources/js/views/About.vue
@@ -8,11 +8,10 @@
 
 <template>
     <ResponsiveWidthWrapper>
+    <UseColorMode v-slot="{ mode }">
         <h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
         <p class="block">
-            <UseColorMode v-slot="{ mode }">
-                <span :class="mode == 'dark' ? 'has-text-white':'has-text-black'"><span class="is-size-5">2FAuth</span> v{{ $2fauth.version }}</span>
-            </UseColorMode>
+            <span :class="mode == 'dark' ? 'has-text-white':'has-text-black'"><span class="is-size-5">2FAuth</span> v{{ $2fauth.version }}</span>
             <br />
             {{ $t('commons.2fauth_teaser')}}
         </p>
@@ -24,32 +23,30 @@
             {{ $t('commons.resources') }}
         </h2>
         <div class="buttons">
-            <UseColorMode v-slot="{ mode }">
-                <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://github.com/Bubka/2FAuth" target="_blank">
-                    <span class="icon is-small">
-                        <FontAwesomeIcon :icon="['fab', 'github-alt']" />
-                    </span>
-                    <span>Github</span>
-                </a>
-                <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/" target="_blank">
-                    <span class="icon is-small">
-                        <FontAwesomeIcon :icon="['fas', 'book']" />
-                    </span>
-                    <span>Docs</span>
-                </a>
-                <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://demo.2fauth.app/" target="_blank">
-                    <span class="icon is-small">
-                        <FontAwesomeIcon :icon="['fas', 'flask']" />
-                    </span>
-                    <span>Demo</span>
-                </a>
-                <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/resources/rapidoc.html" target="_blank">
-                    <span class="icon is-small">
-                        <FontAwesomeIcon :icon="['fas', 'code']" />
-                    </span>
-                    <span>API</span>
-                </a>
-            </UseColorMode>
+            <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://github.com/Bubka/2FAuth" target="_blank">
+                <span class="icon is-small">
+                    <FontAwesomeIcon :icon="['fab', 'github-alt']" />
+                </span>
+                <span>Github</span>
+            </a>
+            <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/" target="_blank">
+                <span class="icon is-small">
+                    <FontAwesomeIcon :icon="['fas', 'book']" />
+                </span>
+                <span>Docs</span>
+            </a>
+            <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://demo.2fauth.app/" target="_blank">
+                <span class="icon is-small">
+                    <FontAwesomeIcon :icon="['fas', 'flask']" />
+                </span>
+                <span>Demo</span>
+            </a>
+            <a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/resources/rapidoc.html" target="_blank">
+                <span class="icon is-small">
+                    <FontAwesomeIcon :icon="['fas', 'code']" />
+                </span>
+                <span>API</span>
+            </a>
         </div>
         <h2 class="title is-5 has-text-grey-light">
             {{ $t('commons.credits') }}
@@ -65,5 +62,6 @@
         <VueFooter :showButtons="true">
             <ButtonBackCloseCancel :returnTo="{ path: returnTo }" action="back" />
         </VueFooter>
+    </UseColorMode>
     </ResponsiveWidthWrapper>
 </template>
\ No newline at end of file
diff --git a/resources/js/views/admin/Users.vue b/resources/js/views/admin/Users.vue
index c67dcbb0..ff2b21de 100644
--- a/resources/js/views/admin/Users.vue
+++ b/resources/js/views/admin/Users.vue
@@ -139,28 +139,27 @@
                 </div>
                 <div v-if="visibleUsers.length > 0">
                     <div v-for="user in visibleUsers" :key="user.id" class="list-item is-size-5 is-size-6-mobile is-flex is-justify-content-space-between">
-                        <div class="has-ellipsis">
-                            <span>{{ user.name }}</span>
-                            <!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} -->
-                            <!-- set as admin link -->
-                            <!-- admin tag -->
-                            <span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span>
-                            <!-- tag -->
-                            <UseColorMode v-slot="{ mode }">
+                        <UseColorMode v-slot="{ mode }">
+                            <div class="has-ellipsis">
+                                <span>{{ user.name }}</span>
+                                <!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} -->
+                                <!-- set as admin link -->
+                                <!-- admin tag -->
+                                <span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span>
+                                <!-- tag -->
                                 <div class="tags mt-2">
                                     <span v-if="user.is_admin" class="tag is-rounded has-text-warning-dark" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >admin</span>
                                     <span v-if="user.oauth_provider" class="tag is-rounded  has-text-grey" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >oauth: {{ user.oauth_provider }}</span>
                                 </div>
-                            </UseColorMode>
-                        </div>
-                        <div class="ml-3">
-                            <UseColorMode v-slot="{ mode }">
+                            </div>
+                            <div class="ml-3">
                                 <!-- manage link -->
                                 <RouterLink :to="{ name: 'admin.manageUser', params: { userId: user.id }}" class="button is-small has-normal-radius" :class="{'is-dark' : mode == 'dark'}" :title="$t('commons.manage')">
                                     {{ $t('commons.manage') }}
                                 </RouterLink>
-                            </UseColorMode>
-                        </div>
+
+                            </div>
+                        </UseColorMode>
                     </div>
                     <!-- <div class="mt-2 is-size-7 is-pulled-right">
                         {{ $t('settings.revoking_a_token_is_permanent')}}
diff --git a/resources/js/views/admin/users/Manage.vue b/resources/js/views/admin/users/Manage.vue
index 0678cd56..0bf3e349 100644
--- a/resources/js/views/admin/users/Manage.vue
+++ b/resources/js/views/admin/users/Manage.vue
@@ -188,6 +188,7 @@
 
 
 <template>
+    <UseColorMode v-slot="{ mode }">
     <ResponsiveWidthWrapper>
         <h1 class="title has-text-grey-dark mb-6">
             {{ $t('admin.user_management') }}
@@ -200,10 +201,8 @@
         </div>
         <div v-else>
             <div class="mb-6" :class="managedUser.info.is_admin ? 'is-left-bordered-warning' : 'is-left-bordered-link'">
-                <UseColorMode v-slot="{ mode }">
-                    <p class="title is-4" :class="{ 'has-text-grey-lighter' : mode == 'dark' }">
-                    <span class="has-text-weight-light has-text-grey-dark is-pulled-right">#{{ managedUser.info.id }}</span>{{ managedUser.info.name }}</p>
-                </UseColorMode>
+                <p class="title is-4" :class="{ 'has-text-grey-lighter' : mode == 'dark' }">
+                <span class="has-text-weight-light has-text-grey-dark is-pulled-right">#{{ managedUser.info.id }}</span>{{ managedUser.info.name }}</p>
                 <p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
             </div>
             <!-- oauth banner -->
@@ -228,16 +227,14 @@
                         </div>
                         <div>
                             <div class="tags ml-3 is-right">
-                                <UseColorMode v-slot="{ mode }">
-                                    <!-- resend email button -->
-                                    <button type="button" v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
-                                        {{ $t('admin.resend_email') }}
-                                    </button>
-                                    <!-- reset password button -->
-                                    <button type="button" class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
-                                        {{ $t('admin.reset_password') }}
-                                    </button>
-                                </UseColorMode>
+                                <!-- resend email button -->
+                                <button type="button" v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
+                                    {{ $t('admin.resend_email') }}
+                                </button>
+                                <!-- reset password button -->
+                                <button type="button" class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
+                                    {{ $t('admin.reset_password') }}
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -258,12 +255,10 @@
                     </div>
                     <div v-if="managedUser.valid_personal_access_tokens > 0">
                         <div class="tags ml-3 is-right">
-                            <UseColorMode v-slot="{ mode }">
-                                <!-- manage link -->
-                                <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
-                                    {{ $t('settings.revoke') }}
-                                </button>
-                            </UseColorMode>
+                            <!-- manage link -->
+                            <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
+                                {{ $t('settings.revoke') }}
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -277,12 +272,10 @@
                     </div>
                     <div v-if="managedUser.webauthn_credentials > 0">
                         <div class="tags ml-3 is-right">
-                            <UseColorMode v-slot="{ mode }">
-                                <!-- manage link -->
-                                <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
-                                    {{ $t('settings.revoke') }}
-                                </button>
-                            </UseColorMode>
+                            <!-- manage link -->
+                            <button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
+                                {{ $t('settings.revoke') }}
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -327,4 +320,5 @@
             <ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
         </VueFooter>
     </ResponsiveWidthWrapper>
+    </UseColorMode>
 </template>
diff --git a/resources/js/views/twofaccounts/Accounts.vue b/resources/js/views/twofaccounts/Accounts.vue
index 5d18ceeb..d90850fa 100644
--- a/resources/js/views/twofaccounts/Accounts.vue
+++ b/resources/js/views/twofaccounts/Accounts.vue
@@ -315,6 +315,7 @@
 </script>
 
 <template>
+    <UseColorMode v-slot="{ mode }">
     <div>
         <GroupSwitch v-if="showGroupSwitch" v-model:showGroupSwitch="showGroupSwitch" v-model:groups="groups.items" />
         <DestinationGroupSelector
@@ -341,19 +342,17 @@
                     <!-- group switch toggle -->
                     <div v-else class="has-text-centered">
                         <div class="columns">
-                            <UseColorMode v-slot="{ mode }">
-                                <div class="column" v-if="showGroupSwitch">
-                                    <button type="button" id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
-                                        {{ $t('groups.select_accounts_to_show') }}
-                                    </button>
-                                </div>
-                                <div class="column" v-else>
-                                    <button type="button" id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
-                                        {{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
-                                        <FontAwesomeIcon  :icon="['fas', 'caret-down']" />
-                                    </button>
-                                </div>
-                            </UseColorMode>
+                            <div class="column" v-if="showGroupSwitch">
+                                <button type="button" id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
+                                    {{ $t('groups.select_accounts_to_show') }}
+                                </button>
+                            </div>
+                            <div class="column" v-else>
+                                <button type="button" id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
+                                    {{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
+                                    <FontAwesomeIcon  :icon="['fas', 'caret-down']" />
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -399,9 +398,7 @@
                             <transition name="slideCheckbox">
                                 <div class="tfa-cell tfa-checkbox" v-if="bus.inManagementMode">
                                     <div class="field">
-                                        <UseColorMode v-slot="{ mode }">
-                                            <input class="is-checkradio is-small" :class="mode == 'dark' ? 'is-white':'is-info'" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="twofaccounts.selectedIds">
-                                        </UseColorMode>
+                                        <input class="is-checkradio is-small" :class="mode == 'dark' ? 'is-white':'is-info'" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="twofaccounts.selectedIds">
                                         <label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="twofaccounts.select(account.id)"></label>
                                     </div>
                                 </div>
@@ -431,11 +428,9 @@
                                     </span>
                                     <span v-else>
                                         <!-- get hotp button -->
-                                        <UseColorMode v-slot="{ mode }">
-                                            <button type="button" class="button tag" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="showOTP(account)" :title="$t('twofaccounts.import.import_this_account')">
-                                                {{ $t('commons.generate') }}
-                                            </button>
-                                        </UseColorMode>
+                                        <button type="button" class="button tag" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="showOTP(account)" :title="$t('twofaccounts.import.import_this_account')">
+                                            {{ $t('commons.generate') }}
+                                        </button>
                                     </span>
                                 </div>
                             </transition>
@@ -451,14 +446,12 @@
                             </transition>
                             <transition name="fadeInOut">
                                 <div class="tfa-cell tfa-edit has-text-grey" v-if="bus.inManagementMode">
-                                    <UseColorMode v-slot="{ mode }">
-                                        <RouterLink :to="{ name: 'editAccount', params: { twofaccountId: account.id }}" class="tag is-rounded mr-1" :class="mode == 'dark' ? 'is-dark' : 'is-white'">
-                                            {{ $t('commons.edit') }}
-                                        </RouterLink>
-                                        <RouterLink :to="{ name: 'showQRcode', params: { twofaccountId: account.id }}" class="tag is-rounded" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('twofaccounts.show_qrcode')">
-                                            <FontAwesomeIcon :icon="['fas', 'qrcode']" />
-                                        </RouterLink>
-                                    </UseColorMode>
+                                    <RouterLink :to="{ name: 'editAccount', params: { twofaccountId: account.id }}" class="tag is-rounded mr-1" :class="mode == 'dark' ? 'is-dark' : 'is-white'">
+                                        {{ $t('commons.edit') }}
+                                    </RouterLink>
+                                    <RouterLink :to="{ name: 'showQRcode', params: { twofaccountId: account.id }}" class="tag is-rounded" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('twofaccounts.show_qrcode')">
+                                        <FontAwesomeIcon :icon="['fas', 'qrcode']" />
+                                    </RouterLink>
                                 </div>
                             </transition>
                             <transition name="fadeInOut">
@@ -481,4 +474,5 @@
             </VueFooter>
         </div>
     </div>
+    </UseColorMode>
 </template>
diff --git a/resources/js/views/twofaccounts/Capture.vue b/resources/js/views/twofaccounts/Capture.vue
index 076ac10b..347cd863 100644
--- a/resources/js/views/twofaccounts/Capture.vue
+++ b/resources/js/views/twofaccounts/Capture.vue
@@ -140,41 +140,39 @@
                 <div class="columns is-centered">
                     <div class="column is-three-quarters">
                         <div class="modal-slot has-text-centered is-shadowless">
-                            <div v-if="errorPhrase">
-                                <p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p>
-                                <UseColorMode v-slot="{ mode }">
+                            <UseColorMode v-slot="{ mode }">
+                                <div v-if="errorPhrase">
+                                    <p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p>
                                     <p class="block" :class="{'has-text-light': mode == 'dark'}">{{ $t('twofaccounts.stream.' + errorPhrase + '.reason') }}</p>
-                                </UseColorMode>
-                                <div v-if="errorPhrase == 'need_grant_permission'" >
-                                    <p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.solution') }}</p>
-                                    <p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
-                                    
-                                    <div class="addressbar columns is-mobile is-gapless">
-                                        <div class="column is-narrow has-text-left circled">
-                                            <FontAwesomeIcon :icon="['fas', 'lock']" class="ml-1" size="xs" />
-                                            <FontAwesomeIcon :icon="['fas', 'video-slash']" class="ml-3" size="xs" />
-                                        </div>
-                                        <div class="column has-text-left ml-3">
-                                            http://my.2fauth.app/...
-                                        </div>
-                                        <div class="column is-narrow has-text-right">
-                                            <FontAwesomeIcon :icon="['far', 'star']" class="mr-1" />
+                                    <div v-if="errorPhrase == 'need_grant_permission'" >
+                                        <p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.solution') }}</p>
+                                        <p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
+                                        
+                                        <div class="addressbar columns is-mobile is-gapless">
+                                            <div class="column is-narrow has-text-left circled">
+                                                <FontAwesomeIcon :icon="['fas', 'lock']" class="ml-1" size="xs" />
+                                                <FontAwesomeIcon :icon="['fas', 'video-slash']" class="ml-3" size="xs" />
+                                            </div>
+                                            <div class="column has-text-left ml-3">
+                                                http://my.2fauth.app/...
+                                            </div>
+                                            <div class="column is-narrow has-text-right">
+                                                <FontAwesomeIcon :icon="['far', 'star']" class="mr-1" />
+                                            </div>
                                         </div>
+                                        <p>
+                                            <a @click.stop="reloadLocation">{{ $t('commons.refresh') }}</a>
+                                        </p>
+                                        
+                                        <!-- <div class="addressbar">
+                                            <FontAwesomeIcon :icon="['fas', 'video-slash']" class="mr-3 ml-2" size="xs" />
+                                            <span class="circled">http://my.2fauth.app/...</span>
+                                            <FontAwesomeIcon :icon="['far', 'star']" class="mr-3" size="xs" />
+                                        </div> -->
                                     </div>
-                                    <p>
-                                        <a @click.stop="reloadLocation">{{ $t('commons.refresh') }}</a>
-                                    </p>
-                                    
-                                    <!-- <div class="addressbar">
-                                        <FontAwesomeIcon :icon="['fas', 'video-slash']" class="mr-3 ml-2" size="xs" />
-                                        <span class="circled">http://my.2fauth.app/...</span>
-                                        <FontAwesomeIcon :icon="['far', 'star']" class="mr-3" size="xs" />
-                                    </div> -->
+                                    <p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
                                 </div>
-                                <p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
-                            </div>
-                            <UseColorMode v-else v-slot="{ mode }">
-                                <span class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
+                                <span v-else class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
                                     <Spinner :isVisible="true" :type="'raw'" class="is-size-1" />
                                 </span>
                             </UseColorMode>
diff --git a/resources/js/views/twofaccounts/CreateUpdate.vue b/resources/js/views/twofaccounts/CreateUpdate.vue
index 275a542a..f7326215 100644
--- a/resources/js/views/twofaccounts/CreateUpdate.vue
+++ b/resources/js/views/twofaccounts/CreateUpdate.vue
@@ -409,6 +409,7 @@
 </script>
 
 <template>
+    <UseColorMode v-slot="{ mode }">
     <div>
         <!-- otp display modal -->
         <Modal v-if="user.preferences.AutoSaveQrcodedAccount" v-model="showOtpInModal">
@@ -465,19 +466,17 @@
                 <!-- qcode fileupload -->
                 <div v-if="!isEditMode" class="field is-grouped">
                     <div class="control">
-                        <UseColorMode v-slot="{ mode }">
-                            <div role="button" tabindex="0" class="file is-small" :class="{ 'is-black': mode == 'dark' }" @keyup.enter="qrcodeInputLabel.click()">
-                                <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')" ref="qrcodeInputLabel">
-                                    <input inert tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
-                                    <span class="file-cta">
-                                        <span class="file-icon">
-                                            <FontAwesomeIcon :icon="['fas', 'qrcode']" size="lg" />
-                                        </span>
-                                        <span class="file-label">{{ $t('twofaccounts.forms.prefill_using_qrcode') }}</span>
+                        <div role="button" tabindex="0" class="file is-small" :class="{ 'is-black': mode == 'dark' }" @keyup.enter="qrcodeInputLabel.click()">
+                            <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')" ref="qrcodeInputLabel">
+                                <input inert tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
+                                <span class="file-cta">
+                                    <span class="file-icon">
+                                        <FontAwesomeIcon :icon="['fas', 'qrcode']" size="lg" />
                                     </span>
-                                </label>
-                            </div>
-                        </UseColorMode>
+                                    <span class="file-label">{{ $t('twofaccounts.forms.prefill_using_qrcode') }}</span>
+                                </span>
+                            </label>
+                        </div>
                     </div>
                 </div>
                 <FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
@@ -490,34 +489,30 @@
                 <div class="field is-grouped">
                     <!-- Try my luck button -->
                     <div class="control" v-if="user.preferences.getOfficialIcons">
-                        <UseColorMode v-slot="{ mode }">
-                            <VueButton @click="fetchLogo" :color="mode == 'dark' ? 'is-dark' : ''" :nativeType="'button'" :is-loading="fetchingLogo" :isDisabled="!form.service" aria-describedby="lgdTryMyLuck">
-                                <span class="icon is-small">
-                                    <FontAwesomeIcon :icon="['fas', 'globe']" />
-                                </span>
-                                <span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
-                            </VueButton>
-                        </UseColorMode>
+                        <VueButton @click="fetchLogo" :color="mode == 'dark' ? 'is-dark' : ''" :nativeType="'button'" :is-loading="fetchingLogo" :isDisabled="!form.service" aria-describedby="lgdTryMyLuck">
+                            <span class="icon is-small">
+                                <FontAwesomeIcon :icon="['fas', 'globe']" />
+                            </span>
+                            <span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
+                        </VueButton>
                     </div>
                     <!-- upload icon button -->
                     <div class="control is-flex">
-                        <UseColorMode v-slot="{ mode }">
-                            <div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
-                                <label for="filUploadIcon" class="file-label" ref="iconInputLabel">
-                                    <input id="filUploadIcon" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
-                                    <span class="file-cta">
-                                        <span class="file-icon">
-                                            <FontAwesomeIcon :icon="['fas', 'upload']" />
-                                        </span>
-                                        <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
+                        <div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
+                            <label for="filUploadIcon" class="file-label" ref="iconInputLabel">
+                                <input id="filUploadIcon" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                                <span class="file-cta">
+                                    <span class="file-icon">
+                                        <FontAwesomeIcon :icon="['fas', 'upload']" />
                                     </span>
-                                </label>
-                            </div>
-                            <span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
-                                <img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
-                                <button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
-                            </span>
-                        </UseColorMode>
+                                    <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
+                                </span>
+                            </label>
+                        </div>
+                        <span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
+                            <img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
+                            <button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
+                        </span>
                     </div>
                 </div>
                 <div class="field">
@@ -573,4 +568,5 @@
             <QrContentDisplay :qrContent="uri" />
         </modal>
     </div>
+    </UseColorMode>
 </template>
diff --git a/resources/js/views/twofaccounts/Import.vue b/resources/js/views/twofaccounts/Import.vue
index 9cf4e658..382524a5 100644
--- a/resources/js/views/twofaccounts/Import.vue
+++ b/resources/js/views/twofaccounts/Import.vue
@@ -244,6 +244,7 @@
 </script>
 
 <template>
+    <UseColorMode v-slot="{ mode }">
     <div>
         <ResponsiveWidthWrapper>
             <h1 class="title has-text-grey-dark">
@@ -262,9 +263,7 @@
                                     <div class="media">
                                         <div class="media-left">
                                             <figure class="image is-32x32">
-                                                <UseColorMode v-slot="{ mode }">
-                                                    <FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
-                                                </UseColorMode>
+                                                <FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
                                             </figure>
                                         </div>
                                         <div class="media-content">
@@ -291,9 +290,7 @@
                                     <div class="media">
                                         <div class="media-left">
                                             <figure class="image is-32x32">
-                                                <UseColorMode v-slot="{ mode }">
-                                                    <FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
-                                                </UseColorMode>
+                                                <FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
                                             </figure>
                                         </div>
                                         <div class="media-content">
@@ -317,9 +314,7 @@
                                     <div class="media">
                                         <div class="media-left">
                                             <figure class="image is-32x32">
-                                                <UseColorMode v-slot="{ mode }">
-                                                    <FontAwesomeIcon :icon="['fas', 'align-left']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
-                                                </UseColorMode>
+                                                <FontAwesomeIcon :icon="['fas', 'align-left']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
                                             </figure>
                                         </div>
                                         <div class="media-content">
@@ -408,11 +403,9 @@
                         <!-- buttons -->
                         <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
                             <!-- discard button -->
-                            <UseColorMode v-slot="{ mode }">
-                                <button type="button" class="button tag" :class="{'is-dark has-text-grey-light' : mode == 'dark'}" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
-                                    <FontAwesomeIcon :icon="['fas', 'trash']" />
-                                </button>
-                            </UseColorMode>
+                            <button type="button" class="button tag" :class="{'is-dark has-text-grey-light' : mode == 'dark'}" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
+                                <FontAwesomeIcon :icon="['fas', 'trash']" />
+                            </button>
                             <!-- import button -->
                             <button v-if="account.id > -2" type="button" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
                                 {{ $t('twofaccounts.import.to_import') }}
@@ -479,4 +472,5 @@
             </OtpDisplay>
         </modal>
     </div>
+    </UseColorMode>
 </template>