v2.0

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 };
 
+        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>