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 { Card } from '@/components/ui/card'; import { Label } from '@/components/ui/label'; import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth'; import { edit } from '@/routes/security'; 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 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 ( <>

Security settings

{ if (errors.password) { passwordInput.current?.focus(); } if (errors.current_password) { currentPasswordInput.current?.focus(); } }} className="grid gap-4" > {({ errors, processing }) => ( <>
)}
{canManageTwoFactor && (
{twoFactorEnabled ? ( <>

You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.

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

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} />
)} ); } Security.layout = { breadcrumbs: [ { title: 'Security settings', href: edit(), }, ], };