@umituz/react-native-auth 3.4.30 → 3.4.32

package/src/presentation/components/AuthBackground.tsx

@@ -0,0 +1,21 @@
+/**
+ * Auth Background Component
+ * Standard background for auth screens
+ */
+
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export const AuthBackground: React.FC = () => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[
+        StyleSheet.absoluteFill,
+        { backgroundColor: tokens.colors.backgroundPrimary }
+      ]}
+    />
+  );
+};

package/src/presentation/components/AuthContainer.tsx

@@ -1,6 +1,6 @@
 /**
  * Auth Container Component
- * Main container for auth screens with gradient and scroll
+ * Main container for auth screens with background and scroll
  */
 
 import React, { useMemo } from "react";
@@ -12,7 +12,7 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useResponsive } from "@umituz/react-native-design-system";
-import { AuthGradientBackground } from "./AuthGradientBackground";
+import { AuthBackground } from "./AuthBackground";
 
 /** Layout constants for auth screens */
 const AUTH_LAYOUT = {
@@ -39,7 +39,7 @@ export const AuthContainer: React.FC<AuthContainerProps> = ({ children }) => {
       style={styles.container}
       behavior="padding"
     >
-      <AuthGradientBackground />
+      <AuthBackground />
       <ScrollView
         contentContainerStyle={[styles.scrollContent, dynamicStyles]}
         keyboardShouldPersistTaps="handled"

package/src/presentation/components/LoginForm.md

@@ -0,0 +1,222 @@
+# LoginForm & RegisterForm
+
+Pre-built authentication form components for email/password login and registration.
+
+---
+
+## LoginForm
+
+Email and password login form component with built-in validation.
+
+### Strategy
+
+**Purpose**: Provides a complete login form with email/password validation, error handling, and loading states without needing to build from scratch.
+
+**When to Use**:
+- Standard email/password authentication flow
+- Need quick login screen implementation
+- Want built-in validation and error handling
+
+**Import Path**:
+```typescript
+import { LoginForm } from '@umituz/react-native-auth';
+```
+
+**Component Location**: `src/presentation/components/LoginForm.tsx`
+
+### Rules
+
+**MUST**:
+- Provide `onNavigateToRegister` callback for navigation to registration screen
+- Use within an auth container or proper layout wrapper
+- Handle loading states during authentication
+- Display error messages from validation
+
+**MUST NOT**:
+- Modify internal form validation logic
+- Override keyboard navigation behavior
+- Bypass built-in error handling
+
+### Constraints
+
+**LIMITATIONS**:
+- Only supports email/password authentication (use social login components separately)
+- Validation rules are fixed (email format, password required)
+- Error messages follow localization keys
+- Form layout is predefined
+
+**PLATFORM SUPPORT**:
+- iOS: ✅ Fully supported
+- Android: ✅ Fully supported
+- Web: ✅ Fully supported
+
+**REQUIREMENTS**:
+- Parent component must handle navigation
+- Authentication context/provider must be configured
+- Localization keys must be defined
+
+---
+
+## RegisterForm
+
+User registration form with display name, email, password, and confirm password fields.
+
+### Strategy
+
+**Purpose**: Provides complete registration flow with password strength indicator, validation, and terms acceptance.
+
+**When to Use**:
+- Standard user registration flow
+- Need password strength requirements
+- Require terms/privacy acceptance
+
+**Import Path**:
+```typescript
+import { RegisterForm } from '@umituz/react-native-auth';
+```
+
+**Component Location**: `src/presentation/components/RegisterForm.tsx`
+
+### Rules
+
+**MUST**:
+- Provide `onNavigateToLogin` callback for navigation back to login
+- Provide terms/privacy URLs or handlers
+- Display password strength indicator to users
+- Handle terms acceptance before submission
+
+**MUST NOT**:
+- Allow registration without terms acceptance
+- Disable password validation
+- Bypass email verification flow (if enabled)
+
+### Constraints
+
+**LIMITATIONS**:
+- Password requirements are fixed (8+ chars, uppercase, lowercase, number, special char)
+- Terms/privacy links must be provided
+- Form fields are predefined (display name, email, password, confirm password)
+- Cannot add custom validation rules
+
+**VALIDATION REQUIREMENTS**:
+- Display name: Required, cannot be empty
+- Email: Required, must be valid format
+- Password: Required, must meet complexity requirements
+- Confirm Password: Required, must match password
+
+**PLATFORM SUPPORT**:
+- iOS: ✅ Fully supported
+- Android: ✅ Fully supported
+- Web: ✅ Fully supported
+
+---
+
+## Form Validation
+
+### Strategy
+
+**Purpose**: Built-in validation ensures user input meets security requirements before submission.
+
+**Validation Utility Location**: `src/infrastructure/utils/AuthValidation.ts`
+
+### Rules
+
+**MUST**:
+- Use `validateEmail` for email format validation
+- Use `validatePasswordForRegister` for password requirements
+- Display validation errors to users
+- Prevent submission with invalid data
+
+**MUST NOT**:
+- Allow empty required fields
+- Bypass password complexity requirements
+- Submit with mismatched passwords
+
+### Constraints
+
+**PASSWORD REQUIREMENTS** (Default):
+- Minimum length: 8 characters
+- Must contain: Uppercase letter
+- Must contain: Lowercase letter
+- Must contain: Number
+- Must contain: Special character
+
+**EMAIL REQUIREMENTS**:
+- Valid email format (user@domain.com)
+- Cannot be empty
+
+**CONFIGURABLE SETTINGS**:
+See `DEFAULT_VAL_CONFIG` in `AuthValidation.ts`
+
+---
+
+## Error Handling
+
+### Strategy
+
+**Purpose**: Clear user feedback for validation and authentication errors.
+
+### Rules
+
+**MUST**:
+- Display field-level validation errors
+- Show authentication errors (wrong password, user not found, etc.)
+- Provide clear error messages in user's language
+- Allow retry after error
+
+**MUST NOT**:
+- Show raw error codes to users
+- Expose sensitive information in errors
+- Block user indefinitely after errors
+
+### Constraints
+
+**ERROR TYPES**:
+- Validation errors: Red text below input field
+- Network errors: Alert or banner message
+- Authentication errors: Clear message with retry option
+
+**LOCALIZATION**:
+All error messages must use localization keys from i18n configuration.
+
+---
+
+## Accessibility
+
+### Strategy
+
+**Purpose**: Ensure forms are accessible to all users including screen reader users.
+
+### Rules
+
+**MUST**:
+- Provide labels for all input fields
+- Announce errors to screen readers
+- Support keyboard navigation
+- Maintain proper focus order
+
+**MUST NOT**:
+- Rely on color alone for error indication
+- Use placeholder text as labels
+- Disrupt screen reader navigation
+
+### Constraints
+
+**WCAG COMPLIANCE**:
+- Minimum contrast ratios for text
+- Touch target size: 44x44px minimum
+- Focus indicators on all interactive elements
+- Screen reader announcements for state changes
+
+---
+
+## Related Components
+
+- **`PasswordStrengthIndicator`** (`src/presentation/components/PasswordIndicators.tsx`) - Visual password requirements display
+- **`PasswordMatchIndicator`** (`src/presentation/components/PasswordIndicators.tsx`) - Password confirmation feedback
+- **`SocialLoginButtons`** (`src/presentation/components/SocialLoginButtons.tsx`) - Social authentication integration
+
+## Related Hooks
+
+- **`useAuth`** (`src/presentation/hooks/useAuth.ts`) - Main authentication state management
+- **`useSocialLogin`** (`src/presentation/hooks/useSocialLogin.ts`) - Social authentication handlers

package/src/presentation/components/PasswordIndicators.md

@@ -0,0 +1,260 @@
+# Password Indicators
+
+Visual components for password validation and user feedback during registration.
+
+---
+
+## PasswordStrengthIndicator
+
+Displays password requirements visually and shows which requirements are met as user types.
+
+### Strategy
+
+**Purpose**: Provides real-time visual feedback on password strength to guide users toward creating secure passwords.
+
+**When to Use**:
+- Registration screens requiring password input
+- Password change screens
+- Anywhere users create/update passwords
+- Need to show password security requirements
+
+**Import Path**:
+```typescript
+import { PasswordStrengthIndicator } from '@umituz/react-native-auth';
+```
+
+**Component Location**: `src/presentation/components/PasswordIndicators.tsx`
+
+**Validation Utility**: `src/infrastructure/utils/AuthValidation.ts`
+
+### Rules
+
+**MUST**:
+- Pass `requirements` object with boolean values for each requirement
+- Show indicator before user starts typing for guidance
+- Update in real-time as password changes
+- Use clear visual distinction (color/icons) for met vs unmet requirements
+- Support both labeled and compact (dots only) modes
+
+**MUST NOT**:
+- Hide requirements until after user fails validation
+- Use color alone to convey requirement status (add icons/text)
+- Allow password submission when requirements not met
+- Modify validation logic (use provided utilities)
+
+### Constraints
+
+**REQUIREMENT TYPES** (Fixed):
+```typescript
+interface PasswordRequirements {
+  hasMinLength: boolean;      // Default: 8 characters
+  hasUppercase: boolean;      // A-Z
+  hasLowercase: boolean;      // a-z
+  hasNumber: boolean;         // 0-9
+  hasSpecialChar: boolean;    // Special characters
+}
+```
+
+**DISPLAY MODES**:
+- Full mode: Labels with each requirement
+- Compact mode: Dots only (5 dots = 5 requirements)
+
+**VISUAL FEEDBACK**:
+- Met requirement: Green color with checkmark
+- Unmet requirement: Gray color with dot
+- Partially met: Yellow/orange color (optional enhancement)
+
+**CUSTOMIZATION LIMITS**:
+- Cannot add/remove requirements
+- Cannot change requirement order
+- Colors follow design system tokens
+
+**PLATFORM SUPPORT**:
+- iOS: ✅ Fully supported
+- Android: ✅ Fully supported
+- Web: ✅ Fully supported
+
+**REQUIREMENTS**:
+- Parent component must calculate requirements object
+- Must recalculate on every password change
+- Localization keys for requirement labels
+
+---
+
+## PasswordMatchIndicator
+
+Shows whether two password fields match in real-time.
+
+### Strategy
+
+**Purpose**: Provides immediate feedback when confirming password to prevent typos and ensure user entered intended password.
+
+**When to Use**:
+- Registration forms with password confirmation
+- Password change forms
+- Anywhere password needs to be re-entered for confirmation
+
+**Import Path**:
+```typescript
+import { PasswordMatchIndicator } from '@umituz/react-native-auth';
+```
+
+**Component Location**: `src/presentation/components/PasswordIndicators.tsx`
+
+### Rules
+
+**MUST**:
+- Only show when confirm password field has input
+- Update in real-time as user types
+- Show clear visual feedback (green = match, red = no match)
+- Display before form submission
+- Check for exact string match (case-sensitive)
+
+**MUST NOT**:
+- Show indicator before user types in confirm field
+- Allow submission if passwords don't match
+- Use ambiguous colors (red/green only, no yellow)
+- Hide indicator after initial display
+
+### Constraints
+
+**DISPLAY TRIGGERS**:
+- Show only when: `confirmPassword.length > 0`
+- Hide when: Confirm field cleared
+- Update on: Every keystroke in confirm field
+
+**MATCH CRITERIA**:
+- Exact string match required
+- Case-sensitive
+- Whitespace-sensitive
+- No fuzzy matching allowed
+
+**VISUAL STATES**:
+- Match: Green color, checkmark icon, positive text
+- No Match: Red color, X icon, negative text
+- Empty: Hidden (no indicator)
+
+**TIMING CONSTRAINTS**:
+- No debounce (immediate feedback)
+- No animation delay
+- Instant update on keystroke
+
+**PLATFORM SUPPORT**:
+- iOS: ✅ Fully supported
+- Android: ✅ Fully supported
+- Web: ✅ Fully supported
+
+---
+
+## Combined Usage Strategy
+
+### Strategy
+
+**Purpose**: Use both indicators together for complete password validation feedback during registration.
+
+**When to Use**:
+- User registration flow
+- Password creation with confirmation
+- Need both strength requirements and match confirmation
+
+### Rules
+
+**MUST**:
+- Show PasswordStrengthIndicator below password field
+- Show PasswordMatchIndicator below confirm password field
+- Calculate strength requirements on password field changes
+- Calculate match status on confirm field changes
+- Disable submit button until both: all requirements met AND passwords match
+
+**MUST NOT**:
+- Show match indicator before strength indicator
+- Allow submission with unmet requirements even if passwords match
+- Hide strength indicator after user moves to confirm field
+
+### Constraints
+
+**FORM FLOW**:
+1. User types password → Show strength indicator
+2. User types confirm password → Show match indicator
+3. Both valid → Enable submit button
+4. Either invalid → Disable submit button
+
+**VALIDATION DEPENDENCIES**:
+- Strength validation: Password field only
+- Match validation: Both password fields
+- Submit enabled: Both validations pass
+
+---
+
+## Accessibility Requirements
+
+### Strategy
+
+**Purpose**: Ensure password validation is accessible to all users including screen reader users.
+
+### Rules
+
+**MUST**:
+- Announce requirement status changes to screen readers
+- Provide text alternatives to color indicators
+- Use semantic HTML (if web)
+- Maintain high contrast for visibility
+- Support keyboard navigation
+
+**MUST NOT**:
+- Rely on color alone to convey status
+- Use placeholder text for requirements
+- Hide requirements from screen readers
+
+### Constraints
+
+**SCREEN READER**:
+- Announce "Password requirement met: 3 of 5"
+- Announce match status: "Passwords match" or "Passwords don't match"
+- Use ARIA live regions for dynamic updates
+
+**VISUAL ACCESSIBILITY**:
+- Minimum contrast ratio: 4.5:1 for text
+- Color + icon for requirement status (not color alone)
+- Touch target size: 44x44px minimum (mobile)
+
+---
+
+## Design System Integration
+
+### Strategy
+
+**Purpose**: Consistent styling with application design system.
+
+### Rules
+
+**MUST**:
+- Use design system color tokens for valid/invalid states
+- Follow design system spacing guidelines
+- Use design system typography
+- Match design system border radius
+
+**MUST NOT**:
+- Hardcode colors or sizes
+- Use custom icons outside design system
+- Override design system animations
+
+### Constraints
+
+**TOKEN DEPENDENCIES**:
+- `tokens.colors.success` - Met requirement
+- `tokens.colors.error` - Unmet requirement
+- `tokens.spacing.md` - Indicator spacing
+- `tokens.radius.sm` - Icon border radius
+
+---
+
+## Related Components
+
+- **`RegisterForm`** (`src/presentation/components/RegisterForm.tsx`) - Uses both indicators automatically
+- **`LoginForm`** (`src/presentation/components/LoginForm.tsx`) - May use strength indicator for password changes
+
+## Related Utilities
+
+- **`validatePasswordForRegister`** (`src/infrastructure/utils/AuthValidation.ts`) - Password validation logic
+- **`DEFAULT_VAL_CONFIG`** (`src/infrastructure/utils/AuthValidation.ts`) - Configuration for requirements