1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _regenerator = require('babel-runtime/regenerator');
|
12 |
|
13 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
14 |
|
15 | var _stringify = require('babel-runtime/core-js/json/stringify');
|
16 |
|
17 | var _stringify2 = _interopRequireDefault(_stringify);
|
18 |
|
19 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
20 |
|
21 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
22 |
|
23 | var _react = require('react');
|
24 |
|
25 | var _react2 = _interopRequireDefault(_react);
|
26 |
|
27 | var _formik = require('formik');
|
28 |
|
29 | var _recompose = require('recompose');
|
30 |
|
31 | var _Button = require('./Button');
|
32 |
|
33 | var _Button2 = _interopRequireDefault(_Button);
|
34 |
|
35 | var _SinglePageModal = require('./SinglePageModal');
|
36 |
|
37 | var _SinglePageModal2 = _interopRequireDefault(_SinglePageModal);
|
38 |
|
39 | var _yup = require('yup');
|
40 |
|
41 | var Yup = _interopRequireWildcard(_yup);
|
42 |
|
43 | 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; } }
|
44 |
|
45 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
46 |
|
47 | var InnerForm = function InnerForm(props) {
|
48 | var values = props.values,
|
49 | touched = props.touched,
|
50 | errors = props.errors,
|
51 | labels = props.labels,
|
52 | isSubmitting = props.isSubmitting,
|
53 | handleChange = props.handleChange,
|
54 | handleBlur = props.handleBlur,
|
55 | handleSubmit = props.handleSubmit;
|
56 |
|
57 | var renderTextInputSocket = function renderTextInputSocket(_ref) {
|
58 | var type = _ref.type,
|
59 | required = _ref.required;
|
60 | return _react2.default.createElement(
|
61 | 'div',
|
62 | { className: 'form__socket' },
|
63 | _react2.default.createElement('input', {
|
64 | 'data-testid': 'registeraccountmodal-' + type.toLowerCase() + 'input',
|
65 | id: type,
|
66 | required: required,
|
67 | type: 'text',
|
68 | value: values[type],
|
69 | onChange: handleChange,
|
70 | onBlur: handleBlur,
|
71 | className: errors[type] && touched[type] ? 'text-input error' : 'text-input'
|
72 | }),
|
73 | _react2.default.createElement(
|
74 | 'label',
|
75 | null,
|
76 | labels[type].title
|
77 | ),
|
78 | _react2.default.createElement('span', { className: 'bar' }),
|
79 | errors[type] && touched[type] && _react2.default.createElement(
|
80 | 'div',
|
81 | { className: 'input-feedback' },
|
82 | errors[type]
|
83 | )
|
84 | );
|
85 | };
|
86 | return _react2.default.createElement(
|
87 | 'form',
|
88 | { onSubmit: handleSubmit, 'data-testid': 'registeraccountmodal-form' },
|
89 | renderTextInputSocket({ type: 'email', required: true }),
|
90 | renderTextInputSocket({ type: 'password', required: true }),
|
91 | renderTextInputSocket({ type: 'passwordConfirmation', required: true }),
|
92 | _react2.default.createElement(
|
93 | _Button2.default,
|
94 | {
|
95 | onClick: handleSubmit,
|
96 | type: 'confirm',
|
97 | dataTestId: 'registeraccountmodal-submit',
|
98 | disabled: isSubmitting
|
99 | },
|
100 | labels.submit
|
101 | ),
|
102 | errors.firebase && _react2.default.createElement(
|
103 | 'div',
|
104 | { 'data-testid': 'registeraccountmodal-formerror-firebase', className: 'input-feedback' },
|
105 | 'error!',
|
106 | errors.firebase
|
107 | )
|
108 | );
|
109 | };
|
110 |
|
111 |
|
112 |
|
113 | var EnhancedForm = (0, _formik.withFormik)({
|
114 | mapPropsToValues: function mapPropsToValues() {
|
115 | return { email: '', password: '', passwordConfirmation: '' };
|
116 | },
|
117 |
|
118 | validationSchema: function validationSchema(_ref2) {
|
119 | var labels = _ref2.labels;
|
120 |
|
121 | Yup.object().shape({
|
122 | email: Yup.string().required(labels.email.required).email(labels.email.invalid),
|
123 | password: Yup.string().required(labels.password.required).min(8, labels.password.invalid),
|
124 | passwordConfirmation: Yup.string().required(labels.passwordConfirmation.required).oneOf([Yup.ref('password'), null], labels.passwordConfirmation.invalid)
|
125 | });
|
126 | },
|
127 | handleSubmit: function () {
|
128 | var _ref4 = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee(values, _ref3) {
|
129 | var props = _ref3.props,
|
130 | setSubmitting = _ref3.setSubmitting,
|
131 | setFieldError = _ref3.setFieldError;
|
132 | return _regenerator2.default.wrap(function _callee$(_context) {
|
133 | while (1) {
|
134 | switch (_context.prev = _context.next) {
|
135 | case 0:
|
136 | _context.prev = 0;
|
137 |
|
138 | console.log(props);
|
139 | _context.next = 4;
|
140 | return props.handleCreateUserWithEmailAndPassword(values.email, values.password);
|
141 |
|
142 | case 4:
|
143 | console.log((0, _stringify2.default)(values, null, 2));
|
144 | _context.next = 12;
|
145 | break;
|
146 |
|
147 | case 7:
|
148 | _context.prev = 7;
|
149 | _context.t0 = _context['catch'](0);
|
150 |
|
151 | console.error(_context.t0);
|
152 | _context.next = 12;
|
153 | return setFieldError('firebase', _context.t0.message);
|
154 |
|
155 | case 12:
|
156 | _context.next = 14;
|
157 | return setSubmitting(false);
|
158 |
|
159 | case 14:
|
160 | case 'end':
|
161 | return _context.stop();
|
162 | }
|
163 | }
|
164 | }, _callee, undefined, [[0, 7]]);
|
165 | }));
|
166 |
|
167 | function handleSubmit(_x, _x2) {
|
168 | return _ref4.apply(this, arguments);
|
169 | }
|
170 |
|
171 | return handleSubmit;
|
172 | }(),
|
173 | displayName: 'RegisterAccountModalForm'
|
174 | })(InnerForm);
|
175 |
|
176 | var RegisterAccountModal = function RegisterAccountModal(_ref5) {
|
177 | var labels = _ref5.labels,
|
178 | handleCreateUserWithEmailAndPassword = _ref5.handleCreateUserWithEmailAndPassword;
|
179 |
|
180 | return _react2.default.createElement(_SinglePageModal2.default, {
|
181 | containerPropsAppend: {
|
182 | className: 'registeraccountmodal__container'
|
183 | },
|
184 | renderTrigger: function renderTrigger(_ref6) {
|
185 | var getTriggerProps = _ref6.getTriggerProps;
|
186 | return _react2.default.createElement(
|
187 | _Button2.default,
|
188 | (0, _extends3.default)({}, getTriggerProps(), {
|
189 | dataTestId: 'signinmodal_registeraccountmodal-trigger',
|
190 | type: 'small'
|
191 | }),
|
192 | labels.trigger
|
193 | );
|
194 | },
|
195 | renderHeader: function renderHeader(_ref7) {
|
196 | var getHeaderProps = _ref7.getHeaderProps;
|
197 | return _react2.default.createElement(
|
198 | 'div',
|
199 | (0, _extends3.default)({}, getHeaderProps()),
|
200 | labels.header
|
201 | );
|
202 | },
|
203 | renderBody: function renderBody(_ref8) {
|
204 | var getBodyProps = _ref8.getBodyProps;
|
205 | return _react2.default.createElement(
|
206 | 'div',
|
207 | getBodyProps(),
|
208 | _react2.default.createElement(EnhancedForm, { labels: labels, handleCreateUserWithEmailAndPassword: handleCreateUserWithEmailAndPassword })
|
209 | );
|
210 | }
|
211 | });
|
212 | };
|
213 |
|
214 | RegisterAccountModal.propTypes = {};
|
215 | RegisterAccountModal.defaultProps = {
|
216 | handleCreateUserWithEmailAndPassword: function handleCreateUserWithEmailAndPassword(email, password) {
|
217 | return console.log('handleCreateUserWithEmailAndPassword', email, password);
|
218 | },
|
219 | labels: {
|
220 | submit: 'submit',
|
221 | header: 'Register a new account',
|
222 | trigger: 'register',
|
223 | email: {
|
224 | title: 'Email',
|
225 | required: 'required',
|
226 | invalid: 'invalid'
|
227 | },
|
228 | password: {
|
229 | title: 'Password',
|
230 | required: 'required',
|
231 | invalid: 'invalid'
|
232 | },
|
233 | passwordConfirmation: {
|
234 | title: 'Confirm password',
|
235 | required: 'required',
|
236 | invalid: 'invalid'
|
237 | }
|
238 | }
|
239 | };
|
240 |
|
241 | var enhance = (0, _recompose.compose)();
|
242 |
|
243 | exports.default = enhance(RegisterAccountModal); |
\ | No newline at end of file |