@oxyhq/services 5.11.9 → 5.11.11

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

@@ -0,0 +1,191 @@
+import type React from 'react';
+import { useRef, useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import TextField from '../../components/internal/TextField';
+
+interface SignUpSecurityStepProps {
+    // 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
+    password: string;
+    confirmPassword: string;
+    setPassword: (password: string) => void;
+    setConfirmPassword: (confirmPassword: string) => void;
+    showPassword: boolean;
+    showConfirmPassword: boolean;
+    setShowPassword: (show: boolean) => void;
+    setShowConfirmPassword: (show: boolean) => void;
+    setErrorMessage: (message: string) => void;
+
+    // Validation
+    validatePassword: (password: string) => boolean;
+}
+
+const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
+    colors,
+    styles,
+    nextStep,
+    prevStep,
+    password,
+    confirmPassword,
+    setPassword,
+    setConfirmPassword,
+    showPassword,
+    showConfirmPassword,
+    setShowPassword,
+    setShowConfirmPassword,
+    setErrorMessage,
+    validatePassword,
+}) => {
+    const passwordRef = useRef<any>(null);
+
+    const handlePasswordChange = (text: string) => {
+        setPassword(text);
+        setErrorMessage('');
+    };
+
+    const handleConfirmPasswordChange = (text: string) => {
+        setConfirmPassword(text);
+        setErrorMessage('');
+    };
+
+    const handleNext = () => {
+        if (!password) {
+            setErrorMessage('Please enter a password');
+            setTimeout(() => passwordRef.current?.focus(), 0);
+            return;
+        }
+
+        if (!validatePassword(password)) {
+            setErrorMessage('Password must be at least 8 characters long');
+            return;
+        }
+
+        if (!confirmPassword) {
+            setErrorMessage('Please confirm your password');
+            return;
+        }
+
+        if (password !== confirmPassword) {
+            setErrorMessage('Passwords do not match');
+            return;
+        }
+
+        nextStep();
+    };
+
+    const passwordError = password && !validatePassword(password) ? 'Password must be at least 8 characters long' : undefined;
+    const confirmPasswordError = confirmPassword && password !== confirmPassword ? 'Passwords do not match' : undefined;
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Secure Your Account
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Create a strong password to protect your account
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TextField
+                    ref={passwordRef}
+                    label="Password"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+                    trailing={
+                        <TouchableOpacity
+                            onPress={() => setShowPassword(!showPassword)}
+                            style={{ padding: 4 }}
+                        >
+                            <Ionicons
+                                name={showPassword ? "eye-off-outline" : "eye-outline"}
+                                size={20}
+                                color={colors.secondaryText}
+                            />
+                        </TouchableOpacity>
+                    }
+                    value={password}
+                    onChangeText={handlePasswordChange}
+                    secureTextEntry={!showPassword}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-password-input"
+                    variant="filled"
+                    error={passwordError}
+                    onSubmitEditing={handleNext}
+                    autoFocus
+                />
+
+                <TextField
+                    label="Confirm Password"
+                    leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+                    trailing={
+                        <TouchableOpacity
+                            onPress={() => setShowConfirmPassword(!showConfirmPassword)}
+                            style={{ padding: 4 }}
+                        >
+                            <Ionicons
+                                name={showConfirmPassword ? "eye-off-outline" : "eye-outline"}
+                                size={20}
+                                color={colors.secondaryText}
+                            />
+                        </TouchableOpacity>
+                    }
+                    value={confirmPassword}
+                    onChangeText={handleConfirmPasswordChange}
+                    secureTextEntry={!showConfirmPassword}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    testID="signup-confirm-password-input"
+                    variant="filled"
+                    error={confirmPasswordError}
+                    onSubmitEditing={handleNext}
+                />
+
+                <View style={{ marginTop: 16 }}>
+                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12 }]}>
+                        Password must be at least 8 characters long
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Next',
+                        onPress: handleNext,
+                        icon: 'arrow-forward',
+                        variant: 'primary',
+                        disabled: !password || !confirmPassword || password !== confirmPassword,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpSecurityStep;

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

@@ -0,0 +1,130 @@
+import type React from 'react';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+
+interface SignUpSummaryStepProps {
+    // 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
+    allStepData: any[];
+
+    // Form state
+    isLoading: boolean;
+}
+
+const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
+    colors,
+    styles,
+    nextStep,
+    prevStep,
+    allStepData,
+    isLoading,
+}) => {
+    // Extract data from previous steps
+    const identityData = allStepData[1] || {}; // Step 2 (index 1)
+    const securityData = allStepData[2] || {}; // Step 3 (index 2)
+
+    const { username = '', email = '' } = identityData;
+    const { password = '' } = securityData;
+
+    // Check if all required data is available
+    const hasValidData = username && email && password;
+
+
+
+    return (
+        <>
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Almost There!
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Review your information and create your account
+                </Text>
+            </View>
+
+            <View style={[styles.modernInputContainer, { marginBottom: 32 }]}>
+                <View style={{
+                    backgroundColor: colors.inputBackground,
+                    borderRadius: 16,
+                    padding: 20,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+                        <Ionicons name="person-outline" size={20} color={colors.secondaryText} style={{ marginRight: 12 }} />
+                        <View style={{ flex: 1 }}>
+                            <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12, marginBottom: 4 }]}>
+                                Username
+                            </Text>
+                            <Text style={[styles.modernInput, { color: colors.text, fontSize: 16 }]}>
+                                @{username || 'Not set'}
+                            </Text>
+                        </View>
+                    </View>
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Ionicons name="mail-outline" size={20} color={colors.secondaryText} style={{ marginRight: 12 }} />
+                        <View style={{ flex: 1 }}>
+                            <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 12, marginBottom: 4 }]}>
+                                Email
+                            </Text>
+                            <Text style={[styles.modernInput, { color: colors.text, fontSize: 16 }]}>
+                                {email || 'Not set'}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+
+                <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, flex: 1 }]}>
+                        By creating an account, you agree to our Terms of Service and Privacy Policy
+                    </Text>
+                </View>
+            </View>
+
+            <GroupedPillButtons
+                buttons={[
+                    {
+                        text: 'Back',
+                        onPress: prevStep,
+                        icon: 'arrow-back',
+                        variant: 'transparent',
+                    },
+                    {
+                        text: 'Create Account',
+                        onPress: nextStep,
+                        icon: 'checkmark-circle',
+                        variant: 'primary',
+                        loading: isLoading,
+                        disabled: !hasValidData,
+                    },
+                ]}
+                colors={colors}
+            />
+        </>
+    );
+};
+
+export default SignUpSummaryStep;

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

@@ -0,0 +1,65 @@
+import type React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import HighFive from '../../../assets/illustrations/HighFive';
+
+interface SignUpWelcomeStepProps {
+    // 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;
+}
+
+const SignUpWelcomeStep: React.FC<SignUpWelcomeStepProps> = ({
+    colors,
+    styles,
+    navigate,
+    nextStep,
+}) => {
+    return (
+        <>
+            <HighFive width={120} height={120} />
+            <View style={styles.modernHeader}>
+                <Text style={[styles.modernTitle, { color: colors.text }]}>
+                    Welcome to Oxy!
+                </Text>
+                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>
+                    Let's create your account in just a few steps
+                </Text>
+            </View>
+
+            <View style={styles.modernInputContainer}>
+                <TouchableOpacity
+                    style={[styles.button, { backgroundColor: colors.primary }]}
+                    onPress={nextStep}
+                    testID="get-started-button"
+                >
+                    <Ionicons name="rocket-outline" size={20} color={colors.background} />
+                    <Text style={[styles.buttonText, { color: colors.background }]}>
+                        Get Started
+                    </Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                    style={[styles.footerTextContainer]}
+                    onPress={() => navigate('SignIn')}
+                >
+                    <Text style={[styles.footerText, { color: colors.secondaryText }]}>
+                        Already have an account?{' '}
+                        <Text style={[styles.linkText, { color: colors.primary }]}>
+                            Sign In
+                        </Text>
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        </>
+    );
+};
+
+export default SignUpWelcomeStep;

package/src/ui/styles/authStyles.ts

@@ -260,7 +260,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     fontSize: 42,
     marginBottom: 4,
-    textAlign: 'center',
+    textAlign: 'left',
     letterSpacing: -0.5,
   },
   modernUsernameSubtext: {