@descope/web-components-ui 1.0.308 → 1.0.309

Sign up to get free protection for your applications and to get access to all the features.
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);