@oxyhq/services 5.5.8 → 5.6.0

package/src/ui/screens/RecoverAccountScreen.tsx

@@ -0,0 +1,260 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { View, Text, Animated, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, StatusBar, TextInput } from 'react-native';
+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 PinInput from '../components/internal/PinInput';
+
+interface RecoverAccountScreenProps {
+    navigate: (screen: string) => void;
+    theme: string;
+}
+
+const PIN_LENGTH = 6;
+
+const RecoverAccountScreen: React.FC<RecoverAccountScreenProps> = ({ navigate, theme }) => {
+    const [identifier, setIdentifier] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [successMessage, setSuccessMessage] = useState('');
+    const [step, setStep] = useState<'request' | 'code' | 'done'>('request');
+    const [code, setCode] = useState('');
+    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 identifierRef = useRef<TextInput>(null);
+    const handleRequestWithFocus = () => {
+        if (!identifier) {
+            setTimeout(() => {
+                identifierRef.current?.focus();
+            }, 0);
+        }
+        handleRequest();
+    };
+
+    const handleRequest = async () => {
+        setErrorMessage('');
+        setSuccessMessage('');
+        if (!identifier || identifier.length < 3) {
+            setErrorMessage('Please enter your email or username.');
+            return;
+        }
+        setIsLoading(true);
+        setTimeout(() => {
+            setIsLoading(false);
+            setStep('code');
+            setSuccessMessage('A 6-digit code has been sent to your email or phone.');
+        }, 1200);
+    };
+
+    const handleVerifyCode = async () => {
+        setErrorMessage('');
+        setSuccessMessage('');
+        if (code.length !== PIN_LENGTH) {
+            setErrorMessage('Please enter the 6-digit code.');
+            return;
+        }
+        setIsLoading(true);
+        setTimeout(() => {
+            setIsLoading(false);
+            if (code === '123456') { // Simulate correct code
+                setStep('done');
+                setSuccessMessage('Your account has been verified! You can now reset your password.');
+            } else {
+                setErrorMessage('Invalid code. Please try again.');
+            }
+        }, 1200);
+    };
+
+    return (
+        <KeyboardAvoidingView
+            style={[styles.container, { backgroundColor: colors.background }]}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+            <StatusBar
+                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
+                backgroundColor={colors.background}
+            />
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+            >
+                <Animated.View style={[
+                    styles.stepContainer,
+                    { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }
+                ]}>
+                    <HighFive width={100} height={100} />
+                    <View style={styles.modernHeader}>
+                        <Text style={[styles.modernTitle, { color: colors.text }]}>Recover Account</Text>
+                        <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>Enter your email or username to receive a 6-digit code.</Text>
+                    </View>
+                    {step === 'request' && (
+                        <>
+                            <TextField
+                                ref={identifierRef}
+                                label="Email or Username"
+                                icon="mail-outline"
+                                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'),
+                                        icon: 'arrow-back',
+                                        variant: 'transparent',
+                                    },
+                                    {
+                                        text: 'Send Code',
+                                        onPress: handleRequest,
+                                        icon: 'mail-open-outline',
+                                        variant: 'primary',
+                                        loading: isLoading,
+                                        disabled: isLoading,
+                                    },
+                                ]}
+                                colors={colors}
+                            />
+                        </>
+                    )}
+                    {step === 'code' && (
+                        <>
+                            <PinInput
+                                value={code}
+                                onChange={setCode}
+                                length={PIN_LENGTH}
+                                disabled={isLoading}
+                                autoFocus
+                                colors={colors}
+                            />
+                            {successMessage && (
+                                <View style={styles.belowInputMessage}>
+                                    <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                    <Text style={[styles.belowInputText, { color: colors.success }]}>{successMessage}</Text>
+                                </View>
+                            )}
+                            {errorMessage ? (
+                                <Text style={[styles.successText, { color: colors.error, marginBottom: 12 }]}>{errorMessage}</Text>
+                            ) : null}
+                            <GroupedPillButtons
+                                buttons={[
+                                    {
+                                        text: 'Back',
+                                        onPress: () => setStep('request'),
+                                        icon: 'arrow-back',
+                                        variant: 'transparent',
+                                    },
+                                    {
+                                        text: 'Verify Code',
+                                        onPress: handleVerifyCode,
+                                        icon: 'checkmark-circle-outline',
+                                        variant: 'primary',
+                                        loading: isLoading,
+                                        disabled: isLoading,
+                                    },
+                                ]}
+                                colors={colors}
+                            />
+                        </>
+                    )}
+                    {step === 'done' && (
+                        <>
+                            <Text style={[styles.successText, { color: colors.success, marginBottom: 24 }]}>{successMessage}</Text>
+                            <GroupedPillButtons
+                                buttons={[
+                                    {
+                                        text: 'Back to Sign In',
+                                        onPress: () => navigate('SignIn'),
+                                        icon: 'arrow-back',
+                                        variant: 'primary',
+                                    },
+                                ]}
+                                colors={colors}
+                            />
+                        </>
+                    )}
+                </Animated.View>
+            </ScrollView>
+        </KeyboardAvoidingView>
+    );
+};
+
+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,19 +15,8 @@ import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
-
-interface Session {
-    id: string;
-    deviceName?: string;
-    deviceType: string;
-    platform: string;
-    browser?: string;
-    ipAddress?: string;
-    userAgent?: string;
-    lastActivity: string;
-    createdAt: string;
-    isCurrent: boolean;
-}
+import { SecureClientSession } from '../../models/secureSession';
+import { confirmAction } from '../utils/confirmAction';
 
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -58,11 +47,15 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             await refreshSessions();
         } catch (error) {
             console.error('Failed to load sessions:', error);
-            Alert.alert(
-                'Error',
-                'Failed to load sessions. Please try again.',
-                [{ text: 'OK' }]
-            );
+            if (Platform.OS === 'web') {
+                toast.error('Failed to load sessions. Please try again.');
+            } else {
+                Alert.alert(
+                    'Error',
+                    'Failed to load sessions. Please try again.',
+                    [{ text: 'OK' }]
+                );
+            }
         } finally {
             setLoading(false);
             setRefreshing(false);
@@ -70,99 +63,62 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleLogoutSession = async (sessionId: string) => {
-        Alert.alert(
-            'Logout Session',
-            'Are you sure you want to logout this session?',
-            [
-                { text: 'Cancel', style: 'cancel' },
-                {
-                    text: 'Logout',
-                    style: 'destructive',
-                    onPress: async () => {
-                        try {
-                            setActionLoading(sessionId);
-                            await logout(sessionId);
-                            
-                            // Refresh sessions to update the list
-                            await refreshSessions();
-                            
-                            toast.success('Session logged out successfully');
-                        } catch (error) {
-                            console.error('Logout session failed:', error);
-                            toast.error('Failed to logout session. Please try again.');
-                        } finally {
-                            setActionLoading(null);
-                        }
-                    },
-                },
-            ]
-        );
+        confirmAction('Are you sure you want to logout this session?', async () => {
+            try {
+                setActionLoading(sessionId);
+                await logout(sessionId);
+                await refreshSessions();
+                toast.success('Session logged out successfully');
+            } catch (error) {
+                console.error('Logout session failed:', error);
+                toast.error('Failed to logout session. Please try again.');
+            } finally {
+                setActionLoading(null);
+            }
+        });
     };
 
     const handleLogoutOtherSessions = async () => {
         const otherSessionsCount = userSessions.filter(s => s.sessionId !== activeSessionId).length;
-        
         if (otherSessionsCount === 0) {
             toast.info('No other sessions to logout.');
             return;
         }
-
-        Alert.alert(
-            'Logout Other Sessions',
+        confirmAction(
             `This will logout ${otherSessionsCount} other session${otherSessionsCount > 1 ? 's' : ''}. Continue?`,
-            [
-                { text: 'Cancel', style: 'cancel' },
-                {
-                    text: 'Logout Others',
-                    style: 'destructive',
-                    onPress: async () => {
-                        try {
-                            setActionLoading('others');
-                            // Logout each non-active session
-                            for (const session of userSessions) {
-                                if (session.sessionId !== activeSessionId) {
-                                    await logout(session.sessionId);
-                                }
-                            }
-                            
-                            // Refresh sessions to update the list
-                            await refreshSessions();
-                            
-                            toast.success('Other sessions logged out successfully');
-                        } catch (error) {
-                            console.error('Logout other sessions failed:', error);
-                            toast.error('Failed to logout other sessions. Please try again.');
-                        } finally {
-                            setActionLoading(null);
+            async () => {
+                try {
+                    setActionLoading('others');
+                    for (const session of userSessions) {
+                        if (session.sessionId !== activeSessionId) {
+                            await logout(session.sessionId);
                         }
-                    },
-                },
-            ]
+                    }
+                    await refreshSessions();
+                    toast.success('Other sessions logged out successfully');
+                } catch (error) {
+                    console.error('Logout other sessions failed:', error);
+                    toast.error('Failed to logout other sessions. Please try again.');
+                } finally {
+                    setActionLoading(null);
+                }
+            }
         );
     };
 
     const handleLogoutAllSessions = async () => {
-        Alert.alert(
-            'Logout All Sessions',
+        confirmAction(
             'This will logout all sessions including this one and you will need to sign in again. Continue?',
-            [
-                { text: 'Cancel', style: 'cancel' },
-                {
-                    text: 'Logout All',
-                    style: 'destructive',
-                    onPress: async () => {
-                        try {
-                            setActionLoading('all');
-                            await oxyServices.logoutAllSessions();
-                            // No need to update local state as user will be logged out
-                        } catch (error) {
-                            console.error('Logout all sessions failed:', error);
-                            toast.error('Failed to logout all sessions. Please try again.');
-                            setActionLoading(null);
-                        }
-                    },
-                },
-            ]
+            async () => {
+                try {
+                    setActionLoading('all');
+                    await oxyServices.logoutAllSessions();
+                } catch (error) {
+                    console.error('Logout all sessions failed:', error);
+                    toast.error('Failed to logout all sessions. Please try again.');
+                    setActionLoading(null);
+                }
+            }
         );
     };
 
@@ -175,7 +131,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
         if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
         if (diffInMinutes < 10080) return `${Math.floor(diffInMinutes / 1440)}d ago`;
-        
+
         return date.toLocaleDateString();
     };
 
@@ -212,11 +168,8 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
         <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>
+                <Text style={[styles.subtitle, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Manage your active sessions across all devices</Text>
             </View>
-
             <ScrollView
                 style={styles.scrollView}
                 contentContainerStyle={styles.scrollContainer}
@@ -230,7 +183,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             >
                 {userSessions.length > 0 ? (
                     <>
-                        {userSessions.map((session) => (
+                        {userSessions.map((session: SecureClientSession) => (
                             <View
                                 key={session.sessionId}
                                 style={[
@@ -244,34 +197,20 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                             >
                                 <View style={styles.sessionHeader}>
                                     <View style={styles.sessionTitleRow}>
-                                        <Text style={styles.deviceIcon}>
-                                            📱
-                                        </Text>
+                                        <Text style={styles.deviceIcon}>💻</Text>
                                         <View style={styles.sessionTitleText}>
-                                            <Text style={[styles.deviceName, { color: textColor }]}>
-                                                Session {session.sessionId.substring(0, 8)}...
-                                            </Text>
+                                            <Text style={[styles.deviceName, { color: textColor }]}>Session {session.sessionId.substring(0, 8)}...</Text>
                                             {session.sessionId === activeSessionId && (
-                                                <Text style={[styles.currentBadge, { color: successColor }]}>
-                                                    Current Session
-                                                </Text>
+                                                <Text style={[styles.currentBadge, { color: successColor }]}>Current Session</Text>
                                             )}
                                         </View>
                                     </View>
                                 </View>
-
                                 <View style={styles.sessionDetails}>
-                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                        Device ID: {session.deviceId.substring(0, 12)}...
-                                    </Text>
-                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                        Last active: {new Date(session.lastActive).toLocaleDateString()}
-                                    </Text>
-                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                                        Expires: {new Date(session.expiresAt).toLocaleDateString()}
-                                    </Text>
+                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Device ID: {session.deviceId ? session.deviceId.substring(0, 12) + '...' : 'Unknown'}</Text>
+                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Last active: {session.lastActive ? new Date(session.lastActive).toLocaleDateString() : 'Unknown'}</Text>
+                                    <Text style={[styles.sessionDetail, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>Expires: {session.expiresAt ? new Date(session.expiresAt).toLocaleDateString() : 'Unknown'}</Text>
                                 </View>
-
                                 {session.sessionId !== activeSessionId && (
                                     <TouchableOpacity
                                         style={[styles.logoutButton, { backgroundColor: isDarkTheme ? '#400000' : '#FFEBEE' }]}
@@ -281,15 +220,12 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                                         {actionLoading === session.sessionId ? (
                                             <ActivityIndicator size="small" color={dangerColor} />
                                         ) : (
-                                            <Text style={[styles.logoutButtonText, { color: dangerColor }]}>
-                                                Logout
-                                            </Text>
+                                            <Text style={[styles.logoutButtonText, { color: dangerColor }]}>Logout</Text>
                                         )}
                                     </TouchableOpacity>
                                 )}
                             </View>
                         ))}
-
                         <View style={styles.bulkActions}>
                             <TouchableOpacity
                                 style={[styles.bulkActionButton, { backgroundColor: isDarkTheme ? '#1A1A1A' : '#F0F0F0', borderColor }]}
@@ -299,12 +235,9 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                                 {actionLoading === 'others' ? (
                                     <ActivityIndicator size="small" color={primaryColor} />
                                 ) : (
-                                    <Text style={[styles.bulkActionButtonText, { color: textColor }]}>
-                                        Logout Other Sessions
-                                    </Text>
+                                    <Text style={[styles.bulkActionButtonText, { color: textColor }]}>Logout Other Sessions</Text>
                                 )}
                             </TouchableOpacity>
-
                             <TouchableOpacity
                                 style={[styles.bulkActionButton, styles.dangerButton, { backgroundColor: isDarkTheme ? '#400000' : '#FFEBEE' }]}
                                 onPress={handleLogoutAllSessions}
@@ -313,22 +246,17 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                                 {actionLoading === 'all' ? (
                                     <ActivityIndicator size="small" color={dangerColor} />
                                 ) : (
-                                    <Text style={[styles.bulkActionButtonText, { color: dangerColor }]}>
-                                        Logout All Sessions
-                                    </Text>
+                                    <Text style={[styles.bulkActionButtonText, { color: dangerColor }]}>Logout All Sessions</Text>
                                 )}
                             </TouchableOpacity>
                         </View>
                     </>
                 ) : (
                     <View style={styles.emptyState}>
-                        <Text style={[styles.emptyStateText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            No active sessions found
-                        </Text>
+                        <Text style={[styles.emptyStateText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>No active sessions found</Text>
                     </View>
                 )}
             </ScrollView>
-
             <View style={[styles.footer, { borderTopColor: borderColor }]}>
                 <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                     <Text style={[styles.closeButtonText, { color: primaryColor }]}>Close</Text>