Skip to content

Commit 87110a3

Browse files
joetannenbaumjoetannenbaum
authored
Merge pull request #150 from laravel/new-form-component-attributes
Use new reset form component attributes
2 parents 322194c + ea4dd3a commit 87110a3

File tree

7 files changed

+116
-117
lines changed

7 files changed

+116
-117
lines changed

‎package-lock.json

Lines changed: 25 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/components/delete-user.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function DeleteUser() {
3737
preserveScroll: true,
3838
}}
3939
onError={() => passwordInput.current?.focus()}
40-
onSubmitComplete={(form) => form.reset()}
40+
resetOnSuccess
4141
className="space-y-6"
4242
>
4343
{({ resetAndClearErrors, processing, errors }) => (

‎resources/js/pages/auth/confirm-password.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function ConfirmPassword() {
1414
>
1515
<Head title="Confirm password" />
1616

17-
<Form method="post" action={route('password.confirm')} onSubmitComplete={(form) => form.reset('password')}>
17+
<Form method="post" action={route('password.confirm')} resetOnSuccess={['password']}>
1818
{({ processing, errors }) => (
1919
<div className="space-y-6">
2020
<div className="grid gap-2">

‎resources/js/pages/auth/login.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
1818
<AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
1919
<Head title="Log in" />
2020

21-
<Form method="post" action={route('login')} onSubmitComplete={(form) => form.reset('password')} className="flex flex-col gap-6">
21+
<Form method="post" action={route('login')} resetOnSuccess={['password']} className="flex flex-col gap-6">
2222
{({ processing, errors }) => (
2323
<>
2424
<div className="grid gap-6">

‎resources/js/pages/auth/register.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function Register() {
1515
<Form
1616
method="post"
1717
action={route('register')}
18-
onSubmitComplete={(form) => form.reset('password', 'password_confirmation')}
18+
resetOnSuccess={['password', 'password_confirmation']}
1919
disableWhileProcessing
2020
className="flex flex-col gap-6"
2121
>

‎resources/js/pages/auth/reset-password.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
2121
method="post"
2222
action={route('password.store')}
2323
transform={(data) => ({ ...data, token, email })}
24-
onSubmitComplete={(form) => form.reset('password', 'password_confirmation')}
24+
resetOnSuccess={['password', 'password_confirmation']}
2525
>
2626
{({ processing, errors }) => (
2727
<div className="grid gap-6">

‎resources/js/pages/settings/password.tsx

Lines changed: 86 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import AppLayout from '@/layouts/app-layout';
33
import SettingsLayout from '@/layouts/settings/layout';
44
import { type BreadcrumbItem } from '@/types';
55
import { Transition } from '@headlessui/react';
6-
import { Head, useForm } from '@inertiajs/react';
7-
import { FormEventHandler, useRef } from 'react';
6+
import { Form, Head } from '@inertiajs/react';
7+
import { useRef } from 'react';
88

99
import HeadingSmall from '@/components/heading-small';
1010
import { Button } from '@/components/ui/button';
@@ -22,32 +22,6 @@ export default function Password() {
2222
const passwordInput = useRef<HTMLInputElement>(null);
2323
const currentPasswordInput = useRef<HTMLInputElement>(null);
2424

25-
const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
26-
current_password: '',
27-
password: '',
28-
password_confirmation: '',
29-
});
30-
31-
const updatePassword: FormEventHandler = (e) => {
32-
e.preventDefault();
33-
34-
put(route('password.update'), {
35-
preserveScroll: true,
36-
onSuccess: () => reset(),
37-
onError: (errors) => {
38-
if (errors.password) {
39-
reset('password', 'password_confirmation');
40-
passwordInput.current?.focus();
41-
}
42-
43-
if (errors.current_password) {
44-
reset('current_password');
45-
currentPasswordInput.current?.focus();
46-
}
47-
},
48-
});
49-
};
50-
5125
return (
5226
<AppLayout breadcrumbs={breadcrumbs}>
5327
<Head title="Password settings" />
@@ -56,71 +30,90 @@ export default function Password() {
5630
<div className="space-y-6">
5731
<HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
5832

59-
<form method="POST" onSubmit={updatePassword} className="space-y-6">
60-
<div className="grid gap-2">
61-
<Label htmlFor="current_password">Current password</Label>
62-
63-
<Input
64-
id="current_password"
65-
ref={currentPasswordInput}
66-
value={data.current_password}
67-
onChange={(e) => setData('current_password', e.target.value)}
68-
type="password"
69-
className="mt-1 block w-full"
70-
autoComplete="current-password"
71-
placeholder="Current password"
72-
/>
73-
74-
<InputError message={errors.current_password} />
75-
</div>
76-
77-
<div className="grid gap-2">
78-
<Label htmlFor="password">New password</Label>
79-
80-
<Input
81-
id="password"
82-
ref={passwordInput}
83-
value={data.password}
84-
onChange={(e) => setData('password', e.target.value)}
85-
type="password"
86-
className="mt-1 block w-full"
87-
autoComplete="new-password"
88-
placeholder="New password"
89-
/>
90-
91-
<InputError message={errors.password} />
92-
</div>
93-
94-
<div className="grid gap-2">
95-
<Label htmlFor="password_confirmation">Confirm password</Label>
96-
97-
<Input
98-
id="password_confirmation"
99-
value={data.password_confirmation}
100-
onChange={(e) => setData('password_confirmation', e.target.value)}
101-
type="password"
102-
className="mt-1 block w-full"
103-
autoComplete="new-password"
104-
placeholder="Confirm password"
105-
/>
106-
107-
<InputError message={errors.password_confirmation} />
108-
</div>
109-
110-
<div className="flex items-center gap-4">
111-
<Button disabled={processing}>Save password</Button>
112-
113-
<Transition
114-
show={recentlySuccessful}
115-
enter="transition ease-in-out"
116-
enterFrom="opacity-0"
117-
leave="transition ease-in-out"
118-
leaveTo="opacity-0"
119-
>
120-
<p className="text-sm text-neutral-600">Saved</p>
121-
</Transition>
122-
</div>
123-
</form>
33+
<Form
34+
method="put"
35+
action={route('password.update')}
36+
options={{
37+
preserveScroll: true,
38+
}}
39+
resetOnError={['password', 'password_confirmation', 'current_password']}
40+
resetOnSuccess
41+
onError={(errors) => {
42+
if (errors.password) {
43+
passwordInput.current?.focus();
44+
}
45+
46+
if (errors.current_password) {
47+
currentPasswordInput.current?.focus();
48+
}
49+
}}
50+
className="space-y-6"
51+
>
52+
{({ errors, processing, recentlySuccessful }) => (
53+
<>
54+
<div className="grid gap-2">
55+
<Label htmlFor="current_password">Current password</Label>
56+
57+
<Input
58+
id="current_password"
59+
ref={currentPasswordInput}
60+
name="current_password"
61+
type="password"
62+
className="mt-1 block w-full"
63+
autoComplete="current-password"
64+
placeholder="Current password"
65+
/>
66+
67+
<InputError message={errors.current_password} />
68+
</div>
69+
70+
<div className="grid gap-2">
71+
<Label htmlFor="password">New password</Label>
72+
73+
<Input
74+
id="password"
75+
ref={passwordInput}
76+
name="password"
77+
type="password"
78+
className="mt-1 block w-full"
79+
autoComplete="new-password"
80+
placeholder="New password"
81+
/>
82+
83+
<InputError message={errors.password} />
84+
</div>
85+
86+
<div className="grid gap-2">
87+
<Label htmlFor="password_confirmation">Confirm password</Label>
88+
89+
<Input
90+
id="password_confirmation"
91+
name="password_confirmation"
92+
type="password"
93+
className="mt-1 block w-full"
94+
autoComplete="new-password"
95+
placeholder="Confirm password"
96+
/>
97+
98+
<InputError message={errors.password_confirmation} />
99+
</div>
100+
101+
<div className="flex items-center gap-4">
102+
<Button disabled={processing}>Save password</Button>
103+
104+
<Transition
105+
show={recentlySuccessful}
106+
enter="transition ease-in-out"
107+
enterFrom="opacity-0"
108+
leave="transition ease-in-out"
109+
leaveTo="opacity-0"
110+
>
111+
<p className="text-sm text-neutral-600">Saved</p>
112+
</Transition>
113+
</div>
114+
</>
115+
)}
116+
</Form>
124117
</div>
125118
</SettingsLayout>
126119
</AppLayout>

0 commit comments

Comments
 (0)