# Phase 14: Auth Pages - Context

**Gathered:** 2026-05-16
**Status:** Ready for planning

<domain>
## Phase Boundary

Phase 14 restyles the `/login` and `/signup` pages to match the JS app's auth-card layout. The work is:
1. Create a dedicated `AuthLayout` template (replacing `Layout` usage in auth pages) with a gradient background and no navigation header
2. Port the `AnimatedBackground` component (35 logo elements + CSS keyframe animations) from go-backend
3. Copy logo asset files (`logo_dark.png`, `logo_white.png`) from `go-backend/static/` into `backend/static/`
4. Port the auth card CSS shell and Material Design Google sign-in button CSS from `go-backend/static/styles.css` into `backend/internal/web/ui/auth.css`
5. Update `LoginPage` and `SignupPage` to use `AuthLayout` and the new auth card structure
6. Migrate raw `<input>` elements in both auth forms to `@ui.Input(ui.InputProps{...})`
7. Add cross-page navigation links ("Don't have an account? Sign up" / "Already have an account? Sign in")

Phase 14 does NOT restyle the dashboard, sidebar, tablo list, or any other page — those are Phases 15–17.

</domain>

<decisions>
## Implementation Decisions

### Auth Layout
- **D-L01:** Create `backend/templates/auth_layout.templ` as a standalone HTML shell — gradient background, no header/footer, centered content. `LoginPage` and `SignupPage` switch from `@Layout(...)` to `@AuthLayout(...)`.
- **D-L02:** `AuthLayout` background uses a CSS gradient built from design tokens (e.g., `--color-brand-primary` / `--color-surface-page-tint` from `base.css`). No image background.
- **D-L03:** `AuthLayout` takes the same `csrfToken string` param as `Layout` (needed for the CSRF field in forms). No `user *auth.User` param — auth pages are always unauthenticated.

### Animated Background
- **D-AB01:** Port the full `AnimatedBackground` templ component from `go-backend/internal/web/views/auth_components.templ` — all 35 logo elements with their `background-logo bg-NN animate-*` classes.
- **D-AB02:** Copy `logo_dark.png` and `logo_white.png` from `go-backend/static/` into `backend/static/` as part of Phase 14.
- **D-AB03:** Port all CSS animation keyframes and `.background-logo` positioning rules from `go-backend/static/styles.css` into `backend/internal/web/ui/auth.css`. Do not import `go-backend/static/styles.css` directly — extract only the auth-relevant rules.
- **D-AB04:** `AnimatedBackground` lives in `backend/templates/` (not in `backend/internal/web/ui/`) since it references static assets and is page-level, not a reusable UI primitive.

### Auth Card Shell
- **D-AC01:** Port `.auth-card-shell`, `.auth-card-topbar`, `.title-group`, `.auth-body` CSS from `go-backend/static/styles.css` into `backend/internal/web/ui/auth.css` (replacing existing minimal auth.css).
- **D-AC02:** The auth card shows the brand logo (`<img src="/static/logo_dark.png">`) above the form title. Use the same structure as go-backend's `title-group`.
- **D-AC03:** `--shadow-auth-card: 0 20px 45px rgba(0, 0, 0, 0.1)` is already defined in `base.css` — the card shell CSS uses this token directly.

### Google Sign-in Button
- **D-G01:** Port `.gsi-material-button` and all its sub-class CSS rules from `go-backend/static/styles.css` into `backend/internal/web/ui/auth.css`.
- **D-G02:** The `GoogleButton` templ (SVG icon + "Continuer avec Google" text) is already rendered via `AuthProviderButtonControl` → `<a class="auth-provider-button" ...>`. In Phase 14, update the class to `gsi-material-button` and add the icon + content wrapper structure matching go-backend's `GoogleButton` templ exactly.
- **D-G03:** Button label: use "Sign in with Google" (English, matching backend convention) rather than the French label in go-backend.

### Form Inputs
- **D-FI01:** Replace raw `<input type="email">` and `<input type="password">` in `LoginFormFragment` and `SignupFormFragment` with `@ui.Input(ui.InputProps{...})`. Pass `ID`, `Name`, `Type`, `Placeholder`, `Value`, `Required`, `Autocomplete` fields.
- **D-FI02:** Form labels use the `@ui.FormField(ui.FormFieldProps{...})` wrapper to get consistent label + input + error layout.
- **D-FI03:** Error display (`@FieldError(errs.Email)`) is preserved — wire errors through `FormFieldProps.Error`.

### Navigation Links
- **D-NL01:** Add "Don't have an account? Sign up →" link below the login form (pointing to `/signup`).
- **D-NL02:** Add "Already have an account? Sign in →" link below the signup form (pointing to `/login`).
- **D-NL03:** Style matches go-backend's `.signup-copy` / `.signup-link` pattern — small text, brand-colored link. Port these CSS rules into `auth.css`.

### Claude's Discretion
- Exact gradient values for `AuthLayout` background (use `--color-brand-primary` and related tokens as anchors; exact stops are Claude's call)
- Order of elements within the auth card (logo → title → Google button → divider → form → nav link, following go-backend structure)
- Whether `AnimatedBackground` is its own templ component called from `AuthLayout`, or inlined — prefer a separate component for readability

</decisions>

<canonical_refs>
## Canonical References

**Downstream agents MUST read these before planning or implementing.**

### Product Scope
- `.planning/ROADMAP.md` — Phase 14 goal, success criteria (5 criteria), and requirements AUTH-UI-01..03
- `.planning/REQUIREMENTS.md` — AUTH-UI-01 (login layout), AUTH-UI-02 (signup layout), AUTH-UI-03 (Google button)
- `.planning/PROJECT.md` — v3.0 scope: visual polish only, go-backend is the visual reference

### Reference Implementation (source of truth)
- `go-backend/internal/web/views/auth_components.templ` — `AnimatedBackground` (35 elements), `AuthScreen`, `GoogleButton`, `AuthDivider`, `AuthScreenFooter` — port structure from here
- `go-backend/static/styles.css` — ALL auth CSS: `.auth-card-shell`, `.auth-card-topbar`, `.title-group`, `.auth-body`, `.background-logo`, all `animate-*` keyframes, `.gsi-material-button`, `.signup-copy`, `.signup-link` — extract auth-relevant sections only
- `go-backend/static/logo_dark.png` — logo asset to copy into `backend/static/`
- `go-backend/static/logo_white.png` — logo asset to copy into `backend/static/`

### Current Backend (files being changed)
- `backend/templates/auth_login.templ` — current login page; being refactored to use AuthLayout + ui.Input + ui.FormField
- `backend/templates/auth_signup.templ` — current signup page; same refactor
- `backend/templates/layout.templ` — NOT changed; auth pages will stop calling @Layout()
- `backend/internal/web/ui/auth.css` — current minimal auth CSS; being replaced with full auth card + animation CSS
- `backend/tailwind.input.css` — may need auth.css re-import if auth.css path changes

### Design System (Phase 13 output — use these components)
- `backend/internal/web/ui/input.templ` — `@ui.Input(ui.InputProps{...})` for form fields
- `backend/internal/web/ui/form_field.templ` — `@ui.FormField(ui.FormFieldProps{...})` for label + input + error
- `backend/internal/web/ui/button.templ` — `@ui.Button(...)` for submit button (already used)
- `backend/internal/web/ui/base.css` — token reference: `--color-brand-primary`, `--shadow-auth-card`, `--color-surface-page-tint`, `--color-focus-ring`

</canonical_refs>

<code_context>
## Existing Code Insights

### Reusable Assets
- `@ui.Input(ui.InputProps{})` — ready to use; replaces raw `<input>` in auth forms. Supports `ID`, `Name`, `Type`, `Placeholder`, `Value`, `Required`, `Autocomplete` fields.
- `@ui.FormField(ui.FormFieldProps{})` — wraps label + input + error; replaces the current manual `<div><label>...<input>...@FieldError</div>` pattern.
- `@ui.Button(ui.ButtonProps{})` — already used for submit buttons; keep as-is.
- `ui.CSRFField(csrfToken)` — must be preserved in both forms.
- `@GeneralError(errs.General)` — keep at top of forms for general error display.

### Established Patterns
- `AuthProviderButtonsBlock` / `AuthProviderButtonControl` — existing templ components for the Google button block; the CSS class and internal structure need updating to `gsi-material-button`, but the Go-level props and handler logic stay the same.
- HTMX swap pattern: `hx-post="/login" hx-target="#login-form" hx-swap="outerHTML"` — preserve exactly; Phase 14 is visual only, no HTMX behavior changes.
- `@FieldError(errs.X)` — existing error display helper; wire through FormField's Error field rather than calling directly.

### Integration Points
- `AuthLayout` needs to import `tailwind.css` and `htmx.min.js` (same as `Layout`) — auth pages are HTMX-driven.
- `AnimatedBackground` references `/static/logo_dark.png` — the file must exist in `backend/static/` before the template compiles and renders.
- `auth.css` is already imported in `backend/tailwind.input.css`; path stays the same so no import change needed.
- Handler code in `backend/internal/web/handlers_auth.go` (or equivalent) calls `templates.LoginPage(...)` and `templates.SignupPage(...)` — signatures must remain compatible. `AuthLayout` is an internal template detail; handlers don't change.

</code_context>

<specifics>
## Specific Ideas

- Animated background: exactly 35 logo elements as in go-backend's `AnimatedBackground` — no pruning. The dancing logo icons are the intended visual effect.
- Google button: uses the full `gsi-material-button` structure (state layer + content wrapper + icon SVG + text span) matching go-backend's `GoogleButton` templ, not the simpler link-styled button currently in use.
- Cross-page links: "Don't have an account? Sign up" on login; "Already have an account? Sign in" on signup. Positioned below the form, centered, small text with brand-colored link.
- Auth card: logo image above heading (same as go-backend `title-group`), not just text.

</specifics>

<deferred>
## Deferred Ideas

- Dark mode logo swap (`light-only` / `dark-only` classes from go-backend) — go-backend shows `logo_dark.png` for light and `logo_white.png` for dark. Dark mode is a Future requirement (DARK-01). Phase 14 uses `logo_dark.png` only.
- "Forgot password?" link — go-backend login form has a reset-password row. No password reset flow exists in backend yet; defer to a future phase.
- Responsive/mobile layout for auth pages — Future requirement (RESP-01..03).

</deferred>

---

*Phase: 14-Auth Pages*
*Context gathered: 2026-05-16*
