@oxyhq/services 5.11.9 → 5.11.11

package/src/ui/screens/SignInScreen.tsx

@@ -1,34 +1,12 @@
 import type React from 'react';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import {
-    View,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    StyleSheet,
-    ActivityIndicator,
-    Platform,
-    KeyboardAvoidingView,
-    ScrollView,
-    TextStyle,
-    Animated,
-    Dimensions,
-    StatusBar,
-    Alert,
-} from 'react-native';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies, useThemeColors, createCommonStyles, createAuthStyles } from '../styles';
-import OxyLogo from '../components/OxyLogo';
-import Avatar from '../components/Avatar';
-import { Ionicons } from '@expo/vector-icons';
-import HighFive from '../../assets/illustrations/HighFive';
+import { useThemeColors } from '../styles';
 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';
-import SignInUsernameStep from './internal/SignInUsernameStep';
-import SignInPasswordStep from './internal/SignInPasswordStep';
+import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
+import SignInUsernameStep from './steps/SignInUsernameStep';
+import SignInPasswordStep from './steps/SignInPasswordStep';
 
 const SignInScreen: React.FC<BaseScreenProps> = ({
     navigate,
@@ -39,38 +17,35 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     username: initialUsername,
     userProfile: initialUserProfile,
 }) => {
-    // Only log props in development mode to reduce console noise
-    if (__DEV__) {
-        console.log('SignInScreen props:', { initialStep, initialUsername, initialUserProfile });
-    }
     // Form data states
     const [username, setUsername] = useState(initialUsername || '');
     const [password, setPassword] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [userProfile, setUserProfile] = useState<any>(initialUserProfile || null);
     const [showPassword, setShowPassword] = useState(false);
-
-    // Multi-step form states
-    const [currentStep, setCurrentStep] = useState(initialStep || 0);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
     const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>(
         initialUserProfile ? 'valid' : 'idle'
     );
 
-    // Cache for validation results to prevent repeated API calls
-    const validationCache = useRef<Map<string, { profile: any; timestamp: number }>>(new Map());
+    // Monitor username state changes
+    useEffect(() => {
+        console.log('👀 SignInScreen username state changed:', username);
+    }, [username]);
 
-    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 logoAnim = useRef(new Animated.Value(0)).current;
-    const progressAnim = useRef(new Animated.Value(initialStep ? 1.0 : 0.5)).current;
+    // Cache for validation results to prevent repeated API calls
+    const validationCache = useRef<Map<string, { profile: any }>>(new Map());
 
     const { login, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
 
+    // Only log props in development mode to reduce console noise
+    if (__DEV__) {
+        console.log('SignInScreen props:', { initialStep, initialUsername, initialUserProfile });
+        console.log('🔧 oxyServices available:', !!oxyServices);
+        console.log('🔧 getProfileByUsername available:', typeof oxyServices?.getProfileByUsername);
+    }
     const colors = useThemeColors(theme);
-    const commonStyles = createCommonStyles(theme);
 
     // Check if this should be treated as "Add Account" mode
     const isAddAccountMode = useMemo(() =>
@@ -78,68 +53,45 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         [isAuthenticated, sessions]
     );
 
-    // Memoized styles to prevent rerenders
-    const styles = useMemo(() => createAuthStyles(colors, theme), [colors, theme]);
-
-    // Initialize logo animation
-    useEffect(() => {
-        Animated.spring(logoAnim, {
-            toValue: 1,
-            tension: 50,
-            friction: 8,
-            useNativeDriver: Platform.OS !== 'web',
-        }).start();
-    }, [logoAnim]);
-
-    // Input focus handlers (no animation)
-    const handleInputFocus = useCallback(() => {
-        setIsInputFocused(true);
-    }, []);
-
-    const handleInputBlur = useCallback(() => {
-        setIsInputFocused(false);
-    }, []);
-
-    // Memoized input change handlers to prevent re-renders
-    const handleUsernameChange = useCallback((text: string) => {
-        setUsername(text);
-        // Clear error as soon as user edits username
-        if (errorMessage) setErrorMessage('');
-        setValidationStatus('idle');
-    }, [errorMessage]);
-
-    const handlePasswordChange = useCallback((text: string) => {
-        setPassword(text);
-        // Clear error as soon as user edits password
-        if (errorMessage) setErrorMessage('');
-    }, [errorMessage]);
-
     // Username validation using core services with caching
     const validateUsername = useCallback(async (usernameToValidate: string) => {
+        console.log('🔍 Validating username:', usernameToValidate);
+
         if (!usernameToValidate || usernameToValidate.length < 3) {
+            console.log('❌ Username too short');
+            setValidationStatus('invalid');
+            setErrorMessage('Username must be at least 3 characters.');
+            return false;
+        }
+
+        // Safety check for oxyServices
+        if (!oxyServices || typeof oxyServices.getProfileByUsername !== 'function') {
+            console.error('🚨 oxyServices not available or getProfileByUsername not found');
             setValidationStatus('invalid');
-            setErrorMessage('Please enter a valid username.');
+            setErrorMessage('Service unavailable. Please try again.');
             return false;
         }
 
-        // Check cache first (cache valid for 5 minutes)
+        // Check cache first
         const cached = validationCache.current.get(usernameToValidate);
-        const now = Date.now();
-        if (cached && (now - cached.timestamp) < 5 * 60 * 1000) {
+        if (cached) {
+            console.log('✅ Username found in cache:', cached.profile);
             setUserProfile(cached.profile);
             setValidationStatus('valid');
             setErrorMessage('');
             return true;
         }
 
+        console.log('🔄 Validating username with API...');
         setIsValidating(true);
         setValidationStatus('validating');
 
         try {
-            // First check if username exists by trying to get profile
+            // Check if username exists
             const profile = await oxyServices.getProfileByUsername(usernameToValidate);
+            console.log('📋 Profile response:', profile);
 
-            if (profile) {
+            if (profile && profile.username) {
                 const profileData = {
                     displayName: profile.name?.full || profile.name?.first || profile.username,
                     name: profile.username,
@@ -147,30 +99,42 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                     id: profile.id
                 };
 
+                console.log('✅ Username is valid:', profileData);
                 setUserProfile(profileData);
                 setValidationStatus('valid');
-                setErrorMessage(''); // Clear any previous errors
+                setErrorMessage('');
 
                 // Cache the result
                 validationCache.current.set(usernameToValidate, {
-                    profile: profileData,
-                    timestamp: now
+                    profile: profileData
                 });
 
                 return true;
             } else {
+                console.log('❌ Username not found');
                 setValidationStatus('invalid');
                 setErrorMessage('Username not found.');
                 return false;
             }
         } catch (error: any) {
+            console.log('🚨 Validation error:', error);
+
             // If user not found (404), username doesn't exist
             if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
+                console.log('❌ Username not found (404)');
                 setValidationStatus('invalid');
                 setErrorMessage('Username not found.');
                 return false;
             }
 
+            // For development/testing: if API fails, allow any 3+ character username
+            if (__DEV__) {
+                console.log('⚠️ Development mode: allowing username due to API error');
+                setValidationStatus('valid');
+                setErrorMessage('');
+                return true;
+            }
+
             // For other errors, show generic message
             console.error('Username validation error:', error);
             setValidationStatus('invalid');
@@ -181,139 +145,39 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         }
     }, [oxyServices]);
 
-    // Debounced username validation - only run on explicit continue, not on every keystroke
-    useEffect(() => {
-        if (!username || username.length < 3) {
-            setValidationStatus('idle');
-            setUserProfile(null);
-            setErrorMessage('');
-            return;
-        }
-        // Only validate if we haven't already validated this exact username
-        if (validationStatus === 'valid' && userProfile?.name === username) {
-            return;
-        }
-        // Remove debounce, only validate on continue
-    }, [username, 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);
-                }
-            }
+    // Input change handlers
+    const handleUsernameChange = useCallback((text: string) => {
+        console.log('🔄 SignInScreen handleUsernameChange called:', text);
+        setUsername(text);
+        if (errorMessage) setErrorMessage('');
+        setValidationStatus('idle');
+    }, [errorMessage]);
 
-            // 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
+    const handlePasswordChange = useCallback((text: string) => {
+        setPassword(text);
+        if (errorMessage) setErrorMessage('');
+    }, [errorMessage]);
 
-        return () => clearInterval(cleanupInterval);
+    const handleInputFocus = useCallback(() => {
+        setIsInputFocused(true);
     }, []);
 
-    // Animation functions
-    const animateTransition = useCallback((nextStep: number) => {
-        // Scale down current content
-        Animated.timing(scaleAnim, {
-            toValue: 0.95,
-            duration: 150,
-            useNativeDriver: Platform.OS !== 'web',
-        }).start();
-
-        // Fade out
-        Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 200,
-            useNativeDriver: Platform.OS !== 'web',
-        }).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: Platform.OS !== 'web',
-                }),
-                Animated.spring(slideAnim, {
-                    toValue: 0,
-                    tension: 80,
-                    friction: 8,
-                    useNativeDriver: Platform.OS !== 'web',
-                }),
-                Animated.spring(scaleAnim, {
-                    toValue: 1,
-                    tension: 80,
-                    friction: 8,
-                    useNativeDriver: Platform.OS !== 'web',
-                })
-            ]).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]);
+    const handleInputBlur = useCallback(() => {
+        setIsInputFocused(false);
+    }, []);
 
-    // Custom next handlers for validation
-    const handleUsernameContinue = useCallback(async () => {
+    // Step validation and handlers
+    const validateUsernameStep = useCallback(async () => {
         if (!username) {
             setErrorMessage('Please enter your username.');
-            return;
+            return false;
         }
         setErrorMessage('');
         setIsValidating(true);
         const valid = await validateUsername(username);
         setIsValidating(false);
-        if (!valid) {
-            // Error message is set in validateUsername
-            return;
-        }
-        nextStep();
-    }, [username, validateUsername, nextStep]);
+        return valid;
+    }, [username, validateUsername]);
 
     const handleSignIn = useCallback(async () => {
         if (!password) {
@@ -335,93 +199,87 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         }
     }, [username, password, login, onAuthenticated, userProfile]);
 
-    // Memoized step components
-    const renderUsernameStep = useMemo(() => (
-        <SignInUsernameStep
-            styles={styles}
-            fadeAnim={fadeAnim}
-            slideAnim={slideAnim}
-            scaleAnim={scaleAnim}
-            colors={colors}
-            isAddAccountMode={isAddAccountMode}
-            user={user}
-            errorMessage={errorMessage}
-            isInputFocused={isInputFocused}
-            username={username}
-            validationStatus={validationStatus}
-            userProfile={userProfile}
-            isValidating={isValidating}
-            handleInputFocus={handleInputFocus}
-            handleInputBlur={handleInputBlur}
-            handleUsernameChange={handleUsernameChange}
-            handleUsernameContinue={handleUsernameContinue}
-            navigate={navigate}
-        />
-    ), [
-        fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username,
-        errorMessage, isInputFocused, username, validationStatus,
-        userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange,
-        handleUsernameContinue, navigate, styles
-    ]);
+    // Simple cleanup on unmount - that's all we need for username validation
+    useEffect(() => {
+        return () => {
+            validationCache.current.clear();
+        };
+    }, []);
 
-    const renderPasswordStep = useMemo(() => (
-        <SignInPasswordStep
-            styles={styles}
-            fadeAnim={fadeAnim}
-            slideAnim={slideAnim}
-            scaleAnim={scaleAnim}
-            colors={colors}
-            userProfile={userProfile}
-            username={username}
-            theme={theme}
-            logoAnim={logoAnim}
-            errorMessage={errorMessage}
-            isInputFocused={isInputFocused}
-            password={password}
-            showPassword={showPassword}
-            handleInputFocus={handleInputFocus}
-            handleInputBlur={handleInputBlur}
-            handlePasswordChange={handlePasswordChange}
-            handleSignIn={handleSignIn}
-            isLoading={isLoading}
-            prevStep={prevStep}
-            navigate={navigate}
-        />
-    ), [
-        fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim,
-        errorMessage, isInputFocused, password, showPassword,
-        handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles, navigate
-    ]);
+    // Step configurations
+    const steps: StepConfig[] = useMemo(() => [
+        {
+            id: 'username',
+            component: SignInUsernameStep,
+            canProceed: () => true, // Let the component handle validation internally
+        },
+        {
+            id: 'password',
+            component: SignInPasswordStep,
+            canProceed: () => true, // Let the component handle validation internally
+        },
+    ], [username, password, validationStatus, validateUsername, handleSignIn]);
+
+    // Handle step completion (final step)
+    const handleComplete = useCallback(async (stepData: any[]) => {
+        // The sign-in is handled by the password step component
+        // This callback is here for interface compatibility
+        console.log('Sign-in flow completed');
+    }, []);
 
-    const renderCurrentStep = useCallback(() => {
-        switch (currentStep) {
-            case 0:
-                return renderUsernameStep;
-            case 1:
-                return renderPasswordStep;
-            default:
-                return renderUsernameStep;
-        }
-    }, [currentStep, renderUsernameStep, renderPasswordStep]);
+    // Step data for the reusable component
+    const stepData = useMemo(() => [
+        {
+            username,
+            setUsername: handleUsernameChange,
+            errorMessage,
+            setErrorMessage,
+            validationStatus,
+            userProfile,
+            isValidating,
+            isInputFocused,
+            isAddAccountMode,
+            user,
+            handleInputFocus,
+            handleInputBlur,
+            validateUsername, // Add validation function
+        },
+        {
+            password,
+            setPassword: handlePasswordChange,
+            showPassword,
+            setShowPassword,
+            errorMessage,
+            setErrorMessage,
+            isLoading,
+            isInputFocused,
+            userProfile,
+            username,
+            handleInputFocus,
+            handleInputBlur,
+            handleSignIn, // Add sign-in function for password step
+        },
+    ], [
+        username, password, errorMessage, validationStatus, userProfile,
+        isValidating, isInputFocused, isAddAccountMode, user, showPassword,
+        isLoading, handleUsernameChange, handlePasswordChange, handleInputFocus, handleInputBlur,
+        validateUsername, handleSignIn
+    ]);
 
     return (
-        <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: colors.background }]}
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-            <StatusBar
-                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
-                backgroundColor={colors.background}
-            />
-
-            <ScrollView
-                contentContainerStyle={styles.scrollContent}
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
-                {renderCurrentStep()}
-            </ScrollView>
-        </KeyboardAvoidingView>
+        <StepBasedScreen
+            steps={steps}
+            initialStep={initialStep}
+            stepData={stepData}
+            onComplete={handleComplete}
+            navigate={navigate}
+            goBack={goBack}
+            onAuthenticated={onAuthenticated}
+            theme={theme}
+            showProgressIndicator={true}
+            enableAnimations={true}
+            oxyServices={oxyServices}
+        />
     );
 };