Merge branch 'main' of https://github.com/FriendlyCaptcha/friendly-ca…

…ptcha-wordpress

friendly-captcha/modules/contact-form-7/script.js

@@ -1,16 +1,12 @@
-(function() {
-    var resetFriendlyCaptchaWidget = function() {
-        window.friendlyChallenge.autoWidget.reset();
-    }
-	document.addEventListener( 'DOMContentLoaded', function( event ) {
-        document.addEventListener( 'wpcf7mailsent',
-            resetFriendlyCaptchaWidget
-        );
-        document.addEventListener( 'wpcf7mailfailed',
-            resetFriendlyCaptchaWidget
-		);
-        document.addEventListener( 'wpcf7spam',
-            resetFriendlyCaptchaWidget
-        );
-    });
-})();
+(function () {
+  var resetFriendlyCaptchaWidget = function () {
+    window.friendlyChallenge.autoWidget.reset();
+  };
+  document.addEventListener("DOMContentLoaded", function (event) {
+    document.addEventListener("wpcf7mailsent", resetFriendlyCaptchaWidget);
+    document.addEventListener("wpcf7mailfailed", resetFriendlyCaptchaWidget);
+    document.addEventListener("wpcf7spam", resetFriendlyCaptchaWidget);
+    document.addEventListener("wpcf7invalid", resetFriendlyCaptchaWidget);
+    document.addEventListener("wpcf7submit", resetFriendlyCaptchaWidget);
+  });
+})();

friendly-captcha/modules/elementor/field.php

@@ -43,6 +43,15 @@ public function render( $item, $item_index, $form ) {
 
 		echo frcaptcha_generate_widget_tag_from_plugin($plugin);
         frcaptcha_enqueue_widget_scripts();
+
+		wp_enqueue_script(
+			'frcaptcha_elementor-friendly-captcha',
+			plugin_dir_url(__FILE__) . 'script.js',
+			array('friendly-captcha-widget-module', 'friendly-captcha-widget-fallback'),
+			FriendlyCaptcha_Plugin::$version,
+			true
+		);
+
         echo "<style>.frc-captcha {max-width: 100%; width:100%}</style>";
 
         // We render a hidden field so Elementor knows where to display errors

friendly-captcha/modules/elementor/script.js

@@ -0,0 +1,25 @@
+(function () {
+  document.addEventListener("submit", function (e) {
+    const form = e.submitter.closest("form");
+    if (!form) {
+      return;
+    }
+
+    const element = form.querySelector(".frc-captcha");
+    if (!element) {
+      return;
+    }
+
+    const widget = element.friendlyChallengeWidget;
+    if (!widget) {
+      return;
+    }
+
+    setTimeout(() => {
+      // We reset the widget after a short delay to give the form time to grab the solution and submit it
+      // This is a workaround for the fact that the form submit event is fired before the solution value is grabbed
+      // 1 second is really conservative as this is not affected by network speed or anything like that
+      widget.reset();
+    }, 1000);
+  });
+})();

friendly-captcha/modules/wpforms/script.js

@@ -0,0 +1,28 @@
+(($) => {
+  function submitWidgetInForm(form) {
+    const elements = form.find(".frc-captcha");
+    if (!elements) {
+      return;
+    }
+
+    elements.each((_, e) => {
+      const widget = e.friendlyChallengeWidget;
+      console.log(widget);
+      if (!widget) {
+        return;
+      }
+
+      widget.reset();
+    });
+  }
+
+  $("form.wpforms-form").on(
+    "wpformsAjaxSubmitSuccess wpformsAjaxSubmitFailed",
+    (event) => {
+      const form = $(event.target);
+      if (form) {
+        submitWidgetInForm(form);
+      }
+    }
+  );
+})(jQuery);

friendly-captcha/modules/wpforms/wpforms.php

@@ -10,6 +10,10 @@ function frcaptcha_wpforms_friendly_captcha_enqueue_scripts() {
 
     frcaptcha_echo_script_tags();
 
+    // We add our own script to reset the widget after form submission
+    // wp_enqueue_script doesn't work with WPForms for some reason, so we have to echo the script tags manually.
+    echo '<script async defer src="'. plugin_dir_url( __FILE__ ) . 'script.js"></script>';
+
     // The CSS reset of WPForms is really agressive.. so we add the frcaptcha styles but more `!important`ly now.
     // Really wish this wasn't necessary..
     echo "<style>