146 lines
3.5 KiB
TypeScript
146 lines
3.5 KiB
TypeScript
import { CaptchaModal, PageContainer } from '@/components';
|
||
import { PERMISSION } from '@/constants';
|
||
import { auth } from '@/services';
|
||
import { aesEncrypt } from '@/utils/aes';
|
||
import { formLayout } from '@/utils/formLayout';
|
||
import {
|
||
ProCard,
|
||
ProForm,
|
||
ProFormInstance,
|
||
ProFormText,
|
||
} from '@ant-design/pro-components';
|
||
import { useModel } from '@umijs/max';
|
||
import { Col, message, Row, Space } from 'antd';
|
||
import React, { useRef, useState } from 'react';
|
||
|
||
const Account: React.FC = () => {
|
||
const formRef = useRef<ProFormInstance>();
|
||
const { initialState } = useModel('@@initialState');
|
||
const [visible, setVisible] = useState(false);
|
||
|
||
const onFinish = async (token: string) => {
|
||
const data = formRef.current?.getFieldsValue();
|
||
const { success } = await auth.userAuth.updatePassword({
|
||
...data,
|
||
password: aesEncrypt(data.password),
|
||
oldPassword: aesEncrypt(data.oldPassword),
|
||
confirmPassword: aesEncrypt(data.confirmPassword),
|
||
token,
|
||
});
|
||
|
||
if (success) {
|
||
message.success('修改密码成功');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<PageContainer
|
||
permission={PERMISSION.OPERATION_PERMISSION_VIEW}
|
||
fieldProps={{
|
||
title: '账户设置',
|
||
}}
|
||
>
|
||
<CaptchaModal
|
||
visible={visible}
|
||
setVisible={setVisible}
|
||
onFinish={onFinish}
|
||
/>
|
||
<ProCard>
|
||
<ProForm<AuthAPI.UpdatePasswordCmd & Record<string, any>>
|
||
{...formLayout()}
|
||
// @ts-ignore
|
||
request={() => {
|
||
return {
|
||
userId: initialState?.currentUser?.userId,
|
||
};
|
||
}}
|
||
onFinish={async () => {
|
||
setVisible(true);
|
||
}}
|
||
formRef={formRef}
|
||
submitter={{
|
||
render: (_, dom) => {
|
||
return (
|
||
<Row>
|
||
<Col span={14} offset={4}>
|
||
<Space>{dom}</Space>
|
||
</Col>
|
||
</Row>
|
||
);
|
||
},
|
||
}}
|
||
>
|
||
<ProFormText name={'userId'} hidden={true} />
|
||
<ProFormText label={'账户名'} name={'account'} readonly={true} />
|
||
{/* 旧密码 */}
|
||
<ProFormText
|
||
label={'旧密码'}
|
||
name={'oldPassword'}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入旧密码',
|
||
},
|
||
]}
|
||
fieldProps={{
|
||
type: 'password',
|
||
}}
|
||
/>
|
||
{/* 新密码 */}
|
||
<ProFormText
|
||
label={'新密码'}
|
||
name={'password'}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入新密码',
|
||
},
|
||
{
|
||
validator: (_, value) => {
|
||
if (value === formRef.current?.getFieldValue('oldPassword')) {
|
||
return Promise.reject(new Error('新密码不能与旧密码相同'));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
},
|
||
{
|
||
pattern:
|
||
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
|
||
message:
|
||
'密码必须包含至少一个数字、一个大写字母、一个小写字母和一个特殊字符，并且长度至少为8个字符。',
|
||
},
|
||
]}
|
||
fieldProps={{
|
||
type: 'password',
|
||
}}
|
||
/>
|
||
{/* 确认密码 */}
|
||
<ProFormText
|
||
label={'确认密码'}
|
||
name={'confirmPassword'}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请再次输入密码',
|
||
},
|
||
{
|
||
validator: (_, value) => {
|
||
if (value !== formRef.current?.getFieldValue('password')) {
|
||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||
}
|
||
return Promise.resolve();
|
||
},
|
||
},
|
||
]}
|
||
fieldProps={{
|
||
type: 'password',
|
||
}}
|
||
/>
|
||
</ProForm>
|
||
</ProCard>
|
||
</PageContainer>
|
||
);
|
||
};
|
||
|
||
export default Account;
|