fix multiple recaptcha invisible

thelia-modules · Mar 23, 2022 · a61927d · a61927d
1 parent 641f523
commit a61927d
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 9 deletions.
diff --git a/Config/config.xml b/Config/config.xml
@@ -33,8 +33,8 @@
 
     <hooks>
         <hook id="recaptcha.hook" class="ReCaptcha\Hook\HookManager">
-            <tag name="hook.event_listener" event="main.head-top" type="front" templates="render:recaptcha-js.html" />
-            <tag name="hook.event_listener" event="recaptcha.js" type="front" templates="render:recaptcha-js.html" />
+            <tag name="hook.event_listener" event="main.head-top" type="front" method="loadRecaptcha" />
+            <tag name="hook.event_listener" event="recaptcha.js" type="front" method="loadRecaptcha" />
             <tag name="hook.event_listener" event="recaptcha.check" type="front" method="addRecaptchaCheck" />
             <tag name="hook.event_listener" event="contact.form-bottom" type="front" method="addRecaptchaCheckContact" />
 

diff --git a/Config/module.xml b/Config/module.xml
@@ -13,7 +13,7 @@
         <language>en_US</language>
         <language>fr_FR</language>
     </languages>
-    <version>2.0.3</version>
+    <version>2.0.4</version>
     <authors>
         <author>
             <name>Vincent Lopes-Vicente</name>

diff --git a/Hook/HookManager.php b/Hook/HookManager.php
@@ -39,13 +39,44 @@ public function addRecaptchaCheck(HookRenderEvent $event)
 
         $captchaId= "recaptcha";
         $captchaCallback = "";
+        $type = "";
+
         if ($captchaStyle === 'invisible') {
             $captchaCallback = "data-callback='onCompleted'";
+            $type = "g-invisible";
             $captchaId .= '-invisible';
         }
 
-        $event->add("<div id='$captchaId' class='g-recaptcha' data-sitekey='$siteKey' $captchaCallback data-size='$captchaStyle'></div>");
+        if (null !== $event->getArgument('id')) {
+            $captchaId = $event->getArgument('id');
+        }
+
+        $event->add("<div id='$captchaId' class='g-recaptcha $type' data-sitekey='$siteKey' $captchaCallback data-size='$captchaStyle'></div>");
     }
 
+    public function loadRecaptcha(HookRenderEvent $event)
+    {
+        $siteKey = ReCaptcha::getConfigValue('site_key');
+        $captchaStyle = ReCaptcha::getConfigValue('captcha_style');
+
+        if ($captchaStyle !== 'invisible') {
+            $event->add($this->render(
+                'recaptcha-js.html',
+                [
+                    "siteKey" => $siteKey,
+                    "captchaStyle" => $captchaStyle,
+                ]
+            ));
+
+            return;
+        }
 
+        $event->add($this->render(
+            'recaptcha-js-invisible.html',
+            [
+                "siteKey" => $siteKey,
+                "captchaStyle" => $captchaStyle,
+            ]
+        ));
+    }
 }
diff --git a/templates/frontOffice/default/recaptcha-js-invisible.html b/templates/frontOffice/default/recaptcha-js-invisible.html
@@ -0,0 +1,56 @@
+
+<script src="https://www.google.com/recaptcha/api.js?render={$siteKey}"></script>
+
+<script>var siteKey = "{$siteKey}";</script>
+
+{literal}
+    <script type="module">
+        function verifyRecaptcha(form, dataElement) {
+            const { sitekey, size } = dataElement.dataset;
+            const id = dataElement.id;
+
+            if (!sitekey) return;
+
+            return new Promise((resolve, reject) => {
+                grecaptcha.execute(sitekey, {action: 'submit'}).then((token) => {
+                    if (token) {
+                        resolve(token);
+                    }
+
+                    reject('Invalid Captcha');
+                })
+            });
+        }
+
+        const allForm = document.querySelectorAll('form');
+
+        allForm.forEach((form) => {
+            const dataElement = form.querySelector('.g-recaptcha');
+
+            if (!dataElement) return;
+
+            form.addEventListener("submit", async (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                grecaptcha.ready(() =>
+                    {
+                        const response = verifyRecaptcha(form, dataElement)
+
+                        response.then((token) => {
+                            const customEvent = new CustomEvent('validRecaptcha', {
+                                detail: {
+                                    token,
+                                    form,
+                                }
+                            })
+
+                            form.dispatchEvent(customEvent);
+                        })
+                            .catch((error) => console.log(error))
+                    }
+                );
+            })
+        })
+    </script>
+{/literal} 
diff --git a/templates/frontOffice/default/recaptcha-js.html b/templates/frontOffice/default/recaptcha-js.html
@@ -1,22 +1,23 @@
-<script src="https://www.google.com/recaptcha/api.js?hl={lang attr="code"}" async defer></script>
+<script src="https://www.google.com/recaptcha/api.js?hl={lang attr='code'}" async defer></script>
 <script>
     window.onload = function() {
-        var captchaDiv = document.getElementById("recaptcha-invisible");
+        var captchaDiv = document.querySelector(".g-recaptcha.g-invisible");
+
         if (captchaDiv !== null) {
             var form = captchaDiv.parentElement;
 
-            form.addEventListener("submit", function(event) {
+            form.addEventListener("submit", function (event) {
                 if (!grecaptcha.getResponse()) {
                     event.preventDefault(); //prevent form submit
                     grecaptcha.execute();
                 }
             });
 
-            onCompleted = function() {
+            onCompleted = function () {
                 if (form.reportValidity() !== false) {
                     form.submit();
                 }
             }
         }
     }
-</script>
+</script>