ChangePasswordModal.jsx 7.2 KB
Newer Older
1
/* eslint-disable import/no-unresolved */
2
import React, { useEffect, useState } from 'react';
3
import { Modal, Form, Input, notification, message } from 'antd';
邓超's avatar
邓超 committed
4
import { updateUserPassword } from '@/services/userManage/api';
5
import sha1 from 'sha1';
6 7
import classNames from 'classnames';
import styles from './AddUserModal.less';
8 9

const ChangePasswordModal = props => {
10
  const { visible, currentUser, currentSelectOrg, submitSearchUser, onSelect, onCancel } = props;
11
  const [passwordForm] = Form.useForm(); // 修改密码
12 13
  const [newPasswordLevel, setNewPasswordLevel] = useState('');
  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('');
14
  useEffect(() => {
15 16 17 18 19 20 21 22
    console.log(currentUser);
    if (visible) {
      console.log(currentUser.password);
      passwordForm.setFieldsValue({
        oldPassword: currentUser.password,
        newPassword: '',
        passwordConfirm: '',
      });
23 24 25
    } else {
      setNewPasswordLevel('');
      setPasswordConfirmLevel('');
26
    }
27
  }, [visible]);
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

  // 提交-修改密码
  const submitChangePassword = () => {
    const oldPassword = passwordForm.getFieldValue('oldPassword');
    const newPassword = passwordForm.getFieldValue('newPassword');
    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
    if (
      newPassword &&
      newPassword.length >= 6 &&
      passwordConfirm &&
      newPassword.length >= 6 &&
      newPassword === passwordConfirm
    ) {
      updateUserPassword({
        UserId: +currentUser.userID,
        OldPassWord: oldPassword,
44
        NewPassWord: sha1(newPassword).toUpperCase(),
45 46 47 48
      })
        .then(res => {
          if (res.code === 0) {
            onCancel();
49
            // eslint-disable-next-line no-unused-expressions
50
            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
51 52 53 54 55 56 57 58 59 60
            notification.success({
              message: '提交成功',
              duration: 2,
            });
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
tianfen's avatar
tianfen committed
61 62 63 64 65
          passwordForm.setFieldsValue({
            oldPassword: currentUser.password,
            newPassword: '',
            passwordConfirm: '',
          });
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
        })
        .catch(err => {
          message.error(err);
        });
    } else if (newPassword === '' || passwordConfirm === '') {
      notification.error({
        message: '提交失败',
        description: '带*号为必填项,不能为空',
      });
    } else if (
      (newPassword && newPassword.length < 6) ||
      (passwordConfirm && passwordConfirm < 6)
    ) {
      notification.error({
        message: '提交失败',
        description: '密码至少为6位!',
      });
    } else if (newPassword !== passwordConfirm) {
      notification.error({
        message: '提交失败',
        description: '确认密码不一致!',
      });
    }
  };
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
  const changeValue = changedFields => {
    if (changedFields[0].name[0] === 'newPassword') {
      setNewPasswordLevel(checkStrong(changedFields[0].value));
    }
    if (changedFields[0].name[0] === 'passwordConfirm') {
      setPasswordConfirmLevel(checkStrong(changedFields[0].value));
    }
  };
  const checkStrong = sValue => {
    let modes = 0;
    // 正则表达式验证符合要求的
    if (sValue.length < 1) return modes;
    if (/\d/.test(sValue)) modes++; // 数字
    if (/[a-z]/.test(sValue)) modes++; // 小写
    if (/[A-Z]/.test(sValue)) modes++; // 大写
    if (/[_\W]/.test(sValue)) modes++; // 特殊字符
    console.log(modes, 'modes');
    // 逻辑处理
    // eslint-disable-next-line default-case
    switch (modes) {
      case 1:
        return '弱';
      case 2:
        if (sValue.length > 8) {
          return '中';
        }
        return '弱';
117 118 119
      case 3:
        if (sValue.length > 8) {
          return '强';
120
        }
121 122
        return '中';
      case 4:
123 124 125
        return '强';
    }
  };
126 127 128 129 130 131 132 133 134
  const title = (
    <span>
      修改用户
      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
{currentUser.userName}
      </span>
      的密码
    </span>
  );
135 136
  return (
    <Modal
137
      title={title}
138 139
      visible={visible}
      onOk={submitChangePassword}
140 141 142 143 144
      maskClosable={false}
      destroyOnClose
      afterClose={() => {
        passwordForm.resetFields();
      }}
tianfen's avatar
tianfen committed
145 146 147 148 149 150 151 152
      onCancel={() => {
        passwordForm.setFieldsValue({
          oldPassword: currentUser.password,
          newPassword: '',
          passwordConfirm: '',
        });
        onCancel();
      }}
153 154 155
      okText="确认"
      cancelText="取消"
    >
156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
      <div className={styles.modalContent}>
        <Form form={passwordForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
          <Form.Item name="oldPassword" label="原始密码">
            <Input disabled />
          </Form.Item>
          <div className={styles.formBox}>
            <Form.Item
              name="newPassword"
              label="新密码"
              rules={[
                {
                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
                  message: '长度6-16位,支持字母与数字,允许下划线',
                },
                { required: true },
              ]}
            >
173 174 175 176 177 178 179 180 181 182 183 184
              <Input.Password
                placeholder="请输入新密码"
                autoComplete="off"
                maxLength="16"
                onCopy={e => {
                  e.preventDefault();
                }}
                onPaste={e => {
                  // 禁止粘贴
                  e.preventDefault();
                }}
              />
185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
            </Form.Item>
            <div
              className={classNames(styles.tipsText, {
                [styles.tipsRed]: newPasswordLevel === '弱',
                [styles.tipsOrange]: newPasswordLevel === '中',
                [styles.tipsGreen]: newPasswordLevel === '强',
              })}
            >
              {newPasswordLevel}
            </div>
          </div>
          <div className={styles.formBox}>
            <Form.Item
              name="passwordConfirm"
              label="确认密码"
              rules={[
                {
                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
                  message: '长度6-16位,支持字母与数字,允许下划线',
                },
                { required: true },
              ]}
            >
208 209 210 211 212 213 214 215 216 217 218 219
              <Input.Password
                placeholder="再次确认新密码"
                autoComplete="off"
                maxLength="16"
                onCopy={e => {
                  e.preventDefault();
                }}
                onPaste={e => {
                  // 禁止粘贴
                  e.preventDefault();
                }}
              />
220 221 222 223 224 225 226 227 228 229 230 231 232
            </Form.Item>
            <div
              className={classNames(styles.tipsText, {
                [styles.tipsRed]: passwordConfirmLevel === '弱',
                [styles.tipsOrange]: passwordConfirmLevel === '中',
                [styles.tipsGreen]: passwordConfirmLevel === '强',
              })}
            >
              {passwordConfirmLevel}
            </div>
          </div>
        </Form>
      </div>
233 234 235 236 237
    </Modal>
  );
};

export default ChangePasswordModal;