import { Transition } from '@headlessui/react'; import { Form, Head } from '@inertiajs/react'; import { ShieldCheck } from 'lucide-react'; import { 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 { useTwoFactorAuth } from '@/hooks/use-two-factor-auth'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import { edit } from '@/routes/security'; import { disable, enable } from '@/routes/two-factor'; import type { BreadcrumbItem } from '@/types'; type Props = { canManageTwoFactor?: boolean; requiresConfirmation?: boolean; twoFactorEnabled?: boolean; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Security settings', href: edit(), }, ]; export default function Security({ canManageTwoFactor = false, requiresConfirmation = false, twoFactorEnabled = false, }: Props) { const passwordInput = useRef(null); const currentPasswordInput = useRef(null); const { qrCodeSvg, hasSetupData, manualSetupKey, clearSetupData, fetchSetupData, recoveryCodesList, fetchRecoveryCodes, errors, } = useTwoFactorAuth(); const [showSetupModal, setShowSetupModal] = useState(false); return (

Security settings

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

Saved

)}
{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} />
)} ); }