登录修改注册人机接口加上

2 months ago · bb2ad15619
4 changed files with 270 additions and 190 deletions
--- a/src/components/captcha/SlideCapt.tsx
+++ b/src/components/captcha/SlideCapt.tsx
@ -1,119 +1,123 @@
-import React, { forwardRef, memo, useCallback, useEffect, useState, useImperativeHandle } from "react";
-import { Popover, message } from "antd";
-import GoCaptcha from "go-captcha-react";
-import { SlideCaptchaCheckData } from "./types.ts";
-import { SlideData, SlidePoint } from "go-captcha-react/dist/components/Slide/meta/data";
-import { SlideConfig } from "go-captcha-react/dist/components/Slide/meta/config";
-import { Props } from "go-captcha-react/dist/components/Button";
-import { useStyle } from "./style.ts";
+import React, { forwardRef, memo, useCallback, useEffect, useState, useImperativeHandle } from 'react'
+import { Popover, message } from 'antd'
+import GoCaptcha from 'go-captcha-react'
+import { SlideCaptchaCheckData } from './types.ts'
+import { SlideData, SlidePoint } from 'go-captcha-react/dist/components/Slide/meta/data'
+import { SlideConfig } from 'go-captcha-react/dist/components/Slide/meta/config'
+import { useStyle } from './style.ts'
+import {Props} from "@/global";

 export interface SlideCaptProps {
  api: {
-    getCaptcha: () => Promise<any>;
-    checkCaptcha: (params: SlideCaptchaCheckData) => Promise<any>;
-  };
-  config?: SlideConfig;
-  value?: string;
-  onChange?: (value?: string) => void;
+    getCaptcha: () => Promise<any>,
+    checkCaptcha: (params: SlideCaptchaCheckData) => Promise<any>,
+  },
+  config?: SlideConfig
+  value?: string
+  onChange?: (value?: string) => void
 }

 export type SlideCaptRef = {
-  reset: () => void;
-};
+  reset: () => void
+}
+
+
+const SlideCapt = forwardRef<SlideCaptRef | undefined, SlideCaptProps>((
+        {
+          config,
+          api,
+          value,
+          onChange,
+        }: SlideCaptProps, ref) => {

-const SlideCapt = forwardRef<SlideCaptRef | undefined, SlideCaptProps>(
-  ({ config, api, value, onChange }: SlideCaptProps, ref) => {
-    const { styles } = useStyle();
-    const [open, setOpen] = useState(false);
-    const [state, setState] = useState<Props>({});
-    const [data, setData] = useState<SlideData>();
-    const [innerKey, setKey] = useState(value);
+  const { styles } = useStyle()
+  const [ open, setOpen ] = useState(false)
+  const [ state, setState ] = useState<Props>({})
+  const [ data, setData ] = useState<SlideData>()
+  const [ innerKey, setKey ] = useState(value)

  const fetchCaptcha = useCallback(() => {
-      return api.getCaptcha().then((res) => {
+
+    return api.getCaptcha().then(res => {
      if (res.code === 0) {
-          const data = res.data;
-          setKey(data["captcha_key"] || "");
+        const data = res.data
+        setKey(data['captcha_key'] || '')
        setData({
-            image: data["image_base64"] || "",
-            thumb: data["tile_base64"] || "",
-            thumbX: data["tile_x"] || 0,
-            thumbY: data["tile_y"] || 0,
-            thumbWidth: data["tile_width"] || 0,
-            thumbHeight: data["tile_height"] || 0,
-          });
+          image: data['image_base64'] || '',
+          thumb: data['tile_base64'] || '',
+          thumbX: data['tile_x'] || 0,
+          thumbY: data['tile_y'] || 0,
+          thumbWidth: data['tile_width'] || 0,
+          thumbHeight: data['tile_height'] || 0,
+        })
      }
-      });
-    }, [api.getCaptcha, setData]);

-    const refresh = useCallback(() => {
-      fetchCaptcha();
-    }, [fetchCaptcha]);
-
-    const confirm = useCallback(
-      (point: SlidePoint, clear: (fn?: any) => void) => {
-        api
-          .checkCaptcha({
-            point: [point.x, point.y].join(","),
-            key: innerKey!,
    })
-          .then((res) => {
+
+
+  }, [ api.getCaptcha, setData ])
+
+  const refresh = useCallback(() => {
+    fetchCaptcha()
+  }, [ fetchCaptcha ])
+
+  const confirm = useCallback((point: SlidePoint, clear: (fn?: any) => void) => {
+
+    api.checkCaptcha({
+      point: [ point.x, point.y ].join(','),
+      key: innerKey!
+    }).then(res => {
      // console.log(res)
      if (res.code === 0 && res.data.is_ok) {
-              message.success(`验证成功`);
+        message.success(`验证成功`)

        //验证成功，onChange通知出去，外部需要key做为校验
-              onChange?.(innerKey);
-
-              setState((prevState) => ({
-                ...prevState,
-                type: "success",
-                title: "校验成功",
-              }));
-              setOpen(false);
+        onChange?.(innerKey)
+
+        setState(prevState => ({
+          ...prevState, type: 'success', title: '校验成功',
+        }))
+        setOpen(false)
      } else {
-              message.error("验证失败");
-              setState((prevState) => ({
-                ...prevState,
-                type: "error",
-                title: "点击进行校验",
-              }));
+        message.error('验证失败')
+        setState(prevState => ({
+          ...prevState, type: 'error', title: '点击进行校验',
+        }))
      }
      setTimeout(() => {
-              clear();
-              fetchCaptcha();
-            }, 1000);
-          })
-          .catch(() => {
+        clear()
+        fetchCaptcha()
+      }, 1000)
+
+    }).catch(() => {
      setTimeout(() => {
-              clear();
-              fetchCaptcha();
-            }, 1000);
-          });
-      },
-      [api.checkCaptcha, setData, state, setState, setOpen, innerKey, onChange, fetchCaptcha],
-    );
+        clear()
+        fetchCaptcha()
+      }, 1000)
+    })
+
+  }, [ api.checkCaptcha, setData, state, setState, setOpen, innerKey, onChange, fetchCaptcha ])

  useImperativeHandle(ref, () => {
    return {
      reset() {
-          setState((prevState) => ({
-            ...prevState,
-            type: "default",
-            title: "点击进行校验",
-          }));
-          setKey(undefined);
-          onChange?.(undefined);
-          refresh();
-        },
-      };
-    }, [fetchCaptcha, setState, setKey]);
+        setState(prevState => ({
+          ...prevState, type: 'default', title: '点击进行校验',
+        }))
+        setKey(undefined)
+        onChange?.(undefined)
+        refresh()
+      }
+    }
+  }, [ fetchCaptcha, setState, setKey ])

  useEffect(() => {
+
    if (open) {
-        fetchCaptcha();
+      fetchCaptcha()
    }
-    }, [open]);
+
+  }, [ open ])

  return (
          <div className={styles.container}>
@ -128,33 +132,32 @@ const SlideCapt = forwardRef<SlideCaptRef | undefined, SlideCaptProps>(
                                horizontalPadding: 5,
                                ...config,
                              }}
-              style={{ color: "red" }}
+                              style={{ color: 'red' }}
                              data={data!}
                              events={{
                                refresh,
                                confirm,
                                close: () => {
-                  setOpen(false);
-                },
+                                  setOpen(false)
+                                }
                              }}
                      />
                    }
                    open={open}
                    onOpenChange={setOpen}
                    forceRender={true}
-          trigger="click"
-        >
+                    trigger="click">
              <GoCaptcha.Button
-            title={"点击进行校验"}
+                      title={'点击进行校验'}
                      {...state}
-            clickEvent={() => {
-              setOpen(true);
-            }}
-          />
+                      clickEvent={
+                        () => {
+                          setOpen(true)
+                        }
+                      }/>
            </Popover>
          </div>
-    );
-  },
-);
+  )
+})

-export default memo(SlideCapt);
+export default memo(SlideCapt)
--- a/src/pages/use/login/index.tsx
+++ b/src/pages/use/login/index.tsx
@ -45,7 +45,7 @@ const Login = memo(() => {
  const [upform] = Form.useForm();
  const [emailform] = Form.useForm();
  const [telegramform] = Form.useForm();
-  const { mutate: upLoginFun } = useAtomValue(upLoginAtom);
+  const { mutate: upLoginMutate } = useAtomValue(upLoginAtom);
  const [emailCodeData, setEmailCodeData] = useState({});
  const { mutate: emailLoginMutate } = useAtomValue(emailLoginAtom);
  const { mutate: telegramLoginMutate } = useAtomValue(telegramLoginAtom);
@ -54,22 +54,37 @@ const Login = memo(() => {

  const uphandleSubmit = (values: any) => {
    console.log(values);
-    upLoginFun(values);
+    upLoginMutate(values);
  };

  const getEmailCode = async () => {
+    try {
+      // 验证邮箱和滑动验证码
+      await emailform.validateFields(["email", "captchaKey"]);
+
      const email = emailform.getFieldValue("email");
-    const result = await systemServ.emailCode({ is_register: false, email });
+      const captchaKey = emailform.getFieldValue("captchaKey");
+      const result = await systemServ.emailCode({ is_register: false, email, captchaKey });
      setEmailCodeData(result);
+    } catch (error) {
+      /* empty */
+    }
  };
  const emailhandleSubmit = (values: any) => {
    emailLoginMutate(values);
  };

  const getTelegramCode = async () => {
+    try {
+      // 验证邮箱和滑动验证码
+      await telegramform.validateFields(["telegram", "captchaKey"]);
      const telegram = telegramform.getFieldValue("telegram");
-    const result = await systemServ.telegramCode({ telegram });
+      const captchaKey = telegramform.getFieldValue("captchaKey");
+      const result = await systemServ.telegramCode({ telegram, captchaKey });
      setEmailCodeData(result);
+    } catch (error) {
+      /* empty */
+    }
  };
  const telegramhandleSubmit = (values: any) => {
    telegramLoginMutate(values);
@ -200,6 +215,15 @@ const Login = memo(() => {
                        autoComplete="off"
                      />
                    </Form.Item>
+                    <Form.Item name={"captchaKey"} rules={[{ required: true, message: languageSet.点击进行校验 }]}>
+                      <SlideCapt
+                        ref={slideCaptRef}
+                        api={{
+                          getCaptcha: systemServ.captcha,
+                          checkCaptcha: systemServ.captchaCheck,
+                        }}
+                      />
+                    </Form.Item>
                    <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                      {languageSet.登录}
                    </Button>
@ -227,6 +251,15 @@ const Login = memo(() => {
                        autoComplete="off"
                      />
                    </Form.Item>
+                    <Form.Item name={"captchaKey"} rules={[{ required: true, message: languageSet.点击进行校验 }]}>
+                      <SlideCapt
+                        ref={slideCaptRef}
+                        api={{
+                          getCaptcha: systemServ.captcha,
+                          checkCaptcha: systemServ.captchaCheck,
+                        }}
+                      />
+                    </Form.Item>
                    <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                      {languageSet.登录}
                    </Button>
--- a/src/pages/use/password/retrieve.tsx
+++ b/src/pages/use/password/retrieve.tsx
@ -1,11 +1,15 @@
 import { Layout, Input, Button, Typography, Row, Col, Form, message, Modal } from "antd";
 import { LockOutlined, MailOutlined, SecurityScanOutlined } from "@ant-design/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import { passwordRules } from "@/pages/use/useTools.tsx";
 import systemServ from "@/service/system.ts";
 import { t } from "i18next";
+import SlideCapt, { SlideCaptRef } from "@/components/captcha/SlideCapt.tsx";

+const { Title, Text, Link } = Typography;
+
+const PwdRetrieve = memo(() => {
  const languageSet = {
    向量检索服务免费试用: t("pwdRetrieve.vectorRetrievalServiceFreeTrial", "向量检索服务免费试用"),
    免费试用向量检索服务玩转大模型生成式检索: t(
@ -20,6 +24,7 @@ const languageSet = {
    请输入新密码: t("pwdRetrieve.pleaseEnterNewPassword", "请输入新密码"),
    请确认密码: t("pwdRetrieve.confirmPassword", "请确认密码"),
    两次输入的密码不一致: t("pwdRetrieve.passwordsDoNotMatch", "两次输入的密码不一致"),
+    点击进行校验: t("login.clickToVerify", "点击进行校验"),
    找回密码: t("pwdRetrieve.retrievePassword", "找回密码"),
    返回登录: t("pwdRetrieve.backToLogin", "返回登录"),
    修改成功: t("pwdRetrieve.changeSuccess", "修改成功"),
@ -27,28 +32,34 @@ const languageSet = {
    密码修改成功返回登录: t("pwdRetrieve.passwordChangeSuccess", "密码修改成功，返回登录。"),
  };

-const { Title, Text, Link } = Typography;
-
-const PwdRetrieve = memo(() => {
  const navigate = useNavigate();
  const [retrieveForm] = Form.useForm();
  const [emailCodeData, setEmailCodeData] = useState({});
  const [pwdRetrieveData, setPwdRetrieveData] = useState({});
+  const slideCaptRef = useRef<SlideCaptRef>();

  const handleRetrieveSubmit = async (values: any) => {
    const param = {
      email: values.email,
      password: values.password,
      code: values.code,
+      captchaKey: values.captchaKey,
    };
    const result = await systemServ.pwdRetrieve(param);
    setPwdRetrieveData(result);
  };

  const handleGetCode = async () => {
+    try {
+      // 验证邮箱和滑动验证码
+      await retrieveForm.validateFields(["email", "captchaKey"]);
      const email = retrieveForm.getFieldValue("email");
-    const result = await systemServ.emailCode({ is_register: false, email });
+      const captchaKey = retrieveForm.getFieldValue("captchaKey");
+      const result = await systemServ.emailCode({ is_register: false, email, captchaKey });
      setEmailCodeData(result);
+    } catch (errorInfo) {
+      /* empty */
+    }
  };

  const [countdown, setCountdown] = useState<number>(0);
@ -174,6 +185,15 @@ const PwdRetrieve = memo(() => {
                    autoComplete="off"
                  />
                </Form.Item>
+                <Form.Item name={"captchaKey"} rules={[{ required: true, message: languageSet.点击进行校验 }]}>
+                  <SlideCapt
+                    ref={slideCaptRef}
+                    api={{
+                      getCaptcha: systemServ.captcha,
+                      checkCaptcha: systemServ.captchaCheck,
+                    }}
+                  />
+                </Form.Item>
                <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                  {languageSet.找回密码}
                </Button>
--- a/src/pages/use/register/index.tsx
+++ b/src/pages/use/register/index.tsx
@ -2,11 +2,12 @@ import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
 import { LockOutlined, MailOutlined, SecurityScanOutlined } from "@ant-design/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useAtomValue } from "jotai";
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import { emailRegisterAtom } from "@/store/system/user.ts";
 import { passwordRules } from "@/pages/use/useTools";
 import systemServ from "@/service/system.ts";
 import { t } from "i18next";
+import SlideCapt, { SlideCaptRef } from "@/components/captcha/SlideCapt.tsx";

 const languageSet = {
  向量检索服务免费试用: t("register.vectorRetrievalServiceFreeTrial", "向量检索服务免费试用"),
@ -22,6 +23,7 @@ const languageSet = {
  请输入密码: t("register.pleaseEnterPassword", "请输入密码"),
  请确认密码: t("register.confirmPassword", "请确认密码"),
  两次输入的密码不一致: t("register.passwordsDoNotMatch", "两次输入的密码不一致"),
+  点击进行校验: t("login.clickToVerify", "点击进行校验"),
  注册: t("register.register", "注册"),
  登录: t("register.login", "登录"),
  返回登录: t("register.backToLogin", "返回登录"),
@ -36,15 +38,28 @@ const Register = memo(() => {
  const [countdown, setCountdown] = useState(10);
  const [emailCodeData, setEmailCodeData] = useState({});
  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+  const slideCaptRef = useRef<SlideCaptRef>();

  const getEmailCode = async () => {
+    try {
+      // 验证邮箱和滑动验证码
+      await registerForm.validateFields(["email", "captchaKey"]);
      const email = registerForm.getFieldValue("email");
-    const result = await systemServ.emailCode({ is_register: true, email });
+      const captchaKey = registerForm.getFieldValue("captchaKey");
+      const result = await systemServ.emailCode({ is_register: true, email, captchaKey });
      setEmailCodeData(result);
+    } catch (errorInfo) {
+      /* empty */
+    }
  };

  const emailRegisterSubmit = (values: any) => {
-    emailRegisterMutate({ email: values.email, password: values.password, code: values.code });
+    emailRegisterMutate({
+      email: values.email,
+      password: values.password,
+      code: values.code,
+      captchaKey: values.captchaKey,
+    });
  };

  useEffect(() => {
@ -150,6 +165,15 @@ const Register = memo(() => {
                    autoComplete="off"
                  />
                </Form.Item>
+                <Form.Item name={"captchaKey"} rules={[{ required: true, message: languageSet.点击进行校验 }]}>
+                  <SlideCapt
+                    ref={slideCaptRef}
+                    api={{
+                      getCaptcha: systemServ.captcha,
+                      checkCaptcha: systemServ.captchaCheck,
+                    }}
+                  />
+                </Form.Item>
                <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                  {languageSet.注册}
                </Button>