@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
788 lines (779 loc) • 32.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _OxyContext = require("../context/OxyContext");
var _sonner = require("../../lib/sonner");
var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ModernAccountSwitcherScreen = ({
onClose,
theme,
navigate,
goBack,
oxyServices
}) => {
const {
user,
sessions,
activeSessionId,
switchSession,
removeSession,
logoutAll,
isLoading
} = (0, _OxyContext.useOxy)();
const [sessionsWithUsers, setSessionsWithUsers] = (0, _react.useState)([]);
const [switchingToUserId, setSwitchingToUserId] = (0, _react.useState)(null);
const [removingUserId, setRemovingUserId] = (0, _react.useState)(null);
// Device session management state
const [showDeviceManagement, setShowDeviceManagement] = (0, _react.useState)(false);
const [deviceSessions, setDeviceSessions] = (0, _react.useState)([]);
const [loadingDeviceSessions, setLoadingDeviceSessions] = (0, _react.useState)(false);
const [remotingLogoutSessionId, setRemoteLogoutSessionId] = (0, _react.useState)(null);
const [loggingOutAllDevices, setLoggingOutAllDevices] = (0, _react.useState)(false);
const screenWidth = _reactNative.Dimensions.get('window').width;
const isDarkTheme = theme === 'dark';
// 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
(0, _react.useEffect)(() => {
const loadUserProfiles = async () => {
if (!sessions.length || !oxyServices) return;
const updatedSessions = 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 => {
if (sessionId === user?.sessionId) return; // Already active session
setSwitchingToUserId(sessionId);
try {
await switchSession(sessionId);
_sonner.toast.success('Account switched successfully!');
if (onClose) {
onClose();
}
} catch (error) {
console.error('Switch session failed:', error);
_sonner.toast.error('There was a problem switching accounts. Please try again.');
} finally {
setSwitchingToUserId(null);
}
};
const handleRemoveSession = async sessionId => {
const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
if (!sessionToRemove) return;
const displayName = typeof sessionToRemove.userProfile?.name === 'object' ? sessionToRemove.userProfile.name.full || sessionToRemove.userProfile.name.first || sessionToRemove.userProfile.username : sessionToRemove.userProfile?.name || sessionToRemove.userProfile?.username || 'this account';
_reactNative.Alert.alert('Remove Account', `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`, [{
text: 'Cancel',
style: 'cancel'
}, {
text: 'Remove',
style: 'destructive',
onPress: async () => {
setRemovingUserId(sessionId);
try {
await removeSession(sessionId);
_sonner.toast.success('Account removed successfully!');
} catch (error) {
console.error('Remove session failed:', error);
_sonner.toast.error('There was a problem removing the account. Please try again.');
} finally {
setRemovingUserId(null);
}
}
}], {
cancelable: true
});
};
const handleLogoutAll = async () => {
// IMPORTANT DEBUG INFO - Check this in console
console.log('🔴 DEBUG handleLogoutAll called');
console.log('🔴 Current user:', user);
console.log('🔴 activeSessionId:', activeSessionId);
console.log('🔴 sessions count:', sessions?.length || 0);
console.log('🔴 sessions array:', sessions);
console.log('🔴 isLoading:', isLoading);
console.log('🔴 logoutAll function type:', typeof logoutAll);
// Check if we have the required data
if (!activeSessionId) {
console.error('🔴 ERROR: No activeSessionId found!');
_sonner.toast.error('No active session found. You may already be logged out.');
return;
}
if (typeof logoutAll !== 'function') {
console.error('🔴 ERROR: logoutAll is not a function!', typeof logoutAll);
_sonner.toast.error('Logout function not available. Please try refreshing the app.');
return;
}
// TEMPORARY: Skip confirmation dialog to test direct logout
console.log('🔴 TESTING: Bypassing confirmation dialog for direct test');
try {
console.log('🔴 TESTING: About to call logoutAll() directly');
await logoutAll();
console.log('🔴 TESTING: logoutAll() completed successfully');
_sonner.toast.success('All accounts signed out successfully!');
if (onClose) {
console.log('🔴 TESTING: Calling onClose');
onClose();
}
} catch (error) {
console.error('🔴 TESTING: Logout all failed:', error);
const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
_sonner.toast.error(`There was a problem signing out: ${errorMessage}`);
}
};
// Device session management functions
const loadAllDeviceSessions = async () => {
if (!oxyServices || !user?.sessionId) return;
setLoadingDeviceSessions(true);
try {
// This would call the API to get all device sessions for the current user
const allSessions = await oxyServices.getDeviceSessions(user.sessionId);
setDeviceSessions(allSessions || []);
} catch (error) {
console.error('Failed to load device sessions:', error);
_sonner.toast.error('Failed to load device sessions. Please try again.');
} finally {
setLoadingDeviceSessions(false);
}
};
const handleRemoteSessionLogout = async (sessionId, deviceName) => {
_reactNative.Alert.alert('Remove Device Session', `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`, [{
text: 'Cancel',
style: 'cancel'
}, {
text: 'Sign Out',
style: 'destructive',
onPress: async () => {
setRemoteLogoutSessionId(sessionId);
try {
await oxyServices?.logoutSecureSession(user?.sessionId || '', sessionId);
// Refresh device sessions list
await loadAllDeviceSessions();
_sonner.toast.success(`Signed out from ${deviceName} successfully!`);
} catch (error) {
console.error('Remote logout failed:', error);
_sonner.toast.error('There was a problem signing out from the device. Please try again.');
} finally {
setRemoteLogoutSessionId(null);
}
}
}], {
cancelable: true
});
};
const handleLogoutAllDevices = async () => {
const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
if (otherDevicesCount === 0) {
_sonner.toast.info('No other device sessions found to sign out from.');
return;
}
_reactNative.Alert.alert('Sign Out All Other Devices', `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`, [{
text: 'Cancel',
style: 'cancel'
}, {
text: 'Sign Out All',
style: 'destructive',
onPress: async () => {
setLoggingOutAllDevices(true);
try {
await oxyServices?.logoutAllDeviceSessions(user?.sessionId || '', undefined, true);
// Refresh device sessions list
await loadAllDeviceSessions();
_sonner.toast.success('Signed out from all other devices successfully!');
} catch (error) {
console.error('Logout all devices failed:', error);
_sonner.toast.error('There was a problem signing out from other devices. Please try again.');
} finally {
setLoggingOutAllDevices(false);
}
}
}], {
cancelable: true
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.container, {
backgroundColor: '#f2f2f2'
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.header,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.backButton,
onPress: goBack,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "chevron-back",
size: 24,
color: "#007AFF"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.headerTitle,
children: "Account Switcher"
}), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.closeButton,
onPress: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.closeButtonText,
children: "\xD7"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
style: styles.content,
children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.loadingContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "large",
color: "#007AFF"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.loadingText,
children: "Loading accounts..."
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [user && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.section,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: "Current Account"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.userIcon,
children: [user.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
source: {
uri: user.avatar.url
},
style: styles.accountAvatarImage
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.accountAvatarFallback,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.accountAvatarText,
children: (typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase()
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.activeBadge,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "checkmark",
size: 12,
color: "#fff"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.settingInfo,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingLabel,
children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingDescription,
children: user.email || user.username
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.currentBadge,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.currentBadgeText,
children: "Current"
})
})]
})]
}), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.section,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.sectionTitle,
children: ["Other Accounts (", sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length, ")"]
}), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).map((sessionWithUser, index, filteredArray) => {
const isFirst = index === 0;
const isLast = index === filteredArray.length - 1;
const isSwitching = switchingToUserId === sessionWithUser.sessionId;
const isRemoving = removingUserId === sessionWithUser.sessionId;
const {
userProfile,
isLoadingProfile
} = sessionWithUser;
const displayName = typeof userProfile?.name === 'object' ? userProfile.name.full || userProfile.name.first || userProfile.username : userProfile?.name || userProfile?.username || 'Unknown User';
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.userIcon,
children: isLoadingProfile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.accountAvatarFallback,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#007AFF"
})
}) : userProfile?.avatar?.url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
source: {
uri: userProfile.avatar.url
},
style: styles.accountAvatarImage
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.accountAvatarFallback,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.accountAvatarText,
children: displayName.charAt(0).toUpperCase()
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.settingInfo,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingLabel,
children: displayName
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.settingDescription,
children: ["@", userProfile?.username || 'unknown']
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.accountActions,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.switchButton,
onPress: () => handleSwitchSession(sessionWithUser.sessionId),
disabled: isSwitching || isRemoving,
children: isSwitching ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#007AFF"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.switchButtonText,
children: "Switch"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.removeButton,
onPress: () => handleRemoveSession(sessionWithUser.sessionId),
disabled: isSwitching || isRemoving,
children: isRemoving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#FF3B30"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "trash",
size: 16,
color: "#FF3B30"
})
})]
})]
}, sessionWithUser.sessionId);
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.section,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: "Quick Actions"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: [styles.settingItem, styles.firstSettingItem],
onPress: () => navigate?.('SignIn'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.settingInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "person-add",
size: 20,
color: "#007AFF",
style: styles.settingIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingLabel,
children: "Add Another Account"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingDescription,
children: "Sign in with a different account"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "chevron-forward",
size: 16,
color: "#ccc"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.settingItem,
onPress: () => setShowDeviceManagement(!showDeviceManagement),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.settingInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "devices",
size: 20,
color: "#5856D6",
style: styles.settingIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.settingLabel,
children: [showDeviceManagement ? 'Hide' : 'Manage', " Device Sessions"]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingDescription,
children: "View and manage sessions on other devices"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "chevron-forward",
size: 16,
color: "#ccc"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: [styles.settingItem, styles.lastSettingItem],
onPress: handleLogoutAll,
disabled: sessionsWithUsers.length === 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.settingInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "log-out",
size: 20,
color: "#FF3B30",
style: styles.settingIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.settingLabel, {
color: sessionsWithUsers.length === 0 ? '#ccc' : '#FF3B30'
}],
children: "Sign Out All Accounts"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingDescription,
children: "Remove all accounts from this device"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "chevron-forward",
size: 16,
color: "#ccc"
})]
})]
}), showDeviceManagement && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.section,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.sectionTitle,
children: "Device Sessions"
}), loadingDeviceSessions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.loadingContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#007AFF"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.loadingText,
children: "Loading device sessions..."
})]
})
}) : deviceSessions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.settingInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "phone-portrait",
size: 20,
color: "#ccc",
style: styles.settingIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingLabel,
children: "No device sessions found"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.settingDescription,
children: "Device session management not available"
})]
})]
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: deviceSessions.map((session, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.settingItem, index === 0 && styles.firstSettingItem, index === deviceSessions.length - 1 && styles.lastSettingItem],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.settingInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: session.isCurrent ? "phone-portrait" : "phone-portrait-outline",
size: 20,
color: session.isCurrent ? "#34C759" : "#8E8E93",
style: styles.settingIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.settingLabel,
children: [session.deviceName, " ", session.isCurrent ? '(This device)' : '']
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: styles.settingDescription,
children: ["Last active: ", new Date(session.lastActive).toLocaleDateString()]
})]
})]
}), !session.isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.removeButton,
onPress: () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
disabled: remotingLogoutSessionId === session.sessionId,
children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
size: "small",
color: "#FF3B30"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "log-out",
size: 16,
color: "#FF3B30"
})
})]
}, session.sessionId))
})]
}), sessionsWithUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.section,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.emptyStateContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
name: "person-outline",
size: 48,
color: "#ccc"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.emptyStateTitle,
children: "No saved accounts"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.emptyStateDescription,
children: "Add another account to switch between them quickly"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.addAccountButton,
onPress: () => navigate?.('SignIn'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.addAccountButtonText,
children: "Add Account"
})
})]
})
})
})]
})
})]
});
};
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2'
},
header: {
paddingHorizontal: 20,
paddingTop: 60,
paddingBottom: 16,
backgroundColor: '#fff',
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
headerTitle: {
fontSize: 24,
fontWeight: 'bold',
color: '#000'
},
backButton: {
padding: 8
},
closeButton: {
padding: 8
},
closeButtonText: {
fontSize: 24,
color: '#000',
fontWeight: '300'
},
content: {
flex: 1,
padding: 16
},
section: {
marginBottom: 24
},
sectionTitle: {
fontSize: 16,
fontWeight: '600',
color: '#333',
marginBottom: 12
},
settingItem: {
backgroundColor: '#fff',
padding: 16,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 2
},
firstSettingItem: {
borderTopLeftRadius: 24,
borderTopRightRadius: 24
},
lastSettingItem: {
borderBottomLeftRadius: 24,
borderBottomRightRadius: 24,
marginBottom: 8
},
currentAccountCard: {
borderWidth: 2,
borderColor: '#007AFF',
backgroundColor: '#007AFF08'
},
settingInfo: {
flexDirection: 'row',
alignItems: 'center',
flex: 1
},
settingIcon: {
marginRight: 12
},
settingLabel: {
fontSize: 16,
fontWeight: '500',
color: '#333',
marginBottom: 2
},
settingDescription: {
fontSize: 14,
color: '#666'
},
userIcon: {
marginRight: 12,
position: 'relative'
},
accountAvatarImage: {
width: 40,
height: 40,
borderRadius: 20
},
accountAvatarFallback: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: '#d169e5',
alignItems: 'center',
justifyContent: 'center'
},
accountAvatarText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold'
},
activeBadge: {
position: 'absolute',
top: -2,
right: -2,
width: 16,
height: 16,
borderRadius: 8,
backgroundColor: '#34C759',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 2,
borderColor: '#fff'
},
currentBadge: {
backgroundColor: '#007AFF',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 12
},
currentBadgeText: {
color: '#fff',
fontSize: 12,
fontWeight: '600'
},
accountActions: {
flexDirection: 'row',
alignItems: 'center',
gap: 8
},
switchButton: {
backgroundColor: '#007AFF',
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 16,
minWidth: 60,
alignItems: 'center'
},
switchButtonText: {
color: '#fff',
fontSize: 14,
fontWeight: '500'
},
removeButton: {
padding: 8,
borderRadius: 16,
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#FF3B30',
alignItems: 'center',
justifyContent: 'center'
},
loadingContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 20,
gap: 12
},
loadingText: {
fontSize: 16,
color: '#666'
},
emptyStateContainer: {
alignItems: 'center',
paddingVertical: 32,
paddingHorizontal: 20
},
emptyStateTitle: {
fontSize: 18,
fontWeight: '600',
color: '#333',
marginTop: 16,
marginBottom: 8
},
emptyStateDescription: {
fontSize: 14,
color: '#666',
textAlign: 'center',
marginBottom: 24,
lineHeight: 20
},
addAccountButton: {
backgroundColor: '#007AFF',
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 20
},
addAccountButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: '600'
}
});
var _default = exports.default = ModernAccountSwitcherScreen;
//# sourceMappingURL=AccountSwitcherScreen.js.map