import { Form, Head } from '@inertiajs/react'; import { KeyRound } from 'lucide-react'; import { useRef } from 'react'; import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController'; import { Field, FormActions } from '@/components/crm/form-field'; import { SectionCard } from '@/components/crm/page-header'; import PasswordInput from '@/components/password-input'; import { Button } from '@/components/ui/button'; import { edit } from '@/routes/security'; import type { Props as ManagePasskeysProps } from '@/components/manage-passkeys'; import ManagePasskeys from '@/components/manage-passkeys'; import type { Props as ManageTwoFactorProps } from '@/components/manage-two-factor'; import ManageTwoFactor from '@/components/manage-two-factor'; // oxfmt-ignore type Props = { passwordRules: string; } & ManagePasskeysProps & ManageTwoFactorProps; export default function Security(props: Props) { const passwordInput = useRef(null); const currentPasswordInput = useRef(null); return (

Security settings

{ if (errors.password) { passwordInput.current?.focus(); } if (errors.current_password) { currentPasswordInput.current?.focus(); } }} className="flex flex-col gap-5" > {({ errors, processing }) => ( <> )}

); } Security.layout = { breadcrumbs: [ { title: 'Security settings', href: edit(), }, ], };