@descope/web-components-ui 1.0.336 → 1.0.337
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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
|
}
|