@oxyhq/services 5.4.1 → 5.4.3

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

@@ -6,16 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext");
-var _OxyLogo = _interopRequireDefault(require("../components/OxyLogo"));
-var _bottomSheet = require("../components/bottomSheet");
+var _OxyContext = require("../context/OxyContext.js");
+var _index = require("../styles/index.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); }
-// Add icon import
-
 const SignUpScreen = ({
   navigate,
   goBack,
@@ -26,44 +23,143 @@ const SignUpScreen = ({
   const [email, setEmail] = (0, _react.useState)('');
   const [password, setPassword] = (0, _react.useState)('');
   const [confirmPassword, setConfirmPassword] = (0, _react.useState)('');
+  const [showPassword, setShowPassword] = (0, _react.useState)(false);
+  const [showConfirmPassword, setShowConfirmPassword] = (0, _react.useState)(false);
   const [errorMessage, setErrorMessage] = (0, _react.useState)('');
 
   // 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
+  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 heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(400)).current; // Initial height value
-  const [containerHeight, setContainerHeight] = (0, _react.useState)(400); // Default height
-
+  const heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(400)).current;
+  const [containerHeight, setContainerHeight] = (0, _react.useState)(400);
   const {
     signUp,
     isLoading,
     user,
-    isAuthenticated
+    isAuthenticated,
+    oxyServices
   } = (0, _OxyContext.useOxy)();
-  const isDarkTheme = theme === 'dark';
-  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-  const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-  const inputBackgroundColor = isDarkTheme ? '#333333' : '#F5F5F5';
-  const placeholderColor = isDarkTheme ? '#AAAAAA' : '#999999';
-  const primaryColor = '#d169e5';
-  const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
+  const colors = (0, _index.useThemeColors)(theme);
+  const commonStyles = (0, _index.createCommonStyles)(theme);
+
+  // Memoized styles to prevent rerenders
+  const styles = (0, _react.useMemo)(() => createStyles(colors, theme), [colors, theme]);
+
+  // Input focus animations
+  const handleInputFocus = (0, _react.useCallback)(() => {
+    setIsInputFocused(true);
+  }, []);
+  const handleInputBlur = (0, _react.useCallback)(() => {
+    setIsInputFocused(false);
+  }, []);
+
+  // Memoized input change handlers
+  const handleUsernameChange = (0, _react.useCallback)(text => {
+    setUsername(text);
+    if (validationStatus === 'invalid') {
+      setErrorMessage('');
+      setValidationStatus('idle');
+    }
+  }, [validationStatus]);
+  const handleEmailChange = (0, _react.useCallback)(text => {
+    setEmail(text);
+    setErrorMessage('');
+  }, []);
+  const handlePasswordChange = (0, _react.useCallback)(text => {
+    setPassword(text);
+    setErrorMessage('');
+  }, []);
+  const handleConfirmPasswordChange = (0, _react.useCallback)(text => {
+    setConfirmPassword(text);
+    setErrorMessage('');
+  }, []);
+
+  // Username availability validation using core services
+  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) {
+      setValidationStatus(cached.available ? 'valid' : 'invalid');
+      setErrorMessage(cached.available ? '' : 'Username is already taken');
+      return cached.available;
+    }
+    setIsValidating(true);
+    setValidationStatus('validating');
+    try {
+      const result = await oxyServices.checkUsernameAvailability(usernameToValidate);
+      if (result.available) {
+        setValidationStatus('valid');
+        setErrorMessage('');
+
+        // Cache the result
+        validationCache.current.set(usernameToValidate, {
+          available: true,
+          timestamp: now
+        });
+        return true;
+      } else {
+        setValidationStatus('invalid');
+        setErrorMessage(result.message || 'Username is already taken');
+
+        // Cache the result
+        validationCache.current.set(usernameToValidate, {
+          available: false,
+          timestamp: now
+        });
+        return false;
+      }
+    } catch (error) {
+      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
+  (0, _react.useEffect)(() => {
+    if (!username || username.length < 3) {
+      setValidationStatus('idle');
+      setErrorMessage('');
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      validateUsername(username);
+    }, 800);
+    return () => clearTimeout(timeoutId);
+  }, [username, validateUsername]);
+
+  // Cleanup cache on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      validationCache.current.clear();
+    };
+  }, []);
 
-  // If user is already authenticated, show user info and account center option
   // Animation functions
-  const animateTransition = nextStep => {
-    // Fade out
+  const animateTransition = (0, _react.useCallback)(nextStep => {
     _reactNative.Animated.timing(fadeAnim, {
       toValue: 0,
       duration: 250,
       useNativeDriver: true
     }).start(() => {
       setCurrentStep(nextStep);
-
-      // Reset slide position
       slideAnim.setValue(-100);
-
-      // Fade in and slide
       _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
         toValue: 1,
         duration: 250,
@@ -74,63 +170,22 @@ const SignUpScreen = ({
         useNativeDriver: true
       })]).start();
     });
-  };
-  const nextStep = () => {
+  }, [fadeAnim, slideAnim]);
+  const nextStep = (0, _react.useCallback)(() => {
     if (currentStep < 3) {
       animateTransition(currentStep + 1);
     }
-  };
-  const prevStep = () => {
+  }, [currentStep, animateTransition]);
+  const prevStep = (0, _react.useCallback)(() => {
     if (currentStep > 0) {
       animateTransition(currentStep - 1);
     }
-  };
-  if (user && isAuthenticated) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.BottomSheetScrollView, {
-      style: [styles.scrollContainer, {
-        backgroundColor,
-        padding: 20
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [styles.welcomeTitle, {
-          color: textColor,
-          textAlign: 'center'
-        }],
-        children: ["Welcome, ", user.username, "!"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.userInfoContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.userInfoText, {
-            color: textColor
-          }],
-          children: "You are already signed in."
-        }), user.email && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.userInfoText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["Email: ", user.email]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionButtonsContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.button, {
-            backgroundColor: primaryColor
-          }],
-          onPress: () => navigate('AccountCenter'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.buttonText,
-            children: "Go to Account Center"
-          })
-        })
-      })]
-    });
-  }
-  const validateEmail = email => {
+  }, [currentStep, animateTransition]);
+  const validateEmail = (0, _react.useCallback)(email => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
-  };
-  const handleSignUp = async () => {
-    // Validate inputs
+  }, []);
+  const handleSignUp = (0, _react.useCallback)(async () => {
     if (!username || !email || !password || !confirmPassword) {
       _sonner.toast.error('Please fill in all fields');
       return;
@@ -139,6 +194,10 @@ const SignUpScreen = ({
       _sonner.toast.error('Please enter a valid email address');
       return;
     }
+    if (validationStatus !== 'valid') {
+      _sonner.toast.error('Please enter a valid username');
+      return;
+    }
     if (password !== confirmPassword) {
       _sonner.toast.error('Passwords do not match');
       return;
@@ -151,14 +210,13 @@ const SignUpScreen = ({
       setErrorMessage('');
       await signUp(username, email, password);
       _sonner.toast.success('Account created successfully! Welcome to Oxy!');
-      // The authentication state change will be handled through context
     } catch (error) {
       _sonner.toast.error(error.message || 'Sign up failed');
     }
-  };
+  }, [username, email, password, confirmPassword, validationStatus, validateEmail, signUp]);
 
   // Step components
-  const renderWelcomeStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  const renderWelcomeStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -173,26 +231,26 @@ const SignUpScreen = ({
         viewBox: "0 0 220 120",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
           d: "M30 100 Q60 20 110 60 Q160 100 190 40",
-          stroke: "#d169e5",
+          stroke: colors.primary,
           strokeWidth: "8",
           fill: "none"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
           cx: "60",
           cy: "60",
           r: "18",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.18"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
           cx: "110",
           cy: "60",
           r: "24",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.25"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
           cx: "170",
           cy: "50",
           r: "14",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.15"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
           cx: "110",
@@ -204,36 +262,28 @@ const SignUpScreen = ({
           cx: "100",
           cy: "55",
           r: "4",
-          fill: "#d169e5"
+          fill: colors.primary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
           cx: "120",
           cy: "55",
           r: "4",
-          fill: "#d169e5"
+          fill: colors.primary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
           d: "M104 68 Q110 75 116 68",
-          stroke: "#d169e5",
+          stroke: colors.primary,
           strokeWidth: "2",
           fill: "none",
           strokeLinecap: "round"
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.welcomeTitle],
-        children: "Create a Oxy Account"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.placeholder
-      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.welcomeText, {
-        color: textColor
+        color: colors.text
       }],
       children: "We're excited to have you join us. Let's get your account set up in just a few easy steps."
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: [styles.button, {
-        backgroundColor: primaryColor
+        backgroundColor: colors.primary
       }],
       onPress: nextStep,
       testID: "welcome-next-button",
@@ -245,21 +295,21 @@ const SignUpScreen = ({
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: [styles.footerText, {
-          color: textColor
+          color: colors.text
         }],
         children: ["Already have an account?", ' ']
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: () => navigate('SignIn'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.linkText, {
-            color: primaryColor
+            color: colors.primary
           }],
           children: "Sign In"
         })
       })]
     })]
-  });
-  const renderIdentityStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
+  const renderIdentityStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -268,46 +318,93 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Who are you?"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Username"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: [styles.input, {
+            backgroundColor: colors.inputBackground,
+            borderColor: colors.border,
+            color: colors.text
+          }],
+          placeholder: "Choose a username",
+          placeholderTextColor: colors.placeholder,
+          value: username,
+          onChangeText: handleUsernameChange,
+          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
+        })]
+      }), validationStatus === 'valid' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.validationSuccessCard, {
+          backgroundColor: colors.success + '15'
         }],
-        placeholder: "Choose a username",
-        placeholderTextColor: placeholderColor,
-        value: username,
-        onChangeText: setUsername,
-        autoCapitalize: "none",
-        testID: "username-input"
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.success
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.validationText, {
+            color: colors.success
+          }],
+          children: "Username is available"
+        })]
+      }), validationStatus === 'invalid' && username.length >= 3 && /*#__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: errorMessage || 'Username is already taken'
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Email"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
         style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
+          backgroundColor: colors.inputBackground,
+          borderColor: colors.border,
+          color: colors.text
         }],
         placeholder: "Enter your email",
-        placeholderTextColor: placeholderColor,
+        placeholderTextColor: colors.placeholder,
         value: email,
-        onChangeText: setEmail,
+        onChangeText: handleEmailChange,
         autoCapitalize: "none",
         keyboardType: "email-address",
         testID: "email-input"
@@ -315,28 +412,32 @@ const SignUpScreen = ({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.navigationButtons,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: [styles.navButton, styles.nextButton, {
-          backgroundColor: primaryColor
+          backgroundColor: colors.primary
         }],
         onPress: nextStep,
-        disabled: !username || !email || !validateEmail(email),
+        disabled: !username || !email || !validateEmail(email) || validationStatus !== 'valid',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
+          style: [styles.navButtonText, {
+            color: '#FFFFFF'
+          }],
           children: "Next"
         })
       })]
     })]
-  });
-  const renderSecurityStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, colors, username, email, validationStatus, errorMessage, handleUsernameChange, handleEmailChange, validateEmail, prevStep, nextStep, styles]);
+  const renderSecurityStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -345,31 +446,44 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Secure your account"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Password"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Create a password",
-        placeholderTextColor: placeholderColor,
-        value: password,
-        onChangeText: setPassword,
-        secureTextEntry: true,
-        testID: "password-input"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: [styles.input, {
+            backgroundColor: colors.inputBackground,
+            borderColor: colors.border,
+            color: colors.text
+          }],
+          placeholder: "Create a password",
+          placeholderTextColor: colors.placeholder,
+          value: password,
+          onChangeText: handlePasswordChange,
+          secureTextEntry: !showPassword,
+          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.placeholder
+          })
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.passwordHint, {
-          color: isDarkTheme ? '#AAAAAA' : '#666666'
+          color: colors.secondaryText
         }],
         children: "Password must be at least 8 characters long"
       })]
@@ -377,47 +491,64 @@ const SignUpScreen = ({
       style: styles.inputContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Confirm Password"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
-        }],
-        placeholder: "Confirm your password",
-        placeholderTextColor: placeholderColor,
-        value: confirmPassword,
-        onChangeText: setConfirmPassword,
-        secureTextEntry: true,
-        testID: "confirm-password-input"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: [styles.input, {
+            backgroundColor: colors.inputBackground,
+            borderColor: colors.border,
+            color: colors.text
+          }],
+          placeholder: "Confirm your password",
+          placeholderTextColor: colors.placeholder,
+          value: confirmPassword,
+          onChangeText: handleConfirmPasswordChange,
+          secureTextEntry: !showConfirmPassword,
+          testID: "confirm-password-input"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.passwordToggle,
+          onPress: () => setShowConfirmPassword(!showConfirmPassword),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: showConfirmPassword ? 'eye-off' : 'eye',
+            size: 20,
+            color: colors.placeholder
+          })
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.navigationButtons,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: [styles.navButton, styles.nextButton, {
-          backgroundColor: primaryColor
+          backgroundColor: colors.primary
         }],
         onPress: nextStep,
         disabled: !password || password.length < 8 || password !== confirmPassword,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
+          style: [styles.navButtonText, {
+            color: '#FFFFFF'
+          }],
           children: "Next"
         })
       })]
     })]
-  });
-  const renderSummaryStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  }), [fadeAnim, slideAnim, colors, password, confirmPassword, showPassword, showConfirmPassword, handlePasswordChange, handleConfirmPasswordChange, prevStep, nextStep, styles]);
+  const renderSummaryStep = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -426,7 +557,7 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Ready to join"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -435,12 +566,12 @@ const SignUpScreen = ({
         style: styles.summaryRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.summaryLabel, {
-            color: isDarkTheme ? '#AAAAAA' : '#666666'
+            color: colors.secondaryText
           }],
           children: "Username:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.summaryValue, {
-            color: textColor
+            color: colors.text
           }],
           children: username
         })]
@@ -448,118 +579,187 @@ const SignUpScreen = ({
         style: styles.summaryRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.summaryLabel, {
-            color: isDarkTheme ? '#AAAAAA' : '#666666'
+            color: colors.secondaryText
           }],
           children: "Email:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.summaryValue, {
-            color: textColor
+            color: colors.text
           }],
           children: email
         })]
       })]
-    }), errorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.errorContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.errorText,
-        children: errorMessage
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: [styles.button, {
+        backgroundColor: colors.primary
+      }],
+      onPress: handleSignUp,
+      disabled: isLoading,
+      testID: "signup-button",
+      children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        color: "#FFFFFF",
+        size: "small"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.buttonText,
+        children: "Create Account"
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.button, {
-          opacity: isLoading ? 0.8 : 1
-        }],
-        onPress: handleSignUp,
-        disabled: isLoading,
-        testID: "signup-button",
-        children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          color: "#FFFFFF",
-          size: "small"
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.buttonText,
-          children: "Create Account"
-        })
-      })]
+      })
     })]
-  });
-
-  // Progress indicators
-  const renderProgressIndicators = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  }), [fadeAnim, slideAnim, colors, username, email, isLoading, handleSignUp, prevStep, styles]);
+  const renderProgressIndicators = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.progressContainer,
     children: [0, 1, 2, 3].map(step => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.progressDot, currentStep === step ? {
-        backgroundColor: primaryColor,
+        backgroundColor: colors.primary,
         width: 24
       } : {
-        backgroundColor: isDarkTheme ? '#444444' : '#E0E0E0'
+        backgroundColor: colors.border
       }]
     }, step))
-  });
-
-  // Render step based on current step value
-  const renderCurrentStep = () => {
+  }), [currentStep, colors, styles]);
+  const renderCurrentStep = (0, _react.useCallback)(() => {
     switch (currentStep) {
       case 0:
-        return renderWelcomeStep();
+        return renderWelcomeStep;
       case 1:
-        return renderIdentityStep();
+        return renderIdentityStep;
       case 2:
-        return renderSecurityStep();
+        return renderSecurityStep;
       case 3:
-        return renderSummaryStep();
+        return renderSummaryStep;
       default:
-        return null;
+        return renderWelcomeStep;
     }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.BottomSheetScrollView, {
-    contentContainerStyle: styles.scrollContainer,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyLogo.default, {
-      style: {
-        marginBottom: 24
-      },
-      width: 50,
-      height: 50
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.formContainer,
-      children: renderCurrentStep()
-    }), currentStep > 0 && renderProgressIndicators()]
+  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
+
+  // If user is already authenticated, show user info and account center option
+  if (user && isAuthenticated) {
+    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.jsxs)(_reactNative.ScrollView, {
+        contentContainerStyle: styles.scrollContent,
+        showsVerticalScrollIndicator: false,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: [styles.welcomeTitle, {
+            color: colors.text
+          }],
+          children: ["Welcome, ", user.username, "!"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.userInfoContainer, {
+            backgroundColor: colors.inputBackground
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.userInfoText, {
+              color: colors.text
+            }],
+            children: "You are already signed in."
+          }), user.email && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: [styles.userInfoText, {
+              color: colors.secondaryText
+            }],
+            children: ["Email: ", user.email]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.actionButtonsContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: [styles.button, {
+              backgroundColor: colors.primary
+            }],
+            onPress: () => navigate('AccountCenter'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.buttonText,
+              children: "Go to Account Center"
+            })
+          })
+        })]
+      })]
+    });
+  }
+  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.jsxs)(_reactNative.ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: [renderProgressIndicators, renderCurrentStep()]
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  scrollContainer: {
-    padding: 20
+
+// Memoized styles creation
+const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
   },
-  header: {
-    flexDirection: 'row',
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 40,
+    paddingBottom: 40
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'center',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    minHeight: 500
   },
-  placeholder: {
-    width: 40
+  welcomeImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 30
   },
-  formContainer: {
-    width: '100%',
-    marginTop: 8
+  welcomeTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 24,
+    textAlign: 'left',
+    letterSpacing: -1
   },
-  stepContainer: {
-    width: '100%',
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    marginBottom: 8
+  welcomeText: {
+    fontSize: 16,
+    textAlign: 'left',
+    marginBottom: 30,
+    lineHeight: 24
+  },
+  stepTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 34,
+    marginBottom: 20,
+    color: colors.primary,
+    maxWidth: '90%',
+    textAlign: 'left'
   },
   inputContainer: {
-    marginBottom: 18
+    marginBottom: 18,
+    width: '100%'
   },
   label: {
     fontSize: 15,
@@ -573,25 +773,58 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 16,
     borderWidth: 1,
     fontSize: 16,
-    backgroundColor: '#F5F5F5',
-    borderColor: '#E0E0E0',
     marginBottom: 2
   },
+  validationIndicator: {
+    position: 'absolute',
+    right: 16,
+    top: 14
+  },
+  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'
+  },
+  passwordToggle: {
+    position: 'absolute',
+    right: 16,
+    top: 14,
+    padding: 4
+  },
+  passwordHint: {
+    fontSize: 12,
+    marginTop: 4
+  },
   button: {
-    backgroundColor: '#d169e5',
     height: 48,
     borderRadius: 24,
     alignItems: 'center',
     justifyContent: 'center',
     marginTop: 24,
-    shadowColor: '#d169e5',
+    shadowColor: colors.primary,
     shadowOpacity: 0.12,
     shadowOffset: {
       width: 0,
       height: 2
     },
     shadowRadius: 8,
-    elevation: 2
+    elevation: 2,
+    width: '100%'
   },
   buttonText: {
     color: '#FFFFFF',
@@ -605,31 +838,15 @@ const styles = _reactNative.StyleSheet.create({
     marginTop: 28
   },
   footerText: {
-    fontSize: 15,
-    color: '#888'
+    fontSize: 15
   },
   linkText: {
     fontSize: 15,
-    fontWeight: '700',
-    color: '#d169e5'
-  },
-  errorContainer: {
-    backgroundColor: '#FFE4EC',
-    padding: 14,
-    borderRadius: 18,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: '#F8BBD0'
-  },
-  errorText: {
-    color: '#D32F2F',
-    fontSize: 15,
-    fontWeight: '500'
+    fontWeight: '700'
   },
   userInfoContainer: {
     padding: 20,
     marginVertical: 20,
-    backgroundColor: '#F5F5F5',
     borderRadius: 24,
     alignItems: 'center',
     shadowColor: '#000',
@@ -649,44 +866,12 @@ const styles = _reactNative.StyleSheet.create({
   actionButtonsContainer: {
     marginTop: 24
   },
-  // Multi-step form styles
-  welcomeTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    // Only apply fontWeight on web
-    fontSize: 54,
-    marginBottom: 24
-  },
-  welcomeText: {
-    fontSize: 16,
-    textAlign: 'left',
-    marginBottom: 30,
-    lineHeight: 24,
-    color: '#444'
-  },
-  welcomeImageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: 30
-  },
-  stepTitle: {
-    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
-    // Only apply fontWeight on web
-    fontSize: 34,
-    marginBottom: 20,
-    color: '#d169e5',
-    maxWidth: '90%'
-  },
   navigationButtons: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginTop: 28
+    marginTop: 28,
+    width: '100%'
   },
   navButton: {
     borderRadius: 24,
@@ -698,22 +883,14 @@ const styles = _reactNative.StyleSheet.create({
   },
   backButton: {
     backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: '#E0E0E0'
+    borderWidth: 1
   },
   nextButton: {
-    minWidth: 100,
-    backgroundColor: '#d169e5'
+    minWidth: 100
   },
   navButtonText: {
     fontSize: 16,
-    fontWeight: '700',
-    color: '#d169e5'
-  },
-  passwordHint: {
-    fontSize: 12,
-    marginTop: 4,
-    color: '#888'
+    fontWeight: '700'
   },
   progressContainer: {
     flexDirection: 'row',
@@ -726,10 +903,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 10,
     borderRadius: 5,
     marginHorizontal: 6,
-    backgroundColor: '#E0E0E0',
     borderWidth: 2,
     borderColor: '#fff',
-    shadowColor: '#d169e5',
+    shadowColor: colors.primary,
     shadowOpacity: 0.08,
     shadowOffset: {
       width: 0,
@@ -740,7 +916,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   summaryContainer: {
     padding: 0,
-    marginBottom: 24
+    marginBottom: 24,
+    width: '100%'
   },
   summaryRow: {
     flexDirection: 'row',
@@ -748,14 +925,12 @@ const styles = _reactNative.StyleSheet.create({
   },
   summaryLabel: {
     fontSize: 15,
-    width: 90,
-    color: '#888'
+    width: 90
   },
   summaryValue: {
     fontSize: 15,
     fontWeight: '600',
-    flex: 1,
-    color: '#222'
+    flex: 1
   }
 });
 var _default = exports.default = SignUpScreen;