@internetarchive/recaptcha-manager 0.0.1-alpha.3 → 0.1.1

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.
Files changed (28) hide show
  1. package/README.md +30 -1
  2. package/demo/app-root.ts +5 -5
  3. package/dist/demo/app-root.js +2 -2
  4. package/dist/demo/app-root.js.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/src/recaptcha-manager.d.ts +3 -3
  8. package/dist/src/recaptcha-manager.js +1 -1
  9. package/dist/src/recaptcha-manager.js.map +1 -1
  10. package/dist/src/recaptcha-widget.d.ts +8 -2
  11. package/dist/src/recaptcha-widget.js +11 -9
  12. package/dist/src/recaptcha-widget.js.map +1 -1
  13. package/dist/test/mock-grecaptcha.d.ts +24 -0
  14. package/dist/test/mock-grecaptcha.js +61 -98
  15. package/dist/test/mock-grecaptcha.js.map +1 -1
  16. package/dist/test/mock-lazy-loader.d.ts +15 -0
  17. package/dist/test/mock-lazy-loader.js +17 -0
  18. package/dist/test/mock-lazy-loader.js.map +1 -0
  19. package/dist/test/recaptcha-manager.test.d.ts +1 -0
  20. package/dist/test/recaptcha-manager.test.js +136 -67
  21. package/dist/test/recaptcha-manager.test.js.map +1 -1
  22. package/index.ts +1 -0
  23. package/package.json +4 -3
  24. package/src/recaptcha-manager.ts +4 -4
  25. package/src/recaptcha-widget.ts +23 -9
  26. package/test/mock-grecaptcha.ts +87 -124
  27. package/test/mock-lazy-loader.ts +38 -0
  28. package/test/recaptcha-manager.test.ts +146 -66
package/dist/test/recaptcha-manager.test.js CHANGED
@@ -1,69 +1,138 @@
1
- "use strict";
2
- // import { html, fixture, expect } from '@open-wc/testing';
3
- // import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';
4
- // import { RecaptchaManager } from '../src/recaptcha-manager';
5
- describe('ReCaptcha Manager', () => {
6
- // it('can execute the recaptcha like a Promise', async () => {
7
- // const recaptchaElement = (await fixture(html`
8
- // <div></div>
9
- // `)) as HTMLElement;
10
- // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);
11
- // const recaptchaManager = new RecaptchaManager({
12
- // grecaptchaLibrary: mockGrecaptcha,
13
- // siteKey: '123',
14
- // });
15
- // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
16
- // const result = await recaptchaManager.execute();
17
- // expect(result).to.equal('foo');
18
- // });
19
- // it('can error properly like a Promise', async () => {
20
- // const recaptchaElement = (await fixture(html`
21
- // <div></div>
22
- // `)) as HTMLElement;
23
- // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);
24
- // const recaptchaManager = new RecaptchaManager({
25
- // grecaptchaLibrary: mockGrecaptcha,
26
- // siteKey: '123',
27
- // });
28
- // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
29
- // try {
30
- // await recaptchaManager.execute();
31
- // expect.fail('should not get here');
32
- // } catch (error) {
33
- // expect(error).to.equal('error');
34
- // }
35
- // });
36
- // it('can expire properly like a Promise', async () => {
37
- // const recaptchaElement = (await fixture(html`
38
- // <div></div>
39
- // `)) as HTMLElement;
40
- // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);
41
- // const recaptchaManager = new RecaptchaManager({
42
- // grecaptchaLibrary: mockGrecaptcha,
43
- // siteKey: '123',
44
- // });
45
- // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
46
- // try {
47
- // await recaptchaManager.execute();
48
- // expect.fail('should not get here');
49
- // } catch (error) {
50
- // expect(error).to.equal('expired');
51
- // }
52
- // });
53
- // it('resets the captcha if execute() gets called more than once', async () => {
54
- // const recaptchaElement = (await fixture(html`
55
- // <div></div>
56
- // `)) as HTMLElement;
57
- // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);
58
- // const recaptchaManager = new RecaptchaManager({
59
- // grecaptchaLibrary: mockGrecaptcha,
60
- // siteKey: '123',
61
- // });
62
- // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
63
- // recaptchaManager.execute();
64
- // expect(mockGrecaptcha.resetCalled).to.be.false;
65
- // recaptchaManager.execute();
66
- // expect(mockGrecaptcha.resetCalled).to.be.true;
67
- // });
1
+ import { expect } from '@open-wc/testing';
2
+ import { MockGrecaptcha } from './mock-grecaptcha';
3
+ import { RecaptchaManager } from '../src/recaptcha-manager';
4
+ import { MockLazyLoaderService } from './mock-lazy-loader';
5
+ const mockLazyLoader = new MockLazyLoaderService();
6
+ describe('ReCaptcha Management', () => {
7
+ describe('ReCaptcha Manager', () => {
8
+ it('can return recaptchas', async () => {
9
+ const mockGrecaptcha = new MockGrecaptcha({
10
+ mode: 'success',
11
+ });
12
+ mockGrecaptcha.response = 'foo';
13
+ const recaptchaManager = new RecaptchaManager({
14
+ lazyLoader: mockLazyLoader,
15
+ grecaptchaLibrary: mockGrecaptcha,
16
+ defaultSiteKey: '123',
17
+ });
18
+ const recaptcha = await recaptchaManager.getRecaptchaWidget();
19
+ const result = await recaptcha.execute();
20
+ expect(result).to.equal('foo');
21
+ });
22
+ it('throws an error if no site key found', async () => {
23
+ const mockGrecaptcha = new MockGrecaptcha({
24
+ mode: 'success',
25
+ });
26
+ mockGrecaptcha.response = 'foo';
27
+ const recaptchaManager = new RecaptchaManager({
28
+ lazyLoader: mockLazyLoader,
29
+ grecaptchaLibrary: mockGrecaptcha,
30
+ });
31
+ try {
32
+ await recaptchaManager.getRecaptchaWidget();
33
+ expect.fail('should not get here');
34
+ }
35
+ catch (e) {
36
+ expect(e.message).to.equal('The reCaptcha widget requires a site key');
37
+ }
38
+ });
39
+ it('returns a cached version if one already exists for a given site key', async () => {
40
+ const mockGrecaptcha = new MockGrecaptcha({
41
+ mode: 'success',
42
+ });
43
+ mockGrecaptcha.response = 'foo';
44
+ const recaptchaManager = new RecaptchaManager({
45
+ lazyLoader: mockLazyLoader,
46
+ grecaptchaLibrary: mockGrecaptcha,
47
+ defaultSiteKey: '123',
48
+ });
49
+ const recaptcha1 = await recaptchaManager.getRecaptchaWidget();
50
+ const recaptcha2 = await recaptchaManager.getRecaptchaWidget();
51
+ expect(recaptcha1).to.equal(recaptcha2);
52
+ });
53
+ it('loads the recaptcha library if needed', async () => {
54
+ const recaptchaManager = new RecaptchaManager({
55
+ lazyLoader: mockLazyLoader,
56
+ defaultSiteKey: '123',
57
+ });
58
+ await recaptchaManager.getRecaptchaWidget();
59
+ const loadUrl = mockLazyLoader.loadScriptSrc;
60
+ expect(loadUrl === null || loadUrl === void 0 ? void 0 : loadUrl.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')).to.be.true;
61
+ });
62
+ });
63
+ describe('ReCaptcha Widget', () => {
64
+ it('can error properly like a Promise', async () => {
65
+ const mockGrecaptcha = new MockGrecaptcha({
66
+ mode: 'error',
67
+ });
68
+ const recaptchaManager = new RecaptchaManager({
69
+ lazyLoader: mockLazyLoader,
70
+ grecaptchaLibrary: mockGrecaptcha,
71
+ defaultSiteKey: '123',
72
+ });
73
+ const recaptcha = await recaptchaManager.getRecaptchaWidget();
74
+ try {
75
+ await recaptcha.execute();
76
+ expect.fail('should not get here');
77
+ }
78
+ catch (error) {
79
+ expect(error.message).to.equal('error');
80
+ }
81
+ });
82
+ it('can expire properly like a Promise', async () => {
83
+ const mockGrecaptcha = new MockGrecaptcha({
84
+ mode: 'expired',
85
+ });
86
+ const recaptchaManager = new RecaptchaManager({
87
+ lazyLoader: mockLazyLoader,
88
+ grecaptchaLibrary: mockGrecaptcha,
89
+ defaultSiteKey: '123',
90
+ });
91
+ const recaptcha = await recaptchaManager.getRecaptchaWidget();
92
+ try {
93
+ await recaptcha.execute();
94
+ expect.fail('should not get here');
95
+ }
96
+ catch (error) {
97
+ expect(error.message).to.equal('expired');
98
+ }
99
+ });
100
+ it('resets the captcha after execution', async () => {
101
+ const mockGrecaptcha = new MockGrecaptcha({
102
+ mode: 'success',
103
+ addDelay: true,
104
+ });
105
+ const recaptchaManager = new RecaptchaManager({
106
+ lazyLoader: mockLazyLoader,
107
+ grecaptchaLibrary: mockGrecaptcha,
108
+ defaultSiteKey: '123',
109
+ });
110
+ const recaptcha = await recaptchaManager.getRecaptchaWidget();
111
+ expect(mockGrecaptcha.resetCallCount).to.equal(0);
112
+ await recaptcha.execute();
113
+ expect(mockGrecaptcha.resetCallCount).to.equal(1);
114
+ await recaptcha.execute();
115
+ expect(mockGrecaptcha.resetCallCount).to.equal(2);
116
+ });
117
+ // there's no way to know if the user has dismissed the captcha so if another execution
118
+ // comes through while the captcha is still active, it will be reset
119
+ it('resets the captcha if another execution gets called', async () => {
120
+ const mockGrecaptcha = new MockGrecaptcha({
121
+ mode: 'success',
122
+ addDelay: true,
123
+ });
124
+ const recaptchaManager = new RecaptchaManager({
125
+ lazyLoader: mockLazyLoader,
126
+ grecaptchaLibrary: mockGrecaptcha,
127
+ defaultSiteKey: '123',
128
+ });
129
+ const recaptcha = await recaptchaManager.getRecaptchaWidget();
130
+ expect(mockGrecaptcha.resetCallCount).to.equal(0);
131
+ recaptcha.execute();
132
+ expect(mockGrecaptcha.resetCallCount).to.equal(0);
133
+ await recaptcha.execute();
134
+ expect(mockGrecaptcha.resetCallCount).to.equal(2);
135
+ });
136
+ });
68
137
  });
69
138
  //# sourceMappingURL=recaptcha-manager.test.js.map
package/dist/test/recaptcha-manager.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":";AAAA,4DAA4D;AAC5D,0EAA0E;AAC1E,+DAA+D;AAE/D,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,+DAA+D;IAC/D,kDAAkD;IAClD,kBAAkB;IAClB,wBAAwB;IACxB,2EAA2E;IAC3E,oDAAoD;IACpD,yCAAyC;IACzC,sBAAsB;IACtB,QAAQ;IACR,kEAAkE;IAClE,qDAAqD;IACrD,oCAAoC;IACpC,MAAM;IAEN,wDAAwD;IACxD,kDAAkD;IAClD,kBAAkB;IAClB,wBAAwB;IACxB,yEAAyE;IACzE,oDAAoD;IACpD,yCAAyC;IACzC,sBAAsB;IACtB,QAAQ;IACR,kEAAkE;IAClE,UAAU;IACV,wCAAwC;IACxC,0CAA0C;IAC1C,sBAAsB;IACtB,uCAAuC;IACvC,MAAM;IACN,MAAM;IAEN,yDAAyD;IACzD,kDAAkD;IAClD,kBAAkB;IAClB,wBAAwB;IACxB,2EAA2E;IAC3E,oDAAoD;IACpD,yCAAyC;IACzC,sBAAsB;IACtB,QAAQ;IACR,kEAAkE;IAClE,UAAU;IACV,wCAAwC;IACxC,0CAA0C;IAC1C,sBAAsB;IACtB,yCAAyC;IACzC,MAAM;IACN,MAAM;IAEN,iFAAiF;IACjF,kDAAkD;IAClD,kBAAkB;IAClB,wBAAwB;IACxB,iFAAiF;IACjF,oDAAoD;IACpD,yCAAyC;IACzC,sBAAsB;IACtB,QAAQ;IACR,kEAAkE;IAClE,gCAAgC;IAChC,oDAAoD;IACpD,gCAAgC;IAChC,mDAAmD;IACnD,MAAM;AACR,CAAC,CAAC,CAAC","sourcesContent":["// import { html, fixture, expect } from '@open-wc/testing';\n// import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';\n// import { RecaptchaManager } from '../src/recaptcha-manager';\n\ndescribe('ReCaptcha Manager', () => {\n // it('can execute the recaptcha like a Promise', async () => {\n // const recaptchaElement = (await fixture(html`\n // <div></div>\n // `)) as HTMLElement;\n // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);\n // const recaptchaManager = new RecaptchaManager({\n // grecaptchaLibrary: mockGrecaptcha,\n // siteKey: '123',\n // });\n // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');\n // const result = await recaptchaManager.execute();\n // expect(result).to.equal('foo');\n // });\n\n // it('can error properly like a Promise', async () => {\n // const recaptchaElement = (await fixture(html`\n // <div></div>\n // `)) as HTMLElement;\n // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);\n // const recaptchaManager = new RecaptchaManager({\n // grecaptchaLibrary: mockGrecaptcha,\n // siteKey: '123',\n // });\n // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');\n // try {\n // await recaptchaManager.execute();\n // expect.fail('should not get here');\n // } catch (error) {\n // expect(error).to.equal('error');\n // }\n // });\n\n // it('can expire properly like a Promise', async () => {\n // const recaptchaElement = (await fixture(html`\n // <div></div>\n // `)) as HTMLElement;\n // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);\n // const recaptchaManager = new RecaptchaManager({\n // grecaptchaLibrary: mockGrecaptcha,\n // siteKey: '123',\n // });\n // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');\n // try {\n // await recaptchaManager.execute();\n // expect.fail('should not get here');\n // } catch (error) {\n // expect(error).to.equal('expired');\n // }\n // });\n\n // it('resets the captcha if execute() gets called more than once', async () => {\n // const recaptchaElement = (await fixture(html`\n // <div></div>\n // `)) as HTMLElement;\n // const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);\n // const recaptchaManager = new RecaptchaManager({\n // grecaptchaLibrary: mockGrecaptcha,\n // siteKey: '123',\n // });\n // recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');\n // recaptchaManager.execute();\n // expect(mockGrecaptcha.resetCalled).to.be.false;\n // recaptchaManager.execute();\n // expect(mockGrecaptcha.resetCalled).to.be.true;\n // });\n});\n"]}
1
+ {"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { MockGrecaptcha } from './mock-grecaptcha';\nimport { RecaptchaManager } from '../src/recaptcha-manager';\nimport { MockLazyLoaderService } from './mock-lazy-loader';\n\nconst mockLazyLoader = new MockLazyLoaderService();\n\ndescribe('ReCaptcha Management', () => {\n describe('ReCaptcha Manager', () => {\n it('can return recaptchas', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'success',\n });\n mockGrecaptcha.response = 'foo';\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha = await recaptchaManager.getRecaptchaWidget();\n const result = await recaptcha.execute();\n expect(result).to.equal('foo');\n });\n\n it('throws an error if no site key found', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'success',\n });\n mockGrecaptcha.response = 'foo';\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n });\n try {\n await recaptchaManager.getRecaptchaWidget();\n expect.fail('should not get here');\n } catch (e) {\n expect((e as Error).message).to.equal(\n 'The reCaptcha widget requires a site key'\n );\n }\n });\n\n it('returns a cached version if one already exists for a given site key', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'success',\n });\n mockGrecaptcha.response = 'foo';\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha1 = await recaptchaManager.getRecaptchaWidget();\n const recaptcha2 = await recaptchaManager.getRecaptchaWidget();\n expect(recaptcha1).to.equal(recaptcha2);\n });\n\n it('loads the recaptcha library if needed', async () => {\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n defaultSiteKey: '123',\n });\n await recaptchaManager.getRecaptchaWidget();\n const loadUrl = mockLazyLoader.loadScriptSrc;\n expect(\n loadUrl?.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')\n ).to.be.true;\n });\n });\n\n describe('ReCaptcha Widget', () => {\n it('can error properly like a Promise', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'error',\n });\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha = await recaptchaManager.getRecaptchaWidget();\n\n try {\n await recaptcha.execute();\n expect.fail('should not get here');\n } catch (error) {\n expect((error as Error).message).to.equal('error');\n }\n });\n\n it('can expire properly like a Promise', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'expired',\n });\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha = await recaptchaManager.getRecaptchaWidget();\n\n try {\n await recaptcha.execute();\n expect.fail('should not get here');\n } catch (error) {\n expect((error as Error).message).to.equal('expired');\n }\n });\n\n it('resets the captcha after execution', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'success',\n addDelay: true,\n });\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha = await recaptchaManager.getRecaptchaWidget();\n\n expect(mockGrecaptcha.resetCallCount).to.equal(0);\n await recaptcha.execute();\n expect(mockGrecaptcha.resetCallCount).to.equal(1);\n await recaptcha.execute();\n expect(mockGrecaptcha.resetCallCount).to.equal(2);\n });\n\n // there's no way to know if the user has dismissed the captcha so if another execution\n // comes through while the captcha is still active, it will be reset\n it('resets the captcha if another execution gets called', async () => {\n const mockGrecaptcha = new MockGrecaptcha({\n mode: 'success',\n addDelay: true,\n });\n const recaptchaManager = new RecaptchaManager({\n lazyLoader: mockLazyLoader,\n grecaptchaLibrary: mockGrecaptcha,\n defaultSiteKey: '123',\n });\n const recaptcha = await recaptchaManager.getRecaptchaWidget();\n\n expect(mockGrecaptcha.resetCallCount).to.equal(0);\n recaptcha.execute();\n expect(mockGrecaptcha.resetCallCount).to.equal(0);\n await recaptcha.execute();\n expect(mockGrecaptcha.resetCallCount).to.equal(2);\n });\n });\n});\n"]}
package/index.ts CHANGED
@@ -6,4 +6,5 @@ export {
6
6
  export {
7
7
  RecaptchaWidget,
8
8
  RecaptchaWidgetInterface,
9
+ RecaptchaWidgetConfig,
9
10
  } from './src/recaptcha-widget';
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@internetarchive/recaptcha-manager",
3
- "description": "A library that lets you lazy load and interact with reCaptcha more easily.",
3
+ "description": "A library that lets you lazy load and interact with reCaptcha.",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/internetarchive/iaux-recaptcha-manager.git"
7
7
  },
8
8
  "license": "AGPL-3.0-only",
9
9
  "author": "Internet Archive",
10
- "version": "0.0.1-alpha.3",
10
+ "version": "0.1.1",
11
11
  "main": "dist/index.js",
12
12
  "module": "dist/index.js",
13
13
  "scripts": {
@@ -23,7 +23,7 @@
23
23
  "types": "dist/index.d.ts",
24
24
  "dependencies": {
25
25
  "@internetarchive/lazy-loader-service": "^0.2.0",
26
- "@types/grecaptcha": "^3.0.3"
26
+ "@types/grecaptcha": "^2"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@open-wc/eslint-config": "^7.0.0",
@@ -41,6 +41,7 @@
41
41
  "husky": "^7.0.0",
42
42
  "lit": "^2.2.0",
43
43
  "madge": "^5.0.1",
44
+ "nanoevents": "^6.0.2",
44
45
  "prettier": "^2.4.1",
45
46
  "sinon": "^12.0.1",
46
47
  "tslib": "^2.3.1",
package/src/recaptcha-manager.ts CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  LazyLoaderService,
3
3
  LazyLoaderServiceInterface,
4
4
  } from '@internetarchive/lazy-loader-service';
5
- import { RecaptchaWidget } from './recaptcha-widget';
5
+ import { RecaptchaWidget, RecaptchaWidgetInterface } from './recaptcha-widget';
6
6
 
7
7
  export interface RecaptchaManagerInterface {
8
8
  /**
@@ -11,7 +11,7 @@ export interface RecaptchaManagerInterface {
11
11
  getRecaptchaWidget(options?: {
12
12
  siteKey?: string;
13
13
  recaptchaParams?: ReCaptchaV2.Parameters;
14
- }): Promise<RecaptchaWidget>;
14
+ }): Promise<RecaptchaWidgetInterface>;
15
15
  }
16
16
 
17
17
  export class RecaptchaManager implements RecaptchaManagerInterface {
@@ -35,10 +35,10 @@ export class RecaptchaManager implements RecaptchaManagerInterface {
35
35
  async getRecaptchaWidget(options?: {
36
36
  siteKey?: string;
37
37
  recaptchaParams?: ReCaptchaV2.Parameters;
38
- }): Promise<RecaptchaWidget> {
38
+ }): Promise<RecaptchaWidgetInterface> {
39
39
  const key = options?.siteKey ?? this.defaultSiteKey;
40
40
  if (!key) {
41
- throw new Error('RecaptchaManager requires a site key');
41
+ throw new Error('The reCaptcha widget requires a site key');
42
42
  }
43
43
 
44
44
  const cached = this.recaptchaCache[key];
package/src/recaptcha-widget.ts CHANGED
@@ -6,6 +6,17 @@ export interface RecaptchaWidgetInterface {
6
6
  execute(): Promise<string>;
7
7
  }
8
8
 
9
+ /**
10
+ * The combines parameters from the Recaptcha config and adds the zIndex, which
11
+ * allows us to control the z-index of the recaptcha widget.
12
+ */
13
+ export type RecaptchaWidgetConfig = Pick<
14
+ ReCaptchaV2.Parameters,
15
+ 'tabindex' | 'theme' | 'type' | 'size' | 'badge'
16
+ > & {
17
+ zIndex?: number;
18
+ };
19
+
9
20
  /**
10
21
  * This encompasses a widget for a given site key.
11
22
  */
@@ -29,13 +40,13 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
29
40
  siteKey: string;
30
41
  grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
31
42
  },
32
- recaptchaParams?: ReCaptchaV2.Parameters
43
+ widgetConfig?: RecaptchaWidgetConfig
33
44
  ) {
34
45
  this.siteKey = config.siteKey;
35
46
  this.grecaptchaLibrary = config.grecaptchaLibrary;
36
47
 
37
48
  const container = this.createContainer();
38
- this.setup(container, recaptchaParams);
49
+ this.setup(container, widgetConfig);
39
50
  }
40
51
 
41
52
  /** @inheritdoc */
@@ -53,6 +64,8 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
53
64
  this.finishExecution();
54
65
  }
55
66
 
67
+ this.isExecuting = true;
68
+
56
69
  return new Promise((resolve, reject) => {
57
70
  this.executionSuccessBlock = (token: string): void => {
58
71
  this.finishExecution();
@@ -80,24 +93,24 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
80
93
  this.grecaptchaLibrary.reset(widgetId);
81
94
  }
82
95
 
83
- /** @inheritdoc */
84
96
  private setup(
85
97
  container: HTMLElement,
86
- recaptchaParams?: ReCaptchaV2.Parameters
98
+ widgetConfig?: ReCaptchaV2.Parameters
87
99
  ): void {
88
100
  this.widgetId = this.grecaptchaLibrary.render(container, {
89
101
  callback: this.responseHandler.bind(this),
90
102
  'expired-callback': this.expiredHandler.bind(this),
91
103
  'error-callback': this.errorHandler.bind(this),
92
104
  sitekey: this.siteKey,
93
- tabindex: recaptchaParams?.tabindex,
94
- theme: recaptchaParams?.theme,
95
- type: recaptchaParams?.type,
96
- size: recaptchaParams?.size ?? 'invisible',
105
+ tabindex: widgetConfig?.tabindex,
106
+ theme: widgetConfig?.theme,
107
+ type: widgetConfig?.type,
108
+ size: widgetConfig?.size ?? 'invisible',
109
+ badge: widgetConfig?.badge,
97
110
  });
98
111
  }
99
112
 
100
- private createContainer(): HTMLElement {
113
+ private createContainer(zIndex?: number): HTMLElement {
101
114
  const elementId = `recaptchaManager-${this.siteKey}`;
102
115
  let element: HTMLElement | null = document.getElementById(elementId);
103
116
  if (!element) {
@@ -106,6 +119,7 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
106
119
  element.style.position = 'fixed';
107
120
  element.style.top = '50%';
108
121
  element.style.left = '50%';
122
+ element.style.zIndex = zIndex ? `${zIndex}` : '10';
109
123
  document.body.appendChild(element);
110
124
  }
111
125
  return element;
package/test/mock-grecaptcha.ts CHANGED
@@ -1,124 +1,87 @@
1
- // /* eslint-disable camelcase */
2
- // /* eslint-disable @typescript-eslint/no-explicit-any */
3
- // /* eslint-disable @typescript-eslint/no-unused-vars */
4
-
5
- // export enum MockGrecaptchaMode {
6
- // Success,
7
- // Expired,
8
- // Error,
9
- // }
10
-
11
- // export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
12
- // renderCalled = false;
13
-
14
- // executeCalled = false;
15
-
16
- // resetCalled = false;
17
-
18
- // getResponseCalled = false;
19
-
20
- // mode: MockGrecaptchaMode;
21
-
22
- // addDelay: boolean;
23
-
24
- // callback?: (response: string) => void;
25
-
26
- // 'expired-callback'?: () => void;
27
-
28
- // 'error-callback'?: () => void;
29
-
30
- // render(
31
- // container: string | HTMLElement,
32
- // parameters?: ReCaptchaV2.Parameters | undefined,
33
- // inherit?: boolean | undefined,
34
- // ): number {
35
- // this.callback = parameters?.callback?.bind(this);
36
- // this['error-callback'] = parameters?.['error-callback']?.bind(this);
37
- // this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
38
- // this.renderCalled = true;
39
- // return 1;
40
- // }
41
-
42
- // reset(opt_widget_id?: number | undefined): void {
43
- // this.resetCalled = true;
44
- // }
45
-
46
- // getResponse(opt_widget_id?: number | undefined): string {
47
- // this.getResponseCalled = true;
48
- // return 'foo';
49
- // }
50
-
51
- // // execute(opt_widget_id?: number): void {
52
- // // this.executeCalled = true;
53
-
54
- // // if (this.addDelay) {
55
- // // setTimeout(this.callCallback, 100);
56
- // // } else {
57
- // // this.callCallback();
58
- // // }
59
- // // }
60
- // // /**
61
- // // * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.
62
- // // * @param siteKey the key of your site
63
- // // * @param action the action
64
- // // *
65
- // // * @return a promise-like object containing the token
66
- // // */
67
-
68
- // // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {
69
- // // return '';
70
- // // }
71
-
72
- // // execute(opt_widget_id?: number): void {
73
- // // this.executeCalled = true;
74
-
75
- // // if (this.addDelay) {
76
- // // setTimeout(this.callCallback, 100);
77
- // // } else {
78
- // // this.callCallback();
79
- // // }
80
- // // }
81
-
82
- // // execute(opt_widget_id?: number): void {
83
-
84
- // // }
85
-
86
- // // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {
87
- // // return '';
88
- // // }
89
-
90
- // // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {
91
-
92
- // // }
93
-
94
- // ready(callback: () => void): void {
95
-
96
- // }
97
-
98
- // private callCallback(): void {
99
- // switch (this.mode) {
100
- // case MockGrecaptchaMode.Success:
101
- // if (this.callback) {
102
- // this.callback('foo');
103
- // }
104
- // break;
105
- // case MockGrecaptchaMode.Error:
106
- // if (this['error-callback']) {
107
- // this['error-callback']();
108
- // }
109
- // break;
110
- // case MockGrecaptchaMode.Expired:
111
- // if (this['expired-callback']) {
112
- // this['expired-callback']();
113
- // }
114
- // break;
115
- // default:
116
- // break;
117
- // }
118
- // }
119
-
120
- // constructor(mode: MockGrecaptchaMode, addDelay = false) {
121
- // this.mode = mode;
122
- // this.addDelay = addDelay;
123
- // }
124
- // }
1
+ /* eslint-disable camelcase */
2
+ /* eslint-disable @typescript-eslint/no-explicit-any */
3
+ /* eslint-disable @typescript-eslint/no-unused-vars */
4
+
5
+ export type MockGrecaptchaMode = 'success' | 'expired' | 'error';
6
+
7
+ export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
8
+ response = 'foo';
9
+
10
+ renderCalled = false;
11
+
12
+ executeCalled = false;
13
+
14
+ resetCallCount = 0;
15
+
16
+ getResponseCalled = false;
17
+
18
+ mode: MockGrecaptchaMode;
19
+
20
+ addDelay: boolean;
21
+
22
+ callback?: (response: string) => void;
23
+
24
+ 'expired-callback'?: () => void;
25
+
26
+ 'error-callback'?: () => void;
27
+
28
+ render(
29
+ container: string | HTMLElement,
30
+ parameters?: ReCaptchaV2.Parameters | undefined,
31
+ inherit?: boolean | undefined
32
+ ): number {
33
+ this.callback = parameters?.callback?.bind(this);
34
+ this['error-callback'] = parameters?.['error-callback']?.bind(this);
35
+ this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
36
+ this.renderCalled = true;
37
+ return 1;
38
+ }
39
+
40
+ reset(opt_widget_id?: number | undefined): void {
41
+ this.resetCallCount += 1;
42
+ }
43
+
44
+ getResponse(opt_widget_id?: number | undefined): string {
45
+ this.getResponseCalled = true;
46
+ return 'foo';
47
+ }
48
+
49
+ execute(opt_widget_id?: number): void {
50
+ this.executeCalled = true;
51
+
52
+ if (this.addDelay) {
53
+ setTimeout(this.callCallback.bind(this), 100);
54
+ } else {
55
+ this.callCallback();
56
+ }
57
+ }
58
+
59
+ ready(callback: () => void): void {}
60
+
61
+ private callCallback(): void {
62
+ switch (this.mode) {
63
+ case 'success':
64
+ if (this.callback) {
65
+ this.callback('foo');
66
+ }
67
+ break;
68
+ case 'error':
69
+ if (this['error-callback']) {
70
+ this['error-callback']();
71
+ }
72
+ break;
73
+ case 'expired':
74
+ if (this['expired-callback']) {
75
+ this['expired-callback']();
76
+ }
77
+ break;
78
+ default:
79
+ break;
80
+ }
81
+ }
82
+
83
+ constructor(options: { mode: MockGrecaptchaMode; addDelay?: boolean }) {
84
+ this.mode = options.mode;
85
+ this.addDelay = options.addDelay ?? false;
86
+ }
87
+ }