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