@internetarchive/recaptcha-manager 0.0.1-alpha.1 → 0.0.1-alpha.2

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/demo/app-root.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { html, css, LitElement } from 'lit';
2
2
  import { customElement, state } from 'lit/decorators.js';
3
+ import { RecaptchaWidget } from '../src/recaptcha-widget';
3
4
  import {
4
5
  RecaptchaManager,
5
6
  RecaptchaManagerInterface,
@@ -9,40 +10,79 @@ import {
9
10
  export class AppRoot extends LitElement {
10
11
  @state() result?: string;
11
12
 
12
- private recaptchaManager?: RecaptchaManagerInterface;
13
+ @state() result2?: string;
14
+
15
+ private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
16
+ defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
17
+ });
18
+
19
+ private recaptcha1?: RecaptchaWidget;
20
+
21
+ private recaptcha2?: RecaptchaWidget;
13
22
 
14
23
  render() {
15
24
  return html`
16
- <button @click="${this.loadRecaptcha}">Load Recaptcha</button>
17
- <button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
18
- <slot name="recaptcha"></slot>
25
+ <p>
26
+ <button @click="${this.loadRecaptcha}">Load Recaptcha</button
27
+ ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
28
+ </p>
19
29
  ${this.result
20
- ? html`<strong
21
- >Token:<strong><p>${this.result}</p></strong></strong
22
- >`
30
+ ? html`<p><strong>Token:</strong></p>
31
+ <p>${this.result}</p>`
32
+ : ''}
33
+ <p>
34
+ <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
35
+ ><button @click="${this.executeRecaptcha2}">
36
+ Execute Another Recaptcha
37
+ </button>
38
+ </p>
39
+ ${this.result2
40
+ ? html`<p><strong>Token 2:</strong></p>
41
+ <p>${this.result2}</p>`
23
42
  : ''}
24
43
  `;
25
44
  }
26
45
 
27
46
  private async loadRecaptcha() {
28
- this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({
29
- siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
47
+ this.recaptcha1 = await this.recaptchaManager?.getRecaptchaWidget({
48
+ recaptchaParams: {
49
+ tabindex: 0,
50
+ theme: 'light',
51
+ type: 'image',
52
+ },
30
53
  });
31
- const element = document.querySelector('#recaptcha') as HTMLDivElement;
32
- this.recaptchaManager?.setup(element, 0, 'light', 'image');
33
54
  }
34
55
 
35
56
  private async executeRecaptcha() {
36
- if (!this.recaptchaManager) {
57
+ if (!this.recaptcha1) {
58
+ await this.loadRecaptcha();
59
+ }
60
+
61
+ if (!this.recaptcha1) {
62
+ console.error('error loading recaptcha');
63
+ return;
64
+ }
65
+
66
+ this.result = await this.recaptcha1.execute();
67
+ }
68
+
69
+ private async loadRecaptcha2() {
70
+ this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({
71
+ siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
72
+ });
73
+ }
74
+
75
+ private async executeRecaptcha2() {
76
+ if (!this.recaptcha2) {
37
77
  await this.loadRecaptcha();
38
78
  }
39
79
 
40
- if (!this.recaptchaManager) {
80
+ if (!this.recaptcha2) {
41
81
  console.error('error loading recaptcha');
42
82
  return;
43
83
  }
44
84
 
45
- this.result = await this.recaptchaManager.execute();
85
+ this.result2 = await this.recaptcha2.execute();
46
86
  }
47
87
 
48
88
  static styles = css`
package/demo/index.html CHANGED
@@ -13,12 +13,7 @@
13
13
  </style>
14
14
  </head>
15
15
  <body>
16
- <app-root>
17
- <!-- recaptcha does not work in the shadowDOM so must be slotted from the top -->
18
- <div slot="recaptcha">
19
- <div id="recaptcha"></div>
20
- </div>
21
- </app-root>
16
+ <app-root></app-root>
22
17
 
23
18
  <script type="module" src="../dist/demo/app-root.js">
24
19
  </script>
@@ -1,9 +1,14 @@
1
1
  import { LitElement } from 'lit';
2
2
  export declare class AppRoot extends LitElement {
3
3
  result?: string;
4
- private recaptchaManager?;
4
+ result2?: string;
5
+ private recaptchaManager;
6
+ private recaptcha1?;
7
+ private recaptcha2?;
5
8
  render(): import("lit").TemplateResult<1>;
6
9
  private loadRecaptcha;
7
10
  private executeRecaptcha;
11
+ private loadRecaptcha2;
12
+ private executeRecaptcha2;
8
13
  static styles: import("lit").CSSResult;
9
14
  }
@@ -3,35 +3,69 @@ import { html, css, LitElement } from 'lit';
3
3
  import { customElement, state } from 'lit/decorators.js';
4
4
  import { RecaptchaManager, } from '../src/recaptcha-manager';
5
5
  let AppRoot = class AppRoot extends LitElement {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.recaptchaManager = new RecaptchaManager({
9
+ defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
10
+ });
11
+ }
6
12
  render() {
7
13
  return html `
8
- <button @click="${this.loadRecaptcha}">Load Recaptcha</button>
9
- <button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
10
- <slot name="recaptcha"></slot>
14
+ <p>
15
+ <button @click="${this.loadRecaptcha}">Load Recaptcha</button
16
+ ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
17
+ </p>
11
18
  ${this.result
12
- ? html `<strong
13
- >Token:<strong><p>${this.result}</p></strong></strong
14
- >`
19
+ ? html `<p><strong>Token:</strong></p>
20
+ <p>${this.result}</p>`
21
+ : ''}
22
+ <p>
23
+ <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
24
+ ><button @click="${this.executeRecaptcha2}">
25
+ Execute Another Recaptcha
26
+ </button>
27
+ </p>
28
+ ${this.result2
29
+ ? html `<p><strong>Token 2:</strong></p>
30
+ <p>${this.result2}</p>`
15
31
  : ''}
16
32
  `;
17
33
  }
18
34
  async loadRecaptcha() {
19
35
  var _a;
20
- this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({
21
- siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
22
- });
23
- const element = document.querySelector('#recaptcha');
24
- (_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.setup(element, 0, 'light', 'image');
36
+ this.recaptcha1 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
37
+ recaptchaParams: {
38
+ tabindex: 0,
39
+ theme: 'light',
40
+ type: 'image',
41
+ },
42
+ }));
25
43
  }
26
44
  async executeRecaptcha() {
27
- if (!this.recaptchaManager) {
45
+ if (!this.recaptcha1) {
46
+ await this.loadRecaptcha();
47
+ }
48
+ if (!this.recaptcha1) {
49
+ console.error('error loading recaptcha');
50
+ return;
51
+ }
52
+ this.result = await this.recaptcha1.execute();
53
+ }
54
+ async loadRecaptcha2() {
55
+ var _a;
56
+ this.recaptcha2 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
57
+ siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
58
+ }));
59
+ }
60
+ async executeRecaptcha2() {
61
+ if (!this.recaptcha2) {
28
62
  await this.loadRecaptcha();
29
63
  }
30
- if (!this.recaptchaManager) {
64
+ if (!this.recaptcha2) {
31
65
  console.error('error loading recaptcha');
32
66
  return;
33
67
  }
34
- this.result = await this.recaptchaManager.execute();
68
+ this.result2 = await this.recaptcha2.execute();
35
69
  }
36
70
  };
37
71
  AppRoot.styles = css `
@@ -42,6 +76,9 @@ AppRoot.styles = css `
42
76
  __decorate([
43
77
  state()
44
78
  ], AppRoot.prototype, "result", void 0);
79
+ __decorate([
80
+ state()
81
+ ], AppRoot.prototype, "result2", void 0);
45
82
  AppRoot = __decorate([
46
83
  customElement('app-root')
47
84
  ], AppRoot);
@@ -1 +1 @@
1
- {"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,gBAAgB,GAEjB,MAAM,0BAA0B,CAAC;AAGlC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAKrC,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,aAAa;wBAClB,IAAI,CAAC,gBAAgB;;QAErC,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;gCACkB,IAAI,CAAC,MAAM;YAC/B;YACJ,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,aAAa;;QACzB,IAAI,CAAC,gBAAgB,GAAG,MAAM,gBAAgB,CAAC,mBAAmB,CAAC;YACjE,OAAO,EAAE,0CAA0C;SACpD,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;QACvE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7D,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;SAC5B;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;IACtD,CAAC;CAOF,CAAA;AALQ,cAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AA1CO;IAAR,KAAK,EAAE;uCAAiB;AADd,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA4CnB;SA5CY,OAAO","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport {\n RecaptchaManager,\n RecaptchaManagerInterface,\n} from '../src/recaptcha-manager';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @state() result?: string;\n\n private recaptchaManager?: RecaptchaManagerInterface;\n\n render() {\n return html`\n <button @click=\"${this.loadRecaptcha}\">Load Recaptcha</button>\n <button @click=\"${this.executeRecaptcha}\">Execute Recaptcha</button>\n <slot name=\"recaptcha\"></slot>\n ${this.result\n ? html`<strong\n >Token:<strong><p>${this.result}</p></strong></strong\n >`\n : ''}\n `;\n }\n\n private async loadRecaptcha() {\n this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({\n siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',\n });\n const element = document.querySelector('#recaptcha') as HTMLDivElement;\n this.recaptchaManager?.setup(element, 0, 'light', 'image');\n }\n\n private async executeRecaptcha() {\n if (!this.recaptchaManager) {\n await this.loadRecaptcha();\n }\n\n if (!this.recaptchaManager) {\n console.error('error loading recaptcha');\n return;\n }\n\n this.result = await this.recaptchaManager.execute();\n }\n\n static styles = css`\n :host {\n display: block;\n }\n `;\n}\n"]}
1
+ {"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EACL,gBAAgB,GAEjB,MAAM,0BAA0B,CAAC;AAGlC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAKU,qBAAgB,GAA8B,IAAI,gBAAgB,CAAC;YACzE,cAAc,EAAE,0CAA0C;SAC3D,CAAC,CAAC;IA4EL,CAAC;IAtEC,MAAM;QACJ,OAAO,IAAI,CAAA;;0BAEW,IAAI,CAAC,aAAa;2BACjB,IAAI,CAAC,gBAAgB;;QAExC,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;iBACG,IAAI,CAAC,MAAM,MAAM;YAC1B,CAAC,CAAC,EAAE;;0BAEc,IAAI,CAAC,cAAc;2BAClB,IAAI,CAAC,iBAAiB;;;;QAIzC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;iBACG,IAAI,CAAC,OAAO,MAAM;YAC3B,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,aAAa;;QACzB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,kBAAkB,CAAC;YAChE,eAAe,EAAE;gBACf,QAAQ,EAAE,CAAC;gBACX,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,OAAO;aACd;SACF,CAAC,CAAA,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;SAC5B;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAChD,CAAC;IAEO,KAAK,CAAC,cAAc;;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,kBAAkB,CAAC;YAChE,OAAO,EAAE,0CAA0C;SACpD,CAAC,CAAA,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;SAC5B;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;SACR;QAED,IAAI,CAAC,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IACjD,CAAC;CAOF,CAAA;AALQ,cAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AAjFO;IAAR,KAAK,EAAE;uCAAiB;AAEhB;IAAR,KAAK,EAAE;wCAAkB;AAHf,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmFnB;SAnFY,OAAO","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { RecaptchaWidget } from '../src/recaptcha-widget';\nimport {\n RecaptchaManager,\n RecaptchaManagerInterface,\n} from '../src/recaptcha-manager';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @state() result?: string;\n\n @state() result2?: string;\n\n private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({\n defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',\n });\n\n private recaptcha1?: RecaptchaWidget;\n\n private recaptcha2?: RecaptchaWidget;\n\n render() {\n return html`\n <p>\n <button @click=\"${this.loadRecaptcha}\">Load Recaptcha</button\n ><button @click=\"${this.executeRecaptcha}\">Execute Recaptcha</button>\n </p>\n ${this.result\n ? html`<p><strong>Token:</strong></p>\n <p>${this.result}</p>`\n : ''}\n <p>\n <button @click=\"${this.loadRecaptcha2}\">Load Another Recaptcha</button\n ><button @click=\"${this.executeRecaptcha2}\">\n Execute Another Recaptcha\n </button>\n </p>\n ${this.result2\n ? html`<p><strong>Token 2:</strong></p>\n <p>${this.result2}</p>`\n : ''}\n `;\n }\n\n private async loadRecaptcha() {\n this.recaptcha1 = await this.recaptchaManager?.getRecaptchaWidget({\n recaptchaParams: {\n tabindex: 0,\n theme: 'light',\n type: 'image',\n },\n });\n }\n\n private async executeRecaptcha() {\n if (!this.recaptcha1) {\n await this.loadRecaptcha();\n }\n\n if (!this.recaptcha1) {\n console.error('error loading recaptcha');\n return;\n }\n\n this.result = await this.recaptcha1.execute();\n }\n\n private async loadRecaptcha2() {\n this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({\n siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',\n });\n }\n\n private async executeRecaptcha2() {\n if (!this.recaptcha2) {\n await this.loadRecaptcha();\n }\n\n if (!this.recaptcha2) {\n console.error('error loading recaptcha');\n return;\n }\n\n this.result2 = await this.recaptcha2.execute();\n }\n\n static styles = css`\n :host {\n display: block;\n }\n `;\n}\n"]}
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
- export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';
1
+ export { RecaptchaManager, RecaptchaManagerInterface, } from './src/recaptcha-manager';
2
+ export { RecaptchaWidget, RecaptchaWidgetInterface, } from './src/recaptcha-widget';
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
- export { RecaptchaManager } from './src/recaptcha-manager';
1
+ export { RecaptchaManager, } from './src/recaptcha-manager';
2
+ export { RecaptchaWidget, } from './src/recaptcha-widget';
2
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA6B,MAAM,yBAAyB,CAAC","sourcesContent":["export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,GAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,GAEhB,MAAM,wBAAwB,CAAC","sourcesContent":["export {\n RecaptchaManager,\n RecaptchaManagerInterface,\n} from './src/recaptcha-manager';\n\nexport {\n RecaptchaWidget,\n RecaptchaWidgetInterface,\n} from './src/recaptcha-widget';\n"]}
@@ -0,0 +1,82 @@
1
+ /// <reference types="grecaptcha" />
2
+ import { LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';
3
+ export interface RecaptchaManagerInterface {
4
+ /**
5
+ * Executes the recaptcha and returns a token
6
+ *
7
+ * Example:
8
+ *
9
+ * try {
10
+ * const recaptchaResult = await recaptchaManager.execute();
11
+ * console.log('recaptcha token:', recaptchaResult);
12
+ * } catch {
13
+ * console.error('something happened')
14
+ * }
15
+ */
16
+ execute(): Promise<string>;
17
+ /**
18
+ * Create the recaptcha widget.
19
+ *
20
+ * If the `container` is not passed in, one will be created.
21
+ *
22
+ * @param options
23
+ */
24
+ setup(options?: {
25
+ container?: HTMLElement;
26
+ tabIndex?: number;
27
+ theme?: ReCaptchaV2.Theme;
28
+ type?: ReCaptchaV2.Type;
29
+ size?: ReCaptchaV2.Size;
30
+ }): void;
31
+ }
32
+ export declare class RecaptchaManager implements RecaptchaManagerInterface {
33
+ /**
34
+ * This is a convenience initializer that also lazily loads
35
+ * the recaptcha library from Google.
36
+ *
37
+ * @param options
38
+ * @returns
39
+ */
40
+ static getRecaptchaManager(siteKey: string, options?: {
41
+ lazyLoader?: LazyLoaderServiceInterface;
42
+ tabIndex?: number;
43
+ theme?: ReCaptchaV2.Theme;
44
+ type?: ReCaptchaV2.Type;
45
+ size?: ReCaptchaV2.Size;
46
+ }): Promise<RecaptchaManagerInterface>;
47
+ /**
48
+ * Load the Recaptch library from Google.
49
+ *
50
+ * @param options
51
+ * @returns
52
+ */
53
+ static loadRecaptchaLibrary(options?: {
54
+ lazyLoader?: LazyLoaderServiceInterface;
55
+ }): Promise<ReCaptchaV2.ReCaptcha>;
56
+ private grecaptchaLibrary;
57
+ private siteKey;
58
+ constructor(options: {
59
+ grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
60
+ siteKey: string;
61
+ });
62
+ private executionSuccessBlock?;
63
+ private executionExpiredBlock?;
64
+ private executionErrorBlock?;
65
+ private isExecuting;
66
+ private containerElement;
67
+ /** @inheritdoc */
68
+ execute(): Promise<string>;
69
+ /** @inheritdoc */
70
+ setup(options?: {
71
+ container?: HTMLElement;
72
+ tabIndex?: number;
73
+ theme?: ReCaptchaV2.Theme;
74
+ type?: ReCaptchaV2.Type;
75
+ size?: ReCaptchaV2.Size;
76
+ }): void;
77
+ private createContainer;
78
+ private finishExecution;
79
+ private responseHandler;
80
+ private expiredHandler;
81
+ private errorHandler;
82
+ }
@@ -0,0 +1,140 @@
1
+ import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
2
+ export class RecaptchaManager {
3
+ constructor(options) {
4
+ this.isExecuting = false;
5
+ this.containerElement = null;
6
+ this.grecaptchaLibrary = options.grecaptchaLibrary;
7
+ this.siteKey = options.siteKey;
8
+ }
9
+ /**
10
+ * This is a convenience initializer that also lazily loads
11
+ * the recaptcha library from Google.
12
+ *
13
+ * @param options
14
+ * @returns
15
+ */
16
+ static async getRecaptchaManager(siteKey, options) {
17
+ const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary({
18
+ lazyLoader: options === null || options === void 0 ? void 0 : options.lazyLoader,
19
+ });
20
+ const manager = new RecaptchaManager({
21
+ grecaptchaLibrary,
22
+ siteKey,
23
+ });
24
+ manager.setup({
25
+ tabIndex: options === null || options === void 0 ? void 0 : options.tabIndex,
26
+ theme: options === null || options === void 0 ? void 0 : options.theme,
27
+ type: options === null || options === void 0 ? void 0 : options.type,
28
+ size: options === null || options === void 0 ? void 0 : options.size,
29
+ });
30
+ return manager;
31
+ }
32
+ /**
33
+ * Load the Recaptch library from Google.
34
+ *
35
+ * @param options
36
+ * @returns
37
+ */
38
+ static async loadRecaptchaLibrary(options) {
39
+ var _a;
40
+ const service = (_a = options === null || options === void 0 ? void 0 : options.lazyLoader) !== null && _a !== void 0 ? _a : new LazyLoaderService();
41
+ return new Promise(resolve => {
42
+ window.grecaptchaLoadedCallback = () => {
43
+ setTimeout(() => {
44
+ // remove the callback when we're done with it
45
+ delete window.grecaptchaLoadedCallback;
46
+ }, 10);
47
+ resolve(window.grecaptcha);
48
+ };
49
+ service.loadScript({
50
+ src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
51
+ });
52
+ });
53
+ }
54
+ /** @inheritdoc */
55
+ execute() {
56
+ if (this.isExecuting) {
57
+ throw new Error('Recaptcha is already executing');
58
+ }
59
+ this.isExecuting = true;
60
+ return new Promise((resolve, reject) => {
61
+ this.executionSuccessBlock = (token) => {
62
+ this.finishExecution();
63
+ resolve(token);
64
+ };
65
+ this.executionExpiredBlock = () => {
66
+ this.finishExecution();
67
+ reject(new Error('expired'));
68
+ };
69
+ this.executionErrorBlock = () => {
70
+ this.finishExecution();
71
+ reject(new Error('error'));
72
+ };
73
+ this.grecaptchaLibrary.execute();
74
+ });
75
+ }
76
+ /** @inheritdoc */
77
+ setup(options) {
78
+ var _a, _b;
79
+ const container = (_a = options === null || options === void 0 ? void 0 : options.container) !== null && _a !== void 0 ? _a : this.createContainer();
80
+ // we've already rendered this container, don't do it again
81
+ if (container === this.containerElement)
82
+ return;
83
+ this.containerElement = container;
84
+ this.grecaptchaLibrary.render(container, {
85
+ callback: this.responseHandler.bind(this),
86
+ 'expired-callback': this.expiredHandler.bind(this),
87
+ 'error-callback': this.errorHandler.bind(this),
88
+ sitekey: this.siteKey,
89
+ tabindex: options === null || options === void 0 ? void 0 : options.tabIndex,
90
+ theme: options === null || options === void 0 ? void 0 : options.theme,
91
+ type: options === null || options === void 0 ? void 0 : options.type,
92
+ size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : 'invisible',
93
+ });
94
+ }
95
+ createContainer() {
96
+ const elementId = `recaptchaManager-${this.siteKey}`;
97
+ let element = document.getElementById(elementId);
98
+ if (!element) {
99
+ element = document.createElement('div');
100
+ element.id = elementId;
101
+ element.style.position = 'fixed';
102
+ element.style.top = '50%';
103
+ element.style.left = '50%';
104
+ element.style.outline = '1px solid purple';
105
+ element.style.width = '10px';
106
+ element.style.height = '10px';
107
+ // #recaptcha - TopCollections {
108
+ // position: fixed;
109
+ // top: 50 %;
110
+ // left: 50 %;
111
+ // }
112
+ document.body.insertBefore(element, document.body.firstChild);
113
+ }
114
+ return element;
115
+ }
116
+ finishExecution() {
117
+ this.isExecuting = false;
118
+ this.grecaptchaLibrary.reset();
119
+ }
120
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
121
+ responseHandler(response) {
122
+ if (this.executionSuccessBlock) {
123
+ this.executionSuccessBlock(response);
124
+ this.executionSuccessBlock = undefined;
125
+ }
126
+ }
127
+ expiredHandler() {
128
+ if (this.executionExpiredBlock) {
129
+ this.executionExpiredBlock();
130
+ this.executionExpiredBlock = undefined;
131
+ }
132
+ }
133
+ errorHandler() {
134
+ if (this.executionErrorBlock) {
135
+ this.executionErrorBlock();
136
+ this.executionErrorBlock = undefined;
137
+ }
138
+ }
139
+ }
140
+ //# sourceMappingURL=recaptcha-manager%20copy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"recaptcha-manager copy.js","sourceRoot":"","sources":["../../src/recaptcha-manager copy.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LazyLoaderService,\n LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\n\nexport interface RecaptchaManagerInterface {\n /**\n * Executes the recaptcha and returns a token\n *\n * Example:\n *\n * try {\n * const recaptchaResult = await recaptchaManager.execute();\n * console.log('recaptcha token:', recaptchaResult);\n * } catch {\n * console.error('something happened')\n * }\n */\n execute(): Promise<string>;\n\n /**\n * Create the recaptcha widget.\n *\n * If the `container` is not passed in, one will be created.\n *\n * @param options\n */\n setup(options?: {\n container?: HTMLElement;\n tabIndex?: number;\n theme?: ReCaptchaV2.Theme;\n type?: ReCaptchaV2.Type;\n size?: ReCaptchaV2.Size;\n }): void;\n}\n\nexport class RecaptchaManager implements RecaptchaManagerInterface {\n /**\n * This is a convenience initializer that also lazily loads\n * the recaptcha library from Google.\n *\n * @param options\n * @returns\n */\n static async getRecaptchaManager(\n siteKey: string,\n options?: {\n lazyLoader?: LazyLoaderServiceInterface;\n tabIndex?: number;\n theme?: ReCaptchaV2.Theme;\n type?: ReCaptchaV2.Type;\n size?: ReCaptchaV2.Size;\n }\n ): Promise<RecaptchaManagerInterface> {\n const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary({\n lazyLoader: options?.lazyLoader,\n });\n\n const manager = new RecaptchaManager({\n grecaptchaLibrary,\n siteKey,\n });\n\n manager.setup({\n tabIndex: options?.tabIndex,\n theme: options?.theme,\n type: options?.type,\n size: options?.size,\n });\n\n return manager;\n }\n\n /**\n * Load the Recaptch library from Google.\n *\n * @param options\n * @returns\n */\n static async loadRecaptchaLibrary(options?: {\n lazyLoader?: LazyLoaderServiceInterface;\n }): Promise<ReCaptchaV2.ReCaptcha> {\n const service = options?.lazyLoader ?? new LazyLoaderService();\n\n return new Promise(resolve => {\n (window as any).grecaptchaLoadedCallback = (): void => {\n setTimeout(() => {\n // remove the callback when we're done with it\n delete (window as any).grecaptchaLoadedCallback;\n }, 10);\n resolve(window.grecaptcha);\n };\n\n service.loadScript({\n src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',\n });\n });\n }\n\n private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n\n private siteKey: string;\n\n constructor(options: {\n grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n siteKey: string;\n }) {\n this.grecaptchaLibrary = options.grecaptchaLibrary;\n this.siteKey = options.siteKey;\n }\n\n private executionSuccessBlock?: (token: string) => void;\n\n private executionExpiredBlock?: () => void;\n\n private executionErrorBlock?: () => void;\n\n private isExecuting = false;\n\n private containerElement: HTMLElement | null = null;\n\n /** @inheritdoc */\n execute(): Promise<string> {\n if (this.isExecuting) {\n throw new Error('Recaptcha is already executing');\n }\n\n this.isExecuting = true;\n return new Promise((resolve, reject) => {\n this.executionSuccessBlock = (token: string): void => {\n this.finishExecution();\n resolve(token);\n };\n\n this.executionExpiredBlock = (): void => {\n this.finishExecution();\n reject(new Error('expired'));\n };\n\n this.executionErrorBlock = (): void => {\n this.finishExecution();\n reject(new Error('error'));\n };\n\n this.grecaptchaLibrary.execute();\n });\n }\n\n /** @inheritdoc */\n setup(options?: {\n container?: HTMLElement;\n tabIndex?: number;\n theme?: ReCaptchaV2.Theme;\n type?: ReCaptchaV2.Type;\n size?: ReCaptchaV2.Size;\n }): void {\n const container = options?.container ?? this.createContainer();\n\n // we've already rendered this container, don't do it again\n if (container === this.containerElement) return;\n\n this.containerElement = container;\n this.grecaptchaLibrary.render(container, {\n callback: this.responseHandler.bind(this),\n 'expired-callback': this.expiredHandler.bind(this),\n 'error-callback': this.errorHandler.bind(this),\n sitekey: this.siteKey,\n tabindex: options?.tabIndex,\n theme: options?.theme,\n type: options?.type,\n size: options?.size ?? 'invisible',\n });\n }\n\n private createContainer(): HTMLElement {\n const elementId = `recaptchaManager-${this.siteKey}`;\n let element: HTMLElement | null = document.getElementById(elementId);\n if (!element) {\n element = document.createElement('div');\n element.id = elementId;\n element.style.position = 'fixed';\n element.style.top = '50%';\n element.style.left = '50%';\n element.style.outline = '1px solid purple';\n element.style.width = '10px';\n element.style.height = '10px';\n // #recaptcha - TopCollections {\n // position: fixed;\n // top: 50 %;\n // left: 50 %;\n // }\n\n document.body.insertBefore(element, document.body.firstChild);\n }\n return element;\n }\n\n private finishExecution(): void {\n this.isExecuting = false;\n this.grecaptchaLibrary.reset();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private responseHandler(response: any): void {\n if (this.executionSuccessBlock) {\n this.executionSuccessBlock(response);\n this.executionSuccessBlock = undefined;\n }\n }\n\n private expiredHandler(): void {\n if (this.executionExpiredBlock) {\n this.executionExpiredBlock();\n this.executionExpiredBlock = undefined;\n }\n }\n\n private errorHandler(): void {\n if (this.executionErrorBlock) {\n this.executionErrorBlock();\n this.executionErrorBlock = undefined;\n }\n }\n}\n"]}
@@ -0,0 +1,82 @@
1
+ /// <reference types="grecaptcha" />
2
+ import { LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';
3
+ export interface RecaptchaManagerInterface {
4
+ /**
5
+ * Executes the recaptcha and returns a token
6
+ *
7
+ * Example:
8
+ *
9
+ * try {
10
+ * const recaptchaResult = await recaptchaManager.execute();
11
+ * console.log('recaptcha token:', recaptchaResult);
12
+ * } catch {
13
+ * console.error('something happened')
14
+ * }
15
+ */
16
+ execute(): Promise<string>;
17
+ /**
18
+ * Create the recaptcha widget.
19
+ *
20
+ * If the `container` is not passed in, one will be created.
21
+ *
22
+ * @param options
23
+ */
24
+ setup(options?: {
25
+ container?: HTMLElement;
26
+ tabIndex?: number;
27
+ theme?: ReCaptchaV2.Theme;
28
+ type?: ReCaptchaV2.Type;
29
+ size?: ReCaptchaV2.Size;
30
+ }): void;
31
+ }
32
+ export declare class RecaptchaManager implements RecaptchaManagerInterface {
33
+ /**
34
+ * This is a convenience initializer that also lazily loads
35
+ * the recaptcha library from Google.
36
+ *
37
+ * @param options
38
+ * @returns
39
+ */
40
+ static getRecaptchaManager(siteKey: string, options?: {
41
+ lazyLoader?: LazyLoaderServiceInterface;
42
+ tabIndex?: number;
43
+ theme?: ReCaptchaV2.Theme;
44
+ type?: ReCaptchaV2.Type;
45
+ size?: ReCaptchaV2.Size;
46
+ }): Promise<RecaptchaManagerInterface>;
47
+ /**
48
+ * Load the Recaptch library from Google.
49
+ *
50
+ * @param options
51
+ * @returns
52
+ */
53
+ static loadRecaptchaLibrary(options?: {
54
+ lazyLoader?: LazyLoaderServiceInterface;
55
+ }): Promise<ReCaptchaV2.ReCaptcha>;
56
+ private grecaptchaLibrary;
57
+ private siteKey;
58
+ constructor(options: {
59
+ grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
60
+ siteKey: string;
61
+ });
62
+ private executionSuccessBlock?;
63
+ private executionExpiredBlock?;
64
+ private executionErrorBlock?;
65
+ private isExecuting;
66
+ private containerElement;
67
+ /** @inheritdoc */
68
+ execute(): Promise<string>;
69
+ /** @inheritdoc */
70
+ setup(options?: {
71
+ container?: HTMLElement;
72
+ tabIndex?: number;
73
+ theme?: ReCaptchaV2.Theme;
74
+ type?: ReCaptchaV2.Type;
75
+ size?: ReCaptchaV2.Size;
76
+ }): void;
77
+ private createContainer;
78
+ private finishExecution;
79
+ private responseHandler;
80
+ private expiredHandler;
81
+ private errorHandler;
82
+ }