This commit adds a complete onboarding improvements system including progress
tracking, streamlined UI, and role-based family invitation system.
## Backend Changes
### Database Migrations
- Add onboarding tracking fields to users table (onboarding_completed, onboarding_step, onboarding_data)
- Add role-based invite codes to families table (parent/caregiver/viewer codes with expiration)
- Add indexes for fast invite code lookups
### User Preferences Module
- Add UserPreferencesController with onboarding endpoints
- Add UserPreferencesService with progress tracking methods
- Add UpdateOnboardingProgressDto for validation
- Endpoints: GET/PUT /api/v1/preferences/onboarding, POST /api/v1/preferences/onboarding/complete
### Families Module - Role-Based Invites
- Add generateRoleInviteCode() - Generate role-specific codes with expiration
- Add getRoleInviteCodes() - Retrieve all active codes for a family
- Add joinFamilyWithRoleCode() - Join family with automatic role assignment
- Add revokeRoleInviteCode() - Revoke specific role invite codes
- Add sendEmailInvite() - Generate code and send email invitation
- Endpoints: POST/GET/DELETE /api/v1/families/:id/invite-codes, POST /api/v1/families/join-with-role, POST /api/v1/families/:id/email-invite
### Email Service
- Add sendFamilyInviteEmail() - Send role-based invitation emails
- Beautiful HTML templates with role badges (👨👩👧 parent, 🤝 caregiver, 👁️ viewer)
- Role-specific permission descriptions
- Graceful fallback if email sending fails
### Auth Service
- Fix duplicate family creation bug in joinFamily()
- Ensure users only join family once during onboarding
## Frontend Changes
### Onboarding Page
- Reduce steps from 5 to 4 (combined language + measurements)
- Replace card-based selection with dropdown selectors
- Add automatic progress saving after each step
- Add progress restoration on page mount
- Extract FamilySetupStep into reusable component
### Family Page
- Add RoleInvitesSection component with accordion UI
- Generate/view/copy/regenerate/revoke controls for each role
- Send email invites directly from UI
- Display expiration dates (e.g., "Expires in 5 days")
- Info tooltips explaining role permissions
- Only visible to users with parent role
### API Client
- Add role-based invite methods to families API
- Add onboarding progress methods to users API
- TypeScript interfaces for all new data structures
## Features
✅ Streamlined 4-step onboarding with dropdown selectors
✅ Automatic progress save/restore across sessions
✅ Role-based family invites (parent/caregiver/viewer)
✅ Beautiful email invitations with role descriptions
✅ Automatic role assignment when joining with invite codes
✅ Granular permission control per role
✅ Email fallback if sending fails
✅ All changes tested and production-ready
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add validation in onSubmit to check for invite code when required
- Display user-friendly error message instead of API error
- Prevent form submission until invite code is provided
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Backend Changes:
- Added GET /api/v1/auth/registration/config public endpoint
- Returns registrationMode and requireInviteCode settings
- No authentication required - accessible before registration
- Injected ConfigService into AuthController
This allows the frontend to dynamically show/hide the invite code
field based on the current registration mode setting.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Frontend Changes:
- Added inviteCode field to registration schema (optional)
- Added invite code TextField to registration form UI
- Updated RegisterData interface in AuthContext to include inviteCode
- Pass inviteCode to backend during registration
- Added helpful placeholder text indicating field is optional
User Experience:
- Invite code field appears after email in registration form
- Helper text explains it's optional and can be left blank if registration is open
- Backend will validate the code if REGISTRATION_MODE=invite_only
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Authentication & Token Management:
- Add deviceId to token refresh flow (backend requires both refreshToken and deviceId)
- Fix React Strict Mode token clearing race condition with retry logic
- Improve AuthContext to handle all token state combinations properly
- Store deviceId in localStorage alongside tokens
UI/UX Improvements:
- Remove deprecated legacyBehavior from Next.js Link components
- Update primary theme color to WCAG AA compliant #7c3aed
- Fix nested button error in TabBar voice navigation
- Fix invalid Tabs value error in DynamicChildDashboard
Multi-Child Dashboard:
- Load all children into Redux store properly
- Fetch metrics for all children, not just selected one
- Remove mock data to prevent unauthorized API calls
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Theme-Aware Colors Across App:**
- Updated track page cards to use theme.palette colors
- Updated analytics page icons to use theme colors
- Updated login/register gradient backgrounds to use theme colors
- All colors now respond to Standard/High Contrast theme toggle
**Fixed Next Predicted Activity Section:**
- Connected to real analytics API predictions endpoint
- Fetches sleep and feeding predictions based on actual data
- Shows "Nap time in X minutes" when prediction available
- Displays formatted time using formatDistanceToNow
- Falls back to "Not enough data available for now. Keep tracking :)" when no predictions
**Multi-Language Support:**
- Added "notEnoughData" translation key to all 7 languages:
- English: "Not enough data available for now. Keep tracking :)"
- Spanish: "No hay suficientes datos disponibles por ahora. ¡Sigue rastreando! :)"
- French: "Pas assez de données disponibles pour le moment. Continuez à suivre :)"
- Portuguese: "Dados insuficientes disponíveis no momento. Continue rastreando :)"
- Chinese: "暂无足够数据。请继续记录 :)"
- German: "Derzeit nicht genügend Daten verfügbar. Weiter verfolgen :)"
- Italian: "Dati insufficienti al momento. Continua a monitorare :)"
**Color Mapping by Theme:**
*Purple Theme (Standard):*
- Feeding: Primary (#8b52ff)
- Sleep: Secondary (#ff7094)
- Diaper: Warning (amber)
- Medical: Error (red)
- Activity: Success (green)
- Growth: Primary Dark
*Peach Theme (High Contrast):*
- Feeding: Primary (#FFB6C1)
- Sleep: Secondary (#FFDAB9)
- Diaper: Warning (amber)
- Medical: Error (red)
- Activity: Success (green)
- Growth: Primary Dark
**Files Modified:**
- app/track/page.tsx - Dynamic theme colors
- app/analytics/page.tsx - Theme-aware icon colors
- app/(auth)/login/page.tsx - Gradient uses theme
- app/(auth)/register/page.tsx - Gradient uses theme
- app/page.tsx - Predictions integration
- locales/*/dashboard.json - All 7 languages
🎉 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive form accessibility improvements across all critical forms:
**Accessibility Attributes Added:**
- aria-required="true" on all required form fields
- aria-invalid on fields with validation errors
- aria-describedby linking error messages to inputs
- Unique id attributes on FormHelperText for error association
- role="alert" on error messages for screen reader announcements
- labelId on Select components for proper label association
- noValidate on forms to use custom validation
**Forms Updated:**
1. Login Form (app/(auth)/login/page.tsx)
- Email and password fields with full ARIA support
- Error message association with aria-describedby
2. Registration Form (app/(auth)/register/page.tsx)
- All text fields: name, email, password, DOB, parental email
- Checkbox fields: Terms, Privacy, COPPA consent
- Conditional required fields for minors
3. Child Dialog (components/children/ChildDialog.tsx)
- Name, birthdate, gender fields
- Dynamic aria-invalid based on validation state
4. Tracking Forms:
- Feeding form (app/track/feeding/page.tsx)
- Child selector, side selector, bottle type
- Food description with required validation
- Sleep form (app/track/sleep/page.tsx)
- Child selector, start/end time fields
- Quality and location selectors
**WCAG 2.1 Compliance:**
- ✅ 3.3.2 Labels or Instructions (AA)
- ✅ 4.1.3 Status Messages (AA)
- ✅ 1.3.1 Info and Relationships (A)
- ✅ 3.3.1 Error Identification (A)
**Documentation:**
- Updated REMAINING_FEATURES.md
- Marked Form Accessibility Enhancement as complete
- Status: 79 features completed (57%)
🎉 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract family data from registration response and add to user object
- Backend returns family separately in registration, but included in user for login
- Remove error messages for language/measurement preferences (they save correctly)
- Add detailed console logging for debugging family issues
- Improve error message when family is missing during child creation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Repositioned Voice Command button to center of bottom navigation bar
- Added floating user menu icon in top-left corner on mobile
- User menu includes: Settings, Children, Family, and Logout options
- Updated bottom nav to show: Home, Track, Voice (center), Insights, History
- Hide original floating voice button on mobile to avoid duplication
- Improved mobile UX with easier thumb access to voice commands
- User avatar displays first letter of user's name
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated all Spanish (es) translation files with comprehensive translations for tracking, AI, family, insights, children, and settings pages
- Updated French (fr), Portuguese (pt), and Chinese (zh) translations to match English structure
- Added German (de) and Italian (it) language support with complete translation files
- Fixed medicine tracker route from /track/medication to /track/medicine
- Updated i18n config to support 7 languages: en, es, fr, pt, zh, de, it
- All tracking pages now fully localized: sleep, feeding, diaper, medicine, activity
- AI assistant interface fully translated with thinking messages and suggested questions
- Family management and insights pages now support all languages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Frontend Compliance Features:
- Created compliance API client (data export, account deletion, deletion status)
- Added DataExport component with download functionality
- Added AccountDeletion component with 30-day grace period UI
- Updated Settings page with Privacy & Compliance sections
COPPA Age Verification:
- Added date of birth field to registration
- Age calculation with COPPA compliance (under 13 blocked)
- Parental email and consent for users 13-17
- Dynamic form validation based on age
Privacy & Terms:
- Separate checkboxes for Terms of Service and Privacy Policy
- Required acceptance for registration
- Links to policy pages
Completes GDPR Right to Data Portability and Right to Erasure.
Completes COPPA parental consent requirements.
- Add LOGIN_BIOMETRIC to AuditAction enum
- Import AuditAction and EntityType in AuthService
- Fix loginWithExternalAuth return type to match AuthResponse interface
- Update biometric API client to use correct response structure
- Update login page to access tokens from nested data structure
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add biometric authentication button with Face ID/Touch ID/Windows Hello support
- Check WebAuthn support and platform authenticator availability on mount
- Handle biometric login flow with proper error handling
- Show biometric button only when device supports it
- Add loading states and user-friendly error messages
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements MFA verification dialog for login flow:
MFA Verification Features:
- MFAVerificationDialog component for code entry
- TOTP code input (6-digit authenticator app code)
- Email code input with auto-send on dialog open
- Backup code support mentioned in help text
- Resend email code functionality
- Auto-focus on code input field
- Large, centered code input for easy entry
- Real-time validation (6-digit code required)
Login Flow Integration:
- Detect MFA requirement from login API error
- Show MFA dialog when MFA is enabled for user
- Handle MFA verification success with token storage
- Allow cancellation to retry login
- Seamless transition after successful verification
User Experience:
- Email codes sent automatically
- Visual feedback for code sending/verification
- Error alerts for invalid codes
- Loading states for all async operations
- Clean, focused dialog design
- Tip about backup codes
Implementation Details:
- Integrated with existing login page
- Error handling for MFA-required responses
- Token storage after MFA verification
- Navigation after successful MFA
- Support for both TOTP and Email MFA methods
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Backend changes:
- Add password reset token database migration (V011)
- Create email service with Mailgun integration (EU/US regions)
- Implement password reset flow with secure token generation
- Add email verification endpoints and logic
- Create beautiful HTML email templates for reset and verification
- Add password reset DTOs with validation
- Update User entity with email verification fields
Frontend changes:
- Create forgot password page with email submission
- Create reset password page with token validation
- Add email verification banner component
- Integrate verification banner into main dashboard
- Add password requirements and validation UI
Features:
- Mailgun API ready for EU and US regions
- Secure token expiration (1h for reset, 24h for verification)
- Rate limiting on resend (2min interval)
- Protection against email enumeration
- IP address and user agent tracking
- Token reuse prevention
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
