index.js 5.24 KB
Newer Older
1 2 3 4 5
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';
6
import { actionCreators } from '@/containers/App/store';
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
import { appService } from '@/api';
import styles from './index.less';
const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
};
/**
 * 云平台上判断是否是默认密码
 * 如果是默认密码,强制要求修改密码
 */
const ValidContainer = props => {
  const [needChangePassword, setNeedChangePassword] = useState(false);
  const [form] = Form.useForm();
杨思琦's avatar
杨思琦 committed
22
  // eslint-disable-next-line react/no-this-in-sfc
杨思琦's avatar
杨思琦 committed
23
  let rules = localStorage.getItem('password_pwdRegex') ? localStorage.getItem('password_pwdRegex') : '';
24
  const check = localStorage.getItem('password_token');
杨思琦's avatar
杨思琦 committed
25
  const rulesTip = localStorage.getItem('password_pwdRegexTip') ? localStorage.getItem('password_pwdRegexTip') : '';
杨思琦's avatar
杨思琦 committed
26
  const accessToken = localStorage.getItem('access_token') ? localStorage.getItem('access_token') : '';
杨思琦's avatar
杨思琦 committed
27 28 29 30 31 32 33
  let reg;
  try {
    reg = new RegExp(rules);
  } catch (error) {
    rules = '';
    reg = new RegExp(rules);
  }
34
  useEffect(() => {
杨思琦's avatar
杨思琦 committed
35
    // if (window.location.origin.replace(/^(http|https):\/\//, '') !== 'panda-water.cn') return;
36 37
    const { global } = props;
    const tk = global.token;
杨思琦's avatar
杨思琦 committed
38
    // eslint-disable-next-line no-eval
39
    if (tk) {
杨思琦's avatar
杨思琦 committed
40
      if (rules !== '' && check && check === accessToken) {
杨思琦's avatar
杨思琦 committed
41 42
        setNeedChangePassword(true);
      }
43 44 45
    }
  }, []);

杨思琦's avatar
杨思琦 committed
46
  const handleOK = e => {
47 48 49
    e.stopPropagation();
    form
      .validateFields()
杨思琦's avatar
杨思琦 committed
50
      .then(res => {
51
        const params = {
52
          password: res.oldPwd, // 拼接默认密码
杨思琦's avatar
杨思琦 committed
53 54 55 56
          newpassword: res.newPwd,
          token: window.globalConfig.token,
          ignoreSite: true,
        };
57
        appService
58
          .changePassword(params)
杨思琦's avatar
杨思琦 committed
59 60
          // eslint-disable-next-line no-shadow
          .then(res => {
61 62 63
            if (res.success) {
              message.success(globalHeader['component.account.password.update.success']);
              setTimeout(() => {
杨思琦's avatar
杨思琦 committed
64 65
                setNeedChangePassword(false);
                // props.logout();
66 67 68 69 70
              }, 300);
            } else {
              message.error(globalHeader['component.account.oldpassword.errorMessage']);
            }
          })
杨思琦's avatar
杨思琦 committed
71
          .catch(error => {
72 73
            message.error(globalHeader['component.account.password.update.fail']);
          });
杨思琦's avatar
杨思琦 committed
74 75 76
      })
      .catch(error => {
        console.log(error);
77
      });
杨思琦's avatar
杨思琦 committed
78
  };
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
  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']}>
杨思琦's avatar
杨思琦 committed
95 96
          <ExclamationCircleFilled style={{ color: '#FCAC0F', fontSize: '16px' }} />
          <span>用户首次登录之前必须修改密码</span>
97 98
        </div>
        <Form labelAlign="left" {...formItemLayout} form={form}>
99 100 101 102 103 104 105 106 107 108 109 110 111
          <Form.Item
            name="oldPwd"
            label="原密码"
            rules={[
              {
                required: true,
                message: '请输入原始密码',
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
112 113 114 115 116 117 118 119 120
          <Form.Item
            name="newPwd"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码',
              },
              {
杨思琦's avatar
杨思琦 committed
121 122
                pattern: reg,
                message: rulesTip,
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
              },
            ]}
            hasFeedback
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPwd"
            label="确认密码"
            dependencies={['newPwd']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请输入确认密码',
              },
              ({ getFieldValue }) => ({
                validator(rule, value) {
杨思琦's avatar
杨思琦 committed
141 142 143
                  if (!reg.test(value))
                    // eslint-disable-next-line prefer-promise-reject-errors
                    return Promise.reject(rulesTip);
144 145 146
                  if (!value || getFieldValue('newPwd') === value) {
                    return Promise.resolve();
                  }
杨思琦's avatar
杨思琦 committed
147
                  // eslint-disable-next-line prefer-promise-reject-errors
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
                  return Promise.reject('确认密码与新密码输入不一致');
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
});
163 164 165 166 167
const mapDispatchToProps = dispatch => ({
  logout() {
    dispatch(actionCreators.logout());
  },
});
168 169
export default connect(
  mapStateToProps,
170
  mapDispatchToProps,
171
)(ValidContainer);