@oxyhq/services 5.11.9 → 5.11.11

package/src/ui/screens/steps/RecoverVerifyStep.tsx

@@ -0,0 +1,153 @@
+import type React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import PinInput from '../../components/internal/PinInput';
+
+interface RecoverVerifyStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    verificationCode: string;
+    setVerificationCode: (code: string) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    successMessage: string;
+    setSuccessMessage: (message: string) => void;
+    isLoading: boolean;
+    setIsLoading: (loading: boolean) => void;
+}
+
+const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
+    colors,
+    styles,
+    nextStep,
+    prevStep,
+    verificationCode,
+    setVerificationCode,
+    errorMessage,
+    setErrorMessage,
+    successMessage,
+    setSuccessMessage,
+    isLoading,
+    setIsLoading,
+}) => {
+    const handleVerifyCode = () => {
+        setErrorMessage('');
+        setSuccessMessage('');
+
+        if (verificationCode.length !== 6) {
+            setErrorMessage('Please enter the 6-digit code.');
+            return;
+        }
+
+        setIsLoading(true);
+
+        // Simulate verification
+        setTimeout(() => {
+            setIsLoading(false);
+            if (verificationCode === '123456') { // Simulate correct code
+                setSuccessMessage('Your account has been verified! You can now reset your password.');
+                nextStep(); // Move to success step
+            } else {
+                setErrorMessage('Invalid code. Please try again.');
+            }
+        }, 1200);
+    };
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Verify Code
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Enter the 6-digit code sent to your email or phone.
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <PinInput
+                    value={verificationCode}
+                    onChange={setVerificationCode}
+                    length={6}
+                    disabled={isLoading}
+                    autoFocus
+                    colors={colors}
+                />
+
+                {successMessage && (
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        marginTop: 16,
+                        padding: 12,
+                        backgroundColor: colors.success + '10',
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: colors.success + '30',
+                    }}>
+                        <Ionicons name="checkmark-circle" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                        <Text style={[styles.footerText, { color: colors.success, fontSize: 14 }]}>
+                            {successMessage}
+                        </Text>
+                    </View>
+                )}
+
+                {errorMessage && (
+                    <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        marginTop: 16,
+                        padding: 12,
+                        backgroundColor: colors.error + '10',
+                        borderRadius: 8,
+                        borderWidth: 1,
+                        borderColor: colors.error + '30',
+                    }}>
+                        <Ionicons name="alert-circle" size={20} color={colors.error} style={{ marginRight: 8 }} />
+                        <Text style={[styles.footerText, { color: colors.error, fontSize: 14 }]}>
+                            {errorMessage}
+                        </Text>
+                    </View>
+                )}
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Verify Code',
+                        onPress: handleVerifyCode,
+                        icon: 'checkmark-circle-outline',
+                        variant: 'primary',
+                        loading: isLoading,
+                        disabled: isLoading || verificationCode.length !== 6,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default RecoverVerifyStep;

package/src/ui/screens/steps/SignInPasswordStep.tsx

@@ -0,0 +1,172 @@
+import type React from 'react';
+import { useRef, useEffect } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Avatar from '../../components/Avatar';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignInPasswordStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    allStepData: any[];
+
+    // Form state
+    password: string;
+    setPassword: (password: string) => void;
+    showPassword: boolean;
+    setShowPassword: (show: boolean) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    isLoading: boolean;
+
+    // User profile
+    userProfile: any;
+    username: string;
+
+    // Sign-in function
+    handleSignIn: () => Promise<void>;
+}
+
+const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
+    colors,
+    styles,
+    theme,
+    navigate,
+    prevStep,
+    password,
+    setPassword,
+    showPassword,
+    setShowPassword,
+    errorMessage,
+    setErrorMessage,
+    isLoading,
+    userProfile,
+    username,
+    handleSignIn,
+}) => {
+    const inputRef = useRef<any>(null);
+
+    const handlePasswordChange = (text: string) => {
+        setPassword(text);
+        if (errorMessage) setErrorMessage('');
+    };
+
+    const handleSignInSubmit = async () => {
+        if (!password) {
+            setErrorMessage('Please enter your password.');
+            setTimeout(() => inputRef.current?.focus(), 0);
+            return;
+        }
+
+        // Call the actual sign-in function passed from props
+        await handleSignIn();
+    };
+
+    const togglePasswordVisibility = () => {
+        setShowPassword(!showPassword);
+    };
+
+    // Focus password input on error
+    useEffect(() => {
+        if (errorMessage) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+    }, [errorMessage]);
+
+    return (
+        <>
+            <View style={styles.modernUserProfileContainer}>
+                <View style={styles.avatarContainer}>
+                    <Avatar
+                        name={userProfile?.displayName || userProfile?.name || username}
+                        size={100}
+                        theme={theme as 'light' | 'dark'}
+                        style={styles.modernUserAvatar}
+                        backgroundColor={colors.primary + '20'}
+                    />
+                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
+                </View>
+                <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
+                    {userProfile?.displayName || userProfile?.name || username}
+                </Text>
+                <Text style={[styles.modernUsernameSubtext, { color: colors.secondaryText }]}>
+                    @{username}
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={inputRef}
+                    label="Password"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+                    value={password}
+                    onChangeText={handlePasswordChange}
+                    secureTextEntry={!showPassword}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="password-input"
+                    variant="filled"
+                    error={errorMessage || undefined}
+                    onSubmitEditing={handleSignInSubmit}
+                    autoFocus
+                />
+
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+                    <Text style={[styles.footerText, { color: colors.text }]}>Forgot your password? </Text>
+                    <TouchableOpacity onPress={() => navigate('RecoverAccount', {
+                        returnTo: 'SignIn',
+                        returnStep: 1,
+                        returnData: { username, userProfile }
+                    })}>
+                        <Text style={[styles.modernLinkText, { color: colors.primary }]}>Recover your account</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Sign In',
+                        onPress: handleSignInSubmit,
+                        icon: 'log-in',
+                        variant: 'primary',
+                        loading: isLoading,
+                        testID: 'login-button',
+                    },
+                ]}
+                colors={colors}
+            />
+
+            <View style={styles.securityNotice}>
+                <Ionicons name="shield-checkmark" size={14} color={colors.secondaryText} />
+                <Text style={[styles.securityText, { color: colors.secondaryText }]}>
+                    Your data is encrypted and secure
+                </Text>
+            </View>
+        </>
+    );
+};
+
+export default SignInPasswordStep;

package/src/ui/screens/steps/SignInUsernameStep.tsx

@@ -0,0 +1,176 @@
+import type React from 'react';
+import { useRef, useEffect } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../../assets/illustrations/HighFive';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignInUsernameStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    allStepData: any[];
+
+    // Form state
+    username: string;
+    setUsername: (username: string) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    validationStatus: 'idle' | 'validating' | 'valid' | 'invalid';
+    userProfile: any;
+    isValidating: boolean;
+
+    // Add account mode
+    isAddAccountMode?: boolean;
+    user?: any;
+
+    // Validation function
+    validateUsername: (username: string) => Promise<boolean>;
+}
+
+const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    username,
+    setUsername,
+    errorMessage,
+    setErrorMessage,
+    validationStatus,
+    userProfile,
+    isValidating,
+    isAddAccountMode,
+    user,
+    validateUsername,
+}) => {
+    const inputRef = useRef<any>(null);
+
+    // Monitor username prop changes
+    useEffect(() => {
+        console.log('👀 SignInUsernameStep username prop changed:', username);
+    }, [username]);
+
+    const handleUsernameChange = (text: string) => {
+        console.log('📝 Username input changed:', text);
+        setUsername(text);
+        if (errorMessage) setErrorMessage('');
+    };
+
+    const handleContinue = async () => {
+        console.log('🚀 Continue button pressed, username:', username);
+
+        const trimmedUsername = username?.trim() || '';
+
+        if (!trimmedUsername) {
+            console.log('❌ Username is empty');
+            setErrorMessage('Please enter your username.');
+            setTimeout(() => inputRef.current?.focus(), 0);
+            return;
+        }
+
+        if (trimmedUsername.length < 2) {
+            console.log('❌ Username too short');
+            setErrorMessage('Username must be at least 3 characters.');
+            return;
+        }
+
+        console.log('🔍 Starting username validation...');
+        try {
+            // Validate the username before proceeding
+            const isValid = await validateUsername(trimmedUsername);
+            console.log('📊 Validation result:', isValid);
+
+            if (isValid) {
+                console.log('✅ Validation passed, proceeding to next step');
+                nextStep();
+            } else {
+                console.log('❌ Validation failed, staying on current step');
+            }
+        } catch (error) {
+            console.error('🚨 Error during validation:', error);
+            setErrorMessage('Unable to validate username. Please try again.');
+        }
+    };
+
+    return (
+        <>
+            <HighFive width={100} height={100} />
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    {isAddAccountMode ? 'Add Another Account' : 'Sign In'}
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    {isAddAccountMode
+                        ? 'Sign in with another account'
+                        : 'Sign in to continue your journey'
+                    }
+                </Text>
+            </View>
+
+            {isAddAccountMode && user && (
+                <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
+                    <Ionicons name="information-circle" size={20} color={colors.primary} />
+                    <Text style={[styles.modernInfoText, { color: colors.text }]}>
+                        Currently signed in as <Text style={{ fontWeight: 'bold' }}>{user.username}</Text>
+                    </Text>
+                </View>
+            )}
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={inputRef}
+                    label="Username"
+                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
+                    value={username}
+                    onChangeText={handleUsernameChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="username-input"
+                    variant="filled"
+                    error={validationStatus === 'invalid' ? errorMessage : undefined}
+                    loading={validationStatus === 'validating'}
+                    success={validationStatus === 'valid'}
+                    onSubmitEditing={() => handleContinue()}
+                    autoFocus
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Sign Up',
+                        onPress: () => navigate('SignUp'),
+                        icon: 'person-add',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Continue',
+                        onPress: handleContinue,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        loading: isValidating,
+                        disabled: !username || username.trim().length < 2 || isValidating,
+                        testID: 'username-next-button',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignInUsernameStep;

package/src/ui/screens/steps/SignUpIdentityStep.tsx

@@ -0,0 +1,204 @@
+import type React from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignUpIdentityStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    username: string;
+    email: string;
+    setUsername: (username: string) => void;
+    setEmail: (email: string) => void;
+    validationState: any;
+    setValidationState: (state: any) => void;
+    setErrorMessage: (message: string) => void;
+
+    // Validation
+    validateEmail: (email: string) => boolean;
+    validateUsername: (username: string) => Promise<boolean>;
+}
+
+const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    prevStep,
+    username,
+    email,
+    setUsername,
+    setEmail,
+    validationState,
+    setValidationState,
+    setErrorMessage,
+    validateEmail,
+    validateUsername,
+}) => {
+    const usernameRef = useRef<any>(null);
+    const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Debounced username validation
+    const debouncedValidateUsername = useCallback((usernameToValidate: string) => {
+        if (validationTimeoutRef.current) {
+            clearTimeout(validationTimeoutRef.current);
+        }
+
+        validationTimeoutRef.current = setTimeout(async () => {
+            if (usernameToValidate.trim().length >= 3) {
+                await validateUsername(usernameToValidate.trim());
+            }
+        }, 500);
+    }, [validateUsername]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (validationTimeoutRef.current) {
+                clearTimeout(validationTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const handleUsernameChange = (text: string) => {
+        setUsername(text);
+        setErrorMessage('');
+        // Reset validation state when user types
+        if (validationState.status !== 'idle') {
+            setValidationState({ status: 'idle', message: '' });
+        }
+
+        // Trigger debounced validation
+        debouncedValidateUsername(text);
+    };
+
+    const handleEmailChange = (text: string) => {
+        setEmail(text);
+        setErrorMessage('');
+    };
+
+    const handleNext = async () => {
+        if (!username.trim()) {
+            setErrorMessage('Please enter a username');
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        if (username.trim().length < 3) {
+            setErrorMessage('Username must be at least 3 characters');
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        if (!email.trim()) {
+            setErrorMessage('Please enter an email address');
+            return;
+        }
+
+        if (!validateEmail(email)) {
+            setErrorMessage('Please enter a valid email address');
+            return;
+        }
+
+        // Validate username availability
+        const isUsernameValid = await validateUsername(username.trim());
+        if (!isUsernameValid) {
+            setTimeout(() => usernameRef.current?.focus(), 0);
+            return;
+        }
+
+        nextStep();
+    };
+
+    const emailError = email && !validateEmail(email) ? 'Please enter a valid email address' : undefined;
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Who are you?
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Choose your username and enter your email
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={usernameRef}
+                    label="Username"
+                    leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
+                    value={username}
+                    onChangeText={handleUsernameChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-username-input"
+                    variant="filled"
+                    error={validationState.status === 'invalid' ? validationState.message : undefined}
+                    loading={validationState.status === 'validating'}
+                    success={validationState.status === 'valid'}
+                    onSubmitEditing={handleNext}
+                    autoFocus
+                />
+
+                <TextField
+                    label="Email"
+                    leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
+                    value={email}
+                    onChangeText={handleEmailChange}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-email-input"
+                    variant="filled"
+                    error={emailError}
+                    onSubmitEditing={handleNext}
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        loading: validationState.status === 'validating',
+                        disabled: !username.trim() ||
+                            username.trim().length < 3 ||
+                            !email.trim() ||
+                            !validateEmail(email) ||
+                            validationState.status === 'validating' ||
+                            validationState.status === 'invalid',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpIdentityStep;