Kordant/tasks/shieldai-unified-restructure/07-auth-pages.md

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.