@oxyhq/services 5.7.5 → 5.8.1

package/src/ui/screens/ProfileScreen.tsx

@@ -29,7 +29,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
     useEffect(() => {
         console.log('ProfileScreen - userId:', userId);
         console.log('ProfileScreen - username:', username);
-        
+
         if (!userId) {
             setError('No user ID provided');
             setIsLoading(false);
@@ -50,11 +50,11 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 }
                 throw err;
             }),
-            oxyServices.getUserKarmaTotal ? 
+            oxyServices.getUserKarmaTotal ?
                 oxyServices.getUserKarmaTotal(userId).catch(err => {
                     console.warn('getUserKarmaTotal error:', err);
                     return { total: undefined };
-                }) : 
+                }) :
                 Promise.resolve({ total: undefined })
         ])
             .then(([profileRes, karmaRes]) => {
@@ -73,7 +73,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 console.error('Profile loading error:', err);
                 // Provide user-friendly error messages based on the error type
                 let errorMessage = 'Failed to load profile';
-                
+
                 if (err.status === 404 || err.message?.includes('not found') || err.message?.includes('Resource not found')) {
                     if (currentUser && currentUser.id === userId) {
                         errorMessage = 'Unable to load your profile from the server. This may be due to a temporary service issue.';
@@ -87,7 +87,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 } else if (err.message) {
                     errorMessage = err.message;
                 }
-                
+
                 setError(errorMessage);
             })
             .finally(() => setIsLoading(false));

package/src/ui/screens/RecoverAccountScreen.tsx

@@ -4,17 +4,21 @@ import { Ionicons } from '@expo/vector-icons';
 import TextField from '../components/internal/TextField';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import HighFive from '../../assets/illustrations/HighFive';
-import { useThemeColors } from '../styles';
+import { useThemeColors, createAuthStyles } from '../styles';
 import PinInput from '../components/internal/PinInput';
 
 interface RecoverAccountScreenProps {
-    navigate: (screen: string) => void;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    goBack: () => void;
     theme: string;
+    returnTo?: string;
+    returnStep?: number;
+    returnData?: Record<string, any>;
 }
 
 const PIN_LENGTH = 6;
 
-const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, theme }) => {
+const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, goBack, theme, returnTo, returnStep, returnData }) => {
     const [identifier, setIdentifier] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
@@ -24,7 +28,7 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const colors = useThemeColors(theme as 'light' | 'dark');
-    const styles = createStyles(colors);
+    const styles = createAuthStyles(colors, theme);
     const identifierRef = useRef<TextInput>(null);
     const handleRequestWithFocus = () => {
         if (!identifier) {
@@ -69,6 +73,37 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
         }, 1200);
     };
 
+    // Helper function to determine back action based on current step
+    const handleBack = () => {
+        console.log('RecoverAccount handleBack:', { step, returnTo, returnStep, returnData });
+
+        if (step === 'code') {
+            setStep('request');
+        } else if (step === 'done') {
+            // If we have return information, use it; otherwise go to SignIn
+            if (returnTo && returnStep !== undefined) {
+                console.log('Navigating back to', returnTo, 'with step', returnStep, 'and data', returnData);
+                navigate(returnTo, {
+                    initialStep: returnStep,
+                    ...returnData
+                });
+            } else {
+                navigate('SignIn');
+            }
+        } else {
+            // For 'request' step, if we have return information, use it; otherwise go back
+            if (returnTo && returnStep !== undefined) {
+                console.log('Navigating back to', returnTo, 'with step', returnStep, 'and data', returnData);
+                navigate(returnTo, {
+                    initialStep: returnStep,
+                    ...returnData
+                });
+            } else {
+                goBack();
+            }
+        }
+    };
+
     return (
         <KeyboardAvoidingView
             style={[styles.container, { backgroundColor: colors.background }]}
@@ -97,25 +132,23 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                             <TextField
                                 ref={identifierRef}
                                 label="Email or Username"
-                                icon="mail-outline"
+                                leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
                                 value={identifier}
                                 onChangeText={setIdentifier}
                                 autoCapitalize="none"
                                 autoCorrect={false}
-                                colors={colors}
                                 variant="filled"
                                 error={errorMessage || undefined}
                                 editable={!isLoading}
                                 autoFocus
                                 testID="recover-identifier-input"
-                                validMessage={successMessage || undefined}
                                 onSubmitEditing={handleRequestWithFocus}
                             />
                             <GroupedPillButtons
                                 buttons={[
                                     {
-                                        text: 'Back to Sign In',
-                                        onPress: () => navigate('SignIn'),
+                                        text: 'Back',
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'transparent',
                                     },
@@ -155,7 +188,7 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                                 buttons={[
                                     {
                                         text: 'Back',
-                                        onPress: () => setStep('request'),
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'transparent',
                                     },
@@ -178,8 +211,8 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
                             <GroupedPillButtons
                                 buttons={[
                                     {
-                                        text: 'Back to Sign In',
-                                        onPress: () => navigate('SignIn'),
+                                        text: 'Back',
+                                        onPress: handleBack,
                                         icon: 'arrow-back',
                                         variant: 'primary',
                                     },
@@ -194,67 +227,6 @@ const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, t
     );
 };
 
-const createStyles = (colors: any) => StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollContent: {
-        flexGrow: 1,
-        paddingHorizontal: 24,
-        paddingTop: 4,
-        paddingBottom: 20,
-    },
-    stepContainer: {
-        flex: 1,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-    },
-    modernHeader: {
-        alignItems: 'flex-start',
-        width: '100%',
-        marginBottom: 24,
-    },
-    modernTitle: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 62,
-        lineHeight: 48,
-        marginBottom: 18,
-        textAlign: 'left',
-        letterSpacing: -1,
-    },
-    modernSubtitle: {
-        fontSize: 18,
-        lineHeight: 24,
-        textAlign: 'left',
-        opacity: 0.8,
-        marginBottom: 24,
-    },
-    successCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 16,
-        borderRadius: 16,
-        marginBottom: 24,
-        gap: 12,
-        width: '100%',
-    },
-    belowInputMessage: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginTop: 4,
-        marginBottom: 0,
-        gap: 6,
-    },
-    belowInputText: {
-        fontSize: 13,
-        fontWeight: '500',
-    },
-    successText: {
-        fontSize: 14,
-        fontWeight: '500',
-        flex: 1,
-    },
-});
+
 
 export default RecoverAccountScreen; 

package/src/ui/screens/SessionManagementScreen.tsx

@@ -15,14 +15,17 @@ import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
+import OxyIcon from '../components/icon/OxyIcon';
 import { SecureClientSession } from '../../models/secureSession';
 import { confirmAction } from '../utils/confirmAction';
+import { Header } from '../components';
 
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
+    goBack,
 }) => {
-    const { sessions: userSessions, activeSessionId, refreshSessions, logout, oxyServices } = useOxy();
+    const { sessions: userSessions, activeSessionId, refreshSessions, logout, logoutAll, oxyServices } = useOxy();
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
     const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -112,7 +115,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             async () => {
                 try {
                     setActionLoading('all');
-                    await oxyServices.logoutAllSessions();
+                    await logoutAll();
                 } catch (error) {
                     console.error('Logout all sessions failed:', error);
                     toast.error('Failed to logout all sessions. Please try again.');
@@ -166,10 +169,13 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <View style={[styles.container, { backgroundColor }]}>
-            <View style={styles.header}>
-                <Text style={[styles.title, { color: textColor }]}>Active Sessions</Text>
-                <Text style={[styles.subtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Manage your active sessions across all devices</Text>
-            </View>
+            <Header
+                title="Active Sessions"
+                subtitle="Manage your active sessions across all devices"
+                theme={theme}
+                onBack={goBack || onClose}
+                elevation="subtle"
+            />
             <ScrollView
                 style={styles.scrollView}
                 contentContainerStyle={styles.scrollContainer}
@@ -274,22 +280,8 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
-    header: {
-        padding: 20,
-        paddingBottom: 16,
-    },
-    title: {
-        fontFamily: Platform.OS === 'web'
-            ? 'Phudu'
-            : 'phuduSemiBold',
-        fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontSize: 24,
-        marginBottom: 8,
-    },
-    subtitle: {
-        fontSize: 16,
-        lineHeight: 20,
-    },
+
+
     scrollView: {
         flex: 1,
     },