48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { View } from "react-native";
|
|
import { Steps } from "./phoneLogin";
|
|
import Button from "./ui/Button";
|
|
import TextInput from "./ui/TextInput";
|
|
|
|
interface LoginProps {
|
|
setSteps: (steps: Steps) => void;
|
|
setPhone: (phone: string) => void;
|
|
phone: string;
|
|
updateUrlParam: (status: string, value: string) => void;
|
|
}
|
|
|
|
const Phone = ({ setSteps, setPhone, phone, updateUrlParam }: LoginProps) => {
|
|
const { t } = useTranslation();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string>('');
|
|
|
|
const sendVerificationCode = async () => {
|
|
setSteps('code')
|
|
updateUrlParam("status", "code");
|
|
return
|
|
};
|
|
|
|
return <View>
|
|
{/* 手机号输入框 */}
|
|
<View className="mb-5">
|
|
<TextInput
|
|
label={t('auth.telLogin.title', { ns: 'login' })}
|
|
placeholder={t('auth.telLogin.phoneRequired', { ns: 'login' })}
|
|
onChangeText={(text) => {
|
|
setPhone(text);
|
|
setError('');
|
|
}}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
value={phone}
|
|
error={error}
|
|
/>
|
|
</View>
|
|
|
|
{/* 发送验证码 */}
|
|
<Button isLoading={isLoading} handleLogin={sendVerificationCode} text={t('auth.telLogin.sendCode', { ns: 'login' })} />
|
|
</View>
|
|
}
|
|
|
|
export default Phone |