@integec/common-react-screens/lib/auth/LoginComp.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _toPairs2 = require('ramda/src/toPairs');

var _toPairs3 = _interopRequireDefault(_toPairs2);

var _map2 = require('ramda/src/map');

var _map3 = _interopRequireDefault(_map2);

var _all2 = require('ramda/src/all');

var _all3 = _interopRequireDefault(_all2);

var _compose2 = require('ramda/src/compose');

var _compose3 = _interopRequireDefault(_compose2);

var _isEmpty2 = require('ramda/src/isEmpty');

var _isEmpty3 = _interopRequireDefault(_isEmpty2);

var _isNil2 = require('ramda/src/isNil');

var _isNil3 = _interopRequireDefault(_isNil2);

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _templateObject = _taggedTemplateLiteral(['\n  color: brown;\n  font-weight: bold;\n  margin-bottom: 0.5em;\n'], ['\n  color: brown;\n  font-weight: bold;\n  margin-bottom: 0.5em;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _semanticUiReact = require('semantic-ui-react');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var errorStyle = {
  color: 'brown'
};

var LoginError = _styledComponents2.default.div(_templateObject);

var validate = function validate(_ref, isReset) {
  var userName = _ref.userName,
      password = _ref.password,
      newPassword = _ref.newPassword,
      newConfirmPassword = _ref.newConfirmPassword;
  return {
    userNameError: (0, _isNil3.default)(userName) || (0, _isEmpty3.default)(userName) ? 'User name must be entered' : undefined,
    passwordError: (0, _isNil3.default)(password) || (0, _isEmpty3.default)(password) ? 'Password must be entered' : undefined,
    newPasswordError: !isReset ? undefined : (0, _isNil3.default)(newPassword) || (0, _isEmpty3.default)(newPassword) ? 'New Password must be entered' : newPassword !== newConfirmPassword ? 'New Password does not confirm password' : undefined,
    newConfirmPasswordError: !isReset ? undefined : (0, _isNil3.default)(newConfirmPassword) || (0, _isEmpty3.default)(newConfirmPassword) ? 'Password Confirm must be entered' : newPassword !== newConfirmPassword ? 'Password confirm does not match password' : undefined,
    passwordLength: isReset && newPassword != null && newPassword.trim().length < 6,
    passwordNum: isReset && newPassword != null && !newPassword.match(/\s*[0-9]+\s*/),
    passwordUpper: isReset && newPassword != null && !newPassword.match(/\s*[A-Z]+\s*/),
    passwordLower: isReset && newPassword != null && !newPassword.match(/\s*[a-z]+\s*/)
  };
};

var isValid = (0, _compose3.default)((0, _all3.default)(function (val) {
  return !val;
}), (0, _map3.default)(function (_ref2) {
  var _ref3 = _slicedToArray(_ref2, 2),
      _ = _ref3[0],
      value = _ref3[1];

  return value;
}), _toPairs3.default);

var LoginComp = function (_React$Component) {
  _inherits(LoginComp, _React$Component);

  function LoginComp() {
    var _ref4;

    var _temp, _this, _ret;

    _classCallCheck(this, LoginComp);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref4 = LoginComp.__proto__ || Object.getPrototypeOf(LoginComp)).call.apply(_ref4, [this].concat(args))), _this), _this.state = { userName: _this.props.userName }, _this.setFieldValue = function (_, _ref5) {
      var name = _ref5.name,
          value = _ref5.value;

      _this.setState(function (state) {
        var _ref6;

        return _ref6 = {}, _defineProperty(_ref6, name, value), _defineProperty(_ref6, 'userNameError', name === 'userName' ? null : state.userNameError), _defineProperty(_ref6, 'passwordError', name === 'password' ? null : state.passwordError), _defineProperty(_ref6, 'newPasswordError', name === 'newPassword' ? null : state.newPasswordError), _defineProperty(_ref6, 'newConfirmPasswordError', name === 'newConfirmPassword' ? null : state.newConfirmPasswordError), _defineProperty(_ref6, 'passwordLength', name === 'newPassword' && state.isReset && value != null && value.trim().length < 6), _defineProperty(_ref6, 'passwordNum', name === 'newPassword' && state.isReset && value != null && !value.match(/\s*[0-9]+\s*/)), _defineProperty(_ref6, 'passwordUpper', name === 'newPassword' && state.isReset && value != null && !value.match(/\s*[A-Z]+\s*/)), _defineProperty(_ref6, 'passwordLower', name === 'newPassword' && state.isReset && value != null && !value.match(/\s*[a-z]+\s*/)), _ref6;
      });
      if (_this.props.clearLoginError) {
        _this.props.clearLoginError();
      }
    }, _this.loginClicked = function (e) {
      e.preventDefault();
      var _this$props = _this.props,
          doLogin = _this$props.doLogin,
          reset = _this$props.reset;
      // const { userName, password } = this.state || {}

      var msg = validate(_this.state, reset);
      console.log(msg);
      if (isValid(msg)) {
        doLogin && doLogin(_this.state);
      } else {
        _this.setState(msg);
      }
    }, _this.keyDown = function (e) {
      if (e.keyCode === 13) {
        _this.loginClicked(e);
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(LoginComp, [{
    key: 'render',
    value: function render() {
      var _state = this.state,
          password = _state.password,
          userName = _state.userName,
          userNameError = _state.userNameError,
          passwordError = _state.passwordError,
          newPassword = _state.newPassword,
          newConfirmPassword = _state.newConfirmPassword,
          newPasswordError = _state.newPasswordError,
          newConfirmPasswordError = _state.newConfirmPasswordError,
          passwordLength = _state.passwordLength,
          passwordNum = _state.passwordNum,
          passwordUpper = _state.passwordUpper,
          passwordLower = _state.passwordLower;
      var _props = this.props,
          style = _props.style,
          className = _props.className,
          loading = _props.loading,
          initialErrorMsg = _props.initialErrorMsg,
          loginError = _props.loginError,
          reset = _props.reset;

      return _react2.default.createElement(
        _semanticUiReact.Form,
        { style: style, className: className },
        _react2.default.createElement(
          _semanticUiReact.Form.Field,
          null,
          _react2.default.createElement(
            'label',
            null,
            'User Name'
          ),
          _react2.default.createElement(_semanticUiReact.Input, {
            value: userName || '',
            onChange: this.setFieldValue,
            name: 'userName',
            placeholder: 'User Name',
            disabled: reset,
            error: !(0, _isNil3.default)(userNameError)
          }),
          userNameError && _react2.default.createElement(
            'label',
            { style: errorStyle },
            userNameError
          )
        ),
        _react2.default.createElement(
          _semanticUiReact.Form.Field,
          null,
          _react2.default.createElement(
            'label',
            null,
            'Password'
          ),
          _react2.default.createElement(_semanticUiReact.Input, {
            value: password || '',
            onChange: this.setFieldValue,
            name: 'password',
            type: 'password',
            placeholder: 'Password',
            error: !(0, _isNil3.default)(passwordError),
            onKeyDown: this.keyDown
          }),
          passwordError && _react2.default.createElement(
            'label',
            { style: errorStyle },
            passwordError
          )
        ),
        reset && _react2.default.createElement(
          _semanticUiReact.Form.Field,
          null,
          _react2.default.createElement(
            'label',
            null,
            'New Password'
          ),
          _react2.default.createElement(_semanticUiReact.Input, {
            value: newPassword || '',
            onChange: this.setFieldValue,
            name: 'newPassword',
            type: 'password',
            placeholder: 'New Password',
            error: !(0, _isNil3.default)(newPasswordError),
            onKeyDown: this.keyDown
          }),
          newPasswordError && _react2.default.createElement(
            'label',
            { style: errorStyle },
            newPasswordError
          )
        ),
        reset && _react2.default.createElement(
          _semanticUiReact.Form.Field,
          null,
          _react2.default.createElement(
            'label',
            null,
            'Confirm New Password'
          ),
          _react2.default.createElement(_semanticUiReact.Input, {
            value: newConfirmPassword || '',
            onChange: this.setFieldValue,
            name: 'newConfirmPassword',
            type: 'password',
            placeholder: 'Confirm New Password',
            error: !(0, _isNil3.default)(newConfirmPasswordError),
            onKeyDown: this.keyDown
          }),
          newConfirmPasswordError && _react2.default.createElement(
            'label',
            { style: errorStyle },
            newConfirmPasswordError
          )
        ),
        loginError && (loginError.errorMsg || loginError.message) ? _react2.default.createElement(
          LoginError,
          null,
          loginError.errorMsg || loginError.message
        ) : initialErrorMsg && _react2.default.createElement(
          LoginError,
          null,
          initialErrorMsg
        ),
        reset && _react2.default.createElement(
          LoginError,
          null,
          'Your Pasword is expired. Please update password to continue.'
        ),
        passwordNum && _react2.default.createElement(
          LoginError,
          null,
          'New password must contain at least 1 number'
        ),
        passwordLength && _react2.default.createElement(
          LoginError,
          null,
          'New password must be at least 6 letters or digits'
        ),
        passwordUpper && _react2.default.createElement(
          LoginError,
          null,
          'New password must contain at least 1 upper case letter'
        ),
        passwordLower && _react2.default.createElement(
          LoginError,
          null,
          'New password must contain at least 1 lower case letter'
        ),
        _react2.default.createElement(
          _semanticUiReact.Button,
          {
            loading: loading,
            onClick: this.loginClicked,
            fluid: true,
            primary: true,
            'data-testid': 'loginButton'
          },
          reset ? 'Update Password' : 'Login'
        )
      );
    }
  }]);

  return LoginComp;
}(_react2.default.Component);

exports.default = LoginComp;
//# sourceMappingURL=LoginComp.js.map