import React, { useState, useEffect } from 'react'; import { Modal, message, Form, Input } from 'antd'; import { ExclamationCircleFilled } from '@ant-design/icons'; import { connect } from 'react-redux'; import globalHeader from '@wisdom-utils/components/lib/AppLayout/locales/zh-CN/globalHeader'; import { actionCreators } from '@/containers/App/store'; import { appService } from '@/api'; import styles from './index.less'; const formItemLayout = { labelCol: { xs: { span: 6 }, sm: { span: 6 }, }, }; /** * 云平台上判断是否是默认密码 * 如果是默认密码,强制要求修改密码 */ let info = '666'; let infoPre = 'panda'; const ValidContainer = props => { const [needChangePassword, setNeedChangePassword] = useState(false); const [form] = Form.useForm(); useEffect(() => { if (window.location.origin.replace(/^(http|https):\/\//, '') !== 'panda-water.cn') return; const { global } = props; const tk = global.token; if (tk) { appService.validDefaultPWD({ ignoreSite: true, token: tk }).then(res => { if(res.code === 0) { const { data } = res; setNeedChangePassword(data.valid); info = data.info; } }).catch(err => { }) } }, []); const handleOK = (e) => { e.stopPropagation(); form .validateFields() .then((res) => { const params = { password: `${infoPre}${info}`, // 拼接默认密码 newpassword: res.newPwd, token: window.globalConfig.token, ignoreSite: true, } appService .changePassword(params) .then((res) => { if (res.success) { message.success(globalHeader['component.account.password.update.success']); setTimeout(() => { // setNeedChangePassword(false); props.logout(); }, 300); } else { message.error(globalHeader['component.account.oldpassword.errorMessage']); } }) .catch((error) => { message.error(globalHeader['component.account.password.update.fail']); }); }).catch((error) => { console.log(error) }); } return ( <> {props.children} <Modal title="修改密码" centered width="362px" visible={needChangePassword} wrapClassName={styles.updatePassword} cancelText="取消" okText="确定" onOk={handleOK} onCancel={event => message.info('用户首次登录之前必须修改密码')} // zIndex={2000} > <div className={styles['info-label']}> <ExclamationCircleFilled style={{color: '#FCAC0F', fontSize: '16px'}}/> <span>用户首次登录之前必须修改密码</span> </div> <Form labelAlign="left" {...formItemLayout} form={form}> <Form.Item name="newPwd" label="新密码" rules={[ { required: true, message: '请输入新密码', }, { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9_]{8,16}$/, message: '密码需为8-16个数字、字符和下划线', }, ({ getFieldValue }) => ({ validator(rule, value) { if(value === `${infoPre}${props?.global?.userInfo?.loginName ?? info}` || value === 'panda666') return Promise.reject('密码规则不允许'); return Promise.resolve(); }, }) ]} hasFeedback > <Input.Password /> </Form.Item> <Form.Item name="confirmPwd" label="确认密码" dependencies={['newPwd']} hasFeedback rules={[ { required: true, message: '请输入确认密码', }, ({ getFieldValue }) => ({ validator(rule, value) { if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9_]{8,16}$/.test(value)) return Promise.reject('密码需为8-16个数字、字符和下划线'); if (value === `${infoPre}${props?.global?.userInfo?.loginName ?? info}` || value === 'panda666') return Promise.reject('密码规则不允许'); if (!value || getFieldValue('newPwd') === value) { return Promise.resolve(); } return Promise.reject('确认密码与新密码输入不一致'); }, }), ]} > <Input.Password /> </Form.Item> </Form> </Modal> </> ); }; const mapStateToProps = state => ({ global: state.getIn(['global', 'globalConfig']), }); const mapDispatchToProps = dispatch => ({ logout() { dispatch(actionCreators.logout()); }, }); export default connect( mapStateToProps, mapDispatchToProps, )(ValidContainer);