@oxyhq/services 5.5.9 → 5.6.0

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

@@ -0,0 +1,179 @@
+import React, { useRef, useCallback, useEffect } from 'react';
+import { View, Text, Animated, TouchableOpacity, TextInput, StatusBar } 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';
+import { useNavigation } from '@react-navigation/native';
+
+interface SignInPasswordStepProps {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    scaleAnim: Animated.Value;
+    colors: any;
+    userProfile: any;
+    username: string;
+    theme: string;
+    logoAnim: Animated.Value;
+    errorMessage: string;
+    inputScaleAnim: Animated.Value;
+    isInputFocused: boolean;
+    password: string;
+    showPassword: boolean;
+    handleInputFocus: () => void;
+    handleInputBlur: () => void;
+    handlePasswordChange: (text: string) => void;
+    handleSignIn: () => void;
+    isLoading: boolean;
+    prevStep: () => void;
+}
+
+const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    scaleAnim,
+    colors,
+    userProfile,
+    username,
+    theme,
+    logoAnim,
+    errorMessage,
+    inputScaleAnim,
+    isInputFocused,
+    password,
+    showPassword,
+    handleInputFocus,
+    handleInputBlur,
+    handlePasswordChange,
+    handleSignIn: parentHandleSignIn,
+    isLoading,
+    prevStep,
+}) => {
+    const navigation = useNavigation();
+    const inputRef = useRef<TextInput>(null);
+
+    const navigate = useCallback((screen: string) => {
+        navigation.navigate(screen as never);
+    }, [navigation]);
+
+    // Focus password input on error or when step becomes active
+    useEffect(() => {
+        if (errorMessage) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+    }, [errorMessage]);
+
+    const handleSignIn = useCallback(() => {
+        if (!password || errorMessage) {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+        parentHandleSignIn();
+    }, [password, errorMessage, parentHandleSignIn]);
+
+    return (
+        <Animated.View style={[
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateX: slideAnim },
+                    { scale: scaleAnim }
+                ]
+            }
+        ]}>
+            <View style={styles.modernUserProfileContainer}>
+                <Animated.View style={[
+                    styles.avatarContainer,
+                    { transform: [{ scale: logoAnim }] }
+                ]}>
+                    <Avatar
+                        uri={userProfile?.avatar}
+                        name={userProfile?.displayName || userProfile?.name || username}
+                        size={100}
+                        theme={theme as 'light' | 'dark'}
+                        style={styles.modernUserAvatar}
+                    />
+                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
+                </Animated.View>
+                <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
+                    {userProfile?.displayName || userProfile?.name || username}
+                </Text>
+                <Text style={[styles.modernUsernameSubtext, { color: colors.secondaryText }]}>
+                    @{username}
+                </Text>
+                <View style={[styles.welcomeBackBadge, { backgroundColor: colors.primary + '15' }]}>
+                    <Ionicons name="checkmark-circle" size={16} color={colors.primary} />
+                    <Text style={[styles.welcomeBackText, { color: colors.primary }]}>
+                        Welcome back!
+                    </Text>
+                </View>
+            </View>
+            <Animated.View style={[
+                styles.modernInputContainer,
+                { transform: [{ scale: inputScaleAnim }] }
+            ]}>
+                <TextField
+                    ref={inputRef}
+                    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 || undefined}
+                    onSubmitEditing={handleSignIn}
+                    autoFocus
+                />
+                <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+                    <Text style={[styles.footerText, { color: colors.text }]}>Forgot your password? </Text>
+                    <TouchableOpacity onPress={() => navigate('RecoverAccount')}>
+                        <Text style={[styles.modernLinkText, { color: colors.primary }]}>Recover your account</Text>
+                    </TouchableOpacity>
+                </View>
+            </Animated.View>
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Sign In',
+                        onPress: handleSignIn,
+                        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>
+            <StatusBar
+                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
+                backgroundColor={colors.background}
+            />
+        </Animated.View>
+    );
+};
+
+export default SignInPasswordStep; 

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

@@ -0,0 +1,139 @@
+import React, { useRef } from 'react';
+import { TextInput, View, Text, Animated } 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 {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    scaleAnim: Animated.Value;
+    colors: any;
+    isAddAccountMode: boolean;
+    user: any;
+    errorMessage: string;
+    inputScaleAnim: Animated.Value;
+    isInputFocused: boolean;
+    username: string;
+    validationStatus: 'idle' | 'validating' | 'valid' | 'invalid';
+    userProfile: any;
+    isValidating: boolean;
+    handleInputFocus: () => void;
+    handleInputBlur: () => void;
+    handleUsernameChange: (text: string) => void;
+    handleUsernameContinue: () => void;
+    navigate: any;
+}
+
+const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    scaleAnim,
+    colors,
+    isAddAccountMode,
+    user,
+    errorMessage,
+    inputScaleAnim,
+    isInputFocused,
+    username,
+    validationStatus,
+    userProfile,
+    isValidating,
+    handleInputFocus,
+    handleInputBlur,
+    handleUsernameChange,
+    handleUsernameContinue: parentHandleUsernameContinue,
+    navigate,
+}) => {
+    const inputRef = useRef<TextInput>(null);
+    const handleUsernameContinue = () => {
+        if (!username || validationStatus === 'invalid') {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+        parentHandleUsernameContinue();
+    };
+    return (
+        <Animated.View style={[
+            styles.stepContainer,
+            {
+                opacity: fadeAnim,
+                transform: [
+                    { translateX: slideAnim },
+                    { scale: scaleAnim }
+                ]
+            }
+        ]}>
+            <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 && (
+                <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>
+            )}
+            <Animated.View style={[
+                styles.modernInputContainer,
+                { transform: [{ scale: inputScaleAnim }] }
+            ]}>
+                <TextField
+                    ref={inputRef}
+                    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' ? errorMessage : undefined}
+                    loading={validationStatus === 'validating'}
+                    success={validationStatus === 'valid'}
+                    validMessage={validationStatus === 'valid' && userProfile ? `Welcome back, ${userProfile.displayName || userProfile.name || username}!` : undefined}
+                    onSubmitEditing={handleUsernameContinue}
+                    autoFocus
+                />
+            </Animated.View>
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        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',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default SignInUsernameStep; 

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

@@ -0,0 +1,114 @@
+import React, { useRef } from 'react';
+import { View, Text, Animated, TouchableOpacity, TextInput } from 'react-native';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+import HighFive from '../../../assets/illustrations/HighFive';
+import { Ionicons } from '@expo/vector-icons';
+
+interface SignUpIdentityStepProps {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    colors: any;
+    formData: any;
+    validationState: any;
+    updateField: (field: string, value: string) => void;
+    setErrorMessage: (msg: string) => void;
+    prevStep: () => void;
+    handleIdentityNext: () => void;
+    ValidationMessage: React.FC<any>;
+    validateEmail: (email: string) => boolean;
+    navigate: any;
+}
+
+const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    colors,
+    formData,
+    validationState,
+    updateField,
+    setErrorMessage,
+    prevStep,
+    handleIdentityNext: parentHandleIdentityNext,
+    ValidationMessage,
+    validateEmail,
+    navigate,
+}) => {
+    const inputRef = useRef<TextInput>(null);
+    const handleIdentityNext = () => {
+        if (!formData.username || validationState.status === 'invalid') {
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+        parentHandleIdentityNext();
+    };
+    return (
+        <Animated.View style={[
+            styles.stepContainer,
+            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+        ]}>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.stepTitle, { color: colors.text }]}>Who are you?</Text>
+            </View>
+            <TextField
+                ref={inputRef}
+                icon="person-outline"
+                label="Username"
+                value={formData.username}
+                onChangeText={(text) => {
+                    updateField('username', text);
+                    setErrorMessage('');
+                }}
+                autoCapitalize="none"
+                autoCorrect={false}
+                testID="username-input"
+                colors={colors}
+                variant="filled"
+                error={validationState.status === 'invalid' ? validationState.message : undefined}
+                loading={validationState.status === 'validating'}
+                success={validationState.status === 'valid'}
+                validMessage={validationState.status === 'valid' ? 'Looks good!' : undefined}
+                onSubmitEditing={handleIdentityNext}
+                autoFocus
+            />
+            <ValidationMessage validationState={validationState} colors={colors} styles={styles} />
+            <TextField
+                icon="mail-outline"
+                label="Email"
+                value={formData.email}
+                onChangeText={(text) => {
+                    updateField('email', text);
+                }}
+                keyboardType="email-address"
+                autoCapitalize="none"
+                autoCorrect={false}
+                testID="email-input"
+                colors={colors}
+                variant="filled"
+                error={formData.email && !validateEmail(formData.email) ? 'Please enter a valid email address' : undefined}
+            />
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleIdentityNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default SignUpIdentityStep; 

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

@@ -0,0 +1,132 @@
+import React, { useRef, useCallback, useEffect } from 'react';
+import { View, Text, Animated, TextInput } from 'react-native';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignUpSecurityStepProps {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    colors: any;
+    formData: any;
+    passwordVisibility: { password: boolean; confirmPassword: boolean };
+    updateField: (field: string, value: string) => void;
+    validatePassword: (password: string) => boolean;
+    validatePasswordsMatch: (password: string, confirmPassword: string) => boolean;
+    prevStep: () => void;
+    handleSecurityNext: () => void;
+    setErrorMessage: (msg: string) => void;
+    togglePasswordVisibility: () => void;
+    PASSWORD_MIN_LENGTH: number;
+}
+
+const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    colors,
+    formData,
+    passwordVisibility,
+    updateField,
+    validatePassword,
+    validatePasswordsMatch,
+    prevStep,
+    handleSecurityNext: parentHandleSecurityNext,
+    setErrorMessage,
+    togglePasswordVisibility,
+    PASSWORD_MIN_LENGTH,
+}) => {
+    const passwordRef = useRef<TextInput>(null);
+    const confirmPasswordRef = useRef<TextInput>(null);
+
+    // Focus the first invalid field on error or when step becomes active
+    useEffect(() => {
+        if (formData.password && typeof formData.password === 'string' && !validatePassword(formData.password)) {
+            setTimeout(() => {
+                passwordRef.current?.focus();
+            }, 0);
+        } else if (formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
+            setTimeout(() => {
+                confirmPasswordRef.current?.focus();
+            }, 0);
+        }
+    }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch]);
+
+    const handleSecurityNext = useCallback(() => {
+        if (!formData.password || !validatePassword(formData.password)) {
+            setTimeout(() => {
+                passwordRef.current?.focus();
+            }, 0);
+            return;
+        }
+        if (!formData.confirmPassword || !validatePasswordsMatch(formData.password, formData.confirmPassword)) {
+            setTimeout(() => {
+                confirmPasswordRef.current?.focus();
+            }, 0);
+            return;
+        }
+        parentHandleSecurityNext();
+    }, [formData.password, formData.confirmPassword, validatePassword, validatePasswordsMatch, parentHandleSecurityNext]);
+
+    return (
+        <Animated.View style={[
+            styles.stepContainer,
+            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+        ]}>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.stepTitle, { color: colors.text }]}>Secure your account</Text>
+            </View>
+            <TextField
+                ref={passwordRef}
+                icon="lock-closed-outline"
+                label="Password"
+                value={formData.password}
+                onChangeText={text => updateField('password', text)}
+                secureTextEntry={!passwordVisibility.password}
+                autoCapitalize="none"
+                autoCorrect={false}
+                testID="password-input"
+                colors={colors}
+                variant="filled"
+                error={formData.password && typeof formData.password === 'string' && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined}
+                onSubmitEditing={() => confirmPasswordRef.current?.focus()}
+                autoFocus
+            />
+            <Text style={[styles.passwordHint, { color: colors.secondaryText }]}>Password must be at least {PASSWORD_MIN_LENGTH} characters long</Text>
+            <TextField
+                ref={confirmPasswordRef}
+                icon="lock-closed-outline"
+                label="Confirm Password"
+                value={formData.confirmPassword}
+                onChangeText={text => updateField('confirmPassword', text)}
+                secureTextEntry={!passwordVisibility.confirmPassword}
+                autoCapitalize="none"
+                autoCorrect={false}
+                testID="confirm-password-input"
+                colors={colors}
+                variant="filled"
+                error={formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined}
+                onSubmitEditing={handleSecurityNext}
+            />
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleSecurityNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                    },
+                ]}
+                colors={colors}
+            />
+        </Animated.View>
+    );
+};
+
+export default SignUpSecurityStep; 

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Text, Animated, TouchableOpacity } from 'react-native';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface SignUpSummaryStepProps {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    colors: any;
+    formData: any;
+    isLoading: boolean;
+    handleSignUp: () => void;
+    prevStep: () => void;
+}
+
+const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    colors,
+    formData,
+    isLoading,
+    handleSignUp,
+    prevStep,
+}) => (
+    <Animated.View style={[
+        styles.stepContainer,
+        { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+    ]}>
+        <View style={styles.modernHeader}>
+            <Text style={[styles.stepTitle, { color: colors.text }]}>Ready to join</Text>
+        </View>
+        <View style={styles.summaryContainer}>
+            <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Username:</Text>
+                <Text style={[styles.summaryValue, { color: colors.text }]}>{formData.username}</Text>
+            </View>
+            <View style={styles.summaryRow}>
+                <Text style={[styles.summaryLabel, { color: colors.secondaryText }]}>Email:</Text>
+                <Text style={[styles.summaryValue, { color: colors.text }]}>{formData.email}</Text>
+            </View>
+        </View>
+        <GroupedPillButtons
+            buttons={[
+                {
+                    text: 'Back',
+                    onPress: prevStep,
+                    icon: 'arrow-back',
+                    variant: 'transparent',
+                },
+                {
+                    text: 'Create Account',
+                    onPress: handleSignUp,
+                    icon: 'checkmark',
+                    variant: 'primary',
+                    disabled: isLoading,
+                    loading: isLoading,
+                    testID: 'signup-button',
+                },
+            ]}
+            colors={colors}
+        />
+    </Animated.View>
+);
+
+export default SignUpSummaryStep; 

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, Text, Animated } from 'react-native';
+import HighFive from '../../../assets/illustrations/HighFive';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface SignUpWelcomeStepProps {
+    styles: any;
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+    colors: any;
+    nextStep: () => void;
+    navigate: any;
+}
+
+const SignUpWelcomeStep: React.FC<SignUpWelcomeStepProps> = ({
+    styles,
+    fadeAnim,
+    slideAnim,
+    colors,
+    nextStep,
+    navigate,
+}) => (
+    <Animated.View style={[
+        styles.stepContainer,
+        { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+    ]}>
+        <HighFive width={100} height={100} />
+        <View style={styles.modernHeader}>
+            <Text style={[styles.modernTitle, { color: colors.text }]}>Welcome to Oxy</Text>
+            <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>We're excited to have you join us. Let's get your account set up in just a few easy steps.</Text>
+        </View>
+        <GroupedPillButtons
+            buttons={[
+                {
+                    text: 'Sign In',
+                    onPress: () => navigate('SignIn'),
+                    icon: 'log-in-outline',
+                    variant: 'transparent',
+                },
+                {
+                    text: 'Get Started',
+                    onPress: nextStep,
+                    icon: 'arrow-forward',
+                    variant: 'primary',
+                },
+            ]}
+            colors={colors}
+        />
+    </Animated.View>
+);
+
+export default SignUpWelcomeStep;