refactor login

client/src/app/layout.tsx

@@ -45,12 +45,18 @@ export default function RootLayout({
         ></script>
         <ThemeProvider>
           <QueryProvider>
+            {pathname === "/login" ? (
+              <div className="min-h-full flex items-center justify-center">
+                {children}
+              </div>
+            ) : (
               <div className="min-h-full">
                 <TopBar />
                 <main className="flex min-h-screen flex-col items-center p-4">
                   <div className="w-full max-w-6xl">{children}</div>
                 </main>
               </div>
+            )}
           </QueryProvider>
         </ThemeProvider>
       </body>

client/src/app/login/page.tsx

@@ -1,31 +1,28 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { authClient } from "../../lib/auth";
 import { userStore } from "../../lib/userStore";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert";
 
 export default function Page() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
   const router = useRouter();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
 
+    setError("");
     try {
       const { data, error } = await authClient.signIn.username({
         username,
@@ -37,22 +34,23 @@ export default function Page() {
         });
         router.push("/");
       }
+
+      if (error) {
+        setError(error.message);
+      }
     } catch (error) {
-      console.error("Login error:", error);
-      alert("Failed to login. Please try again.");
+      setError(String(error));
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className={cn("flex flex-col gap-6 items-center")}>
-      <Card className="w-[500px]">
+    <Card className="w-full max-w-sm">
       <CardHeader>
-          <CardTitle className="text-2xl">Login</CardTitle>
-          <CardDescription>
-            Enter your email below to login to your account
-          </CardDescription>
+        <CardTitle className="text-2xl flex justify-center">
+          Welcome back!
+        </CardTitle>
       </CardHeader>
       <CardContent>
         <form onSubmit={handleSubmit}>
@@ -81,6 +79,7 @@ export default function Page() {
               <Input
                 id="password"
                 type="password"
+                placeholder="password"
                 required
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
@@ -89,10 +88,16 @@ export default function Page() {
             <Button type="submit" className="w-full" disabled={isLoading}>
               {isLoading ? "Logging in..." : "Login"}
             </Button>
+            {error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error Logging In</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
           </div>
         </form>
       </CardContent>
     </Card>
-    </div>
   );
 }

server/src/lib/auth.ts

@@ -29,8 +29,6 @@ export const initAuth = (allowList: string[]) => {
       defaultCookieAttributes: {
         sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
         path: "/",
-        // httpOnly: true is default
-        // secure: false (implied by useSecureCookies false)
       },
     },
   });