@oxyhq/services 5.12.11 → 5.13.1

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

@@ -6,6 +6,7 @@ import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignUpIdentityStepProps {
     // Common props from StepBasedScreen
@@ -55,6 +56,7 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
     validateUsername,
 }) => {
     const usernameRef = useRef<any>(null);
+    const baseStyles = stepStyles;
     const { t } = useI18n();
     const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -81,7 +83,9 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
     }, []);
 
     const handleUsernameChange = (text: string) => {
-        setUsername(text);
+        // Text is already filtered by formatValue prop, but ensure it's clean
+        const filteredText = text.replace(/[^a-zA-Z0-9]/g, '');
+        setUsername(filteredText);
         setErrorMessage('');
         // Reset validation state when user types
         if (validationState.status !== 'idle') {
@@ -89,7 +93,7 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
         }
 
         // Trigger debounced validation
-        debouncedValidateUsername(text);
+        debouncedValidateUsername(filteredText);
     };
 
     const handleEmailChange = (text: string) => {
@@ -99,24 +103,24 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
 
     const handleNext = async () => {
         if (!username.trim()) {
-            setErrorMessage('Please enter a username');
+            setErrorMessage(t('signup.username.required') || 'Please enter a username');
             setTimeout(() => usernameRef.current?.focus(), 0);
             return;
         }
 
         if (username.trim().length < 3) {
-            setErrorMessage('Username must be at least 3 characters');
+            setErrorMessage(t('signup.username.minLength') || 'Username must be at least 3 characters');
             setTimeout(() => usernameRef.current?.focus(), 0);
             return;
         }
 
         if (!email.trim()) {
-            setErrorMessage('Please enter an email address');
+            setErrorMessage(t('signup.email.required') || 'Please enter an email address');
             return;
         }
 
         if (!validateEmail(email)) {
-            setErrorMessage('Please enter a valid email address');
+            setErrorMessage(t('signup.email.invalid') || 'Please enter a valid email address');
             return;
         }
 
@@ -130,22 +134,24 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
         nextStep();
     };
 
-    const emailError = email && !validateEmail(email) ? 'Please enter a valid email address' : undefined;
+    const emailError = email && !validateEmail(email) ? (t('signup.email.invalid') || 'Please enter a valid email address') : undefined;
 
     return (
         <>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('signup.identity.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('signup.identity.subtitle')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signup.identity.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('signup.identity.subtitle')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, { gap: STEP_INNER_GAP }]}>
                 <TextField
                     ref={usernameRef}
                     label={t('common.labels.username')}
                     leading={<Ionicons name="person-outline" size={24} color={colors.secondaryText} />}
                     value={username}
                     onChangeText={handleUsernameChange}
+                    formatValue={(text) => text.replace(/[^a-zA-Z0-9]/g, '')}
+                    maxLength={30}
                     autoCapitalize="none"
                     autoCorrect={false}
                     testID="signup-username-input"
@@ -153,8 +159,10 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
                     error={validationState.status === 'invalid' ? validationState.message : undefined}
                     loading={validationState.status === 'validating'}
                     success={validationState.status === 'valid'}
+                    helperText={t('signup.username.helper') || '3-30 characters, letters and numbers only'}
                     onSubmitEditing={handleNext}
                     autoFocus
+                    style={{ marginBottom: 0 }}
                 />
 
                 <TextField
@@ -168,34 +176,40 @@ const SignUpIdentityStep: React.FC<SignUpIdentityStepProps> = ({
                     testID="signup-email-input"
                     variant="filled"
                     error={emailError}
+                    helperText={t('signup.email.helper') || 'We\'ll never share your email'}
                     onSubmitEditing={handleNext}
+                    accessibilityLabel={t('common.labels.email')}
+                    accessibilityHint={t('signup.email.helper') || 'Enter your email address'}
+                    style={{ marginBottom: 0 }}
                 />
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.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}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back'),
+                            onPress: prevStep,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.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}
+                />
+            </View>
         </>
     );
 };

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

@@ -1,11 +1,12 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
 import { useRef, useState } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignUpSecurityStepProps {
     // Common props from StepBasedScreen
@@ -57,6 +58,7 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
 }) => {
     const passwordRef = useRef<any>(null);
     const { t } = useI18n();
+    const baseStyles = stepStyles;
 
     const handlePasswordChange = (text: string) => {
         setPassword(text);
@@ -70,40 +72,40 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
 
     const handleNext = () => {
         if (!password) {
-            setErrorMessage('Please enter a password');
+            setErrorMessage(t('signup.password.required') || 'Please enter a password');
             setTimeout(() => passwordRef.current?.focus(), 0);
             return;
         }
 
         if (!validatePassword(password)) {
-            setErrorMessage('Password must be at least 8 characters long');
+            setErrorMessage(t('signup.password.minLength') || 'Password must be at least 8 characters long');
             return;
         }
 
         if (!confirmPassword) {
-            setErrorMessage('Please confirm your password');
+            setErrorMessage(t('signup.password.confirmRequired') || 'Please confirm your password');
             return;
         }
 
         if (password !== confirmPassword) {
-            setErrorMessage('Passwords do not match');
+            setErrorMessage(t('signup.password.mismatch') || '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;
+    const passwordError = password && !validatePassword(password) ? (t('signup.password.minLength') || 'Password must be at least 8 characters long') : undefined;
+    const confirmPasswordError = confirmPassword && password !== confirmPassword ? (t('signup.password.mismatch') || 'Passwords do not match') : undefined;
 
     return (
         <>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('signup.security.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('signup.security.subtitle')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signup.security.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('signup.security.subtitle')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, { gap: STEP_INNER_GAP }]}>
                 <TextField
                     ref={passwordRef}
                     label={t('common.labels.password')}
@@ -111,10 +113,10 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                     trailing={
                         <TouchableOpacity
                             onPress={() => setShowPassword(!showPassword)}
-                            style={{ padding: 4 }}
+                            style={stylesheet.iconButton}
                         >
                             <Ionicons
-                                name={showPassword ? "eye-off-outline" : "eye-outline"}
+                                name={showPassword ? 'eye-off-outline' : 'eye-outline'}
                                 size={20}
                                 color={colors.secondaryText}
                             />
@@ -123,13 +125,18 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                     value={password}
                     onChangeText={handlePasswordChange}
                     secureTextEntry={!showPassword}
+                    passwordStrength={true}
                     autoCapitalize="none"
                     autoCorrect={false}
                     testID="signup-password-input"
                     variant="filled"
                     error={passwordError}
+                    helperText={t('signup.password.helper') || 'At least 8 characters'}
                     onSubmitEditing={handleNext}
                     autoFocus
+                    accessibilityLabel={t('common.labels.password')}
+                    accessibilityHint={t('signup.password.helper') || 'Enter a password, at least 8 characters long'}
+                    style={{ marginBottom: 0 }}
                 />
 
                 <TextField
@@ -138,10 +145,10 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                     trailing={
                         <TouchableOpacity
                             onPress={() => setShowConfirmPassword(!showConfirmPassword)}
-                            style={{ padding: 4 }}
+                            style={stylesheet.iconButton}
                         >
                             <Ionicons
-                                name={showConfirmPassword ? "eye-off-outline" : "eye-outline"}
+                                name={showConfirmPassword ? 'eye-off-outline' : 'eye-outline'}
                                 size={20}
                                 color={colors.secondaryText}
                             />
@@ -155,36 +162,46 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                     testID="signup-confirm-password-input"
                     variant="filled"
                     error={confirmPasswordError}
+                    helperText={confirmPassword && password !== confirmPassword ? (t('signup.password.mismatch') || 'Passwords do not match') : undefined}
                     onSubmitEditing={handleNext}
+                    accessibilityLabel={t('common.labels.confirmPassword')}
+                    accessibilityHint={t('signup.password.confirmHint') || 'Re-enter your password to confirm'}
+                    style={{ marginBottom: 0 }}
                 />
-
-                <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: t('common.actions.back'),
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.next'),
-                        onPress: handleNext,
-                        icon: 'arrow-forward',
-                        variant: 'primary',
-                        disabled: !password || !confirmPassword || password !== confirmPassword,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back'),
+                            onPress: prevStep,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.next'),
+                            onPress: handleNext,
+                            icon: 'arrow-forward',
+                            variant: 'primary',
+                            disabled: !password || !confirmPassword || password !== confirmPassword,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };
 
 export default SignUpSecurityStep;
+
+const stylesheet = StyleSheet.create({
+    iconButton: {
+        padding: 4,
+    },
+    helperText: {
+        fontSize: 12,
+        marginTop: 0,
+    },
+});

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

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
 import { View, Text } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
+import { Section, GroupedSection } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
+import { stepStyles } from '../../styles/spacing';
 
 interface SignUpSummaryStepProps {
     // Common props from StepBasedScreen
@@ -28,12 +29,14 @@ interface SignUpSummaryStepProps {
 const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
     colors,
     styles,
+    theme,
     nextStep,
     prevStep,
     allStepData,
     isLoading,
 }) => {
     const { t } = useI18n();
+    const baseStyles = stepStyles;
     // Extract data from previous steps
     const identityData = allStepData[1] || {}; // Step 2 (index 1)
     const securityData = allStepData[2] || {}; // Step 3 (index 2)
@@ -44,100 +47,107 @@ const SignUpSummaryStep: React.FC<SignUpSummaryStepProps> = ({
     // Check if all required data is available
     const hasValidData = username && email && password;
 
-
-
     return (
         <>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('signup.summary.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('signup.summary.subtitle')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
+                    {t('signup.summary.title')}
+                </Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
+                    {t('signup.summary.subtitle')}
+                </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.warning + '10',
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: colors.warning + '30',
-                }}>
-                    <Ionicons name="shield-checkmark" size={20} color={colors.warning} style={{ marginRight: 8 }} />
-                    <Text style={[styles.footerText, { color: colors.warning, fontSize: 14, flex: 1 }]}>
-                        For stronger security, we recommend enabling Two‑Factor Authentication (TOTP) from Account Settings after you create your account.
-                    </Text>
-                </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 style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <Section
+                    title={t('signup.summary.sections.account') || t('signup.summary.sectionTitle') || 'Account Information'}
+                    theme={theme as 'light' | 'dark'}
+                    isFirst={true}
+                >
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'username',
+                                icon: 'person-outline',
+                                iconColor: colors.primary,
+                                title: t('signup.summary.fields.username'),
+                                subtitle: `@${username || t('signup.summary.notSet')}`,
+                                showChevron: false,
+                            },
+                            {
+                                id: 'email',
+                                icon: 'mail-outline',
+                                iconColor: colors.primary,
+                                title: t('signup.summary.fields.email'),
+                                subtitle: email || t('signup.summary.notSet'),
+                                showChevron: false,
+                            },
+                            {
+                                id: 'password',
+                                icon: 'lock-closed-outline',
+                                iconColor: colors.primary,
+                                title: t('signup.summary.fields.password') || 'Password',
+                                subtitle: password ? '••••••••' : t('signup.summary.notSet'),
+                                showChevron: false,
+                            },
+                        ]}
+                        theme={theme as 'light' | 'dark'}
+                    />
+                </Section>
+
+                <Section
+                    title={t('signup.summary.sections.next') || 'Next Steps'}
+                    theme={theme as 'light' | 'dark'}
+                >
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'security-tip',
+                                icon: 'shield-checkmark',
+                                iconColor: colors.warning,
+                                title: t('signup.summary.next.securityTitle') || 'Keep your account secure',
+                                subtitle: t('signup.summary.securityTip'),
+                                showChevron: false,
+                                multiRow: true,
+                                dense: true,
+                            },
+                            {
+                                id: 'legal-reminder',
+                                icon: 'checkmark-circle',
+                                iconColor: colors.success,
+                                title: t('signup.summary.next.legalTitle') || 'You’re all set',
+                                subtitle: t('signup.summary.legalReminder'),
+                                showChevron: false,
+                                multiRow: true,
+                                dense: true,
+                            },
+                        ]}
+                        theme={theme as 'light' | 'dark'}
+                    />
+                </Section>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.createAccount'),
-                        onPress: nextStep,
-                        icon: 'checkmark-circle',
-                        variant: 'primary',
-                        loading: isLoading,
-                        disabled: !hasValidData,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back'),
+                            onPress: prevStep,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.createAccount'),
+                            onPress: nextStep,
+                            icon: 'checkmark-circle',
+                            variant: 'primary',
+                            loading: isLoading,
+                            disabled: !hasValidData,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };