From 516e26f5ca72f2db724fd68584663c0732c77f77 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sat, 6 Dec 2025 18:38:57 +0900 Subject: feat(client): implement Login page with form validation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add login form with username/password fields, error handling, and automatic redirect when already authenticated. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/client/App.test.tsx | 2 +- src/client/pages/LoginPage.test.tsx | 171 ++++++++++++++++++++++++++++++++++++ src/client/pages/LoginPage.tsx | 76 +++++++++++++++- 3 files changed, 247 insertions(+), 2 deletions(-) create mode 100644 src/client/pages/LoginPage.test.tsx (limited to 'src/client') diff --git a/src/client/App.test.tsx b/src/client/App.test.tsx index 4a7af14..f4e3541 100644 --- a/src/client/App.test.tsx +++ b/src/client/App.test.tsx @@ -5,8 +5,8 @@ import { cleanup, render, screen } from "@testing-library/react"; 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 { apiClient } from "./api/client"; import { AuthProvider } from "./stores"; vi.mock("./api/client", () => ({ diff --git a/src/client/pages/LoginPage.test.tsx b/src/client/pages/LoginPage.test.tsx new file mode 100644 index 0000000..03cd2f7 --- /dev/null +++ b/src/client/pages/LoginPage.test.tsx @@ -0,0 +1,171 @@ +/** + * @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 { LoginPage } from "./LoginPage"; + +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 = "/login") { + const { hook } = memoryLocation({ path }); + return render( + + + + + , + ); +} + +describe("LoginPage", () => { + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(apiClient.getTokens).mockReturnValue(null); + vi.mocked(apiClient.isAuthenticated).mockReturnValue(false); + }); + + afterEach(() => { + cleanup(); + vi.restoreAllMocks(); + }); + + it("renders login form", async () => { + renderWithProviders(); + + expect(screen.getByRole("heading", { name: "Login" })).toBeDefined(); + expect(screen.getByLabelText("Username")).toBeDefined(); + expect(screen.getByLabelText("Password")).toBeDefined(); + expect(screen.getByRole("button", { name: "Login" })).toBeDefined(); + expect(screen.getByRole("link", { name: "Register" })).toBeDefined(); + }); + + it("submits form and logs in successfully", async () => { + const user = userEvent.setup(); + const mockUser = { id: "user-1", username: "testuser" }; + 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.click(screen.getByRole("button", { name: "Login" })); + + await waitFor(() => { + expect(apiClient.login).toHaveBeenCalledWith("testuser", "password123"); + }); + }); + + it("displays error on login failure", async () => { + const user = userEvent.setup(); + const { ApiClientError } = await import("../api/client"); + vi.mocked(apiClient.login).mockRejectedValue( + new ApiClientError("Invalid credentials", 401), + ); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "wrongpassword"); + await user.click(screen.getByRole("button", { name: "Login" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toBe("Invalid credentials"); + }); + }); + + it("displays generic error on unexpected failure", async () => { + const user = userEvent.setup(); + vi.mocked(apiClient.login).mockRejectedValue(new Error("Network error")); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.click(screen.getByRole("button", { name: "Login" })); + + await waitFor(() => { + expect(screen.getByRole("alert").textContent).toBe( + "Login failed. Please try again.", + ); + }); + }); + + it("disables form while submitting", async () => { + const user = userEvent.setup(); + vi.mocked(apiClient.login).mockImplementation( + () => new Promise(() => {}), // Never resolves + ); + + renderWithProviders(); + + await user.type(screen.getByLabelText("Username"), "testuser"); + await user.type(screen.getByLabelText("Password"), "password123"); + await user.click(screen.getByRole("button", { name: "Login" })); + + await waitFor(() => { + const button = screen.getByRole("button", { name: "Logging in..." }); + expect(button.hasAttribute("disabled")).toBe(true); + }); + expect( + (screen.getByLabelText("Username") as HTMLInputElement).disabled, + ).toBe(true); + expect( + (screen.getByLabelText("Password") as HTMLInputElement).disabled, + ).toBe(true); + }); + + it("redirects 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: "/login" }); + 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/LoginPage.tsx b/src/client/pages/LoginPage.tsx index 459e2ce..f72a6da 100644 --- a/src/client/pages/LoginPage.tsx +++ b/src/client/pages/LoginPage.tsx @@ -1,8 +1,82 @@ +import { type FormEvent, useEffect, useState } from "react"; +import { Link, useLocation } from "wouter"; +import { ApiClientError, useAuth } from "../stores"; + export function LoginPage() { + const [, navigate] = useLocation(); + const { login, isAuthenticated } = useAuth(); + const [username, setUsername] = useState(""); + const [password, setPassword] = 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); + + setIsSubmitting(true); + + try { + await login(username, password); + navigate("/", { replace: true }); + } catch (err) { + if (err instanceof ApiClientError) { + setError(err.message); + } else { + setError("Login failed. Please try again."); + } + } finally { + setIsSubmitting(false); + } + }; + return (

Login

-

Login page coming soon

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

+ Don't have an account? Register +

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