# 07. Auth Pages — Login, Signup, Password Reset, Onboarding

meta:
  id: shieldai-unified-restructure-07
  feature: shieldai-unified-restructure
  priority: P1
  depends_on: [shieldai-unified-restructure-03, shieldai-unified-restructure-04]
  tags: [frontend, auth, solidjs, forms]

objective:
- Create the authentication pages for the ShieldAI 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 ShieldAI 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 ShieldAI 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.