diff --git a/.planning/phases/14-auth-pages/14-CONTEXT.md b/.planning/phases/14-auth-pages/14-CONTEXT.md new file mode 100644 index 0000000..d46a38a --- /dev/null +++ b/.planning/phases/14-auth-pages/14-CONTEXT.md @@ -0,0 +1,139 @@ +# Phase 14: Auth Pages - Context + +**Gathered:** 2026-05-16 +**Status:** Ready for planning + + +## 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 `` 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. + + + + +## 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 (``) 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` → ``. 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 `` and `` 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 + + + + +## 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` + + + + +## Existing Code Insights + +### Reusable Assets +- `@ui.Input(ui.InputProps{})` — ready to use; replaces raw `` in auth forms. Supports `ID`, `Name`, `Type`, `Placeholder`, `Value`, `Required`, `Autocomplete` fields. +- `@ui.FormField(ui.FormFieldProps{})` — wraps label + input + error; replaces the current manual `
` 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. + + + + +## 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. + + + + +## 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). + + + +--- + +*Phase: 14-Auth Pages* +*Context gathered: 2026-05-16* diff --git a/.planning/phases/14-auth-pages/14-DISCUSSION-LOG.md b/.planning/phases/14-auth-pages/14-DISCUSSION-LOG.md new file mode 100644 index 0000000..cc613d3 --- /dev/null +++ b/.planning/phases/14-auth-pages/14-DISCUSSION-LOG.md @@ -0,0 +1,83 @@ +# Phase 14: Auth Pages - Discussion Log + +> **Audit trail only.** Do not use as input to planning, research, or execution agents. +> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered. + +**Date:** 2026-05-16 +**Phase:** 14-auth-pages +**Areas discussed:** Auth layout structure, Animated background, Form inputs migration + +--- + +## Auth layout structure + +| Option | Description | Selected | +|--------|-------------|----------| +| New AuthLayout template | Create backend/templates/auth_layout.templ — standalone HTML shell with gradient background, no header/footer | ✓ | +| Modify Layout with auth mode flag | Add bool param to Layout that conditionally hides header and changes background | | +| Inline layout in each auth page | LoginPage and SignupPage each emit their own shell | | + +**User's choice:** New AuthLayout template + +| Option | Description | Selected | +|--------|-------------|----------| +| Gradient using design tokens | CSS gradient built from --color-brand-primary and token palette | ✓ | +| Solid brand color | Single flat color from --color-brand-primary | | +| You decide | Claude picks a gradient | | + +**User's choice:** Gradient using design tokens + +**Notes:** While answering the "more questions or next area" prompt, user described the animated background directly: "the animated background has many icons of xtablo that dance behind the form" — confirmed the go-backend AnimatedBackground is the intended reference. + +--- + +## Animated background + +| Option | Description | Selected | +|--------|-------------|----------| +| Port all 35 elements exactly | Copy full AnimatedBackground templ + all CSS animation keyframes from go-backend. Needs logo_dark.png in backend/static/ | ✓ | +| Simplified version — fewer elements | Port structure but reduce to ~10 elements | | +| CSS-only, no image | Use branded shapes with token colors instead of logo images | | + +**User's choice:** Port all 35 elements exactly + +| Option | Description | Selected | +|--------|-------------|----------| +| Copy from go-backend/static/ | go-backend already has logo_dark.png and logo_white.png — copy into backend/static/ | ✓ | +| I'll provide the files separately | Phase 14 adds placeholder reference; files dropped in manually | | + +**User's choice:** Copy from go-backend/static/ + +**Notes:** Confirmed logo files exist at go-backend/static/logo_dark.png and go-backend/static/logo_white.png. CSS source is go-backend/static/styles.css (149 auth/animation-related lines confirmed). + +--- + +## Form inputs migration + +| Option | Description | Selected | +|--------|-------------|----------| +| Yes — migrate inputs in Phase 14 | Replace raw with @ui.Input() in both auth templates | ✓ | +| No — defer to later phase | Keep raw inputs, focus only on layout/background/card | | + +**User's choice:** Yes — migrate inputs in Phase 14 + +| Option | Description | Selected | +|--------|-------------|----------| +| Yes — add cross-page nav links | "Don't have an account? Sign up" / "Already have an account? Sign in" | ✓ | +| No — skip for now | Users navigate via browser; Phase 14 focuses on visual styling | | + +**User's choice:** Yes — add cross-page navigation links + +--- + +## Claude's Discretion + +- Exact gradient stop values for AuthLayout background (use brand tokens as anchors) +- Order of elements within auth card (following go-backend structure: logo → title → Google button → divider → form → nav link) +- Whether AnimatedBackground is a separate templ component or inlined in AuthLayout (prefer separate for readability) + +## Deferred Ideas + +- Dark mode logo swap (logo_white.png for dark mode) — DARK-01 future requirement +- "Forgot password?" reset link — no password reset flow exists yet +- Responsive/mobile auth layout — RESP-01..03 future requirements