@oxyhq/services 5.13.0 → 5.13.1

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

@@ -1,11 +1,12 @@
 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 { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignInPasswordStepProps {
     // Common props from StepBasedScreen
@@ -41,6 +42,8 @@ interface SignInPasswordStepProps {
     // Sign-in function
     handleSignIn: () => Promise<void>;
     mfaToken?: string | null;
+    existingSession?: any;
+    handleContinueWithExistingAccount?: () => Promise<void>;
 }
 
 const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
@@ -61,9 +64,13 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
     username,
     handleSignIn,
     mfaToken,
+    existingSession,
+    handleContinueWithExistingAccount,
 }) => {
     const inputRef = useRef<any>(null);
     const { t } = useI18n();
+    const baseStyles = stepStyles;
+    const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
 
     const handlePasswordChange = (text: string) => {
         setPassword(text);
@@ -72,7 +79,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,10 +109,84 @@ 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]}>
+                    <View style={stylesheet.avatarContainer}>
+                        <Avatar
+                            name={userProfile?.displayName || userProfile?.name || username}
+                            size={100}
+                            theme={theme as 'light' | 'dark'}
+                            style={styles.modernUserAvatar}
+                            backgroundColor={colors.primary + '20'}
+                        />
+                        <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
+                    </View>
+                    <Text style={[styles.modernUserDisplayName, 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]}>
+                <View style={stylesheet.avatarContainer}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}
                         size={100}
@@ -115,15 +196,15 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
                     />
                     <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 +219,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 +236,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 +269,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',
+    },
+});

package/src/ui/screens/steps/SignInTotpStep.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, Platform, StyleSheet, type ViewStyle, type TextStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import PinInput, { type PinInputHandle } from '../../components/internal/PinInput';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_GAP, STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface SignInTotpStepProps {
   // Common props
@@ -47,6 +48,8 @@ const SignInTotpStep: React.FC<SignInTotpStepProps> = ({
   const [code, setCode] = useState('');
   const inputRef = useRef<PinInputHandle | null>(null);
   const { t } = useI18n();
+  const baseStyles = stepStyles;
+  const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
 
   const handleVerify = async () => {
     if (!code || code.length !== 6) {
@@ -65,36 +68,36 @@ const SignInTotpStep: React.FC<SignInTotpStepProps> = ({
 
   return (
     <>
-      <View style={styles.modernHeader}>
-        <Text style={[styles.modernTitle, { color: colors.text }]}>{t('signin.totp.title') || 'Two‑Factor Code'}</Text>
-        <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}> 
+      <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+        <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('signin.totp.title') || 'Two‑Factor Code'}</Text>
+        <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}> 
           {t('signin.totp.subtitle', { username }) || `Enter the 6‑digit code from your authenticator app for @${username}`}
         </Text>
       </View>
 
-      <View style={styles.modernInputContainer}>
-        <PinInput
-          ref={inputRef}
-          value={code}
-          onChange={setCode}
-          length={6}
-          disabled={isLoading}
-          autoFocus
-          colors={colors}
-        />
+      <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.inputSection]}>
+        <View style={stylesheet.pinInputWrapper}>
+          <PinInput
+            ref={inputRef}
+            value={code}
+            onChange={setCode}
+            length={6}
+            disabled={isLoading}
+            autoFocus
+            colors={colors}
+          />
+        </View>
 
         {errorMessage ? (
-          <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 16,
-            padding: 12,
-            backgroundColor: colors.error + '10',
-            borderRadius: 8,
-            borderWidth: 1,
-            borderColor: colors.error + '30',
-          }}>
-            <Ionicons name="alert-circle" size={20} color={colors.error} style={{ marginRight: 8 }} />
+          <View style={[
+            stylesheet.errorContainer,
+            {
+              backgroundColor: colors.error + '10',
+              borderColor: colors.error + '30',
+            },
+            webShadowReset,
+          ]}>
+            <Ionicons name="alert-circle" size={20} color={colors.error} />
             <Text style={[styles.footerText, { color: colors.error, fontSize: 14 }]}>
               {errorMessage}
             </Text>
@@ -102,17 +105,19 @@ const SignInTotpStep: React.FC<SignInTotpStepProps> = ({
         ) : null}
       </View>
 
-      <GroupedPillButtons
-        buttons={[
-          { text: t('common.actions.back'), onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-          { text: t('signin.actions.verify'), onPress: handleVerify, icon: 'shield-checkmark', variant: 'primary', loading: isLoading, disabled: isLoading || code.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('signin.actions.verify'), onPress: handleVerify, icon: 'shield-checkmark', variant: 'primary', loading: isLoading, disabled: isLoading || code.length !== 6 },
+          ]}
+          colors={colors}
+        />
+      </View>
 
-      <View style={{ marginTop: 12, alignItems: 'center' }}>
+      <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.footerContainer]}>
         <Text style={[styles.footerText, { color: colors.secondaryText }]}>{t('signin.totp.noAccess') || 'No access to your authenticator?'}</Text>
-        <View style={{ flexDirection: 'row', gap: 12, marginTop: 6 }}>
+        <View style={stylesheet.footerLinks}>
           <TouchableOpacity onPress={() => navigate('RecoverAccount', { prefillUsername: username })}>
             <Text style={[styles.linkText, { color: colors.primary }]}>{t('signin.totp.useBackupCode') || 'Use backup code'}</Text>
           </TouchableOpacity>
@@ -127,3 +132,32 @@ const SignInTotpStep: React.FC<SignInTotpStepProps> = ({
 };
 
 export default SignInTotpStep;
+
+const stylesheet = StyleSheet.create({
+    inputSection: {
+        gap: STEP_INNER_GAP,
+    },
+    pinInputWrapper: {
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 0,
+        padding: STEP_INNER_GAP,
+        borderRadius: 8,
+        borderWidth: 1,
+        shadowColor: 'transparent',
+        gap: STEP_INNER_GAP,
+    },
+    footerContainer: {
+        alignItems: 'center',
+        gap: STEP_INNER_GAP,
+    },
+    footerLinks: {
+        flexDirection: 'row',
+        gap: STEP_INNER_GAP,
+        marginTop: 0,
+    },
+});