@internetarchive/recaptcha-manager 2.0.0 → 2.0.1

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

@@ -0,0 +1,76 @@
+{
+  "name": "@internetarchive/recaptcha-manager",
+  "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": "2.0.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "prepare": "rimraf dist && tsc && husky install",
+    "build": "tsc",
+    "lint": "eslint . && prettier \"**/*.ts\" --check",
+    "format": "eslint . --fix && prettier \"**/*.ts\" --write",
+    "circular": "madge --circular --extensions ts .",
+    "test": "tsc && npm run lint && npm run circular && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "ghpages:build": "rimraf ghpages && npm run prepare && vite build",
+    "ghpages:publish": "npm run ghpages:prepare -e $(git branch --show-current)",
+    "ghpages:prepare": "npm run ghpages:build && touch ghpages/.nojekyll && npm run ghpages:generate",
+    "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
+  },
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@open-wc/eslint-config": "^12.0.3",
+    "@open-wc/testing": "^4.0.0",
+    "@types/grecaptcha": "^2",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.20.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-html": "^8.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-wc": "^2.2.0",
+    "gh-pages": "^6.3.0",
+    "husky": "^9.1.7",
+    "madge": "^8.0.0",
+    "nanoevents": "^6.0.2",
+    "prettier": "^3.4.2",
+    "rimraf": "^6.0.1",
+    "sinon": "^19.0.2",
+    "ts-lit-plugin": "^2.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "lit": "^2.8.0",
+    "@internetarchive/lazy-loader-service": "^0.2.0"
+  }
+}

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/renovate.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

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

@@ -0,0 +1,114 @@
+import {
+  LazyLoaderService,
+  LazyLoaderServiceInterface,
+} from '@internetarchive/lazy-loader-service';
+import { RecaptchaWidget, RecaptchaWidgetInterface } from './recaptcha-widget';
+
+export interface RecaptchaManagerInterface {
+  /**
+   * Changes the manager's timeout delay to the given number of milliseconds.
+   */
+  setTimeoutDelay(delay: number): void;
+
+  /**
+   * Load a recaptcha widget for a given site key or the default site key.
+   */
+  getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidgetInterface>;
+}
+
+export class RecaptchaManager implements RecaptchaManagerInterface {
+  private static readonly DEFAULT_TIMEOUT = 10000;
+
+  private lazyLoader: LazyLoaderServiceInterface;
+
+  private defaultSiteKey?: string;
+
+  private recaptchaCache: Record<string, RecaptchaWidget> = {};
+
+  /**
+   * How long in milliseconds to wait for the recaptcha library to load before timing out.
+   */
+  private timeout = RecaptchaManager.DEFAULT_TIMEOUT;
+
+  constructor(options?: {
+    defaultSiteKey?: string;
+    lazyLoader?: LazyLoaderServiceInterface;
+    grecaptchaLibrary?: ReCaptchaV2.ReCaptcha; // allows dependency injection or will be lazy loaded
+    timeout?: number;
+  }) {
+    this.defaultSiteKey = options?.defaultSiteKey;
+    this.lazyLoader = options?.lazyLoader ?? new LazyLoaderService();
+    this.grecaptchaLibraryCache = options?.grecaptchaLibrary;
+    this.timeout = options?.timeout ?? RecaptchaManager.DEFAULT_TIMEOUT;
+  }
+
+  /** @inheritdoc */
+  setTimeoutDelay(delay: number): void {
+    this.timeout = delay;
+  }
+
+  /** @inheritdoc */
+  async getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidgetInterface> {
+    const key = options?.siteKey ?? this.defaultSiteKey;
+    if (!key) {
+      throw new Error('The reCaptcha widget requires a site key');
+    }
+
+    const cached = this.recaptchaCache[key];
+    if (cached) return cached;
+
+    const grecaptchaLibrary = await this.getRecaptchaLibrary();
+    const recaptcha = new RecaptchaWidget(
+      {
+        siteKey: key,
+        grecaptchaLibrary,
+      },
+      options?.recaptchaParams,
+    );
+
+    this.recaptchaCache[key] = recaptcha;
+    return recaptcha;
+  }
+
+  /**
+   * Load the Recaptcha library from Google's www.recaptcha.net mirror, which
+   * is reachable in regions where www.google.com is blocked.
+   *
+   * @returns Promise<ReCaptchaV2.ReCaptcha>
+   */
+  private async getRecaptchaLibrary(): Promise<ReCaptchaV2.ReCaptcha> {
+    if (this.grecaptchaLibraryCache) {
+      return this.grecaptchaLibraryCache;
+    }
+    return new Promise((resolve, reject) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).grecaptchaLoadedCallback = (): void => {
+        setTimeout(() => {
+          // remove the callback when we're done with it
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          delete (window as any).grecaptchaLoadedCallback;
+        }, 10);
+        this.grecaptchaLibraryCache = window.grecaptcha;
+        resolve(window.grecaptcha);
+      };
+
+      setTimeout(
+        () => reject(new Error('grecaptcha failed to execute callback')),
+        this.timeout,
+      );
+
+      this.lazyLoader.loadScript({
+        src: 'https://www.recaptcha.net/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
+      });
+    });
+  }
+
+  /** don't use directly, use `getRecaptchaLibrary()` */
+  private grecaptchaLibraryCache?: ReCaptchaV2.ReCaptcha;
+}

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

@@ -0,0 +1,148 @@
+/**
+ * This encompasses a widget for a given site key.
+ */
+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 type RecaptchaWidgetConfig = Pick<
+  ReCaptchaV2.Parameters,
+  'tabindex' | 'theme' | 'type' | 'size' | 'badge'
+> & {
+  zIndex?: number;
+};
+
+/**
+ * This encompasses a widget for a given site key.
+ */
+export class RecaptchaWidget implements RecaptchaWidgetInterface {
+  private executionSuccessBlock?: (token: string) => void;
+
+  private executionExpiredBlock?: () => void;
+
+  private executionErrorBlock?: () => void;
+
+  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+
+  private siteKey: string;
+
+  private widgetId: number | null = null;
+
+  private isExecuting = false;
+
+  constructor(
+    config: {
+      siteKey: string;
+      grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+    },
+    widgetConfig?: RecaptchaWidgetConfig,
+  ) {
+    this.siteKey = config.siteKey;
+    this.grecaptchaLibrary = config.grecaptchaLibrary;
+
+    const container = this.createContainer();
+    this.setup(container, widgetConfig);
+  }
+
+  /** @inheritdoc */
+  async execute(): Promise<string> {
+    const { widgetId } = this;
+
+    if (widgetId === null) {
+      throw new Error('Recaptcha is not setup');
+    }
+
+    if (this.isExecuting) {
+      // there is no way to know when users have dismissed a previous recaptcha
+      // so if we're still in the middle of execution when we call execute again,
+      // just reset it and execute it again
+      this.finishExecution();
+    }
+
+    this.isExecuting = true;
+
+    return new Promise((resolve, reject) => {
+      this.executionSuccessBlock = (token: string): void => {
+        this.finishExecution();
+        resolve(token);
+      };
+
+      this.executionExpiredBlock = (): void => {
+        this.finishExecution();
+        reject(new Error('expired'));
+      };
+
+      this.executionErrorBlock = (): void => {
+        this.finishExecution();
+        reject(new Error('error'));
+      };
+
+      this.grecaptchaLibrary.execute(widgetId);
+    });
+  }
+
+  private finishExecution() {
+    this.isExecuting = false;
+    const { widgetId } = this;
+    if (widgetId === null) return;
+    this.grecaptchaLibrary.reset(widgetId);
+  }
+
+  private setup(
+    container: HTMLElement,
+    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: widgetConfig?.tabindex,
+      theme: widgetConfig?.theme,
+      type: widgetConfig?.type,
+      size: widgetConfig?.size ?? 'invisible',
+      badge: widgetConfig?.badge,
+    });
+  }
+
+  private createContainer(zIndex?: number): HTMLElement {
+    const elementId = `recaptchaManager-${this.siteKey}`;
+    let element: HTMLElement | null = document.getElementById(elementId);
+    if (!element) {
+      element = document.createElement('div');
+      element.id = elementId;
+      element.style.position = 'fixed';
+      element.style.top = '50%';
+      element.style.left = '50%';
+      element.style.zIndex = zIndex ? `${zIndex}` : '10';
+      document.body.appendChild(element);
+    }
+    return element;
+  }
+
+  private responseHandler(response: string): void {
+    if (this.executionSuccessBlock) {
+      this.executionSuccessBlock(response);
+      this.executionSuccessBlock = undefined;
+    }
+  }
+
+  private expiredHandler(): void {
+    if (this.executionExpiredBlock) {
+      this.executionExpiredBlock();
+      this.executionExpiredBlock = undefined;
+    }
+  }
+
+  private errorHandler(): void {
+    if (this.executionErrorBlock) {
+      this.executionErrorBlock();
+      this.executionErrorBlock = undefined;
+    }
+  }
+}

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/ssl/server.crt

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDszCCApugAwIBAgIUYr5csS2ntaMTww0b5QoFI0xlOpUwDQYJKoZIhvcNAQEL
+BQAwaTELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4gRnJh
+bmNpc2NvMRkwFwYDVQQKDBBJbnRlcm5ldCBBcmNoaXZlMRowGAYDVQQDDBFsb2Nh
+bC5hcmNoaXZlLm9yZzAeFw0yNTAzMDcxOTM1MzRaFw0yNTA0MDYxOTM1MzRaMGkx
+CzAJBgNVBAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNU2FuIEZyYW5jaXNj
+bzEZMBcGA1UECgwQSW50ZXJuZXQgQXJjaGl2ZTEaMBgGA1UEAwwRbG9jYWwuYXJj
+aGl2ZS5vcmcwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDZqbS9hNS3
+8AtcA7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3U
+XRCUDAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5
+DSF1CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Y
+cj1WlOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpd
+JxBUxYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbM
+QkUJc8dow3sVAgMBAAGjUzBRMB0GA1UdDgQWBBSla0L0Yhpx9/DEV4uJ6OoHH92Q
+bTAfBgNVHSMEGDAWgBSla0L0Yhpx9/DEV4uJ6OoHH92QbTAPBgNVHRMBAf8EBTAD
+AQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBEzt9sgWtwjLI7AVrejDSE6F/01ng4bTni
+0PJXa7IpwjhAApVWcjxDKp8SkDUAcZNULqBGvpPicqjnKf+wxk3xTMc7pvLqzOor
+pm+plDUBfCEbrv1ouLDMgOtxQxbwbBUPySsLoNmDUGAGnL2zENX7qidOOmmSQEN4
+jZuPtiEkgTqmtkfHaRX/7jhmGVfxMxj0Krlar1/cSbvwaVs4kRSjiL9/avT+AX59
+0QoNYTLGcBP0RKia8NF2A3cgUivIMFZQDvdsiAvqY+DbC7Mnyv4Sj/ZHHwVa9+8k
+iRU56DrOt7sgaa/oQfzWnvRtL0F5eXC3veqM4qZrXs9hHeGlgPFo
+-----END CERTIFICATE-----

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/ssl/server.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
+A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
+DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
+CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
+lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
+xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
+c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
+C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
+iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
+kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
+pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
+rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
+0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
+FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
+0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
+fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
+WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
+hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
+GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
+kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
+0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
+xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
+qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
+iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
+/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
+iJhLoxX5SJlJc0RXMhgHGQ==
+-----END PRIVATE KEY-----

package/.claude/worktrees/recaptcha-google-url-hardcode-79a528/test/mock-grecaptcha.ts

@@ -0,0 +1,85 @@
+/* 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/.claude/worktrees/recaptcha-google-url-hardcode-79a528/test/mock-lazy-loader.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  BundleType,
+  LazyLoaderServiceEvents,
+  LazyLoaderServiceInterface,
+} from '@internetarchive/lazy-loader-service';
+import { Unsubscribe } from 'nanoevents';
+
+export class MockLazyLoaderService implements LazyLoaderServiceInterface {
+  loadScriptSrc?: string;
+
+  constructor(private onloadFn: () => unknown = () => {}) {}
+
+  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;
+    this.onloadFn();
+  }
+}