diff --git a/src/ui/login/register-form.tsx b/src/ui/login/register-form.tsx index e3049de..5172b4f 100644 --- a/src/ui/login/register-form.tsx +++ b/src/ui/login/register-form.tsx @@ -9,6 +9,7 @@ import * as Form from "@radix-ui/react-form"; import useFetch from "@/hooks/useFetch"; import { useTranslations } from "next-intl"; import Link from "next/link"; +import { useRouter } from "next/navigation"; interface RegisterFormProps { back: () => void; @@ -30,8 +31,9 @@ export default function RegisterForm({ back }: RegisterFormProps) { const [confirmPassword, setConfirmPassword] = useState(""); const [captcha, setCaptcha] = useState(""); const [captchaTimer, setCaptchaTimer] = useState(0); + const [captchaEmailTimer, setCaptchaEmailTimer] = useState(0); const [agreed, setAgreed] = useState(true); // 默认勾选 - + const router = useRouter(); const { addToast } = useToast(); // 获取验证码 @@ -44,7 +46,15 @@ export default function RegisterForm({ back }: RegisterFormProps) { url: "/api/send-verification-sms/", method: "POST", }); - + const { + fetchData: fetchVerificationEmailCode, + data: verificationEmailData, + loading: verificationEmailLoading, + error: verificationEmailError, + } = useFetch({ + url: "/api/send-verification-email/", + method: "POST", + }); // 注册 const { fetchData: register, @@ -55,7 +65,6 @@ export default function RegisterForm({ back }: RegisterFormProps) { url: "/api/register/", method: "POST", }); - useEffect(() => { let timer: NodeJS.Timeout; if (captchaTimer > 0) { @@ -65,7 +74,15 @@ export default function RegisterForm({ back }: RegisterFormProps) { } return () => clearInterval(timer); }, [captchaTimer]); - + useEffect(() => { + let timer: NodeJS.Timeout; + if (captchaEmailTimer > 0) { + timer = setInterval(() => { + setCaptchaEmailTimer((prev) => prev - 1); + }, 1000); + } + return () => clearInterval(timer); + }, [captchaEmailTimer]); const handleGetCaptcha = async () => { if (selected === "phone" && !isValidPhoneNumber(phone)) { addToast(t("invalidPhoneNumber"), "error"); @@ -80,17 +97,32 @@ export default function RegisterForm({ back }: RegisterFormProps) { const data = selected === "phone" ? { phone_number: phone } : { email: email }; - await fetchVerificationCode(data); - setCaptchaTimer(60); - }; - - useEffect(() => { - if (verificationData?.code === 200) { + if (selected === "phone") { + await fetchVerificationCode(data); addToast(t("captchaSent"), "success"); setCaptchaTimer(60); + } else { + await fetchVerificationEmailCode(data); + addToast(t("captchaSent"), "success"); + setCaptchaEmailTimer(60); } - }, [verificationData, verificationError]); + }; + // useEffect(() => { + // if (verificationData?.code === 200) { + // addToast(t("captchaSent"), "success"); + // setCaptchaTimer(60); + // return; + // } + // }, [verificationData, verificationError, addToast, t]); + // useEffect(() => { + // console.log("verificationError", verificationError); + // if (!verificationEmailData && !verificationEmailError) { + // addToast(t("captchaSent"), "success"); + // setCaptchaEmailTimer(60); + // return; + // } + // }, [verificationEmailData, verificationEmailError, addToast, t]); const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); // 阻止表单默认提交行为 @@ -134,6 +166,8 @@ export default function RegisterForm({ back }: RegisterFormProps) { // 调用 register 函数发送注册请求 await register(registerData); + addToast(t("registerSuccess"), "success"); + router.replace("/create"); }; return ( @@ -254,22 +288,46 @@ export default function RegisterForm({ back }: RegisterFormProps) { className="h-10 input border-gray-600 bg-gray-800 focus:outline-none w-full rounded-lg text-sm text-gray-300 placeholder-gray-500" placeholder={t("captcha")} /> - + {selected === "phone" ? ( + + ) : ( + + )} @@ -304,7 +362,7 @@ export default function RegisterForm({ back }: RegisterFormProps) { > {t("submit")} {registerLoading ? ( - + ) : null}