es6-react-admin-lte/lib/components/form/common/register-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 _checkbox = _interopRequireDefault(require("../pieces/checkbox"));

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 RegisterForm = /*#__PURE__*/function (_React$Component) {
  _inherits(RegisterForm, _React$Component);

  var _super = _createSuper(RegisterForm);

  function RegisterForm(props) {
    var _this;

    _classCallCheck(this, RegisterForm);

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

  _createClass(RegisterForm, [{
    key: "getBetterChildren",
    value: function getBetterChildren(children) {
      var _this2 = this;

      return _react["default"].Children.map(children, function (child) {
        if (child.props.children) {
          child = /*#__PURE__*/_react["default"].cloneElement(child, {
            children: _this2.getBetterChildren(child.props.children)
          });
        }

        if (['input', 'textarea', 'select', 'option', 'button', 'datalist', 'keygen', 'output'].indexOf(child.type) >= 0) {
          return /*#__PURE__*/_react["default"].cloneElement(child, {
            onChange: _this2.fillForm
          });
        } else {
          return child;
        }
      });
    }
  }, {
    key: "submitForm",
    value: function submitForm(e) {
      e.preventDefault();
      e.stopPropagation();
      this.props.onSubmit(this.state);
    }
  }, {
    key: "fillForm",
    value: function fillForm(e) {
      switch (e.currentTarget.id) {
        case 'username':
          this.setState({
            username: e.currentTarget.value
          });
          break;

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

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

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

        case 'agreement':
          this.setState({
            agreement: e.currentTarget.checked
          });
          break;

        default:
          var newStateObj = {};
          newStateObj[e.currentTarget.id.replace('-', '_')] = e.currentTarget.type === 'checkbox' ? e.currentTarget.checked : e.currentTarget.value;
          this.setState(newStateObj);
          break;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = 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: "register-box"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "register-logo"
      }, /*#__PURE__*/_react["default"].createElement("a", {
        href: this.props.logoLink,
        onClick: this.props.onLogoClick ? function (e) {
          e.preventDefault();
          e.stopPropagation();

          _this3.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: "register-box-body",
        style: {
          position: 'relative'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", null, error, /*#__PURE__*/_react["default"].createElement("p", {
        className: "register-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", null, this.props.hideNameField ? '' : /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group has-feedback"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        id: "name",
        name: "name",
        type: "text",
        className: "form-control",
        placeholder: this.props.namePlaceholder,
        onChange: this.fillForm
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "glyphicon glyphicon-user form-control-feedback"
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group has-feedback"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        id: "username",
        name: "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",
        name: "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"
      })), this.props.hasConfirmPass ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group has-feedback"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        id: "confirm-password",
        name: "confirm-password",
        type: "password",
        className: "form-control",
        placeholder: this.props.confirmPassPlaceholder,
        onChange: this.fillForm
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "glyphicon glyphicon-log-in form-control-feedback"
      })) : '', this.getBetterChildren(this.props.children), this.props.hasNoAgreement ? '' : /*#__PURE__*/_react["default"].createElement("div", {
        className: "row"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "col-xs-12"
      }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
        id: "agreement",
        label: this.props.agreementText,
        onChange: this.fillForm,
        checked: this.state.agreement
      }))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "row"
      }, /*#__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.socials.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "social-auth-links text-center"
      }, /*#__PURE__*/_react["default"].createElement("p", null, "- OR -"), this.props.socials) : '', this.props.registered ? /*#__PURE__*/_react["default"].createElement("a", {
        className: "text-center",
        href: this.props.registeredLink,
        onClick: this.props.onRegistered ? function (e) {
          e.preventDefault();
          e.stopPropagation();

          _this3.props.onRegistered();
        } : function () {}
      }, this.props.registeredText) : '', !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 RegisterForm;
}(_react["default"].Component);

RegisterForm.propTypes = {
  clientLogo: _propTypes["default"].string,
  clientName: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
  logoLink: _propTypes["default"].string,
  onLogoClick: _propTypes["default"].func,
  headline: _propTypes["default"].string,
  subheadline: _propTypes["default"].string,
  registered: _propTypes["default"].bool,
  socials: _propTypes["default"].array,
  registeredLink: _propTypes["default"].string,
  registeredText: _propTypes["default"].string,
  onRegistered: _propTypes["default"].func,
  submitTheme: _propTypes["default"].string,
  submitText: _propTypes["default"].string,
  userPlaceholder: _propTypes["default"].string,
  namePlaceholder: _propTypes["default"].string,
  passPlaceholder: _propTypes["default"].string,
  hasConfirmPass: _propTypes["default"].bool,
  confirmPassPlaceholder: _propTypes["default"].string,
  agreementText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
  onSubmit: _propTypes["default"].func,
  loading: _propTypes["default"].bool,
  errorTheme: _propTypes["default"].string,
  error: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].element]),
  hideNameField: _propTypes["default"].bool,
  hasNoAgreement: _propTypes["default"].bool
};
RegisterForm.defaultProps = {
  clientLogo: '',
  clientName: /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("b", null, "Admin"), "LTE"),
  headline: 'Register a new membership',
  subheadline: '',
  socials: [],
  registered: false,
  hasConfirmPass: false,
  registeredText: 'I already have a membership',
  submitTheme: 'btn-primary',
  submitText: 'Register',
  agreementText: 'I agree to the terms and policies',
  userPlaceholder: 'Username or Email',
  namePlaceholder: 'Full Name',
  passPlaceholder: 'Password',
  confirmPassPlaceholder: 'Confirm Password',
  onSubmit: function onSubmit() {},
  loading: false,
  errorTheme: 'alert-danger',
  hideNameField: false,
  hasNoAgreement: false
};
var _default = RegisterForm;
exports["default"] = _default;
module.exports = exports.default;
//# sourceMappingURL=register-form.js.map