feat(mobile-auth): implement email login and registration with form v…

[fadee26]

Email Authentication Implementation with Form Validation

Overview

This PR implements comprehensive email login and registration screens with real-time form validation for the NFTopia mobile app. The implementation includes reusable validation components, password strength indicator, and full integration with the existing AuthStore.

Changes

New Components

• FormInput (screens/Auth/components/FormInput.tsx)

  • Reusable input component with label, placeholder, and validation error display
  • Supports multiple keyboard types, secure text entry, focus states
  • Includes testID for automated testing

• PasswordStrengthIndicator (screens/Auth/components/PasswordStrengthIndicator.tsx)

  • Visual progress bar showing weak/medium/strong password strength
  • Color-coded feedback: Red → Orange → Green
  • Real-time updates as user types

• ValidationError (screens/Auth/components/ValidationError.tsx)

  • Lightweight component for displaying validation errors
  • Conditional rendering with consistent styling

Validation Utilities

Created comprehensive validation functions in screens/Auth/utils/validation.ts:

• ✅ validateEmail: Format validation, max 255 chars, RFC 5322 compliant
• ✅ validatePassword: Min 8 chars, 1 number, 1 uppercase, 1 special char
• ✅ validateUsername: 3-20 alphanumeric characters (underscores allowed)
• ✅ validateConfirmPassword: Must match password field

Updated Screens

• EmailLoginScreen.tsx: Enhanced with real-time validation, loading states, error handling
• EmailRegisterScreen.tsx: Complete form with all validations and password strength indicator

Testing

• Created comprehensive test suite (validation.test.ts) with 25+ test cases
• Covers all validation functions, edge cases, and boundary conditions

Documentation

• Added detailed README.md with component usage, validation rules, and integration guide

Technical Details

Framework: React Native with Expo
State Management: Zustand (AuthStore)
Navigation: React Navigation (Native Stack)
Language: TypeScript

Integration Points

• ✅ Integrated with existing AuthStore for user state management
• ✅ Uses existing AuthNavigator navigation structure
• ✅ Ready for backend API integration (Issue Implement the email/password authentication service for NFTopia mobile app #113)
• ✅ Compatible with existing wallet auth flows

Acceptance Criteria

Login Screen

✅ Email input field with validation
✅ Password input field with secure entry
✅ "Login" button with loading indicator
✅ "Sign Up" navigation link
✅ "Forgot Password?" link (placeholder)
✅ Real-time error clearing
✅ API error display via AuthStore

Registration Screen

✅ Username input (alphanumeric, 3-20 chars)
✅ Email input with format validation
✅ Password input with strength indicator
✅ Confirm password input with match validation
✅ "Create Account" button with loading indicator
✅ "Already have an account? Sign In" link
✅ Terms of Service agreement
✅ Real-time error clearing

Validation Rules

✅ Email: Valid format, max 255 chars
✅ Password: Min 8 chars, 1 number, 1 uppercase, 1 special char
✅ Username: 3-20 alphanumeric characters
✅ Confirm Password: Matches password

General Requirements

✅ Loading indicator during submission
✅ Successful login/registration navigates to main app (ready for integration)
✅ Navigation between login and registration works
✅ Form validation tests passing
✅ TypeScript types properly defined

closes #118
closes #119

[drips-wave]

@fadee26 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[Oluwaseyi89]

@fadee26 why are you closing 2 issues with one PR? Separate the implementation and open their respective PRs

[Oluwaseyi89]

@fadee26 please, resolve the merge conflict.

[fadee26]

@Oluwaseyi89 please merge

[Oluwaseyi89]

@fadee26 please, resolve the merge conflict. This branch will now be prioritize for merge.

[fadee26]

@Oluwaseyi89 please review