@websy/websy-designs 1.4.15 → 1.4.16

package/dist/websy-designs.debug.js

@@ -2202,25 +2202,26 @@ class WebsyForm {
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
       if (this.options.useRecaptcha === true) {
-        // if (this.recaptchaValue) {                  
-        grecaptcha.ready(() => {
-          grecaptcha.execute(ENVIRONMENT.RECAPTCHA_KEY, { action: 'submit' }).then(token => {
-            this.apiService.add('google/checkrecaptcha', {grecaptcharesponse: token}).then(response => {
-              if (response.success && response.success === true) {
-                resolve(true)
-              }
-              else {
-                reject(false)              
-              }
-            })
-          }, err => {
-            reject(err)
+        if (this.recaptchaValue) {                  
+        // grecaptcha.ready(() => {
+          // grecaptcha.execute(this.recaptchaValue, { action: 'submit' }).then(token => {
+          this.apiService.add('google/checkrecaptcha', {grecaptcharesponse: this.recaptchaValue}).then(response => {
+            if (response.success && response.success === true) {
+              resolve(true)
+              grecaptcha.reset(`${this.elementId}_recaptcha`, {sitekey: ENVIRONMENT.RECAPTCHA_KEY})
+            }
+            else {
+              resolve(false)              
+            }            
           })
-        })
-        // }
-        // else {
-        //   reject(false)
-        // }
+          // }, err => {
+          //   reject(err)
+          // })
+        // })
+        }
+        else {
+          resolve(false)
+        }
       }
       else {
         resolve(true)
@@ -2290,10 +2291,12 @@ class WebsyForm {
   recaptchaReady () {
     const el = document.getElementById(`${this.elementId}_recaptcha`)
     if (el) {
-      grecaptcha.render(`${this.elementId}_recaptcha`, {
-        sitekey: ENVIRONMENT.RECAPTCHA_KEY,
-        callback: this.validateRecaptcha.bind(this)
-      }) 
+      grecaptcha.ready(() => {
+        grecaptcha.render(`${this.elementId}_recaptcha`, {
+          sitekey: ENVIRONMENT.RECAPTCHA_KEY,
+          callback: this.validateRecaptcha.bind(this)
+        }) 
+      })
     }    
   }
   render (update, data) {
@@ -2348,6 +2351,12 @@ class WebsyForm {
           `
         }        
       })
+      if (this.options.useRecaptcha === true) {
+        html += `
+          --><div id='${this.elementId}_recaptcha' data-sitekey='${ENVIRONMENT.RECAPTCHA_KEY}' class='websy-form-recaptcha'></div>
+          <div id='${this.elementId}_recaptchaError' class='websy-alert websy-alert-error websy-hidden'>Invalid recaptcha response</div><!--
+        ` 
+      } 
       html += `
         --><button class="websy-btn submit ${this.options.submit.classes || ''}">${this.options.submit.text || 'Save'}</button>${this.options.cancel ? '<!--' : ''}
       `
@@ -2360,24 +2369,30 @@ class WebsyForm {
         </form>
         <div id="${this.elementId}_validationFail" class="websy-validation-failure"></div>
       `
-      if (this.options.useRecaptcha === true) {
-        html += `
-          <div id='${this.elementId}_recaptcha'></div>
-        ` 
-      }      
       el.innerHTML = html
       this.processComponents(componentsToProcess, () => {
         if (this.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
-          // this.recaptchaReady()
+          this.recaptchaReady()
         }
       })      
     }
   }
   submitForm () {
     const formEl = document.getElementById(`${this.elementId}Form`)
+    const buttonEl = formEl.querySelector('button.websy-btn.submit')
+    const recaptchErrEl = document.getElementById(`${this.elementId}_recaptchaError`)    
     if (formEl.reportValidity() === true) {  
+      if (buttonEl) {
+        buttonEl.setAttribute('disabled', true)
+      }
       this.checkRecaptcha().then(result => {
-        if (result === true) {
+        if (buttonEl) {
+          buttonEl.removeAttribute('disabled')
+        }
+        if (result === true) {                    
+          if (recaptchErrEl) {
+            recaptchErrEl.classList.add('websy-hidden')
+          }
           const formData = new FormData(formEl)
           const data = {}
           const temp = new FormData(formEl)
@@ -2397,6 +2412,7 @@ class WebsyForm {
                 // this.render()
                 formEl.reset()
               }
+              buttonEl.removeAttribute('disabled')
               this.options.onSuccess.call(this, result)
             }, err => {
               console.log('Error submitting form data:', err)
@@ -2413,7 +2429,12 @@ class WebsyForm {
           }          
         }
         else {
-          console.log('bad recaptcha')
+          if (buttonEl) {
+            buttonEl.removeAttribute('disabled')
+          }          
+          if (recaptchErrEl) {
+            recaptchErrEl.classList.remove('websy-hidden')
+          }
         }        
       })         
     }    
@@ -8602,7 +8623,7 @@ function recaptchaReadyCallBack () {
 // need a way of initializing these based on environment variables
 function useGoogleRecaptcha (key) {
   const rcs = document.createElement('script')
-  rcs.src = `//www.google.com/recaptcha/api.js?render=${key}`
+  rcs.src = `//www.google.com/recaptcha/api.js`
   document.body.appendChild(rcs)
 }