Skip to content

Commit 5665712

Browse files
joetannenbaumjoetannenbaum
committed
useForm -> form component
1 parent 9262b1f commit 5665712

File tree

8 files changed

+118
-177
lines changed

8 files changed

+118
-177
lines changed

‎resources/js/components/DeleteUser.vue‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { useForm } from '@inertiajs/vue3';
2+
import { Form } from '@inertiajs/vue3';
33
import { ref } from 'vue';
44
55
// Components
@@ -20,26 +20,6 @@ import { Input } from '@/components/ui/input';
2020
import { Label } from '@/components/ui/label';
2121
2222
const passwordInput = ref<HTMLInputElement | null>(null);
23-
24-
const form = useForm({
25-
password: '',
26-
});
27-
28-
const deleteUser = (e: Event) => {
29-
e.preventDefault();
30-
31-
form.delete(route('profile.destroy'), {
32-
preserveScroll: true,
33-
onSuccess: () => closeModal(),
34-
onError: () => passwordInput.value?.focus(),
35-
onFinish: () => form.reset(),
36-
});
37-
};
38-
39-
const closeModal = () => {
40-
form.clearErrors();
41-
form.reset();
42-
};
4323
</script>
4424

4525
<template>
@@ -55,7 +35,17 @@ const closeModal = () => {
5535
<Button variant="destructive">Delete account</Button>
5636
</DialogTrigger>
5737
<DialogContent>
58-
<form method="POST" class="space-y-6" @submit="deleteUser">
38+
<Form
39+
method="delete"
40+
:action="route('profile.destroy')"
41+
@submit-complete="(form) => form.reset()"
42+
@error="() => passwordInput?.focus()"
43+
:options="{
44+
preserveScroll: true,
45+
}"
46+
class="space-y-6"
47+
v-slot="{ errors, processing, reset, clearErrors }"
48+
>
5949
<DialogHeader class="space-y-3">
6050
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
6151
<DialogDescription>
@@ -66,18 +56,28 @@ const closeModal = () => {
6656

6757
<div class="grid gap-2">
6858
<Label for="password" class="sr-only">Password</Label>
69-
<Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
70-
<InputError :message="form.errors.password" />
59+
<Input id="password" type="password" name="password" ref="passwordInput" placeholder="Password" />
60+
<InputError :message="errors.password" />
7161
</div>
7262

7363
<DialogFooter class="gap-2">
7464
<DialogClose as-child>
75-
<Button variant="secondary" @click="closeModal"> Cancel </Button>
65+
<Button
66+
variant="secondary"
67+
@click="
68+
() => {
69+
clearErrors();
70+
reset();
71+
}
72+
"
73+
>
74+
Cancel
75+
</Button>
7676
</DialogClose>
7777

78-
<Button type="submit" variant="destructive" :disabled="form.processing"> Delete account </Button>
78+
<Button type="submit" variant="destructive" :disabled="processing"> Delete account </Button>
7979
</DialogFooter>
80-
</form>
80+
</Form>
8181
</DialogContent>
8282
</Dialog>
8383
</div>

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

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,38 @@ import { Button } from '@/components/ui/button';
44
import { Input } from '@/components/ui/input';
55
import { Label } from '@/components/ui/label';
66
import AuthLayout from '@/layouts/AuthLayout.vue';
7-
import { Head, useForm } from '@inertiajs/vue3';
7+
import { Form, Head } from '@inertiajs/vue3';
88
import { LoaderCircle } from 'lucide-vue-next';
9-
10-
const form = useForm({
11-
password: '',
12-
});
13-
14-
const submit = () => {
15-
form.post(route('password.confirm'), {
16-
onFinish: () => {
17-
form.reset();
18-
},
19-
});
20-
};
219
</script>
2210

2311
<template>
2412
<AuthLayout title="Confirm your password" description="This is a secure area of the application. Please confirm your password before continuing.">
2513
<Head title="Confirm password" />
2614

27-
<form method="POST" @submit.prevent="submit">
15+
<Form method="post" :action="route('password.confirm')" @submit-complete="(form) => form.reset()" v-slot="{ errors, processing }">
2816
<div class="space-y-6">
2917
<div class="grid gap-2">
3018
<Label htmlFor="password">Password</Label>
3119
<Input
3220
id="password"
3321
type="password"
22+
name="password"
3423
class="mt-1 block w-full"
35-
v-model="form.password"
3624
required
3725
autocomplete="current-password"
3826
autofocus
3927
/>
4028

41-
<InputError :message="form.errors.password" />
29+
<InputError :message="errors.password" />
4230
</div>
4331

4432
<div class="flex items-center">
45-
<Button class="w-full" :disabled="form.processing">
46-
<LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
33+
<Button class="w-full" :disabled="processing">
34+
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
4735
Confirm Password
4836
</Button>
4937
</div>
5038
</div>
51-
</form>
39+
</Form>
5240
</AuthLayout>
5341
</template>

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,12 @@ import { Button } from '@/components/ui/button';
55
import { Input } from '@/components/ui/input';
66
import { Label } from '@/components/ui/label';
77
import AuthLayout from '@/layouts/AuthLayout.vue';
8-
import { Head, useForm } from '@inertiajs/vue3';
8+
import { Form, Head } from '@inertiajs/vue3';
99
import { LoaderCircle } from 'lucide-vue-next';
1010
1111
defineProps<{
1212
status?: string;
1313
}>();
14-
15-
const form = useForm({
16-
email: '',
17-
});
18-
19-
const submit = () => {
20-
form.post(route('password.email'));
21-
};
2214
</script>
2315

2416
<template>
@@ -30,20 +22,20 @@ const submit = () => {
3022
</div>
3123

3224
<div class="space-y-6">
33-
<form method="POST" @submit.prevent="submit">
25+
<Form method="post" :action="route('password.email')" v-slot="{ errors, processing }">
3426
<div class="grid gap-2">
3527
<Label for="email">Email address</Label>
36-
<Input id="email" type="email" name="email" autocomplete="off" v-model="form.email" autofocus placeholder="email@example.com" />
37-
<InputError :message="form.errors.email" />
28+
<Input id="email" type="email" name="email" autocomplete="off" autofocus placeholder="email@example.com" />
29+
<InputError :message="errors.email" />
3830
</div>
3931

4032
<div class="my-6 flex items-center justify-start">
41-
<Button class="w-full" :disabled="form.processing">
42-
<LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
33+
<Button class="w-full" :disabled="processing">
34+
<LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
4335
Email password reset link
4436
</Button>
4537
</div>
46-
</form>
38+
</Form>
4739

4840
<div class="space-x-1 text-center text-sm text-muted-foreground">
4941
<span>Or, return to</span>

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,13 @@ import { Checkbox } from '@/components/ui/checkbox';
66
import { Input } from '@/components/ui/input';
77
import { Label } from '@/components/ui/label';
88
import AuthBase from '@/layouts/AuthLayout.vue';
9-
import { Head, useForm } from '@inertiajs/vue3';
9+
import { Form, Head } from '@inertiajs/vue3';
1010
import { LoaderCircle } from 'lucide-vue-next';
1111
1212
defineProps<{
1313
status?: string;
1414
canResetPassword: boolean;
1515
}>();
16-
17-
const form = useForm({
18-
email: '',
19-
password: '',
20-
remember: false,
21-
});
22-
23-
const submit = () => {
24-
form.post(route('login'), {
25-
onFinish: () => form.reset('password'),
26-
});
27-
};
2816
</script>
2917

3018
<template>
@@ -35,21 +23,27 @@ const submit = () => {
3523
{{ status }}
3624
</div>
3725

38-
<form method="POST" @submit.prevent="submit" class="flex flex-col gap-6">
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+
>
3933
<div class="grid gap-6">
4034
<div class="grid gap-2">
4135
<Label for="email">Email address</Label>
4236
<Input
4337
id="email"
4438
type="email"
39+
name="email"
4540
required
4641
autofocus
4742
:tabindex="1"
4843
autocomplete="email"
49-
v-model="form.email"
5044
placeholder="email@example.com"
5145
/>
52-
<InputError :message="form.errors.email" />
46+
<InputError :message="errors.email" />
5347
</div>
5448

5549
<div class="grid gap-2">
@@ -62,24 +56,24 @@ const submit = () => {
6256
<Input
6357
id="password"
6458
type="password"
59+
name="password"
6560
required
6661
:tabindex="2"
6762
autocomplete="current-password"
68-
v-model="form.password"
6963
placeholder="Password"
7064
/>
71-
<InputError :message="form.errors.password" />
65+
<InputError :message="errors.password" />
7266
</div>
7367

7468
<div class="flex items-center justify-between">
7569
<Label for="remember" class="flex items-center space-x-3">
76-
<Checkbox id="remember" v-model="form.remember" :tabindex="3" />
70+
<Checkbox id="remember" name="remember" :tabindex="3" />
7771
<span>Remember me</span>
7872
</Label>
7973
</div>
8074

81-
<Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="form.processing">
82-
<LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
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" />
8377
Log in
8478
</Button>
8579
</div>
@@ -88,6 +82,6 @@ const submit = () => {
8882
Don't have an account?
8983
<TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
9084
</div>
91-
</form>
85+
</Form>
9286
</AuthBase>
9387
</template>

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

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,38 @@ import { Button } from '@/components/ui/button';
55
import { Input } from '@/components/ui/input';
66
import { Label } from '@/components/ui/label';
77
import AuthBase from '@/layouts/AuthLayout.vue';
8-
import { Head, useForm } from '@inertiajs/vue3';
8+
import { Form, Head } from '@inertiajs/vue3';
99
import { LoaderCircle } from 'lucide-vue-next';
10-
11-
const form = useForm({
12-
name: '',
13-
email: '',
14-
password: '',
15-
password_confirmation: '',
16-
});
17-
18-
const submit = () => {
19-
form.post(route('register'), {
20-
onFinish: () => form.reset('password', 'password_confirmation'),
21-
});
22-
};
2310
</script>
2411

2512
<template>
2613
<AuthBase title="Create an account" description="Enter your details below to create your account">
2714
<Head title="Register" />
2815

29-
<form method="POST" @submit.prevent="submit" class="flex flex-col gap-6">
16+
<Form
17+
method="post"
18+
:action="route('register')"
19+
@submit-complete="(form) => form.reset('password', 'password_confirmation')"
20+
v-slot="{ errors, processing }"
21+
class="flex flex-col gap-6"
22+
>
3023
<div class="grid gap-6">
3124
<div class="grid gap-2">
3225
<Label for="name">Name</Label>
33-
<Input id="name" type="text" required autofocus :tabindex="1" autocomplete="name" v-model="form.name" placeholder="Full name" />
34-
<InputError :message="form.errors.name" />
26+
<Input id="name" type="text" required autofocus :tabindex="1" autocomplete="name" name="name" placeholder="Full name" />
27+
<InputError :message="errors.name" />
3528
</div>
3629

3730
<div class="grid gap-2">
3831
<Label for="email">Email address</Label>
39-
<Input id="email" type="email" required :tabindex="2" autocomplete="email" v-model="form.email" placeholder="email@example.com" />
40-
<InputError :message="form.errors.email" />
32+
<Input id="email" type="email" required :tabindex="2" autocomplete="email" name="email" placeholder="email@example.com" />
33+
<InputError :message="errors.email" />
4134
</div>
4235

4336
<div class="grid gap-2">
4437
<Label for="password">Password</Label>
45-
<Input
46-
id="password"
47-
type="password"
48-
required
49-
:tabindex="3"
50-
autocomplete="new-password"
51-
v-model="form.password"
52-
placeholder="Password"
53-
/>
54-
<InputError :message="form.errors.password" />
38+
<Input id="password" type="password" required :tabindex="3" autocomplete="new-password" name="password" placeholder="Password" />
39+
<InputError :message="errors.password" />
5540
</div>
5641

5742
<div class="grid gap-2">
@@ -62,14 +47,14 @@ const submit = () => {
6247
required
6348
:tabindex="4"
6449
autocomplete="new-password"
65-
v-model="form.password_confirmation"
50+
name="password_confirmation"
6651
placeholder="Confirm password"
6752
/>
68-
<InputError :message="form.errors.password_confirmation" />
53+
<InputError :message="errors.password_confirmation" />
6954
</div>
7055

71-
<Button type="submit" class="mt-2 w-full" tabindex="5" :disabled="form.processing">
72-
<LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
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" />
7358
Create account
7459
</Button>
7560
</div>
@@ -78,6 +63,6 @@ const submit = () => {
7863
Already have an account?
7964
<TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
8065
</div>
81-
</form>
66+
</Form>
8267
</AuthBase>
8368
</template>

0 commit comments

Comments
 (0)