Add register page (task 11.1): name/email/password form with POST to /api/auth/register and auto sign-in

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

openspec/changes/user-accounts/tasks.md

@@ -62,7 +62,7 @@
 
 ## 11. Register Page
 
-- [ ] 11.1 `[sonnet]` Create `src/app/(public)/register/page.tsx` — register form matching Lovable design: name/email/password inputs, "Create Account" button posting to `/api/auth/register` then auto-signing in
+- [x] 11.1 `[sonnet]` Create `src/app/(public)/register/page.tsx` — register form matching Lovable design: name/email/password inputs, "Create Account" button posting to `/api/auth/register` then auto-signing in
 - [ ] 11.2 `[haiku]` Add error state display for duplicate email, short password
 - [ ] 11.3 `[haiku]` Add "Continue with Google" button, "Sign in" link to `/login`
 

src/app/(public)/register/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { signIn } from "next-auth/react";
+import { ChartColumn } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { AlertCircle } from "lucide-react";
+
+export default function RegisterPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+    try {
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error ?? "Registration failed. Please try again.");
+        return;
+      }
+
+      // Auto sign-in after successful registration
+      await signIn("credentials", { email, password, redirectTo: "/app" });
+    } catch {
+      setError("An error occurred. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Navbar */}
+      <nav className="border-b border-border bg-card/50 backdrop-blur-sm">
+        <div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
+          <Link
+            href="/"
+            className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ChartColumn className="w-5 h-5 text-primary" />
+            <span className="font-mono font-bold text-sm">CandleAnnotator</span>
+          </Link>
+        </div>
+      </nav>
+
+      {/* Register Form */}
+      <div className="flex-1 flex items-center justify-center px-6 py-12">
+        <Card className="w-full max-w-sm">
+          <CardHeader className="text-center">
+            <CardTitle className="text-xl font-bold">Create account</CardTitle>
+            <CardDescription className="text-xs">
+              Start annotating charts in seconds
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {error && (
+              <div className="mb-4 flex gap-3 rounded-md bg-destructive/10 p-3 border border-destructive/20">
+                <AlertCircle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
+                <p className="text-sm text-destructive font-mono">{error}</p>
+              </div>
+            )}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name" className="text-xs font-mono">
+                  Name
+                </Label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="Jane Doe"
+                  required
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="font-mono text-sm"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email" className="text-xs font-mono">
+                  Email
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="font-mono text-sm"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password" className="text-xs font-mono">
+                  Password
+                </Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  required
+                  minLength={8}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="font-mono text-sm"
+                />
+                <p className="text-[10px] text-muted-foreground">Minimum 8 characters</p>
+              </div>
+              <Button
+                type="submit"
+                className="w-full font-mono text-sm"
+                disabled={isLoading}
+              >
+                {isLoading ? "Creating account…" : "Create Account"}
+              </Button>
+            </form>
+
+            <p className="text-center text-xs text-muted-foreground mt-4">
+              Already have an account?{" "}
+              <Link
+                href="/login"
+                className="text-primary hover:underline font-medium"
+              >
+                Sign in
+              </Link>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}