From f485b1c6b01522b5f7db7a9844f1880d1885d18c Mon Sep 17 00:00:00 2001
From: Pushpak Chhajed <pushpak1300@gmail.com>
Date: Fri, 12 Sep 2025 13:19:10 +0530
Subject: [PATCH 1/3] Add an error state in useTwoFactorAuth.ts

---
 resources/js/composables/useTwoFactorAuth.ts | 41 ++++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/resources/js/composables/useTwoFactorAuth.ts b/resources/js/composables/useTwoFactorAuth.ts
index 70db708c..3e8b96aa 100644
--- a/resources/js/composables/useTwoFactorAuth.ts
+++ b/resources/js/composables/useTwoFactorAuth.ts
@@ -13,52 +13,67 @@ const fetchJson = async <T>(url: string): Promise<T> => {
     return response.json();
 };
 
-const qrCodeSvg = ref<string | null>(null);
+const errors = ref<string[]>([]);
 const manualSetupKey = ref<string | null>(null);
+const qrCodeSvg = 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());
+        try {
+            const { svg } = await fetchJson<{ svg: string; url: string }>(qrCode.url());
 
-        qrCodeSvg.value = svg;
+            qrCodeSvg.value = svg;
+        } catch {
+            errors.value.push('Failed to fetch QR code');
+            qrCodeSvg.value = null;
+        }
     };
 
     const fetchSetupKey = async (): Promise<void> => {
-        const { secretKey: key } = await fetchJson<{ secretKey: string }>(secretKey.url());
+        try {
+            const { secretKey: key } = await fetchJson<{ secretKey: string }>(secretKey.url());
 
-        manualSetupKey.value = key;
+            manualSetupKey.value = key;
+        } catch {
+            errors.value.push('Failed to fetch a setup key');
+            manualSetupKey.value = null;
+        }
     };
 
     const clearSetupData = (): void => {
         manualSetupKey.value = null;
         qrCodeSvg.value = null;
+        clearErrors();
+    };
+
+    const clearErrors = (): void => {
+        errors.value = [];
     };
 
     const clearTwoFactorAuthData = (): void => {
         clearSetupData();
-
+        clearErrors();
         recoveryCodesList.value = [];
     };
 
     const fetchRecoveryCodes = async (): Promise<void> => {
         try {
+            clearErrors();
             recoveryCodesList.value = await fetchJson<string[]>(recoveryCodes.url());
-        } catch (error) {
-            console.error('Failed to fetch recovery codes:', error);
-
+        } catch {
+            errors.value.push('Failed to fetch recovery codes');
             recoveryCodesList.value = [];
         }
     };
 
     const fetchSetupData = async (): Promise<void> => {
         try {
+            clearErrors();
             await Promise.all([fetchQrCode(), fetchSetupKey()]);
-        } catch (error) {
-            console.error('Failed to fetch setup data:', error);
-
+        } catch {
             qrCodeSvg.value = null;
             manualSetupKey.value = null;
         }
@@ -68,8 +83,10 @@ export const useTwoFactorAuth = () => {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
+        errors,
         hasSetupData,
         clearSetupData,
+        clearErrors,
         clearTwoFactorAuthData,
         fetchQrCode,
         fetchSetupKey,

From a071b28e1708b9ce121753a012f417ffbb1f6ce9 Mon Sep 17 00:00:00 2001
From: Pushpak Chhajed <pushpak1300@gmail.com>
Date: Fri, 19 Sep 2025 17:07:38 +0530
Subject: [PATCH 2/3] Display errors in UI

---
 resources/js/components/AlertError.vue        |  30 +++++
 .../js/components/TwoFactorRecoveryCodes.vue  |  10 +-
 .../js/components/TwoFactorSetupModal.vue     | 114 +++++++++---------
 resources/js/components/ui/alert/Alert.vue    |  21 ++++
 .../components/ui/alert/AlertDescription.vue  |  17 +++
 .../js/components/ui/alert/AlertTitle.vue     |  17 +++
 resources/js/components/ui/alert/index.ts     |  24 ++++
 7 files changed, 175 insertions(+), 58 deletions(-)
 create mode 100644 resources/js/components/AlertError.vue
 create mode 100644 resources/js/components/ui/alert/Alert.vue
 create mode 100644 resources/js/components/ui/alert/AlertDescription.vue
 create mode 100644 resources/js/components/ui/alert/AlertTitle.vue
 create mode 100644 resources/js/components/ui/alert/index.ts

diff --git a/resources/js/components/AlertError.vue b/resources/js/components/AlertError.vue
new file mode 100644
index 00000000..2170e5a6
--- /dev/null
+++ b/resources/js/components/AlertError.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+interface Props {
+    errors: string[];
+    title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: 'Something went wrong.',
+});
+
+const uniqueErrors = computed(() => Array.from(new Set(props.errors)));
+</script>
+
+<template>
+    <Alert variant="destructive">
+        <AlertCircle class="size-4" />
+        <AlertTitle>{{ title }}</AlertTitle>
+        <AlertDescription>
+            <ul class="list-inside list-disc text-sm">
+                <li v-for="(error, index) in uniqueErrors" :key="index">
+                    {{ error }}
+                </li>
+            </ul>
+        </AlertDescription>
+    </Alert>
+</template>
diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
index 972aabd2..0ceb0b23 100644
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ b/resources/js/components/TwoFactorRecoveryCodes.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AlertError from '@/components/AlertError.vue';
 import { Button } from '@/components/ui/button';
 import {
     Card,
@@ -13,7 +14,7 @@ import { Form } from '@inertiajs/vue3';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
 import { nextTick, onMounted, ref } from 'vue';
 
-const { recoveryCodesList, fetchRecoveryCodes } = useTwoFactorAuth();
+const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
 const isRecoveryCodesVisible = ref<boolean>(false);
 const recoveryCodeSectionRef = ref<HTMLDivElement | null>(null);
 
@@ -62,7 +63,7 @@ onMounted(async () => {
                 </Button>
 
                 <Form
-                    v-if="isRecoveryCodesVisible"
+                    v-if="isRecoveryCodesVisible && recoveryCodesList.length"
                     v-bind="regenerateRecoveryCodes.form()"
                     method="post"
                     :options="{ preserveScroll: true }"
@@ -86,7 +87,10 @@ onMounted(async () => {
                         : 'h-0 opacity-0',
                 ]"
             >
-                <div class="mt-3 space-y-3">
+                <div v-if="errors?.length" class="mt-3">
+                    <AlertError :errors="errors" />
+                </div>
+                <div v-else class="mt-3 space-y-3">
                     <div
                         ref="recoveryCodeSectionRef"
                         class="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm"
diff --git a/resources/js/components/TwoFactorSetupModal.vue b/resources/js/components/TwoFactorSetupModal.vue
index ce2fe4f3..1f9ca86a 100644
--- a/resources/js/components/TwoFactorSetupModal.vue
+++ b/resources/js/components/TwoFactorSetupModal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AlertError from '@/components/AlertError.vue';
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import {
@@ -29,7 +30,7 @@ const props = defineProps<Props>();
 const isOpen = defineModel<boolean>('isOpen');
 
 const { copy, copied } = useClipboard();
-const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData } =
+const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
     useTwoFactorAuth();
 
 const showVerificationStep = ref(false);
@@ -150,79 +151,82 @@ watch(
                 class="relative flex w-auto flex-col items-center justify-center space-y-5"
             >
                 <template v-if="!showVerificationStep">
-                    <div
-                        class="relative mx-auto flex max-w-md items-center overflow-hidden"
-                    >
+                    <AlertError v-if="errors?.length" :errors="errors" />
+                    <template v-else>
                         <div
-                            class="relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border border-border"
+                            class="relative mx-auto flex max-w-md items-center overflow-hidden"
                         >
                             <div
-                                v-if="!qrCodeSvg"
-                                class="absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center bg-background"
-                            >
-                                <Loader2 class="size-6 animate-spin" />
-                            </div>
-                            <div
-                                v-else
-                                class="relative z-10 overflow-hidden border p-5"
+                                class="relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border border-border"
                             >
                                 <div
-                                    v-html="qrCodeSvg"
-                                    class="flex aspect-square size-full items-center justify-center"
-                                />
+                                    v-if="!qrCodeSvg"
+                                    class="absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center bg-background"
+                                >
+                                    <Loader2 class="size-6 animate-spin" />
+                                </div>
+                                <div
+                                    v-else
+                                    class="relative z-10 overflow-hidden border p-5"
+                                >
+                                    <div
+                                        v-html="qrCodeSvg"
+                                        class="flex aspect-square size-full items-center justify-center"
+                                    />
+                                </div>
                             </div>
                         </div>
-                    </div>
 
-                    <div class="flex w-full items-center space-x-5">
-                        <Button class="w-full" @click="handleModalNextStep">
-                            {{ modalConfig.buttonText }}
-                        </Button>
-                    </div>
+                        <div class="flex w-full items-center space-x-5">
+                            <Button class="w-full" @click="handleModalNextStep">
+                                {{ modalConfig.buttonText }}
+                            </Button>
+                        </div>
 
-                    <div
-                        class="relative flex w-full items-center justify-center"
-                    >
                         <div
-                            class="absolute inset-0 top-1/2 h-px w-full bg-border"
-                        />
-                        <span class="relative bg-card px-2 py-1"
-                            >or, enter the code manually</span
+                            class="relative flex w-full items-center justify-center"
                         >
-                    </div>
+                            <div
+                                class="absolute inset-0 top-1/2 h-px w-full bg-border"
+                            />
+                            <span class="relative bg-card px-2 py-1"
+                                >or, enter the code manually</span
+                            >
+                        </div>
 
-                    <div
-                        class="flex w-full items-center justify-center space-x-2"
-                    >
                         <div
-                            class="flex w-full items-stretch overflow-hidden rounded-xl border border-border"
+                            class="flex w-full items-center justify-center space-x-2"
                         >
                             <div
-                                v-if="!manualSetupKey"
-                                class="flex h-full w-full items-center justify-center bg-muted p-3"
+                                class="flex w-full items-stretch overflow-hidden rounded-xl border border-border"
                             >
-                                <Loader2 class="size-4 animate-spin" />
-                            </div>
-                            <template v-else>
-                                <input
-                                    type="text"
-                                    readonly
-                                    :value="manualSetupKey"
-                                    class="h-full w-full bg-background p-3 text-foreground"
-                                />
-                                <button
-                                    @click="copy(manualSetupKey || '')"
-                                    class="relative block h-auto border-l border-border px-3 hover:bg-muted"
+                                <div
+                                    v-if="!manualSetupKey"
+                                    class="flex h-full w-full items-center justify-center bg-muted p-3"
                                 >
-                                    <Check
-                                        v-if="copied"
-                                        class="w-4 text-green-500"
+                                    <Loader2 class="size-4 animate-spin" />
+                                </div>
+                                <template v-else>
+                                    <input
+                                        type="text"
+                                        readonly
+                                        :value="manualSetupKey"
+                                        class="h-full w-full bg-background p-3 text-foreground"
                                     />
-                                    <Copy v-else class="w-4" />
-                                </button>
-                            </template>
+                                    <button
+                                        @click="copy(manualSetupKey || '')"
+                                        class="relative block h-auto border-l border-border px-3 hover:bg-muted"
+                                    >
+                                        <Check
+                                            v-if="copied"
+                                            class="w-4 text-green-500"
+                                        />
+                                        <Copy v-else class="w-4" />
+                                    </button>
+                                </template>
+                            </div>
                         </div>
-                    </div>
+                    </template>
                 </template>
 
                 <template v-else>
diff --git a/resources/js/components/ui/alert/Alert.vue b/resources/js/components/ui/alert/Alert.vue
new file mode 100644
index 00000000..a9d336ff
--- /dev/null
+++ b/resources/js/components/ui/alert/Alert.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/alert/AlertDescription.vue b/resources/js/components/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..9f7d24df
--- /dev/null
+++ b/resources/js/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/alert/AlertTitle.vue b/resources/js/components/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..b2183843
--- /dev/null
+++ b/resources/js/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/alert/index.ts b/resources/js/components/ui/alert/index.ts
new file mode 100644
index 00000000..42d07b64
--- /dev/null
+++ b/resources/js/components/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

From 519ecfdbca91cf3dda2ec202b3aaf94966d66085 Mon Sep 17 00:00:00 2001
From: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Date: Fri, 19 Sep 2025 09:37:45 -0400
Subject: [PATCH 3/3] fix styles

---
 resources/js/components/TwoFactorRecoveryCodes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
index 0ceb0b23..6490740b 100644
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ b/resources/js/components/TwoFactorRecoveryCodes.vue
@@ -39,7 +39,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Card>
+    <Card class="w-full">
         <CardHeader>
             <CardTitle class="flex gap-3">
                 <LockKeyhole class="size-4" />2FA Recovery Codes
@@ -87,7 +87,7 @@ onMounted(async () => {
                         : 'h-0 opacity-0',
                 ]"
             >
-                <div v-if="errors?.length" class="mt-3">
+                <div v-if="errors?.length" class="mt-6">
                     <AlertError :errors="errors" />
                 </div>
                 <div v-else class="mt-3 space-y-3">