Update web/src/components/LoginScreen.tsx

web/src/components/LoginScreen.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Card } from './ui/card';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-import type { User } from '../App';
+// web/src/components/LoginScreen.tsx
+import React, { useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Card } from "./ui/card";
+import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
+import type { User } from "../App";
+import { apiLogin } from "../lib/api";
 
 interface LoginScreenProps {
   onLogin: (user: User) => void;
@@ -12,13 +14,37 @@ interface LoginScreenProps {
 
 export function LoginScreen({ onLogin }: LoginScreenProps) {
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const [submitting, setSubmitting] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (name.trim() && email.trim()) {
-      onLogin({ name: name.trim(), email: email.trim() });
+    setErr(null);
+
+    const n = name.trim();
+    const u = email.trim();
+    if (!n || !u) return;
+
+    setSubmitting(true);
+    try {
+      // backend expects: { name, user_id }
+      const resp = await apiLogin({ name: n, user_id: u });
+
+      // api.ts returns { ok: true/false ... }
+      if ((resp as any)?.ok !== true) {
+        const msg = (resp as any)?.error || "Login failed";
+        setErr(msg);
+        return;
+      }
+
+      onLogin({ name: n, email: u });
+    } catch (e: any) {
+      setErr(e?.message || "Login failed");
+    } finally {
+      setSubmitting(false);
     }
   };
 
@@ -26,12 +52,10 @@ export function LoginScreen({ onLogin }: LoginScreenProps) {
     <div className="min-h-screen bg-background flex items-center justify-center p-4">
       <Card className="w-full max-w-md p-8">
         <div className="flex flex-col items-center space-y-6">
-          {/* Clare Avatar */}
           <div className="w-24 h-24 rounded-full overflow-hidden bg-white flex items-center justify-center">
             <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
           </div>
 
-          {/* Welcome Text */}
           <div className="text-center space-y-2">
             <h1 className="text-2xl">Welcome to Clare</h1>
             <p className="text-sm text-muted-foreground">
@@ -40,11 +64,7 @@ export function LoginScreen({ onLogin }: LoginScreenProps) {
           </div>
 
           {!showForm ? (
-            <Button 
-              onClick={() => setShowForm(true)} 
-              className="w-full"
-              size="lg"
-            >
+            <Button onClick={() => setShowForm(true)} className="w-full" size="lg">
               Sign In
             </Button>
           ) : (
@@ -57,8 +77,10 @@ export function LoginScreen({ onLogin }: LoginScreenProps) {
                   onChange={(e) => setName(e.target.value)}
                   placeholder="Enter your name"
                   required
+                  disabled={submitting}
                 />
               </div>
+
               <div className="space-y-2">
                 <Label htmlFor="login-email">Email / Student ID</Label>
                 <Input
@@ -68,16 +90,29 @@ export function LoginScreen({ onLogin }: LoginScreenProps) {
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Enter your email or ID"
                   required
+                  disabled={submitting}
                 />
               </div>
+
+              {err && (
+                <div className="text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md p-2">
+                  {err}
+                </div>
+              )}
+
               <div className="flex gap-2">
-                <Button type="submit" className="flex-1">
-                  Enter
+                <Button type="submit" className="flex-1" disabled={submitting}>
+                  {submitting ? "Signing in..." : "Enter"}
                 </Button>
                 <Button
                   type="button"
                   variant="outline"
-                  onClick={() => setShowForm(false)}
+                  onClick={() => {
+                    if (submitting) return;
+                    setShowForm(false);
+                    setErr(null);
+                  }}
+                  disabled={submitting}
                 >
                   Cancel
                 </Button>