@oxyhq/services 5.4.1 → 5.4.3

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

@@ -1,15 +1,13 @@
 "use strict";
 
-import React, { useState, useRef, useEffect } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, Animated } from 'react-native';
-import { useOxy } from '../context/OxyContext';
-import { useThemeColors, createCommonStyles } from '../styles';
-import OxyLogo from '../components/OxyLogo';
-import Avatar from '../components/Avatar';
-import { BottomSheetScrollView } from '../components/bottomSheet';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
+import { useOxy } from "../context/OxyContext.js";
+import { useThemeColors, createCommonStyles } from "../styles/index.js";
+import Avatar from "../components/Avatar.js";
 import { Ionicons } from '@expo/vector-icons';
 import Svg, { Path, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
-import { toast } from '../../lib/sonner';
+import { toast } from "../../lib/sonner.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SignInScreen = ({
   navigate,
@@ -21,10 +19,16 @@ const SignInScreen = ({
   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;
@@ -36,13 +40,17 @@ const SignInScreen = ({
     isLoading,
     user,
     isAuthenticated,
-    sessions
+    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(() => {
@@ -52,26 +60,153 @@ const SignInScreen = ({
       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();
-  };
-  const handleInputBlur = () => {
+  }, [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 = nextStep => {
+  const animateTransition = useCallback(nextStep => {
     // Scale down current content
     Animated.timing(scaleAnim, {
       toValue: 0.95,
@@ -108,8 +243,8 @@ const SignInScreen = ({
         useNativeDriver: true
       })]).start();
     });
-  };
-  const nextStep = () => {
+  }, [fadeAnim, slideAnim, scaleAnim]);
+  const nextStep = useCallback(() => {
     if (currentStep < 1) {
       // Animate progress bar
       Animated.timing(progressAnim, {
@@ -119,8 +254,8 @@ const SignInScreen = ({
       }).start();
       animateTransition(currentStep + 1);
     }
-  };
-  const prevStep = () => {
+  }, [currentStep, progressAnim, animateTransition]);
+  const prevStep = useCallback(() => {
     if (currentStep > 0) {
       // Animate progress bar
       Animated.timing(progressAnim, {
@@ -130,37 +265,31 @@ const SignInScreen = ({
       }).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);
-        }
-      }
-    };
-    fetchUserProfile();
-  }, [username, currentStep]);
-  const handleUsernameNext = () => {
+  }, [currentStep, progressAnim, animateTransition]);
+  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;
@@ -172,10 +301,10 @@ const SignInScreen = ({
     } catch (error) {
       toast.error(error.message || 'Login failed');
     }
-  };
+  }, [username, password, login]);
 
-  // Step components
-  const renderUsernameStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  // Memoized step components
+  const renderUsernameStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -326,15 +455,15 @@ const SignInScreen = ({
         }],
         children: errorMessage
       })]
-    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+    }) : null, /*#__PURE__*/_jsxs(Animated.View, {
       style: [styles.modernInputContainer, {
         transform: [{
           scale: inputScaleAnim
         }]
       }],
-      children: /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsxs(View, {
         style: [styles.inputWrapper, {
-          borderColor: isInputFocused ? colors.primary : colors.border
+          borderColor: validationStatus === 'valid' ? colors.success : validationStatus === 'invalid' ? colors.error : isInputFocused ? colors.primary : colors.border
         }],
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "person-outline",
@@ -348,31 +477,78 @@ const SignInScreen = ({
           placeholder: "Enter your username",
           placeholderTextColor: colors.placeholder,
           value: username,
-          onChangeText: setUsername,
+          onChangeText: handleUsernameChange,
           onFocus: handleInputFocus,
           onBlur: handleInputBlur,
           autoCapitalize: "none",
           testID: "username-input"
+        }), validationStatus === 'validating' && /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: colors.primary,
+          style: styles.validationIndicator
+        }), validationStatus === 'valid' && /*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 20,
+          color: colors.success,
+          style: styles.validationIndicator
+        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsx(Ionicons, {
+          name: "close-circle",
+          size: 20,
+          color: colors.error,
+          style: styles.validationIndicator
         })]
-      })
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      }), validationStatus === 'valid' && userProfile && /*#__PURE__*/_jsxs(View, {
+        style: [styles.validationSuccessCard, {
+          backgroundColor: colors.success + '15'
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "checkmark-circle",
+          size: 16,
+          color: colors.success
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.validationText, {
+            color: colors.success
+          }],
+          children: ["Found user: ", userProfile.displayName]
+        })]
+      }), validationStatus === 'invalid' && username.length >= 3 && !errorMessage && /*#__PURE__*/_jsxs(View, {
+        style: [styles.validationErrorCard, {
+          backgroundColor: colors.error + '15'
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "alert-circle",
+          size: 16,
+          color: colors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.error
+          }],
+          children: "Username not found"
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [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",
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.modernButtonText,
-        children: "Continue"
-      }), /*#__PURE__*/_jsx(Ionicons, {
-        name: "arrow-forward",
-        size: 20,
+      children: isValidating ? /*#__PURE__*/_jsx(ActivityIndicator, {
         color: "#FFFFFF",
-        style: styles.buttonIcon
-      })]
+        size: "small"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.modernButtonText,
+          children: "Continue"
+        }), /*#__PURE__*/_jsx(Ionicons, {
+          name: "arrow-forward",
+          size: 20,
+          color: "#FFFFFF",
+          style: styles.buttonIcon
+        })]
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.footerTextContainer,
       children: [/*#__PURE__*/_jsxs(Text, {
@@ -390,8 +566,8 @@ const SignInScreen = ({
         })
       })]
     })]
-  });
-  const renderPasswordStep = () => /*#__PURE__*/_jsxs(Animated.View, {
+  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameNext, navigate, styles]);
+  const renderPasswordStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
       transform: [{
@@ -480,21 +656,30 @@ const SignInScreen = ({
           placeholder: "Enter your password",
           placeholderTextColor: colors.placeholder,
           value: password,
-          onChangeText: setPassword,
+          onChangeText: handlePasswordChange,
           onFocus: handleInputFocus,
           onBlur: handleInputBlur,
-          secureTextEntry: true,
+          secureTextEntry: !showPassword,
+          autoCapitalize: "none",
           testID: "password-input"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.passwordToggle,
+          onPress: () => setShowPassword(!showPassword),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: showPassword ? "eye-off" : "eye",
+            size: 20,
+            color: colors.secondaryText
+          })
         })]
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [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",
       children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
         color: "#FFFFFF",
@@ -502,9 +687,9 @@ const SignInScreen = ({
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.modernButtonText,
-          children: isAddAccountMode ? 'Add Account' : 'Sign In'
+          children: "Sign In"
         }), /*#__PURE__*/_jsx(Ionicons, {
-          name: "arrow-forward",
+          name: "log-in",
           size: 20,
           color: "#FFFFFF",
           style: styles.buttonIcon
@@ -518,8 +703,8 @@ const SignInScreen = ({
         }],
         onPress: prevStep,
         children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "chevron-back",
-          size: 20,
+          name: "arrow-back",
+          size: 18,
           color: colors.text
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.modernBackButtonText, {
@@ -532,216 +717,123 @@ const SignInScreen = ({
       style: styles.securityNotice,
       children: [/*#__PURE__*/_jsx(Ionicons, {
         name: "shield-checkmark",
-        size: 16,
+        size: 14,
         color: colors.secondaryText
       }), /*#__PURE__*/_jsx(Text, {
         style: [styles.securityText, {
           color: colors.secondaryText
         }],
-        children: "Your connection is secure and encrypted"
+        children: "Your data is encrypted and secure"
       })]
     })]
-  });
-  const renderCurrentStep = () => {
+  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles]);
+  const renderCurrentStep = useCallback(() => {
     switch (currentStep) {
       case 0:
-        return renderUsernameStep();
+        return renderUsernameStep;
       case 1:
-        return renderPasswordStep();
+        return renderPasswordStep;
       default:
-        return renderUsernameStep();
+        return renderUsernameStep;
     }
-  };
-  return /*#__PURE__*/_jsxs(BottomSheetScrollView, {
-    contentContainerStyle: commonStyles.scrollContainer,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.logoContainer, {
-        transform: [{
-          scale: logoAnim
-        }]
-      }],
-      children: /*#__PURE__*/_jsx(OxyLogo, {
-        style: {
-          marginBottom: 24
-        },
-        width: 50,
-        height: 50
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.modernProgressContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.progressTrack,
-        children: /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.progressFill, {
-            backgroundColor: colors.primary,
-            width: progressAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: ['50%', '100%']
-            })
-          }]
-        })
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: [styles.progressText, {
-          color: colors.secondaryText
-        }],
-        children: ["Step ", currentStep + 1, " of 2"]
-      })]
-    }), renderCurrentStep()]
+  }, [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()
+    })]
   });
 };
-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, theme) => StyleSheet.create({
+  container: {
+    flex: 1
   },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    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'
-  },
-  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
+    minHeight: 600
   },
-  progressText: {
-    fontSize: 12,
-    fontWeight: '500'
-  },
-  stepContainer: {
-    width: '100%',
-    minHeight: 450,
-    paddingHorizontal: 20
-  },
-  // Modern Image Container
   modernImageContainer: {
     alignItems: 'center',
-    marginBottom: 40,
-    paddingVertical: 20
+    marginBottom: 40
   },
   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,
-    gap: 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,
-    gap: 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
@@ -749,10 +841,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',
@@ -768,7 +884,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.3,
     shadowRadius: 8,
     elevation: 6,
-    gap: 8
+    gap: 8,
+    width: '100%'
   },
   modernButtonText: {
     color: '#FFFFFF',
@@ -785,6 +902,14 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     textDecorationLine: 'underline'
   },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 28
+  },
+  footerText: {
+    fontSize: 15
+  },
   // Modern User Profile Styles
   modernUserProfileContainer: {
     alignItems: 'center',
@@ -867,83 +992,6 @@ const styles = StyleSheet.create({
   securityText: {
     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;