@oxyhq/services 5.4.2 → 5.4.4

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

@@ -0,0 +1,876 @@
+"use strict";
+
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { View, Text, StyleSheet, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
+import { useOxy } from '../context/OxyContext';
+import { useThemeColors, createCommonStyles } from '../styles';
+import Avatar from '../components/Avatar';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../assets/illustrations/HighFive';
+import { toast } from '../../lib/sonner';
+import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import TextField from '../components/internal/TextField';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SignInScreen = ({
+  navigate,
+  goBack,
+  onAuthenticated,
+  theme
+}) => {
+  // Form data states
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [userProfile, setUserProfile] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // 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 to prevent repeated API calls
+  const validationCache = useRef(new Map());
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const inputScaleAnim = useRef(new Animated.Value(1)).current;
+  const logoAnim = useRef(new Animated.Value(0)).current;
+  const progressAnim = useRef(new Animated.Value(0.5)).current;
+  const {
+    login,
+    isLoading,
+    user,
+    isAuthenticated,
+    sessions,
+    oxyServices
+  } = useOxy();
+  const colors = useThemeColors(theme);
+  const commonStyles = createCommonStyles(theme);
+
+  // Check if this should be treated as "Add Account" mode
+  const isAddAccountMode = useMemo(() => user && isAuthenticated && sessions && sessions.length > 0, [user, isAuthenticated, sessions]);
+
+  // Memoized styles to prevent rerenders
+  const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+
+  // Initialize logo animation
+  useEffect(() => {
+    Animated.spring(logoAnim, {
+      toValue: 1,
+      tension: 50,
+      friction: 8,
+      useNativeDriver: true
+    }).start();
+  }, [logoAnim]);
+
+  // Input focus animations
+  const handleInputFocus = useCallback(() => {
+    setIsInputFocused(true);
+    Animated.spring(inputScaleAnim, {
+      toValue: 1.02,
+      useNativeDriver: true
+    }).start();
+  }, [inputScaleAnim]);
+  const handleInputBlur = useCallback(() => {
+    setIsInputFocused(false);
+    Animated.spring(inputScaleAnim, {
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [inputScaleAnim]);
+
+  // Memoized input change handlers to prevent re-renders
+  const handleUsernameChange = useCallback(text => {
+    setUsername(text);
+    // Only clear error if we're changing from an invalid state
+    if (validationStatus === 'invalid') {
+      setErrorMessage('');
+      setValidationStatus('idle');
+    }
+  }, [validationStatus]);
+  const handlePasswordChange = useCallback(text => {
+    setPassword(text);
+    setErrorMessage(''); // Clear error when user types
+  }, []);
+
+  // Username validation using core services with caching
+  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) {
+      setUserProfile(cached.profile);
+      setValidationStatus('valid');
+      setErrorMessage('');
+      return true;
+    }
+    setIsValidating(true);
+    setValidationStatus('validating');
+    try {
+      // First check if username exists by trying to get profile
+      const profile = await oxyServices.getUserProfileByUsername(usernameToValidate);
+      if (profile) {
+        const profileData = {
+          displayName: profile.name?.full || profile.name?.first || profile.username,
+          name: profile.username,
+          avatar: profile.avatar,
+          id: profile.id
+        };
+        setUserProfile(profileData);
+        setValidationStatus('valid');
+        setErrorMessage(''); // Clear any previous errors
+
+        // Cache the result
+        validationCache.current.set(usernameToValidate, {
+          profile: profileData,
+          timestamp: now
+        });
+        return true;
+      } else {
+        setValidationStatus('invalid');
+        setErrorMessage('Username not found. Please check your username or sign up.');
+        return false;
+      }
+    } catch (error) {
+      // If user not found (404), username doesn't exist
+      if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
+        setValidationStatus('invalid');
+        setErrorMessage('Username not found. Please check your username or sign up.');
+        return false;
+      }
+
+      // For other errors, show generic message
+      console.error('Username validation error:', error);
+      setValidationStatus('invalid');
+      setErrorMessage('Unable to validate username. Please try again.');
+      return false;
+    } finally {
+      setIsValidating(false);
+    }
+  }, [oxyServices]);
+
+  // Debounced username validation - increased debounce time and added better conditions
+  useEffect(() => {
+    if (!username || username.length < 3) {
+      setValidationStatus('idle');
+      setUserProfile(null);
+      setErrorMessage(''); // Clear error when input is too short
+      return;
+    }
+
+    // Only validate if we haven't already validated this exact username
+    if (validationStatus === 'valid' && userProfile?.name === username) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      validateUsername(username);
+    }, 800); // Increased debounce to 800ms
+
+    return () => clearTimeout(timeoutId);
+  }, [username, validateUsername, validationStatus, userProfile?.name]);
+
+  // Cleanup cache on unmount and limit cache size
+  useEffect(() => {
+    return () => {
+      // Clear cache on unmount
+      validationCache.current.clear();
+    };
+  }, []);
+
+  // Clean up old cache entries periodically (older than 10 minutes)
+  useEffect(() => {
+    const cleanupInterval = setInterval(() => {
+      const now = Date.now();
+      const maxAge = 10 * 60 * 1000; // 10 minutes
+
+      for (const [key, value] of validationCache.current.entries()) {
+        if (now - value.timestamp > maxAge) {
+          validationCache.current.delete(key);
+        }
+      }
+
+      // Limit cache size to 50 entries
+      if (validationCache.current.size > 50) {
+        const entries = Array.from(validationCache.current.entries());
+        entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+        const toDelete = entries.slice(0, entries.length - 50);
+        toDelete.forEach(([key]) => validationCache.current.delete(key));
+      }
+    }, 5 * 60 * 1000); // Clean up every 5 minutes
+
+    return () => clearInterval(cleanupInterval);
+  }, []);
+
+  // Animation functions
+  const animateTransition = useCallback(nextStep => {
+    // Scale down current content
+    Animated.timing(scaleAnim, {
+      toValue: 0.95,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+
+    // Fade out
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start(() => {
+      setCurrentStep(nextStep);
+
+      // Reset animations
+      slideAnim.setValue(-50);
+      scaleAnim.setValue(0.95);
+
+      // Animate in new content
+      Animated.parallel([Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true
+      }), Animated.spring(slideAnim, {
+        toValue: 0,
+        tension: 80,
+        friction: 8,
+        useNativeDriver: true
+      }), Animated.spring(scaleAnim, {
+        toValue: 1,
+        tension: 80,
+        friction: 8,
+        useNativeDriver: true
+      })]).start();
+    });
+  }, [fadeAnim, slideAnim, scaleAnim]);
+  const nextStep = useCallback(() => {
+    if (currentStep < 1) {
+      // Animate progress bar
+      Animated.timing(progressAnim, {
+        toValue: 1.0,
+        duration: 300,
+        useNativeDriver: false
+      }).start();
+      animateTransition(currentStep + 1);
+    }
+  }, [currentStep, progressAnim, animateTransition]);
+  const prevStep = useCallback(() => {
+    if (currentStep > 0) {
+      // Animate progress bar
+      Animated.timing(progressAnim, {
+        toValue: 0.5,
+        duration: 300,
+        useNativeDriver: false
+      }).start();
+      animateTransition(currentStep - 1);
+    }
+  }, [currentStep, progressAnim, animateTransition]);
+
+  // Custom next handlers for validation
+  const handleUsernameContinue = useCallback(() => {
+    if (!username) {
+      toast.error('Please enter your username.');
+      return;
+    }
+    if (validationStatus !== 'valid' || !userProfile) {
+      toast.error('Please enter a valid username.');
+      return;
+    }
+    setErrorMessage('');
+    nextStep();
+  }, [username, validationStatus, userProfile, setErrorMessage, nextStep]);
+  const handleSignIn = useCallback(async () => {
+    if (!password) {
+      toast.error('Please enter your password.');
+      return;
+    }
+    if (!username || !userProfile) {
+      toast.error('Please enter a valid username first.');
+      return;
+    }
+    try {
+      setErrorMessage('');
+      const user = await login(username, password);
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
+    } catch (error) {
+      toast.error(error.message || 'Login failed');
+    }
+  }, [username, password, login, onAuthenticated, setErrorMessage, userProfile]);
+
+  // Memoized step components
+  const renderUsernameStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/_jsx(HighFive, {
+      width: 100,
+      height: 100
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.modernHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.modernTitle, {
+          color: colors.text
+        }],
+        children: isAddAccountMode ? 'Add Another Account' : 'Sign In'
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.modernSubtitle, {
+          color: colors.secondaryText
+        }],
+        children: isAddAccountMode ? 'Sign in with another account' : 'Sign in to continue your journey'
+      })]
+    }), isAddAccountMode && /*#__PURE__*/_jsxs(View, {
+      style: [styles.modernInfoCard, {
+        backgroundColor: colors.inputBackground
+      }],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "information-circle",
+        size: 20,
+        color: colors.primary
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [styles.modernInfoText, {
+          color: colors.text
+        }],
+        children: ["Currently signed in as ", /*#__PURE__*/_jsx(Text, {
+          style: {
+            fontWeight: 'bold'
+          },
+          children: user?.username
+        })]
+      })]
+    }), errorMessage ? /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.modernErrorCard, {
+        backgroundColor: '#FF6B6B20'
+      }],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "alert-circle",
+        size: 20,
+        color: "#FF6B6B"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.errorText, {
+          color: '#FF6B6B'
+        }],
+        children: errorMessage
+      })]
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.modernInputContainer, {
+        transform: [{
+          scale: inputScaleAnim
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: "Username",
+        icon: "person-outline",
+        value: username,
+        onChangeText: handleUsernameChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "username-input",
+        colors: colors,
+        variant: "filled",
+        error: validationStatus === 'invalid' && username.length >= 3 ? 'Username not found' : undefined,
+        loading: validationStatus === 'validating',
+        success: validationStatus === 'valid'
+      })
+    }), validationStatus === 'valid' && userProfile && /*#__PURE__*/_jsxs(View, {
+      style: [styles.validationSuccessCard, {
+        backgroundColor: colors.success + '10',
+        borderWidth: 1,
+        borderColor: colors.success + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.success + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.success
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [styles.validationText, {
+            color: colors.success,
+            fontWeight: '600',
+            marginBottom: 2
+          }],
+          children: ["Welcome back, ", userProfile?.displayName || userProfile?.name || username, "!"]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Ready to continue where you left off"
+        })]
+      })]
+    }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.validationErrorCard, {
+        backgroundColor: colors.error + '10',
+        borderWidth: 1,
+        borderColor: colors.error + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.error + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "alert-circle",
+          size: 16,
+          color: colors.error
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.error,
+            fontWeight: '600',
+            marginBottom: 2
+          }],
+          children: "Username not found"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Check spelling or sign up"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Sign Up',
+        onPress: () => navigate('SignUp'),
+        icon: 'person-add',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: handleUsernameContinue,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        loading: isValidating,
+        testID: 'username-next-button'
+      }],
+      colors: colors
+    })]
+  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameContinue, navigate, styles]);
+  const renderPasswordStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.stepContainer, {
+      opacity: fadeAnim,
+      transform: [{
+        translateX: slideAnim
+      }, {
+        scale: scaleAnim
+      }]
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.modernUserProfileContainer,
+      children: [/*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.avatarContainer, {
+          transform: [{
+            scale: logoAnim
+          }]
+        }],
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          uri: userProfile?.avatar,
+          name: userProfile?.displayName || userProfile?.name || username,
+          size: 100,
+          theme: theme,
+          style: styles.modernUserAvatar
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.statusIndicator, {
+            backgroundColor: colors.primary
+          }]
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.modernUserDisplayName, {
+          color: colors.text
+        }],
+        children: userProfile?.displayName || userProfile?.name || username
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [styles.modernUsernameSubtext, {
+          color: colors.secondaryText
+        }],
+        children: ["@", username]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.welcomeBackBadge, {
+          backgroundColor: colors.primary + '15'
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.welcomeBackText, {
+            color: colors.primary
+          }],
+          children: "Welcome back!"
+        })]
+      })]
+    }), errorMessage ? /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.modernErrorCard, {
+        backgroundColor: '#FF6B6B20'
+      }],
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "alert-circle",
+        size: 20,
+        color: "#FF6B6B"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.errorText, {
+          color: '#FF6B6B'
+        }],
+        children: errorMessage
+      })]
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.modernInputContainer, {
+        transform: [{
+          scale: inputScaleAnim
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: "Password",
+        icon: "lock-closed-outline",
+        value: password,
+        onChangeText: handlePasswordChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        secureTextEntry: !showPassword,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "password-input",
+        colors: colors,
+        variant: "filled",
+        error: errorMessage
+      })
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Back',
+        onPress: prevStep,
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Sign In',
+        onPress: handleSignIn,
+        icon: 'log-in',
+        variant: 'primary',
+        loading: isLoading,
+        testID: 'login-button'
+      }],
+      colors: colors
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.securityNotice,
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "shield-checkmark",
+        size: 14,
+        color: colors.secondaryText
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.securityText, {
+          color: colors.secondaryText
+        }],
+        children: "Your data is encrypted and secure"
+      })]
+    })]
+  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles]);
+  const renderCurrentStep = useCallback(() => {
+    switch (currentStep) {
+      case 0:
+        return renderUsernameStep;
+      case 1:
+        return renderPasswordStep;
+      default:
+        return renderUsernameStep;
+    }
+  }, [currentStep, renderUsernameStep, renderPasswordStep]);
+  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__*/_jsx(ScrollView, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: renderCurrentStep()
+    })]
+  });
+};
+
+// Memoized styles creation
+const createStyles = (colors, theme) => 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: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 62,
+    lineHeight: 48,
+    marginBottom: 18,
+    textAlign: 'left',
+    letterSpacing: -1
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8
+  },
+  modernInfoCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%'
+  },
+  modernInfoText: {
+    fontSize: 14,
+    flex: 1
+  },
+  modernErrorCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%'
+  },
+  errorText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1
+  },
+  modernInputContainer: {
+    width: '100%',
+    marginBottom: 24
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground
+  },
+  inputIcon: {
+    marginRight: 12
+  },
+  modernInput: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%'
+  },
+  passwordToggle: {
+    padding: 4
+  },
+  validationIndicator: {
+    marginLeft: 8
+  },
+  validationSuccessCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationErrorCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8
+  },
+  validationText: {
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  modernButton: {
+    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%'
+  },
+  modernButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5
+  },
+  buttonIcon: {
+    marginLeft: 4
+  },
+  // Enhanced Label Styles
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
+  modernLinkText: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    textDecorationLine: 'underline'
+  },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16
+  },
+  footerText: {
+    fontSize: 15
+  },
+  // Modern User Profile Styles
+  modernUserProfileContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+    paddingVertical: 24
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginBottom: 20
+  },
+  modernUserAvatar: {
+    borderWidth: 4,
+    borderColor: 'rgba(209, 105, 229, 0.2)'
+  },
+  statusIndicator: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 3,
+    borderColor: '#FFFFFF'
+  },
+  modernUserDisplayName: {
+    fontSize: 26,
+    fontWeight: '700',
+    marginBottom: 4,
+    textAlign: 'center',
+    letterSpacing: -0.5
+  },
+  modernUsernameSubtext: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 16,
+    opacity: 0.7
+  },
+  welcomeBackBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    gap: 6
+  },
+  welcomeBackText: {
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  // Modern Navigation
+  modernNavigationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
+  },
+  modernBackButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8
+  },
+  modernBackButtonText: {
+    fontSize: 16,
+    fontWeight: '500'
+  },
+  // Security Notice
+  securityNotice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+    gap: 6
+  },
+  securityText: {
+    fontSize: 12,
+    fontWeight: '500'
+  }
+});
+export default SignInScreen;
+//# sourceMappingURL=SignInScreen.js.map