laravel pure

2026-03-08 22:28:04 +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/settings/TwoFactor.vue
+++ b/laravel-pure/resources/js/pages/settings/TwoFactor.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import HeadingSmall from '@/components/HeadingSmall.vue';
+import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
+import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
+import AppLayout from '@/layouts/AppLayout.vue';
+import SettingsLayout from '@/layouts/settings/Layout.vue';
+import { disable, enable, show } from '@/routes/two-factor';
+import { BreadcrumbItem } from '@/types';
+import { Form, Head } from '@inertiajs/vue3';
+import { ShieldBan, ShieldCheck } from 'lucide-vue-next';
+import { onUnmounted, ref } from 'vue';
+
+interface Props {
+    requiresConfirmation?: boolean;
+    twoFactorEnabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    requiresConfirmation: false,
+    twoFactorEnabled: false,
+});
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Two-Factor Authentication',
+        href: show.url(),
+    },
+];
+
+const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
+const showSetupModal = ref<boolean>(false);
+
+onUnmounted(() => {
+    clearTwoFactorAuthData();
+});
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <Head title="Two-Factor Authentication" />
+        <SettingsLayout>
+            <div class="space-y-6">
+                <HeadingSmall
+                    title="Two-Factor Authentication"
+                    description="Manage your two-factor authentication settings"
+                />
+
+                <div
+                    v-if="!twoFactorEnabled"
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
+                    <Badge variant="destructive">Disabled</Badge>
+
+                    <p class="text-muted-foreground">
+                        When you enable two-factor authentication, you will be
+                        prompted for a secure pin during login. This pin can be
+                        retrieved from a TOTP-supported application on your
+                        phone.
+                    </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 />Enable 2FA</Button
+                            ></Form
+                        >
+                    </div>
+                </div>
+
+                <div
+                    v-else
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
+                    <Badge variant="default">Enabled</Badge>
+
+                    <p class="text-muted-foreground">
+                        With two-factor authentication enabled, you will be
+                        prompted for a secure, random pin during login, which
+                        you can retrieve from the TOTP-supported application on
+                        your phone.
+                    </p>
+
+                    <TwoFactorRecoveryCodes />
+
+                    <div class="relative inline">
+                        <Form v-bind="disable.form()" #default="{ processing }">
+                            <Button
+                                variant="destructive"
+                                type="submit"
+                                :disabled="processing"
+                            >
+                                <ShieldBan />
+                                Disable 2FA
+                            </Button>
+                        </Form>
+                    </div>
+                </div>
+
+                <TwoFactorSetupModal
+                    v-model:isOpen="showSetupModal"
+                    :requiresConfirmation="requiresConfirmation"
+                    :twoFactorEnabled="twoFactorEnabled"
+                />
+            </div>
+        </SettingsLayout>
+    </AppLayout>
+</template>