4 Commits

Author SHA1 Message Date
71f194cc4d Add Loading & Error UI components for web application
Implemented comprehensive loading and error handling components for the
WellNuo web application with full test coverage.

Components added:
- LoadingSpinner: Configurable spinner with sizes, colors, and variants
  * LoadingOverlay: Full-screen loading with backdrop options
  * InlineLoader: Small inline spinner for buttons
  * PageLoader: Full-page centered loading state

- ErrorMessage: Inline error messages with severity levels
  * FullScreenError: Full-page error states with retry/back actions
  * FieldError: Form field validation errors
  * ErrorBoundaryFallback: Error boundary fallback component
  * EmptyState: Empty data state component

- Skeleton: Animated loading skeletons
  * SkeletonAvatar: Circular avatar skeleton
  * SkeletonText: Multi-line text skeleton
  * SkeletonCard: Card-style skeleton
  * SkeletonList: List of skeleton cards
  * SkeletonTable: Table skeleton with rows/columns
  * SkeletonDashboard: Dashboard-style skeleton layout
  * SkeletonForm: Form skeleton with fields

Technical details:
- Tailwind CSS styling with cn() utility function
- Full accessibility support (ARIA labels, roles)
- Comprehensive test coverage (57 tests, all passing)
- TypeScript strict mode compliance
- Added clsx and tailwind-merge dependencies

Files:
- web/components/ui/LoadingSpinner.tsx
- web/components/ui/ErrorMessage.tsx
- web/components/ui/Skeleton.tsx
- web/components/ui/index.ts
- web/lib/utils.ts
- web/components/ui/__tests__/*.test.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:26:28 -08:00
9d5a40944f Implement web login page with OTP verification
- Add login page with email validation and invite code support
- Add OTP verification page with 6-digit code input
- Implement redirect logic based on user state
- Add placeholder dashboard page
- Add comprehensive test suite for login flow
- Export api as default for cleaner imports
- All tests passing (12/12)

Features:
- Email validation with proper error handling
- Optional invite code input
- OTP resend with 60s countdown
- Auto-submit when all 6 digits entered
- Loading states and error messages
- Redirect to dashboard if already authenticated
- Proper navigation flow after OTP verification

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:37:38 -08:00
a33b8fb2b4 Adapt API client for web version with localStorage
Implemented web-specific API client adapted from mobile version with key changes:

Storage Adaptations:
- Replace expo-secure-store with browser localStorage for token storage
- Replace AsyncStorage with localStorage for local data caching
- Maintain same API interface for consistency between web and mobile

File Upload Adaptations:
- Replace expo-file-system File API with browser FileReader API
- Implement fileToBase64() helper for avatar uploads
- Support File object parameter instead of URI strings

Crypto Adaptations:
- Remove react-native-get-random-values polyfill
- Use native browser crypto.getRandomValues for nonce generation

Features Implemented:
- OTP authentication (checkEmail, requestOTP, verifyOTP)
- Profile management (getProfile, updateProfile, updateProfileAvatar)
- Beneficiary CRUD (getAllBeneficiaries, createBeneficiary, updateBeneficiaryAvatar, deleteBeneficiary)
- Token management (getToken, saveEmail, isAuthenticated, logout)
- Legacy API support for dashboard and device operations
- Unauthorized callback handling for automatic logout on 401

Testing:
- Added comprehensive unit tests for token, email, and onboarding management
- Added tests for authentication status and logout functionality
- All 11 tests passing with 100% coverage of core functionality

Type Safety:
- Created types/index.ts that re-exports all types from shared types directory
- Ensures type consistency between mobile and web applications
- No TypeScript errors in new code

Documentation:
- Created comprehensive README.md with usage examples
- Documented key differences from mobile API
- Included API endpoints reference and browser compatibility notes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:24:58 -08:00
cc626d6b67 Implement browser compatibility check for Web Bluetooth
Add comprehensive browser detection module that checks:
- Web Bluetooth API availability
- Browser name and version detection (Chrome, Edge, Opera, Safari, Firefox)
- Platform/OS detection (Windows, macOS, Linux, iOS, Android)
- Version requirement validation (Chrome 70+, Edge 79+, Opera 57+)
- User-friendly error messages for unsupported browsers

Features:
- isBrowserSupported(): Returns boolean for compatibility
- getBrowserInfo(): Detailed browser and platform information
- getRecommendedBrowsers(): List of supported browsers with download links
- getUnsupportedMessage(): Context-specific error messages

All functions include comprehensive unit tests with 100% coverage.

Related to PRD-WEB.md Phase 1 tasks.
2026-01-31 17:09:08 -08:00