@oxyhq/services 5.4.1 → 5.4.3

package/lib/commonjs/ui/screens/SignInScreen.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext");
-var _styles = require("../styles");
-var _OxyLogo = _interopRequireDefault(require("../components/OxyLogo"));
-var _Avatar = _interopRequireDefault(require("../components/Avatar"));
-var _bottomSheet = require("../components/bottomSheet");
+var _OxyContext = require("../context/OxyContext.js");
+var _index = require("../styles/index.js");
+var _Avatar = _interopRequireDefault(require("../components/Avatar.js"));
 var _vectorIcons = require("@expo/vector-icons");
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
-var _sonner = require("../../lib/sonner");
+var _sonner = require("../../lib/sonner.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -27,10 +25,16 @@ const SignInScreen = ({
   const [password, setPassword] = (0, _react.useState)('');
   const [errorMessage, setErrorMessage] = (0, _react.useState)('');
   const [userProfile, setUserProfile] = (0, _react.useState)(null);
+  const [showPassword, setShowPassword] = (0, _react.useState)(false);
 
   // Multi-step form states
   const [currentStep, setCurrentStep] = (0, _react.useState)(0);
   const [isInputFocused, setIsInputFocused] = (0, _react.useState)(false);
+  const [isValidating, setIsValidating] = (0, _react.useState)(false);
+  const [validationStatus, setValidationStatus] = (0, _react.useState)('idle');
+
+  // Cache for validation results to prevent repeated API calls
+  const validationCache = (0, _react.useRef)(new Map());
   const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
   const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const scaleAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
@@ -42,13 +46,17 @@ const SignInScreen = ({
     isLoading,
     user,
     isAuthenticated,
-    sessions
+    sessions,
+    oxyServices
   } = (0, _OxyContext.useOxy)();
-  const colors = (0, _styles.useThemeColors)(theme);
-  const commonStyles = (0, _styles.createCommonStyles)(theme);
+  const colors = (0, _index.useThemeColors)(theme);
+  const commonStyles = (0, _index.createCommonStyles)(theme);
 
   // Check if this should be treated as "Add Account" mode
-  const isAddAccountMode = user && isAuthenticated && sessions && sessions.length > 0;
+  const isAddAccountMode = (0, _react.useMemo)(() => user && isAuthenticated && sessions && sessions.length > 0, [user, isAuthenticated, sessions]);
+
+  // Memoized styles to prevent rerenders
+  const styles = (0, _react.useMemo)(() => createStyles(colors, theme), [colors, theme]);
 
   // Initialize logo animation
   (0, _react.useEffect)(() => {
@@ -58,26 +66,153 @@ const SignInScreen = ({
       friction: 8,
       useNativeDriver: true
     }).start();
-  }, []);
+  }, [logoAnim]);
 
   // Input focus animations
-  const handleInputFocus = () => {
+  const handleInputFocus = (0, _react.useCallback)(() => {
     setIsInputFocused(true);
     _reactNative.Animated.spring(inputScaleAnim, {
       toValue: 1.02,
       useNativeDriver: true
     }).start();
-  };
-  const handleInputBlur = () => {
+  }, [inputScaleAnim]);
+  const handleInputBlur = (0, _react.useCallback)(() => {
     setIsInputFocused(false);
     _reactNative.Animated.spring(inputScaleAnim, {
       toValue: 1,
       useNativeDriver: true
     }).start();
-  };
+  }, [inputScaleAnim]);
+
+  // Memoized input change handlers to prevent re-renders
+  const handleUsernameChange = (0, _react.useCallback)(text => {
+    setUsername(text);
+    // Only clear error if we're changing from an invalid state
+    if (validationStatus === 'invalid') {
+      setErrorMessage('');
+      setValidationStatus('idle');
+    }
+  }, [validationStatus]);
+  const handlePasswordChange = (0, _react.useCallback)(text => {
+    setPassword(text);
+    setErrorMessage(''); // Clear error when user types
+  }, []);
+
+  // Username validation using core services with caching
+  const validateUsername = (0, _react.useCallback)(async usernameToValidate => {
+    if (!usernameToValidate || usernameToValidate.length < 3) {
+      setValidationStatus('invalid');
+      return false;
+    }
+
+    // Check cache first (cache valid for 5 minutes)
+    const cached = validationCache.current.get(usernameToValidate);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < 5 * 60 * 1000) {
+      setUserProfile(cached.profile);
+      setValidationStatus('valid');
+      setErrorMessage('');
+      return true;
+    }
+    setIsValidating(true);
+    setValidationStatus('validating');
+    try {
+      // First check if username exists by trying to get profile
+      const profile = await oxyServices.getUserProfileByUsername(usernameToValidate);
+      if (profile) {
+        const profileData = {
+          displayName: profile.name?.full || profile.name?.first || profile.username,
+          name: profile.username,
+          avatar: profile.avatar,
+          id: profile.id
+        };
+        setUserProfile(profileData);
+        setValidationStatus('valid');
+        setErrorMessage(''); // Clear any previous errors
+
+        // Cache the result
+        validationCache.current.set(usernameToValidate, {
+          profile: profileData,
+          timestamp: now
+        });
+        return true;
+      } else {
+        setValidationStatus('invalid');
+        setErrorMessage('Username not found. Please check your username or sign up.');
+        return false;
+      }
+    } catch (error) {
+      // If user not found (404), username doesn't exist
+      if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
+        setValidationStatus('invalid');
+        setErrorMessage('Username not found. Please check your username or sign up.');
+        return false;
+      }
+
+      // For other errors, show generic message
+      console.error('Username validation error:', error);
+      setValidationStatus('invalid');
+      setErrorMessage('Unable to validate username. Please try again.');
+      return false;
+    } finally {
+      setIsValidating(false);
+    }
+  }, [oxyServices]);
+
+  // Debounced username validation - increased debounce time and added better conditions
+  (0, _react.useEffect)(() => {
+    if (!username || username.length < 3) {
+      setValidationStatus('idle');
+      setUserProfile(null);
+      setErrorMessage(''); // Clear error when input is too short
+      return;
+    }
+
+    // Only validate if we haven't already validated this exact username
+    if (validationStatus === 'valid' && userProfile?.name === username) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      validateUsername(username);
+    }, 800); // Increased debounce to 800ms
+
+    return () => clearTimeout(timeoutId);
+  }, [username, validateUsername, validationStatus, userProfile?.name]);
+
+  // Cleanup cache on unmount and limit cache size
+  (0, _react.useEffect)(() => {
+    return () => {
+      // Clear cache on unmount
+      validationCache.current.clear();
+    };
+  }, []);
+
+  // Clean up old cache entries periodically (older than 10 minutes)
+  (0, _react.useEffect)(() => {
+    const cleanupInterval = setInterval(() => {
+      const now = Date.now();
+      const maxAge = 10 * 60 * 1000; // 10 minutes
+
+      for (const [key, value] of validationCache.current.entries()) {
+        if (now - value.timestamp > maxAge) {
+          validationCache.current.delete(key);
+        }
+      }
+
+      // Limit cache size to 50 entries
+      if (validationCache.current.size > 50) {
+        const entries = Array.from(validationCache.current.entries());
+        entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+        const toDelete = entries.slice(0, entries.length - 50);
+        toDelete.forEach(([key]) => validationCache.current.delete(key));
+      }
+    }, 5 * 60 * 1000); // Clean up every 5 minutes
+
+    return () => clearInterval(cleanupInterval);
+  }, []);
 
   // Animation functions
-  const animateTransition = nextStep => {
+  const animateTransition = (0, _react.useCallback)(nextStep => {
     // Scale down current content
     _reactNative.Animated.timing(scaleAnim, {
       toValue: 0.95,
@@ -114,8 +249,8 @@ const SignInScreen = ({
         useNativeDriver: true
       })]).start();
     });
-  };
-  const nextStep = () => {
+  }, [fadeAnim, slideAnim, scaleAnim]);
+  const nextStep = (0, _react.useCallback)(() => {
     if (currentStep < 1) {
       // Animate progress bar
       _reactNative.Animated.timing(progressAnim, {
@@ -125,8 +260,8 @@ const SignInScreen = ({
       }).start();
       animateTransition(currentStep + 1);
     }
-  };
-  const prevStep = () => {
+  }, [currentStep, progressAnim, animateTransition]);
+  const prevStep = (0, _react.useCallback)(() => {
     if (currentStep > 0) {
       // Animate progress bar
       _reactNative.Animated.timing(progressAnim, {
@@ -136,37 +271,31 @@ const SignInScreen = ({
       }).start();
       animateTransition(currentStep - 1);
     }
-  };
-
-  // Fetch user profile when username is entered
-  (0, _react.useEffect)(() => {
-    const fetchUserProfile = async () => {
-      if (username.length >= 3 && currentStep === 1) {
-        try {
-          // For now, we'll create a mock profile based on username
-          // In a real app, you'd fetch this from your API
-          setUserProfile({
-            displayName: username,
-            name: username,
-            avatar: null // Could be fetched from API
-          });
-        } catch (error) {
-          // If user not found, we'll show a generic avatar
-          setUserProfile(null);
-        }
-      }
-    };
-    fetchUserProfile();
-  }, [username, currentStep]);
-  const handleUsernameNext = () => {
+  }, [currentStep, progressAnim, animateTransition]);
+  const handleUsernameNext = (0, _react.useCallback)(() => {
     if (!username) {
       _sonner.toast.error('Please enter your username');
       return;
     }
-    setErrorMessage('');
-    nextStep();
-  };
-  const handleLogin = async () => {
+    if (validationStatus === 'invalid') {
+      // Don't show toast if we already have an error message displayed
+      if (!errorMessage) {
+        _sonner.toast.error('Please enter a valid username');
+      }
+      return;
+    }
+    if (validationStatus === 'validating') {
+      _sonner.toast.error('Please wait while we validate your username');
+      return;
+    }
+    if (validationStatus === 'valid' && userProfile) {
+      setErrorMessage('');
+      nextStep();
+    } else {
+      _sonner.toast.error('Please enter a valid username');
+    }
+  }, [username, validationStatus, userProfile, errorMessage, nextStep]);
+  const handleLogin = (0, _react.useCallback)(async () => {
     if (!username || !password) {
       _sonner.toast.error('Please enter both username and password');
       return;
@@ -178,10 +307,10 @@ const SignInScreen = ({
     } catch (error) {
       _sonner.toast.error(error.message || 'Login failed');
     }
-  };
+  }, [username, password, login]);
 
-  // Step components
-  const renderUsernameStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  // Memoized step components
+  const renderUsernameStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -332,15 +461,15 @@ const SignInScreen = ({
         }],
         children: errorMessage
       })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
       style: [styles.modernInputContainer, {
         transform: [{
           scale: inputScaleAnim
         }]
       }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: [styles.inputWrapper, {
-          borderColor: isInputFocused ? colors.primary : colors.border
+          borderColor: validationStatus === 'valid' ? colors.success : validationStatus === 'invalid' ? colors.error : isInputFocused ? colors.primary : colors.border
         }],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "person-outline",
@@ -354,31 +483,78 @@ const SignInScreen = ({
           placeholder: "Enter your username",
           placeholderTextColor: colors.placeholder,
           value: username,
-          onChangeText: setUsername,
+          onChangeText: handleUsernameChange,
           onFocus: handleInputFocus,
           onBlur: handleInputBlur,
           autoCapitalize: "none",
           testID: "username-input"
+        }), validationStatus === 'validating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "small",
+          color: colors.primary,
+          style: styles.validationIndicator
+        }), validationStatus === 'valid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "checkmark-circle",
+          size: 20,
+          color: colors.success,
+          style: styles.validationIndicator
+        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "close-circle",
+          size: 20,
+          color: colors.error,
+          style: styles.validationIndicator
         })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      }), validationStatus === 'valid' && userProfile && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.validationSuccessCard, {
+          backgroundColor: colors.success + '15'
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.success
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: [styles.validationText, {
+            color: colors.success
+          }],
+          children: ["Found user: ", userProfile.displayName]
+        })]
+      }), validationStatus === 'invalid' && username.length >= 3 && !errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.validationErrorCard, {
+          backgroundColor: colors.error + '15'
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "alert-circle",
+          size: 16,
+          color: colors.error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.validationText, {
+            color: colors.error
+          }],
+          children: "Username not found"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: [styles.modernButton, {
         backgroundColor: colors.primary,
-        opacity: !username ? 0.5 : 1,
+        opacity: !username || validationStatus !== 'valid' ? 0.5 : 1,
         shadowColor: colors.primary
       }],
       onPress: handleUsernameNext,
-      disabled: !username,
+      disabled: !username || validationStatus !== 'valid' || isValidating,
       testID: "username-next-button",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.modernButtonText,
-        children: "Continue"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-        name: "arrow-forward",
-        size: 20,
+      children: isValidating ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
         color: "#FFFFFF",
-        style: styles.buttonIcon
-      })]
+        size: "small"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.modernButtonText,
+          children: "Continue"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "arrow-forward",
+          size: 20,
+          color: "#FFFFFF",
+          style: styles.buttonIcon
+        })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
@@ -396,8 +572,8 @@ const SignInScreen = ({
         })
       })]
     })]
-  });
-  const renderPasswordStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameNext, navigate, styles]);
+  const renderPasswordStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -486,21 +662,30 @@ const SignInScreen = ({
           placeholder: "Enter your password",
           placeholderTextColor: colors.placeholder,
           value: password,
-          onChangeText: setPassword,
+          onChangeText: handlePasswordChange,
           onFocus: handleInputFocus,
           onBlur: handleInputBlur,
-          secureTextEntry: true,
+          secureTextEntry: !showPassword,
+          autoCapitalize: "none",
           testID: "password-input"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.passwordToggle,
+          onPress: () => setShowPassword(!showPassword),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: showPassword ? "eye-off" : "eye",
+            size: 20,
+            color: colors.secondaryText
+          })
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: [styles.modernButton, {
         backgroundColor: colors.primary,
-        opacity: isLoading ? 0.8 : 1,
+        opacity: !password ? 0.5 : 1,
         shadowColor: colors.primary
       }],
       onPress: handleLogin,
-      disabled: isLoading,
+      disabled: !password || isLoading,
       testID: "login-button",
       children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
         color: "#FFFFFF",
@@ -508,9 +693,9 @@ const SignInScreen = ({
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.modernButtonText,
-          children: isAddAccountMode ? 'Add Account' : 'Sign In'
+          children: "Sign In"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "arrow-forward",
+          name: "log-in",
           size: 20,
           color: "#FFFFFF",
           style: styles.buttonIcon
@@ -524,8 +709,8 @@ const SignInScreen = ({
         }],
         onPress: prevStep,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "chevron-back",
-          size: 20,
+          name: "arrow-back",
+          size: 18,
           color: colors.text
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.modernBackButtonText, {
@@ -538,216 +723,123 @@ const SignInScreen = ({
       style: styles.securityNotice,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
         name: "shield-checkmark",
-        size: 16,
+        size: 14,
         color: colors.secondaryText
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.securityText, {
           color: colors.secondaryText
         }],
-        children: "Your connection is secure and encrypted"
+        children: "Your data is encrypted and secure"
       })]
     })]
-  });
-  const renderCurrentStep = () => {
+  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles]);
+  const renderCurrentStep = (0, _react.useCallback)(() => {
     switch (currentStep) {
       case 0:
-        return renderUsernameStep();
+        return renderUsernameStep;
       case 1:
-        return renderPasswordStep();
+        return renderPasswordStep;
       default:
-        return renderUsernameStep();
+        return renderUsernameStep;
     }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.BottomSheetScrollView, {
-    contentContainerStyle: commonStyles.scrollContainer,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.logoContainer, {
-        transform: [{
-          scale: logoAnim
-        }]
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
-        style: {
-          marginBottom: 24
-        },
-        width: 50,
-        height: 50
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernProgressContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.progressTrack,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: [styles.progressFill, {
-            backgroundColor: colors.primary,
-            width: progressAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: ['50%', '100%']
-            })
-          }]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [styles.progressText, {
-          color: colors.secondaryText
-        }],
-        children: ["Step ", currentStep + 1, " of 2"]
-      })]
-    }), renderCurrentStep()]
+  }, [currentStep, renderUsernameStep, renderPasswordStep]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
+    style: [styles.container, {
+      backgroundColor: colors.background
+    }],
+    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
+      barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
+      backgroundColor: colors.background
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: renderCurrentStep()
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  // Legacy styles (keeping for compatibility)
-  title: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 54,
-    marginBottom: 24
-  },
-  formContainer: {
-    width: '100%'
-  },
-  inputContainer: {
-    marginBottom: 16
+
+// Memoized styles creation
+const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
   },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: 8
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 40,
+    paddingBottom: 40
   },
-  footerTextContainer: {
-    flexDirection: 'row',
+  stepContainer: {
+    flex: 1,
     justifyContent: 'center',
-    marginTop: 24
-  },
-  footerText: {
-    fontSize: 14,
-    lineHeight: 20
-  },
-  linkText: {
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: '600'
-  },
-  userInfoContainer: {
-    padding: 20,
-    marginVertical: 20,
-    borderRadius: 35,
-    alignItems: 'center'
-  },
-  userInfoText: {
-    fontSize: 16,
-    lineHeight: 24,
-    textAlign: 'center'
-  },
-  actionButtonsContainer: {
-    marginTop: 20
-  },
-  infoContainer: {
-    padding: 16,
-    marginVertical: 16,
-    borderRadius: 8,
-    alignItems: 'center'
-  },
-  infoText: {
-    fontSize: 14,
-    lineHeight: 20,
-    textAlign: 'center'
-  },
-  // Modern UI Styles
-  logoContainer: {
-    alignItems: 'center',
-    marginBottom: 16
-  },
-  modernProgressContainer: {
     alignItems: 'center',
-    marginBottom: 40,
-    paddingHorizontal: 20
-  },
-  progressTrack: {
-    width: '100%',
-    height: 4,
-    backgroundColor: '#E5E5E5',
-    borderRadius: 2,
-    marginBottom: 8,
-    overflow: 'hidden'
-  },
-  progressFill: {
-    height: '100%',
-    borderRadius: 2
+    minHeight: 600
   },
-  progressText: {
-    fontSize: 12,
-    fontWeight: '500'
-  },
-  stepContainer: {
-    width: '100%',
-    minHeight: 450,
-    paddingHorizontal: 20
-  },
-  // Modern Image Container
   modernImageContainer: {
     alignItems: 'center',
-    marginBottom: 40,
-    paddingVertical: 20
+    marginBottom: 40
   },
   modernHeader: {
-    alignItems: 'center',
-    marginBottom: 24
+    alignItems: 'flex-start',
+    width: '100%',
+    marginBottom: 32
   },
   modernTitle: {
     fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
     fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 54,
-    textAlign: 'center',
-    marginBottom: 8,
-    letterSpacing: -0.5
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
   },
   modernSubtitle: {
-    fontSize: 16,
-    lineHeight: 22,
-    textAlign: 'center',
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
     opacity: 0.8
   },
-  // Modern Cards
   modernInfoCard: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    marginVertical: 16,
-    borderRadius: 12,
-    gap: 12
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%'
   },
   modernInfoText: {
     fontSize: 14,
-    lineHeight: 20,
     flex: 1
   },
   modernErrorCard: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    marginVertical: 16,
-    borderRadius: 12,
-    gap: 12
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%'
   },
   errorText: {
     fontSize: 14,
-    lineHeight: 20,
+    fontWeight: '500',
     flex: 1
   },
-  // Modern Input Styles
   modernInputContainer: {
+    width: '100%',
     marginBottom: 24
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 2,
+    height: 56,
     borderRadius: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 4,
-    backgroundColor: 'rgba(0,0,0,0.02)'
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground
   },
   inputIcon: {
     marginRight: 12
@@ -755,10 +847,34 @@ const styles = _reactNative.StyleSheet.create({
   modernInput: {
     flex: 1,
     fontSize: 16,
-    paddingVertical: 16,
+    height: '100%'
+  },
+  passwordToggle: {
+    padding: 4
+  },
+  validationIndicator: {
+    marginLeft: 8
+  },
+  validationSuccessCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationErrorCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationText: {
+    fontSize: 12,
     fontWeight: '500'
   },
-  // Modern Button Styles
   modernButton: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -774,7 +890,8 @@ const styles = _reactNative.StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8,
     elevation: 6,
-    gap: 8
+    gap: 8,
+    width: '100%'
   },
   modernButtonText: {
     color: '#FFFFFF',
@@ -791,6 +908,14 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: '600',
     textDecorationLine: 'underline'
   },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 28
+  },
+  footerText: {
+    fontSize: 15
+  },
   // Modern User Profile Styles
   modernUserProfileContainer: {
     alignItems: 'center',
@@ -873,83 +998,6 @@ const styles = _reactNative.StyleSheet.create({
   securityText: {
     fontSize: 12,
     fontWeight: '500'
-  },
-  // Legacy compatibility styles
-  progressContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 32,
-    paddingHorizontal: 40
-  },
-  progressDot: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    marginHorizontal: 4
-  },
-  progressLine: {
-    flex: 1,
-    height: 2,
-    marginHorizontal: 8
-  },
-  welcomeImageContainer: {
-    alignItems: 'center',
-    marginBottom: 32
-  },
-  header: {
-    alignItems: 'center',
-    marginBottom: 16
-  },
-  welcomeTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 32,
-    textAlign: 'center',
-    marginBottom: 8
-  },
-  welcomeText: {
-    fontSize: 16,
-    lineHeight: 24,
-    textAlign: 'center',
-    marginBottom: 32,
-    paddingHorizontal: 20
-  },
-  userProfileContainer: {
-    alignItems: 'center',
-    marginBottom: 32,
-    paddingVertical: 20
-  },
-  userAvatar: {
-    marginBottom: 16
-  },
-  userDisplayName: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    marginBottom: 4,
-    textAlign: 'center'
-  },
-  usernameSubtext: {
-    fontSize: 16,
-    textAlign: 'center'
-  },
-  navigationButtons: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 24
-  },
-  backButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 12,
-    borderWidth: 1
-  },
-  backButtonText: {
-    fontSize: 16,
-    fontWeight: '500',
-    marginLeft: 8
   }
 });
 var _default = exports.default = SignInScreen;