es6-react-admin-lte/lib/components/form/common/login-form.js

An AdminLTE Template made to use as React components.

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

var _loadStatus = _interopRequireDefault(require("../../utilities/load-status"));

var _errorMessage = _interopRequireDefault(require("../../utilities/error-message"));

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var LoginForm = /*#__PURE__*/function (_React$Component) {
  _inherits(LoginForm, _React$Component);

  var _super = _createSuper(LoginForm);

  function LoginForm(props) {
    var _this;

    _classCallCheck(this, LoginForm);

    _this = _super.call(this, props);
    _this.state = {
      username: '',
      password: '',
      rememberMe: false
    };
    _this.fillForm = _this.fillForm.bind(_assertThisInitialized(_this));
    _this.submitForm = _this.submitForm.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(LoginForm, [{
    key: "submitForm",
    value: function submitForm(e) {
      e.preventDefault();
      e.stopPropagation();
      this.props.onSubmit(this.state.username, this.state.password, this.state.rememberMe);
    }
  }, {
    key: "fillForm",
    value: function fillForm(e) {
      switch (e.currentTarget.id) {
        case 'username':
          this.setState({
            username: e.currentTarget.value
          });
          break;

        case 'password':
          this.setState({
            password: e.currentTarget.value
          });
          break;

        case 'remember-me':
          this.setState({
            rememberMe: e.currentTarget.checked
          });
          break;

        default:
          break;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var error = '';

      if (this.props.error && this.props.error.type) {
        error = this.props.error;
      } else if (this.props.error && this.props.error.message) {
        error = /*#__PURE__*/_react["default"].createElement(_errorMessage["default"], {
          error: this.props.error,
          theme: this.props.error.theme || this.props.errorTheme
        });
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "login-box"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "login-logo"
      }, /*#__PURE__*/_react["default"].createElement("a", {
        href: this.props.logoLink,
        onClick: this.props.onLogoClick ? function (e) {
          e.preventDefault();
          e.stopPropagation();

          _this2.props.onLogoClick();
        } : function () {}
      }, this.props.clientLogo ? /*#__PURE__*/_react["default"].createElement("img", {
        src: this.props.clientLogo,
        alt: typeof this.props.clientName === 'string' ? this.props.clientName : 'Brand Logo',
        style: {
          width: '60%',
          height: 'auto'
        }
      }) : this.props.clientName)), /*#__PURE__*/_react["default"].createElement("div", {
        className: "login-box-body",
        style: {
          position: 'relative'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "login-box-body-head"
      }, error, /*#__PURE__*/_react["default"].createElement("p", {
        className: "login-box-msg"
      }, this.props.headline, this.props.subheadline ? /*#__PURE__*/_react["default"].createElement("small", null, /*#__PURE__*/_react["default"].createElement("br", null), this.props.subheadline) : '')), /*#__PURE__*/_react["default"].createElement("form", {
        noValidate: true,
        onSubmit: this.submitForm
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group has-feedback"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        id: "username",
        type: "text",
        className: "form-control",
        placeholder: this.props.userPlaceholder,
        onChange: this.fillForm
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "glyphicon glyphicon-envelope form-control-feedback"
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group has-feedback"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        id: "password",
        type: "password",
        className: "form-control",
        placeholder: this.props.passPlaceholder,
        onChange: this.fillForm
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "glyphicon glyphicon-lock form-control-feedback"
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "row"
      }, this.props.remembers ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "col-xs-8"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "checkbox icheck"
      }, /*#__PURE__*/_react["default"].createElement("label", {
        htmlFor: "remember-me"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        type: "checkbox",
        id: "remember-me",
        defaultChecked: false,
        onChange: this.fillForm
      }), this.props.rememberMeText))) : '', /*#__PURE__*/_react["default"].createElement("div", {
        className: "col-xs-offset-8 col-xs-4"
      }, /*#__PURE__*/_react["default"].createElement("button", {
        type: "submit",
        className: "btn btn-block btn-flat ".concat(this.props.submitTheme),
        onClick: this.submitForm,
        id: "login-btn"
      }, this.props.submitText)))), this.props.forgets ? /*#__PURE__*/_react["default"].createElement("a", {
        href: this.props.forgetLink,
        onClick: this.props.onForget ? function (e) {
          e.preventDefault();
          e.stopPropagation();

          _this2.props.onForget();
        } : function () {}
      }, "I forgot my password") : '', this.props.forgets && this.props.registers ? /*#__PURE__*/_react["default"].createElement("br", null) : '', this.props.registers ? /*#__PURE__*/_react["default"].createElement("a", {
        href: this.props.registerLink,
        className: "text-center",
        onClick: this.props.onRegister ? function (e) {
          e.preventDefault();
          e.stopPropagation();

          _this2.props.onRegister();
        } : function () {}
      }, "Register an account") : '', /*#__PURE__*/_react["default"].createElement("div", {
        className: "row"
      }, this.props.children), !this.props.loading ? '' : /*#__PURE__*/_react["default"].createElement("div", {
        className: "text-center align-middle overlay over-load",
        style: {
          position: 'absolute',
          backgroundColor: 'rgba(236, 240, 245, 0.25)',
          top: '0',
          right: '0',
          bottom: '0',
          left: '0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }
      }, /*#__PURE__*/_react["default"].createElement(_loadStatus["default"], {
        size: "5em",
        color: "rgba(51, 51, 51, 0.3)",
        spins: true
      }))));
    }
  }]);

  return LoginForm;
}(_react["default"].Component);

LoginForm.propTypes = {
  loading: _propTypes["default"].bool,
  errorTheme: _propTypes["default"].string,
  error: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].element]),
  clientLogo: _propTypes["default"].string,
  onLogoClick: _propTypes["default"].func,
  logoLink: _propTypes["default"].string,
  headline: _propTypes["default"].string,
  subheadline: _propTypes["default"].string,
  remembers: _propTypes["default"].bool,
  rememberMeText: _propTypes["default"].string,
  submitText: _propTypes["default"].string,
  submitTheme: _propTypes["default"].string,
  onSubmit: _propTypes["default"].func,
  userPlaceholder: _propTypes["default"].string,
  passPlaceholder: _propTypes["default"].string,
  forgets: _propTypes["default"].bool,
  registers: _propTypes["default"].bool,
  forgetLink: _propTypes["default"].string,
  onForget: _propTypes["default"].func,
  registerLink: _propTypes["default"].string,
  onRegister: _propTypes["default"].func
};
LoginForm.defaultProps = {
  loading: false,
  errorTheme: 'alert-danger',
  clientName: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("b", null, "Admin"), "LTE"),
  clientLogo: '',
  headline: 'Sign in to start your session',
  subheadline: '',
  remembers: false,
  rememberMeText: 'Remember Me',
  submitText: 'Sign In',
  submitTheme: 'btn-primary',
  userPlaceholder: 'Email',
  passPlaceholder: 'Password',
  forgets: false,
  registers: false,
  onSubmit: function onSubmit() {}
};
var _default = LoginForm;
exports["default"] = _default;
module.exports = exports.default;
//# sourceMappingURL=login-form.js.map