Fix Text Jarring Issue

Author: pushpak1300

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -54,10 +54,7 @@ onMounted(async () => {
                     @success="fetchRecoveryCodes"
                     #default="{ processing }"
                 >
-                    <Button variant="secondary" type="submit" :disabled="processing">
-                        <RefreshCw class="mr-2 size-4" :class="{ 'animate-spin': processing }" />
-                        {{ processing ? 'Regenerating...' : 'Regenerate Codes' }}
-                    </Button>
+                    <Button variant="secondary" type="submit" :disabled="processing"> <RefreshCw /> Regenerate Codes </Button>
                 </Form>
             </div>
             <div :class="['relative overflow-hidden transition-all duration-300', isRecoveryCodesVisible ? 'h-auto opacity-100' : 'h-0 opacity-0']">

resources/js/components/TwoFactorSetupModal.vue

@@ -177,9 +177,7 @@ watch(
                                 >
                                     Back
                                 </Button>
-                                <Button type="submit" class="w-auto flex-1" :disabled="processing || codeValue.length < 6">
-                                    {{ processing ? 'Confirming...' : 'Confirm' }}
-                                </Button>
+                                <Button type="submit" class="w-auto flex-1" :disabled="processing || codeValue.length < 6"> Confirm </Button>
                             </div>
                         </div>
                     </Form>

resources/js/composables/useTwoFactorAuth.ts

@@ -1,5 +1,5 @@
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 const fetchJson = async <T>(url: string): Promise<T> => {
     const response = await fetch(url, {
@@ -17,8 +17,6 @@ const qrCodeSvg = ref<string | null>(null);
 const manualSetupKey = ref<string | null>(null);
 const recoveryCodesList = ref<string[]>([]);
 
-const hasSetupData = computed<boolean>(() => qrCodeSvg.value !== null && manualSetupKey.value !== null);
-
 export const useTwoFactorAuth = () => {
     const fetchQrCode = async (): Promise<void> => {
         const { svg } = await fetchJson<{ svg: string; url: string }>(qrCode.url());
@@ -63,7 +61,6 @@ export const useTwoFactorAuth = () => {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
-        hasSetupData,
         clearSetupData,
         clearTwoFactorAuthData,
         fetchQrCode,

resources/js/pages/settings/TwoFactor.vue

@@ -30,7 +30,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
+const { clearTwoFactorAuthData } = useTwoFactorAuth();
 const showSetupModal = ref<boolean>(false);
 
 onUnmounted(() => {
@@ -54,9 +54,8 @@ onUnmounted(() => {
                     </p>
 
                     <div>
-                        <Button v-if="hasSetupData" @click="showSetupModal = true"> <ShieldCheck />Continue Setup </Button>
-                        <Form v-else v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
-                            <Button type="submit" :disabled="processing"> <ShieldCheck />{{ processing ? 'Enabling...' : 'Enable 2FA' }} </Button>
+                        <Form v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
+                            <Button type="submit" :disabled="processing"> <ShieldCheck />Enable 2FA</Button>
                         </Form>
                     </div>
                 </div>
@@ -75,7 +74,7 @@ onUnmounted(() => {
                         <Form v-bind="disable.form()" #default="{ processing }">
                             <Button variant="destructive" type="submit" :disabled="processing">
                                 <ShieldBan />
-                                {{ processing ? 'Disabling...' : 'Disable 2FA' }}
+                                Disable 2FA
                             </Button>
                         </Form>
                     </div>