import { Head } from '@inertiajs/react'; import { useRef } from 'react'; import type { FormEvent } from 'react'; import SecurityController from '@/actions/App/Domains/Shared/Http/Controllers/Settings/SecurityController'; import Heading from '@/components/Heading'; import InputError from '@/components/InputError'; import PasswordInput from '@/components/PasswordInput'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { useYupForm } from '@/hooks/use-yup-form'; import { PASSWORD_HINT } from '@/lib/field-constraints'; import { securityUpdateSchema } from '@/lib/validation/auth'; import { edit } from '@/routes/security'; export default function Security() { const passwordInput = useRef(null); const currentPasswordInput = useRef(null); const { data, setData, processing, errors, validateField, submit } = useYupForm(securityUpdateSchema, { current_password: '', password: '', password_confirmation: '', }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); submit((form) => form.put(SecurityController.update.url(), { preserveScroll: true, onSuccess: () => form.reset(), onError: (formErrors) => { // Kosongkan lalu fokuskan field yang ditolak server — // password tidak pernah dibiarkan tertinggal di layar. if (formErrors.password) { form.reset('password', 'password_confirmation'); passwordInput.current?.focus(); } if (formErrors.current_password) { form.reset('current_password'); currentPasswordInput.current?.focus(); } }, }), ); }; return ( <>

Security settings

setData('current_password', e.target.value) } onBlur={() => validateField('current_password')} />
setData('password', e.target.value) } onBlur={() => validateField('password')} />

{PASSWORD_HINT}

setData('password_confirmation', e.target.value) } onBlur={() => validateField('password_confirmation') } />
); } Security.layout = { breadcrumbs: [ { title: 'Security settings', href: edit(), }, ], };