ChangePasswordModal.jsx

/* eslint-disable import/no-unresolved */
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, notification, message, Divider } from 'antd';
import voca from 'voca';
import classNames from 'classnames';
import {
  editUser,
  updateUserPassword,
  GetPasswordRegularization,
  SysConfiguration,
} from '@/services/userManage/api';
import sha1 from 'sha1';
import { encipher } from '@wisdom-utils/utils/lib/helpers';
import styles from './AddUserModal.less';

const ChangePasswordModal = props => {
  const { visible, currentUser, currentSelectOrg, onCancel, onSelect, submitSearchUser } = props;
  const [editUserForm] = Form.useForm(); // 编辑用户
  /** ***正则验证**** */
  const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
  const isPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/); // 手机号
  const isEmail = new RegExp(
    /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
  ); // 邮箱
  const [passwordForm] = Form.useForm(); // 修改密码
  const [newPasswordLevel, setNewPasswordLevel] = useState('');
  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('');
  const [rules, setRules] = useState();
  const [pasType, setPasType] = useState('');

  useEffect(() => {
    if (visible) {
      getPasswordRule();
      passwordType();
      editUserForm.setFieldsValue({
        loginName: voca.stripTags(currentUser.loginName),
        userName: voca.stripTags(currentUser.userName),
        phone: voca.stripTags(currentUser.phone) || '',
        email: currentUser.email || '',
      });
      passwordForm.setFieldsValue({
        oldPassword: currentUser.password,
        newPassword: '',
        passwordConfirm: '',
      });
    } else {
      setNewPasswordLevel('');
      setPasswordConfirmLevel('');
    }
  }, [visible]);

  const passwordType = () => {
    SysConfiguration().then(res => {
      if (res.code === 0) {
        setPasType(res.data);
      }
    });
  };

  const getPasswordRule = () => {
    GetPasswordRegularization().then(res => {
      if (res.code === 0) {
        setRules(res.data);
      }
    });
  };

  // 提交-编辑用户
  const submitEditUser = () => {
    const newPassword = passwordForm.getFieldValue('newPassword');
    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
    passwordForm.validateFields().then(validate => {
      if (validate) {
        if ((newPassword && newPassword.length < 6) || (passwordConfirm && passwordConfirm < 6)) {
          notification.error({
            message: '提交失败',
            description: '密码至少为6位!',
          });
          return;
        }
        if (newPassword !== passwordConfirm) {
          notification.error({
            message: '提交失败',
            description: '确认密码不一致!',
          });
          return;
        }
        if (newPassword && newPassword) {
          if (newPasswordLevel === '弱') {
            notification.error({
              message: '提交失败',
              description: '密码强度太弱，加强密码强度',
            });
            return;
          }
          if (
            !/^(?=.*[a-zA-Z])(?=.*\d)[\w\S]{6,16}$/.test(newPassword) ||
            !/^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/.test(newPassword)
          ) {
            notification.error({
              message: '提交失败',
              description: '密码验证未通过',
            });
            return;
          }
        }
        // 所有验证通过才可以提交,phone/email为空时不验证

        submitChangePassword();
      }
    });
  };
  const title = (
    <span>
      重置用户
      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
        【{currentUser.userName}】
      </span>
      的密码
    </span>
  );

  // 提交-修改密码
  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,
        NewPassWord: encipher(newPassword, pasType ? pasType : '').toUpperCase(),
      })
        .then(res => {
          if (res.code === 0) {
            onCancel();
            // eslint-disable-next-line no-unused-expressions
            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
            // notification.success({
            //   message: '提交成功',
            //   duration: 2,
            // });
          } else {
            notification.error({
              message: '提交失败',
              description: res.msg,
            });
          }
          passwordForm.setFieldsValue({
            oldPassword: currentUser.password,
            newPassword: '',
            passwordConfirm: '',
          });
        })
        .catch(err => {
          message.error(err);
        });
    }
  };
  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 '弱';
      case 3:
        if (sValue.length > 8) {
          return '强';
        }
        return '中';
      case 4:
        return '强';
    }
  };
  return (
    <Modal
      title={title}
      visible={visible}
      maskClosable={false}
      destroyOnClose
      onOk={submitEditUser}
      onCancel={() => {
        onCancel();
        passwordForm.resetFields();
      }}
      okText="确认"
      cancelText="取消"
    >
      <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={[
                { required: true, message: '请输入密码' },
                {
                  pattern: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
                },
                {
                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
                },
                // { required: true },
              ]}
            >
              <Input.Password
                placeholder="请输入新密码"
                autoComplete="off"
                maxLength="16"
                onCopy={e => {
                  e.preventDefault();
                }}
                onPaste={e => {
                  // 禁止粘贴
                  e.preventDefault();
                }}
              />
            </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={[
                { required: true, message: '请输入密码' },
                {
                  pattern: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
                },
                {
                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
                },
              ]}
            >
              <Input.Password
                placeholder="再次确认新密码"
                autoComplete="off"
                maxLength="16"
                onCopy={e => {
                  e.preventDefault();
                }}
                onPaste={e => {
                  // 禁止粘贴
                  e.preventDefault();
                }}
              />
            </Form.Item>
            <div
              className={classNames(styles.tipsText, {
                [styles.tipsRed]: passwordConfirmLevel === '弱',
                [styles.tipsOrange]: passwordConfirmLevel === '中',
                [styles.tipsGreen]: passwordConfirmLevel === '强',
              })}
            >
              {passwordConfirmLevel}
            </div>
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default ChangePasswordModal;