@stokr/components-library 2.3.41-beta.23 → 2.3.41-beta.25

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -97,15 +97,9 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         var values = _ref.values,
           errors = _ref.errors,
           touched = _ref.touched,
-          handleBlur = _ref.handleBlur,
-          setFieldValue = _ref.setFieldValue,
-          setFieldTouched = _ref.setFieldTouched;
-        var onChangeWithTouch = function onChangeWithTouch(e) {
-          var field = e.target;
-          setFieldValue(field.name, field.value, false);
-          setFieldTouched(field.name);
-        };
-        var submitDisabled = !touched.email || !!errors.email || isActionLoading === 'forgot';
+          handleChange = _ref.handleChange,
+          handleBlur = _ref.handleBlur;
+        var submitDisabled = !values.email || !!errors.email || isActionLoading === 'forgot';
         return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
           noPadding: true
         }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -114,10 +108,12 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
           type: "email",
           label: "Your email",
           value: values.email,
-          onChange: onChangeWithTouch,
-          onBlur: handleBlur,
           error: !!errors.email,
-          touched: !!touched.email
+          touched: !!touched.email,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          validateOnChange: true,
+          validateOnBlur: true
         }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
           show: errors.email && touched.email
         }, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
@@ -133,14 +129,7 @@ var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
           show: popupError.popup === 'forgot'
         }, popupError.message)));
-      }) :
-      /*#__PURE__*/
-      // <ComponentWrapper paddingVeticalHalf noPaddingHorizontal>
-      //   <FormError show={popupSuccess.popup === 'forgot'}>
-      //     {popupSuccess.message}
-      //   </FormError>
-      // </ComponentWrapper>
-      _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))))));
+      }) : /*#__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))))));
     }
   }]);
   return ForgotPasswordModal;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js

@@ -31,6 +31,29 @@ var _default = {
       type: 'function',
       action: 'onModalSwitch',
       required: true
+    },
+    isActionLoading: {
+      control: {
+        type: 'select',
+        options: [false, 'forgot']
+      },
+      description: 'Loading state for the form submission'
+    },
+    background: {
+      control: 'text',
+      description: 'Background style for the modal'
+    },
+    isResettingExpiredToken: {
+      control: 'boolean',
+      description: 'Changes modal content for expired token reset'
+    },
+    popupError: {
+      control: 'object',
+      description: 'Error object to display form errors'
+    },
+    popupSuccess: {
+      control: 'object',
+      description: 'Success object to display success messages'
     }
   }
 };
@@ -41,6 +64,10 @@ var Template = function Template(args) {
 var ForgotPasswordModalOverview = Template.bind({});
 exports.ForgotPasswordModalOverview = ForgotPasswordModalOverview;
 ForgotPasswordModalOverview.args = {
+  isModalOpen: true,
   popupError: {},
-  popupSuccess: {}
+  popupSuccess: {},
+  isActionLoading: false,
+  background: '',
+  isResettingExpiredToken: false
 };

package/dist/components/Input/Input.js

@@ -51,20 +51,29 @@ var Input = function Input(props) {
   (0, _react.useEffect)(function () {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
-  var onFocus = function onFocus(e, field) {
-    var onFocus = props.onFocus;
-    onFocus && onFocus(e, field);
-    checkLabel(true);
-  };
   var onBlur = function onBlur(e, field) {
     var onBlur = props.onBlur;
+
+    // formik handler MUST be called before our logic !
     onBlur && onBlur(e, field);
+
+    // our logic follows
     checkLabel(false);
   };
+  var onFocus = function onFocus(e, field) {
+    var onFocus = props.onFocus;
+
+    // formik handler MUST be called before our logic !
+    onFocus && onFocus(e, field);
+
+    // our logic follows
+    checkLabel(true);
+  };
   var onChange = function onChange(e, field) {
     var onChange = props.onChange;
-    onChange && onChange(e, field);
+    onChange && onChange(e, field); // formik handler
   };
+
   var checkLabel = function checkLabel(focus) {
     setHasFocus(focus);
     setLabelUp(focus || !!value);

package/dist/components/LoginModal/LoginModal.js

@@ -10,7 +10,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _formik = require("formik");
 var Yup = _interopRequireWildcard(require("yup"));
-var _formikPersist = require("formik-persist");
 var _Modal = require("../Modal/Modal");
 var _Form = _interopRequireWildcard(require("../Form/Form"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
@@ -34,20 +33,20 @@ var LoginModal = function LoginModal(props) {
   var _React$useState = _react.default.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     email = _React$useState2[0],
-    setemail = _React$useState2[1];
+    setEmail = _React$useState2[1];
   var location = (0, _reactRouterDom.useLocation)();
-  var emailSetRef = _react.default.useRef(false);
   _react.default.useEffect(function () {
     //the URL will look like this: /login?email=some.email@email.com
     var search = location.search;
     var query = new URLSearchParams(search);
     var email = query.get('email');
     if (email) {
-      setemail(email);
+      setEmail(email);
     }
   }, []);
   var validationSchema = Yup.object().shape({
-    email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required('Oops, this can‘t be blank')
+    email: Yup.string().matches(_globalVariables.emailRegex, "Oops, that's not a valid address").required("Oops, this can't be blank"),
+    password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required')
   });
   var popupError = props.popupError,
     isModalOpen = props.isModalOpen,
@@ -77,9 +76,9 @@ var LoginModal = function LoginModal(props) {
     initialValues: {
       email: email || '',
       password: ''
-    }
-    // initialTouched={{ email: false, password: false }}
-    ,
+    },
+    validateOnChange: true,
+    validateOnBlur: true,
     validationSchema: validationSchema,
     onSubmit: function onSubmit(values) {
       onFormSend(values);
@@ -89,26 +88,8 @@ var LoginModal = function LoginModal(props) {
       errors = _ref.errors,
       touched = _ref.touched,
       handleChange = _ref.handleChange,
-      handleBlur = _ref.handleBlur,
-      setFieldValue = _ref.setFieldValue,
-      setFieldTouched = _ref.setFieldTouched,
-      setErrors = _ref.setErrors;
-    var onChangeWithTouch = function onChangeWithTouch(e) {
-      var field = e.target;
-      setFieldValue(field.name, field.value, false);
-      setFieldTouched(field.name);
-    };
-    if (email && values.email !== email && !emailSetRef.current) {
-      setFieldValue('email', email);
-      emailSetRef.current = true;
-    }
-
-    //hack to avoid error when autofill from browser
-    if (values.password && errors.password && values.email && !errors.email) {
-      setErrors({});
-      setFieldValue('password', values.password, false);
-    }
-    var submitDisabled = !touched.email || !touched.password || !!errors.email || !!errors.password || isActionLoading === 'login';
+      handleBlur = _ref.handleBlur;
+    var submitDisabled = !values.email || !values.password || !!errors.email || !!errors.password || isActionLoading === 'login';
     return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPadding: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -117,7 +98,7 @@ var LoginModal = function LoginModal(props) {
       type: "email",
       label: "Your email",
       value: values.email,
-      onChange: onChangeWithTouch,
+      onChange: handleChange,
       onBlur: handleBlur,
       error: !!errors.email,
       touched: !!touched.email
@@ -132,7 +113,7 @@ var LoginModal = function LoginModal(props) {
       type: "password",
       label: "Password",
       value: values.password,
-      onChange: onChangeWithTouch,
+      onChange: handleChange,
       onBlur: handleBlur,
       error: !!errors.password,
       touched: !!touched.password

package/dist/components/LoginModal/LoginModal.stories.js

@@ -13,37 +13,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = {
   title: 'Components Library/LoginModal',
   component: _LoginModal.default,
+  parameters: {
+    layout: 'fullscreen'
+  },
   argTypes: {
     popupError: {
-      type: 'object',
-      defaultValue: {
-        message: null,
-        popup: null
-      },
-      required: true
+      control: 'object'
     },
     isActionLoading: {
-      type: 'boolean',
-      defaultValue: false
+      control: {
+        type: 'select'
+      },
+      options: [false, 'login']
     },
     isModalOpen: {
-      type: 'boolean',
-      defaultValue: true
+      control: 'boolean'
+    },
+    background: {
+      control: 'text'
     },
     onFormSend: {
-      type: 'function',
       action: 'onFormSend'
     },
     onModalSwitch: {
-      type: 'function',
       action: 'onModalSwitch'
     },
     onForgotPassword: {
-      type: 'function',
       action: 'onForgotPassword'
     },
     onModalClose: {
-      type: 'function',
       action: 'onModalClose'
     }
   }
@@ -55,6 +53,7 @@ var Template = function Template(args) {
 var LoginModalOpen = Template.bind({});
 exports.LoginModalOpen = LoginModalOpen;
 LoginModalOpen.args = {
+  isModalOpen: true,
   popupError: {
     message: null,
     popup: null
@@ -74,5 +73,6 @@ LoginModalOpen.args = {
   },
   onForgotPassword: function onForgotPassword(data) {
     console.log('forgot password');
-  }
+  },
+  isActionLoading: false
 };

package/dist/components/RegisterModal/RegisterModal.js

@@ -211,7 +211,7 @@ var RegisterModal = function RegisterModal(props) {
         handleChange(e);
       }
     };
-    var submitDisabled = !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
+    var submitDisabled = !values.email || !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === 'signUp' || popupError.popup === 'register';
     return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPadding: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -243,16 +243,9 @@ var RegisterModal = function RegisterModal(props) {
       error: !!errors.password,
       touched: !!touched.password,
       info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters."
-      // showStrength
     }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: errors.password && touched.password
-    }, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError
-    // show={
-    //   !errors.password &&
-    //   touched.password &&
-    //   passwordStrengthMeter(values.password) !== 5
-    // }
-    , {
+    }, errors.password), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: !errors.password && touched.password && values.password.length <= 5
     }, "The password must be at least 6 characters long"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPaddingBottom: true,

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -100,6 +100,8 @@ var RenderErrorModal = function RenderErrorModal(props) {
       email: userEmail || ''
     },
     validationSchema: validationSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
     onSubmit: function onSubmit(values) {
       startCooldown();
       onResend(values);
@@ -109,14 +111,8 @@ var RenderErrorModal = function RenderErrorModal(props) {
       errors = _ref2.errors,
       touched = _ref2.touched,
       handleBlur = _ref2.handleBlur,
-      setFieldValue = _ref2.setFieldValue,
-      setFieldTouched = _ref2.setFieldTouched;
-    var onChangeWithTouch = function onChangeWithTouch(e) {
-      var field = e.target;
-      setFieldValue(field.name, field.value, false);
-      setFieldTouched(field.name);
-    };
-    var submitDisabled = !touched.email || !!errors.email || isDisabled || isActionLoading === 'resend';
+      handleChange = _ref2.handleChange;
+    var submitDisabled = !values.email || !!errors.email || isDisabled || isActionLoading === 'resend';
     return /*#__PURE__*/_react.default.createElement(_Form2.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPadding: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
@@ -125,7 +121,7 @@ var RenderErrorModal = function RenderErrorModal(props) {
       type: "email",
       label: "Your email",
       value: values.email,
-      onChange: onChangeWithTouch,
+      onChange: handleChange,
       onBlur: handleBlur,
       error: !!errors.email,
       touched: !!touched.email
@@ -135,9 +131,7 @@ var RenderErrorModal = function RenderErrorModal(props) {
       noPaddingBottom: true,
       noPaddingHorizontal: true
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      type: "submit"
-      //fluid
-      ,
+      type: "submit",
       disabled: submitDisabled
     }, isActionLoading === 'resend' ? 'Resending email' : 'Resend email')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       paddingVeticalHalf: true,

package/dist/components/headerHo/HeaderHo.js

@@ -646,6 +646,12 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
           _this2.clearPopupError();
           _this2.clearPopupSuccess();
           _this2.setIsActionLoading(undefined);
+
+          // if we are in the expired token reset flow, we
+          // also need to close the reset password modal
+          if (isResettingExpiredToken) {
+            _this2.setOpenModalStatus('resetPassword', false);
+          }
         },
         onModalSwitch: function onModalSwitch() {
           _this2.switchOpenModal('forgot', 'login');
@@ -699,6 +705,11 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
         popupError: this.state.popupError,
         isModalOpen: isModalOpen.resetPassword,
         onModalClose: function onModalClose() {
+          // clean up URL params
+          var url = new URL(window.location);
+          url.searchParams.delete('oobCode');
+          url.searchParams.delete('mode');
+          window.history.replaceState({}, '', url.toString());
           _this2.setOpenModalStatus('resetPassword', false);
           _this2.clearPopupError();
           _this2.setIsActionLoading(undefined);
@@ -743,7 +754,7 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
           };
         }(),
         onLoad: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
-          var location, query, oobCode;
+          var location, query, oobCode, url;
           return _regeneratorRuntime().wrap(function _callee7$(_context7) {
             while (1) switch (_context7.prev = _context7.next) {
               case 0:
@@ -773,11 +784,17 @@ var HeaderHoClass = /*#__PURE__*/function (_Component) {
                     });
                   });
 
+                  // before switching to Forgot Password modal, we need to clean up
+                  // the URL parameters that keep the reset password modal open.
+                  url = new URL(window.location);
+                  url.searchParams.delete('oobCode');
+                  url.searchParams.delete('mode');
+                  window.history.replaceState({}, '', url.toString());
+
                   // we use a special version of Forgot Password modal
                   // adjusted to handle and resend expired tokens.
                   // isResettingExpiredToken makes it adjust.
                   _this2.switchOpenModal('resetPassword', 'forgot');
-                  _this2.setPopupError('forgot', 'This password reset link has expired or is invalid. Please request a new one.');
                 } else {
                   _this2.setPopupError('resetPassword', 'Something went wrong with the password reset link. Please try again.');
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.41-beta.23",
+  "version": "2.3.41-beta.25",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",