xtablo-source/.planning/phases/14-auth-pages/14-CONTEXT.md

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 <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.

## 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

<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>

## 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