@descope/web-components-ui 1.0.336 → 1.0.337
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[964],{38164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[964],{38164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>h});var c=a(94978),n=a(33346),s=a(2061);const i=(0,a(54567).iY)("recaptcha"),r=["enabled","site-key","action","enterprise"],o=(0,n.s)({componentName:i,baseSelector:":host > div"}),h=(0,s.qC)(c.e4)(class extends o{static get observedAttributes(){return r.concat(o.observedAttributes||[])}attributeChangedCallback(e,t,a){super.attributeChangedCallback?.(e,t,a),t!==a&&"enabled"===e&&this.#e("true"===a)}renderRecaptcha(e){e?(this.recaptchaEle.style.display="",this.mockRecaptchaEle.style.display="none"):(this.recaptchaEle.style.display="none",this.mockRecaptchaEle.style.display="")}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n :host {\n display: inline-flex;\n }\n :host > div {\n display: flex;\n }\n :host #recaptcha {\n\t\t\t\twidth: 100%;\n height: 100%;\n\t\t\t}\n :host img {\n width: 256px;\n }\n\t\t</style>\n <div>\n <span id="recaptcha"></span>\n <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>\n </div>\n\t',this.recaptchaEle=this.baseElement.querySelector("#recaptcha"),this.mockRecaptchaEle=this.baseElement.querySelector("img")}get enterprise(){return"true"===this.getAttribute("enterprise")}get siteKey(){return this.getAttribute("site-key")}get action(){return this.getAttribute("action")||"load"}get enabled(){return"true"===this.getAttribute("enabled")}get scriptURL(){const e=new URL("https://www.google.com/recaptcha/");return e.pathname+=(this.enterprise?"enterprise":"api")+".js",e.searchParams.append("onload","onRecaptchaLoadCallback"),e.searchParams.append("render","explicit"),e.toString()}#e(e){this.renderRecaptcha(e),e&&(this.#t(),document.getElementById("recaptcha-script")?window.onRecaptchaLoadCallback():this.#a())}#a(){const e=document.createElement("script");e.src=this.scriptURL,e.async=!0,e.id="recaptcha-script",e.defer=!0,document.body.appendChild(e)}get grecaptchaInstance(){return this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha}#c(e,t,a){this.isConnected&&e.ready((()=>{const c=t.querySelector('textarea[name^="g-recaptcha-response"]')?.cloneNode();if(c&&(c.style.display="none",document.body.appendChild(c)),!this.siteKey)return;const n=e?.execute(a,{action:this.action});n.then(((n,s)=>{s?console.warn("could not execute recaptcha",s):(this.updateComponentsContext({risktoken:n,riskaction:this.action}),this.isConnected&&setTimeout((()=>{this.#c(e,t,a)}),11e4)),c.remove()}))}))}#t(){window.onRecaptchaLoadCallback=()=>{const e=this.recaptchaEle;if(e.hasChildNodes())return;const{grecaptchaInstance:t}=this;t&&setTimeout((()=>{const a=t.render(e,{sitekey:this.siteKey,badge:"inline",size:"invisible"});this.#c(t,e,a)}),0)}}});customElements.define(i,h)}}]);
|
package/package.json
CHANGED
|
@@ -113,6 +113,53 @@ class RawRecaptcha extends BaseClass {
|
|
|
113
113
|
return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {
|
|
117
|
+
if (!this.isConnected) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
grecaptchaInstance.ready(() => {
|
|
122
|
+
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
|
123
|
+
const cloneNode = currentNode
|
|
124
|
+
.querySelector('textarea[name^="g-recaptcha-response"]')
|
|
125
|
+
?.cloneNode();
|
|
126
|
+
if (cloneNode) {
|
|
127
|
+
cloneNode.style.display = 'none';
|
|
128
|
+
document.body.appendChild(cloneNode);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// cleaning up the recaptcha element we added to the body
|
|
132
|
+
const removeCloneNode = () => {
|
|
133
|
+
cloneNode.remove();
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
if (!this.siteKey) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
// we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
|
|
140
|
+
// also calling grecaptchaInstance.reset() does not work
|
|
141
|
+
const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
|
|
142
|
+
exec.then((token, e) => {
|
|
143
|
+
if (e) {
|
|
144
|
+
// eslint-disable-next-line no-console
|
|
145
|
+
console.warn('could not execute recaptcha', e);
|
|
146
|
+
} else {
|
|
147
|
+
this.updateComponentsContext({
|
|
148
|
+
risktoken: token,
|
|
149
|
+
riskaction: this.action,
|
|
150
|
+
});
|
|
151
|
+
// if the component is still connected, we should try to get a new token before the token expires (2 minutes)
|
|
152
|
+
if (this.isConnected) {
|
|
153
|
+
setTimeout(() => {
|
|
154
|
+
this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
|
|
155
|
+
}, 110000);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
removeCloneNode();
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
|
|
116
163
|
#createOnLoadScript() {
|
|
117
164
|
window.onRecaptchaLoadCallback = () => {
|
|
118
165
|
const currentNode = this.recaptchaEle;
|
|
@@ -129,48 +176,12 @@ class RawRecaptcha extends BaseClass {
|
|
|
129
176
|
}
|
|
130
177
|
|
|
131
178
|
setTimeout(() => {
|
|
132
|
-
// returns recaptchaWidgetId
|
|
133
179
|
const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {
|
|
134
180
|
sitekey: this.siteKey,
|
|
135
181
|
badge: 'inline',
|
|
136
182
|
size: 'invisible',
|
|
137
183
|
});
|
|
138
|
-
|
|
139
|
-
grecaptchaInstance.ready(() => {
|
|
140
|
-
// clone the node and append it to the body so that it can be used by the grepcaptcha script
|
|
141
|
-
const cloneNode = currentNode
|
|
142
|
-
.querySelector('textarea[name^="g-recaptcha-response"]')
|
|
143
|
-
?.cloneNode();
|
|
144
|
-
if (cloneNode) {
|
|
145
|
-
cloneNode.style.display = 'none';
|
|
146
|
-
document.body.appendChild(cloneNode);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// cleaning up the recaptcha element we added to the body
|
|
150
|
-
const removeCloneNode = () => {
|
|
151
|
-
cloneNode.remove();
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
if (this.siteKey) {
|
|
155
|
-
// we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times
|
|
156
|
-
// also calling grecaptchaInstance.reset() does not work
|
|
157
|
-
const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });
|
|
158
|
-
exec
|
|
159
|
-
.then((token) => {
|
|
160
|
-
this.updateComponentsContext({
|
|
161
|
-
risktoken: token,
|
|
162
|
-
riskaction: this.action,
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
removeCloneNode();
|
|
166
|
-
})
|
|
167
|
-
.catch((e) => {
|
|
168
|
-
removeCloneNode();
|
|
169
|
-
// eslint-disable-next-line no-console
|
|
170
|
-
console.warn('could not execute recaptcha', e);
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
});
|
|
184
|
+
this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);
|
|
174
185
|
}, 0);
|
|
175
186
|
};
|
|
176
187
|
}
|