@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.
package/dist/index.esm.js CHANGED
@@ -545,21 +545,8 @@ const componentNameValidationMixin = (superclass) =>
545
545
  }
546
546
  };
547
547
 
548
- // create a dispatch event function that also calls to the onevent function in case it's set
549
- // usage example:
550
- // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
551
- // this will dispatch a new event when called, but also call to "onsomething"
552
- function createDispatchEvent(eventName, options = {}) {
553
- const event = new Event(eventName, options);
554
-
555
- this[`on${eventName}`]?.(event); // in case we got an event callback as property
556
- this.dispatchEvent(event);
557
- }
558
-
559
548
  const componentsContextMixin = (superclass) =>
560
549
  class ComponentsContextMixinClass extends superclass {
561
- #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
562
-
563
550
  updateComponentsContext(componentsContext) {
564
551
  this.dispatchEvent(
565
552
  new CustomEvent('components-context', {
@@ -702,6 +689,17 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
702
689
  )(DescopeBaseClass);
703
690
  };
704
691
 
692
+ // create a dispatch event function that also calls to the onevent function in case it's set
693
+ // usage example:
694
+ // #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
695
+ // this will dispatch a new event when called, but also call to "onsomething"
696
+ function createDispatchEvent(eventName, options = {}) {
697
+ const event = new Event(eventName, options);
698
+
699
+ this[`on${eventName}`]?.(event); // in case we got an event callback as property
700
+ this.dispatchEvent(event);
701
+ }
702
+
705
703
  const createProxy = ({
706
704
  componentName,
707
705
  wrappedEleName,
@@ -6706,8 +6704,10 @@ class RawRecaptcha extends BaseClass {
6706
6704
 
6707
6705
  attributeChangedCallback(attrName, oldValue, newValue) {
6708
6706
  super.attributeChangedCallback?.(attrName, oldValue, newValue);
6709
- if (attrName === 'enabled') {
6710
- this.#toggleRecaptcha(newValue === 'true');
6707
+ if (oldValue !== newValue) {
6708
+ if (attrName === 'enabled') {
6709
+ this.#toggleRecaptcha(newValue === 'true');
6710
+ }
6711
6711
  }
6712
6712
  }
6713
6713
 
@@ -6777,73 +6777,89 @@ class RawRecaptcha extends BaseClass {
6777
6777
  #toggleRecaptcha(enabled) {
6778
6778
  this.renderRecaptcha(enabled);
6779
6779
  if (enabled) {
6780
- this.#loadRecaptchaScript();
6781
6780
  this.#createOnLoadScript();
6781
+ if (!document.getElementById('recaptcha-script')) {
6782
+ this.#loadRecaptchaScript();
6783
+ } else {
6784
+ window.onRecaptchaLoadCallback();
6785
+ }
6782
6786
  }
6783
6787
  }
6784
6788
 
6785
6789
  #loadRecaptchaScript() {
6786
- if (!document.getElementById('recaptcha-script')) {
6787
- const script = document.createElement('script');
6788
- script.src = this.scriptURL;
6789
- script.async = true;
6790
- script.id = 'recaptcha-script';
6791
- script.defer = true;
6792
- document.body.appendChild(script);
6793
- } else {
6794
- window.onRecaptchaLoadCallback();
6795
- }
6790
+ const script = document.createElement('script');
6791
+ script.src = this.scriptURL;
6792
+ script.async = true;
6793
+ script.id = 'recaptcha-script';
6794
+ script.defer = true;
6795
+ document.body.appendChild(script);
6796
6796
  }
6797
6797
 
6798
- #createOnLoadScript() {
6799
- if (window.onRecaptchaLoadCallback) {
6800
- return;
6801
- }
6798
+ get grecaptchaInstance() {
6799
+ return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
6800
+ }
6802
6801
 
6802
+ #createOnLoadScript() {
6803
6803
  window.onRecaptchaLoadCallback = () => {
6804
6804
  const currentNode = this.recaptchaEle;
6805
+
6805
6806
  // if there are child nodes, it means that the recaptcha was already rendered
6806
6807
  if (currentNode.hasChildNodes()) {
6807
6808
  return;
6808
6809
  }
6809
- const grecaptchaInstance = this.enterprise
6810
- ? window.grecaptcha?.enterprise
6811
- : window.grecaptcha;
6810
+
6811
+ const { grecaptchaInstance } = this;
6812
6812
 
6813
6813
  if (!grecaptchaInstance) {
6814
6814
  return;
6815
6815
  }
6816
6816
 
6817
6817
  setTimeout(() => {
6818
- const view = grecaptchaInstance.render(currentNode, {
6818
+ // returns recaptchaWidgetId
6819
+ const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
6819
6820
  sitekey: this.siteKey,
6820
6821
  badge: 'inline',
6821
6822
  size: 'invisible',
6822
6823
  });
6824
+
6823
6825
  grecaptchaInstance.ready(() => {
6824
6826
  // clone the node and append it to the body so that it can be used by the grepcaptcha script
6825
- const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
6827
+ const cloneNode = currentNode
6828
+ .querySelector('textarea[name^="g-recaptcha-response"]')
6829
+ ?.cloneNode();
6826
6830
  if (cloneNode) {
6827
6831
  cloneNode.style.display = 'none';
6828
6832
  document.body.appendChild(cloneNode);
6829
6833
  }
6834
+
6835
+ // cleaning up the recaptcha element we added to the body
6836
+ const removeCloneNode = () => {
6837
+ cloneNode.remove();
6838
+ };
6839
+
6830
6840
  if (this.siteKey) {
6831
- grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
6832
- this.updateComponentsContext({
6833
- risktoken: token,
6834
- riskaction: this.action,
6841
+ // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
6842
+ // also calling grecaptchaInstance.reset() does not work
6843
+ const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
6844
+ exec
6845
+ .then((token) => {
6846
+ this.updateComponentsContext({
6847
+ risktoken: token,
6848
+ riskaction: this.action,
6849
+ });
6850
+
6851
+ removeCloneNode();
6852
+ })
6853
+ .catch((e) => {
6854
+ removeCloneNode();
6855
+ // eslint-disable-next-line no-console
6856
+ console.warn('could not execute recaptcha', e);
6835
6857
  });
6836
- });
6837
6858
  }
6838
6859
  });
6839
6860
  }, 0);
6840
6861
  };
6841
6862
  }
6842
-
6843
- connectedCallback() {
6844
- super.connectedCallback?.();
6845
- this.#toggleRecaptcha(this.enabled);
6846
- }
6847
6863
  }
6848
6864
 
6849
6865
  const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);