Saad Ibn-Ezzoubayr
35545c2a8f
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
126 lines
4.4 KiB
Vue
126 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import { ShieldBan, ShieldCheck } from 'lucide-vue-next';
|
|
import { onUnmounted, ref } from 'vue';
|
|
import Heading from '@/components/Heading.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 type { BreadcrumbItem } from '@/types';
|
|
import { disable, enable, show } from '@/routes/two-factor';
|
|
|
|
type 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" />
|
|
|
|
<h1 class="sr-only">Two-Factor Authentication Settings</h1>
|
|
|
|
<SettingsLayout>
|
|
<div 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"
|
|
>
|
|
<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>
|