@descope/web-components-ui 1.0.185 → 1.0.186
Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[964],{8164:(t,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[964],{8164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>p});var c=a(1e3),n=a(3874),s=a(2061);const i=(0,a(4567).iY)("recaptcha"),r=["enabled","site-key","action","enterprise"],o=(0,n.s)({componentName:i,baseSelector:":host > div"}),p=(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),"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(),this.#a())}#t(){if(document.getElementById("recaptcha-script"))window.onRecaptchaLoadCallback();else{const e=document.createElement("script");e.src=this.scriptURL,e.async=!0,e.id="recaptcha-script",e.defer=!0,document.body.appendChild(e)}}#a(){window.onRecaptchaLoadCallback||(window.onRecaptchaLoadCallback=()=>{const e=this.recaptchaEle;if(e.hasChildNodes())return;const t=this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha;t&&setTimeout((()=>{const a=t.render(e,{sitekey:this.siteKey,badge:"inline",size:"invisible"});t.ready((()=>{const c=e.querySelector("#g-recaptcha-response")?.cloneNode();c&&(c.style.display="none",document.body.appendChild(c)),this.siteKey&&t?.execute(a,{action:this.action}).then((e=>{this.updateComponentsContext({risktoken:e,riskaction:this.action})}))}))}),0)})}connectedCallback(){super.connectedCallback?.(),this.#e(this.enabled)}});customElements.define(i,p)}}]);
|
package/package.json
CHANGED
@@ -5,7 +5,7 @@ import { getComponentName } from '../../helpers/componentHelpers';
|
|
5
5
|
|
6
6
|
export const componentName = getComponentName('recaptcha');
|
7
7
|
|
8
|
-
const observedAttributes = ['
|
8
|
+
const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
|
9
9
|
|
10
10
|
const BaseClass = createBaseClass({
|
11
11
|
componentName,
|
@@ -18,18 +18,18 @@ class RawRecaptcha extends BaseClass {
|
|
18
18
|
|
19
19
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
20
20
|
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
21
|
-
if (attrName === '
|
21
|
+
if (attrName === 'enabled') {
|
22
22
|
this.#toggleRecaptcha(newValue === 'true');
|
23
23
|
}
|
24
24
|
}
|
25
25
|
|
26
|
-
renderRecaptcha(
|
27
|
-
if (
|
28
|
-
this.recaptchaEle.style.display = 'none';
|
29
|
-
this.mockRecaptchaEle.style.display = '';
|
30
|
-
} else {
|
26
|
+
renderRecaptcha(enabled) {
|
27
|
+
if (enabled) {
|
31
28
|
this.recaptchaEle.style.display = '';
|
32
29
|
this.mockRecaptchaEle.style.display = 'none';
|
30
|
+
} else {
|
31
|
+
this.recaptchaEle.style.display = 'none';
|
32
|
+
this.mockRecaptchaEle.style.display = '';
|
33
33
|
}
|
34
34
|
}
|
35
35
|
|
@@ -38,16 +38,19 @@ class RawRecaptcha extends BaseClass {
|
|
38
38
|
|
39
39
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
40
40
|
<style>
|
41
|
-
|
41
|
+
:host {
|
42
|
+
display: inline-flex;
|
43
|
+
}
|
44
|
+
:host > div {
|
45
|
+
display: flex;
|
46
|
+
}
|
47
|
+
:host #recaptcha {
|
42
48
|
width: 100%;
|
43
|
-
|
49
|
+
height: 100%;
|
44
50
|
}
|
45
51
|
:host img {
|
46
52
|
width: 256px;
|
47
53
|
}
|
48
|
-
:host {
|
49
|
-
display: inline-flex;
|
50
|
-
}
|
51
54
|
</style>
|
52
55
|
<div>
|
53
56
|
<span id="recaptcha"></span>
|
@@ -71,8 +74,8 @@ class RawRecaptcha extends BaseClass {
|
|
71
74
|
return this.getAttribute('action') || 'load';
|
72
75
|
}
|
73
76
|
|
74
|
-
get
|
75
|
-
return this.getAttribute('
|
77
|
+
get enabled() {
|
78
|
+
return this.getAttribute('enabled') === 'true';
|
76
79
|
}
|
77
80
|
|
78
81
|
get scriptURL() {
|
@@ -83,9 +86,9 @@ class RawRecaptcha extends BaseClass {
|
|
83
86
|
return url.toString();
|
84
87
|
}
|
85
88
|
|
86
|
-
#toggleRecaptcha(
|
87
|
-
this.renderRecaptcha(
|
88
|
-
if (
|
89
|
+
#toggleRecaptcha(enabled) {
|
90
|
+
this.renderRecaptcha(enabled);
|
91
|
+
if (enabled) {
|
89
92
|
this.#loadRecaptchaScript();
|
90
93
|
this.#createOnLoadScript();
|
91
94
|
}
|
@@ -151,8 +154,7 @@ class RawRecaptcha extends BaseClass {
|
|
151
154
|
|
152
155
|
connectedCallback() {
|
153
156
|
super.connectedCallback?.();
|
154
|
-
|
155
|
-
this.#toggleRecaptcha(this.disabled);
|
157
|
+
this.#toggleRecaptcha(this.enabled);
|
156
158
|
}
|
157
159
|
}
|
158
160
|
|