@oxyhq/services 5.11.10 → 5.11.12

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

@@ -57,7 +57,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 }) => {
     const inputRef = useRef<TextInput>(null);
 
-    // Animated styles
+    // Animated styles - properly memoized to prevent re-renders
     const containerAnimatedStyle = useAnimatedStyle(() => {
         return {
             opacity: fadeAnim.value,
@@ -66,13 +66,13 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                 { scale: scaleAnim.value }
             ]
         };
-    }, [fadeAnim, slideAnim, scaleAnim]);
+    });
 
     const logoAnimatedStyle = useAnimatedStyle(() => {
         return {
             transform: [{ scale: logoAnim.value }]
         };
-    }, [logoAnim]);
+    });
 
     // Focus password input on error or when step becomes active
     useEffect(() => {

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

@@ -53,7 +53,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
 }) => {
     const inputRef = useRef<TextInput>(null);
 
-    // Animated styles
+    // Animated styles - properly memoized to prevent re-renders
     const animatedStyle = useAnimatedStyle(() => {
         return {
             opacity: fadeAnim.value,
@@ -62,7 +62,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 { scale: scaleAnim.value }
             ]
         };
-    }, [fadeAnim, slideAnim, scaleAnim]);
+    });
 
     const handleUsernameContinue = () => {
         if (!username || validationStatus === 'invalid') {

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

@@ -0,0 +1,130 @@
+import type React from 'react';
+import { useRef } from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../../assets/illustrations/HighFive';
+import TextField from '../../components/internal/TextField';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface RecoverRequestStepProps {
+    // Common props from StepBasedScreen
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+
+    // Step navigation
+    nextStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+
+    // Data management
+    stepData?: any;
+    updateStepData: (data: any) => void;
+
+    // Form state
+    identifier: string;
+    setIdentifier: (identifier: string) => void;
+    errorMessage: string;
+    setErrorMessage: (message: string) => void;
+    isLoading: boolean;
+    setIsLoading: (loading: boolean) => void;
+}
+
+const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+    identifier,
+    setIdentifier,
+    errorMessage,
+    setErrorMessage,
+    isLoading,
+    setIsLoading,
+}) => {
+    const inputRef = useRef<any>(null);
+
+    const handleIdentifierChange = (text: string) => {
+        setIdentifier(text);
+        if (errorMessage) setErrorMessage('');
+    };
+
+    const handleRequest = () => {
+        if (!identifier || identifier.length < 3) {
+            setErrorMessage('Please enter your email or username.');
+            setTimeout(() => inputRef.current?.focus(), 0);
+            return;
+        }
+
+        setErrorMessage('');
+        setIsLoading(true);
+
+        // Simulate API call
+        setTimeout(() => {
+            setIsLoading(false);
+            nextStep(); // Move to verification step
+        }, 1200);
+    };
+
+    const handleRequestWithFocus = () => {
+        if (!identifier) {
+            setTimeout(() => inputRef.current?.focus(), 0);
+        }
+        handleRequest();
+    };
+
+    return (
+        <>
+            <HighFive width={100} height={100} />
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Recover Account
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Enter your email or username to receive a 6-digit code.
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={inputRef}
+                    label="Email or Username"
+                    leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
+                    value={identifier}
+                    onChangeText={handleIdentifierChange}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="recover-identifier-input"
+                    variant="filled"
+                    error={errorMessage || undefined}
+                    editable={!isLoading}
+                    onSubmitEditing={handleRequestWithFocus}
+                    autoFocus
+                />
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back to Sign In',
+                        onPress: () => navigate('SignIn'),
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Send Code',
+                        onPress: handleRequest,
+                        icon: 'mail-open-outline',
+                        variant: 'primary',
+                        loading: isLoading,
+                        disabled: isLoading,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default RecoverRequestStep;

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

@@ -0,0 +1,131 @@
+import type React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface RecoverSuccessStepProps {
+    // 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
+    successMessage: string;
+}
+
+const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    allStepData,
+    successMessage,
+}) => {
+    // Extract identifier from previous steps
+    const requestData = allStepData[0] || {};
+    const { identifier } = requestData;
+
+    const handleContinueToReset = () => {
+        // Navigate to password reset with the identifier
+        navigate('ResetPassword', { identifier });
+    };
+
+    const handleBackToSignIn = () => {
+        navigate('SignIn');
+    };
+
+    return (
+        <>
+            <View style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 32,
+            }}>
+                <View style={{
+                    width: 80,
+                    height: 80,
+                    borderRadius: 40,
+                    backgroundColor: colors.success + '20',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 24,
+                }}>
+                    <Ionicons name="checkmark-circle" size={40} color={colors.success} />
+                </View>
+            </View>
+
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Account Verified!
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Your account has been successfully verified.
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <View style={{
+                    padding: 20,
+                    backgroundColor: colors.inputBackground,
+                    borderRadius: 16,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    marginBottom: 24,
+                }}>
+                    <Text style={[styles.footerText, { color: colors.text, fontSize: 16, marginBottom: 8 }]}>
+                        What's next?
+                    </Text>
+                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 14, lineHeight: 20 }]}>
+                        You can now reset your password or return to sign in with your existing credentials.
+                    </Text>
+                </View>
+
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    padding: 12,
+                    backgroundColor: colors.success + '10',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: colors.success + '30',
+                }}>
+                    <Ionicons name="shield-checkmark" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                    <Text style={[styles.footerText, { color: colors.success, fontSize: 14, flex: 1 }]}>
+                        {successMessage || 'Your account recovery is complete and secure.'}
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back to Sign In',
+                        onPress: handleBackToSignIn,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Reset Password',
+                        onPress: handleContinueToReset,
+                        icon: 'key-outline',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default RecoverSuccessStep;

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;