@descope/web-components-ui 1.0.308 → 1.0.309

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -960,21 +960,8 @@ const componentNameValidationMixin = (superclass) =>
960
960
  }
961
961
  };
962
962
 
963
- // create a dispatch event function that also calls to the onevent function in case it's set
964
- // usage example:
965
- // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
966
- // this will dispatch a new event when called, but also call to "onsomething"
967
- function createDispatchEvent(eventName, options = {}) {
968
- const event = new Event(eventName, options);
969
-
970
- this[`on${eventName}`]?.(event); // in case we got an event callback as property
971
- this.dispatchEvent(event);
972
- }
973
-
974
963
  const componentsContextMixin = (superclass) =>
975
964
  class ComponentsContextMixinClass extends superclass {
976
- #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
977
-
978
965
  updateComponentsContext(componentsContext) {
979
966
  this.dispatchEvent(
980
967
  new CustomEvent('components-context', {
@@ -1117,6 +1104,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
1117
1104
  )(DescopeBaseClass);
1118
1105
  };
1119
1106
 
1107
+ // create a dispatch event function that also calls to the onevent function in case it's set
1108
+ // usage example:
1109
+ // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
1110
+ // this will dispatch a new event when called, but also call to "onsomething"
1111
+ function createDispatchEvent(eventName, options = {}) {
1112
+ const event = new Event(eventName, options);
1113
+
1114
+ this[`on${eventName}`]?.(event); // in case we got an event callback as property
1115
+ this.dispatchEvent(event);
1116
+ }
1117
+
1120
1118
  const createProxy = ({
1121
1119
  componentName,
1122
1120
  wrappedEleName,
@@ -11659,8 +11657,10 @@ class RawRecaptcha extends BaseClass {
11659
11657
 
11660
11658
  attributeChangedCallback(attrName, oldValue, newValue) {
11661
11659
  super.attributeChangedCallback?.(attrName, oldValue, newValue);
11662
- if (attrName === 'enabled') {
11663
- this.#toggleRecaptcha(newValue === 'true');
11660
+ if (oldValue !== newValue) {
11661
+ if (attrName === 'enabled') {
11662
+ this.#toggleRecaptcha(newValue === 'true');
11663
+ }
11664
11664
  }
11665
11665
  }
11666
11666
 
@@ -11730,73 +11730,89 @@ class RawRecaptcha extends BaseClass {
11730
11730
  #toggleRecaptcha(enabled) {
11731
11731
  this.renderRecaptcha(enabled);
11732
11732
  if (enabled) {
11733
- this.#loadRecaptchaScript();
11734
11733
  this.#createOnLoadScript();
11734
+ if (!document.getElementById('recaptcha-script')) {
11735
+ this.#loadRecaptchaScript();
11736
+ } else {
11737
+ window.onRecaptchaLoadCallback();
11738
+ }
11735
11739
  }
11736
11740
  }
11737
11741
 
11738
11742
  #loadRecaptchaScript() {
11739
- if (!document.getElementById('recaptcha-script')) {
11740
- const script = document.createElement('script');
11741
- script.src = this.scriptURL;
11742
- script.async = true;
11743
- script.id = 'recaptcha-script';
11744
- script.defer = true;
11745
- document.body.appendChild(script);
11746
- } else {
11747
- window.onRecaptchaLoadCallback();
11748
- }
11743
+ const script = document.createElement('script');
11744
+ script.src = this.scriptURL;
11745
+ script.async = true;
11746
+ script.id = 'recaptcha-script';
11747
+ script.defer = true;
11748
+ document.body.appendChild(script);
11749
11749
  }
11750
11750
 
11751
- #createOnLoadScript() {
11752
- if (window.onRecaptchaLoadCallback) {
11753
- return;
11754
- }
11751
+ get grecaptchaInstance() {
11752
+ return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
11753
+ }
11755
11754
 
11755
+ #createOnLoadScript() {
11756
11756
  window.onRecaptchaLoadCallback = () => {
11757
11757
  const currentNode = this.recaptchaEle;
11758
+
11758
11759
  // if there are child nodes, it means that the recaptcha was already rendered
11759
11760
  if (currentNode.hasChildNodes()) {
11760
11761
  return;
11761
11762
  }
11762
- const grecaptchaInstance = this.enterprise
11763
- ? window.grecaptcha?.enterprise
11764
- : window.grecaptcha;
11763
+
11764
+ const { grecaptchaInstance } = this;
11765
11765
 
11766
11766
  if (!grecaptchaInstance) {
11767
11767
  return;
11768
11768
  }
11769
11769
 
11770
11770
  setTimeout(() => {
11771
- const view = grecaptchaInstance.render(currentNode, {
11771
+ // returns recaptchaWidgetId
11772
+ const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
11772
11773
  sitekey: this.siteKey,
11773
11774
  badge: 'inline',
11774
11775
  size: 'invisible',
11775
11776
  });
11777
+
11776
11778
  grecaptchaInstance.ready(() => {
11777
11779
  // clone the node and append it to the body so that it can be used by the grepcaptcha script
11778
- const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
11780
+ const cloneNode = currentNode
11781
+ .querySelector('textarea[name^="g-recaptcha-response"]')
11782
+ ?.cloneNode();
11779
11783
  if (cloneNode) {
11780
11784
  cloneNode.style.display = 'none';
11781
11785
  document.body.appendChild(cloneNode);
11782
11786
  }
11787
+
11788
+ // cleaning up the recaptcha element we added to the body
11789
+ const removeCloneNode = () => {
11790
+ cloneNode.remove();
11791
+ };
11792
+
11783
11793
  if (this.siteKey) {
11784
- grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
11785
- this.updateComponentsContext({
11786
- risktoken: token,
11787
- riskaction: this.action,
11794
+ // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
11795
+ // also calling grecaptchaInstance.reset() does not work
11796
+ const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
11797
+ exec
11798
+ .then((token) => {
11799
+ this.updateComponentsContext({
11800
+ risktoken: token,
11801
+ riskaction: this.action,
11802
+ });
11803
+
11804
+ removeCloneNode();
11805
+ })
11806
+ .catch((e) => {
11807
+ removeCloneNode();
11808
+ // eslint-disable-next-line no-console
11809
+ console.warn('could not execute recaptcha', e);
11788
11810
  });
11789
- });
11790
11811
  }
11791
11812
  });
11792
11813
  }, 0);
11793
11814
  };
11794
11815
  }
11795
-
11796
- connectedCallback() {
11797
- super.connectedCallback?.();
11798
- this.#toggleRecaptcha(this.enabled);
11799
- }
11800
11816
  }
11801
11817
 
11802
11818
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);