@oxyhq/services 5.13.0 → 5.13.1

package/src/ui/screens/FileManagementScreen.tsx

@@ -159,7 +159,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 return;
             }
         }
-        
+
         // Update file visibility if it differs from defaultVisibility
         const fileVisibility = (file.metadata as any)?.visibility || 'private';
         if (fileVisibility !== defaultVisibility) {
@@ -171,25 +171,25 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 // Continue anyway - selection shouldn't fail if visibility update fails
             }
         }
-        
+
         // Link file to entity if linkContext is provided
         if (linkContext) {
             try {
-                        await oxyServices.assetLink(
-                            file.id,
-                            linkContext.app,
-                            linkContext.entityType,
-                            linkContext.entityId,
-                            defaultVisibility,
-                            (linkContext as any).webhookUrl
-                        );
+                await oxyServices.assetLink(
+                    file.id,
+                    linkContext.app,
+                    linkContext.entityType,
+                    linkContext.entityId,
+                    defaultVisibility,
+                    (linkContext as any).webhookUrl
+                );
                 console.log(`Linked file ${file.id} to ${linkContext.app}/${linkContext.entityType}/${linkContext.entityId}`);
             } catch (error) {
                 console.error('Failed to link file:', error);
                 // Continue anyway - selection shouldn't fail if linking fails
             }
         }
-        
+
         if (!multiSelect) {
             onSelect?.(file);
             if (afterSelect === 'back') {
@@ -220,7 +220,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const map: Record<string, FileMetadata> = {};
         files.forEach(f => { map[f.id] = f; });
         const chosen = Array.from(selectedIds).map(id => map[id]).filter(Boolean);
-        
+
         // Update visibility and link files if needed
         const updatePromises = chosen.map(async (file) => {
             // Update visibility if needed
@@ -233,7 +233,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     console.error(`Failed to update visibility for ${file.id}:`, error);
                 }
             }
-            
+
             // Link file to entity if linkContext provided
             if (linkContext) {
                 try {
@@ -251,10 +251,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }
             }
         });
-        
+
         // Wait for all updates (but don't block on failures)
         await Promise.allSettled(updatePromises);
-        
+
         onConfirmSelection?.(chosen);
         onClose?.();
     }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);

package/src/ui/screens/SignInScreen.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { useThemeColors } from '../styles';
@@ -29,11 +29,9 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const [validationStatus, setValidationStatus] = useState<'idle' | 'validating' | 'valid' | 'invalid'>(
         initialUserProfile ? 'valid' : 'idle'
     );
+    const [existingSession, setExistingSession] = useState<any>(null);
 
-    // Cache for validation results to prevent repeated API calls
-    const validationCache = useRef<Map<string, { profile: any }>>(new Map());
-
-    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
+    const { login, completeMfaLogin, isLoading, user, isAuthenticated, sessions, oxyServices, switchSession } = useOxy();
 
     // Only log props in development mode to reduce console noise
     if (__DEV__) {
@@ -68,14 +66,13 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             return false;
         }
 
-        // Check cache first
-        const cached = validationCache.current.get(usernameToValidate);
-        if (cached) {
-            if (__DEV__) console.log('✅ Username found in cache:', cached.profile);
-            setUserProfile(cached.profile);
-            setValidationStatus('valid');
-            setErrorMessage('');
-            return true;
+        const offlineDetected = typeof navigator !== 'undefined' && navigator.onLine === false;
+
+        if (offlineDetected) {
+            if (__DEV__) console.log('⚠️ Offline detected, skipping username validation');
+            setValidationStatus('invalid');
+            setErrorMessage('No connection. Check your internet connection and try again.');
+            return false;
         }
 
         if (__DEV__) console.log('🔄 Validating username with API...');
@@ -97,14 +94,24 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
                 if (__DEV__) console.log('✅ Username is valid:', profileData);
                 setUserProfile(profileData);
+                
+                // Check if this account is already signed in
+                const profileUserId = profile.id?.toString();
+                const existing = sessions?.find(s => {
+                    const sessionUserId = s.userId?.toString();
+                    return sessionUserId === profileUserId;
+                });
+                
+                if (existing) {
+                    setExistingSession(existing);
+                    if (__DEV__) console.log('✅ Account already signed in:', existing);
+                } else {
+                    setExistingSession(null);
+                }
+                
                 setValidationStatus('valid');
                 setErrorMessage('');
 
-                // Cache the result
-                validationCache.current.set(usernameToValidate, {
-                    profile: profileData
-                });
-
                 return true;
             } else {
                 if (__DEV__) console.log('❌ Username not found');
@@ -116,25 +123,29 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             if (__DEV__) console.log('🚨 Validation error:', error);
 
             // If user not found (404), username doesn't exist
-            if (error.status === 404 || error.code === 'USER_NOT_FOUND') {
+            if (error?.status === 404 || error?.code === 'USER_NOT_FOUND') {
                 console.log('❌ Username not found (404)');
                 setValidationStatus('invalid');
                 setErrorMessage('Username not found.');
                 return false;
             }
 
-            // For development/testing: if API fails, allow any 3+ character username
-            if (__DEV__) {
-                if (__DEV__) console.log('⚠️ Development mode: allowing username due to API error');
-                setValidationStatus('valid');
-                setErrorMessage('');
-                return true;
-            }
+            const isNetworkError =
+                error?.status === 0 ||
+                error?.code === 'ECONNABORTED' ||
+                error?.code === 'ERR_NETWORK' ||
+                error?.message?.toLowerCase?.().includes('network request failed') ||
+                error?.message?.toLowerCase?.().includes('network error') ||
+                error?.name === 'AbortError' ||
+                error?.type === 'network';
 
-            // For other errors, show generic message
             console.error('Username validation error:', error);
             setValidationStatus('invalid');
-            setErrorMessage('Unable to validate username. Please try again.');
+            setErrorMessage(
+                isNetworkError
+                    ? 'No connection. Check your internet connection and try again.'
+                    : 'Unable to validate username. Please try again.'
+            );
             return false;
         } finally {
             setIsValidating(false);
@@ -177,6 +188,22 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
     const [mfaToken, setMfaToken] = useState<string | null>(null);
 
+    const handleContinueWithExistingAccount = useCallback(async () => {
+        if (!existingSession) return;
+        
+        try {
+            setErrorMessage('');
+            await switchSession(existingSession.sessionId);
+            // Get the user for the authenticated callback
+            const currentUser = await oxyServices.getUserBySession(existingSession.sessionId);
+            if (onAuthenticated) {
+                onAuthenticated(currentUser);
+            }
+        } catch (error: any) {
+            setErrorMessage(error.message || 'Failed to switch account');
+        }
+    }, [existingSession, switchSession, oxyServices, onAuthenticated]);
+
     const handleSignIn = useCallback(async () => {
         if (!password) {
             setErrorMessage('Please enter your password.');
@@ -186,6 +213,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             setErrorMessage('Please enter a valid username first.');
             return;
         }
+        
         try {
             setErrorMessage('');
             const user = await login(username, password);
@@ -201,13 +229,6 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         }
     }, [username, password, login, onAuthenticated, userProfile]);
 
-    // Simple cleanup on unmount - that's all we need for username validation
-    useEffect(() => {
-        return () => {
-            validationCache.current.clear();
-        };
-    }, []);
-
     // Step configurations
     const steps: StepConfig[] = useMemo(() => {
         const base: StepConfig[] = [
@@ -259,6 +280,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             handleInputBlur,
             handleSignIn, // Add sign-in function for password step
             mfaToken,
+            existingSession,
+            handleContinueWithExistingAccount,
         },
         ...(mfaToken ? [{
             username,
@@ -272,7 +295,7 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         username, password, errorMessage, validationStatus, userProfile, mfaToken,
         isValidating, isInputFocused, isAddAccountMode, user, showPassword,
         isLoading, handleUsernameChange, handlePasswordChange, handleInputFocus, handleInputBlur,
-        validateUsername, handleSignIn, completeMfaLogin
+        validateUsername, handleSignIn, completeMfaLogin, existingSession, handleContinueWithExistingAccount
     ]);
 
     return (

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Platform, Animated, ScrollView } from 'react-native';
+import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
@@ -10,6 +11,41 @@ import { useThemeColors } from '../styles';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import { useI18n } from '../hooks/useI18n';
 
+const GAP = 12;
+const INNER_GAP = 8;
+
+// Individual animated progress dot
+const AnimatedProgressDot: React.FC<{
+    isActive: boolean;
+    colors: any;
+    styles: any;
+}> = ({ isActive, colors, styles }) => {
+    const width = useSharedValue(isActive ? 12 : 6);
+    const backgroundColor = useSharedValue(isActive ? colors.primary : colors.border);
+
+    useEffect(() => {
+        width.value = withTiming(isActive ? 12 : 6, { duration: 300 });
+        backgroundColor.value = withTiming(
+            isActive ? colors.primary : colors.border,
+            { duration: 300 }
+        );
+    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: width.value,
+        backgroundColor: backgroundColor.value,
+    }));
+
+    return (
+        <AnimatedReanimated.View
+            style={[
+                styles.progressDot,
+                animatedStyle,
+            ]}
+        />
+    );
+};
+
 /**
  * Post-signup welcome & onboarding screen.
  * - Greets the newly registered user
@@ -138,33 +174,44 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
         <View style={styles.container}>
             <View style={styles.progressContainer}>
                 {steps.map((s, i) => (
-                    <View key={s.key} style={[styles.progressDot, i === currentStep ? { backgroundColor: colors.primary, width: 22 } : { backgroundColor: colors.border }]} />
+                    <AnimatedProgressDot
+                        key={s.key}
+                        isActive={i === currentStep}
+                        colors={colors}
+                        styles={styles}
+                    />
                 ))}
             </View>
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
                 <ScrollView contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false}>
-                    <Text style={styles.title}>{step.title}</Text>
-                    {step.body && <Text style={styles.body}>{step.body}</Text>}
-                    {Array.isArray(step.bullets) && step.bullets.length > 0 && (
-                        <View style={styles.bulletContainer}>
-                            {step.bullets.map(b => (
-                                <View key={b} style={styles.bulletRow}>
-                                    <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
-                                    <Text style={styles.bulletText}>{b}</Text>
-                                </View>
-                            ))}
+                    <View style={styles.contentContainer}>
+                        <View style={[styles.header, styles.sectionSpacing]}>
+                            <Text style={[styles.title, { color: colors.text }]}>{step.title}</Text>
+                            {step.body && <Text style={[styles.body, { color: colors.secondaryText }]}>{step.body}</Text>}
                         </View>
-                    )}
-                    {step.showAvatar && (
-                        <View style={styles.avatarSection}>
-                            <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
-                            <TouchableOpacity style={styles.changeAvatarButton} onPress={openAvatarPicker}>
-                                <Ionicons name="image-outline" size={18} color="#FFFFFF" />
-                                <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
-                            </TouchableOpacity>
+                        {Array.isArray(step.bullets) && step.bullets.length > 0 && (
+                            <View style={[styles.bulletContainer, styles.sectionSpacing]}>
+                                {step.bullets.map(b => (
+                                    <View key={b} style={styles.bulletRow}>
+                                        <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
+                                        <Text style={[styles.bulletText, { color: colors.secondaryText }]}>{b}</Text>
+                                    </View>
+                                ))}
+                            </View>
+                        )}
+                        {step.showAvatar && (
+                            <View style={[styles.avatarSection, styles.sectionSpacing]}>
+                                <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
+                                <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
+                                    <Ionicons name="image-outline" size={18} color="#FFFFFF" />
+                                    <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+                        <View style={styles.sectionSpacing}>
+                            <GroupedPillButtons buttons={pillButtons} colors={colors} />
                         </View>
-                    )}
-                    <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                    </View>
                 </ScrollView>
             </Animated.View>
         </View>
@@ -174,11 +221,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
 const createStyles = (theme: string) => {
     const isDark = theme === 'dark';
-    const textColor = isDark ? '#FFFFFF' : '#000000';
-    const secondary = isDark ? '#CCCCCC' : '#555555';
-    const cardBg = isDark ? '#1E1E1E' : '#FFFFFF';
     const border = isDark ? '#333333' : '#E0E0E0';
-    const primary = '#007AFF';
     return StyleSheet.create({
         container: {
             width: '100%',
@@ -186,25 +229,38 @@ const createStyles = (theme: string) => {
         },
         scrollInner: {
             paddingBottom: 12,
+            paddingTop: 0,
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: 420,
+            alignSelf: 'center',
+        },
+        sectionSpacing: {
+            marginBottom: GAP,
+        },
+        header: {
+            alignItems: 'flex-start',
+            width: '100%',
+            gap: INNER_GAP / 2,
         },
         title: {
             fontSize: 42,
             fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
             fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
             letterSpacing: -1,
-            color: textColor,
-            marginBottom: 12,
+            textAlign: 'left',
         },
         body: {
             fontSize: 16,
             lineHeight: 22,
-            color: secondary,
-            marginBottom: 28,
-            maxWidth: 620,
+            textAlign: 'left',
+            maxWidth: 320,
+            alignSelf: 'flex-start',
         },
         bulletContainer: {
-            gap: 10,
-            marginBottom: 32,
+            gap: INNER_GAP,
+            width: '100%',
         },
         bulletRow: {
             flexDirection: 'row',
@@ -215,26 +271,26 @@ const createStyles = (theme: string) => {
             flex: 1,
             fontSize: 15,
             lineHeight: 20,
-            color: secondary,
         },
         avatarSection: {
             width: '100%',
             alignItems: 'center',
-            marginBottom: 40,
         },
         avatar: {
-            marginBottom: 16,
-            borderWidth: 4,
-            borderColor: primary + '40',
+            marginBottom: INNER_GAP,
         },
         changeAvatarButton: {
             flexDirection: 'row',
             alignItems: 'center',
-            backgroundColor: primary,
             paddingHorizontal: 18,
             paddingVertical: 10,
-            borderRadius: 35,
+            borderRadius: 28,
             gap: 8,
+            shadowOpacity: 0,
+            shadowRadius: 0,
+            shadowOffset: { width: 0, height: 0 },
+            elevation: 0,
+            ...(Platform.OS === 'web' ? { boxShadow: 'none' } : null),
         },
         changeAvatarText: {
             color: '#FFFFFF',
@@ -245,61 +301,16 @@ const createStyles = (theme: string) => {
             flexDirection: 'row',
             width: '100%',
             justifyContent: 'center',
-            marginBottom: 24,
-            marginTop: 4,
+            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
+            marginBottom: 24, // Equal spacing below dots
         },
         progressDot: {
-            height: 10,
-            width: 10,
-            borderRadius: 5,
-            marginHorizontal: 6,
+            height: 6,
+            width: 6,
+            borderRadius: 3,
+            marginHorizontal: 3,
             backgroundColor: border,
         },
-        navBar: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            gap: 12,
-            marginTop: 8,
-        },
-        navButton: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingHorizontal: 14,
-            paddingVertical: 10,
-            borderRadius: 12,
-        },
-        backButton: {
-            backgroundColor: cardBg,
-            borderWidth: 1,
-            borderColor: border,
-        },
-        skipButton: {
-            marginLeft: 'auto',
-            backgroundColor: 'transparent',
-            paddingHorizontal: 4,
-        },
-        navText: {
-            fontSize: 14,
-            fontWeight: '500',
-        },
-        primaryButton: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 8,
-            backgroundColor: primary,
-            paddingVertical: 18,
-            borderRadius: 16,
-            width: '100%',
-        },
-        primaryButtonText: {
-            color: '#FFFFFF',
-            fontSize: 16,
-            fontWeight: '600',
-            letterSpacing: 0.5,
-        },
     });
 };
 

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

@@ -95,7 +95,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
                     <Ionicons name="information-circle" size={20} color={colors.primary} />
                     <Text style={[styles.modernInfoText, { color: colors.text }]}>
-                        {t('signin.currentlySignedInAs', { username: user?.username }) || 'Currently signed in as '}<Text style={{ fontWeight: 'bold' }}>{user?.username}</Text>
+                        {t('signin.currentlySignedInAs') || 'Currently signed in as'} <Text style={{ fontWeight: 'bold' }}>{user?.name?.full || user?.username}</Text>
                     </Text>
                 </View>
             )}

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

@@ -9,6 +9,7 @@ import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import { toast } from '../../../lib/sonner';
 import type { OxyServices } from '../../../core';
 import { useI18n } from '../../hooks/useI18n';
+import { stepStyles } from '../../styles/spacing';
 
 interface RecoverRequestStepProps {
     // Common props from StepBasedScreen
@@ -51,6 +52,7 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
 }) => {
     const inputRef = useRef<any>(null);
     const { t } = useI18n();
+    const baseStyles = stepStyles;
 
     const handleIdentifierChange = (text: string) => {
         setIdentifier(text);
@@ -83,13 +85,15 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
 
     return (
         <>
-            <HighFive width={100} height={100} />
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.noEmail')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, { alignItems: 'flex-start' }]}>
+                <HighFive width={100} height={100} />
+            </View>
+            <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 }]}>{t('recover.noEmail')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
                 <TextField
                     ref={inputRef}
                     label={t('recover.username.label')}
@@ -101,31 +105,37 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
                     testID="recover-identifier-input"
                     variant="filled"
                     error={errorMessage || undefined}
+                    helperText={t('recover.username.helper') || 'Enter your username or email'}
                     editable={!isLoading}
                     onSubmitEditing={handleRequestWithFocus}
                     autoFocus
+                    accessibilityLabel={t('recover.username.label')}
+                    accessibilityHint={t('recover.username.helper') || 'Enter your username or email to recover your account'}
+                    style={{ marginBottom: 0 }}
                 />
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: () => navigate('SignIn'),
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.continue'),
-                        onPress: handleRequest,
-                        icon: 'information-circle-outline',
-                        variant: 'primary',
-                        loading: isLoading,
-                        disabled: isLoading,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back'),
+                            onPress: () => navigate('SignIn'),
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.continue'),
+                            onPress: handleRequest,
+                            icon: 'information-circle-outline',
+                            variant: 'primary',
+                            loading: isLoading,
+                            disabled: isLoading || !identifier || identifier.length < 3,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };