@oxyhq/services 5.4.1 → 5.4.3

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

@@ -1,14 +1,13 @@
 "use strict";
 
-import React, { useState, useRef } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, Animated } from 'react-native';
-import { useOxy } from '../context/OxyContext';
-import OxyLogo from '../components/OxyLogo';
-import { BottomSheetScrollView } from '../components/bottomSheet';
-// Add icon import
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
+import { useOxy } from "../context/OxyContext.js";
+import { useThemeColors, createCommonStyles } from "../styles/index.js";
+import { Ionicons } from '@expo/vector-icons';
 import Svg, { Path, Circle } from 'react-native-svg';
-import { toast } from '../../lib/sonner';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { toast } from "../../lib/sonner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SignUpScreen = ({
   navigate,
   goBack,
@@ -19,44 +18,143 @@ const SignUpScreen = ({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
   // Multi-step form states
   const [currentStep, setCurrentStep] = useState(0);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationStatus, setValidationStatus] = useState('idle');
+
+  // Cache for validation results
+  const validationCache = useRef(new Map());
   const fadeAnim = useRef(new Animated.Value(1)).current;
   const slideAnim = useRef(new Animated.Value(0)).current;
-  const heightAnim = useRef(new Animated.Value(400)).current; // Initial height value
-  const [containerHeight, setContainerHeight] = useState(400); // Default height
-
+  const heightAnim = useRef(new Animated.Value(400)).current;
+  const [containerHeight, setContainerHeight] = useState(400);
   const {
     signUp,
     isLoading,
     user,
-    isAuthenticated
+    isAuthenticated,
+    oxyServices
   } = 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 = useThemeColors(theme);
+  const commonStyles = createCommonStyles(theme);
+
+  // Memoized styles to prevent rerenders
+  const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+
+  // Input focus animations
+  const handleInputFocus = useCallback(() => {
+    setIsInputFocused(true);
+  }, []);
+  const handleInputBlur = useCallback(() => {
+    setIsInputFocused(false);
+  }, []);
+
+  // Memoized input change handlers
+  const handleUsernameChange = useCallback(text => {
+    setUsername(text);
+    if (validationStatus === 'invalid') {
+      setErrorMessage('');
+      setValidationStatus('idle');
+    }
+  }, [validationStatus]);
+  const handleEmailChange = useCallback(text => {
+    setEmail(text);
+    setErrorMessage('');
+  }, []);
+  const handlePasswordChange = useCallback(text => {
+    setPassword(text);
+    setErrorMessage('');
+  }, []);
+  const handleConfirmPasswordChange = useCallback(text => {
+    setConfirmPassword(text);
+    setErrorMessage('');
+  }, []);
+
+  // Username availability validation using core services
+  const validateUsername = 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
+  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
+  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 = useCallback(nextStep => {
     Animated.timing(fadeAnim, {
       toValue: 0,
       duration: 250,
       useNativeDriver: true
     }).start(() => {
       setCurrentStep(nextStep);
-
-      // Reset slide position
       slideAnim.setValue(-100);
-
-      // Fade in and slide
       Animated.parallel([Animated.timing(fadeAnim, {
         toValue: 1,
         duration: 250,
@@ -67,63 +165,22 @@ const SignUpScreen = ({
         useNativeDriver: true
       })]).start();
     });
-  };
-  const nextStep = () => {
+  }, [fadeAnim, slideAnim]);
+  const nextStep = useCallback(() => {
     if (currentStep < 3) {
       animateTransition(currentStep + 1);
     }
-  };
-  const prevStep = () => {
+  }, [currentStep, animateTransition]);
+  const prevStep = useCallback(() => {
     if (currentStep > 0) {
       animateTransition(currentStep - 1);
     }
-  };
-  if (user && isAuthenticated) {
-    return /*#__PURE__*/_jsxs(BottomSheetScrollView, {
-      style: [styles.scrollContainer, {
-        backgroundColor,
-        padding: 20
-      }],
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: [styles.welcomeTitle, {
-          color: textColor,
-          textAlign: 'center'
-        }],
-        children: ["Welcome, ", user.username, "!"]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.userInfoContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.userInfoText, {
-            color: textColor
-          }],
-          children: "You are already signed in."
-        }), user.email && /*#__PURE__*/_jsxs(Text, {
-          style: [styles.userInfoText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["Email: ", user.email]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.actionButtonsContainer,
-        children: /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.button, {
-            backgroundColor: primaryColor
-          }],
-          onPress: () => navigate('AccountCenter'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.buttonText,
-            children: "Go to Account Center"
-          })
-        })
-      })]
-    });
-  }
-  const validateEmail = email => {
+  }, [currentStep, animateTransition]);
+  const validateEmail = useCallback(email => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return emailRegex.test(email);
-  };
-  const handleSignUp = async () => {
-    // Validate inputs
+  }, []);
+  const handleSignUp = useCallback(async () => {
     if (!username || !email || !password || !confirmPassword) {
       toast.error('Please fill in all fields');
       return;
@@ -132,6 +189,10 @@ const SignUpScreen = ({
       toast.error('Please enter a valid email address');
       return;
     }
+    if (validationStatus !== 'valid') {
+      toast.error('Please enter a valid username');
+      return;
+    }
     if (password !== confirmPassword) {
       toast.error('Passwords do not match');
       return;
@@ -144,14 +205,13 @@ const SignUpScreen = ({
       setErrorMessage('');
       await signUp(username, email, password);
       toast.success('Account created successfully! Welcome to Oxy!');
-      // The authentication state change will be handled through context
     } catch (error) {
       toast.error(error.message || 'Sign up failed');
     }
-  };
+  }, [username, email, password, confirmPassword, validationStatus, validateEmail, signUp]);
 
   // Step components
-  const renderWelcomeStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  const renderWelcomeStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -166,26 +226,26 @@ const SignUpScreen = ({
         viewBox: "0 0 220 120",
         children: [/*#__PURE__*/_jsx(Path, {
           d: "M30 100 Q60 20 110 60 Q160 100 190 40",
-          stroke: "#d169e5",
+          stroke: colors.primary,
           strokeWidth: "8",
           fill: "none"
         }), /*#__PURE__*/_jsx(Circle, {
           cx: "60",
           cy: "60",
           r: "18",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.18"
         }), /*#__PURE__*/_jsx(Circle, {
           cx: "110",
           cy: "60",
           r: "24",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.25"
         }), /*#__PURE__*/_jsx(Circle, {
           cx: "170",
           cy: "50",
           r: "14",
-          fill: "#d169e5",
+          fill: colors.primary,
           opacity: "0.15"
         }), /*#__PURE__*/_jsx(Circle, {
           cx: "110",
@@ -197,36 +257,28 @@ const SignUpScreen = ({
           cx: "100",
           cy: "55",
           r: "4",
-          fill: "#d169e5"
+          fill: colors.primary
         }), /*#__PURE__*/_jsx(Circle, {
           cx: "120",
           cy: "55",
           r: "4",
-          fill: "#d169e5"
+          fill: colors.primary
         }), /*#__PURE__*/_jsx(Path, {
           d: "M104 68 Q110 75 116 68",
-          stroke: "#d169e5",
+          stroke: colors.primary,
           strokeWidth: "2",
           fill: "none",
           strokeLinecap: "round"
         })]
       })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.welcomeTitle],
-        children: "Create a Oxy Account"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.placeholder
-      })]
     }), /*#__PURE__*/_jsx(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__*/_jsx(TouchableOpacity, {
       style: [styles.button, {
-        backgroundColor: primaryColor
+        backgroundColor: colors.primary
       }],
       onPress: nextStep,
       testID: "welcome-next-button",
@@ -238,21 +290,21 @@ const SignUpScreen = ({
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/_jsxs(Text, {
         style: [styles.footerText, {
-          color: textColor
+          color: colors.text
         }],
         children: ["Already have an account?", ' ']
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: () => navigate('SignIn'),
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.linkText, {
-            color: primaryColor
+            color: colors.primary
           }],
           children: "Sign In"
         })
       })]
     })]
-  });
-  const renderIdentityStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
+  const renderIdentityStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -261,46 +313,93 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/_jsx(Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Who are you?"
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Username"
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.input, {
-          backgroundColor: inputBackgroundColor,
-          borderColor,
-          color: textColor
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(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__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: colors.primary,
+          style: styles.validationIndicator
+        }), validationStatus === 'valid' && /*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 20,
+          color: colors.success,
+          style: styles.validationIndicator
+        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsx(Ionicons, {
+          name: "close-circle",
+          size: 20,
+          color: colors.error,
+          style: styles.validationIndicator
+        })]
+      }), validationStatus === 'valid' && /*#__PURE__*/_jsxs(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__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.success
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.success
+          }],
+          children: "Username is available"
+        })]
+      }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsxs(View, {
+        style: [styles.validationErrorCard, {
+          backgroundColor: colors.error + '15'
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "alert-circle",
+          size: 16,
+          color: colors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.error
+          }],
+          children: errorMessage || 'Username is already taken'
+        })]
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Email"
       }), /*#__PURE__*/_jsx(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"
@@ -308,28 +407,32 @@ const SignUpScreen = ({
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.navigationButtons,
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
       }), /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-          style: styles.navButtonText,
+          style: [styles.navButtonText, {
+            color: '#FFFFFF'
+          }],
           children: "Next"
         })
       })]
     })]
-  });
-  const renderSecurityStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, colors, username, email, validationStatus, errorMessage, handleUsernameChange, handleEmailChange, validateEmail, prevStep, nextStep, styles]);
+  const renderSecurityStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -338,31 +441,44 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/_jsx(Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Secure your account"
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.inputContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Password"
-      }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(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__*/_jsx(TouchableOpacity, {
+          style: styles.passwordToggle,
+          onPress: () => setShowPassword(!showPassword),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: showPassword ? 'eye-off' : 'eye',
+            size: 20,
+            color: colors.placeholder
+          })
+        })]
       }), /*#__PURE__*/_jsx(Text, {
         style: [styles.passwordHint, {
-          color: isDarkTheme ? '#AAAAAA' : '#666666'
+          color: colors.secondaryText
         }],
         children: "Password must be at least 8 characters long"
       })]
@@ -370,47 +486,64 @@ const SignUpScreen = ({
       style: styles.inputContainer,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
-          color: textColor
+          color: colors.text
         }],
         children: "Confirm Password"
-      }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(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__*/_jsx(TouchableOpacity, {
+          style: styles.passwordToggle,
+          onPress: () => setShowConfirmPassword(!showConfirmPassword),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: showConfirmPassword ? 'eye-off' : 'eye',
+            size: 20,
+            color: colors.placeholder
+          })
+        })]
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.navigationButtons,
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: [styles.navButton, styles.nextButton, {
-          backgroundColor: primaryColor
+          backgroundColor: colors.primary
         }],
         onPress: nextStep,
         disabled: !password || password.length < 8 || password !== confirmPassword,
         children: /*#__PURE__*/_jsx(Text, {
-          style: styles.navButtonText,
+          style: [styles.navButtonText, {
+            color: '#FFFFFF'
+          }],
           children: "Next"
         })
       })]
     })]
-  });
-  const renderSummaryStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, colors, password, confirmPassword, showPassword, showConfirmPassword, handlePasswordChange, handleConfirmPasswordChange, prevStep, nextStep, styles]);
+  const renderSummaryStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -419,7 +552,7 @@ const SignUpScreen = ({
     }],
     children: [/*#__PURE__*/_jsx(Text, {
       style: [styles.stepTitle, {
-        color: textColor
+        color: colors.text
       }],
       children: "Ready to join"
     }), /*#__PURE__*/_jsxs(View, {
@@ -428,12 +561,12 @@ const SignUpScreen = ({
         style: styles.summaryRow,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.summaryLabel, {
-            color: isDarkTheme ? '#AAAAAA' : '#666666'
+            color: colors.secondaryText
           }],
           children: "Username:"
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.summaryValue, {
-            color: textColor
+            color: colors.text
           }],
           children: username
         })]
@@ -441,118 +574,187 @@ const SignUpScreen = ({
         style: styles.summaryRow,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.summaryLabel, {
-            color: isDarkTheme ? '#AAAAAA' : '#666666'
+            color: colors.secondaryText
           }],
           children: "Email:"
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.summaryValue, {
-            color: textColor
+            color: colors.text
           }],
           children: email
         })]
       })]
-    }), errorMessage ? /*#__PURE__*/_jsx(View, {
-      style: styles.errorContainer,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.errorText,
-        children: errorMessage
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [styles.button, {
+        backgroundColor: colors.primary
+      }],
+      onPress: handleSignUp,
+      disabled: isLoading,
+      testID: "signup-button",
+      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: "#FFFFFF",
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: styles.buttonText,
+        children: "Create Account"
       })
-    }) : null, /*#__PURE__*/_jsxs(View, {
+    }), /*#__PURE__*/_jsx(View, {
       style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
+      children: /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.navButton, styles.backButton, {
+          borderColor: colors.border
+        }],
         onPress: prevStep,
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.navButtonText, {
-            color: textColor
+            color: colors.text
           }],
           children: "Back"
         })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.button, {
-          opacity: isLoading ? 0.8 : 1
-        }],
-        onPress: handleSignUp,
-        disabled: isLoading,
-        testID: "signup-button",
-        children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          color: "#FFFFFF",
-          size: "small"
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.buttonText,
-          children: "Create Account"
-        })
-      })]
+      })
     })]
-  });
-
-  // Progress indicators
-  const renderProgressIndicators = () => /*#__PURE__*/_jsx(View, {
+  }), [fadeAnim, slideAnim, colors, username, email, isLoading, handleSignUp, prevStep, styles]);
+  const renderProgressIndicators = useMemo(() => /*#__PURE__*/_jsx(View, {
     style: styles.progressContainer,
     children: [0, 1, 2, 3].map(step => /*#__PURE__*/_jsx(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 = 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__*/_jsxs(BottomSheetScrollView, {
-    contentContainerStyle: styles.scrollContainer,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/_jsx(OxyLogo, {
-      style: {
-        marginBottom: 24
-      },
-      width: 50,
-      height: 50
-    }), /*#__PURE__*/_jsx(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__*/_jsxs(KeyboardAvoidingView, {
+      style: [styles.container, {
+        backgroundColor: colors.background
+      }],
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      children: [/*#__PURE__*/_jsx(StatusBar, {
+        barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
+        backgroundColor: colors.background
+      }), /*#__PURE__*/_jsxs(ScrollView, {
+        contentContainerStyle: styles.scrollContent,
+        showsVerticalScrollIndicator: false,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [styles.welcomeTitle, {
+            color: colors.text
+          }],
+          children: ["Welcome, ", user.username, "!"]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.userInfoContainer, {
+            backgroundColor: colors.inputBackground
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.userInfoText, {
+              color: colors.text
+            }],
+            children: "You are already signed in."
+          }), user.email && /*#__PURE__*/_jsxs(Text, {
+            style: [styles.userInfoText, {
+              color: colors.secondaryText
+            }],
+            children: ["Email: ", user.email]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.actionButtonsContainer,
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.button, {
+              backgroundColor: colors.primary
+            }],
+            onPress: () => navigate('AccountCenter'),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.buttonText,
+              children: "Go to Account Center"
+            })
+          })
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+    style: [styles.container, {
+      backgroundColor: colors.background
+    }],
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: theme === 'dark' ? 'light-content' : 'dark-content',
+      backgroundColor: colors.background
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: [renderProgressIndicators, renderCurrentStep()]
+    })]
   });
 };
-const styles = StyleSheet.create({
-  scrollContainer: {
-    padding: 20
+
+// Memoized styles creation
+const createStyles = (colors, theme) => 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: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: 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: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: 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,
@@ -566,25 +768,58 @@ const styles = 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',
@@ -598,31 +833,15 @@ const styles = 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',
@@ -642,44 +861,12 @@ const styles = StyleSheet.create({
   actionButtonsContainer: {
     marginTop: 24
   },
-  // Multi-step form styles
-  welcomeTitle: {
-    fontFamily: Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: 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: Platform.OS === 'web' ? 'Phudu' // Use CSS font name directly for web
-    : 'Phudu-Bold',
-    // Use exact font name as registered with Font.loadAsync
-    fontWeight: 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,
@@ -691,22 +878,14 @@ const styles = 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',
@@ -719,10 +898,9 @@ const styles = 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,
@@ -733,7 +911,8 @@ const styles = StyleSheet.create({
   },
   summaryContainer: {
     padding: 0,
-    marginBottom: 24
+    marginBottom: 24,
+    width: '100%'
   },
   summaryRow: {
     flexDirection: 'row',
@@ -741,14 +920,12 @@ const styles = StyleSheet.create({
   },
   summaryLabel: {
     fontSize: 15,
-    width: 90,
-    color: '#888'
+    width: 90
   },
   summaryValue: {
     fontSize: 15,
     fontWeight: '600',
-    flex: 1,
-    color: '#222'
+    flex: 1
   }
 });
 export default SignUpScreen;