@internetarchive/recaptcha-manager 0.1.2-alpha.1 → 1.0.0

package/README.md

@@ -1,85 +1,63 @@
-![Build Status](https://github.com/internetarchive/iaux-recaptcha-manager/actions/workflows/ci.yml/badge.svg)
-
-# Internet Archive reCaptcha Manager
-
-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
-yarn start
-```
-To run a local development server that serves the basic demo located in `demo/index.html`
-
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
-```
-
-To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
-
-```bash
-yarn run test:watch
-```
-
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
-```bash
-yarn run lint
-```
-
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
-```
-```bash
-yarn run lint:prettier
-```
-
-To automatically fix many linting errors, run
-```bash
-yarn run format
-```
-
-You can format using ESLint and Prettier individually as well
-```bash
-yarn run format:eslint
-```
-```bash
-yarn run format:prettier
-```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
+![Build Status](https://github.com/internetarchive/iaux-recaptcha-manager/actions/workflows/ci.yml/badge.svg)
+
+# Internet Archive reCaptcha Manager
+
+A library to lazy load and interact with reCaptcha
+
+## Installation
+
+```shell
+> npm install @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
+npm run start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`
+
+## Testing with Web Test Runner
+To run the suite of Web Test Runner tests, run
+```bash
+npm run test
+```
+
+To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
+
+```bash
+npm run test:watch
+```
+
+## Linting with ESLint, Prettier, and Types
+To scan the project for linting errors, run
+```bash
+npm run lint
+```
+
+To automatically fix many linting errors, run
+```bash
+npm run format
+```

package/coverage/.gitignore

@@ -0,0 +1,3 @@
+*
+!.placeholder
+!.gitignore

package/demo/app-root.ts

@@ -1,93 +1,93 @@
-import { html, css, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { RecaptchaWidgetInterface } from '../src/recaptcha-widget';
-import {
-  RecaptchaManager,
-  RecaptchaManagerInterface,
-} from '../src/recaptcha-manager';
-
-@customElement('app-root')
-export class AppRoot extends LitElement {
-  @state() result?: string;
-
-  @state() result2?: string;
-
-  private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
-    defaultSiteKey: '<your-site-key>',
-  });
-
-  private recaptcha1?: RecaptchaWidgetInterface;
-
-  private recaptcha2?: RecaptchaWidgetInterface;
-
-  render() {
-    return html`
-      <p>
-        <button @click="${this.loadRecaptcha}">Load Recaptcha</button
-        ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
-      </p>
-      ${this.result
-        ? html`<p><strong>Token:</strong></p>
-            <p>${this.result}</p>`
-        : ''}
-      <p>
-        <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
-        ><button @click="${this.executeRecaptcha2}">
-          Execute Another Recaptcha
-        </button>
-      </p>
-      ${this.result2
-        ? html`<p><strong>Token 2:</strong></p>
-            <p>${this.result2}</p>`
-        : ''}
-    `;
-  }
-
-  private async loadRecaptcha() {
-    this.recaptcha1 = await this.recaptchaManager?.getRecaptchaWidget({
-      recaptchaParams: {
-        tabindex: 0,
-        theme: 'light',
-        type: 'image',
-      },
-    });
-  }
-
-  private async executeRecaptcha() {
-    if (!this.recaptcha1) {
-      await this.loadRecaptcha();
-    }
-
-    if (!this.recaptcha1) {
-      console.error('error loading recaptcha');
-      return;
-    }
-
-    this.result = await this.recaptcha1.execute();
-  }
-
-  private async loadRecaptcha2() {
-    this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({
-      siteKey: '<your-site-key>',
-    });
-  }
-
-  private async executeRecaptcha2() {
-    if (!this.recaptcha2) {
-      await this.loadRecaptcha();
-    }
-
-    if (!this.recaptcha2) {
-      console.error('error loading recaptcha');
-      return;
-    }
-
-    this.result2 = await this.recaptcha2.execute();
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
-}
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { RecaptchaWidgetInterface } from '../src/recaptcha-widget';
+import {
+  RecaptchaManager,
+  RecaptchaManagerInterface,
+} from '../src/recaptcha-manager';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  @state() result?: string;
+
+  @state() result2?: string;
+
+  private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
+    defaultSiteKey: '6Ld64a8UAAAAAGbDwi1927ztGNw7YABQ-dqzvTN2',
+  });
+
+  private recaptcha1?: RecaptchaWidgetInterface;
+
+  private recaptcha2?: RecaptchaWidgetInterface;
+
+  render() {
+    return html`
+      <p>
+        <button @click="${this.loadRecaptcha}">Load Recaptcha</button
+        ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
+      </p>
+      ${this.result
+        ? html`<p><strong>Token:</strong></p>
+            <p>${this.result}</p>`
+        : ''}
+      <p>
+        <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
+        ><button @click="${this.executeRecaptcha2}">
+          Execute Another Recaptcha
+        </button>
+      </p>
+      ${this.result2
+        ? html`<p><strong>Token 2:</strong></p>
+            <p>${this.result2}</p>`
+        : ''}
+    `;
+  }
+
+  private async loadRecaptcha() {
+    this.recaptcha1 = await this.recaptchaManager?.getRecaptchaWidget({
+      recaptchaParams: {
+        tabindex: 0,
+        theme: 'light',
+        type: 'image',
+      },
+    });
+  }
+
+  private async executeRecaptcha() {
+    if (!this.recaptcha1) {
+      await this.loadRecaptcha();
+    }
+
+    if (!this.recaptcha1) {
+      console.error('error loading recaptcha');
+      return;
+    }
+
+    this.result = await this.recaptcha1.execute();
+  }
+
+  private async loadRecaptcha2() {
+    this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({
+      siteKey: '<your-site-key>',
+    });
+  }
+
+  private async executeRecaptcha2() {
+    if (!this.recaptcha2) {
+      await this.loadRecaptcha();
+    }
+
+    if (!this.recaptcha2) {
+      console.error('error loading recaptcha');
+      return;
+    }
+
+    this.result2 = await this.recaptcha2.execute();
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+}

package/demo/index.html

@@ -1,21 +1,21 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <style>
-    html {
-      font-size: 10px; /* This is to match petabox's base font size */
-    }
-
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <app-root></app-root>
-
-  <script type="module" src="../dist/demo/app-root.js">
-  </script>
-</body>
-</html>
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    html {
+      font-size: 10px; /* This is to match petabox's base font size */
+    }
+
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <app-root></app-root>
+
+  <script type="module" src="../dist/demo/app-root.js">
+  </script>
+</body>
+</html>

package/dist/demo/app-root.d.ts

@@ -1,14 +1,14 @@
-import { LitElement } from 'lit';
-export declare class AppRoot extends LitElement {
-    result?: string;
-    result2?: string;
-    private recaptchaManager;
-    private recaptcha1?;
-    private recaptcha2?;
-    render(): import("lit").TemplateResult<1>;
-    private loadRecaptcha;
-    private executeRecaptcha;
-    private loadRecaptcha2;
-    private executeRecaptcha2;
-    static styles: import("lit").CSSResult;
-}
+import { LitElement } from 'lit';
+export declare class AppRoot extends LitElement {
+    result?: string;
+    result2?: string;
+    private recaptchaManager;
+    private recaptcha1?;
+    private recaptcha2?;
+    render(): import("lit").TemplateResult<1>;
+    private loadRecaptcha;
+    private executeRecaptcha;
+    private loadRecaptcha2;
+    private executeRecaptcha2;
+    static styles: import("lit").CSSResult;
+}

package/dist/demo/app-root.js

@@ -1,86 +1,86 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { RecaptchaManager, } from '../src/recaptcha-manager';
-let AppRoot = class AppRoot extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.recaptchaManager = new RecaptchaManager({
-            defaultSiteKey: '<your-site-key>',
-        });
-    }
-    render() {
-        return html `
-      <p>
-        <button @click="${this.loadRecaptcha}">Load Recaptcha</button
-        ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
-      </p>
-      ${this.result
-            ? html `<p><strong>Token:</strong></p>
-            <p>${this.result}</p>`
-            : ''}
-      <p>
-        <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
-        ><button @click="${this.executeRecaptcha2}">
-          Execute Another Recaptcha
-        </button>
-      </p>
-      ${this.result2
-            ? html `<p><strong>Token 2:</strong></p>
-            <p>${this.result2}</p>`
-            : ''}
-    `;
-    }
-    async loadRecaptcha() {
-        var _a;
-        this.recaptcha1 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
-            recaptchaParams: {
-                tabindex: 0,
-                theme: 'light',
-                type: 'image',
-            },
-        }));
-    }
-    async executeRecaptcha() {
-        if (!this.recaptcha1) {
-            await this.loadRecaptcha();
-        }
-        if (!this.recaptcha1) {
-            console.error('error loading recaptcha');
-            return;
-        }
-        this.result = await this.recaptcha1.execute();
-    }
-    async loadRecaptcha2() {
-        var _a;
-        this.recaptcha2 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
-            siteKey: '<your-site-key>',
-        }));
-    }
-    async executeRecaptcha2() {
-        if (!this.recaptcha2) {
-            await this.loadRecaptcha();
-        }
-        if (!this.recaptcha2) {
-            console.error('error loading recaptcha');
-            return;
-        }
-        this.result2 = await this.recaptcha2.execute();
-    }
-};
-AppRoot.styles = css `
-    :host {
-      display: block;
-    }
-  `;
-__decorate([
-    state()
-], AppRoot.prototype, "result", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "result2", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { RecaptchaManager, } from '../src/recaptcha-manager';
+let AppRoot = class AppRoot extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.recaptchaManager = new RecaptchaManager({
+            defaultSiteKey: '6Ld64a8UAAAAAGbDwi1927ztGNw7YABQ-dqzvTN2',
+        });
+    }
+    render() {
+        return html `
+      <p>
+        <button @click="${this.loadRecaptcha}">Load Recaptcha</button
+        ><button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
+      </p>
+      ${this.result
+            ? html `<p><strong>Token:</strong></p>
+            <p>${this.result}</p>`
+            : ''}
+      <p>
+        <button @click="${this.loadRecaptcha2}">Load Another Recaptcha</button
+        ><button @click="${this.executeRecaptcha2}">
+          Execute Another Recaptcha
+        </button>
+      </p>
+      ${this.result2
+            ? html `<p><strong>Token 2:</strong></p>
+            <p>${this.result2}</p>`
+            : ''}
+    `;
+    }
+    async loadRecaptcha() {
+        var _a;
+        this.recaptcha1 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
+            recaptchaParams: {
+                tabindex: 0,
+                theme: 'light',
+                type: 'image',
+            },
+        }));
+    }
+    async executeRecaptcha() {
+        if (!this.recaptcha1) {
+            await this.loadRecaptcha();
+        }
+        if (!this.recaptcha1) {
+            console.error('error loading recaptcha');
+            return;
+        }
+        this.result = await this.recaptcha1.execute();
+    }
+    async loadRecaptcha2() {
+        var _a;
+        this.recaptcha2 = await ((_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.getRecaptchaWidget({
+            siteKey: '<your-site-key>',
+        }));
+    }
+    async executeRecaptcha2() {
+        if (!this.recaptcha2) {
+            await this.loadRecaptcha();
+        }
+        if (!this.recaptcha2) {
+            console.error('error loading recaptcha');
+            return;
+        }
+        this.result2 = await this.recaptcha2.execute();
+    }
+};
+AppRoot.styles = css `
+    :host {
+      display: block;
+    }
+  `;
+__decorate([
+    state()
+], AppRoot.prototype, "result", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "result2", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
 //# sourceMappingURL=app-root.js.map

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,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';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport { RecaptchaWidgetInterface } from '../src/recaptcha-widget';\r\nimport {\r\n  RecaptchaManager,\r\n  RecaptchaManagerInterface,\r\n} from '../src/recaptcha-manager';\r\n\r\n@customElement('app-root')\r\nexport class AppRoot extends LitElement {\r\n  @state() result?: string;\r\n\r\n  @state() result2?: string;\r\n\r\n  private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({\r\n    defaultSiteKey: '<your-site-key>',\r\n  });\r\n\r\n  private recaptcha1?: RecaptchaWidgetInterface;\r\n\r\n  private recaptcha2?: RecaptchaWidgetInterface;\r\n\r\n  render() {\r\n    return html`\r\n      <p>\r\n        <button @click=\"${this.loadRecaptcha}\">Load Recaptcha</button\r\n        ><button @click=\"${this.executeRecaptcha}\">Execute Recaptcha</button>\r\n      </p>\r\n      ${this.result\r\n        ? html`<p><strong>Token:</strong></p>\r\n            <p>${this.result}</p>`\r\n        : ''}\r\n      <p>\r\n        <button @click=\"${this.loadRecaptcha2}\">Load Another Recaptcha</button\r\n        ><button @click=\"${this.executeRecaptcha2}\">\r\n          Execute Another Recaptcha\r\n        </button>\r\n      </p>\r\n      ${this.result2\r\n        ? html`<p><strong>Token 2:</strong></p>\r\n            <p>${this.result2}</p>`\r\n        : ''}\r\n    `;\r\n  }\r\n\r\n  private async loadRecaptcha() {\r\n    this.recaptcha1 = await this.recaptchaManager?.getRecaptchaWidget({\r\n      recaptchaParams: {\r\n        tabindex: 0,\r\n        theme: 'light',\r\n        type: 'image',\r\n      },\r\n    });\r\n  }\r\n\r\n  private async executeRecaptcha() {\r\n    if (!this.recaptcha1) {\r\n      await this.loadRecaptcha();\r\n    }\r\n\r\n    if (!this.recaptcha1) {\r\n      console.error('error loading recaptcha');\r\n      return;\r\n    }\r\n\r\n    this.result = await this.recaptcha1.execute();\r\n  }\r\n\r\n  private async loadRecaptcha2() {\r\n    this.recaptcha2 = await this.recaptchaManager?.getRecaptchaWidget({\r\n      siteKey: '<your-site-key>',\r\n    });\r\n  }\r\n\r\n  private async executeRecaptcha2() {\r\n    if (!this.recaptcha2) {\r\n      await this.loadRecaptcha();\r\n    }\r\n\r\n    if (!this.recaptcha2) {\r\n      console.error('error loading recaptcha');\r\n      return;\r\n    }\r\n\r\n    this.result2 = await this.recaptcha2.execute();\r\n  }\r\n\r\n  static styles = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n  `;\r\n}\r\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;AAG3B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAKG,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,CAAC;YACrB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;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,CAAC;YACrB,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IACjD,CAAC;;AAEM,cAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIX;AAjFO;IAAR,KAAK,EAAE;uCAAiB;AAEhB;IAAR,KAAK,EAAE;wCAAkB;AAHf,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmFnB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { RecaptchaWidgetInterface } 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: '6Ld64a8UAAAAAGbDwi1927ztGNw7YABQ-dqzvTN2',\n  });\n\n  private recaptcha1?: RecaptchaWidgetInterface;\n\n  private recaptcha2?: RecaptchaWidgetInterface;\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.js';
-export { RecaptchaWidget, RecaptchaWidgetInterface, RecaptchaWidgetConfig, } from './src/recaptcha-widget.js';
+export { RecaptchaManager, RecaptchaManagerInterface, } from './src/recaptcha-manager';
+export { RecaptchaWidget, RecaptchaWidgetInterface, RecaptchaWidgetConfig, } from './src/recaptcha-widget';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { RecaptchaManager, } from './src/recaptcha-manager.js';
-export { RecaptchaWidget, } from './src/recaptcha-widget.js';
+export { RecaptchaManager, } from './src/recaptcha-manager';
+export { RecaptchaWidget, } from './src/recaptcha-widget';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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