Initial

2026-06-22 23:18:23 +10:00
parent 87ce423a12
commit 3f6d532cf0
297 changed files with 29726 additions and 0 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Form } from '@inertiajs/vue3';
+import { ShieldCheck } from '@lucide/vue';
+import { onUnmounted, ref } from 'vue';
+import Heading from '@/components/Heading.vue';
+import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
+import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
+import { Button } from '@/components/ui/button';
+import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
+import { disable, enable } from '@/routes/two-factor';
+
+export type Props = {
+    canManageTwoFactor?: boolean;
+    requiresConfirmation?: boolean;
+    twoFactorEnabled?: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+    canManageTwoFactor: false,
+    requiresConfirmation: false,
+    twoFactorEnabled: false,
+});
+
+const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
+const showSetupModal = ref<boolean>(false);
+
+onUnmounted(() => clearTwoFactorAuthData());
+</script>
+
+<template>
+    <div v-if="canManageTwoFactor" class="space-y-6">
+        <Heading
+            variant="small"
+            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"
+        >
+            <p class="text-sm 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">
+                        Enable 2FA
+                    </Button>
+                </Form>
+            </div>
+        </div>
+
+        <div v-else class="flex flex-col items-start justify-start space-y-4">
+            <p class="text-sm text-muted-foreground">
+                You will be prompted for a secure, random pin during login,
+                which you can retrieve from the TOTP-supported application on
+                your phone.
+            </p>
+
+            <div class="relative inline">
+                <Form v-bind="disable.form()" #default="{ processing }">
+                    <Button
+                        variant="destructive"
+                        type="submit"
+                        :disabled="processing"
+                    >
+                        Disable 2FA
+                    </Button>
+                </Form>
+            </div>
+
+            <TwoFactorRecoveryCodes />
+        </div>
+
+        <TwoFactorSetupModal
+            v-model:isOpen="showSetupModal"
+            :requiresConfirmation="requiresConfirmation"
+            :twoFactorEnabled="twoFactorEnabled"
+        />
+    </div>
+</template>