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

UI components for react-admin

"use strict";

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

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

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

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

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

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

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

var _reduxForm = require("redux-form");

var _reactRedux = require("react-redux");

var _compose = _interopRequireDefault(require("recompose/compose"));

var _Button = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Button"));

var _Label = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Label"));

var _Input = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Input"));

var _Form = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form"));

var _FormGroup = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form/FormGroup"));

var _FormFeedback = _interopRequireDefault(require("@bootstrap-styled/v4/lib/Form/FormFeedback"));

var _reactFontawesome = require("@fortawesome/react-fontawesome");

var _faCircleNotch = require("@fortawesome/free-solid-svg-icons/faCircleNotch");

var _raCore = require("ra-core");

var renderInput = function renderInput(_ref) {
  var _ref$meta = _ref.meta;
  _ref$meta = _ref$meta === void 0 ? {
    touched: false,
    error: ''
  } : _ref$meta;
  var touched = _ref$meta.touched,
      error = _ref$meta.error,
      inputProps = (0, _extends2.default)({}, _ref.input),
      props = (0, _objectWithoutProperties2.default)(_ref, ["meta", "input"]);
  return _react.default.createElement(_FormGroup.default, {
    color: touched && error ? 'danger' : ''
  }, _react.default.createElement(_Label.default, null, props.label), _react.default.createElement(_Input.default, (0, _extends2.default)({}, inputProps, props)), !!(touched && error) && _react.default.createElement(_FormFeedback.default, null, touched && error));
};

var login = function login(auth, dispatch, _ref2) {
  var redirectTo = _ref2.redirectTo;
  return dispatch((0, _raCore.userLogin)(auth, redirectTo));
};

var LoginForm = function LoginForm(_ref3) {
  var isLoading = _ref3.isLoading,
      handleSubmit = _ref3.handleSubmit,
      translate = _ref3.translate;
  return _react.default.createElement(_Form.default, {
    onSubmit: handleSubmit(login)
  }, _react.default.createElement("div", {
    className: "px-3 pb-3"
  }, _react.default.createElement("div", {
    className: "mt-3"
  }, _react.default.createElement(_reduxForm.Field, {
    autoFocus: true,
    id: "username",
    name: "username",
    component: renderInput,
    label: translate('ra.auth.username'),
    disabled: isLoading
  })), _react.default.createElement("div", {
    className: "mt-3"
  }, _react.default.createElement(_reduxForm.Field, {
    id: "password",
    name: "password",
    component: renderInput,
    label: translate('ra.auth.password'),
    type: "password",
    disabled: isLoading
  }))), _react.default.createElement("div", {
    className: "py-2 px-3"
  }, _react.default.createElement(_Button.default, {
    type: "submit",
    color: "primary",
    disabled: isLoading,
    className: "w-100"
  }, isLoading && _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    className: "m-3",
    size: "2x",
    spin: true,
    icon: _faCircleNotch.faCircleNotch
  }), translate('ra.auth.sign_in'))));
};

LoginForm.propTypes = (0, _objectSpread2.default)({}, _reduxForm.propTypes, {
  redirectTo: _propTypes.default.string
});

var mapStateToProps = function mapStateToProps(state) {
  return {
    isLoading: state.admin.loading > 0
  };
};

var enhance = (0, _compose.default)(_raCore.translate, (0, _reactRedux.connect)(mapStateToProps), (0, _reduxForm.reduxForm)({
  form: 'signIn',
  validate: function validate(values, props) {
    var errors = {};
    var translate = props.translate;
    if (!values.username) errors.username = translate('ra.validation.required');
    if (!values.password) errors.password = translate('ra.validation.required');
    return errors;
  }
}));

var _default = enhance(LoginForm);

exports.default = _default;
module.exports = exports.default;