|
@ -1,13 +1,32 @@ |
|
|
import {Layout, Input, Button, Typography, Row, Col, Form, message, Modal} 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 React, { memo, useEffect, useState } from "react"; |
|
|
import React, { memo, useEffect, useState } from "react"; |
|
|
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 systemServ from "@/service/system.ts"; |
|
|
import { setToken } from "@/store/system.ts"; |
|
|
|
|
|
|
|
|
import { t } from "i18next"; |
|
|
|
|
|
|
|
|
|
|
|
const languageSet = { |
|
|
|
|
|
向量检索服务免费试用: t("pwdRetrieve.vectorRetrievalServiceFreeTrial", "向量检索服务免费试用"), |
|
|
|
|
|
免费试用向量检索服务玩转大模型生成式检索: t( |
|
|
|
|
|
"pwdRetrieve.freeTrialVectorRetrievalService", |
|
|
|
|
|
"免费试用向量检索服务,玩转大模型生成式检索", |
|
|
|
|
|
), |
|
|
|
|
|
查看详情: t("pwdRetrieve.viewDetails", "查看详情 >"), |
|
|
|
|
|
请输入邮箱: t("pwdRetrieve.pleaseEnterEmail", "请输入邮箱"), |
|
|
|
|
|
获得验证码: t("pwdRetrieve.getVerificationCode", "获得验证码"), |
|
|
|
|
|
秒后重试: t("pwdRetrieve.retryAfterSeconds", "秒后重试"), |
|
|
|
|
|
请输入验证码: t("pwdRetrieve.pleaseEnterVerificationCode", "请输入验证码"), |
|
|
|
|
|
请输入新密码: t("pwdRetrieve.pleaseEnterNewPassword", "请输入新密码"), |
|
|
|
|
|
请确认密码: t("pwdRetrieve.confirmPassword", "请确认密码"), |
|
|
|
|
|
两次输入的密码不一致: t("pwdRetrieve.passwordsDoNotMatch", "两次输入的密码不一致"), |
|
|
|
|
|
找回密码: t("pwdRetrieve.retrievePassword", "找回密码"), |
|
|
|
|
|
返回登录: t("pwdRetrieve.backToLogin", "返回登录"), |
|
|
|
|
|
修改成功: t("pwdRetrieve.changeSuccess", "修改成功"), |
|
|
|
|
|
确认: t("pwdRetrieve.confirm", "确认"), |
|
|
|
|
|
密码修改成功返回登录: t("pwdRetrieve.passwordChangeSuccess", "密码修改成功,返回登录。"), |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const { Title, Text, Link } = Typography; |
|
|
const { Title, Text, Link } = Typography; |
|
|
|
|
|
|
|
|
const PwdRetrieve = memo(() => { |
|
|
const PwdRetrieve = memo(() => { |
|
@ -34,12 +53,9 @@ const PwdRetrieve = memo(() => { |
|
|
|
|
|
|
|
|
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 [gotoLoginModalVisible, SetGotoLoginModalVisible] = useState(false); |
|
|
|
|
|
|
|
|
const showGotoLoginModal= () => { |
|
|
|
|
|
|
|
|
const showGotoLoginModal = () => { |
|
|
SetGotoLoginModalVisible(true); |
|
|
SetGotoLoginModalVisible(true); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -48,12 +64,6 @@ const PwdRetrieve = memo(() => { |
|
|
navigate({ to: "/login" }); |
|
|
navigate({ to: "/login" }); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// const gotoLoginModalHandleCancel = () => {
|
|
|
|
|
|
// SetGotoLoginModalVisible(false);
|
|
|
|
|
|
// };
|
|
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if ((emailCodeData as any)?.code === 0) { |
|
|
if ((emailCodeData as any)?.code === 0) { |
|
|
setCountdown(10); |
|
|
setCountdown(10); |
|
@ -63,7 +73,7 @@ const PwdRetrieve = memo(() => { |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if ((pwdRetrieveData as any)?.code === 0) { |
|
|
if ((pwdRetrieveData as any)?.code === 0) { |
|
|
message.success("密码找回成功"); |
|
|
|
|
|
|
|
|
message.success(languageSet.密码修改成功返回登录); |
|
|
showGotoLoginModal(); |
|
|
showGotoLoginModal(); |
|
|
} |
|
|
} |
|
|
}, [pwdRetrieveData, navigate]); |
|
|
}, [pwdRetrieveData, navigate]); |
|
@ -97,10 +107,10 @@ const PwdRetrieve = memo(() => { |
|
|
<Col> |
|
|
<Col> |
|
|
<Row> |
|
|
<Row> |
|
|
<Col span={12} style={{ padding: "20px" }}> |
|
|
<Col span={12} style={{ padding: "20px" }}> |
|
|
<Title level={3}>向量检索服务免费试用</Title> |
|
|
|
|
|
<Text>免费试用向量检索服务,玩转大模型生成式检索</Text> |
|
|
|
|
|
|
|
|
<Title level={3}>{languageSet.向量检索服务免费试用}</Title> |
|
|
|
|
|
<Text>{languageSet.免费试用向量检索服务玩转大模型生成式检索}</Text> |
|
|
<br /> |
|
|
<br /> |
|
|
<Link href="#">查看详情 ></Link> |
|
|
|
|
|
|
|
|
<Link href="#">{languageSet.查看详情}</Link> |
|
|
</Col> |
|
|
</Col> |
|
|
<Col |
|
|
<Col |
|
|
span={12} |
|
|
span={12} |
|
@ -114,25 +124,30 @@ const PwdRetrieve = memo(() => { |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<Form form={retrieveForm} onFinish={handleRetrieveSubmit} style={{ marginTop: "50px" }}> |
|
|
<Form form={retrieveForm} onFinish={handleRetrieveSubmit} style={{ marginTop: "50px" }}> |
|
|
<Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }]}> |
|
|
|
|
|
|
|
|
<Form.Item name="email" rules={[{ required: true, message: languageSet.请输入邮箱 }]}> |
|
|
<Input |
|
|
<Input |
|
|
size="large" |
|
|
size="large" |
|
|
placeholder="请输入邮箱" |
|
|
|
|
|
|
|
|
placeholder={languageSet.请输入邮箱} |
|
|
prefix={<MailOutlined />} |
|
|
prefix={<MailOutlined />} |
|
|
addonAfter={ |
|
|
addonAfter={ |
|
|
<Button onClick={handleGetCode} disabled={isButtonDisabled}> |
|
|
<Button onClick={handleGetCode} disabled={isButtonDisabled}> |
|
|
{isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"} |
|
|
|
|
|
|
|
|
{isButtonDisabled ? `${countdown}${languageSet.秒后重试}` : languageSet.获得验证码} |
|
|
</Button> |
|
|
</Button> |
|
|
} |
|
|
} |
|
|
/> |
|
|
/> |
|
|
</Form.Item> |
|
|
</Form.Item> |
|
|
<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}> |
|
|
|
|
|
<Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} autoComplete="off" /> |
|
|
|
|
|
|
|
|
<Form.Item name="code" rules={[{ required: true, message: languageSet.请输入验证码 }]}> |
|
|
|
|
|
<Input |
|
|
|
|
|
size="large" |
|
|
|
|
|
placeholder={languageSet.请输入验证码} |
|
|
|
|
|
prefix={<SecurityScanOutlined />} |
|
|
|
|
|
autoComplete="off" |
|
|
|
|
|
/> |
|
|
</Form.Item> |
|
|
</Form.Item> |
|
|
<Form.Item name="password" rules={passwordRules}> |
|
|
<Form.Item name="password" rules={passwordRules}> |
|
|
<Input.Password |
|
|
<Input.Password |
|
|
size="large" |
|
|
size="large" |
|
|
placeholder="请输入新密码" |
|
|
|
|
|
|
|
|
placeholder={languageSet.请输入新密码} |
|
|
prefix={<LockOutlined />} |
|
|
prefix={<LockOutlined />} |
|
|
autoComplete="off" |
|
|
autoComplete="off" |
|
|
/> |
|
|
/> |
|
@ -141,41 +156,46 @@ const PwdRetrieve = memo(() => { |
|
|
name="confirmPassword" |
|
|
name="confirmPassword" |
|
|
dependencies={["password"]} |
|
|
dependencies={["password"]} |
|
|
rules={[ |
|
|
rules={[ |
|
|
{ required: true, message: "请确认密码" }, |
|
|
|
|
|
|
|
|
{ required: true, message: languageSet.请确认密码 }, |
|
|
({ getFieldValue }) => ({ |
|
|
({ getFieldValue }) => ({ |
|
|
validator(_, value) { |
|
|
validator(_, value) { |
|
|
if (!value || getFieldValue("password") === value) { |
|
|
if (!value || getFieldValue("password") === value) { |
|
|
return Promise.resolve(); |
|
|
return Promise.resolve(); |
|
|
} |
|
|
} |
|
|
return Promise.reject(new Error("两次输入的密码不一致")); |
|
|
|
|
|
|
|
|
return Promise.reject(new Error(languageSet.两次输入的密码不一致)); |
|
|
}, |
|
|
}, |
|
|
}), |
|
|
}), |
|
|
]} |
|
|
]} |
|
|
> |
|
|
> |
|
|
<Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} autoComplete="off" /> |
|
|
|
|
|
|
|
|
<Input.Password |
|
|
|
|
|
size="large" |
|
|
|
|
|
placeholder={languageSet.请确认密码} |
|
|
|
|
|
prefix={<LockOutlined />} |
|
|
|
|
|
autoComplete="off" |
|
|
|
|
|
/> |
|
|
</Form.Item> |
|
|
</Form.Item> |
|
|
<Button type="primary" htmlType="submit" style={{ width: "100%" }}> |
|
|
<Button type="primary" htmlType="submit" style={{ width: "100%" }}> |
|
|
找回密码 |
|
|
|
|
|
|
|
|
{languageSet.找回密码} |
|
|
</Button> |
|
|
</Button> |
|
|
</Form> |
|
|
</Form> |
|
|
<Row justify="space-between" style={{ marginTop: "10px" }}> |
|
|
<Row justify="space-between" style={{ marginTop: "10px" }}> |
|
|
<Link onClick={() => navigate({ to: "/login" })}>返回登录</Link> |
|
|
|
|
|
|
|
|
<Link onClick={() => navigate({ to: "/login" })}>{languageSet.返回登录}</Link> |
|
|
</Row> |
|
|
</Row> |
|
|
</Col> |
|
|
</Col> |
|
|
</Row> |
|
|
</Row> |
|
|
</Col> |
|
|
</Col> |
|
|
</Row> |
|
|
</Row> |
|
|
<Modal |
|
|
<Modal |
|
|
title="修改成功" |
|
|
|
|
|
visible={gotoLoginModalVisible} |
|
|
|
|
|
onOk={gotoLoginModalHandleOk} |
|
|
|
|
|
footer={[ |
|
|
|
|
|
<Button key="ok" type="primary" onClick={gotoLoginModalHandleOk}> |
|
|
|
|
|
确认 |
|
|
|
|
|
</Button>, |
|
|
|
|
|
]} |
|
|
|
|
|
|
|
|
title={languageSet.修改成功} |
|
|
|
|
|
visible={gotoLoginModalVisible} |
|
|
|
|
|
onOk={gotoLoginModalHandleOk} |
|
|
|
|
|
footer={[ |
|
|
|
|
|
<Button key="ok" type="primary" onClick={gotoLoginModalHandleOk}> |
|
|
|
|
|
{languageSet.确认} |
|
|
|
|
|
</Button>, |
|
|
|
|
|
]} |
|
|
> |
|
|
> |
|
|
<p>密码修改成功,返回登录。</p> |
|
|
|
|
|
|
|
|
<p>{languageSet.密码修改成功返回登录}</p> |
|
|
</Modal> |
|
|
</Modal> |
|
|
</Layout> |
|
|
</Layout> |
|
|
); |
|
|
); |
|
|