homeflowjs 0.13.54 → 0.13.56

package/app/recaptcha.js

@@ -60,46 +60,65 @@ export default () => {
       }
     }
 
-    function addRecaptchaV2(formSelectors) {
-      const invisibleRecaptcha = document.createElement('div');
-      invisibleRecaptcha.classList.add('g-recaptcha');
-      invisibleRecaptcha.dataset.sitekey = '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY';
-      invisibleRecaptcha.dataset.callback = 'submitRecaptchaForm';
-      invisibleRecaptcha.dataset.size = 'invisible';
-
+    const appendRecaptchaScript = () => {
       const recaptchaScript = document.createElement('script');
       recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
       recaptchaScript.id = 'recaptcha-script';
 
+      document.body.appendChild(recaptchaScript);
+    }
+
+    const onRecaptchaReady = (formSelectors) => {
+      if (window.recaptchaLoadingScriptInterval) {
+        clearTimeout(window.recaptchaLoadingScriptInterval);
+        window.recaptchaLoadingScriptInterval = undefined;
+      }
+
       const forms = document.querySelectorAll(formSelectors.join(', '));
-      forms.forEach((form) => {
-        form.appendChild(invisibleRecaptcha);
-      });
 
-      // add the recaptcha script only after a form input is focused
-      for (let i = 0; i < formSelectors.length; i++) {
-        const formInputs = document.querySelectorAll(`${formSelectors[i]} input, ${formSelectors[i]} textarea`);
-        formInputs.forEach((input) => {
-          input.addEventListener('focus', () => {
-            if (!document.getElementById('recaptcha-script')) {
-              document.body.appendChild(recaptchaScript);
-            }
-          });
+      forms.forEach((form, i) => {
+        const formRecaptchaWrapper = document.createElement('div');
+        formRecaptchaWrapper.id = `recaptcha-wrapper-${i}`;
+
+        form.appendChild(formRecaptchaWrapper);
+
+        const onRecaptchaSubmit = () => {
+          form.submit();
+          Homeflow.kickEvent('after_successful_recaptcha', form);
+        }
+
+        const widget = window.grecaptcha.render(`recaptcha-wrapper-${i}`, {
+          sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
+          callback: onRecaptchaSubmit,
+          size: 'invisible',
         });
 
-        const forms = document.querySelectorAll(formSelectors[i]);
-        forms.forEach((form) => {
-          form.addEventListener('submit', (e) => {
-            if (e.target.classList.contains('hfjs-form-invalid')) return;
-            if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
-              e.preventDefault();
-              Homeflow.set('submitted_form', e.target);
-              grecaptcha.execute();
-            }
-          });
-          form.classList.add('has-recaptcha');
+        window.widgetIds =  window.widgetIds
+          ? [...window.widgetIds, widget]
+          : [widget]
+
+        form.addEventListener('submit', (e) => {
+          if (e.target.classList.contains('hfjs-form-invalid')) {
+            return;
+          }
+
+          e.preventDefault();
+          Homeflow.set('submitted_form', e.target);
+          grecaptcha.execute(widget);
         });
+      });
+    }
+
+    function addRecaptchaV2(formSelectors) {
+      if (!document.getElementById('recaptcha-script')) {
+        appendRecaptchaScript();
       }
+
+      window.recaptchaLoadingScriptInterval = setInterval(() => {
+        if (window.grecaptcha?.render) {
+          onRecaptchaReady(formSelectors)
+        }
+      }, 300);
     }
 
     if (Homeflow.get('recaptcha_version') === 3) {

package/package.json

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

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

@@ -3,14 +3,34 @@ import PropTypes from 'prop-types';
 
 import notify from '../../app/notify';
 
-const ForgottenPasswordForm = ({ inputClass, buttonClass, buttonSpanClass }) => {
+const ForgottenPasswordForm = ({
+  inputClass,
+  buttonClass,
+  buttonSpanClass,
+  honeypot,
+  honeypotClass,
+}) => {
   const [email, setEmail] = useState('');
+  const [honeypotInput, setHoneypotInput] = useState('');
   const [success, setSuccess] = useState(false);
 
+  const fallbackHoneypotStyles = {
+    display: 'block',
+    width: 0,
+    height: 0,
+    padding: 0,
+    border: 0,
+    opacity: 0,
+    fontSize: 0,
+    color: 'transparent',
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
     const formData = new FormData();
+    if (honeypotInput !== '') return window.location.href = '/';
+
     formData.append('email', email);
 
     fetch('/reset_passwords', {
@@ -39,6 +59,18 @@ const ForgottenPasswordForm = ({ inputClass, buttonClass, buttonSpanClass }) =>
 
   return (
     <form className="forgotten-password-form" onSubmit={handleSubmit}>
+      {honeypot && (
+        <input
+          className={honeypotClass || null}
+          style={honeypotClass ? null : fallbackHoneypotStyles}
+          type="text"
+          id="body"
+          name="body"
+          value={honeypotInput}
+          onChange={(e) => setHoneypotInput(e.target.value)}
+        />
+      )}
+
       <p>Enter your email address and we&apos;ll send you a link to reset your password.</p>
 
       <input
@@ -65,12 +97,16 @@ ForgottenPasswordForm.propTypes = {
   inputClass: PropTypes.string,
   buttonClass: PropTypes.string,
   buttonSpanClass: PropTypes.string,
+  honeypot: PropTypes.bool,
+  honeypotClass: PropTypes.string,
 };
 
 ForgottenPasswordForm.defaultProps = {
   inputClass: '',
   buttonClass: '',
   buttonSpanClass: '',
+  honeypot: false,
+  honeypotClass: '',
 };
 
 export default ForgottenPasswordForm;

package/user/user-register-form/user-register-form.component.jsx

@@ -28,8 +28,13 @@ const UserRegisterForm = (props) => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    const { body } = Object.fromEntries(new FormData(e.target));
+    const formData = {
+      ...localUser,
+      body,
+    };
 
-    const userParams = doNotContact ? { ...localUser, do_not_contact: 1 } : localUser;
+    const userParams = doNotContact ? { ...formData, do_not_contact: 1 } : formData;
     userParams.marketing_preferences = {
       ...localUser.marketing_preferences, opt_in_marketing_statement: marketingStatement,
     };
@@ -58,6 +63,11 @@ const UserRegisterForm = (props) => {
 
   return (
     <form onSubmit={handleSubmit} {...otherProps}>
+      <input
+        type="text"
+        name="body"
+        style={{ height: 0, width: 0, opacity: 0 }}
+      />
       {children}
     </form>
   );