@oxyhq/services 5.4.2 → 5.4.4

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

@@ -0,0 +1,1036 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _OxyContext = require("../context/OxyContext");
+var _styles = require("../styles");
+var _vectorIcons = require("@expo/vector-icons");
+var _sonner = require("../../lib/sonner");
+var _HighFive = _interopRequireDefault(require("../../assets/illustrations/HighFive"));
+var _GroupedPillButtons = _interopRequireDefault(require("../components/internal/GroupedPillButtons"));
+var _TextField = _interopRequireDefault(require("../components/internal/TextField"));
+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); }
+// Types for better type safety
+
+// Constants
+const USERNAME_MIN_LENGTH = 3;
+const PASSWORD_MIN_LENGTH = 8;
+const VALIDATION_DEBOUNCE_MS = 800;
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
+
+// Email validation regex
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Styles factory function
+const createStyles = (colors, theme) => _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 4,
+    paddingBottom: 20
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  modernHeader: {
+    alignItems: 'flex-start',
+    width: '100%',
+    marginBottom: 24
+  },
+  modernTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  welcomeImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20
+  },
+  welcomeTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  welcomeText: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24
+  },
+  stepTitle: {
+    fontFamily: _reactNative.Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 48,
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  inputContainer: {
+    width: '100%',
+    marginBottom: 24
+  },
+  premiumInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground
+  },
+  inputIcon: {
+    marginRight: 12
+  },
+  inputContent: {
+    flex: 1
+  },
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
+  modernInput: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%'
+  },
+  validationIndicator: {
+    marginLeft: 8
+  },
+  validationCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationIconContainer: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12
+  },
+  validationTextContainer: {
+    flex: 1
+  },
+  validationTitle: {
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 2
+  },
+  validationSubtitle: {
+    fontSize: 11,
+    opacity: 0.8
+  },
+  passwordToggle: {
+    padding: 4
+  },
+  passwordHint: {
+    fontSize: 12,
+    marginTop: 4
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    marginVertical: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+    gap: 8,
+    width: '100%'
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5
+  },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16
+  },
+  footerText: {
+    fontSize: 15
+  },
+  linkText: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    textDecorationLine: 'underline'
+  },
+  userInfoContainer: {
+    padding: 20,
+    marginVertical: 20,
+    borderRadius: 24,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOpacity: 0.04,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 4,
+    elevation: 1
+  },
+  userInfoText: {
+    fontSize: 16,
+    marginBottom: 8,
+    textAlign: 'center'
+  },
+  actionButtonsContainer: {
+    marginTop: 24
+  },
+  navigationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
+  },
+  navButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 6,
+    minWidth: 70,
+    borderWidth: 1,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  backButton: {
+    backgroundColor: 'transparent',
+    borderTopLeftRadius: 35,
+    borderBottomLeftRadius: 35,
+    borderTopRightRadius: 12,
+    borderBottomRightRadius: 12
+  },
+  nextButton: {
+    backgroundColor: 'transparent',
+    borderTopRightRadius: 35,
+    borderBottomRightRadius: 35,
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12
+  },
+  navButtonText: {
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 20,
+    marginTop: 8
+  },
+  progressDot: {
+    height: 10,
+    width: 10,
+    borderRadius: 5,
+    marginHorizontal: 6,
+    borderWidth: 2,
+    borderColor: '#fff',
+    shadowColor: colors.primary,
+    shadowOpacity: 0.08,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 2,
+    elevation: 1
+  },
+  summaryContainer: {
+    padding: 0,
+    marginBottom: 24,
+    width: '100%'
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    marginBottom: 10
+  },
+  summaryLabel: {
+    fontSize: 15,
+    width: 90
+  },
+  summaryValue: {
+    fontSize: 15,
+    fontWeight: '600',
+    flex: 1
+  }
+});
+
+// Custom hooks for better separation of concerns
+const useFormValidation = oxyServices => {
+  const [validationState, setValidationState] = (0, _react.useState)({
+    status: 'idle',
+    message: ''
+  });
+  const validationCache = (0, _react.useRef)(new Map());
+  const validateUsername = (0, _react.useCallback)(async username => {
+    if (!username || username.length < USERNAME_MIN_LENGTH) {
+      setValidationState({
+        status: 'invalid',
+        message: ''
+      });
+      return false;
+    }
+
+    // Check cache first
+    const cached = validationCache.current.get(username);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < CACHE_DURATION_MS) {
+      const isValid = cached.available;
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : 'Username is already taken'
+      });
+      return isValid;
+    }
+    setValidationState({
+      status: 'validating',
+      message: ''
+    });
+    try {
+      const result = await oxyServices.checkUsernameAvailability(username);
+      const isValid = result.available;
+
+      // Cache the result
+      validationCache.current.set(username, {
+        available: isValid,
+        timestamp: now
+      });
+      setValidationState({
+        status: isValid ? 'valid' : 'invalid',
+        message: isValid ? '' : result.message || 'Username is already taken'
+      });
+      return isValid;
+    } catch (error) {
+      console.error('Username validation error:', error);
+      setValidationState({
+        status: 'invalid',
+        message: 'Unable to validate username. Please try again.'
+      });
+      return false;
+    }
+  }, [oxyServices]);
+  const validateEmail = (0, _react.useCallback)(email => {
+    return EMAIL_REGEX.test(email);
+  }, []);
+  const validatePassword = (0, _react.useCallback)(password => {
+    return password.length >= PASSWORD_MIN_LENGTH;
+  }, []);
+  const validatePasswordsMatch = (0, _react.useCallback)((password, confirmPassword) => {
+    return password === confirmPassword;
+  }, []);
+
+  // Cleanup cache on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      validationCache.current.clear();
+    };
+  }, []);
+  return {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  };
+};
+const useFormData = () => {
+  const [formData, setFormData] = (0, _react.useState)({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [passwordVisibility, setPasswordVisibility] = (0, _react.useState)({
+    password: false,
+    confirmPassword: false
+  });
+  const updateField = (0, _react.useCallback)((field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  }, []);
+  const togglePasswordVisibility = (0, _react.useCallback)(field => {
+    setPasswordVisibility(prev => ({
+      ...prev,
+      [field]: !prev[field]
+    }));
+  }, []);
+  const resetForm = (0, _react.useCallback)(() => {
+    setFormData({
+      username: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    });
+    setPasswordVisibility({
+      password: false,
+      confirmPassword: false
+    });
+  }, []);
+  return {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  };
+};
+
+// Reusable components
+const ValidationIndicator = /*#__PURE__*/_react.default.memo(({
+  status,
+  colors,
+  styles
+}) => {
+  if (status === 'validating') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      size: "small",
+      color: colors.primary,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'valid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "checkmark-circle",
+      size: 22,
+      color: colors.success,
+      style: styles.validationIndicator
+    });
+  }
+  if (status === 'invalid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "close-circle",
+      size: 22,
+      color: colors.error,
+      style: styles.validationIndicator
+    });
+  }
+  return null;
+});
+const ValidationMessage = /*#__PURE__*/_react.default.memo(({
+  validationState,
+  colors,
+  styles
+}) => {
+  if (validationState.status === 'idle' || !validationState.message) return null;
+  const isSuccess = validationState.status === 'valid';
+  const backgroundColor = isSuccess ? colors.success + '10' : colors.error + '10';
+  const borderColor = isSuccess ? colors.success + '30' : colors.error + '30';
+  const iconColor = isSuccess ? colors.success : colors.error;
+  const iconName = isSuccess ? 'checkmark-circle' : 'alert-circle';
+  const title = isSuccess ? 'Username Available' : 'Username Taken';
+  const subtitle = isSuccess ? 'Good choice! This username is available' : validationState.message;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.validationCard, {
+      backgroundColor,
+      borderColor
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.validationIconContainer, {
+        backgroundColor: iconColor + '20'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: iconName,
+        size: 16,
+        color: iconColor
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.validationTextContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.validationTitle, {
+          color: iconColor
+        }],
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.validationSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: subtitle
+      })]
+    })]
+  });
+});
+const FormInput = /*#__PURE__*/_react.default.memo(({
+  icon,
+  label,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  keyboardType = 'default',
+  autoCapitalize = 'sentences',
+  autoCorrect = true,
+  testID,
+  colors,
+  styles,
+  borderColor,
+  rightComponent
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.inputContainer,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.premiumInputWrapper, {
+      borderColor: borderColor || colors.border,
+      backgroundColor: colors.inputBackground,
+      shadowColor: colors.primary,
+      shadowOffset: {
+        width: 0,
+        height: 4
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 12,
+      elevation: 3
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: icon,
+      size: 22,
+      color: colors.secondaryText,
+      style: styles.inputIcon
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inputContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernLabel, {
+          color: colors.secondaryText
+        }],
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: [styles.modernInput, {
+          color: colors.text
+        }],
+        value: value,
+        onChangeText: onChangeText,
+        secureTextEntry: secureTextEntry,
+        keyboardType: keyboardType,
+        autoCapitalize: autoCapitalize,
+        autoCorrect: autoCorrect,
+        testID: testID,
+        placeholderTextColor: "transparent"
+      })]
+    }), rightComponent]
+  })
+}));
+const ProgressIndicator = /*#__PURE__*/_react.default.memo(({
+  currentStep,
+  totalSteps,
+  colors,
+  styles
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.progressContainer,
+  children: Array.from({
+    length: totalSteps
+  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.progressDot, currentStep === index ? {
+      backgroundColor: colors.primary,
+      width: 24
+    } : {
+      backgroundColor: colors.border
+    }]
+  }, index))
+}));
+
+// Main component
+const SignUpScreen = ({
+  navigate,
+  goBack,
+  onAuthenticated,
+  theme
+}) => {
+  const {
+    signUp,
+    isLoading,
+    user,
+    isAuthenticated,
+    oxyServices
+  } = (0, _OxyContext.useOxy)();
+  const colors = (0, _styles.useThemeColors)(theme);
+
+  // Form state
+  const {
+    formData,
+    passwordVisibility,
+    updateField,
+    togglePasswordVisibility,
+    resetForm
+  } = useFormData();
+  const {
+    validationState,
+    validateUsername,
+    validateEmail,
+    validatePassword,
+    validatePasswordsMatch
+  } = useFormValidation(oxyServices);
+
+  // UI state
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+
+  // Animation refs
+  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+
+  // Memoized styles
+  const styles = (0, _react.useMemo)(() => createStyles(colors, theme), [colors, theme]);
+
+  // Debounced username validation
+  (0, _react.useEffect)(() => {
+    if (!formData.username || formData.username.length < USERNAME_MIN_LENGTH) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      validateUsername(formData.username);
+    }, VALIDATION_DEBOUNCE_MS);
+    return () => clearTimeout(timeoutId);
+  }, [formData.username, validateUsername]);
+
+  // Animation functions
+  const animateTransition = (0, _react.useCallback)(nextStep => {
+    _reactNative.Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start(() => {
+      setCurrentStep(nextStep);
+      slideAnim.setValue(-100);
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      })]).start();
+    });
+  }, [fadeAnim, slideAnim]);
+  const nextStep = (0, _react.useCallback)(() => {
+    if (currentStep < 3) {
+      animateTransition(currentStep + 1);
+    }
+  }, [currentStep, animateTransition]);
+  const prevStep = (0, _react.useCallback)(() => {
+    if (currentStep > 0) {
+      animateTransition(currentStep - 1);
+    }
+  }, [currentStep, animateTransition]);
+
+  // Form validation helpers
+  const isIdentityStepValid = (0, _react.useCallback)(() => {
+    return formData.username && formData.email && validateEmail(formData.email) && validationState.status === 'valid';
+  }, [formData.username, formData.email, validateEmail, validationState.status]);
+  const isSecurityStepValid = (0, _react.useCallback)(() => {
+    return formData.password && validatePassword(formData.password) && validatePasswordsMatch(formData.password, formData.confirmPassword);
+  }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
+
+  // Custom next handlers for validation
+  const handleIdentityNext = (0, _react.useCallback)(() => {
+    if (!isIdentityStepValid()) {
+      _sonner.toast.error('Please enter a valid username and email.');
+      return;
+    }
+    nextStep();
+  }, [isIdentityStepValid, nextStep]);
+  const handleSecurityNext = (0, _react.useCallback)(() => {
+    if (!isSecurityStepValid()) {
+      _sonner.toast.error('Please enter a valid password and confirm it.');
+      return;
+    }
+    nextStep();
+  }, [isSecurityStepValid, nextStep]);
+
+  // Sign up handler
+  const handleSignUp = (0, _react.useCallback)(async () => {
+    if (!isIdentityStepValid() || !isSecurityStepValid()) {
+      _sonner.toast.error('Please fill in all fields correctly');
+      return;
+    }
+    try {
+      setErrorMessage('');
+      const user = await signUp(formData.username, formData.email, formData.password);
+      _sonner.toast.success('Account created successfully! Welcome to Oxy!');
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
+      resetForm();
+    } catch (error) {
+      _sonner.toast.error(error.message || 'Sign up failed');
+    }
+  }, [formData, isIdentityStepValid, isSecurityStepValid, signUp, onAuthenticated, resetForm]);
+
+  // Step components
+  const renderWelcomeStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
+      width: 100,
+      height: 100
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernTitle, {
+          color: colors.text
+        }],
+        children: "Welcome to Oxy"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.modernSubtitle, {
+          color: colors.secondaryText
+        }],
+        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)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Get Started',
+        onPress: nextStep,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        testID: 'welcome-next-button'
+      }],
+      colors: colors
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.footerTextContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: [styles.footerText, {
+          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: colors.primary
+          }],
+          children: "Sign In"
+        })
+      })]
+    })]
+  }), [fadeAnim, slideAnim, colors, nextStep, navigate, styles]);
+  const renderIdentityStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
+          color: colors.text
+        }],
+        children: "Who are you?"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "person-outline",
+      label: "Username",
+      value: formData.username,
+      onChangeText: text => {
+        updateField('username', text);
+        setErrorMessage('');
+      },
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "username-input",
+      colors: colors,
+      variant: "filled",
+      error: validationState.status === 'invalid' ? validationState.message : undefined,
+      loading: validationState.status === 'validating',
+      success: validationState.status === 'valid'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationMessage, {
+      validationState: validationState,
+      colors: colors,
+      styles: styles
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "mail-outline",
+      label: "Email",
+      value: formData.email,
+      onChangeText: text => {
+        updateField('email', text);
+      },
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "email-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleIdentityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
+    })]
+  }), [fadeAnim, slideAnim, colors, formData, validationState, updateField, setErrorMessage, prevStep, handleIdentityNext, styles]);
+  const renderSecurityStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
+          color: colors.text
+        }],
+        children: "Secure your account"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "lock-closed-outline",
+      label: "Password",
+      value: formData.password,
+      onChangeText: text => {
+        updateField('password', text);
+      },
+      secureTextEntry: !passwordVisibility.password,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.password && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.passwordHint, {
+        color: colors.secondaryText
+      }],
+      children: ["Password must be at least ", PASSWORD_MIN_LENGTH, " characters long"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      icon: "lock-closed-outline",
+      label: "Confirm Password",
+      value: formData.confirmPassword,
+      onChangeText: text => {
+        updateField('confirmPassword', text);
+      },
+      secureTextEntry: !passwordVisibility.confirmPassword,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      testID: "confirm-password-input",
+      colors: colors,
+      variant: "filled",
+      error: formData.confirmPassword && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Next',
+        onPress: handleSecurityNext,
+        icon: 'arrow-forward',
+        variant: 'primary'
+      }],
+      colors: colors
+    })]
+  }), [fadeAnim, slideAnim, colors, formData, passwordVisibility, updateField, setErrorMessage, togglePasswordVisibility, prevStep, handleSecurityNext, styles]);
+  const renderSummaryStep = (0, _react.useCallback)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }]
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.modernHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.stepTitle, {
+          color: colors.text
+        }],
+        children: "Ready to join"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.summaryContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.summaryRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.summaryLabel, {
+            color: colors.secondaryText
+          }],
+          children: "Username:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.summaryValue, {
+            color: colors.text
+          }],
+          children: formData.username
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.summaryRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.summaryLabel, {
+            color: colors.secondaryText
+          }],
+          children: "Email:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.summaryValue, {
+            color: colors.text
+          }],
+          children: formData.email
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Create Account',
+        onPress: handleSignUp,
+        icon: 'checkmark',
+        variant: 'primary',
+        disabled: isLoading,
+        loading: isLoading,
+        testID: 'signup-button'
+      }],
+      colors: colors
+    })]
+  }), [fadeAnim, slideAnim, colors, formData, isLoading, handleSignUp, prevStep, styles]);
+
+  // If user is already authenticated, show user info
+  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"
+            })
+          })
+        })]
+      })]
+    });
+  }
+
+  // Render current step
+  const renderCurrentStep = (0, _react.useCallback)(() => {
+    switch (currentStep) {
+      case 0:
+        return renderWelcomeStep();
+      case 1:
+        return renderIdentityStep();
+      case 2:
+        return renderSecurityStep();
+      case 3:
+        return renderSummaryStep();
+      default:
+        return renderWelcomeStep();
+    }
+  }, [currentStep, renderWelcomeStep, renderIdentityStep, renderSecurityStep, renderSummaryStep]);
+  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: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressIndicator, {
+        currentStep: currentStep,
+        totalSteps: 4,
+        colors: colors,
+        styles: styles
+      }), renderCurrentStep()]
+    })]
+  });
+};
+var _default = exports.default = SignUpScreen;
+//# sourceMappingURL=SignUpScreen.js.map