Added login flow

client/components/login/LoginForm.tsx

@@ -5,34 +5,66 @@ import FormField from "../common/form/FormField"
 import InlineLink from "../common/InlineLink"
 import SubmitButton from "../common/form/SubmitButton"
 
-interface LoginFormValues {
-  username: string
-  password: string
-}
+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 { register, handleSubmit } = useForm<LoginFormValues>()
-  const onSubmit: SubmitHandler<LoginFormValues> = (data) => console.log(data)
+  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">
-      <FormField
-        label="Username"
-        className="py-2 px-2 outline-2 w-full"
-        {...register("username")}
-      />
-      <FormField
-        label="Password"
-        type="password"
-        {...register("password")}
-        className="py-2 px-2 outline-2 w-full"
-        bottomElement={
-          <InlineLink to="#" className="block mt-2">
-            Trouble logging in?
-          </InlineLink>
-        }
-      />
+      {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>
   )
 }