v2.0
This commit is contained in:
parent
94f2fa94b7
commit
c4de918726
@ -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 };
|
||||
|
||||
if (selected === "phone") {
|
||||
await fetchVerificationCode(data);
|
||||
setCaptchaTimer(60);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (verificationData?.code === 200) {
|
||||
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<HTMLFormElement>) => {
|
||||
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,6 +288,7 @@ 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" ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGetCaptcha}
|
||||
@ -265,11 +300,34 @@ export default function RegisterForm({ back }: RegisterFormProps) {
|
||||
{verificationLoading ? (
|
||||
<span className="loading loading-spinner loading-md text-gray-200"></span>
|
||||
) : captchaTimer > 0 ? (
|
||||
`${captchaTimer}s`
|
||||
<span className="text-gray-200">
|
||||
{captchaTimer}s
|
||||
</span>
|
||||
) : (
|
||||
<span>{t("getCode")}</span>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGetCaptcha}
|
||||
className="btn h-10 btn-sm w-32 ml-2 bg-transparent hover:bg-green-500 hover:text-white text-gray-200 rounded-lg"
|
||||
disabled={
|
||||
captchaEmailTimer > 0 ||
|
||||
verificationEmailLoading
|
||||
}
|
||||
>
|
||||
{verificationEmailLoading ? (
|
||||
<span className="loading loading-spinner loading-md text-gray-200"></span>
|
||||
) : captchaEmailTimer > 0 ? (
|
||||
<span className="text-gray-200">
|
||||
{captchaEmailTimer}s
|
||||
</span>
|
||||
) : (
|
||||
<span>{t("getCode")}</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Form.Field>
|
||||
|
||||
@ -304,7 +362,7 @@ export default function RegisterForm({ back }: RegisterFormProps) {
|
||||
>
|
||||
{t("submit")}
|
||||
{registerLoading ? (
|
||||
<span className="loading loading-spinner loading-md ml-2"></span>
|
||||
<span className="loading loading-spinner loading-md ml-2 text-gray-200"></span>
|
||||
) : null}
|
||||
</Form.Submit>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user