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

package/dist/src/recaptcha.js

@@ -0,0 +1,87 @@
+/**
+ * This encompasses a widget for a given site key.
+ */
+export class RecaptchaWidget {
+    constructor(config, recaptchaParams) {
+        this.widgetId = null;
+        this.siteKey = config.siteKey;
+        this.grecaptchaLibrary = config.grecaptchaLibrary;
+        const container = this.createContainer();
+        this.setup(container, recaptchaParams);
+    }
+    /** @inheritdoc */
+    async execute() {
+        const { widgetId } = this;
+        if (widgetId === null) {
+            throw new Error('Recaptcha is not setup');
+        }
+        // there is no way to know when users have dismissed a previous recaptcha
+        // so if we're still in the middle of execution when we call execute again,
+        // just reset it and execute it again
+        this.grecaptchaLibrary.reset(widgetId);
+        return new Promise((resolve, reject) => {
+            this.executionSuccessBlock = (token) => {
+                this.grecaptchaLibrary.reset(widgetId);
+                resolve(token);
+            };
+            this.executionExpiredBlock = () => {
+                this.grecaptchaLibrary.reset(widgetId);
+                reject(new Error('expired'));
+            };
+            this.executionErrorBlock = () => {
+                this.grecaptchaLibrary.reset(widgetId);
+                reject(new Error('error'));
+            };
+            this.grecaptchaLibrary.execute(widgetId);
+        });
+    }
+    /** @inheritdoc */
+    setup(container, recaptchaParams) {
+        var _a;
+        this.widgetId = this.grecaptchaLibrary.render(container, {
+            callback: this.responseHandler.bind(this),
+            'expired-callback': this.expiredHandler.bind(this),
+            'error-callback': this.errorHandler.bind(this),
+            sitekey: this.siteKey,
+            tabindex: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.tabindex,
+            theme: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.theme,
+            type: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.type,
+            size: (_a = recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.size) !== null && _a !== void 0 ? _a : 'invisible',
+        });
+    }
+    createContainer() {
+        const elementId = `recaptchaManager-${this.siteKey}`;
+        let element = document.getElementById(elementId);
+        if (!element) {
+            element = document.createElement('div');
+            element.id = elementId;
+            element.style.position = 'fixed';
+            element.style.top = '50%';
+            element.style.left = '50%';
+            element.style.outline = '1px solid purple';
+            element.style.width = '10px';
+            element.style.height = '10px';
+            document.body.appendChild(element);
+        }
+        return element;
+    }
+    responseHandler(response) {
+        if (this.executionSuccessBlock) {
+            this.executionSuccessBlock(response);
+            this.executionSuccessBlock = undefined;
+        }
+    }
+    expiredHandler() {
+        if (this.executionExpiredBlock) {
+            this.executionExpiredBlock();
+            this.executionExpiredBlock = undefined;
+        }
+    }
+    errorHandler() {
+        if (this.executionErrorBlock) {
+            this.executionErrorBlock();
+            this.executionErrorBlock = undefined;
+        }
+    }
+}
+//# sourceMappingURL=recaptcha.js.map

package/dist/src/recaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recaptcha.js","sourceRoot":"","sources":["../../src/recaptcha.ts"],"names":[],"mappings":"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","sourcesContent":["export interface RecaptchaWidgetInterface {\n  /** execute the recaptcha request and returns a token */\n  execute(): Promise<string>;\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  constructor(\n    config: {\n      siteKey: string;\n      grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n    },\n    recaptchaParams?: ReCaptchaV2.Parameters\n  ) {\n    this.siteKey = config.siteKey;\n    this.grecaptchaLibrary = config.grecaptchaLibrary;\n\n    const container = this.createContainer();\n    this.setup(container, recaptchaParams);\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    // 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.grecaptchaLibrary.reset(widgetId);\n\n    return new Promise((resolve, reject) => {\n      this.executionSuccessBlock = (token: string): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        resolve(token);\n      };\n\n      this.executionExpiredBlock = (): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        reject(new Error('expired'));\n      };\n\n      this.executionErrorBlock = (): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        reject(new Error('error'));\n      };\n\n      this.grecaptchaLibrary.execute(widgetId);\n    });\n  }\n\n  /** @inheritdoc */\n  private setup(\n    container: HTMLElement,\n    recaptchaParams?: 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: recaptchaParams?.tabindex,\n      theme: recaptchaParams?.theme,\n      type: recaptchaParams?.type,\n      size: recaptchaParams?.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      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"]}

package/dist/test/mock-grecaptcha.js

@@ -0,0 +1,99 @@
+"use strict";
+// /* eslint-disable camelcase */
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// /* eslint-disable @typescript-eslint/no-unused-vars */
+// export enum MockGrecaptchaMode {
+//   Success,
+//   Expired,
+//   Error,
+// }
+// export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
+//   renderCalled = false;
+//   executeCalled = false;
+//   resetCalled = false;
+//   getResponseCalled = false;
+//   mode: MockGrecaptchaMode;
+//   addDelay: boolean;
+//   callback?: (response: string) => void;
+//   'expired-callback'?: () => void;
+//   'error-callback'?: () => void;
+//   render(
+//     container: string | HTMLElement,
+//     parameters?: ReCaptchaV2.Parameters | undefined,
+//     inherit?: boolean | undefined,
+//   ): number {
+//     this.callback = parameters?.callback?.bind(this);
+//     this['error-callback'] = parameters?.['error-callback']?.bind(this);
+//     this['expired-callback'] = parameters?.['expired-callback']?.bind(this);
+//     this.renderCalled = true;
+//     return 1;
+//   }
+//   reset(opt_widget_id?: number | undefined): void {
+//     this.resetCalled = true;
+//   }
+//   getResponse(opt_widget_id?: number | undefined): string {
+//     this.getResponseCalled = true;
+//     return 'foo';
+//   }
+//   // execute(opt_widget_id?: number): void {
+//   //   this.executeCalled = true;
+//   //   if (this.addDelay) {
+//   //     setTimeout(this.callCallback, 100);
+//   //   } else {
+//   //     this.callCallback();
+//   //   }
+//   // }
+//   // /**
+//   //  * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.
+//   //  * @param siteKey the key of your site
+//   //  * @param action the action
+//   //  *
+//   //  * @return a promise-like object containing the token
+//   //  */
+//   // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {
+//   //   return '';
+//   // }
+//   // execute(opt_widget_id?: number): void {
+//   //   this.executeCalled = true;
+//   //   if (this.addDelay) {
+//   //     setTimeout(this.callCallback, 100);
+//   //   } else {
+//   //     this.callCallback();
+//   //   }
+//   // }
+//   // execute(opt_widget_id?: number): void {
+//   // }
+//   // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {
+//   //   return '';
+//   // }
+//   // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {
+//   // }
+//   ready(callback: () => void): void {
+//   }
+//   private callCallback(): void {
+//     switch (this.mode) {
+//       case MockGrecaptchaMode.Success:
+//         if (this.callback) {
+//           this.callback('foo');
+//         }
+//         break;
+//       case MockGrecaptchaMode.Error:
+//         if (this['error-callback']) {
+//           this['error-callback']();
+//         }
+//         break;
+//       case MockGrecaptchaMode.Expired:
+//         if (this['expired-callback']) {
+//           this['expired-callback']();
+//         }
+//         break;
+//       default:
+//         break;
+//     }
+//   }
+//   constructor(mode: MockGrecaptchaMode, addDelay = false) {
+//     this.mode = mode;
+//     this.addDelay = addDelay;
+//   }
+// }
+//# sourceMappingURL=mock-grecaptcha.js.map

package/dist/test/mock-grecaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-grecaptcha.js","sourceRoot":"","sources":["../../test/mock-grecaptcha.ts"],"names":[],"mappings":";AAAA,iCAAiC;AACjC,0DAA0D;AAC1D,yDAAyD;AAEzD,mCAAmC;AACnC,aAAa;AACb,aAAa;AACb,WAAW;AACX,IAAI;AAEJ,iEAAiE;AACjE,0BAA0B;AAE1B,2BAA2B;AAE3B,yBAAyB;AAEzB,+BAA+B;AAE/B,8BAA8B;AAE9B,uBAAuB;AAEvB,2CAA2C;AAE3C,qCAAqC;AAErC,mCAAmC;AAEnC,YAAY;AACZ,uCAAuC;AACvC,uDAAuD;AACvD,qCAAqC;AACrC,gBAAgB;AAChB,wDAAwD;AACxD,2EAA2E;AAC3E,+EAA+E;AAC/E,gCAAgC;AAChC,gBAAgB;AAChB,MAAM;AAEN,sDAAsD;AACtD,+BAA+B;AAC/B,MAAM;AAEN,8DAA8D;AAC9D,qCAAqC;AACrC,oBAAoB;AACpB,MAAM;AAEN,+CAA+C;AAC/C,oCAAoC;AAEpC,8BAA8B;AAC9B,+CAA+C;AAC/C,kBAAkB;AAClB,gCAAgC;AAChC,WAAW;AACX,SAAS;AACT,WAAW;AACX,uHAAuH;AACvH,8CAA8C;AAC9C,mCAAmC;AACnC,UAAU;AACV,6DAA6D;AAC7D,WAAW;AAEX,qFAAqF;AACrF,oBAAoB;AACpB,SAAS;AAET,+CAA+C;AAC/C,oCAAoC;AAEpC,8BAA8B;AAC9B,+CAA+C;AAC/C,kBAAkB;AAClB,gCAAgC;AAChC,WAAW;AACX,SAAS;AAET,+CAA+C;AAE/C,SAAS;AAET,yFAAyF;AACzF,oBAAoB;AACpB,SAAS;AAET,gFAAgF;AAEhF,SAAS;AAET,wCAAwC;AAExC,MAAM;AAEN,mCAAmC;AACnC,2BAA2B;AAC3B,yCAAyC;AACzC,+BAA+B;AAC/B,kCAAkC;AAClC,YAAY;AACZ,iBAAiB;AACjB,uCAAuC;AACvC,wCAAwC;AACxC,sCAAsC;AACtC,YAAY;AACZ,iBAAiB;AACjB,yCAAyC;AACzC,0CAA0C;AAC1C,wCAAwC;AACxC,YAAY;AACZ,iBAAiB;AACjB,iBAAiB;AACjB,iBAAiB;AACjB,QAAQ;AACR,MAAM;AAEN,8DAA8D;AAC9D,wBAAwB;AACxB,gCAAgC;AAChC,MAAM;AACN,IAAI","sourcesContent":["// /* eslint-disable camelcase */\n// /* eslint-disable @typescript-eslint/no-explicit-any */\n// /* eslint-disable @typescript-eslint/no-unused-vars */\n\n// export enum MockGrecaptchaMode {\n//   Success,\n//   Expired,\n//   Error,\n// }\n\n// export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {\n//   renderCalled = false;\n\n//   executeCalled = false;\n\n//   resetCalled = false;\n\n//   getResponseCalled = false;\n\n//   mode: MockGrecaptchaMode;\n\n//   addDelay: boolean;\n\n//   callback?: (response: string) => void;\n\n//   'expired-callback'?: () => void;\n\n//   'error-callback'?: () => void;\n\n//   render(\n//     container: string | HTMLElement,\n//     parameters?: ReCaptchaV2.Parameters | undefined,\n//     inherit?: boolean | undefined,\n//   ): number {\n//     this.callback = parameters?.callback?.bind(this);\n//     this['error-callback'] = parameters?.['error-callback']?.bind(this);\n//     this['expired-callback'] = parameters?.['expired-callback']?.bind(this);\n//     this.renderCalled = true;\n//     return 1;\n//   }\n\n//   reset(opt_widget_id?: number | undefined): void {\n//     this.resetCalled = true;\n//   }\n\n//   getResponse(opt_widget_id?: number | undefined): string {\n//     this.getResponseCalled = true;\n//     return 'foo';\n//   }\n\n//   // execute(opt_widget_id?: number): void {\n//   //   this.executeCalled = true;\n\n//   //   if (this.addDelay) {\n//   //     setTimeout(this.callCallback, 100);\n//   //   } else {\n//   //     this.callCallback();\n//   //   }\n//   // }\n//   // /**\n//   //  * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.\n//   //  * @param siteKey the key of your site\n//   //  * @param action the action\n//   //  *\n//   //  * @return a promise-like object containing the token\n//   //  */\n\n//   // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {\n//   //   return '';\n//   // }\n\n//   // execute(opt_widget_id?: number): void {\n//   //   this.executeCalled = true;\n\n//   //   if (this.addDelay) {\n//   //     setTimeout(this.callCallback, 100);\n//   //   } else {\n//   //     this.callCallback();\n//   //   }\n//   // }\n\n//   // execute(opt_widget_id?: number): void {\n\n//   // }\n\n//   // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {\n//   //   return '';\n//   // }\n\n//   // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {\n\n//   // }\n\n//   ready(callback: () => void): void {\n\n//   }\n\n//   private callCallback(): void {\n//     switch (this.mode) {\n//       case MockGrecaptchaMode.Success:\n//         if (this.callback) {\n//           this.callback('foo');\n//         }\n//         break;\n//       case MockGrecaptchaMode.Error:\n//         if (this['error-callback']) {\n//           this['error-callback']();\n//         }\n//         break;\n//       case MockGrecaptchaMode.Expired:\n//         if (this['expired-callback']) {\n//           this['expired-callback']();\n//         }\n//         break;\n//       default:\n//         break;\n//     }\n//   }\n\n//   constructor(mode: MockGrecaptchaMode, addDelay = false) {\n//     this.mode = mode;\n//     this.addDelay = addDelay;\n//   }\n// }\n"]}

package/dist/test/recaptcha-manager.test.js

@@ -1,4 +1,69 @@
 "use strict";
-describe('YourWebComponent', () => {
+// import { html, fixture, expect } from '@open-wc/testing';
+// import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';
+// import { RecaptchaManager } from '../src/recaptcha-manager';
+describe('ReCaptcha Manager', () => {
+    // it('can execute the recaptcha like a Promise', async () => {
+    //   const recaptchaElement = (await fixture(html`
+    //     <div></div>
+    //   `)) as HTMLElement;
+    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);
+    //   const recaptchaManager = new RecaptchaManager({
+    //     grecaptchaLibrary: mockGrecaptcha,
+    //     siteKey: '123',
+    //   });
+    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+    //   const result = await recaptchaManager.execute();
+    //   expect(result).to.equal('foo');
+    // });
+    // it('can error properly like a Promise', async () => {
+    //   const recaptchaElement = (await fixture(html`
+    //     <div></div>
+    //   `)) as HTMLElement;
+    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);
+    //   const recaptchaManager = new RecaptchaManager({
+    //     grecaptchaLibrary: mockGrecaptcha,
+    //     siteKey: '123',
+    //   });
+    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+    //   try {
+    //     await recaptchaManager.execute();
+    //     expect.fail('should not get here');
+    //   } catch (error) {
+    //     expect(error).to.equal('error');
+    //   }
+    // });
+    // it('can expire properly like a Promise', async () => {
+    //   const recaptchaElement = (await fixture(html`
+    //     <div></div>
+    //   `)) as HTMLElement;
+    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);
+    //   const recaptchaManager = new RecaptchaManager({
+    //     grecaptchaLibrary: mockGrecaptcha,
+    //     siteKey: '123',
+    //   });
+    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+    //   try {
+    //     await recaptchaManager.execute();
+    //     expect.fail('should not get here');
+    //   } catch (error) {
+    //     expect(error).to.equal('expired');
+    //   }
+    // });
+    // it('resets the captcha if execute() gets called more than once', async () => {
+    //   const recaptchaElement = (await fixture(html`
+    //     <div></div>
+    //   `)) as HTMLElement;
+    //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);
+    //   const recaptchaManager = new RecaptchaManager({
+    //     grecaptchaLibrary: mockGrecaptcha,
+    //     siteKey: '123',
+    //   });
+    //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+    //   recaptchaManager.execute();
+    //   expect(mockGrecaptcha.resetCalled).to.be.false;
+    //   recaptchaManager.execute();
+    //   expect(mockGrecaptcha.resetCalled).to.be.true;
+    // });
 });
 //# sourceMappingURL=recaptcha-manager.test.js.map

package/dist/test/recaptcha-manager.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;AAElC,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {\n\n});\n"]}
+{"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/index.ts

@@ -1 +1,9 @@
-export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';
+export {
+  RecaptchaManager,
+  RecaptchaManagerInterface,
+} from './src/recaptcha-manager';
+
+export {
+  RecaptchaWidget,
+  RecaptchaWidgetInterface,
+} from './src/recaptcha-widget';

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/recaptcha-manager.ts

@@ -2,173 +2,86 @@ import {
   LazyLoaderService,
   LazyLoaderServiceInterface,
 } from '@internetarchive/lazy-loader-service';
+import { RecaptchaWidget } from './recaptcha-widget';
 
 export interface RecaptchaManagerInterface {
-  execute(): Promise<string>;
-  setup(
-    container: HTMLElement,
-    tabIndex: number,
-    theme: ReCaptchaV2.Theme,
-    type: ReCaptchaV2.Type
-  ): void;
+  /**
+   * Load a recaptcha widget for a given site key or the default site key.
+   */
+  getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidget>;
 }
 
 export class RecaptchaManager implements RecaptchaManagerInterface {
-  /**
-   * This is a convenience initializer that also lazily loads
-   * the recaptcha library from Google.
-   *
-   * @param options
-   * @returns
-   */
-  static async getRecaptchaManager(options: {
-    siteKey: string;
-  }): Promise<RecaptchaManagerInterface> {
-    const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary();
-    return new RecaptchaManager({
-      grecaptchaLibrary,
-      siteKey: options.siteKey,
-    });
+  private lazyLoader: LazyLoaderServiceInterface;
+
+  private defaultSiteKey?: string;
+
+  private recaptchaCache: Record<string, RecaptchaWidget> = {};
+
+  constructor(options?: {
+    defaultSiteKey?: string;
+    lazyLoader?: LazyLoaderServiceInterface;
+    grecaptchaLibrary?: ReCaptchaV2.ReCaptcha; // allows dependency injection or will be lazy loaded
+  }) {
+    this.defaultSiteKey = options?.defaultSiteKey;
+    this.lazyLoader = options?.lazyLoader ?? new LazyLoaderService();
+    this.grecaptchaLibraryCache = options?.grecaptchaLibrary;
+  }
+
+  /** @inheritdoc */
+  async getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidget> {
+    const key = options?.siteKey ?? this.defaultSiteKey;
+    if (!key) {
+      throw new Error('RecaptchaManager requires a site key');
+    }
+
+    const cached = this.recaptchaCache[key];
+    if (cached) return cached;
+
+    const grecaptchaLibrary = await this.getRecaptchaLibrary();
+    const recaptcha = new RecaptchaWidget(
+      {
+        siteKey: key,
+        grecaptchaLibrary,
+      },
+      options?.recaptchaParams
+    );
+
+    this.recaptchaCache[key] = recaptcha;
+    return recaptcha;
   }
 
   /**
    * Load the Recaptch library from Google.
    *
-   * @param options
-   * @returns
+   * @returns Promise<ReCaptchaV2.ReCaptcha>
    */
-  static async loadRecaptchaLibrary(options?: {
-    lazyLoader?: LazyLoaderServiceInterface;
-  }): Promise<ReCaptchaV2.ReCaptcha> {
-    const service = options?.lazyLoader ?? new LazyLoaderService();
-
+  private async getRecaptchaLibrary(): Promise<ReCaptchaV2.ReCaptcha> {
+    if (this.grecaptchaLibraryCache) {
+      return this.grecaptchaLibraryCache;
+    }
     return new Promise(resolve => {
       (window as any).grecaptchaLoadedCallback = (): void => {
         setTimeout(() => {
           // remove the callback when we're done with it
           delete (window as any).grecaptchaLoadedCallback;
         }, 10);
+        this.grecaptchaLibraryCache = window.grecaptcha;
         resolve(window.grecaptcha);
       };
 
-      service.loadScript({
+      this.lazyLoader.loadScript({
         src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
       });
     });
   }
 
-  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
-
-  private siteKey: string;
-
-  constructor(options: {
-    grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
-    siteKey: string;
-  }) {
-    this.grecaptchaLibrary = options.grecaptchaLibrary;
-    this.siteKey = options.siteKey;
-  }
-
-  private executionSuccessBlock?: (token: string) => void;
-
-  private executionExpiredBlock?: () => void;
-
-  private executionErrorBlock?: () => void;
-
-  private isExecuting = false;
-
-  /**
-   * Execute Recaptcha and return a Promise containing the response token.
-   *
-   * This is an interesting flow.. we call `execute()` here, but have to wait for the
-   * response and expiration handlers that we bind during the inital `setup` call.
-   * For consumers, we want to be able to just call `execute()` and wait for a response.
-   * To allow this, we assign two callbacks:
-   * - `executionSuccessBlock`
-   * - `executionExpiredBlock`
-   *
-   * We then call those callbacks from inside `responseHandler` and `expiredHandler` to
-   * either resolve or reject the Promise.
-   *
-   * ie:
-   *
-   * try {
-   *   const recaptchaResult = await recaptchaManager.execute();
-   *   console.log('recaptcha token:', recaptchaResult);
-   * } catch {
-   *   console.error('something happened')
-   * }
-   *
-   * @returns {Promise<string>}
-   * @memberof RecaptchaManager
-   */
-  execute(): Promise<string> {
-    if (this.isExecuting) {
-      this.finishExecution();
-    }
-    this.isExecuting = true;
-    return new Promise((resolve, reject) => {
-      this.executionSuccessBlock = (token: string): void => {
-        this.finishExecution();
-        resolve(token);
-      };
-
-      this.executionExpiredBlock = (): void => {
-        this.finishExecution();
-        reject(new Error('expired'));
-      };
-
-      this.executionErrorBlock = (): void => {
-        this.finishExecution();
-        reject(new Error('error'));
-      };
-
-      this.grecaptchaLibrary.execute();
-    });
-  }
-
-  private finishExecution(): void {
-    this.isExecuting = false;
-    this.grecaptchaLibrary.reset();
-  }
-
-  setup(
-    container: HTMLElement,
-    tabIndex: number,
-    theme: ReCaptchaV2.Theme,
-    type: ReCaptchaV2.Type
-  ): void {
-    this.grecaptchaLibrary.render(container, {
-      callback: this.responseHandler.bind(this),
-      'expired-callback': this.expiredHandler.bind(this),
-      'error-callback': this.errorHandler.bind(this),
-      sitekey: this.siteKey,
-      tabindex: tabIndex,
-      theme,
-      type,
-      size: 'invisible',
-    });
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private responseHandler(response: any): void {
-    if (this.executionSuccessBlock) {
-      this.executionSuccessBlock(response);
-      this.executionSuccessBlock = undefined;
-    }
-  }
-
-  private expiredHandler(): void {
-    if (this.executionExpiredBlock) {
-      this.executionExpiredBlock();
-      this.executionExpiredBlock = undefined;
-    }
-  }
-
-  private errorHandler(): void {
-    if (this.executionErrorBlock) {
-      this.executionErrorBlock();
-      this.executionErrorBlock = undefined;
-    }
-  }
+  /** don't use directly, use `getRecaptchaLibrary()` */
+  private grecaptchaLibraryCache?: ReCaptchaV2.ReCaptcha;
 }