Add /api/login usage

frontend/src/components/auth/form.tsx

@@ -2,22 +2,22 @@ import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { login } from "@/lib/auth";
 import { cn } from "@/lib/utils";
 import { Link } from "@tanstack/react-router";
-import { HTMLAttributes, useState } from "react";
+import { HTMLAttributes, SyntheticEvent, useState } from "react";
 
 interface UserAuthFormProps extends HTMLAttributes<HTMLDivElement> {}
 
 export function RegisterForm({ className, ...props }: UserAuthFormProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  async function onSubmit(event: React.SyntheticEvent) {
+  async function onSubmit(event: SyntheticEvent) {
     event.preventDefault();
-    setIsLoading(true);
 
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 3000);
+    setIsLoading(true);
+    // await login()
+    setIsLoading(false);
   }
 
   return (
@@ -42,7 +42,7 @@ export function RegisterForm({ className, ...props }: UserAuthFormProps) {
             {isLoading && (
               <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
             )}
-            Sign In with Email
+            Create Account
           </Button>
         </div>
       </form>
@@ -53,13 +53,16 @@ export function RegisterForm({ className, ...props }: UserAuthFormProps) {
 export function LoginForm({ className, ...props }: UserAuthFormProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  async function onSubmit(event: React.SyntheticEvent) {
+  async function onSubmit(event: SyntheticEvent) {
     event.preventDefault();
-    setIsLoading(true);
 
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 3000);
+    const email = (event.target as HTMLFormElement).email.value;
+    const password = (event.target as HTMLFormElement).password.value;
+
+    setIsLoading(true);
+    const result = await login(email, password);
+    console.log({ result });
+    setIsLoading(false);
   }
 
   return (
@@ -67,12 +70,9 @@ export function LoginForm({ className, ...props }: UserAuthFormProps) {
       <form onSubmit={onSubmit}>
         <div className="grid gap-2">
           <div className="grid gap-1">
-            <Label className="sr-only" htmlFor="email">
-              Email
-            </Label>
+            <Label htmlFor="email">Email</Label>
             <Input
               id="email"
-              placeholder="name@example.com"
               type="email"
               autoCapitalize="none"
               autoComplete="email"
@@ -80,17 +80,28 @@ export function LoginForm({ className, ...props }: UserAuthFormProps) {
               disabled={isLoading}
             />
           </div>
+          <div className="grid gap-1">
+            <Label htmlFor="email">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              autoCapitalize="none"
+              autoComplete="current-password"
+              autoCorrect="off"
+              disabled={isLoading}
+            />
+          </div>
           <Button disabled={isLoading}>
             {isLoading && (
               <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
             )}
-            Sign In
+            Login
           </Button>
         </div>
       </form>
       <p className="text-center text-sm text-muted-foreground">
         <Link
-          href="/terms"
+          to="/register"
           className="underline underline-offset-4 hover:text-primary"
         >
           Register

frontend/src/lib/auth.ts

@@ -35,3 +35,30 @@ export const getSession = async (): Promise<
     return err({ detail: error.detail });
   }
 };
+
+type LoginResponse = {
+  email: string;
+  expiry: string;
+};
+
+export const login = async (
+  email: string,
+  password: string,
+): Promise<Result<LoginResponse, ErrorResponse>> => {
+  const response = await fetch(TARGET + "/api/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ email, password }),
+  });
+
+  if (response.ok) {
+    const user = await response.json();
+    useUserStore.getState().setUser(user);
+    return ok(user);
+  } else {
+    const error = await response.json();
+    return err({ detail: error.detail });
+  }
+};

frontend/src/routes/login.tsx

@@ -23,9 +23,9 @@ function Login() {
     <AuthenticationPage>
       <div className="mx-auto flex w-full flex-col space-y-6 sm:w-[350px]">
         <div className="flex flex-col space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Login</h1>
+          <h1 className="text-2xl font-semibold tracking-tight">Sign In</h1>
           <p className="text-sm text-muted-foreground">
-            Enter your email below to login
+            Enter your email & password below to login
           </p>
         </div>
         <LoginForm />