From a2569837aa07ef48f27884fc2869b5be47087a4e Mon Sep 17 00:00:00 2001 From: nsfisis 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 --- src/client/App.test.tsx | 35 +++++- src/client/pages/RegisterPage.test.tsx | 198 +++++++++++++++++++++++++++++++++ src/client/pages/RegisterPage.tsx | 99 ++++++++++++++++- 3 files changed, 329 insertions(+), 3 deletions(-) create mode 100644 src/client/pages/RegisterPage.test.tsx (limited to 'src/client') diff --git a/src/client/App.test.tsx b/src/client/App.test.tsx index cd448bf..4a7af14 100644 --- a/src/client/App.test.tsx +++ b/src/client/App.test.tsx @@ -2,22 +2,53 @@ * @vitest-environment jsdom */ import { cleanup, render, screen } from "@testing-library/react"; -import { afterEach, describe, expect, it } from "vitest"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { Router } from "wouter"; import { memoryLocation } from "wouter/memory-location"; +import { apiClient } from "./api/client"; import { App } from "./App"; +import { AuthProvider } from "./stores"; + +vi.mock("./api/client", () => ({ + apiClient: { + login: vi.fn(), + register: vi.fn(), + logout: vi.fn(), + isAuthenticated: vi.fn(), + getTokens: vi.fn(), + }, + ApiClientError: class ApiClientError extends Error { + constructor( + message: string, + public status: number, + public code?: string, + ) { + super(message); + this.name = "ApiClientError"; + } + }, +})); function renderWithRouter(path: string) { const { hook } = memoryLocation({ path, static: true }); return render( - + + + , ); } +beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(apiClient.getTokens).mockReturnValue(null); + vi.mocked(apiClient.isAuthenticated).mockReturnValue(false); +}); + afterEach(() => { cleanup(); + vi.restoreAllMocks(); }); describe("App routing", () => { diff --git a/src/client/pages/RegisterPage.test.tsx b/src/client/pages/RegisterPage.test.tsx new file mode 100644 index 0000000..adce8f0 --- /dev/null +++ b/src/client/pages/RegisterPage.test.tsx @@ -0,0 +1,198 @@ +/** + * @vitest-environment jsdom + */ +import { cleanup, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { Router } from "wouter"; +import { memoryLocation } from "wouter/memory-location"; +import { apiClient } from "../api/client"; +import { AuthProvider } from "../stores"; +import { RegisterPage } from "./RegisterPage"; + +vi.mock("../api/client", () => ({ + apiClient: { + login: vi.fn(), + register: vi.fn(), + logout: vi.fn(), + isAuthenticated: vi.fn(), + getTokens: vi.fn(), + }, + ApiClientError: class ApiClientError extends Error { + constructor( + message: string, + public status: number, + public code?: string, + ) { + super(message); + this.name = "ApiClientError"; + } + }, +})); + +function renderWithProviders(path = "/register") { + const { hook } = memoryLocation({ path }); + return render( + + + + + , + ); +} + +describe("RegisterPage", () => { + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(apiClient.getTokens).mockReturnValue(null); + vi.mocked(apiClient.isAuthenticated).mockReturnValue(false); + }); + + afterEach(() => { + cleanup(); + vi.restoreAllMocks(); + }); + + it("renders register form", async () => { + renderWithProviders(); + + expect(screen.getByRole("heading", { name: "Register" })).toBeDefined(); + expect(screen.getByLabelText("Username")).toBeDefined(); + expect(screen.getByLabelText("Password")).toBeDefined(); + expect(screen.getByLabelText("Confirm Password")).toBeDefined(); + expect(screen.getByRole("button", { name: "Register" })).toBeDefined(); + expect(screen.getByRole("link", { name: "Login" })).toBeDefined(); + }); + + it("validates password match", async () => { + const user = userEvent.setup(); + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.type(screen.getByLabelText("Confirm Password"), "differentpass"); + await user.click(screen.getByRole("button", { name: "Register" })); + + expect(screen.getByRole("alert").textContent).toBe( + "Passwords do not match", + ); + expect(apiClient.register).not.toHaveBeenCalled(); + }); + + it("validates password length", async () => { + const user = userEvent.setup(); + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "short"); + await user.type(screen.getByLabelText("Confirm Password"), "short"); + await user.click(screen.getByRole("button", { name: "Register" })); + + expect(screen.getByRole("alert").textContent).toBe( + "Password must be at least 8 characters", + ); + expect(apiClient.register).not.toHaveBeenCalled(); + }); + + it("submits form and registers successfully", async () => { + const user = userEvent.setup(); + const mockUser = { id: "user-1", username: "testuser" }; + vi.mocked(apiClient.register).mockResolvedValue({ user: mockUser }); + vi.mocked(apiClient.login).mockResolvedValue({ + accessToken: "access-token", + refreshToken: "refresh-token", + user: mockUser, + }); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.type(screen.getByLabelText("Confirm Password"), "password123"); + await user.click(screen.getByRole("button", { name: "Register" })); + + await waitFor(() => { + expect(apiClient.register).toHaveBeenCalledWith( + "testuser", + "password123", + ); + }); + expect(apiClient.login).toHaveBeenCalledWith("testuser", "password123"); + }); + + it("displays error on registration failure", async () => { + const user = userEvent.setup(); + const { ApiClientError } = await import("../api/client"); + vi.mocked(apiClient.register).mockRejectedValue( + new ApiClientError("Username already taken", 409), + ); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "existinguser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.type(screen.getByLabelText("Confirm Password"), "password123"); + await user.click(screen.getByRole("button", { name: "Register" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toBe( + "Username already taken", + ); + }); + }); + + it("disables form while submitting", async () => { + const user = userEvent.setup(); + vi.mocked(apiClient.register).mockImplementation( + () => new Promise(() => {}), // Never resolves + ); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.type(screen.getByLabelText("Confirm Password"), "password123"); + await user.click(screen.getByRole("button", { name: "Register" })); + + await waitFor(() => { + const button = screen.getByRole("button", { name: "Registering..." }); + expect(button.hasAttribute("disabled")).toBe(true); + }); + expect( + (screen.getByLabelText("Username") as HTMLInputElement).disabled, + ).toBe(true); + expect( + (screen.getByLabelText("Password") as HTMLInputElement).disabled, + ).toBe(true); + expect( + (screen.getByLabelText("Confirm Password") as HTMLInputElement).disabled, + ).toBe(true); + }); + + it("calls navigate when already authenticated", async () => { + vi.mocked(apiClient.isAuthenticated).mockReturnValue(true); + vi.mocked(apiClient.getTokens).mockReturnValue({ + accessToken: "access-token", + refreshToken: "refresh-token", + }); + + const { hook } = memoryLocation({ path: "/register" }); + const navigateSpy = vi.fn(); + const hookWithSpy: typeof hook = () => { + const result = hook(); + return [result[0], navigateSpy]; + }; + + render( + + + + + , + ); + + await waitFor(() => { + expect(navigateSpy).toHaveBeenCalledWith("/", { replace: true }); + }); + }); +}); 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(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 (

Register

-

Registration page coming soon

+
+ {error && ( +
+ {error} +
+ )} +
+ + setUsername(e.target.value)} + required + autoComplete="username" + disabled={isSubmitting} + /> +
+
+ + setPassword(e.target.value)} + required + autoComplete="new-password" + disabled={isSubmitting} + /> +
+
+ + setConfirmPassword(e.target.value)} + required + autoComplete="new-password" + disabled={isSubmitting} + /> +
+ +
+

+ Already have an account? Login +

); } -- cgit v1.2.3-70-g09d2