Skip to content

Commit f694244

Browse files
MiroslavPetrikMiroslavPetrik
committed
migrate signin and signup
1 parent 55e555b commit f694244

File tree

6 files changed

+240
-256
lines changed

6 files changed

+240
-256
lines changed

‎package-lock.json

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"react": "19.0.0",
5353
"react-cookie": "^7.2.2",
5454
"react-dom": "19.0.0",
55-
"react-form-action": "^1.2.2",
55+
"react-form-action": "^2.2.0",
5656
"react-i18next": "^15.1.3",
5757
"superjson": "^2.2.2",
5858
"zod": "^3.23.8",
@@ -85,7 +85,7 @@
8585
"postcss": "^8.4.49",
8686
"prettier": "^3.4.2",
8787
"prettier-plugin-tailwindcss": "^0.6.9",
88-
"react-render-prop-type": "^0.1.0",
88+
"react-render-prop-type": "^1.0.0",
8989
"storybook": "^8.4.6",
9090
"tailwindcss": "^3.4.16",
9191
"typescript": "^5.7.2"

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

+79-89
Original file line numberDiff line numberDiff line change
@@ -2,106 +2,96 @@
22

33
import Link from "next/link";
44
import { Label, TextInput } from "flowbite-react";
5-
import { Form, ZodFieldError } from "react-form-action/client";
5+
import {
6+
Form,
7+
createComponents,
8+
useActionContext,
9+
} from "react-form-action/client";
610
import { Alert } from "flowbite-react";
711
import { useTranslation } from "react-i18next";
812
import { Trans } from "react-i18next/TransWithoutContext";
913
import { SubmitButton } from "@/app/_components/submit-button";
10-
import { signIn } from "@/app/actions/auth";
1114
import { FormLabel, FormItem, Stack } from "@/app/_components";
15+
import { signIn } from "@/app/actions/auth";
16+
17+
const { FieldError } = createComponents(signIn);
1218

1319
export function SignInForm() {
1420
const { t } = useTranslation("auth");
1521

22+
const { isPending, isFailure, isSuccess, isInvalid, error, validationError } =
23+
useActionContext(signIn);
24+
1625
return (
17-
<Form action={signIn} initialData="">
18-
{({
19-
error,
20-
validationError,
21-
isInvalid,
22-
isFailure,
23-
isSuccess,
24-
isPending,
25-
}) => {
26-
return (
27-
<Stack>
28-
{isFailure && (
29-
<div>
30-
<Alert color="failure">{error.message}</Alert>
31-
</div>
32-
)}
33-
<FormItem>
34-
<FormLabel>
35-
<Label htmlFor="email">{t("signIn.email")}</Label>
36-
</FormLabel>
37-
<TextInput
38-
id="email"
39-
name="email"
40-
disabled={isPending}
41-
color={
42-
isInvalid && validationError.email
43-
? "failure"
44-
: isSuccess
45-
? "success"
46-
: undefined
47-
}
48-
type="text"
49-
placeholder="[email protected]"
50-
helperText={
51-
isInvalid && (
52-
<ZodFieldError errors={validationError} name="email" />
53-
)
54-
}
55-
/>
56-
</FormItem>
57-
<FormItem>
58-
<FormLabel>
59-
<Label htmlFor="password" className="flex justify-between">
60-
<span>{t("signIn.password")}</span>
61-
<Link
62-
tabIndex={-1}
63-
href="/reset-password-email"
64-
className="text-cyan-600 hover:underline dark:text-cyan-500"
65-
>
66-
{t("signIn.forgotPassword")}
67-
</Link>
68-
</Label>
69-
</FormLabel>
70-
<TextInput
71-
id="password"
72-
name="password"
73-
disabled={isPending}
74-
color={
75-
isInvalid && validationError.password
76-
? "failure"
77-
: isSuccess
78-
? "success"
79-
: undefined
80-
}
81-
type="password"
82-
placeholder="Your password"
83-
helperText={
84-
isInvalid && (
85-
<ZodFieldError errors={validationError} name="password" />
86-
)
87-
}
88-
/>
89-
</FormItem>
90-
<SubmitButton />
91-
<Label>
92-
<Trans i18nKey="signIn.linkToSignUp" t={t}>
93-
Don&apos;t have an account?&nbsp;
94-
<Link
95-
href="/signup"
96-
className="text-cyan-600 hover:underline dark:text-cyan-500"
97-
>
98-
Sign up
99-
</Link>
100-
</Trans>
26+
<Form>
27+
<Stack>
28+
{isFailure && (
29+
<div>
30+
<Alert color="failure">{error.message}</Alert>
31+
</div>
32+
)}
33+
<FormItem>
34+
<FormLabel>
35+
<Label htmlFor="email">{t("signIn.email")}</Label>
36+
</FormLabel>
37+
<TextInput
38+
id="email"
39+
name="email"
40+
disabled={isPending}
41+
color={
42+
isInvalid && validationError.email
43+
? "failure"
44+
: isSuccess
45+
? "success"
46+
: undefined
47+
}
48+
type="text"
49+
placeholder="[email protected]"
50+
helperText={<FieldError name="email" />}
51+
/>
52+
</FormItem>
53+
<FormItem>
54+
<FormLabel>
55+
<Label htmlFor="password" className="flex justify-between">
56+
<span>{t("signIn.password")}</span>
57+
<Link
58+
tabIndex={-1}
59+
href="/reset-password-email"
60+
className="text-cyan-600 hover:underline dark:text-cyan-500"
61+
>
62+
{t("signIn.forgotPassword")}
63+
</Link>
10164
</Label>
102-
</Stack>
103-
);
104-
}}
65+
</FormLabel>
66+
<TextInput
67+
id="password"
68+
name="password"
69+
disabled={isPending}
70+
color={
71+
isInvalid && validationError.password
72+
? "failure"
73+
: isSuccess
74+
? "success"
75+
: undefined
76+
}
77+
type="password"
78+
placeholder="Your password"
79+
helperText={<FieldError name="password" />}
80+
/>
81+
</FormItem>
82+
<SubmitButton />
83+
<Label>
84+
<Trans i18nKey="signIn.linkToSignUp" t={t}>
85+
Don&apos;t have an account?&nbsp;
86+
<Link
87+
href="/signup"
88+
className="text-cyan-600 hover:underline dark:text-cyan-500"
89+
>
90+
Sign up
91+
</Link>
92+
</Trans>
93+
</Label>
94+
</Stack>
10595
</Form>
10696
);
10797
}

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
"use server";
2+
3+
import { Action } from "react-form-action/client";
24
import { PageHeader } from "@/app/_components/page-header";
35
import { SignInForm } from "./_components/form";
46
import { translate } from "@/i18n";
57
import { type Params } from "@/types";
8+
import { signIn } from "@/app/actions/auth";
69

710
export default async function SignIn({ params }: Params) {
811
const { lng } = await params;
@@ -11,7 +14,9 @@ export default async function SignIn({ params }: Params) {
1114
return (
1215
<>
1316
<PageHeader>{t("signIn.title")}</PageHeader>
14-
<SignInForm />
17+
<Action action={signIn} initialData="">
18+
<SignInForm />
19+
</Action>
1520
</>
1621
);
1722
}

0 commit comments

Comments
 (0)