@onairos/react-native 3.1.18 → 3.2.0

package/src/components/EmailVerificationModal.tsx

@@ -1,364 +1,364 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Modal,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-  TextInput,
-  Alert,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus } from '../services/platformAuthService';
-
-export interface EmailVerificationModalProps {
-  visible: boolean;
-  email: string;
-  onClose: () => void;
-  onVerificationComplete: (email: string, isExistingUser: boolean) => void;
-  onVerificationFailed: (error: string) => void;
-  testMode?: boolean;
-}
-
-export const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({
-  visible,
-  email,
-  onClose,
-  onVerificationComplete,
-  onVerificationFailed,
-  testMode = false,
-}) => {
-  const [step, setStep] = useState<'request' | 'verify'>('request');
-  const [verificationCode, setVerificationCode] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [codeSent, setCodeSent] = useState<boolean>(false);
-
-  const handleRequestVerification = useCallback(async () => {
-    if (!email) {
-      Alert.alert('Error', 'Email address is required');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      console.log('📧 Requesting email verification for:', email);
-      
-      // First check if there's already a pending verification
-      const statusCheck = await checkEmailVerificationStatus(email, testMode);
-      if (statusCheck.success && statusCheck.isPending) {
-        console.log('✅ Email verification already pending');
-        setCodeSent(true);
-        setStep('verify');
-        setIsLoading(false);
-        return;
-      }
-
-      // Request new verification code
-      const result = await requestEmailVerification(email, testMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification code requested successfully');
-        setCodeSent(true);
-        setStep('verify');
-        Alert.alert(
-          'Verification Code Sent', 
-          result.message || 'Please check your email for the verification code.\n\nNote: In development mode, any 6-digit code will work.',
-          [{ text: 'OK', style: 'default' }]
-        );
-      } else {
-        console.error('❌ Failed to request verification code:', result.error);
-        Alert.alert('Error', result.error || 'Failed to send verification code');
-        onVerificationFailed(result.error || 'Failed to send verification code');
-      }
-    } catch (error) {
-      console.error('❌ Error requesting verification:', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      Alert.alert('Error', errorMessage);
-      onVerificationFailed(errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [email, onVerificationFailed]);
-
-  const handleVerifyCode = useCallback(async () => {
-    if (!verificationCode.trim()) {
-      Alert.alert('Error', 'Please enter the verification code');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      console.log('🔍 Verifying email code for:', email);
-      
-      const result = await verifyEmailCode(email, verificationCode.trim(), testMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification successful');
-        
-        // Check if JWT token was received and stored
-        if (result.token) {
-          console.log('🎫 JWT token received and stored for user authentication');
-        }
-        
-        // Use the existingUser flag from the backend response
-        const isExistingUser = result.existingUser || false;
-        
-        Alert.alert(
-          'Email Verified', 
-          result.message || 'Your email has been verified successfully!\n\n' + 
-          (result.token ? 'You are now authenticated and can access user features.' : 'Authentication complete.'),
-          [{ 
-            text: 'Continue', 
-            onPress: () => {
-              onVerificationComplete(email, isExistingUser);
-            }
-          }]
-        );
-      } else {
-        console.error('❌ Email verification failed:', result.error);
-        Alert.alert('Verification Failed', result.error || 'Invalid verification code. Please try again.');
-      }
-    } catch (error) {
-      console.error('❌ Error verifying code:', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      Alert.alert('Error', errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [email, verificationCode, onVerificationComplete]);
-
-  const handleResendCode = useCallback(async () => {
-    setVerificationCode('');
-    await handleRequestVerification();
-  }, [handleRequestVerification]);
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="slide"
-      statusBarTranslucent
-      onRequestClose={onClose}
-    >
-      <TouchableWithoutFeedback onPress={onClose}>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <View style={styles.modalContent}>
-              <SafeAreaView style={styles.container}>
-                <View style={styles.header}>
-                  <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-                    <Icon name="close" size={24} color="#666" />
-                  </TouchableOpacity>
-                  <Text style={styles.headerTitle}>Email Verification</Text>
-                  <View style={styles.placeholder} />
-                </View>
-
-                <View style={styles.content}>
-                  {step === 'request' ? (
-                    <>
-                      <View style={styles.iconContainer}>
-                        <Icon name="email" size={48} color="#4CAF50" />
-                      </View>
-                      
-                      <Text style={styles.title}>Verify Your Email</Text>
-                      <Text style={styles.subtitle}>
-                        We need to verify your email address to continue
-                      </Text>
-                      
-                      <View style={styles.emailContainer}>
-                        <Text style={styles.emailLabel}>Email Address:</Text>
-                        <Text style={styles.emailText}>{email}</Text>
-                      </View>
-
-                      <TouchableOpacity
-                        style={[styles.button, isLoading && styles.buttonDisabled]}
-                        onPress={handleRequestVerification}
-                        disabled={isLoading}
-                      >
-                        {isLoading ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.buttonText}>Send Verification Code</Text>
-                        )}
-                      </TouchableOpacity>
-                    </>
-                  ) : (
-                    <>
-                      <View style={styles.iconContainer}>
-                        <Icon name="verified" size={48} color="#4CAF50" />
-                      </View>
-                      
-                      <Text style={styles.title}>Enter Verification Code</Text>
-                      <Text style={styles.subtitle}>
-                        We've sent a 6-digit code to {email}
-                      </Text>
-                      
-                      {testMode && (
-                        <Text style={styles.testingNote}>
-                          🔍 Test Mode: Any 6-digit code will work for verification
-                        </Text>
-                      )}
-
-                      <TextInput
-                        style={styles.codeInput}
-                        value={verificationCode}
-                        onChangeText={setVerificationCode}
-                        placeholder="Enter 6-digit code"
-                        keyboardType="number-pad"
-                        maxLength={6}
-                        autoFocus
-                        textAlign="center"
-                      />
-
-                      <TouchableOpacity
-                        style={[styles.button, isLoading && styles.buttonDisabled]}
-                        onPress={handleVerifyCode}
-                        disabled={isLoading || !verificationCode.trim()}
-                      >
-                        {isLoading ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.buttonText}>Verify Code</Text>
-                        )}
-                      </TouchableOpacity>
-
-                      <TouchableOpacity
-                        style={styles.resendButton}
-                        onPress={handleResendCode}
-                        disabled={isLoading}
-                      >
-                        <Text style={styles.resendButtonText}>
-                          Didn't receive the code? Resend
-                        </Text>
-                      </TouchableOpacity>
-                    </>
-                  )}
-                </View>
-              </SafeAreaView>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    backgroundColor: '#fff',
-    borderRadius: 16,
-    width: '90%',
-    maxWidth: 400,
-    maxHeight: '80%',
-  },
-  container: {
-    padding: 24,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 24,
-  },
-  closeButton: {
-    padding: 8,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#000',
-  },
-  placeholder: {
-    width: 40,
-  },
-  content: {
-    alignItems: 'center',
-  },
-  iconContainer: {
-    marginBottom: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  emailContainer: {
-    backgroundColor: '#f5f5f5',
-    padding: 16,
-    borderRadius: 8,
-    marginBottom: 24,
-    width: '100%',
-  },
-  emailLabel: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 4,
-  },
-  emailText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  testingNote: {
-    fontSize: 14,
-    color: '#FF9800',
-    textAlign: 'center',
-    marginBottom: 16,
-    backgroundColor: '#FFF3E0',
-    padding: 8,
-    borderRadius: 4,
-  },
-  codeInput: {
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    padding: 16,
-    fontSize: 18,
-    fontWeight: '600',
-    letterSpacing: 4,
-    marginBottom: 24,
-    width: '100%',
-  },
-  button: {
-    backgroundColor: '#4CAF50',
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 8,
-    width: '100%',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  resendButton: {
-    paddingVertical: 8,
-  },
-  resendButtonText: {
-    color: '#4CAF50',
-    fontSize: 14,
-    textDecorationLine: 'underline',
-  },
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Modal,
+  SafeAreaView,
+  TouchableWithoutFeedback,
+  TextInput,
+  Alert,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus } from '../services/platformAuthService';
+
+export interface EmailVerificationModalProps {
+  visible: boolean;
+  email: string;
+  onClose: () => void;
+  onVerificationComplete: (email: string, isExistingUser: boolean) => void;
+  onVerificationFailed: (error: string) => void;
+  testMode?: boolean;
+}
+
+export const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({
+  visible,
+  email,
+  onClose,
+  onVerificationComplete,
+  onVerificationFailed,
+  testMode = false,
+}) => {
+  const [step, setStep] = useState<'request' | 'verify'>('request');
+  const [verificationCode, setVerificationCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [codeSent, setCodeSent] = useState<boolean>(false);
+
+  const handleRequestVerification = useCallback(async () => {
+    if (!email) {
+      Alert.alert('Error', 'Email address is required');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      console.log('📧 Requesting email verification for:', email);
+      
+      // First check if there's already a pending verification
+      const statusCheck = await checkEmailVerificationStatus(email, testMode);
+      if (statusCheck.success && statusCheck.isPending) {
+        console.log('✅ Email verification already pending');
+        setCodeSent(true);
+        setStep('verify');
+        setIsLoading(false);
+        return;
+      }
+
+      // Request new verification code
+      const result = await requestEmailVerification(email, testMode);
+      
+      if (result.success) {
+        console.log('✅ Email verification code requested successfully');
+        setCodeSent(true);
+        setStep('verify');
+        Alert.alert(
+          'Verification Code Sent', 
+          result.message || 'Please check your email for the verification code.\n\nNote: In development mode, any 6-digit code will work.',
+          [{ text: 'OK', style: 'default' }]
+        );
+      } else {
+        console.error('❌ Failed to request verification code:', result.error);
+        Alert.alert('Error', result.error || 'Failed to send verification code');
+        onVerificationFailed(result.error || 'Failed to send verification code');
+      }
+    } catch (error) {
+      console.error('❌ Error requesting verification:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      Alert.alert('Error', errorMessage);
+      onVerificationFailed(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [email, onVerificationFailed]);
+
+  const handleVerifyCode = useCallback(async () => {
+    if (!verificationCode.trim()) {
+      Alert.alert('Error', 'Please enter the verification code');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      console.log('🔍 Verifying email code for:', email);
+      
+      const result = await verifyEmailCode(email, verificationCode.trim(), testMode);
+      
+      if (result.success) {
+        console.log('✅ Email verification successful');
+        
+        // Check if JWT token was received and stored
+        if (result.token) {
+          console.log('🎫 JWT token received and stored for user authentication');
+        }
+        
+        // Use the existingUser flag from the backend response
+        const isExistingUser = result.existingUser || false;
+        
+        Alert.alert(
+          'Email Verified', 
+          result.message || 'Your email has been verified successfully!\n\n' + 
+          (result.token ? 'You are now authenticated and can access user features.' : 'Authentication complete.'),
+          [{ 
+            text: 'Continue', 
+            onPress: () => {
+              onVerificationComplete(email, isExistingUser);
+            }
+          }]
+        );
+      } else {
+        console.error('❌ Email verification failed:', result.error);
+        Alert.alert('Verification Failed', result.error || 'Invalid verification code. Please try again.');
+      }
+    } catch (error) {
+      console.error('❌ Error verifying code:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      Alert.alert('Error', errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [email, verificationCode, onVerificationComplete]);
+
+  const handleResendCode = useCallback(async () => {
+    setVerificationCode('');
+    await handleRequestVerification();
+  }, [handleRequestVerification]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.modalOverlay}>
+          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+            <View style={styles.modalContent}>
+              <SafeAreaView style={styles.container}>
+                <View style={styles.header}>
+                  <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                    <Icon name="close" size={24} color="#666" />
+                  </TouchableOpacity>
+                  <Text style={styles.headerTitle}>Email Verification</Text>
+                  <View style={styles.placeholder} />
+                </View>
+
+                <View style={styles.content}>
+                  {step === 'request' ? (
+                    <>
+                      <View style={styles.iconContainer}>
+                        <Icon name="email" size={48} color="#4CAF50" />
+                      </View>
+                      
+                      <Text style={styles.title}>Verify Your Email</Text>
+                      <Text style={styles.subtitle}>
+                        We need to verify your email address to continue
+                      </Text>
+                      
+                      <View style={styles.emailContainer}>
+                        <Text style={styles.emailLabel}>Email Address:</Text>
+                        <Text style={styles.emailText}>{email}</Text>
+                      </View>
+
+                      <TouchableOpacity
+                        style={[styles.button, isLoading && styles.buttonDisabled]}
+                        onPress={handleRequestVerification}
+                        disabled={isLoading}
+                      >
+                        {isLoading ? (
+                          <ActivityIndicator size="small" color="#fff" />
+                        ) : (
+                          <Text style={styles.buttonText}>Send Verification Code</Text>
+                        )}
+                      </TouchableOpacity>
+                    </>
+                  ) : (
+                    <>
+                      <View style={styles.iconContainer}>
+                        <Icon name="verified" size={48} color="#4CAF50" />
+                      </View>
+                      
+                      <Text style={styles.title}>Enter Verification Code</Text>
+                      <Text style={styles.subtitle}>
+                        We've sent a 6-digit code to {email}
+                      </Text>
+                      
+                      {testMode && (
+                        <Text style={styles.testingNote}>
+                          🔍 Test Mode: Any 6-digit code will work for verification
+                        </Text>
+                      )}
+
+                      <TextInput
+                        style={styles.codeInput}
+                        value={verificationCode}
+                        onChangeText={setVerificationCode}
+                        placeholder="Enter 6-digit code"
+                        keyboardType="number-pad"
+                        maxLength={6}
+                        autoFocus
+                        textAlign="center"
+                      />
+
+                      <TouchableOpacity
+                        style={[styles.button, isLoading && styles.buttonDisabled]}
+                        onPress={handleVerifyCode}
+                        disabled={isLoading || !verificationCode.trim()}
+                      >
+                        {isLoading ? (
+                          <ActivityIndicator size="small" color="#fff" />
+                        ) : (
+                          <Text style={styles.buttonText}>Verify Code</Text>
+                        )}
+                      </TouchableOpacity>
+
+                      <TouchableOpacity
+                        style={styles.resendButton}
+                        onPress={handleResendCode}
+                        disabled={isLoading}
+                      >
+                        <Text style={styles.resendButtonText}>
+                          Didn't receive the code? Resend
+                        </Text>
+                      </TouchableOpacity>
+                    </>
+                  )}
+                </View>
+              </SafeAreaView>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    width: '90%',
+    maxWidth: 400,
+    maxHeight: '80%',
+  },
+  container: {
+    padding: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 24,
+  },
+  closeButton: {
+    padding: 8,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#000',
+  },
+  placeholder: {
+    width: 40,
+  },
+  content: {
+    alignItems: 'center',
+  },
+  iconContainer: {
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  emailContainer: {
+    backgroundColor: '#f5f5f5',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 24,
+    width: '100%',
+  },
+  emailLabel: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  emailText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
+  },
+  testingNote: {
+    fontSize: 14,
+    color: '#FF9800',
+    textAlign: 'center',
+    marginBottom: 16,
+    backgroundColor: '#FFF3E0',
+    padding: 8,
+    borderRadius: 4,
+  },
+  codeInput: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 18,
+    fontWeight: '600',
+    letterSpacing: 4,
+    marginBottom: 24,
+    width: '100%',
+  },
+  button: {
+    backgroundColor: '#4CAF50',
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    width: '100%',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  resendButton: {
+    paddingVertical: 8,
+  },
+  resendButtonText: {
+    color: '#4CAF50',
+    fontSize: 14,
+    textDecorationLine: 'underline',
+  },
 });