登录修改注册接口完成

2 months ago · 6d33e0f198
7 changed files with 215 additions and 144 deletions
--- a/src/pages/use/login/index.tsx
+++ b/src/pages/use/login/index.tsx
@ -12,6 +12,7 @@ import {
  upLoginAtom,
 } from "@/store/system/user.ts";
 import React, { memo, useEffect, useLayoutEffect, useState } from "react";
+import systemServ from "@/service/system.ts";
 const { Title, Text, Link } = Typography;
 const { TabPane } = Tabs;

@ -21,7 +22,7 @@ const Login = memo(() => {
  const [emailform] = Form.useForm();
  const [telegramform] = Form.useForm();
  const { mutate: upLoginFun } = useAtomValue(upLoginAtom);
-  const { mutate: emailCodeMutate } = useAtomValue(emailCodeAtom);
+  const [emailCodeData, setEmailCodeData] = useState({});
  const { mutate: emailLoginMutate } = useAtomValue(emailLoginAtom);
  const { mutate: telegramCodeMutate } = useAtomValue(telegramCodeAtom);
  const { mutate: telegramLoginMutate } = useAtomValue(telegramLoginAtom);
@ -35,7 +36,7 @@ const Login = memo(() => {
    const email = emailform.getFieldValue("email");
    setCountdown(10);
    setIsButtonDisabled(true);
-    emailCodeMutate({ is_register: false, email });
+    setEmailCodeData(systemServ.emailCode({ is_register: false, email }));
  };
  const emailhandleSubmit = (values: any) => {
    emailLoginMutate(values);
--- a/src/pages/use/password/retrieve.tsx
+++ b/src/pages/use/password/retrieve.tsx
@ -1,32 +1,73 @@
-import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
+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 { useAtomValue } from "jotai";
 import React, { memo, useEffect, useState } from "react";
 import { emailCodeAtom } from "@/store/system/user.ts";
 import { passwordRules } from "@/pages/use/useTools.tsx";
+import { useAtom } from "jotai/index";
+import systemServ from "@/service/system.ts";
+import { setToken } from "@/store/system.ts";
 const { Title, Text, Link } = Typography;

 const PwdRetrieve = memo(() => {
  const navigate = useNavigate();
  const [retrieveForm] = Form.useForm();
-  const { mutate: emailCodeMutate } = useAtomValue(emailCodeAtom);
+  const [emailCodeData, setEmailCodeData] = useState({});
+  const [pwdRetrieveData, setPwdRetrieveData] = useState({});

-  const handleRetrieveSubmit = (values: any) => {
-    console.log(values);
-    // 调用找回密码API
+  const handleRetrieveSubmit = async (values: any) => {
+    const param = {
+      email: values.email,
+      password: values.password,
+      code: values.code,
+    };
+    const result = await systemServ.pwdRetrieve(param);
+    setPwdRetrieveData(result);
  };

-  const handleGetCode = () => {
+  const handleGetCode = async () => {
    const email = retrieveForm.getFieldValue("email");
-    setCountdown(10);
-    setIsButtonDisabled(true);
-    emailCodeMutate({ email });
+    const result = await systemServ.emailCode({ is_register: false, email });
+    setEmailCodeData(result);
  };

  const [countdown, setCountdown] = useState<number>(0);
  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);

+
+
+  const [gotoLoginModalVisible, SetGotoLoginModalVisible] = useState(false);
+
+  const showGotoLoginModal= () => {
+    SetGotoLoginModalVisible(true);
+  };
+
+  const gotoLoginModalHandleOk = () => {
+    SetGotoLoginModalVisible(false);
+    navigate({ to: "/login" });
+  };
+
+  // const gotoLoginModalHandleCancel = () => {
+  //   SetGotoLoginModalVisible(false);
+  // };
+  //
+
+
+  useEffect(() => {
+    if ((emailCodeData as any)?.code === 0) {
+      setCountdown(10);
+      setIsButtonDisabled(true);
+    }
+  }, [emailCodeData]);
+
+  useEffect(() => {
+    if ((pwdRetrieveData as any)?.code === 0) {
+      message.success("密码找回成功");
+      showGotoLoginModal();
+    }
+  }, [pwdRetrieveData, navigate]);
+
  useEffect(() => {
    let timer: number;
    if (countdown > 0) {
@ -124,6 +165,18 @@ const PwdRetrieve = memo(() => {
          </Row>
        </Col>
      </Row>
+      <Modal
+              title="修改成功"
+              visible={gotoLoginModalVisible}
+              onOk={gotoLoginModalHandleOk}
+              footer={[
+                <Button key="ok" type="primary" onClick={gotoLoginModalHandleOk}>
+                  确认
+                </Button>,
+              ]}
+      >
+        <p>密码修改成功，返回登录。</p>
+      </Modal>
    </Layout>
  );
 });
--- a/src/pages/use/register/index.tsx
+++ b/src/pages/use/register/index.tsx
@ -1,39 +1,38 @@
 import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
-import { LockOutlined, MailOutlined, SecurityScanOutlined } from "@ant-design/icons";
+import {LockOutlined, MailOutlined, SecurityScanOutlined, UserOutlined} from "@ant-design/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import React, { memo, useEffect, useState } from "react";
-import { emailCodeAtom, emailRegisterAtom } from "@/store/system/user.ts";
+import { emailRegisterAtom } from "@/store/system/user.ts";
 import { passwordRules } from "@/pages/use/useTools";
+import systemServ from "@/service/system.ts";
 const { Title, Text, Link } = Typography;

 const Register = memo(() => {
  const navigate = useNavigate();
  const [registerForm] = Form.useForm();
  const { mutate: emailRegisterMutate } = useAtomValue(emailRegisterAtom);
-  const { mutateAsync: emailCodeMutate, data: emailData } = useAtomValue(emailCodeAtom);
-  //const [{ mutate: emailCodeMutate, data: emailData }] = useAtom(emailCodeAtom);
-  //const [, mutate: emailCodeMutate] = useAtom(emailCodeAtom);
+  const [countdown, setCountdown] = useState(10);
+  const [emailCodeData, setEmailCodeData] = useState({});
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+
  const getEmailCode = () => {
    const email = registerForm.getFieldValue("email");
    setCountdown(10);
    setIsButtonDisabled(true);
-    const data = emailCodeMutate({ is_register: true, email });
-    console.log(data);
+    setEmailCodeData(systemServ.emailCode({ is_register: true, email }));
  };
+
  const emailRegisterSubmit = (values: any) => {
    emailRegisterMutate({ email: values.email, password: values.password, code: values.code });
  };

-  const [countdown, setCountdown] = useState<number>(0);
-  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
-
  useEffect(() => {
-    if ((emailData as any)?.countdown === -1) {
+    if ((emailCodeData as any)?.countdown === -1) {
      setCountdown(0);
      setIsButtonDisabled(false);
    }
-  }, [emailData]);
+  }, [emailCodeData]);

  useEffect(() => {
    let timer: number;
@ -134,7 +133,7 @@ const Register = memo(() => {
                    >
                <span
                        style={{
-                    cursor: "pointer", // 设置手型光标
+                          cursor: "pointer",
                          position: "absolute",
                          top: "-70px",
                          right: "0px",
--- a/src/request.ts
+++ b/src/request.ts
@ -54,7 +54,12 @@ axiosInstance.interceptors.response.use(
      case 0:
      case 200:
        //login
-        if (response.config.url?.includes("/sys/login")) {
+        if (
+          response.config.url?.includes("/sys/login") ||
+          response.config.url?.includes("/sys/email/reg") ||
+          response.config.url?.includes("/sys/email/login") ||
+          response.config.url?.includes("/sys/login/telegram")
+        ) {
          setToken(result.data.token);
          const search = new URLSearchParams(window.location.search);
          // eslint-disable-next-line no-case-declarations
--- a/src/service/system.ts
+++ b/src/service/system.ts
@ -21,7 +21,7 @@ const systemServ = {
  },

  emailLogin: (data: any) => {
-    return request.post<System.LoginResponse>("/sys/login/email", data);
+    return request.post<System.LoginResponse>("/sys/email/login", data);
  },
  emailRegister: (data: any) => {
    return request.post<System.LoginResponse>("/sys/email/reg", data);
@ -35,6 +35,9 @@ const systemServ = {
  telegramLogin: (data: any) => {
    return request.post<System.LoginResponse>("/sys/login/telegram", data);
  },
+  pwdRetrieve: (data: any) => {
+    return request.post<System.LoginResponse>("/sys/email/pws", data);
+  },



--- a/src/store/system/user.ts
+++ b/src/store/system/user.ts
@ -40,26 +40,31 @@ export const  upLoginAtom = atomWithMutation<any, UPLoginRequest>((get) => ({
  },
  onSuccess: (res) => {
    message.success(t("login.success"));
-    get(userMenuDataAtom).refetch().then();
+    // setToken(res.data.token);
+    // get(userMenuDataAtom).refetch().then();
    return res.data;
  },
  retry: false,
 }));


-export const emailCodeAtom = atomWithMutation<any, any>((get) => ({
-  mutationKey: ["emailCode"],
-  mutationFn: async (params) => {
+export const emailCodeAtom =  (params) =>atomWithQuery(() => {
+  return {
+    queryKey: ["emailCode",params],
+    queryFn: async () => {
      return await systemServ.emailCode(params);
    },
-  onSuccess: (res) => {
-    if(res.data.countdown===-1){
-      message.error(res.message);
-    }
-    return res.data;
+    select: (data) => {
+      return data.data;
    },
-  retry: false,
-}));
+  };
+});
+
+
+
+
+
+
 export const emailLoginAtom = atomWithMutation<any, any>((get) => ({
  mutationKey: ["emailLogin"],
  mutationFn: async (params) => {
@ -67,18 +72,23 @@ export const emailLoginAtom = atomWithMutation<any, any>((get) => ({
  },
  onSuccess: (res) => {
    message.success(t("login.success"));
-    // console.log('login success', res)
    return res.data;
  },
  retry: false,
 }));
+
+
+
+
+
 export const emailRegisterAtom = atomWithMutation<any, any>((get) => ({
  mutationKey: ["emailRegister"],
  mutationFn: async (params) => {
    return await systemServ.emailRegister(params);
  },
  onSuccess: (res) => {
-    // console.log('login success', res)
+    // setToken(res.data.token);
+    // window.location.href = "/";
    return res.data;
  },
  retry: false,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -14,7 +14,7 @@ const proxyMap = {
  //'/api/v1/certold': 'http://192.168.31.41:8000',
  "/api/v1/cert": "http://127.0.0.1:8000",
  //'/api/v1/cert': 'http://192.168.31.41:8000',
-  "/api/v1/sys": "http://192.168.31.41:8686/",
+  //"/api/v1/sys": "http://192.168.31.41:8686/",
 } as Record<any, string>;

 const proxyConfig = Object.keys(proxyMap).reduce(