Skip to content

Commit 743e080

Browse files
skryukovskryukov
committed
Migrate to Form component
1 parent cea6ef3 commit 743e080

File tree

10 files changed

+554
-605
lines changed

10 files changed

+554
-605
lines changed

‎Gemfile.lock‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ GEM
225225
date
226226
stringio
227227
public_suffix (6.0.2)
228-
puma (7.0.1)
228+
puma (7.0.2)
229229
nio4r (~> 2.0)
230230
raabro (1.4.0)
231231
racc (1.8.1)
@@ -348,7 +348,7 @@ GEM
348348
fugit (~> 1.11.0)
349349
railties (>= 7.1)
350350
thor (>= 1.3.1)
351-
sorbet-runtime (0.6.12495)
351+
sorbet-runtime (0.6.12507)
352352
sqlite3 (2.7.3-aarch64-linux-gnu)
353353
sqlite3 (2.7.3-aarch64-linux-musl)
354354
sqlite3 (2.7.3-arm-linux-gnu)
@@ -372,9 +372,9 @@ GEM
372372
timeout (0.4.3)
373373
tzinfo (2.0.6)
374374
concurrent-ruby (~> 1.0)
375-
unicode-display_width (3.1.5)
376-
unicode-emoji (~> 4.0, >= 4.0.4)
377-
unicode-emoji (4.0.4)
375+
unicode-display_width (3.2.0)
376+
unicode-emoji (~> 4.1)
377+
unicode-emoji (4.1.0)
378378
uri (1.0.3)
379379
useragent (0.16.11)
380380
vite_rails (3.0.19)

‎app/frontend/components/delete-user.svelte‎

Lines changed: 53 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
2-
import { useForm } from "@inertiajs/svelte"
2+
import type { FormComponentSlotProps } from "@inertiajs/core"
3+
import { Form } from "@inertiajs/svelte"
34
45
import HeadingSmall from "@/components/heading-small.svelte"
56
import InputError from "@/components/input-error.svelte"
@@ -10,26 +11,6 @@
1011
import { usersPath } from "@/routes"
1112
1213
let passwordInput: HTMLInputElement | null = null
13-
14-
const form = useForm({
15-
password_challenge: "",
16-
})
17-
18-
const deleteUser = (e: Event) => {
19-
e.preventDefault()
20-
21-
$form.delete(usersPath(), {
22-
preserveScroll: true,
23-
onSuccess: () => closeModal(),
24-
onError: () => passwordInput?.focus(),
25-
onFinish: () => $form.reset(),
26-
})
27-
}
28-
29-
const closeModal = () => {
30-
$form.clearErrors()
31-
$form.reset()
32-
}
3314
</script>
3415

3516
<div class="space-y-6">
@@ -49,47 +30,60 @@
4930
<Button variant="destructive">Delete account</Button>
5031
</Dialog.Trigger>
5132
<Dialog.Content>
52-
<form class="space-y-6" on:submit={deleteUser}>
53-
<Dialog.Header class="space-y-3">
54-
<Dialog.Title>
55-
Are you sure you want to delete your account?
56-
</Dialog.Title>
57-
<Dialog.Description>
58-
Once your account is deleted, all of its resources and data will
59-
also be permanently deleted. Please enter your password to confirm
60-
you would like to permanently delete your account.
61-
</Dialog.Description>
62-
</Dialog.Header>
33+
<Form
34+
method="delete"
35+
action={usersPath()}
36+
options={{
37+
preserveScroll: true,
38+
}}
39+
onError={() => passwordInput?.focus()}
40+
resetOnSuccess
41+
class="space-y-6"
42+
>
43+
{#snippet children({
44+
errors,
45+
processing,
46+
resetAndClearErrors,
47+
}: FormComponentSlotProps)}
48+
<Dialog.Header class="space-y-3">
49+
<Dialog.Title>
50+
Are you sure you want to delete your account?
51+
</Dialog.Title>
52+
<Dialog.Description>
53+
Once your account is deleted, all of its resources and data will
54+
also be permanently deleted. Please enter your password to
55+
confirm you would like to permanently delete your account.
56+
</Dialog.Description>
57+
</Dialog.Header>
6358

64-
<div class="grid gap-2">
65-
<Label for="password_challenge" class="sr-only">Password</Label>
66-
<Input
67-
id="password_challenge"
68-
type="password"
69-
name="password_challenge"
70-
bind:ref={passwordInput}
71-
bind:value={$form.password_challenge}
72-
placeholder="Password"
73-
/>
74-
<InputError message={$form.errors.password_challenge} />
75-
</div>
59+
<div class="grid gap-2">
60+
<Label for="password_challenge" class="sr-only">Password</Label>
61+
<Input
62+
id="password_challenge"
63+
type="password"
64+
name="password_challenge"
65+
bind:ref={passwordInput}
66+
placeholder="Password"
67+
/>
68+
<InputError message={errors.password_challenge} />
69+
</div>
7670

77-
<Dialog.Footer class="gap-2">
78-
<Dialog.Close>
79-
{#snippet child()}
80-
<Button variant="secondary" onclick={closeModal}>Cancel</Button>
81-
{/snippet}
82-
</Dialog.Close>
71+
<Dialog.Footer class="gap-2">
72+
<Dialog.Close>
73+
{#snippet child()}
74+
<Button
75+
variant="secondary"
76+
onclick={() => resetAndClearErrors()}>Cancel</Button
77+
>
78+
{/snippet}
79+
</Dialog.Close>
8380

84-
<Button
85-
type="submit"
86-
variant="destructive"
87-
disabled={$form.processing}
88-
>
89-
Delete account
90-
</Button>
91-
</Dialog.Footer>
92-
</form>
81+
<Button type="submit" variant="destructive" disabled={processing}>
82+
Delete account
83+
</Button>
84+
</Dialog.Footer>
85+
{/snippet}
86+
</Form>
9387
</Dialog.Content>
9488
</Dialog.Root>
9589
</div>

‎app/frontend/pages/identity/password_resets/edit.svelte‎

Lines changed: 57 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
2-
import { useForm } from "@inertiajs/svelte"
2+
import type { FormComponentSlotProps } from "@inertiajs/core"
3+
import { Form } from "@inertiajs/svelte"
34
import { LoaderCircle } from "@lucide/svelte"
45
56
import InputError from "@/components/input-error.svelte"
@@ -15,22 +16,6 @@
1516
}
1617
1718
let { sid, email }: Props = $props()
18-
19-
const form = useForm({
20-
sid,
21-
email,
22-
password: "",
23-
password_confirmation: "",
24-
})
25-
26-
const submit = (e: Event) => {
27-
e.preventDefault()
28-
$form.put(identityPasswordResetPath(), {
29-
onFinish: () => {
30-
$form.reset("password", "password_confirmation")
31-
},
32-
})
33-
}
3419
</script>
3520

3621
<svelte:head>
@@ -41,57 +26,62 @@
4126
title="Reset password"
4227
description="Please enter your new password below"
4328
>
44-
<form onsubmit={submit}>
45-
<div class="grid gap-6">
46-
<div class="grid gap-2">
47-
<Label for="email">Email</Label>
48-
<Input
49-
id="email"
50-
type="email"
51-
name="email"
52-
autocomplete="email"
53-
bind:value={$form.email}
54-
class="mt-1 block w-full"
55-
readonly
56-
/>
57-
<InputError message={$form.errors.email} class="mt-2" />
58-
</div>
29+
<Form
30+
method="put"
31+
action={identityPasswordResetPath()}
32+
transform={(data) => ({ ...data, sid, email })}
33+
resetOnSuccess={["password", "password_confirmation"]}
34+
>
35+
{#snippet children({ errors, processing }: FormComponentSlotProps)}
36+
<div class="grid gap-6">
37+
<div class="grid gap-2">
38+
<Label for="email">Email</Label>
39+
<Input
40+
id="email"
41+
name="email"
42+
type="email"
43+
autocomplete="email"
44+
value={email}
45+
class="mt-1 block w-full"
46+
readonly
47+
/>
48+
<InputError message={errors.email} class="mt-2" />
49+
</div>
5950

60-
<div class="grid gap-2">
61-
<Label for="password">Password</Label>
62-
<Input
63-
id="password"
64-
type="password"
65-
name="password"
66-
autocomplete="new-password"
67-
bind:value={$form.password}
68-
class="mt-1 block w-full"
69-
autofocus
70-
placeholder="Password"
71-
/>
72-
<InputError message={$form.errors.password} />
73-
</div>
51+
<div class="grid gap-2">
52+
<Label for="password">Password</Label>
53+
<Input
54+
id="password"
55+
name="password"
56+
type="password"
57+
autocomplete="new-password"
58+
class="mt-1 block w-full"
59+
autofocus
60+
placeholder="Password"
61+
/>
62+
<InputError message={errors.password} />
63+
</div>
7464

75-
<div class="grid gap-2">
76-
<Label for="password_confirmation">Confirm Password</Label>
77-
<Input
78-
id="password_confirmation"
79-
type="password"
80-
name="password_confirmation"
81-
autocomplete="new-password"
82-
bind:value={$form.password_confirmation}
83-
class="mt-1 block w-full"
84-
placeholder="Confirm password"
85-
/>
86-
<InputError message={$form.errors.password_confirmation} />
87-
</div>
65+
<div class="grid gap-2">
66+
<Label for="password_confirmation">Confirm Password</Label>
67+
<Input
68+
id="password_confirmation"
69+
name="password_confirmation"
70+
type="password"
71+
autocomplete="new-password"
72+
class="mt-1 block w-full"
73+
placeholder="Confirm password"
74+
/>
75+
<InputError message={errors.password_confirmation} />
76+
</div>
8877

89-
<Button type="submit" class="mt-4 w-full" disabled={$form.processing}>
90-
{#if $form.processing}
91-
<LoaderCircle class="h-4 w-4 animate-spin" />
92-
{/if}
93-
Reset password
94-
</Button>
95-
</div>
96-
</form>
78+
<Button type="submit" class="mt-4 w-full" disabled={processing}>
79+
{#if processing}
80+
<LoaderCircle class="h-4 w-4 animate-spin" />
81+
{/if}
82+
Reset password
83+
</Button>
84+
</div>
85+
{/snippet}
86+
</Form>
9787
</AuthLayout>

‎app/frontend/pages/identity/password_resets/new.svelte‎

Lines changed: 26 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
2-
import { useForm } from "@inertiajs/svelte"
2+
import type { FormComponentSlotProps } from "@inertiajs/core"
3+
import { Form } from "@inertiajs/svelte"
34
import { LoaderCircle } from "@lucide/svelte"
45
56
import InputError from "@/components/input-error.svelte"
@@ -9,15 +10,6 @@
910
import { Label } from "@/components/ui/label"
1011
import AuthLayout from "@/layouts/auth-layout.svelte"
1112
import { identityPasswordResetPath, signInPath } from "@/routes"
12-
13-
const form = useForm({
14-
email: "",
15-
})
16-
17-
const submit = (e: Event) => {
18-
e.preventDefault()
19-
$form.post(identityPasswordResetPath())
20-
}
2113
</script>
2214

2315
<svelte:head>
@@ -29,30 +21,31 @@
2921
description="Enter your email to receive a password reset link"
3022
>
3123
<div class="space-y-6">
32-
<form onsubmit={submit}>
33-
<div class="grid gap-2">
34-
<Label for="email">Email address</Label>
35-
<Input
36-
id="email"
37-
type="email"
38-
name="email"
39-
autocomplete="off"
40-
bind:value={$form.email}
41-
autofocus
42-
placeholder="[email protected]"
43-
/>
44-
<InputError message={$form.errors.email} />
45-
</div>
24+
<Form method="post" action={identityPasswordResetPath()}>
25+
{#snippet children({ errors, processing }: FormComponentSlotProps)}
26+
<div class="grid gap-2">
27+
<Label for="email">Email address</Label>
28+
<Input
29+
id="email"
30+
name="email"
31+
type="email"
32+
autocomplete="off"
33+
autofocus
34+
placeholder="[email protected]"
35+
/>
36+
<InputError message={errors.email} />
37+
</div>
4638

47-
<div class="my-6 flex items-center justify-start">
48-
<Button type="submit" class="w-full" disabled={$form.processing}>
49-
{#if $form.processing}
50-
<LoaderCircle class="h-4 w-4 animate-spin" />
51-
{/if}
52-
Email password reset link
53-
</Button>
54-
</div>
55-
</form>
39+
<div class="my-6 flex items-center justify-start">
40+
<Button type="submit" class="w-full" disabled={processing}>
41+
{#if processing}
42+
<LoaderCircle class="h-4 w-4 animate-spin" />
43+
{/if}
44+
Email password reset link
45+
</Button>
46+
</div>
47+
{/snippet}
48+
</Form>
5649

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

0 commit comments

Comments
 (0)