|
@ -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 { LockOutlined, MailOutlined, SecurityScanOutlined } from "@ant-design/icons"; |
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router"; |
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router"; |
|
|
import { useAtomValue } from "jotai"; |
|
|
import { useAtomValue } from "jotai"; |
|
|
import React, { memo, useEffect, useState } from "react"; |
|
|
import React, { memo, useEffect, useState } from "react"; |
|
|
import { emailCodeAtom } from "@/store/system/user.ts"; |
|
|
import { emailCodeAtom } from "@/store/system/user.ts"; |
|
|
import { passwordRules } from "@/pages/use/useTools.tsx"; |
|
|
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 { Title, Text, Link } = Typography; |
|
|
|
|
|
|
|
|
const PwdRetrieve = memo(() => { |
|
|
const PwdRetrieve = memo(() => { |
|
|
const navigate = useNavigate(); |
|
|
const navigate = useNavigate(); |
|
|
const [retrieveForm] = Form.useForm(); |
|
|
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"); |
|
|
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 [countdown, setCountdown] = useState<number>(0); |
|
|
const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false); |
|
|
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(() => { |
|
|
useEffect(() => { |
|
|
let timer: number; |
|
|
let timer: number; |
|
|
if (countdown > 0) { |
|
|
if (countdown > 0) { |
|
@ -124,6 +165,18 @@ const PwdRetrieve = memo(() => { |
|
|
</Row> |
|
|
</Row> |
|
|
</Col> |
|
|
</Col> |
|
|
</Row> |
|
|
</Row> |
|
|
|
|
|
<Modal |
|
|
|
|
|
title="修改成功" |
|
|
|
|
|
visible={gotoLoginModalVisible} |
|
|
|
|
|
onOk={gotoLoginModalHandleOk} |
|
|
|
|
|
footer={[ |
|
|
|
|
|
<Button key="ok" type="primary" onClick={gotoLoginModalHandleOk}> |
|
|
|
|
|
确认 |
|
|
|
|
|
</Button>, |
|
|
|
|
|
]} |
|
|
|
|
|
> |
|
|
|
|
|
<p>密码修改成功,返回登录。</p> |
|
|
|
|
|
</Modal> |
|
|
</Layout> |
|
|
</Layout> |
|
|
); |
|
|
); |
|
|
}); |
|
|
}); |
|
|