Create page.tsx

src/app/login/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Lock, Mail, Sparkles, AlertCircle } from "lucide-react";
+import { Button } from "@/components/atoms/Button";
+import { Icon } from "@/components/atoms/Icon";
+import { Spinner } from "@/components/atoms/Spinner";
+
+/**
+ * Login Page
+ * Handles JWT authentication with the FastAPI backend.
+ * Optimized for a secure and professional academic entry-point.
+ */
+export default function LoginPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  
+  const [formData, setFormData] = React.useState({
+    username: "", // FastAPI OAuth2 expects 'username' (which is the email)
+    password: "",
+  });
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // 1. Prepare form data for OAuth2 Password Flow
+      const loginData = new URLSearchParams();
+      loginData.append("username", formData.username);
+      loginData.append("password", formData.password);
+
+      const res = await fetch("/api/v1/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: loginData,
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        // 2. Persist the JWT
+        localStorage.setItem("token", data.access_token);
+        // 3. Redirect to the Discovery engine
+        router.push("/explore");
+      } else {
+        const errorData = await res.json();
+        setError(errorData.detail || "Invalid credentials. Please try again.");
+      }
+    } catch (err) {
+      setError("Connection to research server failed.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="w-full max-w-sm space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+        
+        {/* Branding Header */}
+        <div className="flex flex-col items-center text-center space-y-2">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-inner">
+            <Icon icon={Sparkles} size={28} />
+          </div>
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">RM Research Assistant</h1>
+            <p className="text-xs text-muted-foreground font-medium uppercase tracking-widest">
+              Scientific Workspace
+            </p>
+          </div>
+        </div>
+
+        {/* Login Form */}
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div className="space-y-2">
+            <div className="relative">
+              <Icon 
+                icon={Mail} 
+                size={16} 
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" 
+              />
+              <input
+                required
+                type="email"
+                placeholder="Institutional Email"
+                className="w-full rounded-lg border bg-card py-2.5 pl-10 pr-4 text-sm outline-none transition-all focus:ring-2 focus:ring-primary/20"
+                value={formData.username}
+                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="relative">
+              <Icon 
+                icon={Lock} 
+                size={16} 
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" 
+              />
+              <input
+                required
+                type="password"
+                placeholder="Password"
+                className="w-full rounded-lg border bg-card py-2.5 pl-10 pr-4 text-sm outline-none transition-all focus:ring-2 focus:ring-primary/20"
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              />
+            </div>
+          </div>
+
+          {/* Error Display */}
+          {error && (
+            <div className="flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-xs font-medium text-destructive animate-in shake-1">
+              <Icon icon={AlertCircle} size={14} />
+              {error}
+            </div>
+          )}
+
+          <Button 
+            type="submit" 
+            className="w-full py-6 font-bold tracking-wide" 
+            disabled={isLoading}
+          >
+            {isLoading ? <Spinner size={18} /> : "Sign In to Workspace"}
+          </Button>
+        </form>
+
+        {/* Footer Links */}
+        <div className="text-center space-y-4">
+          <p className="text-xs text-muted-foreground">
+            Don't have an account?{" "}
+            <button 
+              onClick={() => router.push("/register")} 
+              className="font-bold text-primary hover:underline"
+            >
+              Request Access
+            </button>
+          </p>
+          <div className="h-px bg-border w-full" />
+          <p className="text-[10px] text-muted-foreground leading-relaxed italic">
+            Secure access for authorized research personnel only. 
+            By signing in, you agree to the scientific data protocols.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}