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>
   )
 }

client/components/login/SignupForm.tsx

@@ -7,24 +7,14 @@ import FormField from "../common/form/FormField"
 import InlineLink from "../common/InlineLink"
 import Input from "../common/Input"
 import SubmitButton from "../common/form/SubmitButton"
-import { PASSWORD_REGEX } from "../../config"
 import useSignUpFlow from "../../hooks/useSignUpFlow"
+import * as validation from "../../config/validation"
 
 const SignupFormSchema = z
   .object({
     csrfToken: z.string(),
-    username: z
-      .string()
-      .trim()
-      .min(1, { message: "Username must be at least 1 character long." })
-      .max(16, { message: "Username can't be longer than 16 characters.." }),
-    password: z
-      .string()
-      .trim()
-      .regex(
-        PASSWORD_REGEX,
-        "Password must be 8-64 long and must contain a number, uppercase, lowercase and special character.",
-      ),
+    username: validation.username,
+    password: validation.password,
     passwordRepeat: z.string().trim(),
     email: z.string().email({ message: "Not a valid email address" }).trim(),
   })

client/components/nav/NavBar.tsx

@@ -1,11 +1,19 @@
-import { UserIcon } from "@heroicons/react/24/outline"
+import {
+  ArrowRightIcon,
+  ArrowRightOnRectangleIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline"
 import { FC, useState } from "react"
+import { useLogout } from "../../hooks/useLogout"
+import useSession from "../../hooks/useSession"
 
 import Button from "../common/Button"
 import Logo from "../common/Logo"
 import LoginModal, { LoginModelProps } from "../login/LoginModal"
 
 const NavBar: FC = () => {
+  const logout = useLogout()
+  const session = useSession((state) => state.session)
   const [modalProps, setModalProps] = useState<LoginModelProps>({
     isOpen: false,
     defaultPage: 0,
@@ -23,6 +31,7 @@ const NavBar: FC = () => {
       isOpen: true,
     })
 
+  console.log({ session })
   return (
     <nav className="bg-zinc-800 w-screen font-semibold border-b border-b-black">
       <div className="flex flex-row justify-between items-center h-12 mx-2">
@@ -35,27 +44,41 @@ const NavBar: FC = () => {
         </div>
         <div>
           <ul className="justify-end flex flex-row space-x-3 items-center">
-            <li>
-              <Button
-                className="text-sm px-3 py-2 bg-neutral-700"
-                onClick={showLoginTab}
-              >
-                Log In
-              </Button>
-            </li>
-            <li>
-              <Button
-                className="text-sm px-3 py-2 bg-violet-500"
-                onClick={showSignupTab}
-              >
-                Sign Up
-              </Button>
-            </li>
-            <li>
-              <Button variant="subtle" className="p-[0.4rem]">
-                <UserIcon className="h-5 w-5 inline-block" />
-              </Button>
-            </li>
+            {session ? (
+              <>
+                <li>
+                  <UserIcon className="h-5 w-5 inline-block" />
+                </li>
+                <li>
+                  <Button
+                    variant="subtle"
+                    className="p-[0.4rem]"
+                    onClick={logout}
+                  >
+                    <ArrowRightOnRectangleIcon className="h-5 w-5 inline-block" />
+                  </Button>
+                </li>
+              </>
+            ) : (
+              <>
+                <li>
+                  <Button
+                    className="text-sm px-3 py-2 bg-neutral-700"
+                    onClick={showLoginTab}
+                  >
+                    Log In
+                  </Button>
+                </li>
+                <li>
+                  <Button
+                    className="text-sm px-3 py-2 bg-violet-500"
+                    onClick={showSignupTab}
+                  >
+                    Sign Up
+                  </Button>
+                </li>
+              </>
+            )}
           </ul>
         </div>
       </div>