152 lines
4.4 KiB
TypeScript
152 lines
4.4 KiB
TypeScript
import { Fonts } from "@/constants/Fonts";
|
|
import { fetchApi } from "@/lib/server-api-util";
|
|
import { User } from "@/types/user";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, TouchableOpacity, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
import Button from "./ui/Button";
|
|
import TextInput from "./ui/TextInput";
|
|
|
|
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);
|
|
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((_) => {
|
|
setIsDisabled(true);
|
|
setCountdown(60);
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message || t('auth.forgetPwd.sendEmailError', { ns: 'login' }));
|
|
})
|
|
.finally(() => {
|
|
setLocading(false);
|
|
});
|
|
};
|
|
|
|
const handleBackToLogin = () => {
|
|
if (setIsSignUp) {
|
|
setIsSignUp('login');
|
|
}
|
|
if (updateUrlParam) {
|
|
updateUrlParam('status', 'login');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 邮箱 */}
|
|
<TextInput
|
|
label={t('auth.forgetPwd.title', { ns: 'login' })}
|
|
placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
|
|
onChangeText={setEmail}
|
|
autoCapitalize="none"
|
|
value={email}
|
|
/>
|
|
{/* 发送邮箱 */}
|
|
<Button
|
|
isLoading={isDisabled || loading}
|
|
handleLogin={handleSubmit}
|
|
text={isDisabled
|
|
? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
|
|
: t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
|
|
/>
|
|
|
|
{/* 返回登录 */}
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={handleBackToLogin}
|
|
>
|
|
<ThemedText type='inter' color="bgSecondary" size="sm">
|
|
{t('auth.forgetPwd.goback', { ns: 'login' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
},
|
|
inputContainer: {
|
|
marginBottom: 20,
|
|
},
|
|
inputLabel: {
|
|
fontSize: Fonts['base'],
|
|
color: Fonts['textPrimary'],
|
|
fontWeight: Fonts['bold'],
|
|
fontFamily: Fonts['sfPro'],
|
|
marginBottom: 8,
|
|
marginLeft: 8,
|
|
},
|
|
textInput: {
|
|
borderRadius: Fonts['xs'],
|
|
paddingHorizontal: Fonts['base'],
|
|
paddingVertical: Fonts['xs'],
|
|
fontSize: Fonts['sm'],
|
|
lineHeight: Fonts['base'],
|
|
textAlignVertical: 'center',
|
|
backgroundColor: Fonts['bgInput'],
|
|
color: Fonts['textSecondary'],
|
|
fontFamily: Fonts['inter'],
|
|
paddingRight: Fonts['5xl'],
|
|
},
|
|
submitButton: {
|
|
width: '100%',
|
|
backgroundColor: '#E2793F',
|
|
borderRadius: 28,
|
|
padding: 16,
|
|
alignItems: 'center',
|
|
},
|
|
disabledButton: {
|
|
opacity: 0.5,
|
|
},
|
|
buttonText: {
|
|
color: '#FFFFFF',
|
|
fontWeight: '600',
|
|
},
|
|
backButton: {
|
|
alignSelf: 'center',
|
|
marginTop: 24,
|
|
}
|
|
});
|
|
|
|
export default ForgetPwd; |