Commit e1d7f610 authored by 文旺-丰林-DEV's avatar 文旺-丰林-DEV

add reset password and logout feature

parent 0673fca2
......@@ -20,8 +20,8 @@ const LoginModal = (props: ILoginModalProps) => {
const submitRef = useRef<HTMLButtonElement>(null);
const reset = () => {
setOpen(false);
form.resetFields();
setOpen(false);
};
useEffect(() => {
......
/* eslint-disable @typescript-eslint/no-unused-expressions */
import { Form, Button, Col, Row, Input, Typography, Grid, message, Space } from 'antd';
import {
Form,
Button,
Col,
Row,
Input,
Typography,
Grid,
message,
Space,
Modal,
Divider,
} from 'antd';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import styles from './index.less';
import ChatFirstContent from './components/content';
import {
LoadingOutlined,
LockOutlined,
LogoutOutlined,
MenuOutlined,
PlusOutlined,
SettingOutlined,
......@@ -19,12 +33,14 @@ import {
GetChatGLMToken,
GetPromptList,
createSession,
postResetUser,
updateSession,
} from '@/services/chatGLM/api';
import { useAccess } from 'umi';
import { PageLoading } from '@ant-design/pro-layout';
import { checkIsTokenExpires } from '@/access';
import TextArea from 'antd/lib/input/TextArea';
import Password from 'antd/lib/input/Password';
const { useBreakpoint } = Grid;
const { Title } = Typography;
......@@ -48,6 +64,9 @@ const Chat: React.FC = () => {
const [showSider, setShowSider] = useState(!isMobileDevice());
const [firstChat, setFirstChat] = useState(false);
const [form] = Form.useForm();
const [resetForm] = Form.useForm();
const [resetPasswordModal, setResetPasswordModal] = useState(false);
const [restLoading, setResetLoading] = useState(false);
const { data: glmToken, run: getChatGLMToken } = useRequest(GetChatGLMToken, { manual: true });
const {
data: promptList,
......@@ -164,6 +183,43 @@ const Chat: React.FC = () => {
);
};
const validatePassword = (_, value: any) => {
const regex =
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d!@#$%^&*()_+}{":?><,./;'\[\]\\=-]{8,16}$/;
if (regex.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('密码必须包含数字、大小写字母且长度为8-16位'));
};
const handleFinish = (values: any) => {
setResetLoading(true);
const data = {
id: JSON.parse(localStorage.getItem('user') || '')?.id,
Password: values?.newPassword,
};
postResetUser(data)
.then(() => {
setResetLoading(false);
setResetPasswordModal(false);
resetForm.resetFields();
message.success('重置成功');
setTimeout(() => {
logout();
}, 1000);
})
.catch(() => {
setResetLoading(false);
});
};
const logout = () => {
localStorage.removeItem('user');
localStorage.removeItem('account');
localStorage.removeItem('expires');
setLoginModalOpen(true);
};
return (
<>
<LoginModal open={loginModalOpen} setOpen={setLoginModalOpen} />
......@@ -198,7 +254,7 @@ const Chat: React.FC = () => {
<Col
span={24}
className={styles.chatFooterItem}
hidden={!access.roles?.find((x) => ['管理员', 'admin'].includes(x))}
hidden={!access.roles?.find((x: string) => ['管理员', 'admin'].includes(x))}
onClick={() => {
history.push('/welcome');
}}
......@@ -208,12 +264,34 @@ const Chat: React.FC = () => {
后台管理
</Space>
</Col>
<Col span={24} hidden={loginModalOpen} className={styles.chatFooterItem}>
<Space
wrap
onClick={() => {
setResetPasswordModal(true);
}}
>
<LockOutlined />
重置密码
</Space>
</Col>
<Col span={24} className={styles.chatFooterItem} style={{ color: '#009B95' }}>
<Space wrap>
<UserOutlined />
{access?.name || '请先登录'}
</Space>
</Col>
<Col
hidden={loginModalOpen}
span={24}
className={styles.chatFooterItem}
onClick={logout}
>
<Space wrap>
<LogoutOutlined />
退出登录
</Space>
</Col>
</Row>
</div>
</Col>
......@@ -350,6 +428,56 @@ const Chat: React.FC = () => {
</Col>
</Form>
</Row>
<Modal
closable={true}
title="重置密码"
destroyOnClose={true}
open={resetPasswordModal}
onCancel={() => {
setResetPasswordModal(false);
}}
footer={null}
>
<Form form={resetForm} onFinish={handleFinish} name="resetPassword">
<Item
name={'newPassword'}
label={'新密码'}
rules={[{ required: true, message: '请输入密码' }, { validator: validatePassword }]}
>
<Password placeholder="请输入6-12位的数字或者字母" />
</Item>
<Item
name={'confirmNewPassword'}
label={'确认新密码'}
rules={[
{
required: true,
message: '请确认你的密码',
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('newPassword') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('两次密码输入不一致'));
},
}),
]}
>
<Password placeholder="请确认你的新密码" />
</Item>
<Divider />
<Row justify={'center'}>
<Col>
<Item key={'saveButton'} noStyle={true}>
<Button key="submit" type="primary" loading={restLoading} htmlType="submit">
重置
</Button>
</Item>
</Col>
</Row>
</Form>
</Modal>
</>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment