import DOMPurify from 'dompurify'; import { Copy, Download, Eye, EyeOff, RefreshCw, Shield, ShieldCheck, ShieldOff } from 'lucide-react'; import { toast } from 'sonner'; import { useEffect, useState, FormEventHandler } from 'react'; import { Head, useForm, usePage, router } from '@inertiajs/react'; import InputError from '@/Components/InputError'; import EditorialPageHeader from '@/Components/layout/EditorialPageHeader'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { Checkbox } from '@/Components/ui/checkbox'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; import { Input } from '@/Components/ui/input'; import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/Components/ui/input-otp'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { copyToClipboard } from '@/lib/clipboard'; import { FEATURE_USED, SETTINGS_SECURITY_VIEWED } from '@/lib/event-catalog'; import { copied, couldnt } from '@/lib/messages'; import type { PageProps } from '@/types'; const QR_ALLOWED_TAGS = [ 'svg', 'rect', 'path', 'circle', 'line', 'polyline', 'polygon', 'g', 'defs', 'title', ]; const QR_ALLOWED_ATTR = [ 'viewBox', 'width', 'height', 'fill', 'stroke', 'stroke-width', 'd', 'cx', 'cy', 'r', 'x', 'y', 'xmlns', ]; interface SecurityProps { enabled: boolean; qr_code: string | null; secret: string | null; recovery_codes: string[] | null; } export default function Security({ enabled, qr_code, secret, recovery_codes }: SecurityProps) { const { flash } = usePage().props; useEffect(() => { trackProductEvent(SETTINGS_SECURITY_VIEWED); trackProductEvent(FEATURE_USED, { feature: 'settings_security' }); }, []); return (
{flash.success && (
{flash.success}
)} {enabled ? ( // R3UXA-015: if just-confirmed codes exist, force them through a // one-time acknowledgment panel before returning to normal EnabledState. ) : qr_code && secret ? ( ) : ( )}
); } function NotEnabledState() { const { post, processing } = useForm({}); const handleEnable: FormEventHandler = (e) => { e.preventDefault(); post(route('two-factor.enable')); }; return (
Two-Factor Authentication Add an extra layer of security to your account using a TOTP authenticator app.
Not enabled

Two-factor authentication adds an additional layer of security to your account by requiring a code from your authenticator app when you sign in.

Enable two-factor authentication
); } function SetupState({ qrCode, secret }: { qrCode: string; secret: string }) { const { data, setData, post, processing, errors, isDirty } = useForm({ code: '', }); useUnsavedChanges(isDirty); const handleConfirm: FormEventHandler = (e) => { e.preventDefault(); post(route('two-factor.confirm')); }; return (
Set Up Two-Factor Authentication Scan the QR code below with your authenticator app, then enter the verification code.
{/* Outer container: neutral in both light and dark mode */}
{/* bg-white intentional on inner element: QR codes require white background for scanner apps */}

Manual entry key

{/* F4UXA-008: standardize on font-data (canonical machine-value token) */} {secret} {/* R3UXA-001: hardened copy */}
setData('code', value)} autoFocus aria-required="true" aria-invalid={!!errors.code} aria-describedby={errors.code ? 'confirm-code-error' : undefined} >
Confirm and enable
); } function EnabledState({ initialRecoveryCodes }: { initialRecoveryCodes: string[] | null }) { // R3UXA-015: if recovery codes were just generated (first load after confirm), // force-show them in a one-time acknowledgment panel. const [showRecoveryCodes, setShowRecoveryCodes] = useState(!!initialRecoveryCodes); const [recoveryCodes, setRecoveryCodes] = useState(initialRecoveryCodes); const [codesAcknowledged, setCodesAcknowledged] = useState(!initialRecoveryCodes); const [loadingCodes, setLoadingCodes] = useState(false); const [disableDialogOpen, setDisableDialogOpen] = useState(false); const disableForm = useForm({ password: '' }); useUnsavedChanges(disableForm.isDirty); const fetchRecoveryCodes = async () => { setLoadingCodes(true); try { const response = await fetch(route('two-factor.recovery-codes'), { headers: { Accept: 'application/json' }, }); if (!response.ok) throw new Error(); const data = await response.json(); setRecoveryCodes(data.recovery_codes); setShowRecoveryCodes(true); } catch { toast.error(couldnt('load', 'recovery codes')); } finally { setLoadingCodes(false); } }; const handleRegenerate = () => { router.post( route('two-factor.recovery-codes.regenerate'), {}, { onSuccess: () => { // F4FE-007: After regenerating, force-show the new codes behind the // acknowledgment gate so the user cannot navigate away without capturing them. // Reset codesAcknowledged so the Done/Hide button stays gated until confirmed. setCodesAcknowledged(false); // Fetch the newly generated codes and show them in the acknowledgment panel. fetchRecoveryCodes(); }, }, ); }; const handleDisable = () => { disableForm.delete(route('two-factor.disable'), { onSuccess: () => setDisableDialogOpen(false), onError: () => {}, }); }; return ( <>
Two-Factor Authentication Your account is protected with two-factor authentication.
Enabled

You will be asked for a verification code from your authenticator app each time you sign in.

{/* R3UXA-015: hide/show disabled until one-time acknowledgment completes */}
{showRecoveryCodes && recoveryCodes && ( Recovery Codes Store these codes in a safe place. Each code can only be used once.
{/* F4UXA-008: standardize on font-data (canonical machine-value token) */} {recoveryCodes.map((code) => ( {code} ))}
{/* R3UXA-001: hardened copy */} {/* R3UXA-015: download as secondary save path */}
{/* R3UXA-015: force acknowledgment before dismissing the one-time panel */} {!codesAcknowledged && (
{ if (checked) setCodesAcknowledged(true); }} className="mt-0.5 shrink-0" />
)} )}

This will remove the extra security from your account. Enter your password to confirm.

disableForm.setData('password', e.target.value)} autoComplete="current-password" required aria-required="true" aria-invalid={!!disableForm.errors.password} aria-describedby={disableForm.errors.password ? 'disable-password-error' : undefined} />
} confirmLabel="Disable 2FA" variant="destructive" onConfirm={handleDisable} /> ); }