@onairos/react-native 3.1.16 → 3.1.18

package/src/components/SignInStep.tsx

@@ -1,217 +1,217 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  KeyboardAvoidingView,
-  Platform,
-  Keyboard,
-  Animated,
-} from 'react-native';
-import { COLORS, SPACING, TEXT_STYLES } from '../theme';
-import EmailInput from './EmailInput';
-import GoogleButton from './GoogleButton';
-import PrimaryButton from './PrimaryButton';
-
-interface SignInStepProps {
-  onEmailSubmit: (email: string) => void;
-  onGoogleSignIn: () => void;
-  onContinue: () => void;
-  loading?: boolean;
-  error?: string;
-}
-
-const SignInStep: React.FC<SignInStepProps> = ({
-  onEmailSubmit,
-  onGoogleSignIn,
-  onContinue,
-  loading = false,
-  error = '',
-}) => {
-  const [email, setEmail] = useState('');
-  const [keyboardVisible, setKeyboardVisible] = useState(false);
-
-  const handleEmailSubmit = () => {
-    // Check for reviewer bypass first
-    if (email.toLowerCase().trim() === 'reviewer') {
-      console.log('🔍 Reviewer bypass detected in new UI');
-      // Call onEmailSubmit with a special reviewer email that the parent can recognize
-      onEmailSubmit('reviewer@bypass.com');
-      return;
-    }
-    
-    if (email.trim()) {
-      onEmailSubmit(email.trim());
-    }
-  };
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => setKeyboardVisible(true)
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => setKeyboardVisible(false)
-    );
-
-    return () => {
-      keyboardDidHideListener?.remove();
-      keyboardDidShowListener?.remove();
-    };
-  }, []);
-
-  return (
-    <KeyboardAvoidingView 
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.container}
-    >
-      <View style={styles.content}>
-        {/* Heading */}
-        <View style={styles.headingContainer}>
-          <Text style={styles.title}>Build your Onairos persona to own your digital identity</Text>
-          <Text style={styles.subtitle}>Sign in or create an account</Text>
-        </View>
-
-        {/* Email Input */}
-        <View style={styles.inputContainer}>
-          <EmailInput
-            value={email}
-            onChangeText={setEmail}
-            onSubmitEditing={handleEmailSubmit}
-            returnKeyType="done"
-            blurOnSubmit={true}
-          />
-          {error ? (
-            <Text style={styles.errorText}>{error}</Text>
-          ) : null}
-        </View>
-
-        {/* Divider */}
-        <View style={styles.dividerContainer}>
-          <View style={styles.dividerLine} />
-          <Text style={styles.dividerText}>Or</Text>
-          <View style={styles.dividerLine} />
-        </View>
-
-        {/* Google Button */}
-        <View style={styles.googleContainer}>
-          <GoogleButton
-            onPress={onGoogleSignIn}
-            disabled={loading}
-          />
-        </View>
-
-        {/* Spacer */}
-        <View style={styles.spacer} />
-
-        {/* Continue Button */}
-        <View style={styles.continueContainer}>
-          <PrimaryButton
-            label="Continue"
-            onPress={() => {
-              if (email.trim()) {
-                onEmailSubmit(email.trim());
-              }
-            }}
-            disabled={loading || !email.trim()}
-            loading={loading}
-          />
-        </View>
-      </View>
-    </KeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  
-  content: {
-    flex: 1,
-    paddingTop: 8, // Much smaller top padding to move headline higher
-    paddingHorizontal: 0, // No horizontal padding - let children control their own spacing
-  },
-  
-  headingContainer: {
-    width: '100%', // Fill sheet width
-    marginBottom: 22, // Further reduced spacing to bring subtitle closer to email input
-    paddingHorizontal: 0, // No padding at all - text goes to absolute edges
-    // Removed alignItems: 'center' - no centering
-  },
-  
-  title: {
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700',
-    fontSize: 24,
-    lineHeight: 32,
-    color: COLORS.grey800,
-    textAlign: 'left', // Left-aligned as specified
-    marginBottom: SPACING.sm,
-    // No fixed width - let parent's 24px insets define available width (327px on 375pt device)
-    // Removed height constraint to allow natural wrapping
-  },
-  
-  subtitle: {
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    fontSize: 16,
-    lineHeight: 24,
-    color: COLORS.grey600,
-    textAlign: 'left', // Also left-align subtitle for consistency
-  },
-  
-  inputContainer: {
-    marginBottom: 32, // Consistent spacing
-    paddingHorizontal: 0, // Match headline - no padding, full width
-  },
-  
-  dividerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 32, // Consistent spacing
-    paddingHorizontal: 0, // Match headline - no padding, full width
-  },
-  
-  dividerLine: {
-    flex: 1,
-    height: 1,
-    backgroundColor: '#E5E5E5',
-  },
-  
-  dividerText: {
-    paddingHorizontal: SPACING.md,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey500,
-  },
-  
-  googleContainer: {
-    marginBottom: SPACING.xl,
-    paddingHorizontal: 0, // Match headline - no padding, full width
-  },
-
-  spacer: {
-    flex: 1,
-    minHeight: 20,
-  },
-
-  continueContainer: {
-    paddingBottom: SPACING.xl,
-    paddingHorizontal: 0, // Match headline - no padding, full width
-  },
-  
-  errorText: {
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: '#DC3545', // Red color for errors
-    marginTop: 8,
-    textAlign: 'left',
-  },
-});
-
-export { SignInStep };
-export default SignInStep;
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  Keyboard,
+  Animated,
+} from 'react-native';
+import { COLORS, SPACING, TEXT_STYLES } from '../theme';
+import EmailInput from './EmailInput';
+import GoogleButton from './GoogleButton';
+import PrimaryButton from './PrimaryButton';
+
+interface SignInStepProps {
+  onEmailSubmit: (email: string) => void;
+  onGoogleSignIn: () => void;
+  onContinue: () => void;
+  loading?: boolean;
+  error?: string;
+}
+
+const SignInStep: React.FC<SignInStepProps> = ({
+  onEmailSubmit,
+  onGoogleSignIn,
+  onContinue,
+  loading = false,
+  error = '',
+}) => {
+  const [email, setEmail] = useState('');
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+  const handleEmailSubmit = () => {
+    // Check for reviewer bypass first
+    if (email.toLowerCase().trim() === 'reviewer') {
+      console.log('🔍 Reviewer bypass detected in new UI');
+      // Call onEmailSubmit with a special reviewer email that the parent can recognize
+      onEmailSubmit('reviewer@bypass.com');
+      return;
+    }
+    
+    if (email.trim()) {
+      onEmailSubmit(email.trim());
+    }
+  };
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setKeyboardVisible(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setKeyboardVisible(false)
+    );
+
+    return () => {
+      keyboardDidHideListener?.remove();
+      keyboardDidShowListener?.remove();
+    };
+  }, []);
+
+  return (
+    <KeyboardAvoidingView 
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <View style={styles.content}>
+        {/* Heading */}
+        <View style={styles.headingContainer}>
+          <Text style={styles.title}>Build your Onairos persona to own your digital identity</Text>
+          <Text style={styles.subtitle}>Sign in or create an account</Text>
+        </View>
+
+        {/* Email Input */}
+        <View style={styles.inputContainer}>
+          <EmailInput
+            value={email}
+            onChangeText={setEmail}
+            onSubmitEditing={handleEmailSubmit}
+            returnKeyType="done"
+            blurOnSubmit={true}
+          />
+          {error ? (
+            <Text style={styles.errorText}>{error}</Text>
+          ) : null}
+        </View>
+
+        {/* Divider */}
+        <View style={styles.dividerContainer}>
+          <View style={styles.dividerLine} />
+          <Text style={styles.dividerText}>Or</Text>
+          <View style={styles.dividerLine} />
+        </View>
+
+        {/* Google Button */}
+        <View style={styles.googleContainer}>
+          <GoogleButton
+            onPress={onGoogleSignIn}
+            disabled={loading}
+          />
+        </View>
+
+        {/* Spacer */}
+        <View style={styles.spacer} />
+
+        {/* Continue Button */}
+        <View style={styles.continueContainer}>
+          <PrimaryButton
+            label="Continue"
+            onPress={() => {
+              if (email.trim()) {
+                onEmailSubmit(email.trim());
+              }
+            }}
+            disabled={loading || !email.trim()}
+            loading={loading}
+          />
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  
+  content: {
+    flex: 1,
+    paddingTop: 8, // Much smaller top padding to move headline higher
+    paddingHorizontal: 0, // No horizontal padding - let children control their own spacing
+  },
+  
+  headingContainer: {
+    width: '100%', // Fill sheet width
+    marginBottom: 22, // Further reduced spacing to bring subtitle closer to email input
+    paddingHorizontal: 0, // No padding at all - text goes to absolute edges
+    // Removed alignItems: 'center' - no centering
+  },
+  
+  title: {
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    fontSize: 24,
+    lineHeight: 32,
+    color: COLORS.grey800,
+    textAlign: 'left', // Left-aligned as specified
+    marginBottom: SPACING.sm,
+    // No fixed width - let parent's 24px insets define available width (327px on 375pt device)
+    // Removed height constraint to allow natural wrapping
+  },
+  
+  subtitle: {
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.grey600,
+    textAlign: 'left', // Also left-align subtitle for consistency
+  },
+  
+  inputContainer: {
+    marginBottom: 32, // Consistent spacing
+    paddingHorizontal: 0, // Match headline - no padding, full width
+  },
+  
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 32, // Consistent spacing
+    paddingHorizontal: 0, // Match headline - no padding, full width
+  },
+  
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: '#E5E5E5',
+  },
+  
+  dividerText: {
+    paddingHorizontal: SPACING.md,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey500,
+  },
+  
+  googleContainer: {
+    marginBottom: SPACING.xl,
+    paddingHorizontal: 0, // Match headline - no padding, full width
+  },
+
+  spacer: {
+    flex: 1,
+    minHeight: 20,
+  },
+
+  continueContainer: {
+    paddingBottom: SPACING.xl,
+    paddingHorizontal: 0, // Match headline - no padding, full width
+  },
+  
+  errorText: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: '#DC3545', // Red color for errors
+    marginTop: 8,
+    textAlign: 'left',
+  },
+});
+
+export { SignInStep };
+export default SignInStep;