Skip to content

Commit 9ba4eb7

Browse files
MiroslavPetrikMiroslavPetrik
committed
update forms with RFA v2 context api
1 parent f694244 commit 9ba4eb7

File tree

12 files changed

+290
-257
lines changed

12 files changed

+290
-257
lines changed

‎src/app/[lng]/(auth-ui)/reset-password-email/_components/form.tsx

+72-68
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,92 @@
11
"use client";
2+
23
import Link from "next/link";
3-
import { SubmitButton } from "@/app/_components/submit-button";
4-
import { Label, TextInput } from "flowbite-react";
5-
import { Form, ZodFieldError } from "react-form-action/client";
6-
import { resetPasswordEmail } from "@/app/actions/auth";
7-
import { Alert } from "flowbite-react";
84
import { Trans } from "react-i18next/TransWithoutContext";
95
import { useTranslation } from "react-i18next";
6+
import { Alert } from "flowbite-react";
7+
import { Label, TextInput } from "flowbite-react";
8+
import {
9+
Form,
10+
useActionContext,
11+
createComponents,
12+
} from "react-form-action/client";
13+
14+
import { SubmitButton } from "@/app/_components/submit-button";
15+
import { resetPasswordEmail } from "@/app/actions/auth";
1016
import { Stack, FormItem, FormLabel } from "@/app/_components";
1117

18+
const { FieldError } = createComponents(resetPasswordEmail);
19+
1220
export function ResetPasswordEmailForm() {
1321
const { t } = useTranslation("auth");
1422

23+
const {
24+
isPending,
25+
isFailure,
26+
isSuccess,
27+
isInvalid,
28+
error,
29+
validationError,
30+
data,
31+
} = useActionContext(resetPasswordEmail);
32+
1533
return (
16-
<Form action={resetPasswordEmail} initialData="">
17-
{({
18-
error,
19-
data,
20-
validationError,
21-
isFailure,
22-
isInvalid,
23-
isSuccess,
24-
isPending,
25-
}) => (
26-
<Stack>
27-
{isSuccess && (
28-
<div>
29-
<Alert color="success">{data}</Alert>
30-
</div>
31-
)}
32-
{isFailure && (
33-
<div>
34-
<Alert color="failure">{error.message}</Alert>
35-
</div>
36-
)}
37-
<FormItem>
38-
<FormLabel>
39-
<Label
40-
htmlFor="email"
41-
color={
42-
isInvalid && validationError.email
43-
? "failure"
44-
: isSuccess
45-
? "success"
46-
: undefined
47-
}
48-
>
49-
{t("resetPasswordEmail.email")}
50-
</Label>
51-
</FormLabel>
52-
<TextInput
53-
id="email"
54-
name="email"
55-
disabled={isPending}
34+
<Form>
35+
<Stack>
36+
{isSuccess && (
37+
<div>
38+
<Alert color="success">{data}</Alert>
39+
</div>
40+
)}
41+
{isFailure && (
42+
<div>
43+
<Alert color="failure">{error.message}</Alert>
44+
</div>
45+
)}
46+
<FormItem>
47+
<FormLabel>
48+
<Label
49+
htmlFor="email"
5650
color={
5751
isInvalid && validationError.email
5852
? "failure"
5953
: isSuccess
6054
? "success"
6155
: undefined
6256
}
63-
type="text"
64-
placeholder="[email protected]"
65-
helperText={
66-
isInvalid && (
67-
<ZodFieldError errors={validationError} name="email" />
68-
)
69-
}
70-
/>
71-
</FormItem>
72-
<SubmitButton />
73-
<Label>
74-
<Trans i18nKey="resetPasswordEmail.linkToSignIn" t={t}>
75-
Go back to&nbsp;
76-
<Link
77-
href="/signin"
78-
className="text-cyan-600 hover:underline dark:text-cyan-500"
79-
>
80-
Sign in
81-
</Link>
82-
</Trans>
83-
</Label>
84-
</Stack>
85-
)}
57+
>
58+
{t("resetPasswordEmail.email")}
59+
</Label>
60+
</FormLabel>
61+
<TextInput
62+
id="email"
63+
name="email"
64+
disabled={isPending}
65+
color={
66+
isInvalid && validationError.email
67+
? "failure"
68+
: isSuccess
69+
? "success"
70+
: undefined
71+
}
72+
type="text"
73+
placeholder="[email protected]"
74+
helperText={<FieldError name="email" />}
75+
/>
76+
</FormItem>
77+
<SubmitButton />
78+
<Label>
79+
<Trans i18nKey="resetPasswordEmail.linkToSignIn" t={t}>
80+
Go back to&nbsp;
81+
<Link
82+
href="/signin"
83+
className="text-cyan-600 hover:underline dark:text-cyan-500"
84+
>
85+
Sign in
86+
</Link>
87+
</Trans>
88+
</Label>
89+
</Stack>
8690
</Form>
8791
);
8892
}

‎src/app/[lng]/(auth-ui)/reset-password-email/page.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
"use server";
22

3+
import { Action } from "react-form-action/client";
34
import { PageHeader } from "@/app/_components/page-header";
45
import { ResetPasswordEmailForm } from "./_components/form";
56
import { translate } from "@/i18n";
67
import { type Params } from "@/types";
8+
import { resetPasswordEmail } from "@/app/actions/auth";
79

810
export default async function ResetPasswordEmail({ params }: Params) {
911
const { lng } = await params;
@@ -12,7 +14,9 @@ export default async function ResetPasswordEmail({ params }: Params) {
1214
return (
1315
<>
1416
<PageHeader>{t("resetPasswordEmail.title")}</PageHeader>
15-
<ResetPasswordEmailForm />
17+
<Action action={resetPasswordEmail} initialData="">
18+
<ResetPasswordEmailForm />
19+
</Action>
1620
</>
1721
);
1822
}

‎src/app/[lng]/(auth-ui)/reset-password/_components/form.tsx

+69-66
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,92 @@
11
"use client";
2-
import { SubmitButton } from "@/app/_components/submit-button";
2+
33
import { Label, TextInput } from "flowbite-react";
4-
import { Form, ZodFieldError } from "react-form-action/client";
5-
import { resetPassword } from "@/app/actions/auth";
4+
import {
5+
Form,
6+
useActionContext,
7+
createComponents,
8+
} from "react-form-action/client";
69
import { Alert } from "flowbite-react";
710
import Link from "next/link";
811
import { useTranslation } from "react-i18next";
912
import { Trans } from "react-i18next/TransWithoutContext";
13+
import { SubmitButton } from "@/app/_components/submit-button";
1014
import { type ResetTokenParam, resetTokenFieldName } from "@/edgedb/shared";
1115
import { Stack, FormItem, FormLabel } from "@/app/_components";
16+
import { resetPassword } from "@/app/actions/auth";
17+
18+
const { FieldError } = createComponents(resetPassword);
1219

1320
export function ResetPasswordForm({ reset_token }: ResetTokenParam) {
1421
const { t } = useTranslation("auth");
1522

23+
const {
24+
isPending,
25+
isFailure,
26+
isSuccess,
27+
isInvalid,
28+
error,
29+
validationError,
30+
data,
31+
} = useActionContext(resetPassword);
32+
1633
return (
17-
<Form action={resetPassword} initialData="">
18-
{({
19-
error,
20-
data,
21-
validationError,
22-
isInvalid,
23-
isFailure,
24-
isSuccess,
25-
isPending,
26-
}) => (
27-
<Stack>
28-
{isSuccess && (
29-
<div>
30-
<Alert color="success">{data}</Alert>
31-
</div>
32-
)}
33-
{isFailure && (
34-
<div>
35-
<Alert color="failure">{error.message}</Alert>
36-
</div>
37-
)}
38-
<FormItem>
39-
<FormLabel>
40-
<Label
41-
htmlFor="password"
42-
color={
43-
isInvalid && validationError.password
44-
? "failure"
45-
: isSuccess
46-
? "success"
47-
: undefined
48-
}
49-
>
50-
{t("resetPassword.newPassword")}
51-
</Label>
52-
</FormLabel>
53-
<TextInput
54-
id="password"
55-
name="password"
56-
type="password"
57-
disabled={isPending}
34+
<Form>
35+
<Stack>
36+
{isSuccess && (
37+
<div>
38+
<Alert color="success">{data}</Alert>
39+
</div>
40+
)}
41+
{isFailure && (
42+
<div>
43+
<Alert color="failure">{error.message}</Alert>
44+
</div>
45+
)}
46+
<FormItem>
47+
<FormLabel>
48+
<Label
49+
htmlFor="password"
5850
color={
5951
isInvalid && validationError.password
6052
? "failure"
6153
: isSuccess
6254
? "success"
6355
: undefined
6456
}
65-
helperText={
66-
isInvalid && (
67-
<ZodFieldError errors={validationError} name="password" />
68-
)
69-
}
70-
/>
71-
</FormItem>
72-
<input name={resetTokenFieldName} defaultValue={reset_token} hidden />
73-
<SubmitButton />
74-
<Label>
75-
<Trans i18nKey="resetPassword.linkToReset" t={t}>
76-
Link expired?&nbsp;
77-
<Link
78-
href="/reset-password-email"
79-
className="text-cyan-600 hover:underline dark:text-cyan-500"
80-
>
81-
Get another.
82-
</Link>
83-
</Trans>
84-
</Label>
85-
</Stack>
86-
)}
57+
>
58+
{t("resetPassword.newPassword")}
59+
</Label>
60+
</FormLabel>
61+
<TextInput
62+
id="password"
63+
name="password"
64+
type="password"
65+
disabled={isPending}
66+
color={
67+
isInvalid && validationError.password
68+
? "failure"
69+
: isSuccess
70+
? "success"
71+
: undefined
72+
}
73+
helperText={<FieldError name="password" />}
74+
/>
75+
</FormItem>
76+
<input name={resetTokenFieldName} defaultValue={reset_token} hidden />
77+
<SubmitButton />
78+
<Label>
79+
<Trans i18nKey="resetPassword.linkToReset" t={t}>
80+
Link expired?&nbsp;
81+
<Link
82+
href="/reset-password-email"
83+
className="text-cyan-600 hover:underline dark:text-cyan-500"
84+
>
85+
Get another.
86+
</Link>
87+
</Trans>
88+
</Label>
89+
</Stack>
8790
</Form>
8891
);
8992
}

‎src/app/[lng]/(auth-ui)/reset-password/page.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
"use server";
2+
import { Action } from "react-form-action/client";
23
import { PageHeader } from "@/app/_components/page-header";
34
import { ResetPasswordForm } from "./_components/form";
45
import { type Params } from "@/types";
56
import { translate } from "@/i18n";
67
import { type ResetTokenParam } from "@/edgedb/shared";
8+
import { resetPassword } from "@/app/actions/auth";
79

810
export default async function ResetPassword({
911
params,
@@ -16,7 +18,9 @@ export default async function ResetPassword({
1618
return (
1719
<>
1820
<PageHeader>{t("resetPassword.title")}</PageHeader>
19-
<ResetPasswordForm reset_token={reset_token} />
21+
<Action action={resetPassword} initialData="">
22+
<ResetPasswordForm reset_token={reset_token} />
23+
</Action>
2024
</>
2125
);
2226
}

‎src/app/[lng]/(user)/settings/delete-account/_components/form.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
"use client";
22

3+
import { Form, useActionContext } from "react-form-action/client";
34
import { deleteUser } from "@/app/actions";
4-
import { Form } from "react-form-action/client";
55
import { useTranslation } from "react-i18next";
66
import { SubmitButton } from "@/app/_components/submit-button";
77

88
export function DeleteUserForm() {
99
const { t } = useTranslation("settings");
1010

11+
const { isPending, isSuccess, data } = useActionContext(deleteUser);
12+
1113
return (
12-
<Form action={deleteUser} initialData="">
13-
{({ data, isSuccess, isPending }) => (
14-
<>
15-
{isSuccess && <label>{data}</label>}
16-
<SubmitButton color="failure">
17-
{isPending
18-
? t("deleteAccount.submitting")
19-
: t("deleteAccount.submit")}
20-
</SubmitButton>
21-
</>
22-
)}
14+
<Form>
15+
{isSuccess && <label>{data}</label>}
16+
<SubmitButton color="failure">
17+
{isPending ? t("deleteAccount.submitting") : t("deleteAccount.submit")}
18+
</SubmitButton>
2319
</Form>
2420
);
2521
}

0 commit comments

Comments
 (0)