合并 verify 和 otp 界面，增加 password 界面

components/OTPBindUI.tsx

@@ -15,6 +15,11 @@ interface OTPBindUIProps {
     title: string;
     otpLength?: number;
     mobileLength?: number;
+    passwordBeforeOtp?: boolean;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    passwordRequiredMsg?: string;
+    resendCooldown?: number;
     onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
     onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
     onSuccess: (result: any) => void;
@@ -29,6 +34,11 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
     title,
     otpLength = 6,
     mobileLength = 10,
+    passwordBeforeOtp = false,
+    passwordLabel = 'Password',
+    passwordPlaceholder = 'Enter password',
+    passwordRequiredMsg = 'Please enter your password',
+    resendCooldown = 20,
     onRequestOTP,
     onVerifyOTP,
     onSuccess,
@@ -40,10 +50,132 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
     const [state, actions] = useOTPBind(
         walletType,
         { onRequestOTP, onVerifyOTP, onSuccess, onError, isDebug },
-        { otpLength, mobileLength, additionalParams, initialMobile }
+        { otpLength, mobileLength, additionalParams, initialMobile, passwordBeforeOtp, passwordRequiredMsg, resendCooldown }
     );
 
     const isLoading = state.loading || state.step === 'processing';
+
+    const renderResendOtp = () => {
+        if (!state.otpSent) return null;
+        const disabled = isLoading || state.resendCountdown > 0;
+        return (
+            <TouchableOpacity
+                style={styles.linkBtn}
+                onPress={actions.requestOTP}
+                disabled={disabled}
+            >
+                <Text style={[styles.linkText, disabled && styles.linkTextDisabled]}>
+                    {state.resendCountdown > 0
+                        ? `Resend in ${state.resendCountdown}s`
+                        : 'Resend OTP'}
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    if (passwordBeforeOtp) {
+        return (
+            <View style={styles.overlay}>
+                <View style={styles.card}>
+                    <Text style={styles.title}>{title}</Text>
+                    {!!state.errorMessage && (
+                        <Text style={styles.errorText}>{state.errorMessage}</Text>
+                    )}
+                    <Text style={styles.label}>Mobile</Text>
+                    <TextInput
+                        style={[styles.input, !!state.errorMessage && styles.inputError, state.formStarted && styles.inputLocked]}
+                        placeholder={`Enter ${mobileLength}-digit mobile number`}
+                        placeholderTextColor="#aaa"
+                        keyboardType="phone-pad"
+                        maxLength={mobileLength}
+                        value={state.mobile}
+                        onChangeText={t => {
+                            actions.setMobile(t);
+                            if (state.errorMessage) actions.clearError();
+                        }}
+                        editable={!state.formStarted && !isLoading}
+                    />
+                    {state.formStarted && state.passwordRequired && (
+                        <>
+                            <Text style={styles.label}>{passwordLabel}</Text>
+                            <TextInput
+                                style={[styles.input, !!state.errorMessage && styles.inputError]}
+                                placeholder={passwordPlaceholder}
+                                placeholderTextColor="#aaa"
+                                secureTextEntry
+                                autoCapitalize="none"
+                                autoCorrect={false}
+                                value={state.password}
+                                onChangeText={t => {
+                                    actions.setPassword(t);
+                                    if (state.errorMessage) actions.clearError();
+                                }}
+                                editable={!isLoading}
+                            />
+                        </>
+                    )}
+                    {!state.otpSent && (
+                        <TouchableOpacity
+                            style={[styles.btn, isLoading && styles.btnDisabled]}
+                            onPress={actions.requestOTP}
+                            disabled={isLoading}
+                            activeOpacity={0.8}
+                        >
+                            {isLoading ? (
+                                <ActivityIndicator color="#fff" />
+                            ) : (
+                                <Text style={styles.btnText}>Send OTP</Text>
+                            )}
+                        </TouchableOpacity>
+                    )}
+                    {state.otpSent && (
+                        <>
+                            <Text style={styles.hint}>OTP sent to {state.mobile}</Text>
+                            <Text style={styles.label}>Verification code</Text>
+                            <TextInput
+                                style={[styles.input, !!state.errorMessage && styles.inputError]}
+                                placeholder={`Enter ${otpLength}-digit code`}
+                                placeholderTextColor="#aaa"
+                                keyboardType="number-pad"
+                                maxLength={otpLength}
+                                value={state.otp}
+                                onChangeText={t => {
+                                    actions.setOtp(t);
+                                    if (state.errorMessage) actions.clearError();
+                                }}
+                                editable={!isLoading}
+                            />
+                            <TouchableOpacity
+                                style={[styles.btn, isLoading && styles.btnDisabled]}
+                                onPress={actions.verifyOTP}
+                                disabled={isLoading}
+                                activeOpacity={0.8}
+                            >
+                                {isLoading ? (
+                                    <ActivityIndicator color="#fff" />
+                                ) : (
+                                    <Text style={styles.btnText}>Verify & Bind</Text>
+                                )}
+                            </TouchableOpacity>
+                            {renderResendOtp()}
+                        </>
+                    )}
+                    {state.formStarted && (
+                        <TouchableOpacity
+                            style={styles.linkBtn}
+                            onPress={actions.resetToMobile}
+                            disabled={isLoading}
+                        >
+                            <Text style={[styles.linkText, isLoading && { opacity: 0.4 }]}>
+                                Change mobile number
+                            </Text>
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+        );
+    }
+
     const showOtp = state.step === 'otp' || state.step === 'processing';
 
     return (
@@ -51,15 +183,15 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
             <View style={styles.card}>
                 <Text style={styles.title}>{title}</Text>
 
-                {state.step === 'mobile' && (
+                {!showOtp && (
                     <>
                         {!!state.errorMessage && (
                             <Text style={styles.errorText}>{state.errorMessage}</Text>
                         )}
-                        <Text style={styles.label}>手机号</Text>
+                        <Text style={styles.label}>Mobile</Text>
                         <TextInput
                             style={[styles.input, !!state.errorMessage && styles.inputError]}
-                            placeholder={`请输入 ${mobileLength} 位手机号`}
+                            placeholder={`Enter ${mobileLength}-digit mobile number`}
                             placeholderTextColor="#aaa"
                             keyboardType="phone-pad"
                             maxLength={mobileLength}
@@ -79,7 +211,7 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
                             {isLoading ? (
                                 <ActivityIndicator color="#fff" />
                             ) : (
-                                <Text style={styles.btnText}>获取验证码</Text>
+                                <Text style={styles.btnText}>Send OTP</Text>
                             )}
                         </TouchableOpacity>
                     </>
@@ -87,37 +219,14 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
 
                 {showOtp && (
                     <>
-                        <Text style={styles.hint}>
+                        <Text style={styles.hint}>OTP sent to {state.mobile}</Text>
-                            {state.needPassword
-                                ? `验证码已发送至 ${state.mobile}，该账号需输入密码`
-                                : `验证码已发送至 ${state.mobile}`}
-                        </Text>
                         {!!state.errorMessage && (
                             <Text style={styles.errorText}>{state.errorMessage}</Text>
                         )}
-                        {state.needPassword && (
+                        <Text style={styles.label}>Verification code</Text>
-                            <>
-                                <Text style={styles.label}>Amazon 密码</Text>
-                                <TextInput
-                                    style={[styles.input, !!state.errorMessage && styles.inputError]}
-                                    placeholder="请输入账号密码"
-                                    placeholderTextColor="#aaa"
-                                    secureTextEntry
-                                    autoCapitalize="none"
-                                    autoCorrect={false}
-                                    value={state.password}
-                                    onChangeText={t => {
-                                        actions.setPassword(t);
-                                        if (state.errorMessage) actions.clearError();
-                                    }}
-                                    editable={!isLoading}
-                                />
-                            </>
-                        )}
-                        <Text style={styles.label}>验证码</Text>
                         <TextInput
                             style={[styles.input, !!state.errorMessage && styles.inputError]}
-                            placeholder={`请输入 ${otpLength} 位验证码`}
+                            placeholder={`Enter ${otpLength}-digit code`}
                             placeholderTextColor="#aaa"
                             keyboardType="number-pad"
                             maxLength={otpLength}
@@ -137,16 +246,17 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
                             {isLoading ? (
                                 <ActivityIndicator color="#fff" />
                             ) : (
-                                <Text style={styles.btnText}>验证并绑定</Text>
+                                <Text style={styles.btnText}>Verify & Bind</Text>
                             )}
                         </TouchableOpacity>
+                        {renderResendOtp()}
                         <TouchableOpacity
                             style={styles.linkBtn}
                             onPress={actions.resetToMobile}
                             disabled={isLoading}
                         >
                             <Text style={[styles.linkText, isLoading && { opacity: 0.4 }]}>
-                                重新输入手机号
+                                Change mobile number
                             </Text>
                         </TouchableOpacity>
                     </>
@@ -200,6 +310,10 @@ const styles = StyleSheet.create({
         marginBottom: 14,
         backgroundColor: '#fafafa',
     },
+    inputLocked: {
+        backgroundColor: '#f0f0f0',
+        color: '#666',
+    },
     inputError: {
         borderColor: '#ff3b30',
         backgroundColor: '#fff8f7',
@@ -235,4 +349,7 @@ const styles = StyleSheet.create({
         color: '#007AFF',
         fontSize: 13,
     },
+    linkTextDisabled: {
+        color: '#aaa',
+    },
 });

components/WalletBindComponents.tsx

@@ -15,7 +15,7 @@ export class FreeChargeBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.FREECHARGE_PERSONAL}
-                title="Freecharge 绑定"
+                title="Bind Freecharge"
                 otpLength={4}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -40,7 +40,7 @@ export class MobikwikOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.MOBIKWIK_PERSONAL}
-                title="Mobikwik 绑定"
+                title="Bind Mobikwik"
                 otpLength={6}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -65,7 +65,7 @@ export class PayTmPersonalOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.PAYTM_PERSONAL}
-                title="Paytm 绑定"
+                title="Bind Paytm"
                 otpLength={6}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -90,7 +90,7 @@ export class BharatPeBusinessOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.BHARATPE_BUSINESS}
-                title="BharatPe 绑定"
+                title="Bind BharatPe"
                 otpLength={4}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -147,7 +147,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
     const log = (...args: any[]) => { if (isDebug) console.log('[PaytmBusiness]', ...args); };
 
     const handleRequestOTP = async () => {
-        if (!mobile || mobile.length !== 10) { setErrorMsg('请输入10位手机号'); return; }
+        if (!mobile || mobile.length !== 10) { setErrorMsg('Please enter a 10-digit mobile number'); return; }
         setLoading(true); setErrorMsg('');
         try {
             const res = await onRequestOTP(WalletType.PAYTM_BUSINESS, { mobile });
@@ -161,7 +161,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
     };
 
     const handleVerifyOTP = async () => {
-        if (!otp || otp.length !== 6) { setErrorMsg('请输入6位验证码'); return; }
+        if (!otp || otp.length !== 6) { setErrorMsg('Please enter the 6-digit verification code'); return; }
         setLoading(true); setErrorMsg('');
         try {
             const res = await onVerifyOTP(WalletType.PAYTM_BUSINESS, { mobile, otp, sessionToken });
@@ -182,25 +182,25 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
     return (
         <View style={ptStyles.container}>
             <View style={ptStyles.form}>
-                <Text style={ptStyles.title}>Paytm Business 绑定</Text>
+                <Text style={ptStyles.title}>Bind Paytm Business</Text>
                 {errorMsg ? <Text style={ptStyles.errorText}>{errorMsg}</Text> : null}
                 {step === 'credentials' && (
                     <>
-                        <TextInput style={ptStyles.input} placeholder="手机号" placeholderTextColor="#999" keyboardType="phone-pad" maxLength={10} value={mobile} onChangeText={t => { setMobile(t); setErrorMsg(''); }} editable={!loading} />
+                        <TextInput style={ptStyles.input} placeholder="Mobile number" placeholderTextColor="#999" keyboardType="phone-pad" maxLength={10} value={mobile} onChangeText={t => { setMobile(t); setErrorMsg(''); }} editable={!loading} />
                         <TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleRequestOTP} disabled={loading}>
-                            {loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>获取验证码</Text>}
+                            {loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Send OTP</Text>}
                         </TouchableOpacity>
                     </>
                 )}
                 {step === 'otp' && (
                     <>
-                        <Text style={ptStyles.hint}>验证码已发送至 {mobile}</Text>
+                        <Text style={ptStyles.hint}>OTP sent to {mobile}</Text>
-                        <TextInput style={ptStyles.input} placeholder="6位验证码" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
+                        <TextInput style={ptStyles.input} placeholder="6-digit code" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
                         <TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleVerifyOTP} disabled={loading}>
-                            {loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>验证并绑定</Text>}
+                            {loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Verify & Bind</Text>}
                         </TouchableOpacity>
                         <TouchableOpacity style={ptStyles.linkButton} onPress={() => setStep('credentials')} disabled={loading}>
-                            <Text style={ptStyles.linkText}>重新输入手机号</Text>
+                            <Text style={ptStyles.linkText}>Change mobile number</Text>
                         </TouchableOpacity>
                     </>
                 )}
@@ -235,7 +235,7 @@ export class PhonePeBusinessOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.PHONEPE_BUSINESS}
-                title="PhonePe Business 绑定"
+                title="Bind PhonePe Business"
                 otpLength={5}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -260,7 +260,7 @@ export class PhonePePersonalOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.PHONEPE_PERSONAL}
-                title="PhonePe 绑定"
+                title="Bind PhonePe"
                 otpLength={5}
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
@@ -285,8 +285,12 @@ export class AmazonPayOTPBind extends Component<{
         return (
             <OTPBindUI
                 walletType={WalletType.AMAZONPAY_PERSONAL}
-                title="Amazon Pay 绑定"
+                title="Bind Amazon Pay"
                 otpLength={6}
+                passwordBeforeOtp
+                passwordLabel="Amazon password"
+                passwordPlaceholder="Enter Amazon account password"
+                passwordRequiredMsg="Please enter your Amazon account password"
                 onRequestOTP={this.props.onRequestOTP}
                 onVerifyOTP={this.props.onVerifyOTP}
                 onSuccess={this.props.onSuccess}

hooks/useOTPBind.ts

@@ -13,11 +13,14 @@ export interface OTPBindState {
     mobile: string;
     otp: string;
     password: string;
-    needPassword: boolean;
+    passwordRequired: boolean;
+    formStarted: boolean;
+    otpSent: boolean;
     step: 'mobile' | 'otp' | 'processing';
     loading: boolean;
     otpData: any;
     errorMessage: string;
+    resendCountdown: number;
 }
 
 export interface OTPBindActions {
@@ -38,24 +41,48 @@ export function useOTPBind(
         mobileLength?: number;
         additionalParams?: any;
         initialMobile?: string;
+        passwordBeforeOtp?: boolean;
+        passwordRequiredMsg?: string;
+        resendCooldown?: number;
     }
 ): [OTPBindState, OTPBindActions] {
     const [mobile, setMobile] = useState('');
     const [otp, setOtp] = useState('');
     const [password, setPassword] = useState('');
-    const [needPassword, setNeedPassword] = useState(false);
+    const [passwordRequired, setPasswordRequired] = useState(false);
+    const [formStarted, setFormStarted] = useState(false);
+    const [otpSent, setOtpSent] = useState(false);
     const [step, setStep] = useState<'mobile' | 'otp' | 'processing'>('mobile');
     const [loading, setLoading] = useState(false);
     const [otpData, setOtpData] = useState<any>(null);
     const [errorMessage, setErrorMessage] = useState('');
+    const [resendCountdown, setResendCountdown] = useState(0);
 
     const { onRequestOTP, onVerifyOTP, onSuccess, onError, isDebug = false } = callbacks;
-    const { otpLength = 6, mobileLength = 10, additionalParams = {}, initialMobile = '' } = config || {};
+    const {
+        otpLength = 6,
+        mobileLength = 10,
+        additionalParams = {},
+        initialMobile = '',
+        passwordBeforeOtp = false,
+        passwordRequiredMsg = 'Please enter your password',
+        resendCooldown = 20,
+    } = config || {};
 
     useEffect(() => {
         if (initialMobile) setMobile(initialMobile);
     }, [initialMobile]);
 
+    useEffect(() => {
+        if (resendCountdown <= 0) return;
+        const timer = setInterval(() => {
+            setResendCountdown(prev => (prev <= 1 ? 0 : prev - 1));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [resendCountdown]);
+
+    const startResendCooldown = () => setResendCountdown(resendCooldown);
+
     const clearError = () => setErrorMessage('');
 
     const log = (...args: any[]) => {
@@ -67,6 +94,19 @@ export function useOTPBind(
     };
 
     const requestOTP = async () => {
+        const withPassword = passwordBeforeOtp && formStarted && passwordRequired;
+        const isResend = otpSent && formStarted;
+
+        if (isResend && resendCountdown > 0) {
+            return;
+        }
+        if (withPassword && !password.trim()) {
+            const msg = passwordRequiredMsg;
+            setErrorMessage(msg);
+            onError(msg);
+            return;
+        }
+
         if (!mobile || mobile.length !== mobileLength) {
             const msg = 'Invalid mobile number';
             setErrorMessage(msg);
@@ -76,19 +116,31 @@ export function useOTPBind(
 
         setLoading(true);
         setErrorMessage('');
-        log('Requesting OTP for:', mobile);
+        log(isResend ? 'Resending OTP for:' : withPassword ? 'Requesting OTP with password for:' : 'Requesting OTP for:', mobile);
 
         try {
             const response = await onRequestOTP(walletType, {
                 mobile,
+                ...(withPassword ? { password, sessionId: otpData?.sessionId } : {}),
+                ...(isResend && !withPassword && otpData ? { ...otpData } : {}),
                 ...additionalParams,
             });
             log('OTP response:', response);
 
             if (response.success) {
                 setOtpData(response.data);
-                setNeedPassword(!!response.data?.needPassword);
+                setFormStarted(true);
-                setStep('otp');
+                if (passwordBeforeOtp && response.data?.needPassword && !withPassword && !isResend) {
+                    setPasswordRequired(true);
+                    setOtpSent(false);
+                } else {
+                    setPasswordRequired(!!response.data?.needPassword || withPassword);
+                    setOtpSent(true);
+                    startResendCooldown();
+                    if (!passwordBeforeOtp) {
+                        setStep('otp');
+                    }
+                }
                 setErrorMessage('');
             } else {
                 error('OTP request failed:', response.message);
@@ -108,13 +160,13 @@ export function useOTPBind(
 
     const verifyOTP = async () => {
         if (!otp || otp.length !== otpLength) {
-            const msg = `请输入 ${otpLength} 位验证码`;
+            const msg = `Please enter the ${otpLength}-digit verification code`;
             setErrorMessage(msg);
             onError(msg);
             return;
         }
-        if (needPassword && !password.trim()) {
+        if (passwordRequired && !password.trim()) {
-            const msg = '请输入 Amazon 账号密码';
+            const msg = passwordRequiredMsg;
             setErrorMessage(msg);
             onError(msg);
             return;
@@ -129,7 +181,7 @@ export function useOTPBind(
             const response = await onVerifyOTP(walletType, {
                 mobile,
                 otp,
-                password: needPassword ? password : undefined,
+                password: passwordRequired ? password : undefined,
                 ...additionalParams,
                 ...(otpData || {}),
             });
@@ -141,13 +193,13 @@ export function useOTPBind(
             } else {
                 log('Verify failed:', response.message);
                 const msg = response.message || 'Failed to verify OTP';
-                setStep('otp');
+                setStep(passwordBeforeOtp ? 'mobile' : 'otp');
                 setErrorMessage(msg);
             }
         } catch (e) {
             error('Verify OTP error:', e);
             const msg = e instanceof Error ? e.message : 'Failed to verify OTP';
-            setStep('otp');
+            setStep(passwordBeforeOtp ? 'mobile' : 'otp');
             setErrorMessage(msg);
         } finally {
             setLoading(false);
@@ -158,12 +210,28 @@ export function useOTPBind(
         setStep('mobile');
         setOtp('');
         setPassword('');
-        setNeedPassword(false);
+        setPasswordRequired(false);
+        setFormStarted(false);
+        setOtpSent(false);
+        setOtpData(null);
         setErrorMessage('');
+        setResendCountdown(0);
     };
 
     return [
-        { mobile, otp, password, needPassword, step, loading, otpData, errorMessage },
+        {
+            mobile,
+            otp,
+            password,
+            passwordRequired,
+            formStarted,
+            otpSent,
+            step,
+            loading,
+            otpData,
+            errorMessage,
+            resendCountdown,
+        },
         { setMobile, setOtp, setPassword, requestOTP, verifyOTP, resetToMobile, clearError },
     ];
 }

screens/HomeScreen.tsx

@@ -798,7 +798,10 @@ export default class HomeScreen extends Component<any, HomeScreenState> {
                         isDebug
                         initialMobile={bindPrefillMobile}
                         onRequestOTP={async (wt, p) => {
-                            return this.wrapOtpCall(() => Api.instance.requestOTP(wt, p.mobile, {}));
+                            return this.wrapOtpCall(() => Api.instance.requestOTP(wt, p.mobile, {
+                                ...(p.sessionId ? { sessionId: p.sessionId } : {}),
+                                ...(p.password ? { password: p.password } : {}),
+                            }));
                         }}
                         onVerifyOTP={async (wt, p) => {
                             return this.wrapOtpCall(() => Api.instance.verifyOTP(wt, p.mobile, p.otp, {