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

package/README.md

@@ -2,7 +2,36 @@
 
 # Internet Archive reCaptcha Manager
 
-A library to lazy load and more easily interact with reCaptcha
+A library to lazy load and interact with reCaptcha
+
+## Installation
+
+```shell
+> yarn add @internetarchive/recaptcha-manager
+```
+
+## Usage
+
+```ts
+const recaptchaManager = new RecaptchaManager({
+  defaultSiteKey: 'your-site-key',
+});
+
+// will load recaptcha library if it's not loaded
+const recaptchaWidget = await recaptchaManager.getRecaptchaWidget({
+  recaptchaParams: {
+    tabindex: 0,
+    theme: 'light',
+    type: 'image',
+  },
+});
+
+const token = await recaptchaWidget.execute();
+
+// submit token with your post and validate on the backend
+```
+
+For more usage examples, see `demo/app-root.ts` and `test/recaptcha-manager.test.ts`.
 
 ## Local Demo with `web-dev-server`
 ```bash

package/demo/app-root.ts

@@ -13,7 +13,7 @@ export class AppRoot extends LitElement {
   @state() result2?: string;
 
   private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
-    defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+    defaultSiteKey: '<your-site-key>',
   });
 
   private recaptcha1?: RecaptchaWidget;
@@ -68,7 +68,7 @@ export class AppRoot extends LitElement {
 
   private async loadRecaptcha2() {
     this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({
-      siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
+      siteKey: '<your-site-key>',
     });
   }
 

package/dist/demo/app-root.js

@@ -6,7 +6,7 @@ let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
         this.recaptchaManager = new RecaptchaManager({
-            defaultSiteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+            defaultSiteKey: '<your-site-key>',
         });
     }
     render() {
@@ -54,7 +54,7 @@ let AppRoot = class AppRoot extends LitElement {
     async loadRecaptcha2() {
         var _a;
         this.recaptcha2 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
-            siteKey: '6LfDgOgeAAAAAEIzkbGeW4N_yQoN3PxhUYdkxbS6',
+            siteKey: '<your-site-key>',
         }));
     }
     async executeRecaptcha2() {

package/dist/demo/app-root.js.map

@@ -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;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"]}
+{"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,iBAAiB;SAClC,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,iBAAiB;SAC3B,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: '<your-site-key>',\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: '<your-site-key>',\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

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

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,GAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,eAAe,GAGhB,MAAM,wBAAwB,CAAC","sourcesContent":["export {\n  RecaptchaManager,\n  RecaptchaManagerInterface,\n} from './src/recaptcha-manager';\n\nexport {\n  RecaptchaWidget,\n  RecaptchaWidgetInterface,\n  RecaptchaWidgetConfig,\n} from './src/recaptcha-widget';\n"]}

package/dist/src/recaptcha-manager.d.ts

@@ -14,8 +14,8 @@ export declare class RecaptchaManager implements RecaptchaManagerInterface {
     private lazyLoader;
     private defaultSiteKey?;
     private recaptchaCache;
-    constructor(options: {
-        defaultSiteKey: string;
+    constructor(options?: {
+        defaultSiteKey?: string;
         lazyLoader?: LazyLoaderServiceInterface;
         grecaptchaLibrary?: ReCaptchaV2.ReCaptcha;
     });

package/dist/src/recaptcha-manager.js

@@ -4,16 +4,16 @@ export class RecaptchaManager {
     constructor(options) {
         var _a;
         this.recaptchaCache = {};
-        this.defaultSiteKey = options.defaultSiteKey;
-        this.lazyLoader = (_a = options.lazyLoader) !== null && _a !== void 0 ? _a : new LazyLoaderService();
-        this.grecaptchaLibraryCache = options.grecaptchaLibrary;
+        this.defaultSiteKey = options === null || options === void 0 ? void 0 : options.defaultSiteKey;
+        this.lazyLoader = (_a = options === null || options === void 0 ? void 0 : options.lazyLoader) !== null && _a !== void 0 ? _a : new LazyLoaderService();
+        this.grecaptchaLibraryCache = options === null || options === void 0 ? void 0 : options.grecaptchaLibrary;
     }
     /** @inheritdoc */
     async getRecaptchaWidget(options) {
         var _a;
         const key = (_a = options === null || options === void 0 ? void 0 : options.siteKey) !== null && _a !== void 0 ? _a : this.defaultSiteKey;
         if (!key) {
-            throw new Error('RecaptchaManager requires a site key');
+            throw new Error('The reCaptcha widget requires a site key');
         }
         const cached = this.recaptchaCache[key];
         if (cached)

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

@@ -1 +1 @@
-{"version":3,"file":"recaptcha-manager.js","sourceRoot":"","sources":["../../src/recaptcha-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAElB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAYrD,MAAM,OAAO,gBAAgB;IAO3B,YAAY,OAIX;;QANO,mBAAc,GAAoC,EAAE,CAAC;QAO3D,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,MAAA,OAAO,CAAC,UAAU,mCAAI,IAAI,iBAAiB,EAAE,CAAC;QAChE,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC,iBAAiB,CAAC;IAC1D,CAAC;IAED,kBAAkB;IAClB,KAAK,CAAC,kBAAkB,CAAC,OAGxB;;QACC,MAAM,GAAG,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,mCAAI,IAAI,CAAC,cAAc,CAAC;QACpD,IAAI,CAAC,GAAG,EAAE;YACR,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACxC,IAAI,MAAM;YAAE,OAAO,MAAM,CAAC;QAE1B,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3D,MAAM,SAAS,GAAG,IAAI,eAAe,CACnC;YACE,OAAO,EAAE,GAAG;YACZ,iBAAiB;SAClB,EACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CACzB,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,mBAAmB;QAC/B,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACpC;QACD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,MAAc,CAAC,wBAAwB,GAAG,GAAS,EAAE;gBACpD,UAAU,CAAC,GAAG,EAAE;oBACd,8CAA8C;oBAC9C,OAAQ,MAAc,CAAC,wBAAwB,CAAC;gBAClD,CAAC,EAAE,EAAE,CAAC,CAAC;gBACP,IAAI,CAAC,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC;gBAChD,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEF,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;gBACzB,GAAG,EAAE,yFAAyF;aAC/F,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;CAIF","sourcesContent":["import {\n  LazyLoaderService,\n  LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport { RecaptchaWidget } from './recaptcha-widget';\n\nexport interface RecaptchaManagerInterface {\n  /**\n   * Load a recaptcha widget for a given site key or the default site key.\n   */\n  getRecaptchaWidget(options?: {\n    siteKey?: string;\n    recaptchaParams?: ReCaptchaV2.Parameters;\n  }): Promise<RecaptchaWidget>;\n}\n\nexport class RecaptchaManager implements RecaptchaManagerInterface {\n  private lazyLoader: LazyLoaderServiceInterface;\n\n  private defaultSiteKey?: string;\n\n  private recaptchaCache: Record<string, RecaptchaWidget> = {};\n\n  constructor(options: {\n    defaultSiteKey: string;\n    lazyLoader?: LazyLoaderServiceInterface;\n    grecaptchaLibrary?: ReCaptchaV2.ReCaptcha; // allows dependency injection or will be lazy loaded\n  }) {\n    this.defaultSiteKey = options.defaultSiteKey;\n    this.lazyLoader = options.lazyLoader ?? new LazyLoaderService();\n    this.grecaptchaLibraryCache = options.grecaptchaLibrary;\n  }\n\n  /** @inheritdoc */\n  async getRecaptchaWidget(options?: {\n    siteKey?: string;\n    recaptchaParams?: ReCaptchaV2.Parameters;\n  }): Promise<RecaptchaWidget> {\n    const key = options?.siteKey ?? this.defaultSiteKey;\n    if (!key) {\n      throw new Error('RecaptchaManager requires a site key');\n    }\n\n    const cached = this.recaptchaCache[key];\n    if (cached) return cached;\n\n    const grecaptchaLibrary = await this.getRecaptchaLibrary();\n    const recaptcha = new RecaptchaWidget(\n      {\n        siteKey: key,\n        grecaptchaLibrary,\n      },\n      options?.recaptchaParams\n    );\n\n    this.recaptchaCache[key] = recaptcha;\n    return recaptcha;\n  }\n\n  /**\n   * Load the Recaptch library from Google.\n   *\n   * @returns Promise<ReCaptchaV2.ReCaptcha>\n   */\n  private async getRecaptchaLibrary(): Promise<ReCaptchaV2.ReCaptcha> {\n    if (this.grecaptchaLibraryCache) {\n      return this.grecaptchaLibraryCache;\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        this.grecaptchaLibraryCache = window.grecaptcha;\n        resolve(window.grecaptcha);\n      };\n\n      this.lazyLoader.loadScript({\n        src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',\n      });\n    });\n  }\n\n  /** don't use directly, use `getRecaptchaLibrary()` */\n  private grecaptchaLibraryCache?: ReCaptchaV2.ReCaptcha;\n}\n"]}
+{"version":3,"file":"recaptcha-manager.js","sourceRoot":"","sources":["../../src/recaptcha-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAElB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAYrD,MAAM,OAAO,gBAAgB;IAO3B,YAAY,OAIX;;QANO,mBAAc,GAAoC,EAAE,CAAC;QAO3D,IAAI,CAAC,cAAc,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC;QAC9C,IAAI,CAAC,UAAU,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,IAAI,iBAAiB,EAAE,CAAC;QACjE,IAAI,CAAC,sBAAsB,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC;IAC3D,CAAC;IAED,kBAAkB;IAClB,KAAK,CAAC,kBAAkB,CAAC,OAGxB;;QACC,MAAM,GAAG,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,mCAAI,IAAI,CAAC,cAAc,CAAC;QACpD,IAAI,CAAC,GAAG,EAAE;YACR,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;SAC7D;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACxC,IAAI,MAAM;YAAE,OAAO,MAAM,CAAC;QAE1B,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3D,MAAM,SAAS,GAAG,IAAI,eAAe,CACnC;YACE,OAAO,EAAE,GAAG;YACZ,iBAAiB;SAClB,EACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CACzB,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,mBAAmB;QAC/B,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACpC;QACD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,MAAc,CAAC,wBAAwB,GAAG,GAAS,EAAE;gBACpD,UAAU,CAAC,GAAG,EAAE;oBACd,8CAA8C;oBAC9C,OAAQ,MAAc,CAAC,wBAAwB,CAAC;gBAClD,CAAC,EAAE,EAAE,CAAC,CAAC;gBACP,IAAI,CAAC,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC;gBAChD,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEF,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;gBACzB,GAAG,EAAE,yFAAyF;aAC/F,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;CAIF","sourcesContent":["import {\n  LazyLoaderService,\n  LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport { RecaptchaWidget } from './recaptcha-widget';\n\nexport interface RecaptchaManagerInterface {\n  /**\n   * Load a recaptcha widget for a given site key or the default site key.\n   */\n  getRecaptchaWidget(options?: {\n    siteKey?: string;\n    recaptchaParams?: ReCaptchaV2.Parameters;\n  }): Promise<RecaptchaWidget>;\n}\n\nexport class RecaptchaManager implements RecaptchaManagerInterface {\n  private lazyLoader: LazyLoaderServiceInterface;\n\n  private defaultSiteKey?: string;\n\n  private recaptchaCache: Record<string, RecaptchaWidget> = {};\n\n  constructor(options?: {\n    defaultSiteKey?: string;\n    lazyLoader?: LazyLoaderServiceInterface;\n    grecaptchaLibrary?: ReCaptchaV2.ReCaptcha; // allows dependency injection or will be lazy loaded\n  }) {\n    this.defaultSiteKey = options?.defaultSiteKey;\n    this.lazyLoader = options?.lazyLoader ?? new LazyLoaderService();\n    this.grecaptchaLibraryCache = options?.grecaptchaLibrary;\n  }\n\n  /** @inheritdoc */\n  async getRecaptchaWidget(options?: {\n    siteKey?: string;\n    recaptchaParams?: ReCaptchaV2.Parameters;\n  }): Promise<RecaptchaWidget> {\n    const key = options?.siteKey ?? this.defaultSiteKey;\n    if (!key) {\n      throw new Error('The reCaptcha widget requires a site key');\n    }\n\n    const cached = this.recaptchaCache[key];\n    if (cached) return cached;\n\n    const grecaptchaLibrary = await this.getRecaptchaLibrary();\n    const recaptcha = new RecaptchaWidget(\n      {\n        siteKey: key,\n        grecaptchaLibrary,\n      },\n      options?.recaptchaParams\n    );\n\n    this.recaptchaCache[key] = recaptcha;\n    return recaptcha;\n  }\n\n  /**\n   * Load the Recaptch library from Google.\n   *\n   * @returns Promise<ReCaptchaV2.ReCaptcha>\n   */\n  private async getRecaptchaLibrary(): Promise<ReCaptchaV2.ReCaptcha> {\n    if (this.grecaptchaLibraryCache) {\n      return this.grecaptchaLibraryCache;\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        this.grecaptchaLibraryCache = window.grecaptcha;\n        resolve(window.grecaptcha);\n      };\n\n      this.lazyLoader.loadScript({\n        src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',\n      });\n    });\n  }\n\n  /** don't use directly, use `getRecaptchaLibrary()` */\n  private grecaptchaLibraryCache?: ReCaptchaV2.ReCaptcha;\n}\n"]}

package/dist/src/recaptcha-widget.d.ts

@@ -6,6 +6,13 @@ export interface RecaptchaWidgetInterface {
     /** execute the recaptcha request and returns a token */
     execute(): Promise<string>;
 }
+/**
+ * The combines parameters from the Recaptcha config and adds the zIndex, which
+ * allows us to control the z-index of the recaptcha widget.
+ */
+export declare type RecaptchaWidgetConfig = Pick<ReCaptchaV2.Parameters, 'tabindex' | 'theme' | 'type' | 'size' | 'badge'> & {
+    zIndex?: number;
+};
 /**
  * This encompasses a widget for a given site key.
  */
@@ -20,11 +27,10 @@ export declare class RecaptchaWidget implements RecaptchaWidgetInterface {
     constructor(config: {
         siteKey: string;
         grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
-    }, recaptchaParams?: ReCaptchaV2.Parameters);
+    }, widgetConfig?: RecaptchaWidgetConfig);
     /** @inheritdoc */
     execute(): Promise<string>;
     private finishExecution;
-    /** @inheritdoc */
     private setup;
     private createContainer;
     private responseHandler;

package/dist/src/recaptcha-widget.js

@@ -2,13 +2,13 @@
  * This encompasses a widget for a given site key.
  */
 export class RecaptchaWidget {
-    constructor(config, recaptchaParams) {
+    constructor(config, widgetConfig) {
         this.widgetId = null;
         this.isExecuting = false;
         this.siteKey = config.siteKey;
         this.grecaptchaLibrary = config.grecaptchaLibrary;
         const container = this.createContainer();
-        this.setup(container, recaptchaParams);
+        this.setup(container, widgetConfig);
     }
     /** @inheritdoc */
     async execute() {
@@ -22,6 +22,7 @@ export class RecaptchaWidget {
             // just reset it and execute it again
             this.finishExecution();
         }
+        this.isExecuting = true;
         return new Promise((resolve, reject) => {
             this.executionSuccessBlock = (token) => {
                 this.finishExecution();
@@ -45,21 +46,21 @@ export class RecaptchaWidget {
             return;
         this.grecaptchaLibrary.reset(widgetId);
     }
-    /** @inheritdoc */
-    setup(container, recaptchaParams) {
+    setup(container, widgetConfig) {
         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',
+            tabindex: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.tabindex,
+            theme: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.theme,
+            type: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.type,
+            size: (_a = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.size) !== null && _a !== void 0 ? _a : 'invisible',
+            badge: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.badge,
         });
     }
-    createContainer() {
+    createContainer(zIndex) {
         const elementId = `recaptchaManager-${this.siteKey}`;
         let element = document.getElementById(elementId);
         if (!element) {
@@ -68,6 +69,7 @@ export class RecaptchaWidget {
             element.style.position = 'fixed';
             element.style.top = '50%';
             element.style.left = '50%';
+            element.style.zIndex = zIndex ? `${zIndex}` : '10';
             document.body.appendChild(element);
         }
         return element;

package/dist/src/recaptcha-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"recaptcha-widget.js","sourceRoot":"","sources":["../../src/recaptcha-widget.ts"],"names":[],"mappings":"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","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 * 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    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    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  /** @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      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"]}
+{"version":3,"file":"recaptcha-widget.js","sourceRoot":"","sources":["../../src/recaptcha-widget.ts"],"names":[],"mappings":"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","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    this.isExecuting = true;\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"]}

package/dist/test/mock-grecaptcha.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="grecaptcha" />
+export declare type MockGrecaptchaMode = 'success' | 'expired' | 'error';
+export declare class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
+    response: string;
+    renderCalled: boolean;
+    executeCalled: boolean;
+    resetCallCount: number;
+    getResponseCalled: boolean;
+    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;
+    reset(opt_widget_id?: number | undefined): void;
+    getResponse(opt_widget_id?: number | undefined): string;
+    execute(opt_widget_id?: number): void;
+    ready(callback: () => void): void;
+    private callCallback;
+    constructor(options: {
+        mode: MockGrecaptchaMode;
+        addDelay?: boolean;
+    });
+}

package/dist/test/mock-grecaptcha.js

@@ -0,0 +1,62 @@
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export class MockGrecaptcha {
+    constructor(options) {
+        var _a;
+        this.response = 'foo';
+        this.renderCalled = false;
+        this.executeCalled = false;
+        this.resetCallCount = 0;
+        this.getResponseCalled = false;
+        this.mode = options.mode;
+        this.addDelay = (_a = options.addDelay) !== null && _a !== void 0 ? _a : false;
+    }
+    render(container, parameters, inherit) {
+        var _a, _b, _c;
+        this.callback = (_a = parameters === null || parameters === void 0 ? void 0 : parameters.callback) === null || _a === void 0 ? void 0 : _a.bind(this);
+        this['error-callback'] = (_b = parameters === null || parameters === void 0 ? void 0 : parameters['error-callback']) === null || _b === void 0 ? void 0 : _b.bind(this);
+        this['expired-callback'] = (_c = parameters === null || parameters === void 0 ? void 0 : parameters['expired-callback']) === null || _c === void 0 ? void 0 : _c.bind(this);
+        this.renderCalled = true;
+        return 1;
+    }
+    reset(opt_widget_id) {
+        this.resetCallCount += 1;
+    }
+    getResponse(opt_widget_id) {
+        this.getResponseCalled = true;
+        return 'foo';
+    }
+    execute(opt_widget_id) {
+        this.executeCalled = true;
+        if (this.addDelay) {
+            setTimeout(this.callCallback.bind(this), 100);
+        }
+        else {
+            this.callCallback();
+        }
+    }
+    ready(callback) { }
+    callCallback() {
+        switch (this.mode) {
+            case 'success':
+                if (this.callback) {
+                    this.callback('foo');
+                }
+                break;
+            case 'error':
+                if (this['error-callback']) {
+                    this['error-callback']();
+                }
+                break;
+            case 'expired':
+                if (this['expired-callback']) {
+                    this['expired-callback']();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}
+//# 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,8BAA8B;AAC9B,uDAAuD;AACvD,sDAAsD;AAItD,MAAM,OAAO,cAAc;IA4EzB,YAAY,OAAyD;;QA3ErE,aAAQ,GAAG,KAAK,CAAC;QAEjB,iBAAY,GAAG,KAAK,CAAC;QAErB,kBAAa,GAAG,KAAK,CAAC;QAEtB,mBAAc,GAAG,CAAC,CAAC;QAEnB,sBAAiB,GAAG,KAAK,CAAC;QAoExB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,MAAA,OAAO,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC5C,CAAC;IA1DD,MAAM,CACJ,SAA+B,EAC/B,UAA+C,EAC/C,OAA6B;;QAE7B,IAAI,CAAC,QAAQ,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,CAAC,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,gBAAgB,CAAC,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,kBAAkB,CAAC,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,kBAAkB,CAAC,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACxE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,OAAO,CAAC,CAAC;IACX,CAAC;IAED,KAAK,CAAC,aAAkC;QACtC,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,WAAW,CAAC,aAAkC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,CAAC,aAAsB;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAE1B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;SAC/C;aAAM;YACL,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAED,KAAK,CAAC,QAAoB,IAAS,CAAC;IAE5B,YAAY;QAClB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,SAAS;gBACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;iBACtB;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAE;oBAC1B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;iBAC1B;gBACD,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,IAAI,CAAC,kBAAkB,CAAC,EAAE;oBAC5B,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC;iBAC5B;gBACD,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;CAMF","sourcesContent":["/* eslint-disable camelcase */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n\nexport type MockGrecaptchaMode = 'success' | 'expired' | 'error';\n\nexport class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {\n  response = 'foo';\n\n  renderCalled = false;\n\n  executeCalled = false;\n\n  resetCallCount = 0;\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.resetCallCount += 1;\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.bind(this), 100);\n    } else {\n      this.callCallback();\n    }\n  }\n\n  ready(callback: () => void): void {}\n\n  private callCallback(): void {\n    switch (this.mode) {\n      case 'success':\n        if (this.callback) {\n          this.callback('foo');\n        }\n        break;\n      case 'error':\n        if (this['error-callback']) {\n          this['error-callback']();\n        }\n        break;\n      case 'expired':\n        if (this['expired-callback']) {\n          this['expired-callback']();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  constructor(options: { mode: MockGrecaptchaMode; addDelay?: boolean }) {\n    this.mode = options.mode;\n    this.addDelay = options.addDelay ?? false;\n  }\n}\n"]}

package/dist/test/mock-lazy-loader.d.ts

@@ -0,0 +1,15 @@
+import { BundleType, LazyLoaderServiceEvents, LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';
+import { Unsubscribe } from 'nanoevents';
+export declare class MockLazyLoaderService implements LazyLoaderServiceInterface {
+    loadScriptSrc?: string;
+    on<E extends keyof LazyLoaderServiceEvents>(event: E, callback: LazyLoaderServiceEvents[E]): Unsubscribe;
+    loadBundle(bundle: {
+        module?: string;
+        nomodule?: string;
+    }): Promise<void>;
+    loadScript(options: {
+        src: string;
+        bundleType?: BundleType;
+        attributes?: Record<string, string>;
+    }): Promise<void>;
+}

package/dist/test/mock-lazy-loader.js

@@ -0,0 +1,17 @@
+import { MockGrecaptcha } from './mock-grecaptcha';
+export class MockLazyLoaderService {
+    on(event, callback) {
+        throw new Error('Method not implemented.');
+    }
+    async loadBundle(bundle) {
+        console.debug('loadBundle', bundle);
+    }
+    async loadScript(options) {
+        this.loadScriptSrc = options.src;
+        window.grecaptcha = new MockGrecaptcha({
+            mode: 'success',
+        });
+        window.grecaptchaLoadedCallback();
+    }
+}
+//# sourceMappingURL=mock-lazy-loader.js.map

package/dist/test/mock-lazy-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-lazy-loader.js","sourceRoot":"","sources":["../../test/mock-lazy-loader.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,OAAO,qBAAqB;IAGhC,EAAE,CACA,KAAQ,EACR,QAAoC;QAEpC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,MAGhB;QACC,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,OAIhB;QACC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC;QACjC,MAAM,CAAC,UAAU,GAAG,IAAI,cAAc,CAAC;YACrC,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;QACF,MAAc,CAAC,wBAAwB,EAAE,CAAC;IAC7C,CAAC;CACF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport {\n  BundleType,\n  LazyLoaderServiceEvents,\n  LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport { Unsubscribe } from 'nanoevents';\nimport { MockGrecaptcha } from './mock-grecaptcha';\n\nexport class MockLazyLoaderService implements LazyLoaderServiceInterface {\n  loadScriptSrc?: string;\n\n  on<E extends keyof LazyLoaderServiceEvents>(\n    event: E,\n    callback: LazyLoaderServiceEvents[E]\n  ): Unsubscribe {\n    throw new Error('Method not implemented.');\n  }\n\n  async loadBundle(bundle: {\n    module?: string;\n    nomodule?: string;\n  }): Promise<void> {\n    console.debug('loadBundle', bundle);\n  }\n\n  async loadScript(options: {\n    src: string;\n    bundleType?: BundleType;\n    attributes?: Record<string, string>;\n  }): Promise<void> {\n    this.loadScriptSrc = options.src;\n    window.grecaptcha = new MockGrecaptcha({\n      mode: 'success',\n    });\n    (window as any).grecaptchaLoadedCallback();\n  }\n}\n"]}

package/dist/test/recaptcha-manager.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,138 @@
-"use strict";
-describe('YourWebComponent', () => { });
+import { expect } from '@open-wc/testing';
+import { MockGrecaptcha } from './mock-grecaptcha';
+import { RecaptchaManager } from '../src/recaptcha-manager';
+import { MockLazyLoaderService } from './mock-lazy-loader';
+const mockLazyLoader = new MockLazyLoaderService();
+describe('ReCaptcha Management', () => {
+    describe('ReCaptcha Manager', () => {
+        it('can return recaptchas', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            const result = await recaptcha.execute();
+            expect(result).to.equal('foo');
+        });
+        it('throws an error if no site key found', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+            });
+            try {
+                await recaptchaManager.getRecaptchaWidget();
+                expect.fail('should not get here');
+            }
+            catch (e) {
+                expect(e.message).to.equal('The reCaptcha widget requires a site key');
+            }
+        });
+        it('returns a cached version if one already exists for a given site key', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+            });
+            mockGrecaptcha.response = 'foo';
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha1 = await recaptchaManager.getRecaptchaWidget();
+            const recaptcha2 = await recaptchaManager.getRecaptchaWidget();
+            expect(recaptcha1).to.equal(recaptcha2);
+        });
+        it('loads the recaptcha library if needed', async () => {
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                defaultSiteKey: '123',
+            });
+            await recaptchaManager.getRecaptchaWidget();
+            const loadUrl = mockLazyLoader.loadScriptSrc;
+            expect(loadUrl === null || loadUrl === void 0 ? void 0 : loadUrl.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')).to.be.true;
+        });
+    });
+    describe('ReCaptcha Widget', () => {
+        it('can error properly like a Promise', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'error',
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            try {
+                await recaptcha.execute();
+                expect.fail('should not get here');
+            }
+            catch (error) {
+                expect(error.message).to.equal('error');
+            }
+        });
+        it('can expire properly like a Promise', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'expired',
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            try {
+                await recaptcha.execute();
+                expect.fail('should not get here');
+            }
+            catch (error) {
+                expect(error.message).to.equal('expired');
+            }
+        });
+        it('resets the captcha after execution', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+                addDelay: true,
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(1);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(2);
+        });
+        // there's no way to know if the user has dismissed the captcha so if another execution
+        // comes through while the captcha is still active, it will be reset
+        it('resets the captcha if another execution gets called', async () => {
+            const mockGrecaptcha = new MockGrecaptcha({
+                mode: 'success',
+                addDelay: true,
+            });
+            const recaptchaManager = new RecaptchaManager({
+                lazyLoader: mockLazyLoader,
+                grecaptchaLibrary: mockGrecaptcha,
+                defaultSiteKey: '123',
+            });
+            const recaptcha = await recaptchaManager.getRecaptchaWidget();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(0);
+            await recaptcha.execute();
+            expect(mockGrecaptcha.resetCallCount).to.equal(2);
+        });
+    });
+});
 //# 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,GAAE,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {});\n"]}
+{"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

@@ -6,4 +6,5 @@ export {
 export {
   RecaptchaWidget,
   RecaptchaWidgetInterface,
+  RecaptchaWidgetConfig,
 } from './src/recaptcha-widget';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@internetarchive/recaptcha-manager",
-  "description": "A library that lets you lazy load and interact with reCaptcha more easily.",
+  "description": "A library that lets you lazy load and interact with reCaptcha.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/internetarchive/iaux-recaptcha-manager.git"
   },
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.2",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@internetarchive/lazy-loader-service": "^0.2.0",
-    "@types/grecaptcha": "^3.0.3"
+    "@types/grecaptcha": "^2"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^7.0.0",
@@ -41,6 +41,7 @@
     "husky": "^7.0.0",
     "lit": "^2.2.0",
     "madge": "^5.0.1",
+    "nanoevents": "^6.0.2",
     "prettier": "^2.4.1",
     "sinon": "^12.0.1",
     "tslib": "^2.3.1",

package/src/recaptcha-manager.ts

@@ -21,14 +21,14 @@ export class RecaptchaManager implements RecaptchaManagerInterface {
 
   private recaptchaCache: Record<string, RecaptchaWidget> = {};
 
-  constructor(options: {
-    defaultSiteKey: string;
+  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;
+    this.defaultSiteKey = options?.defaultSiteKey;
+    this.lazyLoader = options?.lazyLoader ?? new LazyLoaderService();
+    this.grecaptchaLibraryCache = options?.grecaptchaLibrary;
   }
 
   /** @inheritdoc */
@@ -38,7 +38,7 @@ export class RecaptchaManager implements RecaptchaManagerInterface {
   }): Promise<RecaptchaWidget> {
     const key = options?.siteKey ?? this.defaultSiteKey;
     if (!key) {
-      throw new Error('RecaptchaManager requires a site key');
+      throw new Error('The reCaptcha widget requires a site key');
     }
 
     const cached = this.recaptchaCache[key];

package/src/recaptcha-widget.ts

@@ -6,6 +6,17 @@ export interface RecaptchaWidgetInterface {
   execute(): Promise<string>;
 }
 
+/**
+ * The combines parameters from the Recaptcha config and adds the zIndex, which
+ * allows us to control the z-index of the recaptcha widget.
+ */
+export type RecaptchaWidgetConfig = Pick<
+  ReCaptchaV2.Parameters,
+  'tabindex' | 'theme' | 'type' | 'size' | 'badge'
+> & {
+  zIndex?: number;
+};
+
 /**
  * This encompasses a widget for a given site key.
  */
@@ -29,13 +40,13 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
       siteKey: string;
       grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
     },
-    recaptchaParams?: ReCaptchaV2.Parameters
+    widgetConfig?: RecaptchaWidgetConfig
   ) {
     this.siteKey = config.siteKey;
     this.grecaptchaLibrary = config.grecaptchaLibrary;
 
     const container = this.createContainer();
-    this.setup(container, recaptchaParams);
+    this.setup(container, widgetConfig);
   }
 
   /** @inheritdoc */
@@ -53,6 +64,8 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
       this.finishExecution();
     }
 
+    this.isExecuting = true;
+
     return new Promise((resolve, reject) => {
       this.executionSuccessBlock = (token: string): void => {
         this.finishExecution();
@@ -80,24 +93,24 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
     this.grecaptchaLibrary.reset(widgetId);
   }
 
-  /** @inheritdoc */
   private setup(
     container: HTMLElement,
-    recaptchaParams?: ReCaptchaV2.Parameters
+    widgetConfig?: ReCaptchaV2.Parameters
   ): void {
     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?.tabindex,
-      theme: recaptchaParams?.theme,
-      type: recaptchaParams?.type,
-      size: recaptchaParams?.size ?? 'invisible',
+      tabindex: widgetConfig?.tabindex,
+      theme: widgetConfig?.theme,
+      type: widgetConfig?.type,
+      size: widgetConfig?.size ?? 'invisible',
+      badge: widgetConfig?.badge,
     });
   }
 
-  private createContainer(): HTMLElement {
+  private createContainer(zIndex?: number): HTMLElement {
     const elementId = `recaptchaManager-${this.siteKey}`;
     let element: HTMLElement | null = document.getElementById(elementId);
     if (!element) {
@@ -106,6 +119,7 @@ export class RecaptchaWidget implements RecaptchaWidgetInterface {
       element.style.position = 'fixed';
       element.style.top = '50%';
       element.style.left = '50%';
+      element.style.zIndex = zIndex ? `${zIndex}` : '10';
       document.body.appendChild(element);
     }
     return element;

package/test/mock-grecaptcha.ts

@@ -0,0 +1,87 @@
+/* eslint-disable camelcase */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+export type MockGrecaptchaMode = 'success' | 'expired' | 'error';
+
+export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
+  response = 'foo';
+
+  renderCalled = false;
+
+  executeCalled = false;
+
+  resetCallCount = 0;
+
+  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.resetCallCount += 1;
+  }
+
+  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.bind(this), 100);
+    } else {
+      this.callCallback();
+    }
+  }
+
+  ready(callback: () => void): void {}
+
+  private callCallback(): void {
+    switch (this.mode) {
+      case 'success':
+        if (this.callback) {
+          this.callback('foo');
+        }
+        break;
+      case 'error':
+        if (this['error-callback']) {
+          this['error-callback']();
+        }
+        break;
+      case 'expired':
+        if (this['expired-callback']) {
+          this['expired-callback']();
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+  constructor(options: { mode: MockGrecaptchaMode; addDelay?: boolean }) {
+    this.mode = options.mode;
+    this.addDelay = options.addDelay ?? false;
+  }
+}

package/test/mock-lazy-loader.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  BundleType,
+  LazyLoaderServiceEvents,
+  LazyLoaderServiceInterface,
+} from '@internetarchive/lazy-loader-service';
+import { Unsubscribe } from 'nanoevents';
+import { MockGrecaptcha } from './mock-grecaptcha';
+
+export class MockLazyLoaderService implements LazyLoaderServiceInterface {
+  loadScriptSrc?: string;
+
+  on<E extends keyof LazyLoaderServiceEvents>(
+    event: E,
+    callback: LazyLoaderServiceEvents[E]
+  ): Unsubscribe {
+    throw new Error('Method not implemented.');
+  }
+
+  async loadBundle(bundle: {
+    module?: string;
+    nomodule?: string;
+  }): Promise<void> {
+    console.debug('loadBundle', bundle);
+  }
+
+  async loadScript(options: {
+    src: string;
+    bundleType?: BundleType;
+    attributes?: Record<string, string>;
+  }): Promise<void> {
+    this.loadScriptSrc = options.src;
+    window.grecaptcha = new MockGrecaptcha({
+      mode: 'success',
+    });
+    (window as any).grecaptchaLoadedCallback();
+  }
+}

package/test/recaptcha-manager.test.ts

@@ -1 +1,151 @@
-describe('YourWebComponent', () => {});
+import { expect } from '@open-wc/testing';
+import { MockGrecaptcha } from './mock-grecaptcha';
+import { RecaptchaManager } from '../src/recaptcha-manager';
+import { MockLazyLoaderService } from './mock-lazy-loader';
+
+const mockLazyLoader = new MockLazyLoaderService();
+
+describe('ReCaptcha Management', () => {
+  describe('ReCaptcha Manager', () => {
+    it('can return recaptchas', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+      const result = await recaptcha.execute();
+      expect(result).to.equal('foo');
+    });
+
+    it('throws an error if no site key found', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+      });
+      try {
+        await recaptchaManager.getRecaptchaWidget();
+        expect.fail('should not get here');
+      } catch (e) {
+        expect((e as Error).message).to.equal(
+          'The reCaptcha widget requires a site key'
+        );
+      }
+    });
+
+    it('returns a cached version if one already exists for a given site key', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+      });
+      mockGrecaptcha.response = 'foo';
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha1 = await recaptchaManager.getRecaptchaWidget();
+      const recaptcha2 = await recaptchaManager.getRecaptchaWidget();
+      expect(recaptcha1).to.equal(recaptcha2);
+    });
+
+    it('loads the recaptcha library if needed', async () => {
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        defaultSiteKey: '123',
+      });
+      await recaptchaManager.getRecaptchaWidget();
+      const loadUrl = mockLazyLoader.loadScriptSrc;
+      expect(
+        loadUrl?.includes('recaptcha/api.js?onload=grecaptchaLoadedCallback')
+      ).to.be.true;
+    });
+  });
+
+  describe('ReCaptcha Widget', () => {
+    it('can error properly like a Promise', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'error',
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      try {
+        await recaptcha.execute();
+        expect.fail('should not get here');
+      } catch (error) {
+        expect((error as Error).message).to.equal('error');
+      }
+    });
+
+    it('can expire properly like a Promise', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'expired',
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      try {
+        await recaptcha.execute();
+        expect.fail('should not get here');
+      } catch (error) {
+        expect((error as Error).message).to.equal('expired');
+      }
+    });
+
+    it('resets the captcha after execution', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+        addDelay: true,
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(1);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(2);
+    });
+
+    // there's no way to know if the user has dismissed the captcha so if another execution
+    // comes through while the captcha is still active, it will be reset
+    it('resets the captcha if another execution gets called', async () => {
+      const mockGrecaptcha = new MockGrecaptcha({
+        mode: 'success',
+        addDelay: true,
+      });
+      const recaptchaManager = new RecaptchaManager({
+        lazyLoader: mockLazyLoader,
+        grecaptchaLibrary: mockGrecaptcha,
+        defaultSiteKey: '123',
+      });
+      const recaptcha = await recaptchaManager.getRecaptchaWidget();
+
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(0);
+      await recaptcha.execute();
+      expect(mockGrecaptcha.resetCallCount).to.equal(2);
+    });
+  });
+});