@internetarchive/recaptcha-manager 2.0.0 → 2.0.1

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/README.md

@@ -0,0 +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
+> 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/.claude/worktrees/recaptcha-google-url-hardcode-79a528/coverage/.gitignore

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

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/demo/app-root.ts

@@ -0,0 +1,111 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, state, query } 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;
+
+  @query('#timeout') timeoutInput!: HTMLInputElement;
+
+  private recaptchaManager: RecaptchaManagerInterface = new RecaptchaManager({
+    defaultSiteKey: '6Ld64a8UAAAAAGbDwi1927ztGNw7YABQ-dqzvTN2',
+  });
+
+  private recaptcha1?: RecaptchaWidgetInterface;
+
+  private recaptcha2?: RecaptchaWidgetInterface;
+
+  render() {
+    return html`
+      <label for="timeout">
+        Timeout (ms):
+        <input
+          type="number"
+          id="timeout"
+          value="10000"
+          min="0"
+          max="99999"
+          step="100"
+          @change=${this.updateTimeout}
+        />
+      </label>
+      <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 updateTimeout() {
+    this.recaptchaManager.setTimeoutDelay(+this.timeoutInput.value);
+  }
+
+  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/.claude/worktrees/recaptcha-google-url-hardcode-79a528/demo/index.html

@@ -0,0 +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>

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/eslint.config.mjs

@@ -0,0 +1,53 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import html from 'eslint-plugin-html';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends('plugin:@typescript-eslint/recommended'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      html,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.ts', '.tsx'],
+          moduleDirectory: ['node_modules', 'src', 'demo'],
+        },
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-unsafe-function-type': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+  {
+    ignores: ['**/*.js', '**/*.mjs'],
+  },
+  {
+    files: ['**/*.test.ts'],
+    rules: {
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+  },
+];

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/index.ts

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