121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import { fetchApi } from "@/lib/server-api-util";
|
|
import { User } from "@/types/user";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
interface LoginProps {
|
|
setIsSignUp?: (isSignUp: string) => void;
|
|
closeModal?: () => void;
|
|
updateUrlParam?: (status: string, value: string) => void;
|
|
setError: (error: string) => void;
|
|
}
|
|
|
|
const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
|
|
const { t } = useTranslation();
|
|
const [loading, setLocading] = useState(false);
|
|
// 发送邮箱后把按钮变为disabled
|
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
const [email, setEmail] = useState('');
|
|
const [countdown, setCountdown] = useState(0);
|
|
|
|
// 倒计时效果
|
|
useEffect(() => {
|
|
if (countdown > 0) {
|
|
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
|
return () => clearTimeout(timer);
|
|
} else if (countdown === 0 && isDisabled) {
|
|
setIsDisabled(false);
|
|
}
|
|
}, [countdown, isDisabled]);
|
|
|
|
// 发送邮件
|
|
const handleSubmit = () => {
|
|
if (!email) {
|
|
setError(t('auth.forgetPwd.emailPlaceholder', { ns: 'login' }));
|
|
return;
|
|
}
|
|
|
|
setLocading(true);
|
|
const body = {
|
|
email: email,
|
|
}
|
|
// 调接口确定邮箱是否正确，是否有该用户邮箱权限
|
|
fetchApi<User>('/iam/reset-password-session', {
|
|
method: 'POST',
|
|
body: JSON.stringify(body),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then((_) => {
|
|
console.log("Password reset email sent successfully");
|
|
setIsDisabled(true);
|
|
setCountdown(60); // 开始60秒倒计时
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to send reset email:', error);
|
|
setError(t('auth.forgetPwd.sendEmailError', { ns: 'login' }));
|
|
})
|
|
.finally(() => {
|
|
setLocading(false);
|
|
});
|
|
};
|
|
// 返回登陆
|
|
const handleBackToLogin = () => {
|
|
if (setIsSignUp) {
|
|
setIsSignUp('login');
|
|
}
|
|
if (updateUrlParam) {
|
|
updateUrlParam('status', 'login');
|
|
}
|
|
}
|
|
|
|
return <View>
|
|
{/* 邮箱输入框 */}
|
|
<View className="mb-5">
|
|
<ThemedText className="text-base !text-textPrimary mb-2 ml-2">
|
|
{t('auth.forgetPwd.title', { ns: 'login' })}
|
|
</ThemedText>
|
|
<TextInput
|
|
className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
|
|
placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
|
|
placeholderTextColor="#ccc"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
/>
|
|
</View>
|
|
{/* 发送重置密码邮件 */}
|
|
<TouchableOpacity
|
|
className={`w-full bg-[#E2793F] rounded-full p-4 items-center ${isDisabled ? 'opacity-50' : ''}`}
|
|
onPress={handleSubmit}
|
|
disabled={isDisabled || loading}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<ThemedText className="!text-white font-semibold">
|
|
{isDisabled
|
|
? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
|
|
: t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
|
|
|
|
</ThemedText>
|
|
)}
|
|
</TouchableOpacity>
|
|
{/* 返回登陆 */}
|
|
<TouchableOpacity
|
|
className="self-center mt-6"
|
|
onPress={handleBackToLogin}
|
|
>
|
|
<ThemedText className="!text-textPrimary text-sm">
|
|
{t('auth.forgetPwd.goback', { ns: 'login' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
}
|
|
|
|
|
|
export default ForgetPwd |