@stokr/components-library 2.3.41-beta.7 → 2.3.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Chips/Chip.js +1 -1
- package/dist/components/Footer/FooterMenu.styles.js +2 -2
- package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js +22 -24
- package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js +28 -1
- package/dist/components/Header/Header.styles.js +1 -1
- package/dist/components/Input/Input.js +15 -6
- package/dist/components/LoginModal/LoginModal.js +12 -31
- package/dist/components/LoginModal/LoginModal.stories.js +15 -15
- package/dist/components/RegisterModal/RegisterModal.js +5 -13
- package/dist/components/ResendConfirmationCodeModal/ResendConfirmationCodeModal.js +223 -0
- package/dist/components/ResendConfirmationCodeModal/ResendConfirmationCodeModal.stories.js +48 -0
- package/dist/components/ResetPasswordModal/ResetPasswordModal.js +34 -248
- package/dist/components/VerifyEmailModal/VerifyEmailModal.js +8 -13
- package/dist/components/headerHo/HeaderHo.js +105 -31
- package/dist/constants/globalVariables.js +6 -2
- package/dist/context/Auth.js +1 -1
- package/dist/context/AuthContext.js +113 -154
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ var Chip = function Chip(_ref) {
|
|
|
24
24
|
isActive: isActive
|
|
25
25
|
}, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
|
|
26
26
|
title: tooltip,
|
|
27
|
-
position: "
|
|
27
|
+
position: "top",
|
|
28
28
|
noIcon: true,
|
|
29
29
|
noMarginLeft: true,
|
|
30
30
|
noMarginRight: true
|
|
@@ -36,7 +36,7 @@ exports.Title = Title;
|
|
|
36
36
|
var Items = _styledComponents.default.ul.withConfig({
|
|
37
37
|
displayName: "FooterMenustyles__Items",
|
|
38
38
|
componentId: "sc-40ddqf-4"
|
|
39
|
-
})(["display:
|
|
39
|
+
})(["display:flex;list-style:none;padding:0 24px;padding-bottom:24px;@media screen and (min-width:768px){justify-content:flex-start;}@media screen and (min-width:992px){display:block;padding:0;margin-top:22px;margin:0 -8px;width:224px;", "}@media screen and (max-width:992px){padding-top:15px;padding-left:0;padding-bottom:0;}"], function (props) {
|
|
40
40
|
return props.social && "\n margin-top: 14px;\n ";
|
|
41
41
|
});
|
|
42
42
|
exports.Items = Items;
|
|
@@ -55,7 +55,7 @@ exports.Link = Link;
|
|
|
55
55
|
var SocialLink = _styledComponents.default.a.withConfig({
|
|
56
56
|
displayName: "FooterMenustyles__SocialLink",
|
|
57
57
|
componentId: "sc-40ddqf-7"
|
|
58
|
-
})(["position:relative;display:inline-block;width:40px;height:40px;border-radius:20px;transition:background-color 0.2s;& > svg,img{height:40px;width:40px;}&:focus,&:hover{opacity:0.8;}"]);
|
|
58
|
+
})(["position:relative;display:inline-block;width:40px;height:40px;border-radius:20px;transition:background-color 0.2s;& > svg,img{height:40px;width:40px;}&:focus,&:hover{opacity:0.8;}@media (max-width:1024px){flex-shrink:0;}"]);
|
|
59
59
|
exports.SocialLink = SocialLink;
|
|
60
60
|
var HiringTotalNumber = _styledComponents.default.span.withConfig({
|
|
61
61
|
displayName: "FooterMenustyles__HiringTotalNumber",
|
|
@@ -15,6 +15,7 @@ var _Input = _interopRequireDefault(require("../Input/Input"));
|
|
|
15
15
|
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
|
|
16
16
|
var _Grid = require("../Grid/Grid.styles");
|
|
17
17
|
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
|
|
18
|
+
var _globalVariables = require("../../constants/globalVariables");
|
|
18
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
20
21
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -46,7 +47,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
46
47
|
email: ''
|
|
47
48
|
});
|
|
48
49
|
_defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
|
|
49
|
-
email: Yup.string().
|
|
50
|
+
email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank')
|
|
50
51
|
}));
|
|
51
52
|
return _this;
|
|
52
53
|
}
|
|
@@ -61,7 +62,15 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
61
62
|
popupError = _this$props.popupError,
|
|
62
63
|
popupSuccess = _this$props.popupSuccess,
|
|
63
64
|
isActionLoading = _this$props.isActionLoading,
|
|
64
|
-
background = _this$props.background
|
|
65
|
+
background = _this$props.background,
|
|
66
|
+
isResettingExpiredToken = _this$props.isResettingExpiredToken;
|
|
67
|
+
|
|
68
|
+
// since the logic for handling expired tokens requires a modal which happens to be exactly
|
|
69
|
+
// the same as the Forgot Password modal (except for the content of 3 text elements),
|
|
70
|
+
// instead of creating a new dedicated modal, we just handle the text diffs here.
|
|
71
|
+
var headerTextContent = isResettingExpiredToken ? 'This Invite Link Has Expired' : 'Reset Your password';
|
|
72
|
+
var mainTextContent = isResettingExpiredToken ? 'To continue, request a new one using your email, and access will be sent shortly.' : 'No hints. No nudges. Just a nice, easy reset link direct to your inbox.';
|
|
73
|
+
var footerTextContent = isResettingExpiredToken ? 'Already have an account? ' : 'Remember your password? ';
|
|
65
74
|
return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
|
|
66
75
|
isOpen: isModalOpen,
|
|
67
76
|
onClose: onModalClose,
|
|
@@ -70,9 +79,9 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
70
79
|
part: 8
|
|
71
80
|
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
|
|
72
81
|
modalTop: true
|
|
73
|
-
}, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null,
|
|
82
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, headerTextContent), /*#__PURE__*/_react.default.createElement("p", null, mainTextContent))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
|
|
74
83
|
modalBot: true
|
|
75
|
-
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null,
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, footerTextContent, /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
|
|
76
85
|
to: "#",
|
|
77
86
|
as: "button",
|
|
78
87
|
onClick: onModalSwitch
|
|
@@ -88,15 +97,9 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
88
97
|
var values = _ref.values,
|
|
89
98
|
errors = _ref.errors,
|
|
90
99
|
touched = _ref.touched,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
var onChangeWithTouch = function onChangeWithTouch(e) {
|
|
95
|
-
var field = e.target;
|
|
96
|
-
setFieldValue(field.name, field.value, false);
|
|
97
|
-
setFieldTouched(field.name);
|
|
98
|
-
};
|
|
99
|
-
var submitDisabled = !touched.email || !!errors.email || isActionLoading === 'forgot';
|
|
100
|
+
handleChange = _ref.handleChange,
|
|
101
|
+
handleBlur = _ref.handleBlur;
|
|
102
|
+
var submitDisabled = !values.email || !!errors.email || isActionLoading === 'forgot';
|
|
100
103
|
return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
|
|
101
104
|
noPadding: true
|
|
102
105
|
}, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
@@ -105,10 +108,12 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
105
108
|
type: "email",
|
|
106
109
|
label: "Your email",
|
|
107
110
|
value: values.email,
|
|
108
|
-
onChange: onChangeWithTouch,
|
|
109
|
-
onBlur: handleBlur,
|
|
110
111
|
error: !!errors.email,
|
|
111
|
-
touched: !!touched.email
|
|
112
|
+
touched: !!touched.email,
|
|
113
|
+
onChange: handleChange,
|
|
114
|
+
onBlur: handleBlur,
|
|
115
|
+
validateOnChange: true,
|
|
116
|
+
validateOnBlur: true
|
|
112
117
|
}), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
|
|
113
118
|
show: errors.email && touched.email
|
|
114
119
|
}, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
|
|
@@ -124,14 +129,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
|
|
|
124
129
|
}, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
|
|
125
130
|
show: popupError.popup === 'forgot'
|
|
126
131
|
}, popupError.message)));
|
|
127
|
-
}) :
|
|
128
|
-
/*#__PURE__*/
|
|
129
|
-
// <ComponentWrapper paddingVeticalHalf noPaddingHorizontal>
|
|
130
|
-
// <FormError show={popupSuccess.popup === 'forgot'}>
|
|
131
|
-
// {popupSuccess.message}
|
|
132
|
-
// </FormError>
|
|
133
|
-
// </ComponentWrapper>
|
|
134
|
-
_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, popupSuccess.message))))));
|
|
132
|
+
}) : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, popupSuccess.message))))));
|
|
135
133
|
}
|
|
136
134
|
}]);
|
|
137
135
|
return ForgotPasswordModal;
|
|
@@ -31,6 +31,29 @@ var _default = {
|
|
|
31
31
|
type: 'function',
|
|
32
32
|
action: 'onModalSwitch',
|
|
33
33
|
required: true
|
|
34
|
+
},
|
|
35
|
+
isActionLoading: {
|
|
36
|
+
control: {
|
|
37
|
+
type: 'select',
|
|
38
|
+
options: [false, 'forgot']
|
|
39
|
+
},
|
|
40
|
+
description: 'Loading state for the form submission'
|
|
41
|
+
},
|
|
42
|
+
background: {
|
|
43
|
+
control: 'text',
|
|
44
|
+
description: 'Background style for the modal'
|
|
45
|
+
},
|
|
46
|
+
isResettingExpiredToken: {
|
|
47
|
+
control: 'boolean',
|
|
48
|
+
description: 'Changes modal content for expired token reset'
|
|
49
|
+
},
|
|
50
|
+
popupError: {
|
|
51
|
+
control: 'object',
|
|
52
|
+
description: 'Error object to display form errors'
|
|
53
|
+
},
|
|
54
|
+
popupSuccess: {
|
|
55
|
+
control: 'object',
|
|
56
|
+
description: 'Success object to display success messages'
|
|
34
57
|
}
|
|
35
58
|
}
|
|
36
59
|
};
|
|
@@ -41,6 +64,10 @@ var Template = function Template(args) {
|
|
|
41
64
|
var ForgotPasswordModalOverview = Template.bind({});
|
|
42
65
|
exports.ForgotPasswordModalOverview = ForgotPasswordModalOverview;
|
|
43
66
|
ForgotPasswordModalOverview.args = {
|
|
67
|
+
isModalOpen: true,
|
|
44
68
|
popupError: {},
|
|
45
|
-
popupSuccess: {}
|
|
69
|
+
popupSuccess: {},
|
|
70
|
+
isActionLoading: false,
|
|
71
|
+
background: '',
|
|
72
|
+
isResettingExpiredToken: false
|
|
46
73
|
};
|
|
@@ -190,5 +190,5 @@ exports.SignupButton = SignupButton;
|
|
|
190
190
|
var CTAContainer = _styledComponents.default.div.withConfig({
|
|
191
191
|
displayName: "Headerstyles__CTAContainer",
|
|
192
192
|
componentId: "sc-hifrdy-23"
|
|
193
|
-
})(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;
|
|
193
|
+
})(["align-items:center;border-top:1px solid ", ";display:flex;flex-direction:column;justify-content:center;padding:56px 0;width:100%;span{color:1px solid ", ";font-size:10px;letter-spacing:2.1px;margin-bottom:14px;}div{display:flex;justify-content:center;}", " ", "{display:flex;justify-content:center;background:transparent;margin:12px;svg{fill:rgb(32,32,32);height:18px !important;width:18px !important;}}"], sc.GRAY_BASE_HEX, sc.GRAY_BASE_HEX, _rwd.rwdMax.Medium(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n div{\n width: 192px; /* Fit exactly 3 icons */\n }\n "]))), _FooterMenu.SocialLink);
|
|
194
194
|
exports.CTAContainer = CTAContainer;
|
|
@@ -51,20 +51,29 @@ var Input = function Input(props) {
|
|
|
51
51
|
(0, _react.useEffect)(function () {
|
|
52
52
|
if (value && !labelUp) setLabelUp(true);
|
|
53
53
|
}, [value, labelUp]);
|
|
54
|
-
var onFocus = function onFocus(e, field) {
|
|
55
|
-
var onFocus = props.onFocus;
|
|
56
|
-
onFocus && onFocus(e, field);
|
|
57
|
-
checkLabel(true);
|
|
58
|
-
};
|
|
59
54
|
var onBlur = function onBlur(e, field) {
|
|
60
55
|
var onBlur = props.onBlur;
|
|
56
|
+
|
|
57
|
+
// formik handler MUST be called before our logic !
|
|
61
58
|
onBlur && onBlur(e, field);
|
|
59
|
+
|
|
60
|
+
// our logic follows
|
|
62
61
|
checkLabel(false);
|
|
63
62
|
};
|
|
63
|
+
var onFocus = function onFocus(e, field) {
|
|
64
|
+
var onFocus = props.onFocus;
|
|
65
|
+
|
|
66
|
+
// formik handler MUST be called before our logic !
|
|
67
|
+
onFocus && onFocus(e, field);
|
|
68
|
+
|
|
69
|
+
// our logic follows
|
|
70
|
+
checkLabel(true);
|
|
71
|
+
};
|
|
64
72
|
var onChange = function onChange(e, field) {
|
|
65
73
|
var onChange = props.onChange;
|
|
66
|
-
onChange && onChange(e, field);
|
|
74
|
+
onChange && onChange(e, field); // formik handler
|
|
67
75
|
};
|
|
76
|
+
|
|
68
77
|
var checkLabel = function checkLabel(focus) {
|
|
69
78
|
setHasFocus(focus);
|
|
70
79
|
setLabelUp(focus || !!value);
|
|
@@ -10,7 +10,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
10
10
|
var _reactRouterDom = require("react-router-dom");
|
|
11
11
|
var _formik = require("formik");
|
|
12
12
|
var Yup = _interopRequireWildcard(require("yup"));
|
|
13
|
-
var _formikPersist = require("formik-persist");
|
|
14
13
|
var _Modal = require("../Modal/Modal");
|
|
15
14
|
var _Form = _interopRequireWildcard(require("../Form/Form"));
|
|
16
15
|
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
|
|
@@ -20,6 +19,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
|
|
|
20
19
|
var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.styles"));
|
|
21
20
|
var _Grid = require("../Grid/Grid.styles");
|
|
22
21
|
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
|
|
22
|
+
var _globalVariables = require("../../constants/globalVariables");
|
|
23
23
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
25
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -33,21 +33,20 @@ var LoginModal = function LoginModal(props) {
|
|
|
33
33
|
var _React$useState = _react.default.useState(),
|
|
34
34
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
35
35
|
email = _React$useState2[0],
|
|
36
|
-
|
|
36
|
+
setEmail = _React$useState2[1];
|
|
37
37
|
var location = (0, _reactRouterDom.useLocation)();
|
|
38
|
-
var emailSetRef = _react.default.useRef(false);
|
|
39
38
|
_react.default.useEffect(function () {
|
|
40
39
|
//the URL will look like this: /login?email=some.email@email.com
|
|
41
40
|
var search = location.search;
|
|
42
41
|
var query = new URLSearchParams(search);
|
|
43
42
|
var email = query.get('email');
|
|
44
43
|
if (email) {
|
|
45
|
-
|
|
44
|
+
setEmail(email);
|
|
46
45
|
}
|
|
47
46
|
}, []);
|
|
48
47
|
var validationSchema = Yup.object().shape({
|
|
49
|
-
email: Yup.string().
|
|
50
|
-
password: Yup.string().
|
|
48
|
+
email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required("Oops, this can't be blank"),
|
|
49
|
+
password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required')
|
|
51
50
|
});
|
|
52
51
|
var popupError = props.popupError,
|
|
53
52
|
isModalOpen = props.isModalOpen,
|
|
@@ -77,9 +76,9 @@ var LoginModal = function LoginModal(props) {
|
|
|
77
76
|
initialValues: {
|
|
78
77
|
email: email || '',
|
|
79
78
|
password: ''
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
,
|
|
79
|
+
},
|
|
80
|
+
validateOnChange: true,
|
|
81
|
+
validateOnBlur: true,
|
|
83
82
|
validationSchema: validationSchema,
|
|
84
83
|
onSubmit: function onSubmit(values) {
|
|
85
84
|
onFormSend(values);
|
|
@@ -89,26 +88,8 @@ var LoginModal = function LoginModal(props) {
|
|
|
89
88
|
errors = _ref.errors,
|
|
90
89
|
touched = _ref.touched,
|
|
91
90
|
handleChange = _ref.handleChange,
|
|
92
|
-
handleBlur = _ref.handleBlur
|
|
93
|
-
|
|
94
|
-
setFieldTouched = _ref.setFieldTouched,
|
|
95
|
-
setErrors = _ref.setErrors;
|
|
96
|
-
var onChangeWithTouch = function onChangeWithTouch(e) {
|
|
97
|
-
var field = e.target;
|
|
98
|
-
setFieldValue(field.name, field.value, false);
|
|
99
|
-
setFieldTouched(field.name);
|
|
100
|
-
};
|
|
101
|
-
if (email && values.email !== email && !emailSetRef.current) {
|
|
102
|
-
setFieldValue('email', email);
|
|
103
|
-
emailSetRef.current = true;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
//hack to avoid error when autofill from browser
|
|
107
|
-
if (values.password && errors.password && values.email && !errors.email) {
|
|
108
|
-
setErrors({});
|
|
109
|
-
setFieldValue('password', values.password, false);
|
|
110
|
-
}
|
|
111
|
-
var submitDisabled = !touched.email || !touched.password || !!errors.email || !!errors.password || isActionLoading === 'login';
|
|
91
|
+
handleBlur = _ref.handleBlur;
|
|
92
|
+
var submitDisabled = !values.email || !values.password || !!errors.email || !!errors.password || isActionLoading === 'login';
|
|
112
93
|
return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
|
|
113
94
|
noPadding: true
|
|
114
95
|
}, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
@@ -117,7 +98,7 @@ var LoginModal = function LoginModal(props) {
|
|
|
117
98
|
type: "email",
|
|
118
99
|
label: "Your email",
|
|
119
100
|
value: values.email,
|
|
120
|
-
onChange:
|
|
101
|
+
onChange: handleChange,
|
|
121
102
|
onBlur: handleBlur,
|
|
122
103
|
error: !!errors.email,
|
|
123
104
|
touched: !!touched.email
|
|
@@ -132,7 +113,7 @@ var LoginModal = function LoginModal(props) {
|
|
|
132
113
|
type: "password",
|
|
133
114
|
label: "Password",
|
|
134
115
|
value: values.password,
|
|
135
|
-
onChange:
|
|
116
|
+
onChange: handleChange,
|
|
136
117
|
onBlur: handleBlur,
|
|
137
118
|
error: !!errors.password,
|
|
138
119
|
touched: !!touched.password
|
|
@@ -13,37 +13,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
var _default = {
|
|
14
14
|
title: 'Components Library/LoginModal',
|
|
15
15
|
component: _LoginModal.default,
|
|
16
|
+
parameters: {
|
|
17
|
+
layout: 'fullscreen'
|
|
18
|
+
},
|
|
16
19
|
argTypes: {
|
|
17
20
|
popupError: {
|
|
18
|
-
|
|
19
|
-
defaultValue: {
|
|
20
|
-
message: null,
|
|
21
|
-
popup: null
|
|
22
|
-
},
|
|
23
|
-
required: true
|
|
21
|
+
control: 'object'
|
|
24
22
|
},
|
|
25
23
|
isActionLoading: {
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
control: {
|
|
25
|
+
type: 'select'
|
|
26
|
+
},
|
|
27
|
+
options: [false, 'login']
|
|
28
28
|
},
|
|
29
29
|
isModalOpen: {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
control: 'boolean'
|
|
31
|
+
},
|
|
32
|
+
background: {
|
|
33
|
+
control: 'text'
|
|
32
34
|
},
|
|
33
35
|
onFormSend: {
|
|
34
|
-
type: 'function',
|
|
35
36
|
action: 'onFormSend'
|
|
36
37
|
},
|
|
37
38
|
onModalSwitch: {
|
|
38
|
-
type: 'function',
|
|
39
39
|
action: 'onModalSwitch'
|
|
40
40
|
},
|
|
41
41
|
onForgotPassword: {
|
|
42
|
-
type: 'function',
|
|
43
42
|
action: 'onForgotPassword'
|
|
44
43
|
},
|
|
45
44
|
onModalClose: {
|
|
46
|
-
type: 'function',
|
|
47
45
|
action: 'onModalClose'
|
|
48
46
|
}
|
|
49
47
|
}
|
|
@@ -55,6 +53,7 @@ var Template = function Template(args) {
|
|
|
55
53
|
var LoginModalOpen = Template.bind({});
|
|
56
54
|
exports.LoginModalOpen = LoginModalOpen;
|
|
57
55
|
LoginModalOpen.args = {
|
|
56
|
+
isModalOpen: true,
|
|
58
57
|
popupError: {
|
|
59
58
|
message: null,
|
|
60
59
|
popup: null
|
|
@@ -74,5 +73,6 @@ LoginModalOpen.args = {
|
|
|
74
73
|
},
|
|
75
74
|
onForgotPassword: function onForgotPassword(data) {
|
|
76
75
|
console.log('forgot password');
|
|
77
|
-
}
|
|
76
|
+
},
|
|
77
|
+
isActionLoading: false
|
|
78
78
|
};
|
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.default = exports.RegisterModal = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _reactRouterDom = require("react-router-dom");
|
|
@@ -24,6 +24,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
|
|
|
24
24
|
var _Grid = require("../Grid/Grid.styles");
|
|
25
25
|
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
|
|
26
26
|
var _fetchDataPublic = _interopRequireDefault(require("../../api/fetchDataPublic"));
|
|
27
|
+
var _globalVariables = require("../../constants/globalVariables");
|
|
27
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
28
29
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -45,8 +46,6 @@ var TermsStyled = _styledComponents.styled.span.withConfig({
|
|
|
45
46
|
displayName: "RegisterModal__TermsStyled",
|
|
46
47
|
componentId: "sc-18f337m-0"
|
|
47
48
|
})(["cursor:pointer;font-size:12px;text-decoration:underline;&:hover{opacity:0.7;}"]);
|
|
48
|
-
var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
|
|
49
|
-
exports.emailRegex = emailRegex;
|
|
50
49
|
var RegisterModal = function RegisterModal(props) {
|
|
51
50
|
var _useState = (0, _react.useState)(null),
|
|
52
51
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -133,7 +132,7 @@ var RegisterModal = function RegisterModal(props) {
|
|
|
133
132
|
};
|
|
134
133
|
}();
|
|
135
134
|
var validationSchema = Yup.object().shape({
|
|
136
|
-
email: Yup.string().
|
|
135
|
+
email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank'),
|
|
137
136
|
password: Yup.string().required('Oops, this can‘t be blank'),
|
|
138
137
|
terms: Yup.bool().oneOf([true], 'Please agree to continue'),
|
|
139
138
|
newsletter: Yup.bool() // .oneOf([true], 'Newsletter accept is required'),
|
|
@@ -212,7 +211,7 @@ var RegisterModal = function RegisterModal(props) {
|
|
|
212
211
|
handleChange(e);
|
|
213
212
|
}
|
|
214
213
|
};
|
|
215
|
-
var submitDisabled = !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
|
|
214
|
+
var submitDisabled = !values.email || !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
|
|
216
215
|
return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
|
|
217
216
|
noPadding: true
|
|
218
217
|
}, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
@@ -244,16 +243,9 @@ var RegisterModal = function RegisterModal(props) {
|
|
|
244
243
|
error: !!errors.password,
|
|
245
244
|
touched: !!touched.password,
|
|
246
245
|
info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters."
|
|
247
|
-
// showStrength
|
|
248
246
|
}), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
|
|
249
247
|
show: errors.password && touched.password
|
|
250
|
-
}, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError
|
|
251
|
-
// show={
|
|
252
|
-
// !errors.password &&
|
|
253
|
-
// touched.password &&
|
|
254
|
-
// passwordStrengthMeter(values.password) !== 5
|
|
255
|
-
// }
|
|
256
|
-
, {
|
|
248
|
+
}, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
|
|
257
249
|
show: !errors.password && touched.password && values.password.length <= 5
|
|
258
250
|
}, "The password must be at least 6 characters long"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
|
|
259
251
|
noPaddingBottom: true,
|