react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
387 lines (326 loc) • 14.5 kB
JavaScript
'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;