1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
8 |
|
9 | var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
10 |
|
11 | var _regenerator = require('babel-runtime/regenerator');
|
12 |
|
13 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
14 |
|
15 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
16 |
|
17 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
18 |
|
19 | var _extends2 = require('babel-runtime/helpers/extends');
|
20 |
|
21 | var _extends3 = _interopRequireDefault(_extends2);
|
22 |
|
23 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
24 |
|
25 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
26 |
|
27 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
28 |
|
29 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
30 |
|
31 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
32 |
|
33 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
34 |
|
35 | var _RESET__, _labels;
|
36 |
|
37 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n text-align: center;\n'], ['\n text-align: center;\n']),
|
38 | _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']);
|
39 |
|
40 | var _react = require('react');
|
41 |
|
42 | var _react2 = _interopRequireDefault(_react);
|
43 |
|
44 | var _styledComponents = require('styled-components');
|
45 |
|
46 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
47 |
|
48 | var _SinglePageModal = require('./SinglePageModal');
|
49 |
|
50 | var _SinglePageModal2 = _interopRequireDefault(_SinglePageModal);
|
51 |
|
52 | var _Button = require('./Button');
|
53 |
|
54 | var _Button2 = _interopRequireDefault(_Button);
|
55 |
|
56 | var _helperFunctions = require('./helperFunctions');
|
57 |
|
58 | var _SignInWithEmailAndPasswordForm = require('./SignInWithEmailAndPasswordForm');
|
59 |
|
60 | var _SignInWithEmailAndPasswordForm2 = _interopRequireDefault(_SignInWithEmailAndPasswordForm);
|
61 |
|
62 | var _CreateUserWithEmailAndPasswordForm = require('./CreateUserWithEmailAndPasswordForm');
|
63 |
|
64 | var _CreateUserWithEmailAndPasswordForm2 = _interopRequireDefault(_CreateUserWithEmailAndPasswordForm);
|
65 |
|
66 | var _SendPasswordResetEmailForm = require('./SendPasswordResetEmailForm');
|
67 |
|
68 | var _SendPasswordResetEmailForm2 = _interopRequireDefault(_SendPasswordResetEmailForm);
|
69 |
|
70 | var _SendPasswordResetEmailModal = require('./SendPasswordResetEmailModal');
|
71 |
|
72 | var _SendPasswordResetEmailModal2 = _interopRequireDefault(_SendPasswordResetEmailModal);
|
73 |
|
74 | var _SendEmailVerificationForm = require('./SendEmailVerificationForm');
|
75 |
|
76 | var _SendEmailVerificationForm2 = _interopRequireDefault(_SendEmailVerificationForm);
|
77 |
|
78 | var _SendEmailVerificationModal = require('./SendEmailVerificationModal');
|
79 |
|
80 | var _SendEmailVerificationModal2 = _interopRequireDefault(_SendEmailVerificationModal);
|
81 |
|
82 | var _LoginViaThirdParty = require('./LoginViaThirdParty');
|
83 |
|
84 | var _LoginViaThirdParty2 = _interopRequireDefault(_LoginViaThirdParty);
|
85 |
|
86 | var _constants = require('./constants');
|
87 |
|
88 | var _StyledModal = require('./StyledModal');
|
89 |
|
90 | var _UIBits = require('./UIBits');
|
91 |
|
92 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
93 |
|
94 | var TextLink = (0, _styledComponents2.default)(_Button2.default).attrs({
|
95 | colors: 'link'
|
96 | })(_templateObject);
|
97 |
|
98 | var SupportLink = _styledComponents2.default.div(_templateObject2);
|
99 |
|
100 | var __CREATE__ = _constants.auth.__CREATE__,
|
101 | __SIGNIN__ = _constants.auth.__SIGNIN__,
|
102 | __VERIFY__ = _constants.auth.__VERIFY__,
|
103 | __RESET__ = _constants.auth.__RESET__;
|
104 |
|
105 |
|
106 | var AuthModal = function AuthModal(_ref) {
|
107 | var handleSignInWithEmailAndPassword = _ref.handleSignInWithEmailAndPassword,
|
108 | handleCreateUserWithEmailAndPassword = _ref.handleCreateUserWithEmailAndPassword,
|
109 | handleSendEmailVerification = _ref.handleSendEmailVerification,
|
110 | handleSendPasswordResetEmail = _ref.handleSendPasswordResetEmail,
|
111 | handleSignInWithFacebook = _ref.handleSignInWithFacebook,
|
112 | handleSignInWithGoogle = _ref.handleSignInWithGoogle,
|
113 | labels = _ref.labels,
|
114 | _ref$usePasswordReset = _ref.usePasswordResetModal,
|
115 | usePasswordResetModal = _ref$usePasswordReset === undefined ? true : _ref$usePasswordReset,
|
116 | _ref$useResendVerific = _ref.useResendVerificationModal,
|
117 | useResendVerificationModal = _ref$useResendVerific === undefined ? true : _ref$useResendVerific,
|
118 | _ref$initialMode = _ref.initialMode,
|
119 | initialMode = _ref$initialMode === undefined ? __SIGNIN__ : _ref$initialMode,
|
120 | props = (0, _objectWithoutProperties3.default)(_ref, ['handleSignInWithEmailAndPassword', 'handleCreateUserWithEmailAndPassword', 'handleSendEmailVerification', 'handleSendPasswordResetEmail', 'handleSignInWithFacebook', 'handleSignInWithGoogle', 'labels', 'usePasswordResetModal', 'useResendVerificationModal', 'initialMode']);
|
121 |
|
122 | var _useState = (0, _react.useState)(initialMode),
|
123 | _useState2 = (0, _slicedToArray3.default)(_useState, 2),
|
124 | mode = _useState2[0],
|
125 | setModeTo = _useState2[1];
|
126 |
|
127 | var ThirdPartyLogin = function ThirdPartyLogin() {
|
128 | return _react2.default.createElement(_LoginViaThirdParty2.default, { handleSignInWithFacebook: handleSignInWithFacebook, handleSignInWithGoogle: handleSignInWithGoogle, labels: labels.thirdparty });
|
129 | };
|
130 |
|
131 | var renderModeSwitch = function renderModeSwitch(newMode) {
|
132 | return _react2.default.createElement(
|
133 | TextLink,
|
134 | {
|
135 | onClick: function onClick() {
|
136 | return setModeTo(newMode);
|
137 | }
|
138 | },
|
139 | labels[newMode].subTrigger
|
140 | );
|
141 | };
|
142 |
|
143 | var renderModal = function renderModal(newMode) {
|
144 | var renderTrigger = function renderTrigger(_ref2) {
|
145 | var getTriggerProps = _ref2.getTriggerProps;
|
146 | return _react2.default.createElement(
|
147 | TextLink,
|
148 | (0, _extends3.default)({}, getTriggerProps()),
|
149 | labels[newMode].subTrigger
|
150 | );
|
151 | };
|
152 | return _react2.default.createElement(MiniModal, { mode: newMode, labels: labels });
|
153 | };
|
154 | var renderSupportLinks = function renderSupportLinks() {
|
155 | switch (mode) {
|
156 | case __SIGNIN__:
|
157 | return _react2.default.createElement(
|
158 | SupportLink,
|
159 | null,
|
160 | renderModeSwitch(__CREATE__),
|
161 | usePasswordResetModal ? renderModal(__RESET__) : renderModeSwitch(__RESET__)
|
162 | );
|
163 | case __CREATE__:
|
164 | return _react2.default.createElement(
|
165 | SupportLink,
|
166 | null,
|
167 | renderModeSwitch(__SIGNIN__),
|
168 | useResendVerificationModal ? renderModal(__VERIFY__) : renderModeSwitch(__VERIFY__)
|
169 | );
|
170 | case __VERIFY__:
|
171 | return null;
|
172 | case __RESET__:
|
173 | return null;
|
174 | default:
|
175 | break;
|
176 | }
|
177 | };
|
178 | var renderThirdPartyOptions = function renderThirdPartyOptions() {
|
179 | switch (mode) {
|
180 | case __SIGNIN__:
|
181 | return _react2.default.createElement(
|
182 | _react.Fragment,
|
183 | null,
|
184 | _react2.default.createElement(
|
185 | _UIBits.Divider,
|
186 | null,
|
187 | 'OR'
|
188 | ),
|
189 | _react2.default.createElement(ThirdPartyLogin, null)
|
190 | );
|
191 | case __CREATE__:
|
192 | return _react2.default.createElement(
|
193 | _react.Fragment,
|
194 | null,
|
195 | _react2.default.createElement(
|
196 | _UIBits.Divider,
|
197 | null,
|
198 | 'OR'
|
199 | ),
|
200 | _react2.default.createElement(ThirdPartyLogin, null)
|
201 | );
|
202 | case __VERIFY__:
|
203 | return null;
|
204 | case __RESET__:
|
205 | return null;
|
206 | default:
|
207 | break;
|
208 | }
|
209 | };
|
210 |
|
211 | var MiniModal = function MiniModal(_ref3) {
|
212 | var mode = _ref3.mode;
|
213 | return _react2.default.createElement(_SinglePageModal2.default, {
|
214 | style: {
|
215 | width: 300
|
216 | },
|
217 | renderTrigger: function renderTrigger(_ref4) {
|
218 | var getTriggerProps = _ref4.getTriggerProps;
|
219 | return _react2.default.createElement(
|
220 | TextLink,
|
221 | getTriggerProps(),
|
222 | labels[mode].subTrigger
|
223 | );
|
224 | },
|
225 | renderHeader: function renderHeader(_ref5) {
|
226 | var getHeaderProps = _ref5.getHeaderProps;
|
227 | return _react2.default.createElement(
|
228 | _StyledModal.HEADER,
|
229 | getHeaderProps(),
|
230 | labels[mode].header
|
231 | );
|
232 | },
|
233 | renderBody: function renderBody(_ref6) {
|
234 | var getBodyProps = _ref6.getBodyProps;
|
235 | return _react2.default.createElement(
|
236 | _StyledModal.BODY,
|
237 | getBodyProps(),
|
238 | renderForm(mode)
|
239 | );
|
240 | }
|
241 | });
|
242 | };
|
243 |
|
244 | var renderForm = function renderForm(mode) {
|
245 | switch (mode) {
|
246 | case __SIGNIN__:
|
247 | return _react2.default.createElement(_SignInWithEmailAndPasswordForm2.default, { handleSignInWithEmailAndPassword: handleSignInWithEmailAndPassword, labels: labels[mode] });
|
248 | case __CREATE__:
|
249 | return _react2.default.createElement(_CreateUserWithEmailAndPasswordForm2.default, { handleCreateUserWithEmailAndPassword: handleCreateUserWithEmailAndPassword, labels: labels[mode] });
|
250 | case __VERIFY__:
|
251 | return _react2.default.createElement(_SendEmailVerificationForm2.default, { handleSendEmailVerification: handleSendEmailVerification, labels: labels[mode] });
|
252 | case __RESET__:
|
253 | return _react2.default.createElement(_SendPasswordResetEmailForm2.default, { handleSendPasswordResetEmail: handleSendPasswordResetEmail, labels: labels[mode] });
|
254 | default:
|
255 | break;
|
256 | }
|
257 | };
|
258 | return _react2.default.createElement(_SinglePageModal2.default, (0, _extends3.default)({
|
259 | onCloseModal: function () {
|
260 | var _ref7 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee() {
|
261 | return _regenerator2.default.wrap(function _callee$(_context) {
|
262 | while (1) {
|
263 | switch (_context.prev = _context.next) {
|
264 | case 0:
|
265 | _context.next = 2;
|
266 | return (0, _helperFunctions.delay)(300);
|
267 |
|
268 | case 2:
|
269 | setModeTo(initialMode);
|
270 |
|
271 | case 3:
|
272 | case 'end':
|
273 | return _context.stop();
|
274 | }
|
275 | }
|
276 | }, _callee, undefined);
|
277 | }));
|
278 |
|
279 | function onCloseModal() {
|
280 | return _ref7.apply(this, arguments);
|
281 | }
|
282 |
|
283 | return onCloseModal;
|
284 | }(),
|
285 | className: 'authmodal__container',
|
286 | style: { width: '30rem' },
|
287 | dataTestId: 'authmodal-container',
|
288 | renderTrigger: function renderTrigger(_ref8) {
|
289 | var getTriggerProps = _ref8.getTriggerProps;
|
290 | return _react2.default.createElement(
|
291 | _Button2.default,
|
292 | (0, _extends3.default)({}, getTriggerProps({ className: 'authmodal__trigger' })),
|
293 | labels[initialMode].trigger
|
294 | );
|
295 | },
|
296 | renderHeader: function renderHeader(_ref9) {
|
297 | var getHeaderProps = _ref9.getHeaderProps;
|
298 | return _react2.default.createElement(
|
299 | _StyledModal.HEADER,
|
300 | (0, _extends3.default)({}, getHeaderProps({ className: 'authmodal__header' })),
|
301 | labels[mode].header
|
302 | );
|
303 | },
|
304 | renderBody: function renderBody(_ref10) {
|
305 | var getBodyProps = _ref10.getBodyProps;
|
306 | return _react2.default.createElement(
|
307 | _StyledModal.BODY,
|
308 | getBodyProps({ className: 'authmodal__body' }),
|
309 | renderForm(mode),
|
310 | renderSupportLinks(),
|
311 | renderThirdPartyOptions()
|
312 | );
|
313 | }
|
314 | }, props));
|
315 | };
|
316 |
|
317 | AuthModal.propTypes = {};
|
318 | AuthModal.defaultProps = {
|
319 | handleCreateUserWithEmailAndPassword: function handleCreateUserWithEmailAndPassword(_ref11) {
|
320 | var email = _ref11.email,
|
321 | password = _ref11.password;
|
322 | return console.log('handleCreateUserWithEmailAndPassword', email, password);
|
323 | },
|
324 | handleSignInWithEmailAndPassword: function handleSignInWithEmailAndPassword(_ref12) {
|
325 | var email = _ref12.email,
|
326 | password = _ref12.password;
|
327 | return console.log('handleSignInWithEmailAndPassword', email, password);
|
328 | },
|
329 | handleSendPasswordResetEmail: function handleSendPasswordResetEmail(email) {
|
330 | return console.log('handleSendPasswordResetEmail', email);
|
331 | },
|
332 | handleSendEmailVerification: function handleSendEmailVerification(email) {
|
333 | return console.log('handleSendEmailVerification', email);
|
334 | },
|
335 | handleSignInWithFacebook: function handleSignInWithFacebook() {
|
336 | return console.log('handleSignInWithFacebook');
|
337 | },
|
338 | handleSignInWithGoogle: function handleSignInWithGoogle() {
|
339 | return console.log('handleSignInWithGoogle');
|
340 | },
|
341 | labels: (_labels = {}, (0, _defineProperty3.default)(_labels, __CREATE__, {
|
342 | header: 'Register a new account',
|
343 | trigger: 'register',
|
344 | subTrigger: 'Don\'t have an account? Create one ',
|
345 | submit: 'submit',
|
346 | email: 'email',
|
347 | emailRequired: 'emailRequired',
|
348 | emailInvalid: 'emailInvalid',
|
349 | password: 'password',
|
350 | passwordRequired: 'passwordRequired',
|
351 | passwordMinLength: 'passwordMinLength',
|
352 | passwordConfirmation: 'passwordConfirmation',
|
353 | passwordConfirmationRequired: 'passwordConfirmationRequired',
|
354 | passwordConfirmationMismatch: 'passwordConfirmationMismatch'
|
355 | }), (0, _defineProperty3.default)(_labels, __SIGNIN__, {
|
356 | header: 'Sign in',
|
357 | trigger: 'signin',
|
358 | subTrigger: 'Already have an account? Sign in',
|
359 | password: 'Password',
|
360 | email: 'Email',
|
361 | emailInvalid: 'emailInvalid',
|
362 | emailRequired: 'emailRequired',
|
363 | submit: 'Submit',
|
364 | passwordRequired: 'passwordRequired',
|
365 | passwordMinLength: 'passwordMinLength'
|
366 | }), (0, _defineProperty3.default)(_labels, __RESET__, (_RESET__ = {
|
367 | subTrigger: 'Forgot your password?',
|
368 | trigger: 'recover your password',
|
369 | header: 'Recover your password',
|
370 | checkInbox: 'Check your inbox at',
|
371 | email: 'enter your email'
|
372 | }, (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__, {
|
373 | subTrigger: 'Did not receive verification email? Let us send it again',
|
374 | checkInbox: 'Check your inbox at',
|
375 | trigger: 'Resend verification email',
|
376 | header: 'Resend verification email',
|
377 | email: 'Email',
|
378 | emailInvalid: 'emailInvalid',
|
379 | emailRequired: 'emailRequired',
|
380 | submit: 'submit'
|
381 | }), (0, _defineProperty3.default)(_labels, 'thirdparty', {
|
382 | signinwithfacebook: 'sign in with facebook',
|
383 | signinwithgoogle: 'sign in with google'
|
384 | }), _labels)
|
385 | };
|
386 |
|
387 | exports.default = AuthModal; |
\ | No newline at end of file |