@stokr/components-library 2.3.41-beta.10 → 2.3.41-beta.12

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -58,6 +58,18 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isCheckingToken = _useState4[0],
     setIsCheckingToken = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSubmitting = _useState6[0],
+    setIsSubmitting = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activationSuccess = _useState8[0],
+    setActivationSuccess = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    passwordResetSuccess = _useState10[0],
+    setPasswordResetSuccess = _useState10[1];
   var location = (0, _reactRouterDom.useLocation)();
   var initialValues = {
     password: '',
@@ -75,6 +87,18 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
   var emailValidationSchema = Yup.object().shape({
     email: Yup.string().required("Oops, this can't be blank").matches(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, 'Please enter a valid email address')
   });
+
+  // Close modal after successful reset
+  (0, _react.useEffect)(function () {
+    if (passwordResetSuccess) {
+      var timer = setTimeout(function () {
+        onModalClose();
+      }, 1500);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [passwordResetSuccess, onModalClose]);
   var checkTokenExpiration = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var search, query, oobCode, result;
@@ -129,28 +153,58 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
     };
   }();
   var handleResendActivationMail = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values) {
-      var response;
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(values, formikActions) {
+      var response, urlObj, params, newOobCode, currentUrl;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             _context2.prev = 0;
-            _context2.next = 3;
+            setIsSubmitting(true);
+            _context2.next = 4;
             return _Auth.default.resendActivationEmail(values.email);
-          case 3:
+          case 4:
             response = _context2.sent;
+            // new oobCode is in response URL
+            if (response) {
+              urlObj = new URL(response);
+              params = new URLSearchParams(urlObj.search);
+              newOobCode = params.get('oobCode');
+              if (newOobCode) {
+                // update the URL with the new oobCode without reloading the page
+                currentUrl = new URL(window.location.href);
+                currentUrl.searchParams.set('oobCode', newOobCode);
+                window.history.replaceState({}, '', currentUrl.toString());
+
+                // reset states to show the password reset form
+                setIsTokenExpired(false);
+                setActivationSuccess(true);
+
+                // small delay for UI sakes
+                setTimeout(function () {
+                  setIsSubmitting(false);
+                }, 1000);
+              } else {
+                console.error('New oobCode not found in response');
+                setIsSubmitting(false);
+              }
+            } else {
+              console.error('Unexpected response format', response);
+              setIsSubmitting(false);
+            }
             return _context2.abrupt("return", response);
-          case 7:
-            _context2.prev = 7;
+          case 9:
+            _context2.prev = 9;
             _context2.t0 = _context2["catch"](0);
             console.error('There was an error while resending the activation email.', _context2.t0);
-          case 10:
+            setIsSubmitting(false);
+            formikActions.setSubmitting(false);
+          case 14:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 7]]);
+      }, _callee2, null, [[0, 9]]);
     }));
-    return function handleResendActivationMail(_x) {
+    return function handleResendActivationMail(_x, _x2) {
       return _ref3.apply(this, arguments);
     };
   }();
@@ -175,8 +229,8 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
         email: ''
       },
       validationSchema: emailValidationSchema,
-      onSubmit: function onSubmit(values) {
-        handleResendActivationMail(values);
+      onSubmit: function onSubmit(values, formikActions) {
+        handleResendActivationMail(values, formikActions);
       }
     }, function (_ref4) {
       var values = _ref4.values,
@@ -184,7 +238,8 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
         touched = _ref4.touched,
         handleBlur = _ref4.handleBlur,
         setFieldValue = _ref4.setFieldValue,
-        setFieldTouched = _ref4.setFieldTouched;
+        setFieldTouched = _ref4.setFieldTouched,
+        isSubmitting = _ref4.isSubmitting;
       var onChangeWithTouch = function onChangeWithTouch(e) {
         var field = e.target;
         setFieldValue(field.name, field.value, false);
@@ -210,8 +265,9 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
         noPaddingHorizontal: true
       }, /*#__PURE__*/_react.default.createElement(_Button.default, {
         type: "submit",
-        fluid: true
-      }, isActionLoading === 'resetPassword' ? 'Sending' : 'Resend link')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        fluid: true,
+        disabled: isSubmitting || isActionLoading === 'resetPassword'
+      }, isSubmitting || isActionLoading === 'resetPassword' ? 'Sending' : 'Resend link')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
         paddingVeticalHalf: true,
         noPaddingHorizontal: true
       }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
@@ -227,14 +283,33 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
       part: 16
     }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Verifying your reset link..."))))));
   };
+  var renderSuccessNotification = function renderSuccessNotification() {
+    return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+      isOpen: true,
+      onClose: onModalClose
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+      part: 16
+    }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "NEW LINK GENERATED"), /*#__PURE__*/_react.default.createElement("p", null, "Your new activation link has been processed successfully. You can now reset your password."))))));
+  };
   (0, _react.useEffect)(function () {
     console.log('Component mounted, checking token');
     checkTokenExpiration();
   }, []);
+
+  // show the success message briefly then reset to show the password form
+  (0, _react.useEffect)(function () {
+    if (activationSuccess) {
+      setTimeout(function () {
+        setActivationSuccess(false);
+      }, 2000); // Show success message for 2 seconds
+    }
+  }, [activationSuccess]);
   console.log('Render state:', {
     isTokenExpired: isTokenExpired,
     isCheckingToken: isCheckingToken,
-    isModalOpen: isModalOpen
+    isModalOpen: isModalOpen,
+    activationSuccess: activationSuccess,
+    passwordResetSuccess: passwordResetSuccess
   });
   if (!isModalOpen) {
     return null;
@@ -242,6 +317,9 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
   if (isCheckingToken) {
     return renderLoadingContent();
   }
+  if (activationSuccess) {
+    return renderSuccessNotification();
+  }
   if (isTokenExpired) {
     return renderExpiredTokenContent();
   }
@@ -260,16 +338,30 @@ var ResetPasswordModal = function ResetPasswordModal(_ref) {
     onClick: onModalSwitch
   }, "Log in")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
     part: 8
-  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, passwordResetSuccess ? /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "SUCCESS!"), /*#__PURE__*/_react.default.createElement("p", null, "Your password has been reset successfully."), /*#__PURE__*/_react.default.createElement("p", null, "Redirecting to login...")) : /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: initialValues,
     validationSchema: validationSchema,
     onSubmit: function onSubmit(values) {
       var search = location.search;
       var query = new URLSearchParams(search);
       var oobCode = query.get('oobCode');
-      onFormSend(_objectSpread(_objectSpread({}, values), {}, {
+      var promise = onFormSend(_objectSpread(_objectSpread({}, values), {}, {
         oobCode: oobCode
       }));
+
+      // If onFormSend returns a promise, handle it
+      if (promise && typeof promise.then === 'function') {
+        promise.then(function (response) {
+          // Assuming response.success or some equivalent would indicate success
+          // Adjust according to your actual API response
+          setPasswordResetSuccess(true);
+        }).catch(function (err) {
+          console.error('Error during password reset:', err);
+        });
+      } else {
+        // If onFormSend doesn't return a promise, assume it was successful
+        setPasswordResetSuccess(true);
+      }
     }
   }, function (_ref5) {
     var values = _ref5.values,

package/package.json

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