first commit

frontend/src/components/LoginPage.jsx

@@ -0,0 +1,46 @@
+import { ArrowRight, LockKeyhole, Mail } from "lucide-react";
+import { useState } from "react";
+import { login } from "../api";
+import AuthLayout from "./AuthLayout";
+
+export default function LoginPage() {
+  const [status, setStatus] = useState({ loading: false, error: "" });
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    setStatus({ loading: true, error: "" });
+    const form = new FormData(event.currentTarget);
+    try {
+      const result = await login({
+        email: form.get("email"),
+        password: form.get("password"),
+      });
+      sessionStorage.setItem("agmail_access_token", result.access_token);
+      sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
+      window.location.assign("/app");
+    } catch (error) {
+      setStatus({ loading: false, error: error.message });
+    }
+  }
+
+  return (
+    <AuthLayout
+      eyebrow="Welcome back"
+      title={<>Your inbox<br /><em>missed you.</em></>}
+      description="Sign in to continue working alongside your agents."
+    >
+      <>
+          <div className="card-heading"><h2>Log in to agmail</h2><p>Enter your account details below.</p></div>
+          <form className="auth-form" onSubmit={handleSubmit}>
+            <label>Email address<div className="input-wrap"><Mail size={16} /><input name="email" type="email" placeholder="you@getall.help" required autoComplete="email" /></div></label>
+            <label>Password<div className="input-wrap"><LockKeyhole size={16} /><input name="password" type="password" placeholder="Your password" required autoComplete="current-password" /></div></label>
+            {status.error && <p className="form-error" role="alert">{status.error}</p>}
+            <button className="button button-coral auth-submit" disabled={status.loading}>
+              {status.loading ? "Signing in…" : "Log in"} <ArrowRight size={16} />
+            </button>
+          </form>
+          <p className="auth-switch">New to agmail? <a href="/signup">Create an account</a></p>
+      </>
+    </AuthLayout>
+  );
+}