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

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

import "antd/es/col/style";
import _Col from "antd/es/col";
import "antd/es/row/style";
import _Row from "antd/es/row";
import "antd/es/checkbox/style";
import _Checkbox from "antd/es/checkbox";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
/**
 * 关键字：登录
 * 新增人：徐友万
 * 完善中
 */


import React, { useState } from 'react';
import { Form, FormButtonGroup, Submit, createFormActions } from '@formily/antd';
import { AlipayCircleOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import MobileLogin from './mobile-login';
import AccountLogin from './account-login';
import ForgetPwd from './forget-pwd'; // 渲染其他登录方式

var renderOtherLogins = function renderOtherLogins(item) {
  var prefixCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yz-login';

  if (item.type === 'alipay') {
    return /*#__PURE__*/React.createElement(AlipayCircleOutlined, {
      key: item.type,
      onClick: item.onClick,
      className: "".concat(prefixCls, "__icon-outlined ").concat(prefixCls, "__icon-other")
    });
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null);
};

var Login = function Login(props) {
  var type = props.type,
      _props$initCountDown = props.initCountDown,
      initCountDown = _props$initCountDown === void 0 ? 60 : _props$initCountDown,
      codeImgUrl = props.codeImgUrl,
      _props$otherLogins = props.otherLogins,
      otherLogins = _props$otherLogins === void 0 ? [] : _props$otherLogins,
      autoLoginVisible = props.autoLoginVisible,
      forgetVisible = props.forgetVisible,
      prefixIconVisible = props.prefixIconVisible,
      labelVisible = props.labelVisible,
      size = props.size,
      visibilityToggle = props.visibilityToggle,
      onSubmit = props.onSubmit,
      getCode = props.getCode,
      verifyCode = props.verifyCode,
      pwdChange = props.pwdChange,
      onAfterLogin = props.onAfterLogin,
      prefixCls = props.prefixCls,
      className = props.className,
      style = props.style;
  var actions = createFormActions(); // 验证码图片

  var _useState = useState({
    visible: window.sessionStorage.getItem('codeImgVisible') === 'show',
    url: "".concat(codeImgUrl, "?").concat(new Date().getTime())
  }),
      _useState2 = _slicedToArray(_useState, 2),
      codeImg = _useState2[0],
      setCodeImg = _useState2[1]; // 忘记密码弹框是否可见


  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      forgetModalVisible = _useState4[0],
      setForgetModalVisible = _useState4[1]; // 表单提交


  var handleSubmit = function handleSubmit(values) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              _context.next = 3;
              return onSubmit(values);

            case 3:
              window.sessionStorage.setItem('codeImgVisible', 'hide');

              if (onAfterLogin) {
                onAfterLogin();
              }

              _context.next = 11;
              break;

            case 7:
              _context.prev = 7;
              _context.t0 = _context["catch"](0);
              setCodeImg({
                visible: true,
                url: "".concat(codeImgUrl, "?").concat(new Date().getTime())
              });
              window.sessionStorage.setItem('codeImgVisible', 'show');

            case 11:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 7]]);
    }));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classnames(className, "".concat(prefixCls, "-wrapper")),
    style: style
  }, /*#__PURE__*/React.createElement(Form, {
    actions: actions,
    onSubmit: handleSubmit,
    labelAlign: "left",
    labelCol: {
      span: 5
    }
  }, type === 'mobile' ? /*#__PURE__*/React.createElement(MobileLogin, {
    actions: actions,
    getCode: getCode,
    initCountDown: initCountDown,
    labelVisible: labelVisible,
    prefixIconVisible: prefixIconVisible,
    size: size,
    prefixCls: prefixCls
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), type === 'account' ? /*#__PURE__*/React.createElement(AccountLogin, {
    codeImgVisible: codeImg.visible,
    codeImgUrl: codeImg.url,
    labelVisible: labelVisible,
    prefixIconVisible: prefixIconVisible,
    size: size,
    visibilityToggle: visibilityToggle
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), autoLoginVisible || forgetVisible ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "__footer")
  }, /*#__PURE__*/React.createElement("div", null, autoLoginVisible && /*#__PURE__*/React.createElement(_Checkbox, {
    onChange: function onChange() {}
  }, "\u81EA\u52A8\u767B\u5F55")), forgetVisible && /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      return setForgetModalVisible(true);
    },
    className: "".concat(prefixCls, "__footer-forget")
  }, "\u5FD8\u8BB0\u5BC6\u7801")) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(FormButtonGroup, {
    style: {
      marginBottom: 24
    },
    span: 24
  }, /*#__PURE__*/React.createElement(Submit, {
    block: true,
    size: size
  }, "\u767B\u5F55")), otherLogins.length ? /*#__PURE__*/React.createElement(_Row, {
    style: {
      marginBottom: 24
    }
  }, /*#__PURE__*/React.createElement(_Col, {
    span: 6
  }, /*#__PURE__*/React.createElement("span", null, "\u5176\u4ED6\u767B\u5F55\u65B9\u5F0F")), /*#__PURE__*/React.createElement(_Col, {
    span: 18
  }, otherLogins.map(function (item) {
    return renderOtherLogins(item, prefixCls);
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null)), forgetVisible && /*#__PURE__*/React.createElement(ForgetPwd, {
    visible: forgetModalVisible,
    prefixIconVisible: prefixIconVisible,
    size: size,
    initCountDown: initCountDown,
    getCode: getCode,
    verifyCode: verifyCode,
    pwdChange: pwdChange,
    onCancel: function onCancel() {
      return setForgetModalVisible(false);
    }
  }));
};

Login.defaultProps = {
  type: 'account',
  initCountDown: 60,
  codeImgUrl: '',
  otherLogins: [],
  autoLoginVisible: false,
  forgetVisible: false,
  prefixIconVisible: true,
  labelVisible: false,
  size: 'large',
  visibilityToggle: false,
  prefixCls: 'yz-login',
  className: '',
  style: {}
};
export default Login;