---
phase: 14-auth-pages
plan: "01"
subsystem: ui
tags: [go, templ, css, htmx, auth, animated-background, google-oauth]

# Dependency graph
requires:
  - phase: 13-design-system-foundation
    provides: auth.css import in tailwind.input.css, ui.Input/ui.FormField components for Plan 02

provides:
  - backend/static/logo_dark.png — brand logo asset at /static/logo_dark.png
  - backend/static/logo_white.png — brand logo asset for future dark mode
  - backend/internal/web/ui/auth.css — full auth CSS: login-screen shell, animated background (bg-01..35, size/opacity utilities), auth card shell and internals, gsi-material-button, legacy auth-provider controls, 66 @keyframes definitions, animate-* utility classes
  - backend/templates/auth_components.templ — AnimatedBackground (35 elements), GoogleButton (a/button variants, English label), AuthDivider ("or")
  - backend/templates/auth_layout.templ — AuthLayout(title, csrfToken) standalone HTML shell with .login-screen wrapper

affects: [14-02-auth-pages-migration, any future phase touching auth page layout]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "Auth page layout: AuthLayout templ (no auth.User param, login-screen wrapper, AnimatedBackground, htmx.min.js only)"
    - "AnimatedBackground: 35 .background-logo elements with aria-hidden='true' parent, single logo_dark.png per element (dark-mode deferred)"
    - "GoogleButton: accepts (href string, configured bool) — <a> when configured, <button disabled> when not"
    - "CSS extraction: auth-only rules extracted from go-backend/static/styles.css, NOT imported — .app-shell excluded"

key-files:
  created:
    - backend/templates/auth_components.templ
    - backend/templates/auth_layout.templ
    - backend/static/logo_dark.png
    - backend/static/logo_white.png
  modified:
    - backend/internal/web/ui/auth.css

key-decisions:
  - "Image path: /static/logo_dark.png (not /logo_dark.png) — backend serves static files under /static/"
  - "Single image per AnimatedBackground element (no light-only/dark-only pairs — dark mode deferred to DARK-01)"
  - "AuthLayout has no auth.User param — auth pages are always unauthenticated per D-L03"
  - "gsi-material-button gains display:block and text-decoration:none for the <a> variant (go-backend uses <button> only)"
  - "English labels throughout: 'Sign in with Google', 'or' (not French from go-backend)"

patterns-established:
  - "AuthLayout pattern: package templates, no backend/internal/auth import, csrfToken threaded for children"
  - "AnimatedBackground: separate component in backend/templates/, called from AuthLayout"
  - "GoogleButton: configured/unconfigured split via bool param preserving existing AuthProviderButtonControl logic"

requirements-completed: [AUTH-UI-01, AUTH-UI-02, AUTH-UI-03]

# Metrics
duration: 4min
completed: 2026-05-16
---

# Phase 14 Plan 01: Auth Assets & Components Summary

**Auth page foundation: logo assets copied, auth.css replaced with 828-line full extraction from go-backend, AnimatedBackground (35 elements) + GoogleButton + AuthDivider + AuthLayout templ components created**

## Performance

- **Duration:** 4 min
- **Started:** 2026-05-16T17:02:56Z
- **Completed:** 2026-05-16T17:07:00Z
- **Tasks:** 2
- **Files modified:** 5 (2 created as binary assets, 1 CSS replaced, 2 new templ files)

## Accomplishments
- Copied logo_dark.png (85 KB) and logo_white.png (4.5 KB) from go-backend/static into backend/static
- Replaced the 62-line auth.css stub with an 828-line full extraction containing all auth card CSS, animated background positioning/sizing/opacity classes, gsi-material-button Material Design styles, 66 @keyframes definitions, and 65 animate-* utility classes
- Created auth_components.templ with AnimatedBackground (exactly 35 background-logo elements using /static/logo_dark.png), GoogleButton (<a> or <button disabled> variants with English labels), and AuthDivider ("or" pill)
- Created auth_layout.templ as a standalone HTML shell (login-screen wrapper, @AnimatedBackground(), card-wrap/card-glow/auth-card-shell, htmx.min.js, no auth.User param)
- `just generate` exits 0; all 8 backend test packages pass unchanged

## Task Commits

1. **Task 1: Copy logo assets and replace auth.css** - `cf116ff` (feat)
2. **Task 2: Create auth_components.templ and auth_layout.templ** - `e4d5f96` (feat)

**Plan metadata:** `[see final commit below]` (docs: complete plan)

## Files Created/Modified
- `backend/static/logo_dark.png` — Brand logo binary asset (85 KB), served at /static/logo_dark.png
- `backend/static/logo_white.png` — Brand logo binary asset (4.5 KB), reserved for dark mode
- `backend/internal/web/ui/auth.css` — Full auth CSS extraction: .login-screen, .background-layer/.background-logo/bg-01..35/size-06..20/opacity-02..05, .card-wrap/.card-glow/.auth-card-shell, card internals, .gsi-material-button, legacy auth-provider controls, 66 @keyframes, 65 .animate-* utilities
- `backend/templates/auth_components.templ` — AnimatedBackground (35 elements), GoogleButton (href+configured params, English label), AuthDivider ("or")
- `backend/templates/auth_layout.templ` — AuthLayout(title, csrfToken) standalone HTML shell

## Decisions Made
- `display: block; text-decoration: none` added to `.gsi-material-button` base rule to support the `<a>` tag variant — go-backend only uses `<button>`, but backend needs both
- Dark-mode logo swap (`light-only`/`dark-only` class pairs from go-backend) intentionally omitted per DEFERRED/DARK-01 — Phase 14 uses logo_dark.png only
- AuthLayout does not embed a CSRF field — the layout threads csrfToken to children; only form fragments embed it via `ui.CSRFField(csrfToken)`

## Deviations from Plan
None - plan executed exactly as written.

## Issues Encountered
None.

## User Setup Required
None - no external service configuration required. All files are static assets and build-time templates.

## Known Stubs
None. This plan delivers foundation assets and components only; no data flows to UI rendering in Plan 01. The AnimatedBackground images are wired to `/static/logo_dark.png` which exists.

## Threat Flags
None. All files are build-time artifacts or static binary assets with no runtime user input.

## Next Phase Readiness
- Plan 02 can now use `@AuthLayout(...)`, `@GoogleButton(...)`, `@AuthDivider()` from the same `templates` package — no import needed
- Plan 02 can switch `auth_login.templ` and `auth_signup.templ` from `@Layout(...)` to `@AuthLayout(...)`
- All auth CSS classes (`.auth-card-shell`, `.login-form`, `.signup-copy`, `.gsi-material-button`, etc.) are available in the compiled tailwind.css
- No blockers.

---
*Phase: 14-auth-pages*
*Completed: 2026-05-16*
