@oxyhq/services 5.18.2 → 5.18.4

package/src/ui/components/profile/EditFieldModal.tsx

@@ -0,0 +1,465 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+    ScrollView,
+    TextInputProps,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+/**
+ * Field configuration for single/multi field variants
+ */
+export interface FieldConfig {
+    /** Unique key for the field */
+    key: string;
+    /** Label displayed above the input */
+    label: string;
+    /** Initial value for the field */
+    initialValue: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Validation function - returns error message or undefined */
+    validation?: (value: string) => string | undefined;
+    /** Additional TextInput props (multiline, keyboardType, etc.) */
+    inputProps?: Partial<TextInputProps>;
+}
+
+/**
+ * List item for list variant
+ */
+export interface ListItem {
+    id: string;
+    [key: string]: unknown;
+}
+
+/**
+ * Configuration for list variant
+ */
+export interface ListConfig<T extends ListItem> {
+    /** Initial items */
+    items: T[];
+    /** Render function for each item */
+    renderItem: (item: T, onRemove: () => void, colors: Record<string, string>) => React.ReactNode;
+    /** Placeholder for add input */
+    addItemPlaceholder: string;
+    /** Label for add input section */
+    addItemLabel?: string;
+    /** Function to create a new item from input value */
+    createItem: (value: string) => T;
+    /** List title shown above items */
+    listTitle?: string;
+}
+
+/**
+ * Props for EditFieldModal
+ */
+export interface EditFieldModalProps<T extends ListItem = ListItem> {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Modal title */
+    title: string;
+    /** Theme override */
+    theme?: 'light' | 'dark';
+    /** Called after successful save */
+    onSave?: () => void;
+
+    /** Modal variant: single input, multiple inputs, or list management */
+    variant: 'single' | 'multi' | 'list';
+
+    /** Field configuration for single/multi variants */
+    fields?: FieldConfig[];
+
+    /** List configuration for list variant */
+    listConfig?: ListConfig<T>;
+
+    /** Custom submit handler - receives field values or list items */
+    onSubmit: (data: Record<string, unknown>) => Promise<boolean>;
+
+    /** Whether save button should be disabled */
+    saveDisabled?: boolean;
+}
+
+/**
+ * Generic modal component for editing profile fields.
+ *
+ * Supports three variants:
+ * - single: Single text input (username, email, bio)
+ * - multi: Multiple text inputs (display name with first/last)
+ * - list: Add/remove list items (links, locations)
+ *
+ * @example
+ * // Single field (bio)
+ * <EditFieldModal
+ *     visible={showBioModal}
+ *     onClose={() => setShowBioModal(false)}
+ *     title="Bio"
+ *     variant="single"
+ *     fields={[{
+ *         key: 'bio',
+ *         label: 'Bio',
+ *         initialValue: user.bio,
+ *         placeholder: 'Tell people about yourself...',
+ *         inputProps: { multiline: true, numberOfLines: 6 }
+ *     }]}
+ *     onSubmit={async (data) => updateField('bio', data.bio)}
+ * />
+ *
+ * @example
+ * // Multi field (display name)
+ * <EditFieldModal
+ *     visible={showNameModal}
+ *     onClose={() => setShowNameModal(false)}
+ *     title="Display Name"
+ *     variant="multi"
+ *     fields={[
+ *         { key: 'firstName', label: 'First Name', initialValue: user.name?.first },
+ *         { key: 'lastName', label: 'Last Name', initialValue: user.name?.last }
+ *     ]}
+ *     onSubmit={async (data) => saveProfile({ displayName: data.firstName, lastName: data.lastName })}
+ * />
+ */
+export function EditFieldModal<T extends ListItem = ListItem>({
+    visible,
+    onClose,
+    title,
+    theme = 'light',
+    onSave,
+    variant,
+    fields = [],
+    listConfig,
+    onSubmit,
+    saveDisabled = false,
+}: EditFieldModalProps<T>): React.ReactElement {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { isSaving } = useProfileEditing();
+
+    // State for field values (single/multi variants)
+    const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
+    const [fieldErrors, setFieldErrors] = useState<Record<string, string | undefined>>({});
+
+    // State for list items (list variant)
+    const [listItems, setListItems] = useState<T[]>([]);
+    const [newItemValue, setNewItemValue] = useState('');
+
+    // Initialize field values when modal opens
+    useEffect(() => {
+        if (visible) {
+            if (variant === 'list' && listConfig) {
+                setListItems(listConfig.items);
+                setNewItemValue('');
+            } else if (fields.length > 0) {
+                const initialValues: Record<string, string> = {};
+                fields.forEach(field => {
+                    initialValues[field.key] = field.initialValue || '';
+                });
+                setFieldValues(initialValues);
+                setFieldErrors({});
+            }
+        }
+    }, [visible, variant, fields, listConfig]);
+
+    // Field change handler with validation
+    const handleFieldChange = useCallback((key: string, value: string) => {
+        setFieldValues(prev => ({ ...prev, [key]: value }));
+
+        // Clear error on change
+        if (fieldErrors[key]) {
+            setFieldErrors(prev => ({ ...prev, [key]: undefined }));
+        }
+    }, [fieldErrors]);
+
+    // Validate all fields
+    const validateFields = useCallback((): boolean => {
+        const errors: Record<string, string | undefined> = {};
+        let isValid = true;
+
+        fields.forEach(field => {
+            if (field.validation) {
+                const error = field.validation(fieldValues[field.key] || '');
+                if (error) {
+                    errors[field.key] = error;
+                    isValid = false;
+                }
+            }
+        });
+
+        setFieldErrors(errors);
+        return isValid;
+    }, [fields, fieldValues]);
+
+    // Add item to list
+    const handleAddItem = useCallback(() => {
+        if (!newItemValue.trim() || !listConfig) return;
+
+        const newItem = listConfig.createItem(newItemValue.trim());
+        setListItems(prev => [...prev, newItem]);
+        setNewItemValue('');
+    }, [newItemValue, listConfig]);
+
+    // Remove item from list
+    const handleRemoveItem = useCallback((id: string) => {
+        setListItems(prev => prev.filter(item => item.id !== id));
+    }, []);
+
+    // Save handler
+    const handleSave = async () => {
+        if (variant === 'list') {
+            const success = await onSubmit({ items: listItems });
+            if (success) {
+                onSave?.();
+                onClose();
+            }
+        } else {
+            if (!validateFields()) return;
+
+            const success = await onSubmit(fieldValues);
+            if (success) {
+                onSave?.();
+                onClose();
+            }
+        }
+    };
+
+    // Render field inputs for single/multi variants
+    const renderFields = () => (
+        <View style={styles.modalBody}>
+            {fields.map((field, index) => (
+                <View key={field.key} style={styles.inputGroup}>
+                    <Text style={[styles.label, { color: colors.text }]}>
+                        {field.label}
+                    </Text>
+                    <TextInput
+                        style={[
+                            field.inputProps?.multiline ? styles.textArea : styles.input,
+                            {
+                                backgroundColor: colors.card,
+                                color: colors.text,
+                                borderColor: fieldErrors[field.key] ? '#FF3B30' : colors.border,
+                            },
+                        ]}
+                        value={fieldValues[field.key] || ''}
+                        onChangeText={(value) => handleFieldChange(field.key, value)}
+                        placeholder={field.placeholder}
+                        placeholderTextColor={colors.secondaryText}
+                        autoFocus={index === 0}
+                        selectionColor={colors.tint}
+                        textAlignVertical={field.inputProps?.multiline ? 'top' : 'center'}
+                        {...field.inputProps}
+                    />
+                    {fieldErrors[field.key] && (
+                        <Text style={styles.errorText}>{fieldErrors[field.key]}</Text>
+                    )}
+                </View>
+            ))}
+        </View>
+    );
+
+    // Render list for list variant
+    const renderList = () => {
+        if (!listConfig) return null;
+
+        return (
+            <ScrollView style={styles.modalBody}>
+                <View style={styles.inputGroup}>
+                    <Text style={[styles.label, { color: colors.text }]}>
+                        {listConfig.addItemLabel || t('common.add') || 'Add'}
+                    </Text>
+                    <View style={styles.addItemRow}>
+                        <TextInput
+                            style={[
+                                styles.input,
+                                {
+                                    backgroundColor: colors.card,
+                                    color: colors.text,
+                                    borderColor: colors.border,
+                                    flex: 1,
+                                },
+                            ]}
+                            value={newItemValue}
+                            onChangeText={setNewItemValue}
+                            placeholder={listConfig.addItemPlaceholder}
+                            placeholderTextColor={colors.secondaryText}
+                            selectionColor={colors.tint}
+                            autoCapitalize="none"
+                            autoCorrect={false}
+                        />
+                        <TouchableOpacity
+                            style={[styles.addButton, { backgroundColor: colors.tint }]}
+                            onPress={handleAddItem}
+                            disabled={!newItemValue.trim()}
+                        >
+                            <Ionicons name="add" size={20} color="#fff" />
+                        </TouchableOpacity>
+                    </View>
+                </View>
+
+                {listItems.length > 0 && (
+                    <View style={styles.listSection}>
+                        {listConfig.listTitle && (
+                            <Text style={[styles.listTitle, { color: colors.text }]}>
+                                {listConfig.listTitle} ({listItems.length})
+                            </Text>
+                        )}
+                        {listItems.map((item) => (
+                            <View key={item.id}>
+                                {listConfig.renderItem(
+                                    item,
+                                    () => handleRemoveItem(item.id),
+                                    colors
+                                )}
+                            </View>
+                        ))}
+                    </View>
+                )}
+            </ScrollView>
+        );
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {title}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving || saveDisabled}
+                            style={[styles.saveButton, { opacity: (isSaving || saveDisabled) ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? (t('common.saving') || 'Saving...') : (t('common.save') || 'Save')}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    {variant === 'list' ? renderList() : renderFields()}
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+        gap: 16,
+    },
+    inputGroup: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    input: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+    textArea: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 120,
+    },
+    errorText: {
+        fontSize: 12,
+        color: '#FF3B30',
+    },
+    addItemRow: {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    addButton: {
+        width: 52,
+        height: 52,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    listSection: {
+        gap: 8,
+        marginTop: 16,
+    },
+    listTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 8,
+    },
+});
+
+export default EditFieldModal;

package/src/ui/context/OxyContext.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react';
 import { OxyServices } from '../../core';
 import type { User, ApiError } from '../../models/interfaces';
+import { KeyManager } from '../../crypto/keyManager';
 import type { ClientSession } from '../../models/session';
 import { toast } from '../../lib/sonner';
 import { useAuthStore, type AuthState } from '../stores/authStore';
@@ -31,6 +32,7 @@ import { translate } from '../../i18n';
 import { updateAvatarVisibility, updateProfileWithAvatar } from '../utils/avatarUtils';
 import { useAccountStore } from '../stores/accountStore';
 import { logger as loggerUtil } from '../../utils/loggerUtils';
+import { useWebSSO, isWebBrowser } from '../hooks/useWebSSO';
 
 export interface OxyContextState {
   user: User | null;
@@ -39,12 +41,17 @@ export interface OxyContextState {
   isAuthenticated: boolean;
   isLoading: boolean;
   isTokenReady: boolean;
+  isStorageReady: boolean;
   error: string | null;
   currentLanguage: string;
   currentLanguageMetadata: ReturnType<typeof useLanguageManagement>['metadata'];
   currentLanguageName: string;
   currentNativeLanguageName: string;
 
+  // Identity (cryptographic key pair)
+  hasIdentity: () => Promise<boolean>;
+  getPublicKey: () => Promise<string | null>;
+
   // Authentication
   signIn: (publicKey: string, deviceName?: string) => Promise<User>;
 
@@ -406,6 +413,53 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     void restoreSessionsFromStorage();
   }, [restoreSessionsFromStorage, storage]);
 
+  // Web SSO: Automatically check for cross-domain session on web platforms
+  const handleWebSSOSession = useCallback(async (session: any) => {
+    if (!session?.user || !session?.sessionId) {
+      return;
+    }
+
+    // Update sessions state
+    const clientSession = {
+      sessionId: session.sessionId,
+      deviceId: session.deviceId || '',
+      expiresAt: session.expiresAt || new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+      lastActive: new Date().toISOString(),
+      userId: session.user.id?.toString() ?? '',
+      isCurrent: true,
+    };
+
+    updateSessions([clientSession], { merge: true });
+    setActiveSessionId(session.sessionId);
+    loginSuccess(session.user);
+    onAuthStateChange?.(session.user);
+
+    // Persist to storage
+    if (storage) {
+      await storage.setItem(storageKeys.activeSessionId, session.sessionId);
+      const existingIds = await storage.getItem(storageKeys.sessionIds);
+      const sessionIds = existingIds ? JSON.parse(existingIds) : [];
+      if (!sessionIds.includes(session.sessionId)) {
+        sessionIds.push(session.sessionId);
+        await storage.setItem(storageKeys.sessionIds, JSON.stringify(sessionIds));
+      }
+    }
+  }, [updateSessions, setActiveSessionId, loginSuccess, onAuthStateChange, storage, storageKeys]);
+
+  // Enable web SSO only after local storage check completes and no user found
+  const shouldTryWebSSO = isWebBrowser() && tokenReady && !user && initializedRef.current;
+
+  useWebSSO({
+    oxyServices,
+    onSessionFound: handleWebSSOSession,
+    onError: (error) => {
+      if (__DEV__) {
+        loggerUtil.debug('Web SSO check failed (non-critical)', { component: 'OxyContext' }, error);
+      }
+    },
+    enabled: shouldTryWebSSO,
+  });
+
   const activeSession = activeSessionId
     ? sessions.find((session) => session.sessionId === activeSessionId)
     : undefined;
@@ -449,6 +503,15 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     [switchSession],
   );
 
+  // Identity management wrappers (delegate to KeyManager)
+  const hasIdentity = useCallback(async (): Promise<boolean> => {
+    return KeyManager.hasIdentity();
+  }, []);
+
+  const getPublicKey = useCallback(async (): Promise<string | null> => {
+    return KeyManager.getPublicKey();
+  }, []);
+
   // Create showBottomSheet function that uses the global function
   const showBottomSheetForContext = useCallback(
     (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => {
@@ -499,11 +562,14 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     isAuthenticated,
     isLoading,
     isTokenReady: tokenReady,
+    isStorageReady: storage !== null,
     error,
     currentLanguage,
     currentLanguageMetadata,
     currentLanguageName,
     currentNativeLanguageName,
+    hasIdentity,
+    getPublicKey,
     signIn,
     logout,
     logoutAll,
@@ -529,6 +595,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     currentNativeLanguageName,
     error,
     getDeviceSessions,
+    getPublicKey,
+    hasIdentity,
     isAuthenticated,
     isLoading,
     logout,
@@ -538,6 +606,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     refreshSessionsWithUser,
     sessions,
     setLanguage,
+    storage,
     switchSessionForContext,
     tokenReady,
     updateDeviceName,