@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/cjs/index.cjs.js +61 -45
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +61 -45
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4978.js +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-recaptcha-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-recaptcha/RecaptchaClass.js +50 -32
- package/src/mixins/componentsContextMixin.js +0 -4
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 (
|
6710
|
-
|
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
|
-
|
6787
|
-
|
6788
|
-
|
6789
|
-
|
6790
|
-
|
6791
|
-
|
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
|
-
|
6799
|
-
|
6800
|
-
|
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
|
-
|
6810
|
-
|
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
|
-
|
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
|
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
|
-
|
6832
|
-
|
6833
|
-
|
6834
|
-
|
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);
|