dark
/
pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登录 修改 注册 本地化接口已写

main
lk 2 months ago
parent
402a6b4bd2
commit
28cd4e28ed
3 changed files with 249 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 91
      src/pages/use/login/index.tsx
  2. 98
      src/pages/use/password/retrieve.tsx
  3. 240
      src/pages/use/register/index.tsx

91
src/pages/use/login/index.tsx
View File

@ -1,22 +1,38 @@
import { Layout, Tabs, Input, Button, Typography, Row, Col, Form } from "antd";
import { QrcodeOutlined, UserOutlined, LockOutlined } from "@ant-design/icons";
import SelectLang from "@/components/select-lang";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useAtom, useAtomValue } from "jotai";
import { useTranslation } from "@/i18n.ts";
import {
emailCodeAtom,
emailLoginAtom,
telegramCodeAtom,
telegramLoginAtom,
upLoginAtom,
} from "@/store/system/user.ts";
import { useAtomValue } from "jotai";
import { emailLoginAtom, telegramLoginAtom, upLoginAtom } from "@/store/system/user.ts";
import React, { memo, useEffect, useLayoutEffect, useState } from "react";
import systemServ from "@/service/system.ts";
import { t } from "i18next";
const { Title, Text, Link } = Typography;
const { TabPane } = Tabs;
const i18nPrefix = "login";
const Login = memo(() => {
const languageSet = {
邮箱密码登录: t(`${i18nPrefix}.emailPasswordLogin`, "邮箱密码登录"),
向量检索服务免费试用: t(`${i18nPrefix}.vectorRetrievalServiceFreeTrial`, "向量检索服务免费试用"),
免费试用向量检索服务玩转大模型生成式检索: t(
`${i18nPrefix}.freeTrialVectorRetrievalService`,
"免费试用向量检索服务，玩转大模型生成式检索",
),
查看详情: t(`${i18nPrefix}.viewDetails`, "查看详情 >"),
请输入邮箱: t(`${i18nPrefix}.pleaseEnterEmail`, "请输入邮箱"),
请输入登录密码: t(`${i18nPrefix}.pleaseEnterPassword`, "请输入登录密码"),
登录: t(`${i18nPrefix}.login`, "登录"),
邮箱验证登录: t(`${i18nPrefix}.emailVerificationLogin`, "邮箱验证登录"),
获得验证码: t(`${i18nPrefix}.getVerificationCode`, "获得验证码"),
请输入验证码: t(`${i18nPrefix}.pleaseEnterVerificationCode`, "请输入验证码"),
飞机验证登录: t(`${i18nPrefix}.telegramVerificationLogin`, "飞机验证登录"),
获得飞机验证码: t(`${i18nPrefix}.getTelegramVerificationCode`, "获得飞机验证码"),
请输入飞机验证码: t(`${i18nPrefix}.pleaseEnterTelegramVerificationCode`, "请输入飞机验证码"),
注册: t(`${i18nPrefix}.register`, "注册"),
忘记密码: t(`${i18nPrefix}.forgotPassword`, "忘记密码"),
};
const navigate = useNavigate();
const [upform] = Form.useForm();
const [emailform] = Form.useForm();
@ -100,10 +116,10 @@ const Login = memo(() => {
<Col>
<Row>
<Col span={12} style={{ padding: "20px" }}>
<Title level={3}>向量检索服务免费试用</Title>
<Text>免费试用向量检索服务，玩转大模型生成式检索</Text>
<Title level={3}>{languageSet.向量检索服务免费试用}</Title>
<Text>{languageSet.免费试用向量检索服务玩转大模型生成式检索}</Text>
<br />
<Link href="#">查看详情 &gt;</Link>
<Link href="#">{languageSet.查看详情}</Link>
</Col>
<Col
span={12}
@ -117,78 +133,75 @@ const Login = memo(() => {
}}
>
<Tabs defaultActiveKey="1" style={{ marginTop: "50px" }}>
<TabPane tab="邮箱密码登录" key="1">
<TabPane tab={languageSet.邮箱密码登录} key="1">
<Form form={upform} onFinish={uphandleSubmit}>
<Form.Item name="username" rules={[{ required: true, message: "请输入邮箱" }]}>
<Input size="large" placeholder="请输入邮箱" prefix={<UserOutlined />} />
<Form.Item name="username" rules={[{ required: true, message: languageSet.请输入邮箱 }]}>
<Input size="large" placeholder={languageSet.请输入邮箱} prefix={<UserOutlined />} />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: "请输入登录密码" }]}>
<Form.Item name="password" rules={[{ required: true, message: languageSet.请输入登录密码 }]}>
<Input.Password
size="large"
placeholder="请输入登录密码"
placeholder={languageSet.请输入登录密码}
prefix={<LockOutlined />}
autoComplete="off"
/>
</Form.Item>
{/*<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>*/}
{/* <Input.Password size="large" placeholder="验证码" prefix={<LockOutlined />} />*/}
{/*</Form.Item>*/}
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
登录
{languageSet.登录}
</Button>
</Form>
</TabPane>
<TabPane tab="邮箱验证登录" key="2">
<TabPane tab={languageSet.邮箱验证登录} key="2">
<Form form={emailform} onFinish={emailhandleSubmit}>
<Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }]}>
<Form.Item name="email" rules={[{ required: true, message: languageSet.请输入邮箱 }]}>
<Input
size="large"
placeholder="请输入邮箱"
placeholder={languageSet.请输入邮箱}
prefix={<UserOutlined />}
addonAfter={
<Button onClick={getEmailCode} disabled={isButtonDisabled}>
{isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"}
{isButtonDisabled ? `${countdown}秒后重试` : languageSet.获得验证码}
</Button>
}
/>
</Form.Item>
<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
<Form.Item name="code" rules={[{ required: true, message: languageSet.请输入验证码 }]}>
<Input.Password
size="large"
placeholder="请输入验证码"
placeholder={languageSet.请输入验证码}
prefix={<LockOutlined />}
autoComplete="off"
/>
</Form.Item>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
登录
{languageSet.登录}
</Button>
</Form>
</TabPane>
<TabPane tab="飞机验证登录" key="3">
<TabPane tab={languageSet.飞机验证登录} key="3">
<Form form={telegramform} onFinish={telegramhandleSubmit}>
<Form.Item name="telegram" rules={[{ required: true, message: "请输入邮箱" }]}>
<Form.Item name="telegram" rules={[{ required: true, message: languageSet.请输入邮箱 }]}>
<Input
size="large"
placeholder="请输入邮箱"
placeholder={languageSet.请输入邮箱}
prefix={<UserOutlined />}
addonAfter={
<Button onClick={getTelegramCode} disabled={isButtonDisabled}>
{isButtonDisabled ? `${countdown}秒后重试` : "获得飞机验证码"}
{isButtonDisabled ? `${countdown}秒后重试` : languageSet.获得飞机验证码}
</Button>
}
/>
</Form.Item>
<Form.Item name="code" rules={[{ required: true, message: "请输入飞机验证码" }]}>
<Form.Item name="code" rules={[{ required: true, message: languageSet.请输入飞机验证码 }]}>
<Input.Password
size="large"
placeholder="请输入飞机验证码"
placeholder={languageSet.请输入飞机验证码}
prefix={<LockOutlined />}
autoComplete="off"
/>
</Form.Item>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
登录
{languageSet.登录}
</Button>
</Form>
</TabPane>
@ -220,11 +233,11 @@ const Login = memo(() => {
}}
onClick={() => navigate({ to: "/register" })}
>
注册
{languageSet.注册}
</span>
</div>
<Row justify="space-between" style={{ marginTop: "10px" }}>
<Link onClick={() => navigate({ to: "/pwdRetrieve" })}>忘记密码</Link>
<Link onClick={() => navigate({ to: "/pwdRetrieve" })}>{languageSet.忘记密码}</Link>
</Row>
</Col>
</Row>

98
src/pages/use/password/retrieve.tsx
View File

@ -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 { 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";
import { t } from "i18next";
const languageSet = {
向量检索服务免费试用: t("pwdRetrieve.vectorRetrievalServiceFreeTrial", "向量检索服务免费试用"),
免费试用向量检索服务玩转大模型生成式检索: t(
"pwdRetrieve.freeTrialVectorRetrievalService",
"免费试用向量检索服务，玩转大模型生成式检索",
),
查看详情: t("pwdRetrieve.viewDetails", "查看详情 &gt;"),
请输入邮箱: 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 PwdRetrieve = memo(() => {
@ -34,12 +53,9 @@ const PwdRetrieve = memo(() => {
const [countdown, setCountdown] = useState<number>(0);
const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
const [gotoLoginModalVisible, SetGotoLoginModalVisible] = useState(false);
const showGotoLoginModal= () => {
const showGotoLoginModal = () => {
SetGotoLoginModalVisible(true);
};
@ -48,12 +64,6 @@ const PwdRetrieve = memo(() => {
navigate({ to: "/login" });
};
// const gotoLoginModalHandleCancel = () => {
// SetGotoLoginModalVisible(false);
// };
//
useEffect(() => {
if ((emailCodeData as any)?.code === 0) {
setCountdown(10);
@ -63,7 +73,7 @@ const PwdRetrieve = memo(() => {
useEffect(() => {
if ((pwdRetrieveData as any)?.code === 0) {
message.success("密码找回成功");
message.success(languageSet.密码修改成功返回登录);
showGotoLoginModal();
}
}, [pwdRetrieveData, navigate]);
@ -97,10 +107,10 @@ const PwdRetrieve = memo(() => {
<Col>
<Row>
<Col span={12} style={{ padding: "20px" }}>
<Title level={3}>向量检索服务免费试用</Title>
<Text>免费试用向量检索服务，玩转大模型生成式检索</Text>
<Title level={3}>{languageSet.向量检索服务免费试用}</Title>
<Text>{languageSet.免费试用向量检索服务玩转大模型生成式检索}</Text>
<br />
<Link href="#">查看详情 &gt;</Link>
<Link href="#">{languageSet.查看详情}</Link>
</Col>
<Col
span={12}
@ -114,25 +124,30 @@ const PwdRetrieve = memo(() => {
}}
>
<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
size="large"
placeholder="请输入邮箱"
placeholder={languageSet.请输入邮箱}
prefix={<MailOutlined />}
addonAfter={
<Button onClick={handleGetCode} disabled={isButtonDisabled}>
{isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"}
{isButtonDisabled ? `${countdown}${languageSet.秒后重试}` : languageSet.获得验证码}
</Button>
}
/>
</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 name="password" rules={passwordRules}>
<Input.Password
size="large"
placeholder="请输入新密码"
placeholder={languageSet.请输入新密码}
prefix={<LockOutlined />}
autoComplete="off"
/>
@ -141,41 +156,46 @@ const PwdRetrieve = memo(() => {
name="confirmPassword"
dependencies={["password"]}
rules={[
{ required: true, message: "请确认密码" },
{ required: true, message: languageSet.请确认密码 },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
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>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
找回密码
{languageSet.找回密码}
</Button>
</Form>
<Row justify="space-between" style={{ marginTop: "10px" }}>
<Link onClick={() => navigate({ to: "/login" })}>返回登录</Link>
<Link onClick={() => navigate({ to: "/login" })}>{languageSet.返回登录}</Link>
</Row>
</Col>
</Row>
</Col>
</Row>
<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>
</Layout>
);

240
src/pages/use/register/index.tsx
View File

@ -1,11 +1,32 @@
import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
import {LockOutlined, MailOutlined, SecurityScanOutlined, UserOutlined} from "@ant-design/icons";
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 { emailRegisterAtom } from "@/store/system/user.ts";
import { passwordRules } from "@/pages/use/useTools";
import systemServ from "@/service/system.ts";
import { t } from "i18next";
const languageSet = {
向量检索服务免费试用: t("register.vectorRetrievalServiceFreeTrial", "向量检索服务免费试用"),
免费试用向量检索服务玩转大模型生成式检索: t(
"register.freeTrialVectorRetrievalService",
"免费试用向量检索服务，玩转大模型生成式检索",
),
查看详情: t("register.viewDetails", "查看详情 &gt;"),
请输入邮箱: t("register.pleaseEnterEmail", "请输入邮箱"),
获得验证码: t("register.getVerificationCode", "获得验证码"),
秒后重试: t("register.retryAfterSeconds", "秒后重试"),
请输入验证码: t("register.pleaseEnterVerificationCode", "请输入验证码"),
请输入密码: t("register.pleaseEnterPassword", "请输入密码"),
请确认密码: t("register.confirmPassword", "请确认密码"),
两次输入的密码不一致: t("register.passwordsDoNotMatch", "两次输入的密码不一致"),
注册: t("register.register", "注册"),
登录: t("register.login", "登录"),
返回登录: t("register.backToLogin", "返回登录"),
};
const { Title, Text, Link } = Typography;
const Register = memo(() => {
@ -51,111 +72,126 @@ const Register = memo(() => {
}, []);
return (
<Layout
style={{
height: "100vh",
background: "url('https://placehold.co/1920x1080') no-repeat center center",
backgroundSize: "cover",
}}
>
<Row justify="center" align="middle" style={{ height: "100%" }}>
<Col>
<Row>
<Col span={12} style={{ padding: "20px" }}>
<Title level={3}>向量检索服务免费试用</Title>
<Text>免费试用向量检索服务，玩转大模型生成式检索</Text>
<br />
<Link href="#">查看详情 &gt;</Link>
</Col>
<Col
span={12}
style={{
padding: "20px",
background: "#fff",
borderRadius: "8px",
position: "relative",
width: "500px",
height: "500px",
}}
>
<Form form={registerForm} onFinish={emailRegisterSubmit} style={{ marginTop: "50px" }}>
<Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }]}>
<Input
size="large"
placeholder="请输入邮箱"
prefix={<MailOutlined />}
addonAfter={
<Button onClick={getEmailCode} disabled={isButtonDisabled}>
{isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"}
</Button>
}
/>
</Form.Item>
<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
<Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} autoComplete="off" />
</Form.Item>
<Form.Item name="password" rules={passwordRules}>
<Input.Password size="large" placeholder="请输入密码" prefix={<LockOutlined />} autoComplete="off" />
</Form.Item>
<Form.Item
name="confirmPassword"
dependencies={["password"]}
rules={[
{ required: true, message: "请确认密码" },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(new Error("两次输入的密码不一致"));
},
}),
]}
>
<Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} autoComplete="off" />
</Form.Item>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
注册
<Layout
style={{
height: "100vh",
background: "url('https://placehold.co/1920x1080') no-repeat center center",
backgroundSize: "cover",
}}
>
<Row justify="center" align="middle" style={{ height: "100%" }}>
<Col>
<Row>
<Col span={12} style={{ padding: "20px" }}>
<Title level={3}>{languageSet.向量检索服务免费试用}</Title>
<Text>{languageSet.免费试用向量检索服务玩转大模型生成式检索}</Text>
<br />
<Link href="#">{languageSet.查看详情}</Link>
</Col>
<Col
span={12}
style={{
padding: "20px",
background: "#fff",
borderRadius: "8px",
position: "relative",
width: "500px",
height: "500px",
}}
>
<Form form={registerForm} onFinish={emailRegisterSubmit} style={{ marginTop: "50px" }}>
<Form.Item name="email" rules={[{ required: true, message: languageSet.请输入邮箱 }]}>
<Input
size="large"
placeholder={languageSet.请输入邮箱}
prefix={<MailOutlined />}
addonAfter={
<Button onClick={getEmailCode} disabled={isButtonDisabled}>
{isButtonDisabled ? `${countdown}${languageSet.秒后重试}` : languageSet.获得验证码}
</Button>
</Form>
<div
style={{
position: "absolute",
top: 0,
right: 0,
width: 0,
height: 0,
borderLeft: "80px solid transparent",
borderTop: "80px solid #ff9800",
textAlign: "center",
}}
>
}
/>
</Form.Item>
<Form.Item name="code" rules={[{ required: true, message: languageSet.请输入验证码 }]}>
<Input
size="large"
placeholder={languageSet.请输入验证码}
prefix={<SecurityScanOutlined />}
autoComplete="off"
/>
</Form.Item>
<Form.Item name="password" rules={passwordRules}>
<Input.Password
size="large"
placeholder={languageSet.请输入密码}
prefix={<LockOutlined />}
autoComplete="off"
/>
</Form.Item>
<Form.Item
name="confirmPassword"
dependencies={["password"]}
rules={[
{ required: true, message: languageSet.请确认密码 },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(new Error(languageSet.两次输入的密码不一致));
},
}),
]}
>
<Input.Password
size="large"
placeholder={languageSet.请确认密码}
prefix={<LockOutlined />}
autoComplete="off"
/>
</Form.Item>
<Button type="primary" htmlType="submit" style={{ width: "100%" }}>
{languageSet.注册}
</Button>
</Form>
<div
style={{
position: "absolute",
top: 0,
right: 0,
width: 0,
height: 0,
borderLeft: "80px solid transparent",
borderTop: "80px solid #ff9800",
textAlign: "center",
}}
>
<span
style={{
cursor: "pointer",
position: "absolute",
top: "-70px",
right: "0px",
color: "#fff",
fontSize: "16px",
transform: "rotate(0deg)",
textAlign: "center",
width: "60px",
display: "block",
}}
onClick={() => navigate({ to: "/login" })}
style={{
cursor: "pointer",
position: "absolute",
top: "-70px",
right: "0px",
color: "#fff",
fontSize: "16px",
transform: "rotate(0deg)",
textAlign: "center",
width: "60px",
display: "block",
}}
onClick={() => navigate({ to: "/login" })}
>
登录
{languageSet.登录}
</span>
</div>
<Row justify="space-between" style={{ marginTop: "10px" }}>
<Link onClick={() => navigate({ to: "/login" })}>返回登录</Link>
</Row>
</Col>
</Row>
</Col>
</Row>
</Layout>
</div>
<Row justify="space-between" style={{ marginTop: "10px" }}>
<Link onClick={() => navigate({ to: "/login" })}>{languageSet.返回登录}</Link>
</Row>
</Col>
</Row>
</Col>
</Row>
</Layout>
);
});

Write Preview
Loading…
Cancel
Save