/* eslint-disable prettier/prettier */ 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 { encipher } from '@wisdom-utils/utils/lib/helpers'; import styles from './index.less'; const formItemLayout = { labelCol: { xs: { span: 6 }, sm: { span: 6 }, }, }; const getIOT = () => window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html' || window.globalConfig.loginTemplate === '新春 - 智联.html'; /** * 云平台上判断是否是默认密码 * 如果是默认密码,强制要求修改密码 */ const ValidContainer = props => { const needChange = Boolean(localStorage.getItem('password_needChange')); const [needChangePassword, setNeedChangePassword] = useState(needChange || false); const [form] = Form.useForm(); // eslint-disable-next-line react/no-this-in-sfc let rules = localStorage.getItem('password_pwdRegex') ? localStorage.getItem('password_pwdRegex') : ''; const check = localStorage.getItem('password_token'); const rulesTip = localStorage.getItem('password_pwdRegexTip') ? localStorage.getItem('password_pwdRegexTip') : ''; const accessToken = localStorage.getItem('access_token') ? localStorage.getItem('access_token') : ''; let reg; try { reg = new RegExp(rules); } catch (error) { rules = ''; reg = new RegExp(rules); } useEffect(() => { // if (window.location.origin.replace(/^(http|https):\/\//, '') !== 'panda-water.cn') return; const { global } = props; const tk = global.token; // eslint-disable-next-line no-eval if (tk) { if (rules !== '' && check && check === accessToken) { setNeedChangePassword(true); } } }, []); const handleOK = e => { e.stopPropagation(); form .validateFields() .then(res => { const params = getIOT() ? { newPassword: res.newPwd, phone: window.globalConfig.userInfo.Phone, } : { OldPassWord: encipher(res.oldPwd, window.globalConfig.encrypt).toUpperCase(), NewPassWord: encipher(res.newPwd, window.globalConfig.encrypt).toUpperCase(), UserId: window.globalConfig.userInfo.OID, }; appService .changePassword(params) // eslint-disable-next-line no-shadow .then(res => { if (res.msg === '' || res.msg === 'Ok' || res.success) { message.success(globalHeader['component.account.password.update.success']); setTimeout(() => { setNeedChangePassword(false); localStorage.removeItem('password_needChange'); // props.logout(); }, 300); } else { message.error(res.msg); } }) .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(needChange ? '密码过期,登录之前必须修改密码' : '用户首次登录之前必须修改密码')} // zIndex={2000} > <div className={styles['info-label']}> <ExclamationCircleFilled style={{ color: '#FCAC0F', fontSize: '16px' }} /> <span>{needChange ? '密码过期,登录之前必须修改密码' : '用户首次登录之前必须修改密码'}</span> </div> <Form labelAlign="left" {...formItemLayout} form={form}> <Form.Item name="oldPwd" label="原密码" rules={[ { required: true, message: '请输入原始密码', }, ]} hasFeedback > <Input.Password /> </Form.Item> <Form.Item name="newPwd" label="新密码" rules={[ { required: true, message: '请输入新密码', }, { pattern: reg, message: rulesTip, }, ]} hasFeedback > <Input.Password /> </Form.Item> <Form.Item name="confirmPwd" label="确认密码" dependencies={['newPwd']} hasFeedback rules={[ { required: true, message: '请输入确认密码', }, ({ getFieldValue }) => ({ validator(rule, value) { if (!reg.test(value)) // eslint-disable-next-line prefer-promise-reject-errors return Promise.reject(rulesTip); if (!value || getFieldValue('newPwd') === value) { return Promise.resolve(); } // eslint-disable-next-line prefer-promise-reject-errors 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);