# 04 — Login

## 1. High-Level Overview

**Purpose**: The single public route `/login`. Renders the credential form and triggers `useAuth().login(...)`.

**Architectural Pattern**: Single-page feature module with one entry component.

**Upstream dependencies**: `02_auth` (`useAuth().login`).

**Downstream consumers**: `10_app-shell` (routed at `/login`).

## 2. Internal Interfaces

| Export | Notes |
|--------|-------|
| `LoginPage()` | Form: username + password + submit. Calls `useAuth().login({ username, password })` and on success navigates to `/flights`. Error state shown inline. |

## 5. Implementation Details

- "Theatrical" unlock animation (`runUnlockSequence`, 4 × 600 ms) plays on success before navigation. Documented in Step 5 solution.md as a UX choice, not a bug.
- No "remember me" / persistent-session toggle.
- No SSO integration.
- No password-strength feedback or recovery link.

**State Management**: Local component state only.

**Key Dependencies**: `react-router-dom` (`useNavigate`), `react-i18next`.

## 7. Caveats & Edge Cases

- **2.4 s artificial delay** post-login (Step 5 doc note).
- **No CSRF token** in the login POST body — server is expected to validate the same-site cookie pattern; document in `security_approach.md` (Step 6).
- **No rate-limit feedback** — server returns `429` with no specific UI handling beyond a generic `alert`.

## 8. Dependency Graph

**Must be implemented after**: `02_auth`.

**Can be implemented in parallel with**: every feature page (`05_flights` … `09_settings`).

**Blocks**: nothing.

## Module Inventory

| Path | Module Doc |
|------|------------|
| `src/features/login/LoginPage.tsx` | `_docs/02_document/modules/src__features__login__LoginPage.md` |