@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/steps/RecoverRequestStep.tsx

@@ -1,143 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { useRef } from 'react';
-import { View, Text } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import HighFive from '../../../assets/illustrations/HighFive';
-import TextField from '../../components/internal/TextField';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import { toast } from '../../../lib/sonner';
-import type { OxyServices } from '../../../core';
-import { useI18n } from '../../hooks/useI18n';
-import { stepStyles } from '../../styles/spacing';
-
-interface RecoverRequestStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, props?: Record<string, any>) => void;
-
-    // Step navigation
-    nextStep: () => void;
-    currentStep: number;
-    totalSteps: number;
-
-    // Data management
-    stepData?: any;
-    updateStepData: (data: any) => void;
-
-    // Form state
-    identifier: string;
-    setIdentifier: (identifier: string) => void;
-    errorMessage: string;
-    setErrorMessage: (message: string) => void;
-    isLoading: boolean;
-    setIsLoading: (loading: boolean) => void;
-    oxyServices?: OxyServices;
-}
-
-const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
-    colors,
-    styles,
-    navigate,
-    nextStep,
-    identifier,
-    setIdentifier,
-    errorMessage,
-    setErrorMessage,
-    isLoading,
-    setIsLoading,
-    oxyServices,
-}) => {
-    const inputRef = useRef<any>(null);
-    const { t } = useI18n();
-    const baseStyles = stepStyles;
-
-    const handleIdentifierChange = (text: string) => {
-        setIdentifier(text);
-        if (errorMessage) setErrorMessage('');
-    };
-
-    const handleRequest = async () => {
-        if (!identifier || identifier.length < 3) {
-            setErrorMessage(t('recover.username.errorRequired') || 'Please enter your username.');
-            setTimeout(() => inputRef.current?.focus(), 0);
-            return;
-        }
-
-        setErrorMessage('');
-        setIsLoading(true);
-
-        try {
-            toast.info(t('recover.noEmail'));
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleRequestWithFocus = () => {
-        if (!identifier) {
-            setTimeout(() => inputRef.current?.focus(), 0);
-        }
-        handleRequest();
-    };
-
-    return (
-        <>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, { alignItems: 'flex-start' }]}>
-                <HighFive width={100} height={100} />
-            </View>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.noEmail')}</Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
-                <TextField
-                    ref={inputRef}
-                    label={t('recover.username.label')}
-                    leading={<Ionicons name="mail-outline" size={24} color={colors.secondaryText} />}
-                    value={identifier}
-                    onChangeText={handleIdentifierChange}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    testID="recover-identifier-input"
-                    variant="filled"
-                    error={errorMessage || undefined}
-                    helperText={t('recover.username.helper') || 'Enter your username or email'}
-                    editable={!isLoading}
-                    onSubmitEditing={handleRequestWithFocus}
-                    autoFocus
-                    accessibilityLabel={t('recover.username.label')}
-                    accessibilityHint={t('recover.username.helper') || 'Enter your username or email to recover your account'}
-                    style={{ marginBottom: 0 }}
-                />
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.back'),
-                            onPress: () => navigate('SignIn'),
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: t('common.actions.continue'),
-                            onPress: handleRequest,
-                            icon: 'information-circle-outline',
-                            variant: 'primary',
-                            loading: isLoading,
-                            disabled: isLoading || !identifier || identifier.length < 3,
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </View>
-        </>
-    );
-};
-
-export default RecoverRequestStep;

package/src/ui/screens/steps/RecoverResetPasswordStep.tsx

@@ -1,162 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { View, Text, StyleSheet, Platform } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import TextField from '../../components/internal/TextField';
-import { useI18n } from '../../hooks/useI18n';
-import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
-
-interface RecoverResetPasswordStepProps {
-  // Common props
-  colors: any;
-  styles: any;
-  theme: string;
-  navigate: (screen: RouteName, props?: Record<string, any>) => void;
-
-  // Navigation
-  nextStep: () => void;
-  prevStep: () => void;
-
-  // From previous steps
-  identifier: string;
-  verificationCode: string;
-
-  // Local state
-  password: string;
-  confirmPassword: string;
-  setPassword: (s: string) => void;
-  setConfirmPassword: (s: string) => void;
-  errorMessage: string;
-  setErrorMessage: (s: string) => void;
-  isLoading: boolean;
-  setIsLoading: (b: boolean) => void;
-
-  // Services
-  oxyServices: any;
-}
-
-const RecoverResetPasswordStep: React.FC<RecoverResetPasswordStepProps> = ({
-  colors,
-  styles,
-  nextStep,
-  prevStep,
-  identifier,
-  verificationCode,
-  password,
-  confirmPassword,
-  setPassword,
-  setConfirmPassword,
-  errorMessage,
-  setErrorMessage,
-  isLoading,
-  setIsLoading,
-  oxyServices,
-}) => {
-  const { t } = useI18n();
-  const baseStyles = stepStyles;
-  const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
-  const handleReset = async () => {
-    if (!password || password.length < 8) {
-      setErrorMessage(t('recover.password.minLength') || 'Password must be at least 8 characters long');
-      return;
-    }
-    if (password !== confirmPassword) {
-      setErrorMessage(t('recover.password.mismatch') || 'Passwords do not match');
-      return;
-    }
-    setErrorMessage('');
-    setIsLoading(true);
-    try {
-      const code = verificationCode?.trim();
-      if (!code) throw new Error(t('recover.missingCode') || 'Missing code');
-
-      // Heuristic: recovery key starts with 'oxy-' or longer strings, backup codes have dashes of short format, else assume TOTP
-      if (code.toLowerCase().startsWith('oxy-') || code.length >= 16) {
-        await oxyServices.resetPasswordWithRecoveryKey(identifier, code, password);
-      } else if (/[A-Za-z0-9]+-[A-Za-z0-9]+/.test(code)) {
-        await oxyServices.resetPasswordWithBackupCode(identifier, code, password);
-      } else {
-        await oxyServices.resetPasswordWithTotp(identifier, code, password);
-      }
-      nextStep();
-    } catch (e: any) {
-      setErrorMessage(e?.message || t('recover.password.resetFailed') || 'Failed to reset password');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-        <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.newPassword')}</Text>
-        <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')} @{identifier}</Text>
-      </View>
-
-      <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
-        <View style={[stylesheet.formCard, { backgroundColor: colors.inputBackground || colors.card || 'rgba(0,0,0,0.04)' }, webShadowReset]}>
-          <TextField
-            label={t('common.labels.password')}
-            leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-            value={password}
-            onChangeText={setPassword}
-            secureTextEntry
-            autoCapitalize="none"
-            autoCorrect={false}
-            variant="filled"
-            error={errorMessage || undefined}
-            onSubmitEditing={handleReset}
-            autoFocus
-            style={{ marginBottom: 0 }}
-          />
-
-          <TextField
-            label={t('common.labels.confirmPassword')}
-            leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-            value={confirmPassword}
-            onChangeText={setConfirmPassword}
-            secureTextEntry
-            autoCapitalize="none"
-            autoCorrect={false}
-            variant="filled"
-            onSubmitEditing={handleReset}
-            style={{ marginBottom: 0 }}
-          />
-        </View>
-      </View>
-
-      <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-        <GroupedPillButtons
-          buttons={[
-            { text: t('common.actions.back'), onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-            { 
-              text: t('common.actions.resetPassword'), 
-              onPress: handleReset, 
-              icon: 'key-outline', 
-              variant: 'primary', 
-              loading: isLoading, 
-              disabled: isLoading || !password || password.length < 8 || password !== confirmPassword 
-            },
-          ]}
-          colors={colors}
-        />
-      </View>
-    </>
-  );
-};
-
-export default RecoverResetPasswordStep;
-
-const stylesheet = StyleSheet.create({
-  formCard: {
-    width: '100%',
-    maxWidth: 420,
-    borderRadius: 28,
-    paddingHorizontal: 20,
-    paddingVertical: 18,
-    gap: STEP_INNER_GAP,
-    alignItems: 'stretch',
-    shadowColor: 'transparent',
-  },
-});

package/src/ui/screens/steps/RecoverSuccessStep.tsx

@@ -1,148 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { View, Text, StyleSheet } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import { useI18n } from '../../hooks/useI18n';
-import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
-
-interface RecoverSuccessStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, props?: Record<string, any>) => void;
-
-    // Step navigation
-    nextStep: () => void;
-    prevStep: () => void;
-    currentStep: number;
-    totalSteps: number;
-
-    // Data management
-    stepData?: any;
-    updateStepData: (data: any) => void;
-    allStepData: any[];
-
-    // Form state
-    successMessage: string;
-}
-
-const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
-    colors,
-    styles,
-    navigate,
-    allStepData,
-    successMessage,
-}) => {
-    const { t } = useI18n();
-    const baseStyles = stepStyles;
-    // Extract identifier from previous steps
-    const requestData = allStepData[0] || {};
-    const { identifier } = requestData;
-
-    const handleContinueToReset = () => {
-        // Navigate back to SignIn and let host app open its reset flow
-        navigate('SignIn', { showReset: true, identifier });
-    };
-
-    const handleBackToSignIn = () => {
-        navigate('SignIn');
-    };
-
-    return (
-        <>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.iconContainer]}>
-                <View style={[stylesheet.successIcon, { backgroundColor: colors.success + '20' }]}>
-                    <Ionicons name="checkmark-circle" size={40} color={colors.success} />
-                </View>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{successMessage || t('recover.resetSuccess')}</Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
-                <View style={[stylesheet.infoCard, {
-                    backgroundColor: colors.inputBackground,
-                    borderColor: colors.border,
-                }]}>
-                    <Text style={[styles.footerText, stylesheet.infoTitle, { color: colors.text }]}>
-                        {t('recover.whatsNextTitle') || "What's next?"}
-                    </Text>
-                    <Text style={[styles.footerText, stylesheet.infoBody, { color: colors.secondaryText }]}>
-                        {t('recover.whatsNextBody') || 'You can now reset your password or return to sign in with your existing credentials.'}
-                    </Text>
-                </View>
-
-                <View style={[stylesheet.successBanner, {
-                    backgroundColor: colors.success + '10',
-                    borderColor: colors.success + '30',
-                }]}>
-                    <Ionicons name="shield-checkmark" size={20} color={colors.success} />
-                    <Text style={[styles.footerText, stylesheet.bannerText, { color: colors.success }]}>
-                        {successMessage || t('recover.completeSecure') || 'Your account recovery is complete and secure.'}
-                    </Text>
-                </View>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.signIn'),
-                            onPress: handleBackToSignIn,
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </View>
-        </>
-    );
-};
-
-export default RecoverSuccessStep;
-
-const stylesheet = StyleSheet.create({
-    iconContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    successIcon: {
-        width: 80,
-        height: 80,
-        borderRadius: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    infoCard: {
-        padding: STEP_INNER_GAP * 2,
-        borderRadius: 16,
-        borderWidth: 1,
-        marginBottom: STEP_INNER_GAP,
-        gap: STEP_INNER_GAP,
-    },
-    infoTitle: {
-        fontSize: 16,
-        marginBottom: 0,
-    },
-    infoBody: {
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    successBanner: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: STEP_INNER_GAP,
-        borderRadius: 8,
-        borderWidth: 1,
-        gap: STEP_INNER_GAP,
-    },
-    bannerText: {
-        flex: 1,
-        fontSize: 14,
-    },
-});

package/src/ui/screens/steps/RecoverVerifyStep.tsx

@@ -1,154 +0,0 @@
-import type React from 'react';
-import type { RouteName } from '../../navigation/routes';
-import { View, Text, StyleSheet } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
-import PinInput from '../../components/internal/PinInput';
-import { toast } from '../../../lib/sonner';
-import { useI18n } from '../../hooks/useI18n';
-import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
-
-interface RecoverVerifyStepProps {
-    // Common props from StepBasedScreen
-    colors: any;
-    styles: any;
-    theme: string;
-    navigate: (screen: RouteName, props?: Record<string, any>) => void;
-
-    // Step navigation
-    nextStep: () => void;
-    prevStep: () => void;
-    currentStep: number;
-    totalSteps: number;
-
-    // Data management
-    stepData?: any;
-    updateStepData: (data: any) => void;
-
-    // Form state
-    verificationCode: string;
-    setVerificationCode: (code: string) => void;
-    errorMessage: string;
-    setErrorMessage: (message: string) => void;
-    successMessage: string;
-    setSuccessMessage: (message: string) => void;
-    isLoading: boolean;
-    setIsLoading: (loading: boolean) => void;
-    identifier?: string;
-}
-
-const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
-    colors,
-    styles,
-    nextStep,
-    prevStep,
-    verificationCode,
-    setVerificationCode,
-    errorMessage,
-    setErrorMessage,
-    successMessage,
-    setSuccessMessage,
-    isLoading,
-    setIsLoading,
-    identifier,
-}) => {
-    const { t } = useI18n();
-    const baseStyles = stepStyles;
-    const handleVerifyCode = async () => {
-        setErrorMessage('');
-        setSuccessMessage('');
-
-        if (verificationCode.length !== 6) {
-            setErrorMessage(t('recover.enterCode'));
-            return;
-        }
-        // For recovery via TOTP, proceed to reset step; server will validate during reset
-        nextStep();
-    };
-
-    return (
-        <>
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
-                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.verify.title')}</Text>
-                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.enterCode')}</Text>
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
-                <View style={stylesheet.pinInputWrapper}>
-                    <PinInput
-                        value={verificationCode}
-                        onChange={setVerificationCode}
-                        length={6}
-                        disabled={isLoading}
-                        autoFocus
-                        colors={colors}
-                    />
-                </View>
-
-                {successMessage && (
-                    <View style={[stylesheet.messageContainer, {
-                        backgroundColor: colors.success + '10',
-                        borderColor: colors.success + '30',
-                    }]}>
-                        <Ionicons name="checkmark-circle" size={20} color={colors.success} />
-                        <Text style={[styles.footerText, { color: colors.success, fontSize: 14 }]}>
-                            {successMessage}
-                        </Text>
-                    </View>
-                )}
-
-                {errorMessage && (
-                    <View style={[stylesheet.messageContainer, {
-                        backgroundColor: colors.error + '10',
-                        borderColor: colors.error + '30',
-                    }]}>
-                        <Ionicons name="alert-circle" size={20} color={colors.error} />
-                        <Text style={[styles.footerText, { color: colors.error, fontSize: 14 }]}>
-                            {errorMessage}
-                        </Text>
-                    </View>
-                )}
-            </View>
-
-            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('common.actions.back'),
-                            onPress: prevStep,
-                            icon: 'arrow-back',
-                            variant: 'transparent',
-                        },
-                        {
-                            text: t('recover.verify.action'),
-                            onPress: handleVerifyCode,
-                            icon: 'checkmark-circle-outline',
-                            variant: 'primary',
-                            loading: isLoading,
-                            disabled: isLoading || verificationCode.length !== 6,
-                        },
-                    ]}
-                    colors={colors}
-                />
-            </View>
-        </>
-    );
-};
-
-export default RecoverVerifyStep;
-
-const stylesheet = StyleSheet.create({
-    pinInputWrapper: {
-        marginBottom: 0,
-        marginTop: 0,
-    },
-    messageContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginTop: STEP_INNER_GAP,
-        padding: STEP_INNER_GAP,
-        borderRadius: 8,
-        borderWidth: 1,
-        gap: STEP_INNER_GAP,
-    },
-});