From fedd6e33a2ee516f561b8bbc41e7c8d692766f62 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Mon, 29 Apr 2024 23:04:58 +0200
Subject: [PATCH] FIX: Google Captcha

---
 package.json         |  2 +-
 src/js/ui/captcha.js | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index e8853d7..0df4e7b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "5.3.8",
+  "version": "5.3.9",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",
diff --git a/src/js/ui/captcha.js b/src/js/ui/captcha.js
index be0e03e..a6308d5 100644
--- a/src/js/ui/captcha.js
+++ b/src/js/ui/captcha.js
@@ -29,7 +29,7 @@ const CaptchaUI = ((window) => {
         const widgetid = grecaptcha.render(el, el.dataset)
         el.dataset.widgetid = widgetid
 
-        if(el.dataset.size === 'invisible' && !el.dataset.callback){
+        if (el.dataset.size === 'invisible' && !el.dataset.callback) {
           grecaptcha.execute(widgetid)
           form.addEventListener('submit', submitListener)
         }
@@ -39,32 +39,34 @@ const CaptchaUI = ((window) => {
       })
     }
 
-    const loadScript = (callback) => {
-      if(typeof window.grecaptcha !== 'undefined'){
-        callback()
+
+    window.noCaptchaFieldRender = attachCaptcha
+
+    const loadScript = () => {
+      if (document.getElementById('captchaAPI')) {
+        console.log(`${NAME}: Already loading API`)
+        return
       }
 
       console.log(`${NAME}: Loading Captcha API ...`)
 
       const script = document.createElement('script');
       script.id = 'captchaAPI';
-      script.src = `https://www.google.com/recaptcha/api.js?render=explicit&hl=${  document.querySelector('html').getAttribute('lang').substr(0,2)}`
+      script.src = `https://www.google.com/recaptcha/api.js?onload=noCaptchaFieldRender&render=explicit&hl=${document.querySelector('html').getAttribute('lang').substr(0, 2)}`
       script.async = true
-      script.onload = function() {
-        console.log(`${NAME}: Captcha API is loaded.`)
-        callback()
-      }
 
       document.body.append(script)
     }
 
-    if(document.querySelectorAll('.g-recaptcha').length){
-      loadScript(attachCaptcha);
-    }else{
+    if (document.querySelectorAll('.g-recaptcha').length) {
+      if (typeof window.grecaptcha !== 'undefined') {
+        attachCaptcha()
+      }
+
+      loadScript();
+    } else {
       console.log(`${NAME}: No Captcha fields.`)
     }
-
-    window.noCaptchaFieldRender = attachCaptcha
   }
 
   window.addEventListener(`${Events.LODEDANDREADY}`, init)