import { Form, Head } from '@inertiajs/react'; import { useRef } from 'react'; import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; 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'; import PasswordInput from '@/components/password-input'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { edit } from '@/routes/security'; 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="space-y-6" > {({ errors, processing }) => ( <>
)}
); } Security.layout = { breadcrumbs: [ { title: 'Security settings', href: edit(), }, ], };