From a2569837aa07ef48f27884fc2869b5be47087a4e Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 6 Dec 2025 18:36:10 +0900
Subject: feat(client): implement Register page with form validation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add functional registration form with:
- Username and password fields with confirm password
- Client-side validation (password match, minimum length)
- Error display for API failures
- Redirect to home when already authenticated
- Loading state during submission

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/client/pages/RegisterPage.tsx | 99 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 98 insertions(+), 1 deletion(-)

(limited to 'src/client/pages/RegisterPage.tsx')

diff --git a/src/client/pages/RegisterPage.tsx b/src/client/pages/RegisterPage.tsx
index a7fbb59..e6783bd 100644
--- a/src/client/pages/RegisterPage.tsx
+++ b/src/client/pages/RegisterPage.tsx
@@ -1,8 +1,105 @@
+import { type FormEvent, useEffect, useState } from "react";
+import { Link, useLocation } from "wouter";
+import { ApiClientError, useAuth } from "../stores";
+
 export function RegisterPage() {
+	const [, navigate] = useLocation();
+	const { register, isAuthenticated } = useAuth();
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	// Redirect if already authenticated
+	useEffect(() => {
+		if (isAuthenticated) {
+			navigate("/", { replace: true });
+		}
+	}, [isAuthenticated, navigate]);
+
+	const handleSubmit = async (e: FormEvent) => {
+		e.preventDefault();
+		setError(null);
+
+		if (password !== confirmPassword) {
+			setError("Passwords do not match");
+			return;
+		}
+
+		if (password.length < 8) {
+			setError("Password must be at least 8 characters");
+			return;
+		}
+
+		setIsSubmitting(true);
+
+		try {
+			await register(username, password);
+			navigate("/", { replace: true });
+		} catch (err) {
+			if (err instanceof ApiClientError) {
+				setError(err.message);
+			} else {
+				setError("Registration failed. Please try again.");
+			}
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
 	return (
 		<div>
 			<h1>Register</h1>
-			<p>Registration page coming soon</p>
+			<form onSubmit={handleSubmit}>
+				{error && (
+					<div role="alert" style={{ color: "red" }}>
+						{error}
+					</div>
+				)}
+				<div>
+					<label htmlFor="username">Username</label>
+					<input
+						id="username"
+						type="text"
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
+						required
+						autoComplete="username"
+						disabled={isSubmitting}
+					/>
+				</div>
+				<div>
+					<label htmlFor="password">Password</label>
+					<input
+						id="password"
+						type="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						required
+						autoComplete="new-password"
+						disabled={isSubmitting}
+					/>
+				</div>
+				<div>
+					<label htmlFor="confirmPassword">Confirm Password</label>
+					<input
+						id="confirmPassword"
+						type="password"
+						value={confirmPassword}
+						onChange={(e) => setConfirmPassword(e.target.value)}
+						required
+						autoComplete="new-password"
+						disabled={isSubmitting}
+					/>
+				</div>
+				<button type="submit" disabled={isSubmitting}>
+					{isSubmitting ? "Registering..." : "Register"}
+				</button>
+			</form>
+			<p>
+				Already have an account? <Link href="/login">Login</Link>
+			</p>
 		</div>
 	);
 }
-- 
cgit v1.2.3-70-g09d2