@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/RecoverAccountScreen.tsx

@@ -1,141 +0,0 @@
-import type React from 'react';
-import { useState, useRef, useCallback } from 'react';
-import { useI18n } from '../hooks/useI18n';
-import type { BaseScreenProps } from '../navigation/types';
-import { useThemeColors } from '../styles';
-import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
-import RecoverRequestStep from './steps/RecoverRequestStep';
-import RecoverVerifyStep from './steps/RecoverVerifyStep';
-import RecoverSuccessStep from './steps/RecoverSuccessStep';
-import RecoverResetPasswordStep from './steps/RecoverResetPasswordStep';
-
-// Constants
-const PIN_LENGTH = 6;
-
-// Main component
-const RecoverAccountScreen: React.FC<BaseScreenProps> = ({
-    navigate,
-    goBack,
-    theme,
-    oxyServices,
-}) => {
-    const colors = useThemeColors(theme);
-    const { t } = useI18n();
-
-    // Form state
-    const [identifier, setIdentifier] = useState('');
-    const [verificationCode, setVerificationCode] = useState('');
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [successMessage, setSuccessMessage] = useState('');
-
-    // Handle back navigation
-    const handleBack = useCallback(() => {
-        navigate('SignIn');
-    }, [navigate]);
-
-    // Step configurations
-    const steps: StepConfig[] = [
-        {
-            id: 'request',
-            component: RecoverRequestStep,
-            canProceed: () => identifier.trim().length >= 3,
-            onEnter: () => {
-                // Reset messages when entering request step
-                setErrorMessage('');
-                setSuccessMessage('');
-            },
-        },
-        {
-            id: 'verify',
-            component: RecoverVerifyStep,
-            canProceed: () => verificationCode.length === PIN_LENGTH,
-            onEnter: () => {
-                setIsLoading(false);
-                setSuccessMessage(t('recover.enterCode'));
-            },
-        },
-        {
-            id: 'reset',
-            component: RecoverResetPasswordStep,
-            canProceed: () => true,
-        },
-        {
-            id: 'success',
-            component: RecoverSuccessStep,
-            canProceed: () => true,
-            onEnter: () => {
-                setSuccessMessage(t('recover.resetSuccess'));
-            },
-        },
-    ];
-
-    // Handle completion
-    const handleComplete = useCallback((stepData: any[]) => {
-        // Final step completed - could navigate to password reset
-        console.log('Account recovery completed');
-    }, []);
-
-    // Step data for the reusable component
-    const stepData = [
-        // Request step
-        {
-            identifier,
-            setIdentifier,
-            errorMessage,
-            setErrorMessage,
-            isLoading,
-            setIsLoading,
-        },
-        // Verify step
-        {
-            verificationCode,
-            setVerificationCode,
-            errorMessage,
-            setErrorMessage,
-            successMessage,
-            setSuccessMessage,
-            isLoading,
-            setIsLoading,
-            identifier,
-        },
-        // Reset step
-        {
-            identifier,
-            verificationCode,
-            password,
-            confirmPassword,
-            setPassword,
-            setConfirmPassword,
-            errorMessage,
-            setErrorMessage,
-            isLoading,
-            setIsLoading,
-            oxyServices,
-        },
-        // Success step
-        {
-            successMessage,
-        },
-    ];
-
-    return (
-        <StepBasedScreen
-            steps={steps}
-            stepData={stepData}
-            onComplete={handleComplete}
-            navigate={navigate}
-            goBack={handleBack}
-            theme={theme}
-            oxyServices={oxyServices}
-            showProgressIndicator={true}
-            enableAnimations={true}
-        />
-    );
-};
-
-
-
-export default RecoverAccountScreen; 

package/src/ui/screens/SignInScreen.tsx

@@ -1,297 +0,0 @@
-import type React from 'react';
-import { useState, useMemo, useCallback } from 'react';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
-import { useThemeColors } from '../styles';
-import { toast } from '../../lib/sonner';
-import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
-import SignInUsernameStep from './steps/SignInUsernameStep';
-import SignInPasswordStep from './steps/SignInPasswordStep';
-import SignInTotpStep from './steps/SignInTotpStep';
-
-const SignInScreen: React.FC<BaseScreenProps> = ({
-    navigate,
-    goBack,
-    onAuthenticated,
-    theme,
-    initialStep,
-    username: initialUsername,
-    userProfile: 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);
-    const [isInputFocused, setIsInputFocused] = useState(false);
-    const [isValidating, setIsValidating] = useState(false);
-    const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>(
-        initialUserProfile ? 'valid' : 'idle'
-    );
-    const [existingSession, setExistingSession] = useState<any>(null);
-
-    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices, switchSession } = useOxy();
-    const colors = useThemeColors(theme);
-
-    // Check if this should be treated as "Add Account" mode
-    const isAddAccountMode = useMemo(() =>
-        isAuthenticated && sessions && sessions.length > 0,
-        [isAuthenticated, sessions]
-    );
-
-    // Username validation using core services with caching
-    const validateUsername = useCallback(async (usernameToValidate: string) => {
-        if (!usernameToValidate || usernameToValidate.length < 3) {
-            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('Service unavailable. Please try again.');
-            return false;
-        }
-
-        const offlineDetected = typeof navigator !== 'undefined' && navigator.onLine === false;
-
-        if (offlineDetected) {
-            setValidationStatus('invalid');
-            setErrorMessage('No connection. Check your internet connection and try again.');
-            return false;
-        }
-
-        setIsValidating(true);
-        setValidationStatus('validating');
-
-        try {
-            // Check if username exists
-            const profile = await oxyServices.getProfileByUsername(usernameToValidate);
-
-            // Handle case where profile might be wrapped in a data property (defensive check)
-            const userProfile = (profile as any)?.data || profile;
-
-            if (userProfile?.username) {
-                const profileData = {
-                    displayName: userProfile.name?.full || userProfile.name?.first || userProfile.username,
-                    name: userProfile.username,
-                    avatar: userProfile.avatar,
-                    id: userProfile.id
-                };
-
-                setUserProfile(profileData);
-
-                // Check if this account is already signed in
-                const profileUserId = userProfile.id?.toString();
-                const existing = sessions?.find(s => {
-                    const sessionUserId = s.userId?.toString();
-                    return sessionUserId === profileUserId;
-                });
-
-                setExistingSession(existing || null);
-                setValidationStatus('valid');
-                setErrorMessage('');
-
-                return true;
-            }
-
-            setValidationStatus('invalid');
-            setErrorMessage('Username not found.');
-            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.');
-                return false;
-            }
-
-            const isNetworkError =
-                error?.status === 0 ||
-                error?.code === 'ECONNABORTED' ||
-                error?.code === 'ERR_NETWORK' ||
-                error?.message?.toLowerCase?.().includes('network request failed') ||
-                error?.message?.toLowerCase?.().includes('network error') ||
-                error?.name === 'AbortError' ||
-                error?.type === 'network';
-
-            console.error('Username validation error:', error);
-            setValidationStatus('invalid');
-            setErrorMessage(
-                isNetworkError
-                    ? 'No connection. Check your internet connection and try again.'
-                    : 'Unable to validate username. Please try again.'
-            );
-            return false;
-        } finally {
-            setIsValidating(false);
-        }
-    }, [oxyServices, sessions]);
-
-    // Input change handlers
-    const handleUsernameChange = useCallback((text: string) => {
-        setUsername(text);
-        if (errorMessage) setErrorMessage('');
-        setValidationStatus('idle');
-    }, [errorMessage]);
-
-    const handlePasswordChange = useCallback((text: string) => {
-        setPassword(text);
-        if (errorMessage) setErrorMessage('');
-    }, [errorMessage]);
-
-    const handleInputFocus = useCallback(() => {
-        setIsInputFocused(true);
-    }, []);
-
-    const handleInputBlur = useCallback(() => {
-        setIsInputFocused(false);
-    }, []);
-
-    // Step validation and handlers
-    const validateUsernameStep = useCallback(async () => {
-        if (!username) {
-            setErrorMessage('Please enter your username.');
-            return false;
-        }
-        setErrorMessage('');
-        setIsValidating(true);
-        const valid = await validateUsername(username);
-        setIsValidating(false);
-        return valid;
-    }, [username, validateUsername]);
-
-    const [mfaToken, setMfaToken] = useState<string | null>(null);
-
-    const handleContinueWithExistingAccount = useCallback(async () => {
-        if (!existingSession) return;
-
-        try {
-            setErrorMessage('');
-            await switchSession(existingSession.sessionId);
-            // Get the user for the authenticated callback
-            const currentUser = await oxyServices.getUserBySession(existingSession.sessionId);
-            if (onAuthenticated) {
-                onAuthenticated(currentUser);
-            }
-        } catch (error: any) {
-            setErrorMessage(error.message || 'Failed to switch account');
-        }
-    }, [existingSession, switchSession, oxyServices, onAuthenticated]);
-
-    const handleSignIn = useCallback(async () => {
-        if (!password) {
-            setErrorMessage('Please enter your password.');
-            return;
-        }
-        if (!username || !userProfile) {
-            setErrorMessage('Please enter a valid username first.');
-            return;
-        }
-
-        try {
-            setErrorMessage('');
-            const user = await login(username, password);
-            if (onAuthenticated) {
-                onAuthenticated(user);
-            }
-        } catch (error: any) {
-            if (error?.code === 'MFA_REQUIRED' && error?.mfaToken) {
-                setMfaToken(error.mfaToken);
-                return; // Password step will auto-advance when MFA token is set
-            }
-            setErrorMessage(error.message || 'Login failed');
-        }
-    }, [username, password, login, onAuthenticated, userProfile]);
-
-    // Step configurations
-    const steps: StepConfig[] = useMemo(() => {
-        const base: StepConfig[] = [
-            { id: 'username', component: SignInUsernameStep, canProceed: () => true },
-            { id: 'password', component: SignInPasswordStep, canProceed: () => true },
-        ];
-        if (mfaToken) {
-            base.push({ id: 'totp', component: SignInTotpStep, canProceed: () => true });
-        }
-        return base;
-    }, [mfaToken, 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
-    }, []);
-
-    // 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
-            mfaToken,
-            existingSession,
-            handleContinueWithExistingAccount,
-        },
-        ...(mfaToken ? [{
-            username,
-            mfaToken,
-            completeMfaLogin,
-            errorMessage,
-            setErrorMessage,
-            isLoading,
-        }] : []),
-    ], [
-        username, password, errorMessage, validationStatus, userProfile, mfaToken,
-        isValidating, isInputFocused, isAddAccountMode, user, showPassword,
-        isLoading, handleUsernameChange, handlePasswordChange, handleInputFocus, handleInputBlur,
-        validateUsername, handleSignIn, completeMfaLogin, existingSession, handleContinueWithExistingAccount
-    ]);
-
-    return (
-        <StepBasedScreen
-            steps={steps}
-            initialStep={initialStep}
-            stepData={stepData}
-            onComplete={handleComplete}
-            navigate={navigate}
-            goBack={goBack}
-            onAuthenticated={onAuthenticated}
-            theme={theme}
-            showProgressIndicator={true}
-            enableAnimations={true}
-            oxyServices={oxyServices}
-        />
-    );
-};
-
-
-
-export default SignInScreen;

package/src/ui/screens/SignUpScreen.tsx

@@ -1,239 +0,0 @@
-import type React from 'react';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
-import { useThemeColors } from '../styles';
-import { toast } from '../../lib/sonner';
-import StepBasedScreen, { type StepConfig } from '../components/StepBasedScreen';
-import SignUpWelcomeStep from './steps/SignUpWelcomeStep';
-import SignUpIdentityStep from './steps/SignUpIdentityStep';
-import SignUpSecurityStep from './steps/SignUpSecurityStep';
-import SignUpSummaryStep from './steps/SignUpSummaryStep';
-import { TTLCache, registerCacheForCleanup } from '../../utils/cache';
-
-// Types for better type safety
-interface ValidationState {
-    status: 'idle' | 'validating' | 'valid' | 'invalid';
-    message: string;
-}
-
-// Constants
-const USERNAME_MIN_LENGTH = 3;
-const PASSWORD_MIN_LENGTH = 8;
-
-// Email validation regex
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-// Main component
-const SignUpScreen: React.FC<BaseScreenProps> = ({
-    navigate,
-    goBack,
-    onAuthenticated,
-    theme,
-}) => {
-    const { signUp, oxyServices } = useOxy();
-    const colors = useThemeColors(theme);
-
-    // Form data state
-    const [username, setUsername] = useState('');
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
-    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Validation state
-    const [validationState, setValidationState] = useState<ValidationState>({
-        status: 'idle',
-        message: '',
-    });
-
-    // Error message state
-    const [errorMessage, setErrorMessage] = useState('');
-
-    // Username validation with caching - uses centralized cache
-    const usernameCache = useRef(new TTLCache<boolean>(5 * 60 * 1000)); // 5 minutes cache
-    
-    // Register cache for cleanup on mount
-    useEffect(() => {
-        registerCacheForCleanup(usernameCache.current);
-        return () => {
-            usernameCache.current.clear();
-        };
-    }, []);
-
-    const validateUsername = useCallback(async (usernameToValidate: string): Promise<boolean> => {
-        if (!usernameToValidate || usernameToValidate.length < USERNAME_MIN_LENGTH) {
-            setValidationState({ status: 'invalid', message: 'Username must be at least 3 characters' });
-            return false;
-        }
-
-        // Check cache first
-        const cached = usernameCache.current.get(usernameToValidate);
-        if (cached !== null) {
-            const isValid = cached;
-            setValidationState({
-                status: isValid ? 'valid' : 'invalid',
-                message: isValid ? '' : 'Username is already taken'
-            });
-            return isValid;
-        }
-
-        setValidationState({ status: 'validating', message: '' });
-
-        try {
-            const result = await oxyServices.checkUsernameAvailability(usernameToValidate);
-            const isValid = result.available;
-
-            // Cache the result
-            usernameCache.current.set(usernameToValidate, isValid);
-
-            setValidationState({
-                status: isValid ? 'valid' : 'invalid',
-                message: isValid ? '' : (result.message || 'Username is already taken')
-            });
-
-            return isValid;
-        } catch (error: any) {
-            console.error('Username validation error:', error);
-            setValidationState({
-                status: 'invalid',
-                message: 'Unable to validate username. Please try again.'
-            });
-            return false;
-        }
-    }, [oxyServices]);
-
-    // Email validation
-    const validateEmail = useCallback((emailToValidate: string): boolean => {
-        return EMAIL_REGEX.test(emailToValidate);
-    }, []);
-
-    // Password validation
-    const validatePassword = useCallback((passwordToValidate: string): boolean => {
-        return passwordToValidate.length >= PASSWORD_MIN_LENGTH;
-    }, []);
-
-    // Handle form completion
-    const handleComplete = useCallback(async (stepData: any[]) => {
-        if (!username || !email || !password) {
-            toast.error('Please fill in all required fields');
-            return;
-        }
-
-        if (!validateEmail(email)) {
-            toast.error('Please enter a valid email address');
-            return;
-        }
-
-        if (!validatePassword(password)) {
-            toast.error('Password must be at least 8 characters long');
-            return;
-        }
-
-        if (password !== confirmPassword) {
-            toast.error('Passwords do not match');
-            return;
-        }
-
-        try {
-            setIsLoading(true);
-            const user = await signUp(username, email, password);
-            toast.success('Account created successfully! Welcome to Oxy!');
-
-            // Navigate to welcome screen or handle authentication
-            navigate('WelcomeNewUser', { newUser: user });
-        } catch (error: any) {
-            toast.error(error.message || 'Sign up failed');
-        } finally {
-            setIsLoading(false);
-        }
-    }, [username, email, password, confirmPassword, validateEmail, validatePassword, signUp, navigate]);
-
-
-    // Step configurations
-    const steps: StepConfig[] = useMemo(() => [
-        {
-            id: 'welcome',
-            component: SignUpWelcomeStep,
-            canProceed: () => true,
-        },
-        {
-            id: 'identity',
-            component: SignUpIdentityStep,
-            canProceed: () => !!(username.trim() && email.trim() && validateEmail(email) && validationState.status === 'valid'),
-            onEnter: () => {
-                // Auto-validate username when entering this step
-                if (username && validationState.status === 'idle') {
-                    validateUsername(username);
-                }
-            },
-        },
-        {
-            id: 'security',
-            component: SignUpSecurityStep,
-            canProceed: () => !!(password && validatePassword(password) && password === confirmPassword),
-        },
-        {
-            id: 'summary',
-            component: SignUpSummaryStep,
-            canProceed: () => true,
-        },
-    ], [username, email, password, confirmPassword, validationState.status, validateEmail, validatePassword, validateUsername]);
-
-    // Step data for the reusable component
-    const stepData = useMemo(() => [
-        // Welcome step - no data needed
-        {},
-        // Identity step
-        {
-            username,
-            email,
-            setUsername,
-            setEmail,
-            validationState,
-            setValidationState,
-            setErrorMessage,
-            validateEmail,
-            validateUsername,
-        },
-        // Security step
-        {
-            password,
-            confirmPassword,
-            setPassword,
-            setConfirmPassword,
-            showPassword,
-            showConfirmPassword,
-            setShowPassword,
-            setShowConfirmPassword,
-            setErrorMessage,
-            validatePassword,
-        },
-        // Summary step
-        {
-            isLoading,
-        },
-    ], [
-        username, email, password, confirmPassword, showPassword, showConfirmPassword,
-        validationState, errorMessage, validateEmail, validatePassword, isLoading
-    ]);
-
-    return (
-        <StepBasedScreen
-            steps={steps}
-            stepData={stepData}
-            onComplete={handleComplete}
-            navigate={navigate}
-            goBack={goBack}
-            onAuthenticated={onAuthenticated}
-            theme={theme}
-            showProgressIndicator={true}
-            enableAnimations={true}
-            oxyServices={oxyServices}
-        />
-    );
-};
-
-export default SignUpScreen;