import HeadingSmall from '@/components/heading-small'; import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes'; import TwoFactorSetupModal from '@/components/two-factor-setup-modal'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import { disable, enable, show } from '@/routes/two-factor'; import { type BreadcrumbItem } from '@/types'; import { Form, Head } from '@inertiajs/react'; import { ShieldBan, ShieldCheck } from 'lucide-react'; import { useState } from 'react'; interface TwoFactorProps { requiresConfirmation?: boolean; twoFactorEnabled?: boolean; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Two-Factor Authentication', href: show.url(), }, ]; export default function TwoFactor({ requiresConfirmation = false, twoFactorEnabled = false, }: TwoFactorProps) { const { qrCodeSvg, hasSetupData, manualSetupKey, clearSetupData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes, errors, } = useTwoFactorAuth(); const [showSetupModal, setShowSetupModal] = useState(false); return (
{twoFactorEnabled ? (
Enabled

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.

{({ processing }) => ( )}
) : (
Disabled

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.

{hasSetupData ? ( ) : (
setShowSetupModal(true) } > {({ processing }) => ( )}
)}
)} setShowSetupModal(false)} requiresConfirmation={requiresConfirmation} twoFactorEnabled={twoFactorEnabled} qrCodeSvg={qrCodeSvg} manualSetupKey={manualSetupKey} clearSetupData={clearSetupData} fetchSetupData={fetchSetupData} errors={errors} />
); }