106 lines
5.3 KiB
Markdown
106 lines
5.3 KiB
Markdown
# 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.
|