@oxyhq/services 5.4.1 → 5.4.3

package/src/ui/screens/SignInScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import {
     View,
     Text,
@@ -34,10 +34,17 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const [password, setPassword] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [userProfile, setUserProfile] = useState<any>(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' | 'validating' | 'valid' | 'invalid'>('idle');
+
+    // Cache for validation results to prevent repeated API calls
+    const validationCache = useRef<Map<string, { profile: any; timestamp: number }>>(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;
@@ -45,13 +52,19 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const logoAnim = useRef(new Animated.Value(0)).current;
     const progressAnim = useRef(new Animated.Value(0.5)).current;
 
-    const { login, isLoading, user, isAuthenticated, sessions } = useOxy();
+    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 = user && isAuthenticated && sessions && sessions.length > 0;
+    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(() => {
@@ -61,27 +74,161 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             friction: 8,
             useNativeDriver: true,
         }).start();
-    }, []);
+    }, [logoAnim]);
 
     // Input focus animations
-    const handleInputFocus = () => {
+    const handleInputFocus = useCallback(() => {
         setIsInputFocused(true);
         Animated.spring(inputScaleAnim, {
             toValue: 1.02,
             useNativeDriver: true,
         }).start();
-    };
+    }, [inputScaleAnim]);
 
-    const handleInputBlur = () => {
+    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: string) => {
+        setUsername(text);
+        // Only clear error if we're changing from an invalid state
+        if (validationStatus === 'invalid') {
+            setErrorMessage('');
+            setValidationStatus('idle');
+        }
+    }, [validationStatus]);
+
+    const handlePasswordChange = useCallback((text: string) => {
+        setPassword(text);
+        setErrorMessage(''); // Clear error when user types
+    }, []);
+
+    // Username validation using core services with caching
+    const validateUsername = useCallback(async (usernameToValidate: string) => {
+        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: any) {
+            // 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 = (nextStep: number) => {
+    const animateTransition = useCallback((nextStep: number) => {
         // Scale down current content
         Animated.timing(scaleAnim, {
             toValue: 0.95,
@@ -122,9 +269,9 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 })
             ]).start();
         });
-    };
+    }, [fadeAnim, slideAnim, scaleAnim]);
 
-    const nextStep = () => {
+    const nextStep = useCallback(() => {
         if (currentStep < 1) {
             // Animate progress bar
             Animated.timing(progressAnim, {
@@ -132,12 +279,12 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 duration: 300,
                 useNativeDriver: false,
             }).start();
-            
+
             animateTransition(currentStep + 1);
         }
-    };
+    }, [currentStep, progressAnim, animateTransition]);
 
-    const prevStep = () => {
+    const prevStep = useCallback(() => {
         if (currentStep > 0) {
             // Animate progress bar
             Animated.timing(progressAnim, {
@@ -145,43 +292,39 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 duration: 300,
                 useNativeDriver: false,
             }).start();
-            
+
             animateTransition(currentStep - 1);
         }
-    };
-
-    // Fetch user profile when username is entered
-    useEffect(() => {
-        const fetchUserProfile = async () => {
-            if (username.length >= 3 && currentStep === 1) {
-                try {
-                    // For now, we'll create a mock profile based on username
-                    // In a real app, you'd fetch this from your API
-                    setUserProfile({
-                        displayName: username,
-                        name: username,
-                        avatar: null, // Could be fetched from API
-                    });
-                } catch (error) {
-                    // If user not found, we'll show a generic avatar
-                    setUserProfile(null);
-                }
-            }
-        };
+    }, [currentStep, progressAnim, animateTransition]);
 
-        fetchUserProfile();
-    }, [username, currentStep]);
-
-    const handleUsernameNext = () => {
+    const handleUsernameNext = useCallback(() => {
         if (!username) {
             toast.error('Please enter your username');
             return;
         }
-        setErrorMessage('');
-        nextStep();
-    };
 
-    const handleLogin = async () => {
+        if (validationStatus === 'invalid') {
+            // Don't show toast if we already have an error message displayed
+            if (!errorMessage) {
+                toast.error('Please enter a valid username');
+            }
+            return;
+        }
+
+        if (validationStatus === 'validating') {
+            toast.error('Please wait while we validate your username');
+            return;
+        }
+
+        if (validationStatus === 'valid' && userProfile) {
+            setErrorMessage('');
+            nextStep();
+        } else {
+            toast.error('Please enter a valid username');
+        }
+    }, [username, validationStatus, userProfile, errorMessage, nextStep]);
+
+    const handleLogin = useCallback(async () => {
         if (!username || !password) {
             toast.error('Please enter both username and password');
             return;
@@ -194,18 +337,18 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         } catch (error: any) {
             toast.error(error.message || 'Login failed');
         }
-    };
+    }, [username, password, login]);
 
-    // Step components
-    const renderUsernameStep = () => (
+    // Memoized step components
+    const renderUsernameStep = useMemo(() => (
         <Animated.View style={[
             styles.stepContainer,
-            { 
-                opacity: fadeAnim, 
+            {
+                opacity: fadeAnim,
                 transform: [
                     { translateX: slideAnim },
                     { scale: scaleAnim }
-                ] 
+                ]
             }
         ]}>
             <View style={styles.modernImageContainer}>
@@ -220,7 +363,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                             <Stop offset="100%" stopColor={colors.primary} stopOpacity="0.3" />
                         </LinearGradient>
                     </Defs>
-                    
+
                     {/* Modern abstract shapes */}
                     <Circle cx="80" cy="80" r="45" fill="url(#primaryGradient)" />
                     <Circle cx="200" cy="80" r="35" fill="url(#secondaryGradient)" />
@@ -231,12 +374,12 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                         fill="none"
                         strokeLinecap="round"
                     />
-                    
+
                     {/* Floating elements */}
                     <Circle cx="60" cy="50" r="8" fill={colors.primary} opacity="0.6" />
                     <Circle cx="220" cy="120" r="6" fill={colors.primary} opacity="0.4" />
                     <Circle cx="250" cy="40" r="4" fill={colors.primary} opacity="0.8" />
-                    
+
                     {/* Central focus element */}
                     <Circle cx="140" cy="80" r="25" fill={colors.background} opacity="0.9" />
                     <Circle cx="135" cy="75" r="3" fill={colors.primary} />
@@ -256,7 +399,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                     {isAddAccountMode ? 'Add Account' : 'Welcome Back'}
                 </Text>
                 <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
-                    {isAddAccountMode 
+                    {isAddAccountMode
                         ? 'Sign in with another account'
                         : 'Sign in to continue your journey'
                     }
@@ -283,10 +426,17 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 styles.modernInputContainer,
                 { transform: [{ scale: inputScaleAnim }] }
             ]}>
-                <View style={[styles.inputWrapper, { borderColor: isInputFocused ? colors.primary : colors.border }]}>
-                    <Ionicons 
-                        name="person-outline" 
-                        size={20} 
+                <View style={[
+                    styles.inputWrapper,
+                    {
+                        borderColor: validationStatus === 'valid' ? colors.success :
+                            validationStatus === 'invalid' ? colors.error :
+                                isInputFocused ? colors.primary : colors.border
+                    }
+                ]}>
+                    <Ionicons
+                        name="person-outline"
+                        size={20}
                         color={isInputFocused ? colors.primary : colors.secondaryText}
                         style={styles.inputIcon}
                     />
@@ -295,30 +445,64 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                         placeholder="Enter your username"
                         placeholderTextColor={colors.placeholder}
                         value={username}
-                        onChangeText={setUsername}
+                        onChangeText={handleUsernameChange}
                         onFocus={handleInputFocus}
                         onBlur={handleInputBlur}
                         autoCapitalize="none"
                         testID="username-input"
                     />
+                    {validationStatus === 'validating' && (
+                        <ActivityIndicator size="small" color={colors.primary} style={styles.validationIndicator} />
+                    )}
+                    {validationStatus === 'valid' && (
+                        <Ionicons name="checkmark-circle" size={20} color={colors.success} style={styles.validationIndicator} />
+                    )}
+                    {validationStatus === 'invalid' && username.length >= 3 && (
+                        <Ionicons name="close-circle" size={20} color={colors.error} style={styles.validationIndicator} />
+                    )}
                 </View>
+
+                {/* Validation feedback */}
+                {validationStatus === 'valid' && userProfile && (
+                    <View style={[styles.validationSuccessCard, { backgroundColor: colors.success + '15' }]}>
+                        <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                        <Text style={[styles.validationText, { color: colors.success }]}>
+                            Found user: {userProfile.displayName}
+                        </Text>
+                    </View>
+                )}
+
+                {validationStatus === 'invalid' && username.length >= 3 && !errorMessage && (
+                    <View style={[styles.validationErrorCard, { backgroundColor: colors.error + '15' }]}>
+                        <Ionicons name="alert-circle" size={16} color={colors.error} />
+                        <Text style={[styles.validationText, { color: colors.error }]}>
+                            Username not found
+                        </Text>
+                    </View>
+                )}
             </Animated.View>
 
             <TouchableOpacity
                 style={[
-                    styles.modernButton, 
-                    { 
+                    styles.modernButton,
+                    {
                         backgroundColor: colors.primary,
-                        opacity: !username ? 0.5 : 1,
+                        opacity: (!username || validationStatus !== 'valid') ? 0.5 : 1,
                         shadowColor: colors.primary,
                     }
                 ]}
                 onPress={handleUsernameNext}
-                disabled={!username}
+                disabled={!username || validationStatus !== 'valid' || isValidating}
                 testID="username-next-button"
             >
-                <Text style={styles.modernButtonText}>Continue</Text>
-                <Ionicons name="arrow-forward" size={20} color="#FFFFFF" style={styles.buttonIcon} />
+                {isValidating ? (
+                    <ActivityIndicator color="#FFFFFF" size="small" />
+                ) : (
+                    <>
+                        <Text style={styles.modernButtonText}>Continue</Text>
+                        <Ionicons name="arrow-forward" size={20} color="#FFFFFF" style={styles.buttonIcon} />
+                    </>
+                )}
             </TouchableOpacity>
 
             <View style={styles.footerTextContainer}>
@@ -330,17 +514,22 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 </TouchableOpacity>
             </View>
         </Animated.View>
-    );
-
-    const renderPasswordStep = () => (
+    ), [
+        fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username,
+        errorMessage, inputScaleAnim, isInputFocused, username, validationStatus,
+        userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange,
+        handleUsernameNext, navigate, styles
+    ]);
+
+    const renderPasswordStep = useMemo(() => (
         <Animated.View style={[
             styles.stepContainer,
-            { 
-                opacity: fadeAnim, 
+            {
+                opacity: fadeAnim,
                 transform: [
                     { translateX: slideAnim },
                     { scale: scaleAnim }
-                ] 
+                ]
             }
         ]}>
             <View style={styles.modernUserProfileContainer}>
@@ -357,14 +546,14 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                     />
                     <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
                 </Animated.View>
-                
+
                 <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
                     {userProfile?.displayName || userProfile?.name || username}
                 </Text>
                 <Text style={[styles.modernUsernameSubtext, { color: colors.secondaryText }]}>
                     @{username}
                 </Text>
-                
+
                 <View style={[styles.welcomeBackBadge, { backgroundColor: colors.primary + '15' }]}>
                     <Ionicons name="checkmark-circle" size={16} color={colors.primary} />
                     <Text style={[styles.welcomeBackText, { color: colors.primary }]}>
@@ -385,9 +574,9 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 { transform: [{ scale: inputScaleAnim }] }
             ]}>
                 <View style={[styles.inputWrapper, { borderColor: isInputFocused ? colors.primary : colors.border }]}>
-                    <Ionicons 
-                        name="lock-closed-outline" 
-                        size={20} 
+                    <Ionicons
+                        name="lock-closed-outline"
+                        size={20}
                         color={isInputFocused ? colors.primary : colors.secondaryText}
                         style={styles.inputIcon}
                     />
@@ -396,36 +585,45 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                         placeholder="Enter your password"
                         placeholderTextColor={colors.placeholder}
                         value={password}
-                        onChangeText={setPassword}
+                        onChangeText={handlePasswordChange}
                         onFocus={handleInputFocus}
                         onBlur={handleInputBlur}
-                        secureTextEntry
+                        secureTextEntry={!showPassword}
+                        autoCapitalize="none"
                         testID="password-input"
                     />
+                    <TouchableOpacity
+                        style={styles.passwordToggle}
+                        onPress={() => setShowPassword(!showPassword)}
+                    >
+                        <Ionicons
+                            name={showPassword ? "eye-off" : "eye"}
+                            size={20}
+                            color={colors.secondaryText}
+                        />
+                    </TouchableOpacity>
                 </View>
             </Animated.View>
 
             <TouchableOpacity
                 style={[
-                    styles.modernButton, 
-                    { 
+                    styles.modernButton,
+                    {
                         backgroundColor: colors.primary,
-                        opacity: isLoading ? 0.8 : 1,
+                        opacity: !password ? 0.5 : 1,
                         shadowColor: colors.primary,
                     }
                 ]}
                 onPress={handleLogin}
-                disabled={isLoading}
+                disabled={!password || isLoading}
                 testID="login-button"
             >
                 {isLoading ? (
                     <ActivityIndicator color="#FFFFFF" size="small" />
                 ) : (
                     <>
-                        <Text style={styles.modernButtonText}>
-                            {isAddAccountMode ? 'Add Account' : 'Sign In'}
-                        </Text>
-                        <Ionicons name="arrow-forward" size={20} color="#FFFFFF" style={styles.buttonIcon} />
+                        <Text style={styles.modernButtonText}>Sign In</Text>
+                        <Ionicons name="log-in" size={20} color="#FFFFFF" style={styles.buttonIcon} />
                     </>
                 )}
             </TouchableOpacity>
@@ -435,232 +633,136 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                     style={[styles.modernBackButton, { borderColor: colors.border }]}
                     onPress={prevStep}
                 >
-                    <Ionicons name="chevron-back" size={20} color={colors.text} />
+                    <Ionicons name="arrow-back" size={18} color={colors.text} />
                     <Text style={[styles.modernBackButtonText, { color: colors.text }]}>Back</Text>
                 </TouchableOpacity>
             </View>
 
-            {/* Security notice */}
             <View style={styles.securityNotice}>
-                <Ionicons name="shield-checkmark" size={16} color={colors.secondaryText} />
+                <Ionicons name="shield-checkmark" size={14} color={colors.secondaryText} />
                 <Text style={[styles.securityText, { color: colors.secondaryText }]}>
-                    Your connection is secure and encrypted
+                    Your data is encrypted and secure
                 </Text>
             </View>
         </Animated.View>
-    );
+    ), [
+        fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim,
+        errorMessage, inputScaleAnim, isInputFocused, password, showPassword,
+        handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles
+    ]);
 
-    const renderCurrentStep = () => {
+    const renderCurrentStep = useCallback(() => {
         switch (currentStep) {
             case 0:
-                return renderUsernameStep();
+                return renderUsernameStep;
             case 1:
-                return renderPasswordStep();
+                return renderPasswordStep;
             default:
-                return renderUsernameStep();
+                return renderUsernameStep;
         }
-    };
+    }, [currentStep, renderUsernameStep, renderPasswordStep]);
 
     return (
-        <BottomSheetScrollView
-            contentContainerStyle={commonStyles.scrollContainer}
-            keyboardShouldPersistTaps="handled"
+        <KeyboardAvoidingView
+            style={[styles.container, { backgroundColor: colors.background }]}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         >
-            <Animated.View style={[
-                styles.logoContainer,
-                { transform: [{ scale: logoAnim }] }
-            ]}>
-                <OxyLogo
-                    style={{ marginBottom: 24 }}
-                    width={50}
-                    height={50}
-                />
-            </Animated.View>
-            
-            {/* Modern Progress indicator */}
-            <View style={styles.modernProgressContainer}>
-                <View style={styles.progressTrack}>
-                    <Animated.View 
-                        style={[
-                            styles.progressFill,
-                            { 
-                                backgroundColor: colors.primary,
-                                width: progressAnim.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: ['50%', '100%']
-                                })
-                            }
-                        ]} 
-                    />
-                </View>
-                <Text style={[styles.progressText, { color: colors.secondaryText }]}>
-                    Step {currentStep + 1} of 2
-                </Text>
-            </View>
-
-            {renderCurrentStep()}
-        </BottomSheetScrollView>
+            <StatusBar
+                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
+                backgroundColor={colors.background}
+            />
+
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+            >
+                {renderCurrentStep()}
+            </ScrollView>
+        </KeyboardAvoidingView>
     );
 };
 
-const styles = StyleSheet.create({
-    // Legacy styles (keeping for compatibility)
-    title: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'  
-            : 'Phudu-Bold',  
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  
-        fontSize: 54,
-        marginBottom: 24,
-    },
-    formContainer: {
-        width: '100%',
-    },
-    inputContainer: {
-        marginBottom: 16,
+// Memoized styles creation
+const createStyles = (colors: any, theme: string) => StyleSheet.create({
+    container: {
+        flex: 1,
     },
-    label: {
-        fontSize: 14,
-        fontWeight: '500' as TextStyle['fontWeight'],
-        marginBottom: 8,
+    scrollContent: {
+        flexGrow: 1,
+        paddingHorizontal: 24,
+        paddingTop: 40,
+        paddingBottom: 40,
     },
-    footerTextContainer: {
-        flexDirection: 'row',
+    stepContainer: {
+        flex: 1,
         justifyContent: 'center',
-        marginTop: 24,
-    },
-    footerText: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    linkText: {
-        fontSize: 14,
-        lineHeight: 20,
-        fontWeight: '600',
-    },
-    userInfoContainer: {
-        padding: 20,
-        marginVertical: 20,
-        borderRadius: 35,
         alignItems: 'center',
+        minHeight: 600,
     },
-    userInfoText: {
-        fontSize: 16,
-        lineHeight: 24,
-        textAlign: 'center',
-    },
-    actionButtonsContainer: {
-        marginTop: 20,
-    },
-    infoContainer: {
-        padding: 16,
-        marginVertical: 16,
-        borderRadius: 8,
-        alignItems: 'center',
-    },
-    infoText: {
-        fontSize: 14,
-        lineHeight: 20,
-        textAlign: 'center',
-    },
-
-    // Modern UI Styles
-    logoContainer: {
-        alignItems: 'center',
-        marginBottom: 16,
-    },
-    modernProgressContainer: {
-        alignItems: 'center',
-        marginBottom: 40,
-        paddingHorizontal: 20,
-    },
-    progressTrack: {
-        width: '100%',
-        height: 4,
-        backgroundColor: '#E5E5E5',
-        borderRadius: 2,
-        marginBottom: 8,
-        overflow: 'hidden',
-    },
-    progressFill: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    progressText: {
-        fontSize: 12,
-        fontWeight: '500',
-    },
-    stepContainer: {
-        width: '100%',
-        minHeight: 450,
-        paddingHorizontal: 20,
-    },
-
-    // Modern Image Container
     modernImageContainer: {
         alignItems: 'center',
         marginBottom: 40,
-        paddingVertical: 20,
     },
     modernHeader: {
-        alignItems: 'center',
-        marginBottom: 24,
+        alignItems: 'flex-start',
+        width: '100%',
+        marginBottom: 32,
     },
     modernTitle: {
         fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 54,
-        textAlign: 'center',
-        marginBottom: 8,
-        letterSpacing: -0.5,
+        fontSize: 42,
+        lineHeight: 48,
+        marginBottom: 12,
+        textAlign: 'left',
+        letterSpacing: -1,
     },
     modernSubtitle: {
-        fontSize: 16,
-        lineHeight: 22,
-        textAlign: 'center',
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
         opacity: 0.8,
     },
-
-    // Modern Cards
     modernInfoCard: {
         flexDirection: 'row',
         alignItems: 'center',
         padding: 16,
-        marginVertical: 16,
-        borderRadius: 12,
+        borderRadius: 16,
+        marginBottom: 24,
         gap: 12,
+        width: '100%',
     },
     modernInfoText: {
         fontSize: 14,
-        lineHeight: 20,
         flex: 1,
     },
     modernErrorCard: {
         flexDirection: 'row',
         alignItems: 'center',
         padding: 16,
-        marginVertical: 16,
-        borderRadius: 12,
+        borderRadius: 16,
+        marginBottom: 24,
         gap: 12,
+        width: '100%',
     },
     errorText: {
         fontSize: 14,
-        lineHeight: 20,
+        fontWeight: '500',
         flex: 1,
     },
-
-    // Modern Input Styles
     modernInputContainer: {
+        width: '100%',
         marginBottom: 24,
     },
     inputWrapper: {
         flexDirection: 'row',
         alignItems: 'center',
-        borderWidth: 2,
+        height: 56,
         borderRadius: 16,
-        paddingHorizontal: 16,
-        paddingVertical: 4,
-        backgroundColor: 'rgba(0,0,0,0.02)',
+        paddingHorizontal: 20,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
     },
     inputIcon: {
         marginRight: 12,
@@ -668,11 +770,34 @@ const styles = StyleSheet.create({
     modernInput: {
         flex: 1,
         fontSize: 16,
-        paddingVertical: 16,
+        height: '100%',
+    },
+    passwordToggle: {
+        padding: 4,
+    },
+    validationIndicator: {
+        marginLeft: 8,
+    },
+    validationSuccessCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        marginTop: 8,
+        gap: 8,
+    },
+    validationErrorCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        marginTop: 8,
+        gap: 8,
+    },
+    validationText: {
+        fontSize: 12,
         fontWeight: '500',
     },
-
-    // Modern Button Styles
     modernButton: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -689,6 +814,7 @@ const styles = StyleSheet.create({
         shadowRadius: 8,
         elevation: 6,
         gap: 8,
+        width: '100%',
     },
     modernButtonText: {
         color: '#FFFFFF',
@@ -705,6 +831,14 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         textDecorationLine: 'underline',
     },
+    footerTextContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 28,
+    },
+    footerText: {
+        fontSize: 15,
+    },
 
     // Modern User Profile Styles
     modernUserProfileContainer: {
@@ -791,84 +925,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontWeight: '500',
     },
-
-    // Legacy compatibility styles
-    progressContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 32,
-        paddingHorizontal: 40,
-    },
-    progressDot: {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-        marginHorizontal: 4,
-    },
-    progressLine: {
-        flex: 1,
-        height: 2,
-        marginHorizontal: 8,
-    },
-    welcomeImageContainer: {
-        alignItems: 'center',
-        marginBottom: 32,
-    },
-    header: {
-        alignItems: 'center',
-        marginBottom: 16,
-    },
-    welcomeTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 32,
-        textAlign: 'center',
-        marginBottom: 8,
-    },
-    welcomeText: {
-        fontSize: 16,
-        lineHeight: 24,
-        textAlign: 'center',
-        marginBottom: 32,
-        paddingHorizontal: 20,
-    },
-    userProfileContainer: {
-        alignItems: 'center',
-        marginBottom: 32,
-        paddingVertical: 20,
-    },
-    userAvatar: {
-        marginBottom: 16,
-    },
-    userDisplayName: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        marginBottom: 4,
-        textAlign: 'center',
-    },
-    usernameSubtext: {
-        fontSize: 16,
-        textAlign: 'center',
-    },
-    navigationButtons: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 24,
-    },
-    backButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 20,
-        borderRadius: 12,
-        borderWidth: 1,
-    },
-    backButtonText: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginLeft: 8,
-    },
 });
 
 export default SignInScreen;