@internetarchive/recaptcha-manager 0.0.1-alpha.3 → 0.0.1-alpha.4
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/dist/src/recaptcha-widget.d.ts +8 -2
- package/dist/src/recaptcha-widget.js +10 -9
- package/dist/src/recaptcha-widget.js.map +1 -1
- package/dist/test/recaptcha-manager.test.js.map +1 -1
- package/package.json +1 -1
- package/src/recaptcha-widget.ts +21 -9
- package/test/recaptcha-manager.test.ts +0 -3
|
@@ -6,6 +6,13 @@ export interface RecaptchaWidgetInterface {
|
|
|
6
6
|
/** execute the recaptcha request and returns a token */
|
|
7
7
|
execute(): Promise<string>;
|
|
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 declare type RecaptchaWidgetConfig = Pick<ReCaptchaV2.Parameters, 'tabindex' | 'theme' | 'type' | 'size' | 'badge'> & {
|
|
14
|
+
zIndex?: number;
|
|
15
|
+
};
|
|
9
16
|
/**
|
|
10
17
|
* This encompasses a widget for a given site key.
|
|
11
18
|
*/
|
|
@@ -20,11 +27,10 @@ export declare class RecaptchaWidget implements RecaptchaWidgetInterface {
|
|
|
20
27
|
constructor(config: {
|
|
21
28
|
siteKey: string;
|
|
22
29
|
grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
|
|
23
|
-
},
|
|
30
|
+
}, widgetConfig?: RecaptchaWidgetConfig);
|
|
24
31
|
/** @inheritdoc */
|
|
25
32
|
execute(): Promise<string>;
|
|
26
33
|
private finishExecution;
|
|
27
|
-
/** @inheritdoc */
|
|
28
34
|
private setup;
|
|
29
35
|
private createContainer;
|
|
30
36
|
private responseHandler;
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
* This encompasses a widget for a given site key.
|
|
3
3
|
*/
|
|
4
4
|
export class RecaptchaWidget {
|
|
5
|
-
constructor(config,
|
|
5
|
+
constructor(config, widgetConfig) {
|
|
6
6
|
this.widgetId = null;
|
|
7
7
|
this.isExecuting = false;
|
|
8
8
|
this.siteKey = config.siteKey;
|
|
9
9
|
this.grecaptchaLibrary = config.grecaptchaLibrary;
|
|
10
10
|
const container = this.createContainer();
|
|
11
|
-
this.setup(container,
|
|
11
|
+
this.setup(container, widgetConfig);
|
|
12
12
|
}
|
|
13
13
|
/** @inheritdoc */
|
|
14
14
|
async execute() {
|
|
@@ -45,21 +45,21 @@ export class RecaptchaWidget {
|
|
|
45
45
|
return;
|
|
46
46
|
this.grecaptchaLibrary.reset(widgetId);
|
|
47
47
|
}
|
|
48
|
-
|
|
49
|
-
setup(container, recaptchaParams) {
|
|
48
|
+
setup(container, widgetConfig) {
|
|
50
49
|
var _a;
|
|
51
50
|
this.widgetId = this.grecaptchaLibrary.render(container, {
|
|
52
51
|
callback: this.responseHandler.bind(this),
|
|
53
52
|
'expired-callback': this.expiredHandler.bind(this),
|
|
54
53
|
'error-callback': this.errorHandler.bind(this),
|
|
55
54
|
sitekey: this.siteKey,
|
|
56
|
-
tabindex:
|
|
57
|
-
theme:
|
|
58
|
-
type:
|
|
59
|
-
size: (_a =
|
|
55
|
+
tabindex: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.tabindex,
|
|
56
|
+
theme: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.theme,
|
|
57
|
+
type: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.type,
|
|
58
|
+
size: (_a = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.size) !== null && _a !== void 0 ? _a : 'invisible',
|
|
59
|
+
badge: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.badge,
|
|
60
60
|
});
|
|
61
61
|
}
|
|
62
|
-
createContainer() {
|
|
62
|
+
createContainer(zIndex) {
|
|
63
63
|
const elementId = `recaptchaManager-${this.siteKey}`;
|
|
64
64
|
let element = document.getElementById(elementId);
|
|
65
65
|
if (!element) {
|
|
@@ -68,6 +68,7 @@ export class RecaptchaWidget {
|
|
|
68
68
|
element.style.position = 'fixed';
|
|
69
69
|
element.style.top = '50%';
|
|
70
70
|
element.style.left = '50%';
|
|
71
|
+
element.style.zIndex = zIndex ? `${zIndex}` : '10';
|
|
71
72
|
document.body.appendChild(element);
|
|
72
73
|
}
|
|
73
74
|
return element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"recaptcha-widget.js","sourceRoot":"","sources":["../../src/recaptcha-widget.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"recaptcha-widget.js","sourceRoot":"","sources":["../../src/recaptcha-widget.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,MAAM,OAAO,eAAe;IAe1B,YACE,MAGC,EACD,YAAoC;QAT9B,aAAQ,GAAkB,IAAI,CAAC;QAE/B,gBAAW,GAAG,KAAK,CAAC;QAS1B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAElD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACtC,CAAC;IAED,kBAAkB;IAClB,KAAK,CAAC,OAAO;QACX,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,yEAAyE;YACzE,2EAA2E;YAC3E,qCAAqC;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;QAED,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,qBAAqB,GAAG,CAAC,KAAa,EAAQ,EAAE;gBACnD,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC;YAEF,IAAI,CAAC,qBAAqB,GAAG,GAAS,EAAE;gBACtC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,MAAM,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YAC/B,CAAC,CAAC;YAEF,IAAI,CAAC,mBAAmB,GAAG,GAAS,EAAE;gBACpC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,IAAI,QAAQ,KAAK,IAAI;YAAE,OAAO;QAC9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC;IAEO,KAAK,CACX,SAAsB,EACtB,YAAqC;;QAErC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAAS,EAAE;YACvD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YACzC,kBAAkB,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;YAClD,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAC9C,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ;YAChC,KAAK,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK;YAC1B,IAAI,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI;YACxB,IAAI,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,mCAAI,WAAW;YACvC,KAAK,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK;SAC3B,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,MAAe;QACrC,MAAM,SAAS,GAAG,oBAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;QACrD,IAAI,OAAO,GAAuB,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;YACvB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;YAC1B,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;SACpC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,eAAe,CAAC,QAAa;QACnC,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YACrC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;SACxC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;SACxC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;SACtC;IACH,CAAC;CACF","sourcesContent":["/**\n * This encompasses a widget for a given site key.\n */\nexport interface RecaptchaWidgetInterface {\n /** execute the recaptcha request and returns a token */\n execute(): Promise<string>;\n}\n\n/**\n * The combines parameters from the Recaptcha config and adds the zIndex, which\n * allows us to control the z-index of the recaptcha widget.\n */\nexport type RecaptchaWidgetConfig = Pick<\n ReCaptchaV2.Parameters,\n 'tabindex' | 'theme' | 'type' | 'size' | 'badge'\n> & {\n zIndex?: number;\n};\n\n/**\n * This encompasses a widget for a given site key.\n */\nexport class RecaptchaWidget implements RecaptchaWidgetInterface {\n private executionSuccessBlock?: (token: string) => void;\n\n private executionExpiredBlock?: () => void;\n\n private executionErrorBlock?: () => void;\n\n private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n\n private siteKey: string;\n\n private widgetId: number | null = null;\n\n private isExecuting = false;\n\n constructor(\n config: {\n siteKey: string;\n grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n },\n widgetConfig?: RecaptchaWidgetConfig\n ) {\n this.siteKey = config.siteKey;\n this.grecaptchaLibrary = config.grecaptchaLibrary;\n\n const container = this.createContainer();\n this.setup(container, widgetConfig);\n }\n\n /** @inheritdoc */\n async execute(): Promise<string> {\n const { widgetId } = this;\n\n if (widgetId === null) {\n throw new Error('Recaptcha is not setup');\n }\n\n if (this.isExecuting) {\n // there is no way to know when users have dismissed a previous recaptcha\n // so if we're still in the middle of execution when we call execute again,\n // just reset it and execute it again\n this.finishExecution();\n }\n\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(widgetId);\n });\n }\n\n private finishExecution() {\n this.isExecuting = false;\n const { widgetId } = this;\n if (widgetId === null) return;\n this.grecaptchaLibrary.reset(widgetId);\n }\n\n private setup(\n container: HTMLElement,\n widgetConfig?: ReCaptchaV2.Parameters\n ): void {\n this.widgetId = 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: widgetConfig?.tabindex,\n theme: widgetConfig?.theme,\n type: widgetConfig?.type,\n size: widgetConfig?.size ?? 'invisible',\n badge: widgetConfig?.badge,\n });\n }\n\n private createContainer(zIndex?: number): 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.zIndex = zIndex ? `${zIndex}` : '10';\n document.body.appendChild(element);\n }\n return element;\n }\n\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"]}
|
|
@@ -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;
|
|
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;IACN,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;IACN,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;IACN,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 // 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 // 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 // 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"]}
|
package/package.json
CHANGED
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
|
-
|
|
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,
|
|
49
|
+
this.setup(container, widgetConfig);
|
|
39
50
|
}
|
|
40
51
|
|
|
41
52
|
/** @inheritdoc */
|
|
@@ -80,24 +91,24 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
|
|
|
80
91
|
this.grecaptchaLibrary.reset(widgetId);
|
|
81
92
|
}
|
|
82
93
|
|
|
83
|
-
/** @inheritdoc */
|
|
84
94
|
private setup(
|
|
85
95
|
container: HTMLElement,
|
|
86
|
-
|
|
96
|
+
widgetConfig?: ReCaptchaV2.Parameters
|
|
87
97
|
): void {
|
|
88
98
|
this.widgetId = this.grecaptchaLibrary.render(container, {
|
|
89
99
|
callback: this.responseHandler.bind(this),
|
|
90
100
|
'expired-callback': this.expiredHandler.bind(this),
|
|
91
101
|
'error-callback': this.errorHandler.bind(this),
|
|
92
102
|
sitekey: this.siteKey,
|
|
93
|
-
tabindex:
|
|
94
|
-
theme:
|
|
95
|
-
type:
|
|
96
|
-
size:
|
|
103
|
+
tabindex: widgetConfig?.tabindex,
|
|
104
|
+
theme: widgetConfig?.theme,
|
|
105
|
+
type: widgetConfig?.type,
|
|
106
|
+
size: widgetConfig?.size ?? 'invisible',
|
|
107
|
+
badge: widgetConfig?.badge,
|
|
97
108
|
});
|
|
98
109
|
}
|
|
99
110
|
|
|
100
|
-
private createContainer(): HTMLElement {
|
|
111
|
+
private createContainer(zIndex?: number): HTMLElement {
|
|
101
112
|
const elementId = `recaptchaManager-${this.siteKey}`;
|
|
102
113
|
let element: HTMLElement | null = document.getElementById(elementId);
|
|
103
114
|
if (!element) {
|
|
@@ -106,6 +117,7 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
|
|
|
106
117
|
element.style.position = 'fixed';
|
|
107
118
|
element.style.top = '50%';
|
|
108
119
|
element.style.left = '50%';
|
|
120
|
+
element.style.zIndex = zIndex ? `${zIndex}` : '10';
|
|
109
121
|
document.body.appendChild(element);
|
|
110
122
|
}
|
|
111
123
|
return element;
|
|
@@ -16,7 +16,6 @@ describe('ReCaptcha Manager', () => {
|
|
|
16
16
|
// const result = await recaptchaManager.execute();
|
|
17
17
|
// expect(result).to.equal('foo');
|
|
18
18
|
// });
|
|
19
|
-
|
|
20
19
|
// it('can error properly like a Promise', async () => {
|
|
21
20
|
// const recaptchaElement = (await fixture(html`
|
|
22
21
|
// <div></div>
|
|
@@ -34,7 +33,6 @@ describe('ReCaptcha Manager', () => {
|
|
|
34
33
|
// expect(error).to.equal('error');
|
|
35
34
|
// }
|
|
36
35
|
// });
|
|
37
|
-
|
|
38
36
|
// it('can expire properly like a Promise', async () => {
|
|
39
37
|
// const recaptchaElement = (await fixture(html`
|
|
40
38
|
// <div></div>
|
|
@@ -52,7 +50,6 @@ describe('ReCaptcha Manager', () => {
|
|
|
52
50
|
// expect(error).to.equal('expired');
|
|
53
51
|
// }
|
|
54
52
|
// });
|
|
55
|
-
|
|
56
53
|
// it('resets the captcha if execute() gets called more than once', async () => {
|
|
57
54
|
// const recaptchaElement = (await fixture(html`
|
|
58
55
|
// <div></div>
|