@51yzone/pc-components/lib/login/pwd-confirm.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.pwdConfirmEffects = exports["default"] = void 0;

require("@formily/antd-components/lib/password/style");

var _password = _interopRequireDefault(require("@formily/antd-components/lib/password"));

var _react = _interopRequireDefault(require("react"));

var _antd = require("@formily/antd");

var _icons = require("@ant-design/icons");

/**
 * 关键字：登录-验证密码
 * 新增人：徐友万
 * 完善中
 */
var pwdReg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[a-zA-Z])\S*$/;

var pwdValidator = function pwdValidator(state, otherValue, selfValue) {
  var newState = state;

  if (pwdReg.test(selfValue) && pwdReg.test(otherValue) && selfValue !== otherValue) {
    newState.errors = '两次密码输入不一致';
  } else {
    newState.errors = '';
  }
};

var onFieldValueChange$ = _antd.FormEffectHooks.onFieldValueChange$;

var pwdConfirmEffects = function pwdConfirmEffects() {
  var _createFormActions = (0, _antd.createFormActions)(),
      setFieldState = _createFormActions.setFieldState,
      getFieldState = _createFormActions.getFieldState;

  onFieldValueChange$('*(pwd,rePwd)').subscribe(function (fieldState) {
    var selfName = fieldState.name;
    var selfValue = fieldState.value;
    var otherName = selfName === 'pwd' ? 'rePwd' : 'pwd';
    var otherValue = getFieldState(otherName, function (state) {
      return state.value;
    });
    setFieldState(otherName, function (state) {
      return pwdValidator(state, otherValue, selfValue);
    });
    setFieldState(selfName, function (state) {
      return pwdValidator(state, otherValue, selfValue);
    });
  });
};

exports.pwdConfirmEffects = pwdConfirmEffects;

var PwdConfirm = function PwdConfirm(props) {
  var prefixIconVisible = props.prefixIconVisible,
      labelVisible = props.labelVisible,
      labelText = props.labelText,
      size = props.size,
      prefixCls = props.prefixCls;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.FormItem, {
    label: labelVisible && labelText,
    name: "pwd",
    rules: [{
      required: true,
      message: "\u8BF7\u8F93\u5165".concat(labelText, "\uFF01")
    }, {
      pattern: pwdReg,
      message: '密码必须包含数字和字母，且不小于6位！'
    }],
    size: size,
    prefix: prefixIconVisible && /*#__PURE__*/_react["default"].createElement(_icons.LockOutlined, {
      className: "".concat(prefixCls, "__icon-outlined")
    }),
    maxLength: 16,
    placeholder: labelText,
    component: _password["default"]
  }), /*#__PURE__*/_react["default"].createElement(_antd.FormItem, {
    label: labelVisible && "\u786E\u8BA4".concat(labelText),
    name: "rePwd",
    rules: [{
      required: true,
      message: "\u8BF7\u518D\u6B21\u8F93\u5165".concat(labelText, "\uFF01")
    }, {
      pattern: pwdReg,
      message: '密码必须包含数字和字母，且不小于6位！'
    }],
    size: size,
    prefix: prefixIconVisible && /*#__PURE__*/_react["default"].createElement(_icons.LockOutlined, {
      className: "".concat(prefixCls, "__icon-outlined")
    }),
    maxLength: 16,
    placeholder: "\u786E\u8BA4".concat(labelText),
    component: _password["default"]
  }));
};

PwdConfirm.defaultProps = {
  prefixIconVisible: true,
  labelVisible: false,
  size: 'large',
  labelText: '新密码',
  prefixCls: 'yz-login'
};
var _default = PwdConfirm;
exports["default"] = _default;