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

package/src/recaptcha-widget.ts

@@ -1,148 +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: any): void {
-    if (this.executionSuccessBlock) {
-      this.executionSuccessBlock(response);
-      this.executionSuccessBlock = undefined;
-    }
-  }
-
-  private expiredHandler(): void {
-    if (this.executionExpiredBlock) {
-      this.executionExpiredBlock();
-      this.executionExpiredBlock = undefined;
-    }
-  }
-
-  private errorHandler(): void {
-    if (this.executionErrorBlock) {
-      this.executionErrorBlock();
-      this.executionErrorBlock = undefined;
-    }
-  }
-}
+/**
+ * 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: any): void {
+    if (this.executionSuccessBlock) {
+      this.executionSuccessBlock(response);
+      this.executionSuccessBlock = undefined;
+    }
+  }
+
+  private expiredHandler(): void {
+    if (this.executionExpiredBlock) {
+      this.executionExpiredBlock();
+      this.executionExpiredBlock = undefined;
+    }
+  }
+
+  private errorHandler(): void {
+    if (this.executionErrorBlock) {
+      this.executionErrorBlock();
+      this.executionErrorBlock = undefined;
+    }
+  }
+}

package/test/mock-grecaptcha.ts

@@ -1,87 +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;
-  }
-}
+/* 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

@@ -1,38 +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();
-  }
-}
+/* 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();
+  }
+}