laravel pure

2026-03-07 21:58:03 +00:00 · 2025-10-02 11:09:56 +02:00
parent 843713fa1b
commit fc1fd888fd
272 changed files with 24588 additions and 0 deletions
--- a/laravel-pure/resources/js/pages/auth/TwoFactorChallenge.vue
+++ b/laravel-pure/resources/js/pages/auth/TwoFactorChallenge.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+    PinInput,
+    PinInputGroup,
+    PinInputSlot,
+} from '@/components/ui/pin-input';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+import { store } from '@/routes/two-factor/login';
+import { Form, Head } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+interface AuthConfigContent {
+    title: string;
+    description: string;
+    toggleText: string;
+}
+
+const authConfigContent = computed<AuthConfigContent>(() => {
+    if (showRecoveryInput.value) {
+        return {
+            title: 'Recovery Code',
+            description:
+                'Please confirm access to your account by entering one of your emergency recovery codes.',
+            toggleText: 'login using an authentication code',
+        };
+    }
+
+    return {
+        title: 'Authentication Code',
+        description:
+            'Enter the authentication code provided by your authenticator application.',
+        toggleText: 'login using a recovery code',
+    };
+});
+
+const showRecoveryInput = ref<boolean>(false);
+
+const toggleRecoveryMode = (clearErrors: () => void): void => {
+    showRecoveryInput.value = !showRecoveryInput.value;
+    clearErrors();
+    code.value = [];
+};
+
+const code = ref<number[]>([]);
+const codeValue = computed<string>(() => code.value.join(''));
+</script>
+
+<template>
+    <AuthLayout
+        :title="authConfigContent.title"
+        :description="authConfigContent.description"
+    >
+        <Head title="Two-Factor Authentication" />
+
+        <div class="space-y-6">
+            <template v-if="!showRecoveryInput">
+                <Form
+                    v-bind="store.form()"
+                    class="space-y-4"
+                    reset-on-error
+                    @error="code = []"
+                    #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 class="flex w-full items-center justify-center">
+                            <PinInput
+                                id="otp"
+                                placeholder="○"
+                                v-model="code"
+                                type="number"
+                                otp
+                            >
+                                <PinInputGroup>
+                                    <PinInputSlot
+                                        v-for="(id, index) in 6"
+                                        :key="id"
+                                        :index="index"
+                                        :disabled="processing"
+                                        autofocus
+                                    />
+                                </PinInputGroup>
+                            </PinInput>
+                        </div>
+                        <InputError :message="errors.code" />
+                    </div>
+                    <Button type="submit" class="w-full" :disabled="processing"
+                        >Continue</Button
+                    >
+                    <div class="text-center text-sm text-muted-foreground">
+                        <span>or you can </span>
+                        <button
+                            type="button"
+                            class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                            @click="() => toggleRecoveryMode(clearErrors)"
+                        >
+                            {{ authConfigContent.toggleText }}
+                        </button>
+                    </div>
+                </Form>
+            </template>
+
+            <template v-else>
+                <Form
+                    v-bind="store.form()"
+                    class="space-y-4"
+                    reset-on-error
+                    #default="{ errors, processing, clearErrors }"
+                >
+                    <Input
+                        name="recovery_code"
+                        type="text"
+                        placeholder="Enter recovery code"
+                        :autofocus="showRecoveryInput"
+                        required
+                    />
+                    <InputError :message="errors.recovery_code" />
+                    <Button type="submit" class="w-full" :disabled="processing"
+                        >Continue</Button
+                    >
+
+                    <div class="text-center text-sm text-muted-foreground">
+                        <span>or you can </span>
+                        <button
+                            type="button"
+                            class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                            @click="() => toggleRecoveryMode(clearErrors)"
+                        >
+                            {{ authConfigContent.toggleText }}
+                        </button>
+                    </div>
+                </Form>
+            </template>
+        </div>
+    </AuthLayout>
+</template>