@internetarchive/recaptcha-manager 0.0.1-alpha.1 → 0.0.1-alpha.4

package/src/recaptcha-widget.ts

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

@@ -0,0 +1,124 @@
+// /* eslint-disable camelcase */
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// /* eslint-disable @typescript-eslint/no-unused-vars */
+
+// export enum MockGrecaptchaMode {
+//   Success,
+//   Expired,
+//   Error,
+// }
+
+// export class MockGrecaptcha implements ReCaptchaV2.ReCaptcha {
+//   renderCalled = false;
+
+//   executeCalled = false;
+
+//   resetCalled = false;
+
+//   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.resetCalled = true;
+//   }
+
+//   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, 100);
+//   //   } else {
+//   //     this.callCallback();
+//   //   }
+//   // }
+//   // /**
+//   //  * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div instead of a button.
+//   //  * @param siteKey the key of your site
+//   //  * @param action the action
+//   //  *
+//   //  * @return a promise-like object containing the token
+//   //  */
+
+//   // async execute(siteKey: string, action: ReCaptchaV2.Action): Promise<string> {
+//   //   return '';
+//   // }
+
+//   // execute(opt_widget_id?: number): void {
+//   //   this.executeCalled = true;
+
+//   //   if (this.addDelay) {
+//   //     setTimeout(this.callCallback, 100);
+//   //   } else {
+//   //     this.callCallback();
+//   //   }
+//   // }
+
+//   // execute(opt_widget_id?: number): void {
+
+//   // }
+
+//   // async execute(siteKey: string, action: ReCaptchaV2.Action): PromiseLike<string> {
+//   //   return '';
+//   // }
+
+//   // async execute(siteKey?: any, action?: any): void | PromiseLike<string> {
+
+//   // }
+
+//   ready(callback: () => void): void {
+
+//   }
+
+//   private callCallback(): void {
+//     switch (this.mode) {
+//       case MockGrecaptchaMode.Success:
+//         if (this.callback) {
+//           this.callback('foo');
+//         }
+//         break;
+//       case MockGrecaptchaMode.Error:
+//         if (this['error-callback']) {
+//           this['error-callback']();
+//         }
+//         break;
+//       case MockGrecaptchaMode.Expired:
+//         if (this['expired-callback']) {
+//           this['expired-callback']();
+//         }
+//         break;
+//       default:
+//         break;
+//     }
+//   }
+
+//   constructor(mode: MockGrecaptchaMode, addDelay = false) {
+//     this.mode = mode;
+//     this.addDelay = addDelay;
+//   }
+// }

package/test/recaptcha-manager.test.ts

@@ -1,3 +1,68 @@
-describe('YourWebComponent', () => {
+// import { html, fixture, expect } from '@open-wc/testing';
+// import { MockGrecaptcha, MockGrecaptchaMode } from './mock-grecaptcha';
+// import { RecaptchaManager } from '../src/recaptcha-manager';
 
+describe('ReCaptcha Manager', () => {
+  // it('can execute the recaptcha like a Promise', async () => {
+  //   const recaptchaElement = (await fixture(html`
+  //     <div></div>
+  //   `)) as HTMLElement;
+  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success);
+  //   const recaptchaManager = new RecaptchaManager({
+  //     grecaptchaLibrary: mockGrecaptcha,
+  //     siteKey: '123',
+  //   });
+  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+  //   const result = await recaptchaManager.execute();
+  //   expect(result).to.equal('foo');
+  // });
+  // it('can error properly like a Promise', async () => {
+  //   const recaptchaElement = (await fixture(html`
+  //     <div></div>
+  //   `)) as HTMLElement;
+  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Error);
+  //   const recaptchaManager = new RecaptchaManager({
+  //     grecaptchaLibrary: mockGrecaptcha,
+  //     siteKey: '123',
+  //   });
+  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+  //   try {
+  //     await recaptchaManager.execute();
+  //     expect.fail('should not get here');
+  //   } catch (error) {
+  //     expect(error).to.equal('error');
+  //   }
+  // });
+  // it('can expire properly like a Promise', async () => {
+  //   const recaptchaElement = (await fixture(html`
+  //     <div></div>
+  //   `)) as HTMLElement;
+  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Expired);
+  //   const recaptchaManager = new RecaptchaManager({
+  //     grecaptchaLibrary: mockGrecaptcha,
+  //     siteKey: '123',
+  //   });
+  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+  //   try {
+  //     await recaptchaManager.execute();
+  //     expect.fail('should not get here');
+  //   } catch (error) {
+  //     expect(error).to.equal('expired');
+  //   }
+  // });
+  // it('resets the captcha if execute() gets called more than once', async () => {
+  //   const recaptchaElement = (await fixture(html`
+  //     <div></div>
+  //   `)) as HTMLElement;
+  //   const mockGrecaptcha = new MockGrecaptcha(MockGrecaptchaMode.Success, true);
+  //   const recaptchaManager = new RecaptchaManager({
+  //     grecaptchaLibrary: mockGrecaptcha,
+  //     siteKey: '123',
+  //   });
+  //   recaptchaManager.setup(recaptchaElement, 1, 'dark', 'image');
+  //   recaptchaManager.execute();
+  //   expect(mockGrecaptcha.resetCalled).to.be.false;
+  //   recaptchaManager.execute();
+  //   expect(mockGrecaptcha.resetCalled).to.be.true;
+  // });
 });