Skip to content

Commit c4ab030

Browse files
joetannenbaumjoetannenbaum
committed
use new form component attributes for resetting
1 parent bdd059d commit c4ab030

File tree

6 files changed

+55
-68
lines changed

6 files changed

+55
-68
lines changed

‎resources/js/components/DeleteUser.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const passwordInput = ref<HTMLInputElement | null>(null);
2525
<template>
2626
<div class="space-y-6">
2727
<HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
28-
<div class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
28+
<div class="p-4 space-y-4 border border-red-100 rounded-lg bg-red-50 dark:border-red-200/10 dark:bg-red-700/10">
2929
<div class="relative space-y-0.5 text-red-600 dark:text-red-100">
3030
<p class="font-medium">Warning</p>
3131
<p class="text-sm">Please proceed with caution, this cannot be undone.</p>
@@ -38,7 +38,7 @@ const passwordInput = ref<HTMLInputElement | null>(null);
3838
<Form
3939
method="delete"
4040
:action="route('profile.destroy')"
41-
@submit-complete="(form) => form.reset()"
41+
reset-on-success
4242
@error="() => passwordInput?.focus()"
4343
:options="{
4444
preserveScroll: true,

‎resources/js/pages/auth/ConfirmPassword.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ import { LoaderCircle } from 'lucide-vue-next';
1212
<AuthLayout title="Confirm your password" description="This is a secure area of the application. Please confirm your password before continuing.">
1313
<Head title="Confirm password" />
1414

15-
<Form method="post" :action="route('password.confirm')" @submit-complete="(form) => form.reset()" v-slot="{ errors, processing }">
15+
<Form method="post" :action="route('password.confirm')" reset-on-success v-slot="{ errors, processing }">
1616
<div class="space-y-6">
1717
<div class="grid gap-2">
1818
<Label htmlFor="password">Password</Label>
1919
<Input
2020
id="password"
2121
type="password"
2222
name="password"
23-
class="mt-1 block w-full"
23+
class="block w-full mt-1"
2424
required
2525
autocomplete="current-password"
2626
autofocus
@@ -31,7 +31,7 @@ import { LoaderCircle } from 'lucide-vue-next';
3131

3232
<div class="flex items-center">
3333
<Button class="w-full" :disabled="processing">
34-
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
34+
<LoaderCircle v-if="processing" class="w-4 h-4 animate-spin" />
3535
Confirm Password
3636
</Button>
3737
</div>

‎resources/js/pages/auth/Login.vue‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,11 @@ defineProps<{
1919
<AuthBase title="Log in to your account" description="Enter your email and password below to log in">
2020
<Head title="Log in" />
2121

22-
<div v-if="status" class="mb-4 text-center text-sm font-medium text-green-600">
22+
<div v-if="status" class="mb-4 text-sm font-medium text-center text-green-600">
2323
{{ status }}
2424
</div>
2525

26-
<Form
27-
method="post"
28-
:action="route('login')"
29-
@submit-complete="(form) => form.reset('password')"
30-
v-slot="{ errors, processing }"
31-
class="flex flex-col gap-6"
32-
>
26+
<Form method="post" :action="route('login')" :reset-on-success="['password']" v-slot="{ errors, processing }" class="flex flex-col gap-6">
3327
<div class="grid gap-6">
3428
<div class="grid gap-2">
3529
<Label for="email">Email address</Label>
@@ -72,13 +66,13 @@ defineProps<{
7266
</Label>
7367
</div>
7468

75-
<Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing">
76-
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
69+
<Button type="submit" class="w-full mt-4" :tabindex="4" :disabled="processing">
70+
<LoaderCircle v-if="processing" class="w-4 h-4 animate-spin" />
7771
Log in
7872
</Button>
7973
</div>
8074

81-
<div class="text-center text-sm text-muted-foreground">
75+
<div class="text-sm text-center text-muted-foreground">
8276
Don't have an account?
8377
<TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
8478
</div>

‎resources/js/pages/auth/Register.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { LoaderCircle } from 'lucide-vue-next';
1616
<Form
1717
method="post"
1818
:action="route('register')"
19-
@submit-complete="(form) => form.reset('password', 'password_confirmation')"
19+
:reset-on-success="['password', 'password_confirmation']"
2020
v-slot="{ errors, processing }"
2121
class="flex flex-col gap-6"
2222
>
@@ -53,13 +53,13 @@ import { LoaderCircle } from 'lucide-vue-next';
5353
<InputError :message="errors.password_confirmation" />
5454
</div>
5555

56-
<Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="processing">
57-
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
56+
<Button type="submit" class="w-full mt-2" tabindex="5" :disabled="processing">
57+
<LoaderCircle v-if="processing" class="w-4 h-4 animate-spin" />
5858
Create account
5959
</Button>
6060
</div>
6161

62-
<div class="text-center text-sm text-muted-foreground">
62+
<div class="text-sm text-center text-muted-foreground">
6363
Already have an account?
6464
<TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
6565
</div>

‎resources/js/pages/auth/ResetPassword.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ const inputEmail = ref(props.email);
2424
method="post"
2525
:action="route('password.store')"
2626
:transform="(data) => ({ ...data, token, email })"
27-
@submit-complete="(form) => form.reset('password', 'password_confirmation')"
27+
:reset-on-success="['password', 'password_confirmation']"
2828
v-slot="{ errors, processing }"
2929
>
3030
<div class="grid gap-6">
3131
<div class="grid gap-2">
3232
<Label for="email">Email</Label>
33-
<Input id="email" type="email" name="email" autocomplete="email" v-model="inputEmail" class="mt-1 block w-full" readonly />
33+
<Input id="email" type="email" name="email" autocomplete="email" v-model="inputEmail" class="block w-full mt-1" readonly />
3434
<InputError :message="errors.email" class="mt-2" />
3535
</div>
3636

@@ -41,7 +41,7 @@ const inputEmail = ref(props.email);
4141
type="password"
4242
name="password"
4343
autocomplete="new-password"
44-
class="mt-1 block w-full"
44+
class="block w-full mt-1"
4545
autofocus
4646
placeholder="Password"
4747
/>
@@ -55,14 +55,14 @@ const inputEmail = ref(props.email);
5555
type="password"
5656
name="password_confirmation"
5757
autocomplete="new-password"
58-
class="mt-1 block w-full"
58+
class="block w-full mt-1"
5959
placeholder="Confirm password"
6060
/>
6161
<InputError :message="errors.password_confirmation" />
6262
</div>
6363

64-
<Button type="submit" class="mt-4 w-full" :disabled="processing">
65-
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
64+
<Button type="submit" class="w-full mt-4" :disabled="processing">
65+
<LoaderCircle v-if="processing" class="w-4 h-4 animate-spin" />
6666
Reset password
6767
</Button>
6868
</div>

‎resources/js/pages/settings/Password.vue‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import InputError from '@/components/InputError.vue';
33
import AppLayout from '@/layouts/AppLayout.vue';
44
import SettingsLayout from '@/layouts/settings/Layout.vue';
5-
import { Head, useForm } from '@inertiajs/vue3';
5+
import { Form, Head } from '@inertiajs/vue3';
66
import { ref } from 'vue';
77
88
import HeadingSmall from '@/components/HeadingSmall.vue';
@@ -20,34 +20,6 @@ const breadcrumbItems: BreadcrumbItem[] = [
2020
2121
const passwordInput = ref<HTMLInputElement | null>(null);
2222
const currentPasswordInput = ref<HTMLInputElement | null>(null);
23-
24-
const form = useForm({
25-
current_password: '',
26-
password: '',
27-
password_confirmation: '',
28-
});
29-
30-
const updatePassword = () => {
31-
form.put(route('password.update'), {
32-
preserveScroll: true,
33-
onSuccess: () => form.reset(),
34-
onError: (errors: any) => {
35-
if (errors.password) {
36-
form.reset('password', 'password_confirmation');
37-
if (passwordInput.value instanceof HTMLInputElement) {
38-
passwordInput.value.focus();
39-
}
40-
}
41-
42-
if (errors.current_password) {
43-
form.reset('current_password');
44-
if (currentPasswordInput.value instanceof HTMLInputElement) {
45-
currentPasswordInput.value.focus();
46-
}
47-
}
48-
},
49-
});
50-
};
5123
</script>
5224

5325
<template>
@@ -58,61 +30,82 @@ const updatePassword = () => {
5830
<div class="space-y-6">
5931
<HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
6032

61-
<form method="POST" @submit.prevent="updatePassword" class="space-y-6">
33+
<Form
34+
method="put"
35+
:action="route('password.update')"
36+
:options="{
37+
preserveScroll: true,
38+
}"
39+
@error="
40+
(errors) => {
41+
if (errors.password && passwordInput) {
42+
passwordInput.focus();
43+
}
44+
45+
if (errors.current_password && currentPasswordInput) {
46+
currentPasswordInput.focus();
47+
}
48+
}
49+
"
50+
reset-on-success
51+
:reset-on-error="['password', 'password_confirmation', 'current_password']"
52+
class="space-y-6"
53+
v-slot="{ errors, processing, recentlySuccessful }"
54+
>
6255
<div class="grid gap-2">
6356
<Label for="current_password">Current password</Label>
6457
<Input
6558
id="current_password"
6659
ref="currentPasswordInput"
67-
v-model="form.current_password"
60+
name="current_password"
6861
type="password"
69-
class="mt-1 block w-full"
62+
class="block w-full mt-1"
7063
autocomplete="current-password"
7164
placeholder="Current password"
7265
/>
73-
<InputError :message="form.errors.current_password" />
66+
<InputError :message="errors.current_password" />
7467
</div>
7568

7669
<div class="grid gap-2">
7770
<Label for="password">New password</Label>
7871
<Input
7972
id="password"
8073
ref="passwordInput"
81-
v-model="form.password"
74+
name="password"
8275
type="password"
83-
class="mt-1 block w-full"
76+
class="block w-full mt-1"
8477
autocomplete="new-password"
8578
placeholder="New password"
8679
/>
87-
<InputError :message="form.errors.password" />
80+
<InputError :message="errors.password" />
8881
</div>
8982

9083
<div class="grid gap-2">
9184
<Label for="password_confirmation">Confirm password</Label>
9285
<Input
9386
id="password_confirmation"
94-
v-model="form.password_confirmation"
87+
name="password_confirmation"
9588
type="password"
96-
class="mt-1 block w-full"
89+
class="block w-full mt-1"
9790
autocomplete="new-password"
9891
placeholder="Confirm password"
9992
/>
100-
<InputError :message="form.errors.password_confirmation" />
93+
<InputError :message="errors.password_confirmation" />
10194
</div>
10295

10396
<div class="flex items-center gap-4">
104-
<Button :disabled="form.processing">Save password</Button>
97+
<Button :disabled="processing">Save password</Button>
10598

10699
<Transition
107100
enter-active-class="transition ease-in-out"
108101
enter-from-class="opacity-0"
109102
leave-active-class="transition ease-in-out"
110103
leave-to-class="opacity-0"
111104
>
112-
<p v-show="form.recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
105+
<p v-show="recentlySuccessful" class="text-sm text-neutral-600">Saved.</p>
113106
</Transition>
114107
</div>
115-
</form>
108+
</Form>
116109
</div>
117110
</SettingsLayout>
118111
</AppLayout>

0 commit comments

Comments
 (0)