# 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 <!DOCTYPE html> 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 <input> 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
