Browse Source

登录 修改 注册 接口完成

main
lk 7 days ago
parent
commit
6d33e0f198
  1. 5
      src/pages/use/login/index.tsx
  2. 71
      src/pages/use/password/retrieve.tsx
  3. 27
      src/pages/use/register/index.tsx
  4. 7
      src/request.ts
  5. 5
      src/service/system.ts
  6. 36
      src/store/system/user.ts
  7. 2
      vite.config.ts

5
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);

71
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>
);
});

27
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",

7
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

5
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);
},

36
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,

2
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(

Loading…
Cancel
Save