Installed Laravel

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
+import { regenerateRecoveryCodes } from '@/routes/two-factor';
+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 isRecoveryCodesVisible = ref<boolean>(false);
+const recoveryCodeSectionRef = ref<HTMLDivElement | null>(null);
+
+const toggleRecoveryCodesVisibility = async () => {
+    if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
+        await fetchRecoveryCodes();
+    }
+
+    isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
+
+    if (isRecoveryCodesVisible.value) {
+        await nextTick();
+        recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
+    }
+};
+
+onMounted(async () => {
+    if (!recoveryCodesList.value.length) {
+        await fetchRecoveryCodes();
+    }
+});
+</script>
+
+<template>
+    <Card>
+        <CardHeader>
+            <CardTitle class="flex gap-3"> <LockKeyhole class="size-4" />2FA Recovery Codes </CardTitle>
+            <CardDescription>
+                Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div class="flex flex-col gap-3 select-none sm:flex-row sm:items-center sm:justify-between">
+                <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
+                    <component :is="isRecoveryCodesVisible ? EyeOff : Eye" class="size-4" />
+                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} Recovery Codes
+                </Button>
+
+                <Form
+                    v-if="isRecoveryCodesVisible"
+                    v-bind="regenerateRecoveryCodes.form()"
+                    method="post"
+                    :options="{ preserveScroll: true }"
+                    @success="fetchRecoveryCodes"
+                    #default="{ processing }"
+                >
+                    <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']">
+                <div class="mt-3 space-y-3">
+                    <div ref="recoveryCodeSectionRef" class="grid gap-1 rounded-lg bg-muted p-4 font-mono text-sm">
+                        <div v-if="!recoveryCodesList.length" class="space-y-2">
+                            <div v-for="n in 8" :key="n" class="h-4 animate-pulse rounded bg-muted-foreground/20"></div>
+                        </div>
+                        <div v-else v-for="(code, index) in recoveryCodesList" :key="index">
+                            {{ code }}
+                        </div>
+                    </div>
+                    <p class="text-xs text-muted-foreground select-none">
+                        Each recovery code can be used once to access your account and will be removed after use. If you need more, click
+                        <span class="font-bold">Regenerate Codes</span> above.
+                    </p>
+                </div>
+            </div>
+        </CardContent>
+    </Card>
+</template>