rebranding

tasks/kordant-unified-restructure/07-auth-pages.md

@@ -0,0 +1,105 @@
+# 07. Auth Pages — Login, Signup, Password Reset, Onboarding
+
+meta:
+  id: kordant-unified-restructure-07
+  feature: kordant-unified-restructure
+  priority: P1
+  depends_on: [kordant-unified-restructure-03, kordant-unified-restructure-04]
+  tags: [frontend, auth, solidjs, forms]
+
+objective:
+- Create the authentication pages for the Kordant web app: login, signup, password reset, and a post-signup onboarding flow. These should be visually cohesive with the landing page theme and use the UI primitives.
+
+deliverables:
+- `web/src/routes/(auth)/login.tsx` — Login page:
+  - Email + password form with validation
+  - "Remember me" checkbox
+  - "Forgot password?" link
+  - "Don't have an account? Sign up" link
+  - Social login buttons (Google, Apple placeholders)
+- `web/src/routes/(auth)/signup.tsx` — Signup page:
+  - Name, email, password, confirm password fields
+  - Password strength indicator
+  - Terms of service + privacy policy checkbox
+  - "Already have an account? Log in" link
+- `web/src/routes/(auth)/forgot-password.tsx` — Password reset request:
+  - Email input + submit
+  - Success state with "Check your email" message
+- `web/src/routes/(auth)/reset-password.tsx` — Password reset confirmation:
+  - New password + confirm fields
+  - Token validation from query param
+- `web/src/routes/(auth)/onboarding.tsx` — Post-signup onboarding:
+  - Step 1: Welcome + choose plan tier (Basic, Plus, Premium)
+  - Step 2: Add first watchlist item (email or phone)
+  - Step 3: Invite family members (optional)
+  - Step 4: Setup complete → redirect to dashboard
+- `web/src/components/auth/AuthLayout.tsx` — Shared auth page wrapper:
+  - Split layout: left side with Kordant branding + testimonial, right side with form card
+  - Responsive: stacked on mobile
+- `web/src/components/auth/` — Form components: `PasswordInput.tsx` (with visibility toggle), `SocialAuthButtons.tsx`
+
+steps:
+1. Create `web/src/routes/(auth)/` directory. SolidStart file-based routing treats `(auth)` as a route group (no URL prefix).
+2. Create `web/src/components/auth/` directory.
+3. **AuthLayout**:
+   - Left panel: large Kordant logo, tagline, and a rotating testimonial quote
+   - Right panel: centered form card with `.gradient-card`, border, padding
+   - Use `PageContainer` for consistent padding
+4. **Login page**:
+   - Use `Input` primitive for email and password
+   - Use `Button` for submit
+   - Client-side validation: required fields, email format
+   - Show error toast on invalid credentials (stub API call for now)
+   - Redirect to `/dashboard` on success (stub)
+5. **Signup page**:
+   - Additional fields: name, confirm password
+   - Password strength indicator: weak/medium/strong based on length + complexity
+   - Validate matching passwords client-side
+   - Checkbox for ToS (required)
+6. **Forgot/Reset password**:
+   - Simple forms with email or new password
+   - Query param parsing for reset token
+7. **Onboarding**:
+   - Stepper UI at top showing progress (1–4)
+   - Each step is a separate view within the page (signal-based state machine)
+   - Step 1: Tier cards with feature comparison (reuse TierComparison component from legacy if available, else create simple cards)
+   - Step 2: Input for email/phone with "Add" button
+   - Step 3: Email inputs for family invites
+   - Step 4: Success animation + "Go to Dashboard" button
+8. **PasswordInput**:
+   - Wraps `Input` with type toggle (text/password)
+   - Eye icon button inside input
+9. **SocialAuthButtons**:
+   - Google and Apple sign-in buttons with brand colors
+   - Placeholder onClick handlers (wire in task 23)
+10. Wire forms to stub `auth` API functions that will later connect to tRPC.
+
+steps:
+- Unit: Login form validates email format and required fields
+- Unit: Signup form validates password match and ToS checkbox
+- Unit: Onboarding stepper advances correctly and collects data
+- Unit: PasswordInput toggles visibility
+- E2E: Fill login form and submit; verify redirect to /dashboard (stub)
+
+acceptance_criteria:
+- [ ] Login page renders with email, password, remember me, forgot password, and social buttons
+- [ ] Signup page renders with all fields, password strength, and ToS checkbox
+- [ ] Password reset flow has request and confirmation pages
+- [ ] Onboarding has 4 steps with progress indicator and collects plan + watchlist + family data
+- [ ] All auth pages are responsive and use theme tokens
+- [ ] Client-side validation prevents submission of invalid forms
+- [ ] Error states show inline messages and toasts
+- [ ] AuthLayout split panel renders correctly on desktop and stacks on mobile
+
+validation:
+- Navigate to `/login`, `/signup`, `/forgot-password`, `/onboarding`
+- Verify all forms render and validate correctly
+- Test responsive layout at 375px, 768px, 1440px viewports
+- Toggle dark mode and verify form card backgrounds shift correctly
+
+notes:
+- Use SolidStart route groups `(auth)` to group auth pages without adding `/auth/` to URLs.
+- Do NOT implement actual JWT handling here — that comes in task 11 (tRPC auth context). Use stub functions that simulate network delay.
+- The onboarding data (plan, watchlist items, family invites) should be collected in a local signal/store and passed to the API in task 23.
+- Consider using `@solidjs/router`'s `useSearchParams` for reading query params (e.g., reset token).
+- Keep accessibility in mind: all inputs need `<label>`, error messages linked via `aria-describedby`, and focus management on step changes.