import { SettingsLayout } from '@admin/components/settings/settings-layout'; import { Button } from '@admin/components/ui/button'; import { PasswordStrengthIndicator } from '@admin/components/ui/forms/password-strength-indicator'; import { FormError } from '@admin/components/ui/form-error'; import { Input } from '@admin/components/ui/input'; import { Label } from '@admin/components/ui/label'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { Head, useForm } from '@inertiajs/react'; import { FormEventHandler, useRef } from 'react'; function Password() { const passwordInput = useRef(null); const currentPasswordInput = useRef(null); const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({ current_password: '', password: '', password_confirmation: '', }); const updatePassword: FormEventHandler = (e) => { e.preventDefault(); put(route('password.update'), { preserveScroll: true, onSuccess: () => reset(), onError: (formErrors) => { if (formErrors.password) { reset('password', 'password_confirmation'); passwordInput.current?.focus(); } if (formErrors.current_password) { reset('current_password'); currentPasswordInput.current?.focus(); } }, }); }; return ( <>

Update password

Use a strong password with uppercase, lowercase, and a number or symbol.

setData('current_password', e.target.value)} type="password" autoComplete="current-password" />
setData('password', e.target.value)} type="password" autoComplete="new-password" />
setData('password_confirmation', e.target.value)} type="password" autoComplete="new-password" />
{recentlySuccessful && Saved.}
); } export default Object.assign(Password, { layout: dashboardPersistentLayout('Password', 'Settings'), });