Add login page with credentials and Google sign-in (task 10.1)

Create src/app/(public)/login/page.tsx as a client component matching
the Lovable design: email/password form calling signIn("credentials"),
"Continue with Google" button calling signIn("google"), and a link to
the register page.

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

openspec/changes/user-accounts/tasks.md

@@ -56,7 +56,7 @@
 
 ## 10. Login Page
 
-- [ ] 10.1 `[sonnet]` Create `src/app/(public)/login/page.tsx` — login form matching Lovable design: email/password inputs, "Sign In" button calling `signIn("credentials")`, "Continue with Google" button calling `signIn("google")`
+- [x] 10.1 `[sonnet]` Create `src/app/(public)/login/page.tsx` — login form matching Lovable design: email/password inputs, "Sign In" button calling `signIn("credentials")`, "Continue with Google" button calling `signIn("google")`
 - [ ] 10.2 `[haiku]` Add error state display for invalid credentials
 - [ ] 10.3 `[haiku]` Add "Forgot password?" link (shows toast: "Not yet available"), "Sign up" link to `/register`
 

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

@@ -0,0 +1,132 @@
+"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";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setIsLoading(true);
+    try {
+      await signIn("credentials", {
+        email,
+        password,
+        redirectTo: "/app",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleGoogleSignIn() {
+    await signIn("google", { redirectTo: "/app" });
+  }
+
+  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>
+
+      {/* Login 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">Welcome back</CardTitle>
+            <CardDescription className="text-xs">
+              Sign in to your workspace
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <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
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="font-mono text-sm"
+                />
+              </div>
+              <Button
+                type="submit"
+                className="w-full font-mono text-sm"
+                disabled={isLoading}
+              >
+                {isLoading ? "Signing in…" : "Sign In"}
+              </Button>
+            </form>
+
+            <div className="relative my-4">
+              <div className="absolute inset-0 flex items-center">
+                <span className="w-full border-t border-border" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-card px-2 text-muted-foreground font-mono">
+                  or
+                </span>
+              </div>
+            </div>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full font-mono text-sm"
+              onClick={handleGoogleSignIn}
+            >
+              Continue with Google
+            </Button>
+
+            <p className="text-center text-xs text-muted-foreground mt-4">
+              Don&apos;t have an account?{" "}
+              <Link
+                href="/register"
+                className="text-primary hover:underline font-medium"
+              >
+                Sign up
+              </Link>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}