@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/cjs/index.cjs.js
CHANGED
@@ -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 (
|
11663
|
-
|
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
|
-
|
11740
|
-
|
11741
|
-
|
11742
|
-
|
11743
|
-
|
11744
|
-
|
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
|
-
|
11752
|
-
|
11753
|
-
|
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
|
-
|
11763
|
-
|
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
|
-
|
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
|
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
|
-
|
11785
|
-
|
11786
|
-
|
11787
|
-
|
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);
|