@oxyhq/services 5.4.2 → 5.4.4

package/src/ui/screens/SignInScreen.tsx

@@ -13,6 +13,7 @@ import {
     Animated,
     Dimensions,
     StatusBar,
+    Alert,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
@@ -21,12 +22,16 @@ import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
 import { BottomSheetScrollView } from '../components/bottomSheet';
 import { Ionicons } from '@expo/vector-icons';
-import Svg, { Path, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import HighFive from '../../assets/illustrations/HighFive';
 import { toast } from '../../lib/sonner';
+import Svg, { Path, Circle } from 'react-native-svg';
+import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import TextField from '../components/internal/TextField';
 
 const SignInScreen: React.FC<BaseScreenProps> = ({
     navigate,
     goBack,
+    onAuthenticated,
     theme,
 }) => {
     // Form data states
@@ -297,47 +302,39 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         }
     }, [currentStep, progressAnim, animateTransition]);
 
-    const handleUsernameNext = useCallback(() => {
+    // Custom next handlers for validation
+    const handleUsernameContinue = useCallback(() => {
         if (!username) {
-            toast.error('Please enter your username');
+            toast.error('Please enter your username.');
             return;
         }
-
-        if (validationStatus === 'invalid') {
-            // Don't show toast if we already have an error message displayed
-            if (!errorMessage) {
-                toast.error('Please enter a valid username');
-            }
+        if (validationStatus !== 'valid' || !userProfile) {
+            toast.error('Please enter a valid username.');
             return;
         }
+        setErrorMessage('');
+        nextStep();
+    }, [username, validationStatus, userProfile, setErrorMessage, nextStep]);
 
-        if (validationStatus === 'validating') {
-            toast.error('Please wait while we validate your username');
+    const handleSignIn = useCallback(async () => {
+        if (!password) {
+            toast.error('Please enter your password.');
             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');
+        if (!username || !userProfile) {
+            toast.error('Please enter a valid username first.');
             return;
         }
-
         try {
             setErrorMessage('');
-            await login(username, password);
-            // The authentication state change will be handled through context
+            const user = await login(username, password);
+            if (onAuthenticated) {
+                onAuthenticated(user);
+            }
         } catch (error: any) {
             toast.error(error.message || 'Login failed');
         }
-    }, [username, password, login]);
+    }, [username, password, login, onAuthenticated, setErrorMessage, userProfile]);
 
     // Memoized step components
     const renderUsernameStep = useMemo(() => (
@@ -351,52 +348,11 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 ]
             }
         ]}>
-            <View style={styles.modernImageContainer}>
-                <Svg width={280} height={160} viewBox="0 0 280 160">
-                    <Defs>
-                        <LinearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                            <Stop offset="0%" stopColor={colors.primary} stopOpacity="0.8" />
-                            <Stop offset="100%" stopColor={colors.primary} stopOpacity="0.2" />
-                        </LinearGradient>
-                        <LinearGradient id="secondaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                            <Stop offset="0%" stopColor={colors.primary} stopOpacity="0.1" />
-                            <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)" />
-                    <Path
-                        d="M40 120 Q80 40 140 80 Q200 120 240 60"
-                        stroke={colors.primary}
-                        strokeWidth="4"
-                        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} />
-                    <Circle cx="145" cy="75" r="3" fill={colors.primary} />
-                    <Path
-                        d="M132 85 Q140 92 148 85"
-                        stroke={colors.primary}
-                        strokeWidth="2"
-                        fill="none"
-                        strokeLinecap="round"
-                    />
-                </Svg>
-            </View>
+            <HighFive width={100} height={100} />
 
             <View style={styles.modernHeader}>
                 <Text style={[styles.modernTitle, { color: colors.text }]}>
-                    {isAddAccountMode ? 'Add Account' : 'Welcome Back'}
+                    {isAddAccountMode ? 'Add Another Account' : 'Sign In'}
                 </Text>
                 <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
                     {isAddAccountMode
@@ -426,99 +382,124 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 styles.modernInputContainer,
                 { transform: [{ scale: inputScaleAnim }] }
             ]}>
-                <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}
-                    />
-                    <TextInput
-                        style={[styles.modernInput, { color: colors.text }]}
-                        placeholder="Enter your username"
-                        placeholderTextColor={colors.placeholder}
-                        value={username}
-                        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>
+                <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'}
+                />
+            </Animated.View>
 
-                {/* Validation feedback */}
-                {validationStatus === 'valid' && userProfile && (
-                    <View style={[styles.validationSuccessCard, { backgroundColor: colors.success + '15' }]}>
+            {/* Enhanced Validation feedback */}
+            {validationStatus === 'valid' && userProfile && (
+                <View style={[styles.validationSuccessCard, {
+                    backgroundColor: colors.success + '10',
+                    borderWidth: 1,
+                    borderColor: colors.success + '30',
+                    padding: 16,
+                }]}>
+                    <View style={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: 16,
+                        backgroundColor: colors.success + '20',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginRight: 12,
+                    }}>
                         <Ionicons name="checkmark-circle" size={16} color={colors.success} />
-                        <Text style={[styles.validationText, { color: colors.success }]}>
-                            Found user: {userProfile.displayName}
+                    </View>
+                    <View style={{ flex: 1 }}>
+                        <Text style={[styles.validationText, {
+                            color: colors.success,
+                            fontWeight: '600',
+                            marginBottom: 2,
+                        }]}>
+                            Welcome back, {userProfile?.displayName || userProfile?.name || username}!
+                        </Text>
+                        <Text style={[styles.validationText, {
+                            color: colors.secondaryText,
+                            fontSize: 11,
+                            opacity: 0.8,
+                        }]}>
+                            Ready to continue where you left off
                         </Text>
                     </View>
-                )}
+                </View>
+            )}
 
-                {validationStatus === 'invalid' && username.length >= 3 && !errorMessage && (
-                    <View style={[styles.validationErrorCard, { backgroundColor: colors.error + '15' }]}>
+            {validationStatus === 'invalid' && username.length >= 3 && (
+                <View style={[styles.validationErrorCard, {
+                    backgroundColor: colors.error + '10',
+                    borderWidth: 1,
+                    borderColor: colors.error + '30',
+                    padding: 16,
+                }]}>
+                    <View style={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: 16,
+                        backgroundColor: colors.error + '20',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginRight: 12,
+                    }}>
                         <Ionicons name="alert-circle" size={16} color={colors.error} />
-                        <Text style={[styles.validationText, { color: colors.error }]}>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                        <Text style={[styles.validationText, {
+                            color: colors.error,
+                            fontWeight: '600',
+                            marginBottom: 2,
+                        }]}>
                             Username not found
                         </Text>
+                        <Text style={[styles.validationText, {
+                            color: colors.secondaryText,
+                            fontSize: 11,
+                            opacity: 0.8,
+                        }]}>
+                            Check spelling or sign up
+                        </Text>
                     </View>
-                )}
-            </Animated.View>
+                </View>
+            )}
 
-            <TouchableOpacity
-                style={[
-                    styles.modernButton,
+            <GroupedPillButtons
+                buttons={[
                     {
-                        backgroundColor: colors.primary,
-                        opacity: (!username || validationStatus !== 'valid') ? 0.5 : 1,
-                        shadowColor: colors.primary,
-                    }
+                        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',
+                    },
                 ]}
-                onPress={handleUsernameNext}
-                disabled={!username || validationStatus !== 'valid' || isValidating}
-                testID="username-next-button"
-            >
-                {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}>
-                <Text style={[styles.footerText, { color: colors.secondaryText }]}>
-                    Don't have an account?{' '}
-                </Text>
-                <TouchableOpacity onPress={() => navigate('SignUp')}>
-                    <Text style={[styles.modernLinkText, { color: colors.primary }]}>Sign Up</Text>
-                </TouchableOpacity>
-            </View>
+                colors={colors}
+            />
         </Animated.View>
     ), [
         fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username,
         errorMessage, inputScaleAnim, isInputFocused, username, validationStatus,
         userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange,
-        handleUsernameNext, navigate, styles
+        handleUsernameContinue, navigate, styles
     ]);
 
     const renderPasswordStep = useMemo(() => (
@@ -573,70 +554,42 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 styles.modernInputContainer,
                 { transform: [{ scale: inputScaleAnim }] }
             ]}>
-                <View style={[styles.inputWrapper, { borderColor: isInputFocused ? colors.primary : colors.border }]}>
-                    <Ionicons
-                        name="lock-closed-outline"
-                        size={20}
-                        color={isInputFocused ? colors.primary : colors.secondaryText}
-                        style={styles.inputIcon}
-                    />
-                    <TextInput
-                        style={[styles.modernInput, { color: colors.text }]}
-                        placeholder="Enter your password"
-                        placeholderTextColor={colors.placeholder}
-                        value={password}
-                        onChangeText={handlePasswordChange}
-                        onFocus={handleInputFocus}
-                        onBlur={handleInputBlur}
-                        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>
+                <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}
+                />
             </Animated.View>
 
-            <TouchableOpacity
-                style={[
-                    styles.modernButton,
+            <GroupedPillButtons
+                buttons={[
                     {
-                        backgroundColor: colors.primary,
-                        opacity: !password ? 0.5 : 1,
-                        shadowColor: colors.primary,
-                    }
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Sign In',
+                        onPress: handleSignIn,
+                        icon: 'log-in',
+                        variant: 'primary',
+                        loading: isLoading,
+                        testID: 'login-button',
+                    },
                 ]}
-                onPress={handleLogin}
-                disabled={!password || isLoading}
-                testID="login-button"
-            >
-                {isLoading ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
-                ) : (
-                    <>
-                        <Text style={styles.modernButtonText}>Sign In</Text>
-                        <Ionicons name="log-in" size={20} color="#FFFFFF" style={styles.buttonIcon} />
-                    </>
-                )}
-            </TouchableOpacity>
-
-            <View style={styles.modernNavigationButtons}>
-                <TouchableOpacity
-                    style={[styles.modernBackButton, { borderColor: colors.border }]}
-                    onPress={prevStep}
-                >
-                    <Ionicons name="arrow-back" size={18} color={colors.text} />
-                    <Text style={[styles.modernBackButtonText, { color: colors.text }]}>Back</Text>
-                </TouchableOpacity>
-            </View>
+                colors={colors}
+            />
 
             <View style={styles.securityNotice}>
                 <Ionicons name="shield-checkmark" size={14} color={colors.secondaryText} />
@@ -648,7 +601,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     ), [
         fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim,
         errorMessage, inputScaleAnim, isInputFocused, password, showPassword,
-        handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles
+        handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles
     ]);
 
     const renderCurrentStep = useCallback(() => {
@@ -691,30 +644,25 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     scrollContent: {
         flexGrow: 1,
         paddingHorizontal: 24,
-        paddingTop: 40,
-        paddingBottom: 40,
+        paddingTop: 4,
+        paddingBottom: 20,
     },
     stepContainer: {
         flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: 600,
-    },
-    modernImageContainer: {
-        alignItems: 'center',
-        marginBottom: 40,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
     },
     modernHeader: {
         alignItems: 'flex-start',
         width: '100%',
-        marginBottom: 32,
+        marginBottom: 24,
     },
     modernTitle: {
         fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 42,
+        fontSize: 62,
         lineHeight: 48,
-        marginBottom: 12,
+        marginBottom: 18,
         textAlign: 'left',
         letterSpacing: -1,
     },
@@ -825,6 +773,13 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     buttonIcon: {
         marginLeft: 4,
     },
+
+    // Enhanced Label Styles
+    modernLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
     modernLinkText: {
         fontSize: 14,
         lineHeight: 20,
@@ -834,7 +789,7 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     footerTextContainer: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: 28,
+        marginTop: 16,
     },
     footerText: {
         fontSize: 15,
@@ -896,8 +851,10 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     modernNavigationButtons: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: 24,
-        marginBottom: 16,
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+        gap: 8,
     },
     modernBackButton: {
         flexDirection: 'row',