73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { FC } from "react"
|
|
import { useForm, SubmitHandler } from "react-hook-form"
|
|
|
|
import FormField from "../common/form/FormField"
|
|
import InlineLink from "../common/InlineLink"
|
|
import SubmitButton from "../common/form/SubmitButton"
|
|
|
|
import * as validation from "../../config/validation"
|
|
import { z } from "zod"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import useLogInFlow from "../../hooks/useLogInFlow"
|
|
import Input from "../common/Input"
|
|
|
|
const LogInFormSchema = z.object({
|
|
csrfToken: z.string(),
|
|
password: validation.password,
|
|
email: z.string().email({ message: "Not a valid email address" }).trim(),
|
|
})
|
|
|
|
type LogInFormValues = z.infer<typeof LogInFormSchema>
|
|
|
|
const formFields = [
|
|
{ id: "email", label: "Email", type: "email" },
|
|
{ id: "password", label: "Password", type: "password" },
|
|
]
|
|
|
|
const LoginForm: FC = () => {
|
|
const logInFlow = useLogInFlow()
|
|
const { register, handleSubmit, formState } = useForm<LogInFormValues>({
|
|
resolver: zodResolver(LogInFormSchema),
|
|
})
|
|
const onSubmit: SubmitHandler<LogInFormValues> = (data) =>
|
|
logInFlow.submitData({
|
|
csrf_token: data.csrfToken,
|
|
method: "password",
|
|
identifier: data.email,
|
|
password: data.password,
|
|
})
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
{logInFlow.flow && (
|
|
<Input
|
|
hidden={true}
|
|
value={logInFlow.flow.ui.nodes[0].attributes.value}
|
|
{...register("csrfToken")}
|
|
/>
|
|
)}
|
|
{formFields.map((field) => (
|
|
<FormField
|
|
key={field.id}
|
|
id={field.id}
|
|
type={field.type}
|
|
label={field.label}
|
|
{...register(field.id as any)}
|
|
className="py-2 px-2 outline-2 w-full"
|
|
bottomElement={
|
|
<p className="text-xs">
|
|
{formState.errors[(field.id as any) || ""]?.message}
|
|
</p>
|
|
}
|
|
/>
|
|
))}
|
|
<SubmitButton className="w-full" value="Log In" />
|
|
<div className="text-center">
|
|
<InlineLink to="#">Trouble logging in?</InlineLink>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default LoginForm
|