@bootstrap-styled/ra-ui/lib/components/auth/Login.js

UI components for react-admin

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Cards = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Cards"));

var _Notification = _interopRequireDefault(require("../layout/Notification"));

var _LoginForm = _interopRequireDefault(require("./LoginForm"));

var MainWrapper = _styledComponents.default.div.withConfig({
  displayName: "Login__MainWrapper",
  componentId: "sc-2mh0cp-0"
})(["display:flex;flex-direction:column;min-height:100vh;height:1px;align-items:center;justify-content:flex-start;background-repeat:no-repeat;background-size:cover;"]);

var LoginCard = (0, _styledComponents.default)(_Cards.default).withConfig({
  displayName: "Login__LoginCard",
  componentId: "sc-2mh0cp-1"
})(["&.login-form{min-width:300px;margin-top:6em;}"]);

var sanitizeRestProps = function sanitizeRestProps(_ref) {
  var array = _ref.array,
      backgroundImage = _ref.backgroundImage,
      className = _ref.className,
      location = _ref.location,
      staticContext = _ref.staticContext,
      theme = _ref.theme,
      title = _ref.title,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["array", "backgroundImage", "className", "location", "staticContext", "theme", "title"]);
  return rest;
};

var Login = function (_Component) {
  (0, _inherits2.default)(Login, _Component);

  function Login(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Login);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Login).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateBackgroundImage", function () {
      var lastTry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

      if (!_this.backgroundImageLoaded && _this.containerRef.current) {
        var backgroundImage = _this.props.backgroundImage;
        _this.containerRef.current.style.backgroundImage = "url(".concat(backgroundImage, ")");
        _this.backgroundImageLoaded = true;
      }

      if (lastTry) {
        _this.backgroundImageLoaded = true;
      }
    });
    _this.containerRef = _react.default.createRef();
    _this.backgroundImageLoaded = false;
    return _this;
  }

  (0, _createClass2.default)(Login, [{
    key: "lazyLoadBackgroundImage",
    value: function lazyLoadBackgroundImage() {
      var backgroundImage = this.props.backgroundImage;

      if (backgroundImage) {
        var img = new Image();
        img.onload = this.updateBackgroundImage;
        img.src = backgroundImage;
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.lazyLoadBackgroundImage();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (!this.backgroundImageLoaded) {
        this.lazyLoadBackgroundImage(true);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          className = _this$props.className,
          loginForm = _this$props.loginForm,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["className", "loginForm"]);
      return _react.default.createElement(MainWrapper, (0, _extends2.default)({
        className: className
      }, sanitizeRestProps(rest), {
        ref: this.containerRef
      }), _react.default.createElement(LoginCard, {
        className: "login-form"
      }, _react.default.createElement("div", {
        className: "d-flex justify-content-center m-3 bg-inverse text-white"
      }, "TODO: fit logo(discuss how this should be passed) or icon!"), loginForm), _react.default.createElement(_Notification.default, null));
    }
  }]);
  return Login;
}(_react.Component);

Login.propTypes = {
  authProvider: _propTypes.default.func,
  backgroundImage: _propTypes.default.string,
  className: _propTypes.default.string,
  input: _propTypes.default.object,
  loginForm: _propTypes.default.element,
  meta: _propTypes.default.object,
  previousRoute: _propTypes.default.string
};
Login.defaultProps = {
  backgroundImage: 'https://source.unsplash.com/random/1600x900/daily',
  loginForm: _react.default.createElement(_LoginForm.default, null)
};
var _default = Login;
exports.default = _default;
module.exports = exports.default;