react-misc-toolbox/dist/RegisterAccountModal.js

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _formik = require('formik');

var _recompose = require('recompose');

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _SinglePageModal = require('./SinglePageModal');

var _SinglePageModal2 = _interopRequireDefault(_SinglePageModal);

var _yup = require('yup');

var Yup = _interopRequireWildcard(_yup);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

var InnerForm = function InnerForm(props) {
  var values = props.values,
      touched = props.touched,
      errors = props.errors,
      labels = props.labels,
      isSubmitting = props.isSubmitting,
      handleChange = props.handleChange,
      handleBlur = props.handleBlur,
      handleSubmit = props.handleSubmit;

  var renderTextInputSocket = function renderTextInputSocket(_ref) {
    var type = _ref.type,
        required = _ref.required;
    return _react2.default.createElement(
      'div',
      { className: 'form__socket' },
      _react2.default.createElement('input', {
        'data-testid': 'registeraccountmodal-' + type.toLowerCase() + 'input',
        id: type,
        required: required,
        type: 'text',
        value: values[type],
        onChange: handleChange,
        onBlur: handleBlur,
        className: errors[type] && touched[type] ? 'text-input error' : 'text-input'
      }),
      _react2.default.createElement(
        'label',
        null,
        labels[type].title
      ),
      _react2.default.createElement('span', { className: 'bar' }),
      errors[type] && touched[type] && _react2.default.createElement(
        'div',
        { className: 'input-feedback' },
        errors[type]
      )
    );
  };
  return _react2.default.createElement(
    'form',
    { onSubmit: handleSubmit, 'data-testid': 'registeraccountmodal-form' },
    renderTextInputSocket({ type: 'email', required: true }),
    renderTextInputSocket({ type: 'password', required: true }),
    renderTextInputSocket({ type: 'passwordConfirmation', required: true }),
    _react2.default.createElement(
      _Button2.default,
      {
        onClick: handleSubmit,
        type: 'confirm',
        dataTestId: 'registeraccountmodal-submit',
        disabled: isSubmitting
      },
      labels.submit
    ),
    errors.firebase && _react2.default.createElement(
      'div',
      { 'data-testid': 'registeraccountmodal-formerror-firebase', className: 'input-feedback' },
      'error!',
      errors.firebase
    )
  );
};
//import Yup from 'yup'


var EnhancedForm = (0, _formik.withFormik)({
  mapPropsToValues: function mapPropsToValues() {
    return { email: '', password: '', passwordConfirmation: '' };
  },
  //validateOnChange: false,
  validationSchema: function validationSchema(_ref2) {
    var labels = _ref2.labels;

    Yup.object().shape({
      email: Yup.string().required(labels.email.required).email(labels.email.invalid),
      password: Yup.string().required(labels.password.required).min(8, labels.password.invalid),
      passwordConfirmation: Yup.string().required(labels.passwordConfirmation.required).oneOf([Yup.ref('password'), null], labels.passwordConfirmation.invalid)
    });
  },
  handleSubmit: function () {
    var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(values, _ref3) {
      var props = _ref3.props,
          setSubmitting = _ref3.setSubmitting,
          setFieldError = _ref3.setFieldError;
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;

              console.log(props);
              _context.next = 4;
              return props.handleCreateUserWithEmailAndPassword(values.email, values.password);

            case 4:
              console.log((0, _stringify2.default)(values, null, 2));
              _context.next = 12;
              break;

            case 7:
              _context.prev = 7;
              _context.t0 = _context['catch'](0);

              console.error(_context.t0);
              _context.next = 12;
              return setFieldError('firebase', _context.t0.message);

            case 12:
              _context.next = 14;
              return setSubmitting(false);

            case 14:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined, [[0, 7]]);
    }));

    function handleSubmit(_x, _x2) {
      return _ref4.apply(this, arguments);
    }

    return handleSubmit;
  }(),
  displayName: 'RegisterAccountModalForm'
})(InnerForm);

var RegisterAccountModal = function RegisterAccountModal(_ref5) {
  var labels = _ref5.labels,
      handleCreateUserWithEmailAndPassword = _ref5.handleCreateUserWithEmailAndPassword;

  return _react2.default.createElement(_SinglePageModal2.default, {
    containerPropsAppend: {
      className: 'registeraccountmodal__container'
    },
    renderTrigger: function renderTrigger(_ref6) {
      var getTriggerProps = _ref6.getTriggerProps;
      return _react2.default.createElement(
        _Button2.default,
        (0, _extends3.default)({}, getTriggerProps(), {
          dataTestId: 'signinmodal_registeraccountmodal-trigger',
          type: 'small'
        }),
        labels.trigger
      );
    },
    renderHeader: function renderHeader(_ref7) {
      var getHeaderProps = _ref7.getHeaderProps;
      return _react2.default.createElement(
        'div',
        (0, _extends3.default)({}, getHeaderProps()),
        labels.header
      );
    },
    renderBody: function renderBody(_ref8) {
      var getBodyProps = _ref8.getBodyProps;
      return _react2.default.createElement(
        'div',
        getBodyProps(),
        _react2.default.createElement(EnhancedForm, { labels: labels, handleCreateUserWithEmailAndPassword: handleCreateUserWithEmailAndPassword })
      );
    }
  });
};

RegisterAccountModal.propTypes = {};
RegisterAccountModal.defaultProps = {
  handleCreateUserWithEmailAndPassword: function handleCreateUserWithEmailAndPassword(email, password) {
    return console.log('handleCreateUserWithEmailAndPassword', email, password);
  },
  labels: {
    submit: 'submit',
    header: 'Register a new account',
    trigger: 'register',
    email: {
      title: 'Email',
      required: 'required',
      invalid: 'invalid'
    },
    password: {
      title: 'Password',
      required: 'required',
      invalid: 'invalid'
    },
    passwordConfirmation: {
      title: 'Confirm password',
      required: 'required',
      invalid: 'invalid'
    }
  }
};

var enhance = (0, _recompose.compose)();

exports.default = enhance(RegisterAccountModal);