true_casey/rnpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
TQCasey
2026-05-28 15:21:53 +08:00
parent 6eaa171ba4
commit c79a088597
4 changed files with 256 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/OTPBindUI.tsx
View File

@@ -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}>
{state.needPassword
? `验证码已发送至 ${state.mobile}，该账号需输入密码`
: `验证码已发送至 ${state.mobile}`}
</Text>
<Text style={styles.hint}>OTP sent to {state.mobile}</Text>
{!!state.errorMessage && (
<Text style={styles.errorText}>{state.errorMessage}</Text>
)}
{state.needPassword && (
<>
<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>
<Text style={styles.label}>Verification code</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',
},
});

36
components/WalletBindComponents.tsx
View File

@@ -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>
<TextInput style={ptStyles.input} placeholder="6位验证码" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
<Text style={ptStyles.hint}>OTP sent to {mobile}</Text>
<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}