react-misc-toolbox/dist/AuthModal.js

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _regenerator2 = _interopRequireDefault(_regenerator);

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

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _RESET__, _labels;

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  text-align: center;\n'], ['\n  text-align: center;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n'], ['\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _SinglePageModal2 = _interopRequireDefault(_SinglePageModal);

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

var _Button2 = _interopRequireDefault(_Button);

var _helperFunctions = require('./helperFunctions');

var _SignInWithEmailAndPasswordForm = require('./SignInWithEmailAndPasswordForm');

var _SignInWithEmailAndPasswordForm2 = _interopRequireDefault(_SignInWithEmailAndPasswordForm);

var _CreateUserWithEmailAndPasswordForm = require('./CreateUserWithEmailAndPasswordForm');

var _CreateUserWithEmailAndPasswordForm2 = _interopRequireDefault(_CreateUserWithEmailAndPasswordForm);

var _SendPasswordResetEmailForm = require('./SendPasswordResetEmailForm');

var _SendPasswordResetEmailForm2 = _interopRequireDefault(_SendPasswordResetEmailForm);

var _SendPasswordResetEmailModal = require('./SendPasswordResetEmailModal');

var _SendPasswordResetEmailModal2 = _interopRequireDefault(_SendPasswordResetEmailModal);

var _SendEmailVerificationForm = require('./SendEmailVerificationForm');

var _SendEmailVerificationForm2 = _interopRequireDefault(_SendEmailVerificationForm);

var _SendEmailVerificationModal = require('./SendEmailVerificationModal');

var _SendEmailVerificationModal2 = _interopRequireDefault(_SendEmailVerificationModal);

var _LoginViaThirdParty = require('./LoginViaThirdParty');

var _LoginViaThirdParty2 = _interopRequireDefault(_LoginViaThirdParty);

var _constants = require('./constants');

var _StyledModal = require('./StyledModal');

var _UIBits = require('./UIBits');

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

var TextLink = (0, _styledComponents2.default)(_Button2.default).attrs({
  colors: 'link'
})(_templateObject);

var SupportLink = _styledComponents2.default.div(_templateObject2);

var __CREATE__ = _constants.auth.__CREATE__,
    __SIGNIN__ = _constants.auth.__SIGNIN__,
    __VERIFY__ = _constants.auth.__VERIFY__,
    __RESET__ = _constants.auth.__RESET__;


var AuthModal = function AuthModal(_ref) {
  var handleSignInWithEmailAndPassword = _ref.handleSignInWithEmailAndPassword,
      handleCreateUserWithEmailAndPassword = _ref.handleCreateUserWithEmailAndPassword,
      handleSendEmailVerification = _ref.handleSendEmailVerification,
      handleSendPasswordResetEmail = _ref.handleSendPasswordResetEmail,
      handleSignInWithFacebook = _ref.handleSignInWithFacebook,
      handleSignInWithGoogle = _ref.handleSignInWithGoogle,
      labels = _ref.labels,
      _ref$usePasswordReset = _ref.usePasswordResetModal,
      usePasswordResetModal = _ref$usePasswordReset === undefined ? true : _ref$usePasswordReset,
      _ref$useResendVerific = _ref.useResendVerificationModal,
      useResendVerificationModal = _ref$useResendVerific === undefined ? true : _ref$useResendVerific,
      _ref$initialMode = _ref.initialMode,
      initialMode = _ref$initialMode === undefined ? __SIGNIN__ : _ref$initialMode,
      props = (0, _objectWithoutProperties3.default)(_ref, ['handleSignInWithEmailAndPassword', 'handleCreateUserWithEmailAndPassword', 'handleSendEmailVerification', 'handleSendPasswordResetEmail', 'handleSignInWithFacebook', 'handleSignInWithGoogle', 'labels', 'usePasswordResetModal', 'useResendVerificationModal', 'initialMode']);

  var _useState = (0, _react.useState)(initialMode),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      mode = _useState2[0],
      setModeTo = _useState2[1];

  var ThirdPartyLogin = function ThirdPartyLogin() {
    return _react2.default.createElement(_LoginViaThirdParty2.default, { handleSignInWithFacebook: handleSignInWithFacebook, handleSignInWithGoogle: handleSignInWithGoogle, labels: labels.thirdparty });
  };

  var renderModeSwitch = function renderModeSwitch(newMode) {
    return _react2.default.createElement(
      TextLink,
      {
        onClick: function onClick() {
          return setModeTo(newMode);
        }
      },
      labels[newMode].subTrigger
    );
  };

  var renderModal = function renderModal(newMode) {
    var renderTrigger = function renderTrigger(_ref2) {
      var getTriggerProps = _ref2.getTriggerProps;
      return _react2.default.createElement(
        TextLink,
        (0, _extends3.default)({}, getTriggerProps()),
        labels[newMode].subTrigger
      );
    };
    return _react2.default.createElement(MiniModal, { mode: newMode, labels: labels });
  };
  var renderSupportLinks = function renderSupportLinks() {
    switch (mode) {
      case __SIGNIN__:
        return _react2.default.createElement(
          SupportLink,
          null,
          renderModeSwitch(__CREATE__),
          usePasswordResetModal ? renderModal(__RESET__) : renderModeSwitch(__RESET__)
        );
      case __CREATE__:
        return _react2.default.createElement(
          SupportLink,
          null,
          renderModeSwitch(__SIGNIN__),
          useResendVerificationModal ? renderModal(__VERIFY__) : renderModeSwitch(__VERIFY__)
        );
      case __VERIFY__:
        return null;
      case __RESET__:
        return null;
      default:
        break;
    }
  };
  var renderThirdPartyOptions = function renderThirdPartyOptions() {
    switch (mode) {
      case __SIGNIN__:
        return _react2.default.createElement(
          _react.Fragment,
          null,
          _react2.default.createElement(
            _UIBits.Divider,
            null,
            'OR'
          ),
          _react2.default.createElement(ThirdPartyLogin, null)
        );
      case __CREATE__:
        return _react2.default.createElement(
          _react.Fragment,
          null,
          _react2.default.createElement(
            _UIBits.Divider,
            null,
            'OR'
          ),
          _react2.default.createElement(ThirdPartyLogin, null)
        );
      case __VERIFY__:
        return null;
      case __RESET__:
        return null;
      default:
        break;
    }
  };

  var MiniModal = function MiniModal(_ref3) {
    var mode = _ref3.mode;
    return _react2.default.createElement(_SinglePageModal2.default, {
      style: {
        width: 300
      },
      renderTrigger: function renderTrigger(_ref4) {
        var getTriggerProps = _ref4.getTriggerProps;
        return _react2.default.createElement(
          TextLink,
          getTriggerProps(),
          labels[mode].subTrigger
        );
      },
      renderHeader: function renderHeader(_ref5) {
        var getHeaderProps = _ref5.getHeaderProps;
        return _react2.default.createElement(
          _StyledModal.HEADER,
          getHeaderProps(),
          labels[mode].header
        );
      },
      renderBody: function renderBody(_ref6) {
        var getBodyProps = _ref6.getBodyProps;
        return _react2.default.createElement(
          _StyledModal.BODY,
          getBodyProps(),
          renderForm(mode)
        );
      }
    });
  };

  var renderForm = function renderForm(mode) {
    switch (mode) {
      case __SIGNIN__:
        return _react2.default.createElement(_SignInWithEmailAndPasswordForm2.default, { handleSignInWithEmailAndPassword: handleSignInWithEmailAndPassword, labels: labels[mode] });
      case __CREATE__:
        return _react2.default.createElement(_CreateUserWithEmailAndPasswordForm2.default, { handleCreateUserWithEmailAndPassword: handleCreateUserWithEmailAndPassword, labels: labels[mode] });
      case __VERIFY__:
        return _react2.default.createElement(_SendEmailVerificationForm2.default, { handleSendEmailVerification: handleSendEmailVerification, labels: labels[mode] });
      case __RESET__:
        return _react2.default.createElement(_SendPasswordResetEmailForm2.default, { handleSendPasswordResetEmail: handleSendPasswordResetEmail, labels: labels[mode] });
      default:
        break;
    }
  };
  return _react2.default.createElement(_SinglePageModal2.default, (0, _extends3.default)({
    onCloseModal: function () {
      var _ref7 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
        return _regenerator2.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return (0, _helperFunctions.delay)(300);

              case 2:
                setModeTo(initialMode);

              case 3:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, undefined);
      }));

      function onCloseModal() {
        return _ref7.apply(this, arguments);
      }

      return onCloseModal;
    }(),
    className: 'authmodal__container',
    style: { width: '30rem' },
    dataTestId: 'authmodal-container',
    renderTrigger: function renderTrigger(_ref8) {
      var getTriggerProps = _ref8.getTriggerProps;
      return _react2.default.createElement(
        _Button2.default,
        (0, _extends3.default)({}, getTriggerProps({ className: 'authmodal__trigger' })),
        labels[initialMode].trigger
      );
    },
    renderHeader: function renderHeader(_ref9) {
      var getHeaderProps = _ref9.getHeaderProps;
      return _react2.default.createElement(
        _StyledModal.HEADER,
        (0, _extends3.default)({}, getHeaderProps({ className: 'authmodal__header' })),
        labels[mode].header
      );
    },
    renderBody: function renderBody(_ref10) {
      var getBodyProps = _ref10.getBodyProps;
      return _react2.default.createElement(
        _StyledModal.BODY,
        getBodyProps({ className: 'authmodal__body' }),
        renderForm(mode),
        renderSupportLinks(),
        renderThirdPartyOptions()
      );
    }
  }, props));
};

AuthModal.propTypes = {};
AuthModal.defaultProps = {
  handleCreateUserWithEmailAndPassword: function handleCreateUserWithEmailAndPassword(_ref11) {
    var email = _ref11.email,
        password = _ref11.password;
    return console.log('handleCreateUserWithEmailAndPassword', email, password);
  },
  handleSignInWithEmailAndPassword: function handleSignInWithEmailAndPassword(_ref12) {
    var email = _ref12.email,
        password = _ref12.password;
    return console.log('handleSignInWithEmailAndPassword', email, password);
  },
  handleSendPasswordResetEmail: function handleSendPasswordResetEmail(email) {
    return console.log('handleSendPasswordResetEmail', email);
  },
  handleSendEmailVerification: function handleSendEmailVerification(email) {
    return console.log('handleSendEmailVerification', email);
  },
  handleSignInWithFacebook: function handleSignInWithFacebook() {
    return console.log('handleSignInWithFacebook');
  },
  handleSignInWithGoogle: function handleSignInWithGoogle() {
    return console.log('handleSignInWithGoogle');
  },
  labels: (_labels = {}, (0, _defineProperty3.default)(_labels, __CREATE__, {
    header: 'Register a new account',
    trigger: 'register',
    subTrigger: 'Don\'t have an account? Create one ',
    submit: 'submit',
    email: 'email',
    emailRequired: 'emailRequired',
    emailInvalid: 'emailInvalid',
    password: 'password',
    passwordRequired: 'passwordRequired',
    passwordMinLength: 'passwordMinLength',
    passwordConfirmation: 'passwordConfirmation',
    passwordConfirmationRequired: 'passwordConfirmationRequired',
    passwordConfirmationMismatch: 'passwordConfirmationMismatch'
  }), (0, _defineProperty3.default)(_labels, __SIGNIN__, {
    header: 'Sign in',
    trigger: 'signin',
    subTrigger: 'Already have an account? Sign in',
    password: 'Password',
    email: 'Email',
    emailInvalid: 'emailInvalid',
    emailRequired: 'emailRequired',
    submit: 'Submit',
    passwordRequired: 'passwordRequired',
    passwordMinLength: 'passwordMinLength'
  }), (0, _defineProperty3.default)(_labels, __RESET__, (_RESET__ = {
    subTrigger: 'Forgot your password?',
    trigger: 'recover your password',
    header: 'Recover your password',
    checkInbox: 'Check your inbox at',
    email: 'enter your email'
  }, (0, _defineProperty3.default)(_RESET__, 'email', 'Email'), (0, _defineProperty3.default)(_RESET__, 'emailInvalid', 'emailInvalid'), (0, _defineProperty3.default)(_RESET__, 'emailRequired', 'emailRequired'), (0, _defineProperty3.default)(_RESET__, 'submit', 'submit'), _RESET__)), (0, _defineProperty3.default)(_labels, __VERIFY__, {
    subTrigger: 'Did not receive verification email? Let us send it again',
    checkInbox: 'Check your inbox at',
    trigger: 'Resend verification email',
    header: 'Resend verification email',
    email: 'Email',
    emailInvalid: 'emailInvalid',
    emailRequired: 'emailRequired',
    submit: 'submit'
  }), (0, _defineProperty3.default)(_labels, 'thirdparty', {
    signinwithfacebook: 'sign in with facebook',
    signinwithgoogle: 'sign in with google'
  }), _labels)
};

exports.default = AuthModal;