import { Form, Head } from '@inertiajs/react'; import { ShieldCheck } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import PasswordInput from '@/components/password-input'; import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes'; import TwoFactorSetupModal from '@/components/two-factor-setup-modal'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { useI18n } from '@/hooks/use-i18n'; import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth'; import { disable, enable } from '@/routes/two-factor'; type Props = { canManageTwoFactor?: boolean; requiresConfirmation?: boolean; twoFactorEnabled?: boolean; }; export default function Security({ canManageTwoFactor = false, requiresConfirmation = false, twoFactorEnabled = false, }: Props) { const { t } = useI18n(); const passwordInput = useRef(null); const currentPasswordInput = useRef(null); const { qrCodeSvg, hasSetupData, manualSetupKey, clearSetupData, clearTwoFactorAuthData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes, errors, } = useTwoFactorAuth(); const [showSetupModal, setShowSetupModal] = useState(false); const prevTwoFactorEnabled = useRef(twoFactorEnabled); useEffect(() => { if (prevTwoFactorEnabled.current && !twoFactorEnabled) { clearTwoFactorAuthData(); } prevTwoFactorEnabled.current = twoFactorEnabled; }, [twoFactorEnabled, clearTwoFactorAuthData]); return ( <>

{t('settings.security.meta.sr_only')}

{ if (formErrors.password) { passwordInput.current?.focus(); } if (formErrors.current_password) { currentPasswordInput.current?.focus(); } }} className="space-y-6" > {({ errors: formErrors, processing }) => ( <>
)}
{canManageTwoFactor && (
{twoFactorEnabled ? (

{t('settings.security.two_factor.enabled_description')}

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

{t('settings.security.two_factor.disabled_description')}

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