@descope/web-components-ui 1.0.308 → 1.0.309

package/dist/umd/descope-recaptcha-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[964],{8164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>p});var c=a(4978),n=a(3346),s=a(2061);const i=(0,a(4567).iY)("recaptcha"),r=["enabled","site-key","action","enterprise"],o=(0,n.s)({componentName:i,baseSelector:":host > div"}),p=(0,s.qC)(c.e4)(class extends o{static get observedAttributes(){return r.concat(o.observedAttributes||[])}attributeChangedCallback(e,t,a){super.attributeChangedCallback?.(e,t,a),"enabled"===e&&this.#e("true"===a)}renderRecaptcha(e){e?(this.recaptchaEle.style.display="",this.mockRecaptchaEle.style.display="none"):(this.recaptchaEle.style.display="none",this.mockRecaptchaEle.style.display="")}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        display: flex;\n      }\n      :host #recaptcha {\n\t\t\t\twidth: 100%;\n        height: 100%;\n\t\t\t}\n      :host img {\n        width: 256px;\n      }\n\t\t</style>\n    <div>\n      <span id="recaptcha"></span>\n      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>\n    </div>\n\t',this.recaptchaEle=this.baseElement.querySelector("#recaptcha"),this.mockRecaptchaEle=this.baseElement.querySelector("img")}get enterprise(){return"true"===this.getAttribute("enterprise")}get siteKey(){return this.getAttribute("site-key")}get action(){return this.getAttribute("action")||"load"}get enabled(){return"true"===this.getAttribute("enabled")}get scriptURL(){const e=new URL("https://www.google.com/recaptcha/");return e.pathname+=(this.enterprise?"enterprise":"api")+".js",e.searchParams.append("onload","onRecaptchaLoadCallback"),e.searchParams.append("render","explicit"),e.toString()}#e(e){this.renderRecaptcha(e),e&&(this.#t(),this.#a())}#t(){if(document.getElementById("recaptcha-script"))window.onRecaptchaLoadCallback();else{const e=document.createElement("script");e.src=this.scriptURL,e.async=!0,e.id="recaptcha-script",e.defer=!0,document.body.appendChild(e)}}#a(){window.onRecaptchaLoadCallback||(window.onRecaptchaLoadCallback=()=>{const e=this.recaptchaEle;if(e.hasChildNodes())return;const t=this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha;t&&setTimeout((()=>{const a=t.render(e,{sitekey:this.siteKey,badge:"inline",size:"invisible"});t.ready((()=>{const c=e.querySelector("#g-recaptcha-response")?.cloneNode();c&&(c.style.display="none",document.body.appendChild(c)),this.siteKey&&t?.execute(a,{action:this.action}).then((e=>{this.updateComponentsContext({risktoken:e,riskaction:this.action})}))}))}),0)})}connectedCallback(){super.connectedCallback?.(),this.#e(this.enabled)}});customElements.define(i,p)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[964],{8164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>p});var c=a(4978),n=a(3346),s=a(2061);const i=(0,a(4567).iY)("recaptcha"),r=["enabled","site-key","action","enterprise"],o=(0,n.s)({componentName:i,baseSelector:":host > div"}),p=(0,s.qC)(c.e4)(class extends o{static get observedAttributes(){return r.concat(o.observedAttributes||[])}attributeChangedCallback(e,t,a){super.attributeChangedCallback?.(e,t,a),t!==a&&"enabled"===e&&this.#e("true"===a)}renderRecaptcha(e){e?(this.recaptchaEle.style.display="",this.mockRecaptchaEle.style.display="none"):(this.recaptchaEle.style.display="none",this.mockRecaptchaEle.style.display="")}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        display: flex;\n      }\n      :host #recaptcha {\n\t\t\t\twidth: 100%;\n        height: 100%;\n\t\t\t}\n      :host img {\n        width: 256px;\n      }\n\t\t</style>\n    <div>\n      <span id="recaptcha"></span>\n      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>\n    </div>\n\t',this.recaptchaEle=this.baseElement.querySelector("#recaptcha"),this.mockRecaptchaEle=this.baseElement.querySelector("img")}get enterprise(){return"true"===this.getAttribute("enterprise")}get siteKey(){return this.getAttribute("site-key")}get action(){return this.getAttribute("action")||"load"}get enabled(){return"true"===this.getAttribute("enabled")}get scriptURL(){const e=new URL("https://www.google.com/recaptcha/");return e.pathname+=(this.enterprise?"enterprise":"api")+".js",e.searchParams.append("onload","onRecaptchaLoadCallback"),e.searchParams.append("render","explicit"),e.toString()}#e(e){this.renderRecaptcha(e),e&&(this.#t(),document.getElementById("recaptcha-script")?window.onRecaptchaLoadCallback():this.#a())}#a(){const e=document.createElement("script");e.src=this.scriptURL,e.async=!0,e.id="recaptcha-script",e.defer=!0,document.body.appendChild(e)}get grecaptchaInstance(){return this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha}#t(){window.onRecaptchaLoadCallback=()=>{const e=this.recaptchaEle;if(e.hasChildNodes())return;const{grecaptchaInstance:t}=this;t&&setTimeout((()=>{const a=t.render(e,{sitekey:this.siteKey,badge:"inline",size:"invisible"});t.ready((()=>{const c=e.querySelector('textarea[name^="g-recaptcha-response"]')?.cloneNode();c&&(c.style.display="none",document.body.appendChild(c));const n=()=>{c.remove()};if(this.siteKey){const e=t?.execute(a,{action:this.action});e.then((e=>{this.updateComponentsContext({risktoken:e,riskaction:this.action}),n()})).catch((e=>{n(),console.warn("could not execute recaptcha",e)}))}}))}),0)}}});customElements.define(i,p)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.308",
+  "version": "1.0.309",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -18,8 +18,10 @@ class RawRecaptcha extends BaseClass {
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
-    if (attrName === 'enabled') {
-      this.#toggleRecaptcha(newValue === 'true');
+    if (oldValue !== newValue) {
+      if (attrName === 'enabled') {
+        this.#toggleRecaptcha(newValue === 'true');
+      }
     }
   }
 
@@ -89,73 +91,89 @@ class RawRecaptcha extends BaseClass {
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
     if (enabled) {
-      this.#loadRecaptchaScript();
       this.#createOnLoadScript();
+      if (!document.getElementById('recaptcha-script')) {
+        this.#loadRecaptchaScript();
+      } else {
+        window.onRecaptchaLoadCallback();
+      }
     }
   }
 
   #loadRecaptchaScript() {
-    if (!document.getElementById('recaptcha-script')) {
-      const script = document.createElement('script');
-      script.src = this.scriptURL;
-      script.async = true;
-      script.id = 'recaptcha-script';
-      script.defer = true;
-      document.body.appendChild(script);
-    } else {
-      window.onRecaptchaLoadCallback();
-    }
+    const script = document.createElement('script');
+    script.src = this.scriptURL;
+    script.async = true;
+    script.id = 'recaptcha-script';
+    script.defer = true;
+    document.body.appendChild(script);
   }
 
-  #createOnLoadScript() {
-    if (window.onRecaptchaLoadCallback) {
-      return;
-    }
+  get grecaptchaInstance() {
+    return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
+  }
 
+  #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
       const currentNode = this.recaptchaEle;
+
       // if there are child nodes, it means that the recaptcha was already rendered
       if (currentNode.hasChildNodes()) {
         return;
       }
-      const grecaptchaInstance = this.enterprise
-        ? window.grecaptcha?.enterprise
-        : window.grecaptcha;
+
+      const { grecaptchaInstance } = this;
 
       if (!grecaptchaInstance) {
         return;
       }
 
       setTimeout(() => {
-        const view = grecaptchaInstance.render(currentNode, {
+        // returns recaptchaWidgetId
+        const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
           sitekey: this.siteKey,
           badge: 'inline',
           size: 'invisible',
         });
+
         grecaptchaInstance.ready(() => {
           // clone the node and append it to the body so that it can be used by the grepcaptcha script
-          const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
+          const cloneNode = currentNode
+            .querySelector('textarea[name^="g-recaptcha-response"]')
+            ?.cloneNode();
           if (cloneNode) {
             cloneNode.style.display = 'none';
             document.body.appendChild(cloneNode);
           }
+
+          // cleaning up the recaptcha element we added to the body
+          const removeCloneNode = () => {
+            cloneNode.remove();
+          };
+
           if (this.siteKey) {
-            grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
-              this.updateComponentsContext({
-                risktoken: token,
-                riskaction: this.action,
+            // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
+            // also calling grecaptchaInstance.reset() does not work
+            const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
+            exec
+              .then((token) => {
+                this.updateComponentsContext({
+                  risktoken: token,
+                  riskaction: this.action,
+                });
+
+                removeCloneNode();
+              })
+              .catch((e) => {
+                removeCloneNode();
+                // eslint-disable-next-line no-console
+                console.warn('could not execute recaptcha', e);
               });
-            });
           }
         });
       }, 0);
     };
   }
-
-  connectedCallback() {
-    super.connectedCallback?.();
-    this.#toggleRecaptcha(this.enabled);
-  }
 }
 
 export const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);

package/src/mixins/componentsContextMixin.js

@@ -1,9 +1,5 @@
-import { createDispatchEvent } from '../helpers/mixinsHelpers';
-
 export const componentsContextMixin = (superclass) =>
   class ComponentsContextMixinClass extends superclass {
-    #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
-
     updateComponentsContext(componentsContext) {
       this.dispatchEvent(
         new CustomEvent('components-context', {