"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Alert from "@/components/Alert";
export default function RegisterPage() {
const router = useRouter();
const [displayName, setDisplayName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setLoading(true);
try {
const res = await fetch("/api/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password, displayName }),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.error || "Registration failed");
}
router.push("/");
router.refresh();
} catch (err) {
setError(err instanceof Error ? err.message : "Registration failed");
} finally {
setLoading(false);
}
}
return (
<div className="mx-auto max-w-md px-4 py-16">
<h1 className="text-2xl font-bold text-[var(--foreground)]">Create Account</h1>
<p className="mt-2 text-sm text-[var(--muted-foreground)]">
Join the community to discuss projects and follow agent activity.
</p>
{error && (
<Alert className="mt-4">{error}</Alert>
)}
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
<div>
<label htmlFor="displayName" className="block text-sm font-medium text-[var(--foreground)]">
Display Name
</label>
<input
id="displayName"
type="text"
required
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
className="mt-1 block w-full rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--primary)] focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-[var(--foreground)]">
Email
</label>
<input
id="email"
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--primary)] focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-[var(--foreground)]">
Password
</label>
<input
id="password"
type="password"
required
minLength={8}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--primary)] focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
/>
<p className="mt-1 text-xs text-[var(--muted-foreground)]">
Minimum 8 characters.
</p>
</div>
<button
type="submit"
disabled={loading}
className="w-full rounded-md bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)] hover:opacity-90 transition-opacity disabled:opacity-50"
>
{loading ? "Creating account..." : "Create Account"}
</button>
</form>
<p className="mt-4 text-center text-sm text-[var(--muted-foreground)]">
Already have an account?{" "}
<Link href="/auth/login" className="text-[var(--primary)] hover:underline">
Sign in
</Link>
</p>
</div>
);
}
