@oxyhq/services 5.3.2 → 5.3.4

package/src/ui/context/OxyContext.tsx

@@ -161,10 +161,43 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
         if (sessionsData) {
           const parsedSessions: SecureClientSession[] = JSON.parse(sessionsData);
-          setSessions(parsedSessions);
+          
+          // Migrate old session format to include user info
+          const migratedSessions: SecureClientSession[] = [];
+          let shouldUpdateStorage = false;
+          
+          for (const session of parsedSessions) {
+            if (!session.userId || !session.username) {
+              // Session is missing user info, try to fetch it
+              try {
+                const sessionUser = await oxyServices.getUserBySession(session.sessionId);
+                migratedSessions.push({
+                  ...session,
+                  userId: sessionUser.id,
+                  username: sessionUser.username
+                });
+                shouldUpdateStorage = true;
+                console.log(`Migrated session ${session.sessionId} for user ${sessionUser.username}`);
+              } catch (error) {
+                // Session might be invalid, skip it
+                console.log(`Removing invalid session ${session.sessionId}:`, error);
+                shouldUpdateStorage = true;
+              }
+            } else {
+              // Session already has user info
+              migratedSessions.push(session);
+            }
+          }
+          
+          // Update storage if we made changes
+          if (shouldUpdateStorage) {
+            await saveSessionsToStorage(migratedSessions);
+          }
+          
+          setSessions(migratedSessions);
 
-          if (storedActiveSessionId && parsedSessions.length > 0) {
-            const activeSession = parsedSessions.find(s => s.sessionId === storedActiveSessionId);
+          if (storedActiveSessionId && migratedSessions.length > 0) {
+            const activeSession = migratedSessions.find(s => s.sessionId === storedActiveSessionId);
             
             if (activeSession) {
               console.log('SecureAuth - activeSession found:', activeSession);
@@ -317,16 +350,42 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
         deviceFingerprint
       );
       
-      // Create client session object
+      // Create client session object with user info for duplicate detection
       const clientSession: SecureClientSession = {
         sessionId: response.sessionId,
         deviceId: response.deviceId,
         expiresAt: response.expiresAt,
-        lastActive: new Date().toISOString()
+        lastActive: new Date().toISOString(),
+        userId: response.user.id,
+        username: response.user.username
       };
 
-      // Add to sessions list
-      const updatedSessions = [...sessions, clientSession];
+      // Check if this user already has a session (prevent duplicate accounts)
+      const existingUserSessionIndex = sessions.findIndex(s => 
+        s.userId === response.user.id || s.username === response.user.username
+      );
+
+      let updatedSessions: SecureClientSession[];
+      
+      if (existingUserSessionIndex !== -1) {
+        // User already has a session - replace it with the new one (reused session scenario)
+        const existingSession = sessions[existingUserSessionIndex];
+        updatedSessions = [...sessions];
+        updatedSessions[existingUserSessionIndex] = clientSession;
+        
+        console.log(`Reusing/updating existing session for user ${response.user.username}. Previous session: ${existingSession.sessionId}, New session: ${response.sessionId}`);
+        
+        // If the replaced session was the active one, update active session
+        if (activeSessionId === existingSession.sessionId) {
+          setActiveSessionId(response.sessionId);
+          await saveActiveSessionId(response.sessionId);
+        }
+      } else {
+        // Add new session for new user
+        updatedSessions = [...sessions, clientSession];
+        console.log(`Added new session for user ${response.user.username} on device ${response.deviceId}`);
+      }
+
       setSessions(updatedSessions);
       await saveSessionsToStorage(updatedSessions);
 

package/src/ui/navigation/OxyRouter.tsx

@@ -7,6 +7,7 @@ import SignInScreen from '../screens/SignInScreen';
 import SignUpScreen from '../screens/SignUpScreen';
 import AccountCenterScreen from '../screens/AccountCenterScreen';
 import AccountSwitcherScreen from '../screens/AccountSwitcherScreen';
+import ModernAccountSwitcherScreen from '../screens/ModernAccountSwitcherScreen';
 import SessionManagementScreen from '../screens/SessionManagementScreen';
 import AccountOverviewScreen from '../screens/AccountOverviewScreen';
 import AccountSettingsScreen from '../screens/AccountSettingsScreen';
@@ -40,6 +41,10 @@ const routes: Record<string, RouteConfig> = {
         component: AccountSwitcherScreen,
         snapPoints: ['70%', '100%'],
     },
+    ModernAccountSwitcher: {
+        component: ModernAccountSwitcherScreen,
+        snapPoints: ['70%', '100%'],
+    },
     SessionManagement: {
         component: SessionManagementScreen,
         snapPoints: ['70%', '100%'],

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -8,17 +8,26 @@ import {
     ScrollView,
     Alert,
     Platform,
+    Image,
+    Dimensions,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
+import { User } from '../../models/interfaces';
+
+interface SessionWithUser extends SecureClientSession {
+    userProfile?: User;
+    isLoadingProfile?: boolean;
+}
 
 const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     navigate,
     goBack,
+    oxyServices,
 }) => {
     const { 
         user, 
@@ -30,17 +39,68 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         isLoading 
     } = useOxy();
 
+    const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
 
+    const screenWidth = Dimensions.get('window').width;
     const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const dangerColor = '#D32F2F';
-    const successColor = '#2E7D32';
+    
+    // Modern color scheme
+    const colors = {
+        background: isDarkTheme ? '#000000' : '#FFFFFF',
+        surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+        card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+        text: isDarkTheme ? '#FFFFFF' : '#000000',
+        secondaryText: isDarkTheme ? '#8E8E93' : '#6D6D70',
+        accent: '#007AFF',
+        destructive: '#FF3B30',
+        success: '#34C759',
+        border: isDarkTheme ? '#38383A' : '#C6C6C8',
+        activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
+        shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
+    };
+
+    // Load user profiles for sessions
+    useEffect(() => {
+        const loadUserProfiles = async () => {
+            if (!sessions.length || !oxyServices) return;
+
+            const updatedSessions: SessionWithUser[] = sessions.map(session => ({
+                ...session,
+                isLoadingProfile: true,
+            }));
+            setSessionsWithUsers(updatedSessions);
+
+            // Load profiles for each session
+            for (let i = 0; i < sessions.length; i++) {
+                const session = sessions[i];
+                try {
+                    // Try to get user profile using the session
+                    const userProfile = await oxyServices.getUserBySession(session.sessionId);
+                    
+                    setSessionsWithUsers(prev => 
+                        prev.map(s => 
+                            s.sessionId === session.sessionId 
+                                ? { ...s, userProfile, isLoadingProfile: false }
+                                : s
+                        )
+                    );
+                } catch (error) {
+                    console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+                    setSessionsWithUsers(prev => 
+                        prev.map(s => 
+                            s.sessionId === session.sessionId 
+                                ? { ...s, isLoadingProfile: false }
+                                : s
+                        )
+                    );
+                }
+            }
+        };
+
+        loadUserProfiles();
+    }, [sessions, oxyServices]);
 
     const handleSwitchSession = async (sessionId: string) => {
         if (sessionId === user?.sessionId) return; // Already active session
@@ -134,20 +194,20 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 style={[
                     styles.userItem,
                     {
-                        backgroundColor: isActive ? primaryColor + '20' : secondaryBackgroundColor,
-                        borderColor: isActive ? primaryColor : borderColor,
+                        backgroundColor: isActive ? colors.activeCard : colors.surface,
+                        borderColor: isActive ? colors.accent : colors.border,
                     },
                 ]}
             >
                 <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: textColor }]}>
+                    <Text style={[styles.username, { color: colors.text }]}>
                         {isActive ? user?.username || 'Current Account' : 'Account Session'}
                     </Text>
                     <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                         Last active: {new Date(session.lastActive).toLocaleDateString()}
                     </Text>
                     {isActive && (
-                        <View style={[styles.activeBadge, { backgroundColor: successColor }]}>
+                        <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
                             <Text style={styles.activeBadgeText}>Active</Text>
                         </View>
                     )}
@@ -156,27 +216,27 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 <View style={styles.userActions}>
                     {!isActive && (
                         <TouchableOpacity
-                            style={[styles.switchButton, { borderColor: primaryColor }]}
+                            style={[styles.switchButton, { borderColor: colors.accent }]}
                             onPress={() => handleSwitchSession(session.sessionId)}
                             disabled={isSwitching || isRemoving}
                         >
                             {isSwitching ? (
-                                <ActivityIndicator color={primaryColor} size="small" />
+                                <ActivityIndicator color={colors.accent} size="small" />
                             ) : (
-                                <Text style={[styles.switchButtonText, { color: primaryColor }]}>Switch</Text>
+                                <Text style={[styles.switchButtonText, { color: colors.accent }]}>Switch</Text>
                             )}
                         </TouchableOpacity>
                     )}
 
                     <TouchableOpacity
-                        style={[styles.removeButton, { borderColor: dangerColor }]}
+                        style={[styles.removeButton, { borderColor: colors.destructive }]}
                         onPress={() => handleRemoveSession(session.sessionId)}
                         disabled={isSwitching || isRemoving || sessions.length === 1}
                     >
                         {isRemoving ? (
-                            <ActivityIndicator color={dangerColor} size="small" />
+                            <ActivityIndicator color={colors.destructive} size="small" />
                         ) : (
-                            <Text style={[styles.removeButtonText, { color: dangerColor }]}>Remove</Text>
+                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>Remove</Text>
                         )}
                     </TouchableOpacity>
                 </View>
@@ -185,12 +245,12 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: colors.background }]}>
             <View style={styles.header}>
                 <TouchableOpacity style={styles.backButton} onPress={goBack}>
-                    <Text style={[styles.backButtonText, { color: primaryColor }]}>‹ Back</Text>
+                    <Text style={[styles.backButtonText, { color: colors.accent }]}>‹ Back</Text>
                 </TouchableOpacity>
-                <Text style={[styles.title, { color: textColor }]}>Account Switcher</Text>
+                <Text style={[styles.title, { color: colors.text }]}>Account Switcher</Text>
                 <View style={styles.placeholder} />
             </View>
 
@@ -202,7 +262,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <View style={styles.usersContainer}>
-                    <Text style={[styles.sectionTitle, { color: textColor }]}>
+                    <Text style={[styles.sectionTitle, { color: colors.text }]}>
                         Sessions ({sessions.length})
                     </Text>
                     
@@ -211,10 +271,10 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.actionsContainer}>
                     <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
+                        style={[styles.actionButton, { borderColor: colors.border }]}
                         onPress={() => navigate('SignIn')}
                     >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>
+                        <Text style={[styles.actionButtonText, { color: colors.text }]}>
                             Add Another Account
                         </Text>
                     </TouchableOpacity>
@@ -226,9 +286,9 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                             disabled={isLoading}
                         >
                             {isLoading ? (
-                                <ActivityIndicator color={dangerColor} size="small" />
+                                <ActivityIndicator color={colors.destructive} size="small" />
                             ) : (
-                                <Text style={[styles.dangerButtonText, { color: dangerColor }]}>
+                                <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
                                     Sign Out All Sessions
                                 </Text>
                             )}