homeflowjs 1.0.27 → 1.0.29

package/hooks/use-recaptcha.js

@@ -42,11 +42,13 @@ const useRecaptcha = ({
   };
 
   const onResetRecaptcha = useCallback(() => {
-    window.grecaptcha.reset(stateWidget);
-    const currentRecaptchaContainer = document.getElementById(RECAPTCHA_CONTAINER_ID);
+    if (stateWidget !== null) {
+      window.grecaptcha.reset(stateWidget);
+      const currentRecaptchaContainer = document.getElementById(RECAPTCHA_CONTAINER_ID);
 
-    if (currentRecaptchaContainer) {
-      currentRecaptchaContainer.remove();
+      if (currentRecaptchaContainer) {
+        currentRecaptchaContainer.remove();
+      }
     }
   }, [stateWidget]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/user/forgotten-password-form/forgotten-password-form.component.jsx

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+import { useRecaptcha } from '../../hooks';
+
 import notify from '../../app/notify';
 
 const ForgottenPasswordForm = ({
@@ -10,8 +12,8 @@ const ForgottenPasswordForm = ({
   honeypot,
   honeypotClass,
 }) => {
+  const formRef = useRef(null);
   const [email, setEmail] = useState('');
-  const [honeypotInput, setHoneypotInput] = useState('');
   const [success, setSuccess] = useState(false);
 
   const fallbackHoneypotStyles = {
@@ -25,13 +27,13 @@ const ForgottenPasswordForm = ({
     color: 'transparent',
   };
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    const formData = new FormData();
-    if (honeypotInput !== '') return window.location.href = '/';
+  const onRecaptchaSubmit = useCallback((recaptchaData) => {
+    const formData = new FormData(formRef.current);
+    const honeypot = formData.get("body");
 
-    formData.append('email', email);
+    if (honeypot && honeypot !== '') {
+      return window.location.href = '/';
+    }
 
     fetch('/reset_passwords', {
       method: 'POST',
@@ -49,7 +51,28 @@ const ForgottenPasswordForm = ({
           { duration: 8000 },
         );
       });
-  };
+  }, []);
+
+  const { onRecaptchaRender, onResetRecaptcha } = useRecaptcha({
+    formID: 'reset-pwd',
+    formRef,
+    onRecaptchaSubmit,
+    shouldKickGAEvent: false,
+  });
+
+  useEffect(() => {
+    if (success) {
+      onResetRecaptcha()
+    }
+  }, [success])
+
+  const onFormSubmit = (e) => {
+    e.preventDefault();
+
+    if (formRef.current.checkValidity()) {
+      onRecaptchaRender();
+    }
+  }
 
   if (success) {
     return (
@@ -58,7 +81,11 @@ const ForgottenPasswordForm = ({
   }
 
   return (
-    <form className="forgotten-password-form" onSubmit={handleSubmit}>
+    <form
+      ref={formRef}
+      className="forgotten-password-form"
+      onSubmit={onFormSubmit}
+    >
       {honeypot && (
         <input
           className={honeypotClass || null}
@@ -66,8 +93,6 @@ const ForgottenPasswordForm = ({
           type="text"
           id="body"
           name="body"
-          value={honeypotInput}
-          onChange={(e) => setHoneypotInput(e.target.value)}
         />
       )}