@oxyhq/services 5.13.0 → 5.13.2

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

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface RecoverSuccessStepProps {
     // Common props from StepBasedScreen
@@ -35,6 +36,7 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
     successMessage,
 }) => {
     const { t } = useI18n();
+    const baseStyles = stepStyles;
     // Extract identifier from previous steps
     const requestData = allStepData[0] || {};
     const { identifier } = requestData;
@@ -50,75 +52,97 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
 
     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,
-                }}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.iconContainer]}>
+                <View style={[stylesheet.successIcon, { backgroundColor: colors.success + '20' }]}>
                     <Ionicons name="checkmark-circle" size={40} color={colors.success} />
                 </View>
             </View>
 
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{successMessage || t('recover.resetSuccess')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{successMessage || t('recover.resetSuccess')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
-                <View style={{
-                    padding: 20,
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <View style={[stylesheet.infoCard, {
                     backgroundColor: colors.inputBackground,
-                    borderRadius: 16,
-                    borderWidth: 1,
                     borderColor: colors.border,
-                    marginBottom: 24,
-                }}>
-                    <Text style={[styles.footerText, { color: colors.text, fontSize: 16, marginBottom: 8 }]}>
+                }]}>
+                    <Text style={[styles.footerText, stylesheet.infoTitle, { color: colors.text }]}>
                         {t('recover.whatsNextTitle') || "What's next?"}
                     </Text>
-                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 14, lineHeight: 20 }]}>
+                    <Text style={[styles.footerText, stylesheet.infoBody, { color: colors.secondaryText }]}>
                         {t('recover.whatsNextBody') || '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,
+                <View style={[stylesheet.successBanner, {
                     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 }]}>
+                }]}>
+                    <Ionicons name="shield-checkmark" size={20} color={colors.success} />
+                    <Text style={[styles.footerText, stylesheet.bannerText, { color: colors.success }]}>
                         {successMessage || t('recover.completeSecure') || 'Your account recovery is complete and secure.'}
                     </Text>
                 </View>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.signIn'),
-                        onPress: handleBackToSignIn,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.signIn'),
+                            onPress: handleBackToSignIn,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };
 
 export default RecoverSuccessStep;
+
+const stylesheet = StyleSheet.create({
+    iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    successIcon: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    infoCard: {
+        padding: STEP_INNER_GAP * 2,
+        borderRadius: 16,
+        borderWidth: 1,
+        marginBottom: STEP_INNER_GAP,
+        gap: STEP_INNER_GAP,
+    },
+    infoTitle: {
+        fontSize: 16,
+        marginBottom: 0,
+    },
+    infoBody: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    successBanner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: STEP_INNER_GAP,
+        borderRadius: 8,
+        borderWidth: 1,
+        gap: STEP_INNER_GAP,
+    },
+    bannerText: {
+        flex: 1,
+        fontSize: 14,
+    },
+});

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

@@ -1,11 +1,12 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import PinInput from '../../components/internal/PinInput';
 import { toast } from '../../../lib/sonner';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface RecoverVerifyStepProps {
     // Common props from StepBasedScreen
@@ -52,6 +53,7 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
     identifier,
 }) => {
     const { t } = useI18n();
+    const baseStyles = stepStyles;
     const handleVerifyCode = async () => {
         setErrorMessage('');
         setSuccessMessage('');
@@ -66,33 +68,29 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
 
     return (
         <>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.verify.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.enterCode')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.verify.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.enterCode')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
-                <PinInput
-                    value={verificationCode}
-                    onChange={setVerificationCode}
-                    length={6}
-                    disabled={isLoading}
-                    autoFocus
-                    colors={colors}
-                />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <View style={stylesheet.pinInputWrapper}>
+                    <PinInput
+                        value={verificationCode}
+                        onChange={setVerificationCode}
+                        length={6}
+                        disabled={isLoading}
+                        autoFocus
+                        colors={colors}
+                    />
+                </View>
 
                 {successMessage && (
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        marginTop: 16,
-                        padding: 12,
+                    <View style={[stylesheet.messageContainer, {
                         backgroundColor: colors.success + '10',
-                        borderRadius: 8,
-                        borderWidth: 1,
                         borderColor: colors.success + '30',
-                    }}>
-                        <Ionicons name="checkmark-circle" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                    }]}>
+                        <Ionicons name="checkmark-circle" size={20} color={colors.success} />
                         <Text style={[styles.footerText, { color: colors.success, fontSize: 14 }]}>
                             {successMessage}
                         </Text>
@@ -100,17 +98,11 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
                 )}
 
                 {errorMessage && (
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        marginTop: 16,
-                        padding: 12,
+                    <View style={[stylesheet.messageContainer, {
                         backgroundColor: colors.error + '10',
-                        borderRadius: 8,
-                        borderWidth: 1,
                         borderColor: colors.error + '30',
-                    }}>
-                        <Ionicons name="alert-circle" size={20} color={colors.error} style={{ marginRight: 8 }} />
+                    }]}>
+                        <Ionicons name="alert-circle" size={20} color={colors.error} />
                         <Text style={[styles.footerText, { color: colors.error, fontSize: 14 }]}>
                             {errorMessage}
                         </Text>
@@ -118,27 +110,45 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
                 )}
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('recover.verify.action'),
-                        onPress: handleVerifyCode,
-                        icon: 'checkmark-circle-outline',
-                        variant: 'primary',
-                        loading: isLoading,
-                        disabled: isLoading || verificationCode.length !== 6,
-                    },
-                ]}
-                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('recover.verify.action'),
+                            onPress: handleVerifyCode,
+                            icon: 'checkmark-circle-outline',
+                            variant: 'primary',
+                            loading: isLoading,
+                            disabled: isLoading || verificationCode.length !== 6,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };
 
 export default RecoverVerifyStep;
+
+const stylesheet = StyleSheet.create({
+    pinInputWrapper: {
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    messageContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: STEP_INNER_GAP,
+        padding: STEP_INNER_GAP,
+        borderRadius: 8,
+        borderWidth: 1,
+        gap: STEP_INNER_GAP,
+    },
+});

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

@@ -1,11 +1,13 @@
 import type React from 'react';
 import { useRef, useEffect } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Platform, StyleSheet, type ViewStyle, type TextStyle } 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 { useI18n } from '../../hooks/useI18n';
+import { useOxy } from '../../context/OxyContext';
+import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignInPasswordStepProps {
     // Common props from StepBasedScreen
@@ -41,6 +43,8 @@ interface SignInPasswordStepProps {
     // Sign-in function
     handleSignIn: () => Promise<void>;
     mfaToken?: string | null;
+    existingSession?: any;
+    handleContinueWithExistingAccount?: () => Promise<void>;
 }
 
 const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
@@ -61,9 +65,14 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     username,
     handleSignIn,
     mfaToken,
+    existingSession,
+    handleContinueWithExistingAccount,
 }) => {
     const inputRef = useRef<any>(null);
     const { t } = useI18n();
+    const { oxyServices } = useOxy();
+    const baseStyles = stepStyles;
+    const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
 
     const handlePasswordChange = (text: string) => {
         setPassword(text);
@@ -72,7 +81,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 
     const handleSignInSubmit = async () => {
         if (!password) {
-            setErrorMessage('Please enter your password.');
+            setErrorMessage(t('signin.password.required') || 'Please enter your password.');
             setTimeout(() => inputRef.current?.focus(), 0);
             return;
         }
@@ -102,28 +111,96 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
         }
     }, [mfaToken, nextStep]);
 
+    // If account is already signed in, show "continue" UI instead of password
+    if (existingSession && handleContinueWithExistingAccount) {
+        return (
+            <>
+                <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.userProfileContainer]}>
+                        <Avatar
+                            name={userProfile?.displayName || userProfile?.name || username}
+                            size={100}
+                            theme={theme as 'light' | 'dark'}
+                            backgroundColor={colors.primary + '20'}
+                        uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
+                        />
+                    <Text style={[styles.modernUserDisplayName, stylesheet.displayName, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
+                        {userProfile?.displayName || userProfile?.name || username}
+                    </Text>
+                    <Text style={[styles.modernUsernameSubtext, stylesheet.usernameSubtext, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
+                        @{username}
+                    </Text>
+                </View>
+
+                <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.alreadySignedInContainer]}>
+                    <View style={[stylesheet.alreadySignedInCard, { backgroundColor: `${colors.primary}08`, borderColor: `${colors.primary}25` }]}>
+                        <View style={stylesheet.alreadySignedInContent}>
+                            <View style={[stylesheet.alreadySignedInIconWrapper, { backgroundColor: `${colors.primary}20` }]}>
+                                <Ionicons name="checkmark-circle" size={28} color={colors.primary} />
+                            </View>
+                            <View style={stylesheet.alreadySignedInTextWrapper}>
+                                <Text style={[stylesheet.alreadySignedInTitle, { color: colors.text }]}>
+                                    {t('signin.alreadySignedIn') || 'Already signed in'}
+                                </Text>
+                                <Text style={[stylesheet.alreadySignedInMessage, { color: colors.secondaryText }]}>
+                                    {t('signin.alreadySignedInMessage') || 'This account is already signed in. Tap continue to use it.'}
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+
+                {errorMessage && (
+                    <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                        <Text style={[stylesheet.errorText, { color: colors.error }]}>
+                            {errorMessage}
+                        </Text>
+                    </View>
+                )}
+
+                <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                    <GroupedPillButtons
+                        buttons={[
+                            {
+                                text: t('common.actions.back') || 'Back',
+                                onPress: prevStep,
+                                icon: 'arrow-back',
+                                variant: 'transparent',
+                            },
+                            {
+                                text: t('signin.continueWithAccount') || 'Continue',
+                                onPress: handleContinueWithExistingAccount,
+                                icon: 'log-in',
+                                variant: 'primary',
+                                loading: isLoading,
+                                testID: 'continue-button',
+                            },
+                        ]}
+                        colors={colors}
+                    />
+                </View>
+            </>
+        );
+    }
+
     return (
         <>
-            <View style={styles.modernUserProfileContainer}>
-                <View style={styles.avatarContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.userProfileContainer]}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}
                         size={100}
                         theme={theme as 'light' | 'dark'}
-                        style={styles.modernUserAvatar}
                         backgroundColor={colors.primary + '20'}
+                    uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
                     />
-                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
-                </View>
-                <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
+                <Text style={[styles.modernUserDisplayName, stylesheet.displayName, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>
                     {userProfile?.displayName || userProfile?.name || username}
                 </Text>
-                <Text style={[styles.modernUsernameSubtext, { color: colors.secondaryText }]}>
+                <Text style={[styles.modernUsernameSubtext, stylesheet.usernameSubtext, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
                     @{username}
                 </Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.inputSection]}>
                 <TextField
                     ref={inputRef}
                     label={t('common.labels.password')}
@@ -138,9 +215,12 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                     error={errorMessage || undefined}
                     onSubmitEditing={handleSignInSubmit}
                     autoFocus
+                    accessibilityLabel={t('common.labels.password')}
+                    accessibilityHint={t('signin.password.hint') || 'Enter your password to sign in'}
+                    style={{ marginBottom: 0 }}
                 />
 
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+                <View style={[stylesheet.forgotPasswordContainer]}>
                     <Text style={[styles.footerText, { color: colors.text }]}>{t('signin.forgotPrompt') || 'Forgot your password?'} </Text>
                     <TouchableOpacity onPress={() => navigate('RecoverAccount', {
                         returnTo: 'SignIn',
@@ -152,27 +232,29 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                 </View>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back') || 'Back',
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.signIn') || 'Sign In',
-                        onPress: handleSignInSubmit,
-                        icon: 'log-in',
-                        variant: 'primary',
-                        loading: isLoading,
-                        testID: 'login-button',
-                    },
-                ]}
-                colors={colors}
-            />
-
-            <View style={styles.securityNotice}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back') || 'Back',
+                            onPress: prevStep,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.signIn') || 'Sign In',
+                            onPress: handleSignInSubmit,
+                            icon: 'log-in',
+                            variant: 'primary',
+                            loading: isLoading,
+                            testID: 'login-button',
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
+
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.securityNotice, { marginTop: 0 }]}>
                 <Ionicons name="shield-checkmark" size={14} color={colors.secondaryText} />
                 <Text style={[styles.securityText, { color: colors.secondaryText }]}>
                     {t('signin.security.dataSecure') || 'Your data is encrypted and secure'}
@@ -183,3 +265,79 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 };
 
 export default SignInPasswordStep;
+
+const stylesheet = StyleSheet.create({
+    userProfileContainer: {
+        alignItems: 'flex-start',
+        paddingVertical: 0,
+        gap: STEP_INNER_GAP,
+    },
+    avatarContainer: {
+        position: 'relative',
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    displayName: {
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    usernameSubtext: {
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    inputSection: {
+        gap: STEP_INNER_GAP,
+    },
+    forgotPasswordContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 0,
+    },
+    securityNotice: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: STEP_INNER_GAP,
+    },
+    alreadySignedInContainer: {
+        width: '100%',
+    },
+    alreadySignedInCard: {
+        borderRadius: 20,
+        borderWidth: 1.5,
+        padding: 20,
+        width: '100%',
+    },
+    alreadySignedInContent: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 16,
+    },
+    alreadySignedInIconWrapper: {
+        width: 52,
+        height: 52,
+        borderRadius: 26,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
+    alreadySignedInTextWrapper: {
+        flex: 1,
+        gap: 8,
+        paddingTop: 2,
+    },
+    alreadySignedInTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        lineHeight: 24,
+        letterSpacing: -0.2,
+    },
+    alreadySignedInMessage: {
+        fontSize: 15,
+        lineHeight: 22,
+        letterSpacing: -0.1,
+    },
+    errorText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+});