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

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

import "@formily/antd-components/lib/password/style";
import _Password from "@formily/antd-components/lib/password";

/**
 * 关键字：登录-验证密码
 * 新增人：徐友万
 * 完善中
 */
import React from 'react';
import { FormItem, createFormActions, FormEffectHooks } from '@formily/antd';
import { LockOutlined } from '@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$ = FormEffectHooks.onFieldValueChange$;
export var pwdConfirmEffects = function pwdConfirmEffects() {
  var _createFormActions = 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);
    });
  });
};

var PwdConfirm = function PwdConfirm(props) {
  var prefixIconVisible = props.prefixIconVisible,
      labelVisible = props.labelVisible,
      labelText = props.labelText,
      size = props.size,
      prefixCls = props.prefixCls;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(LockOutlined, {
      className: "".concat(prefixCls, "__icon-outlined")
    }),
    maxLength: 16,
    placeholder: labelText,
    component: _Password
  }), /*#__PURE__*/React.createElement(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.createElement(LockOutlined, {
      className: "".concat(prefixCls, "__icon-outlined")
    }),
    maxLength: 16,
    placeholder: "\u786E\u8BA4".concat(labelText),
    component: _Password
  }));
};

PwdConfirm.defaultProps = {
  prefixIconVisible: true,
  labelVisible: false,
  size: 'large',
  labelText: '新密码',
  prefixCls: 'yz-login'
};
export default PwdConfirm;