refactor: streamline TwoFactor UI logic, improve recovery mode toggle, and standardize naming conventions

Author: pushpak1300

app/Models/User.php

@@ -11,7 +11,7 @@
 class User extends Authenticatable
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable,TwoFactorAuthenticatable;
+    use HasFactory, Notifiable, TwoFactorAuthenticatable;
 
     /**
      * The attributes that are mass assignable.

resources/js/composables/useClipboard.ts

@@ -6,14 +6,14 @@ interface ClipboardOptions {
 
 export function useClipboard(options: ClipboardOptions = {}) {
     const { timeout = 1500 } = options;
-    
+
     const copied = ref(false);
-    
+
     const copyToClipboard = async (text: string): Promise<void> => {
         if (typeof window === 'undefined' || !navigator.clipboard) {
             return;
         }
-        
+
         try {
             await navigator.clipboard.writeText(text);
             copied.value = true;
@@ -22,9 +22,9 @@ export function useClipboard(options: ClipboardOptions = {}) {
             console.error('Failed to copy to clipboard:', error);
         }
     };
-    
+
     return {
         copied,
         copyToClipboard,
     };
-}
+}

resources/js/composables/useTwoFactorAuth.ts

@@ -19,4 +19,4 @@ export const useTwoFactorAuth = () => {
         fetchManualSetupKey,
         fetchRecoveryCodes,
     };
-};
+};

resources/js/pages/auth/TwoFactorChallenge.vue

@@ -1,65 +1,58 @@
 <script setup lang="ts">
-import { ref, watch, nextTick, computed } from 'vue';
+import { computed, ComputedRef, nextTick, ref, watch } from 'vue';
 import { Head, Form } from '@inertiajs/vue3';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import InputError from '@/components/InputError.vue';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input';
 
-const recovery = ref(false);
-const pinValue = ref<number[]>([]);
-const pinInputContainerRef = ref<HTMLElement | null>(null);
+const showRecoveryInput = ref(false);
+const code = ref<number[]>([]);
 const recoveryInputRef = ref<HTMLInputElement | null>(null);
 
-const codeValue = computed(() => pinValue.value.join(''));
+const codeValue: ComputedRef<string> = computed(() => code.value.join(''));
 
-watch(recovery, (value) => {
-    if (value) {
-        nextTick(() => {
-            if (recoveryInputRef.value) {
-                recoveryInputRef.value?.focus();
-            }
-        });
-    } else {
+const authConfig = computed(() => {
+    return {
+        title: showRecoveryInput.value ? 'Recovery Code' : 'Authentication Code',
+        description: showRecoveryInput.value
+            ? 'Please confirm access to your account by entering one of your emergency recovery codes.'
+            : 'Enter the authentication code provided by your authenticator application.',
+        toggleText: showRecoveryInput.value
+            ? 'login using an authentication code'
+            : 'login using a recovery code',
+    };
+});
+
+watch(
+    showRecoveryInput,
+    (isRecoveryMode) => {
         nextTick(() => {
-            if (pinInputContainerRef.value) {
-                const firstInput = pinInputContainerRef.value.querySelector('input');
-                if (firstInput) firstInput.focus();
+            if (isRecoveryMode && recoveryInputRef.value) {
+                recoveryInputRef.value.focus();
             }
         });
-    }
-});
+    },
+);
 
-const toggleRecovery = (clearErrors: () => void) => {
-    recovery.value = !recovery.value;
+const toggleRecoveryMode = (clearErrors: () => void): void => {
+    showRecoveryInput.value = !showRecoveryInput.value;
     clearErrors();
-    pinValue.value = [];
-    const codeInput = document.querySelector('input[name="code"]') as HTMLInputElement;
-    const recoveryInput = document.querySelector('input[name="recovery_code"]') as HTMLInputElement;
-    if (codeInput) codeInput.value = '';
-    if (recoveryInput) recoveryInput.value = '';
-};
-</script>
+    code.value = [];
+};</script>
 
 <template>
-    <AuthLayout
-        :title="recovery ? 'Recovery Code' : 'Authentication Code'"
-        :description="
-            recovery
-                ? 'Please confirm access to your account by entering one of your emergency recovery codes.'
-                : 'Enter the authentication code provided by your authenticator application.'
-        "
-    >
+    <AuthLayout :title="authConfig.title" :description="authConfig.description">
         <Head title="Two Factor Authentication" />
 
         <div class="relative space-y-2">
-            <template v-if="!recovery">
+            <template v-if="!showRecoveryInput">
                 <Form :action="route('two-factor.login')" method="post" class="space-y-4" #default="{ errors, processing, clearErrors }">
                     <input type="hidden" name="code" :value="codeValue" />
                     <div class="flex flex-col items-center justify-center space-y-3 text-center">
-                        <div ref="pinInputContainerRef" class="flex w-full items-center justify-center">
-                            <PinInput id="otp" v-model="pinValue" class="mt-1" type="number" otp>
+                        <div class="flex w-full items-center justify-center">
+                            <PinInput id="otp" v-model="code" class="mt-1" type="number" otp>
                                 <PinInputGroup class="gap-2">
                                     <PinInputSlot
                                         v-for="(id, index) in 6"
@@ -73,16 +66,16 @@ const toggleRecovery = (clearErrors: () => void) => {
                         </div>
                         <InputError :message="errors.code" />
                     </div>
-                    <Button type="submit" class="w-full" :disabled="processing || pinValue.length !== 6"> Continue </Button>
+                    <Button type="submit" class="w-full" :disabled="processing || code.length !== 6"> Continue </Button>
 
                     <div class="mt-4 space-x-0.5 text-center text-sm leading-5 text-muted-foreground">
                         <span class="opacity-80">or you can </span>
                         <button
                             type="button"
                             class="cursor-pointer border-0 bg-transparent p-0 font-medium underline opacity-80"
-                            @click="() => toggleRecovery(clearErrors)"
+                            @click="() => toggleRecoveryMode(clearErrors)"
                         >
-                            login using a recovery code
+                            {{ authConfig.toggleText }}
                         </button>
                     </div>
                 </Form>
@@ -107,9 +100,9 @@ const toggleRecovery = (clearErrors: () => void) => {
                         <button
                             type="button"
                             class="cursor-pointer border-0 bg-transparent p-0 font-medium underline opacity-80"
-                            @click="() => toggleRecovery(clearErrors)"
+                            @click="() => toggleRecoveryMode(clearErrors)"
                         >
-                            login using an authentication code
+                            {{ authConfig.toggleText }}
                         </button>
                     </div>
                 </Form>