@internetarchive/recaptcha-manager - npm Package Compare versions

Comparing version 0.0.1-alpha.3 to 0.0.1-alpha.4

dist/src/recaptcha-widget.d.ts

@@ -10,2 +10,9 @@ /// <reference types="grecaptcha" />
 /**
+ * The combines parameters from the Recaptcha config and adds the zIndex, which
+ * allows us to control the z-index of the recaptcha widget.
+ */
+export declare type RecaptchaWidgetConfig = Pick<ReCaptchaV2.Parameters, 'tabindex' | 'theme' | 'type' | 'size' | 'badge'> & {
+    zIndex?: number;
+};
+/**
  * This encompasses a widget for a given site key.
@@ -24,7 +31,6 @@ */
         grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
-    }, recaptchaParams?: ReCaptchaV2.Parameters);
+    }, widgetConfig?: RecaptchaWidgetConfig);
     /** @inheritdoc */
     execute(): Promise<string>;
     private finishExecution;
-    /** @inheritdoc */
     private setup;
@@ -31,0 +37,0 @@ private createContainer;

dist/src/recaptcha-widget.js

@@ -5,3 +5,3 @@ /**
 export class RecaptchaWidget {
-    constructor(config, recaptchaParams) {
+    constructor(config, widgetConfig) {
         this.widgetId = null;
@@ -12,3 +12,3 @@ this.isExecuting = false;
         const container = this.createContainer();
-        this.setup(container, recaptchaParams);
+        this.setup(container, widgetConfig);
     }
@@ -50,4 +50,3 @@ /** @inheritdoc */
     }
-    /** @inheritdoc */
-    setup(container, recaptchaParams) {
+    setup(container, widgetConfig) {
         var _a;
@@ -59,9 +58,10 @@ this.widgetId = this.grecaptchaLibrary.render(container, {
             sitekey: this.siteKey,
-            tabindex: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.tabindex,
-            theme: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.theme,
-            type: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.type,
-            size: (_a = recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.size) !== null && _a !== void 0 ? _a : 'invisible',
+            tabindex: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.tabindex,
+            theme: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.theme,
+            type: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.type,
+            size: (_a = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.size) !== null && _a !== void 0 ? _a : 'invisible',
+            badge: widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.badge,
         });
     }
-    createContainer() {
+    createContainer(zIndex) {
         const elementId = `recaptchaManager-${this.siteKey}`;
@@ -75,2 +75,3 @@ let element = document.getElementById(elementId);
             element.style.left = '50%';
+            element.style.zIndex = zIndex ? `${zIndex}` : '10';
             document.body.appendChild(element);
@@ -77,0 +78,0 @@ }

package.json

@@ -10,3 +10,3 @@ {
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "main": "dist/index.js",
@@ -13,0 +13,0 @@ "module": "dist/index.js",

src/recaptcha-widget.ts

@@ -10,2 +10,13 @@ /**
 /**
+ * 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.
@@ -33,3 +44,3 @@ */
     },
-    recaptchaParams?: ReCaptchaV2.Parameters
+    widgetConfig?: RecaptchaWidgetConfig
   ) {
@@ -40,3 +51,3 @@ this.siteKey = config.siteKey;
     const container = this.createContainer();
-    this.setup(container, recaptchaParams);
+    this.setup(container, widgetConfig);
   }
@@ -86,6 +97,5 @@
 
-  /** @inheritdoc */
   private setup(
     container: HTMLElement,
-    recaptchaParams?: ReCaptchaV2.Parameters
+    widgetConfig?: ReCaptchaV2.Parameters
   ): void {
@@ -97,10 +107,11 @@ this.widgetId = this.grecaptchaLibrary.render(container, {
       sitekey: this.siteKey,
-      tabindex: recaptchaParams?.tabindex,
-      theme: recaptchaParams?.theme,
-      type: recaptchaParams?.type,
-      size: recaptchaParams?.size ?? 'invisible',
+      tabindex: widgetConfig?.tabindex,
+      theme: widgetConfig?.theme,
+      type: widgetConfig?.type,
+      size: widgetConfig?.size ?? 'invisible',
+      badge: widgetConfig?.badge,
     });
   }
 
-  private createContainer(): HTMLElement {
+  private createContainer(zIndex?: number): HTMLElement {
     const elementId = `recaptchaManager-${this.siteKey}`;
@@ -114,2 +125,3 @@ let element: HTMLElement | null = document.getElementById(elementId);
       element.style.left = '50%';
+      element.style.zIndex = zIndex ? `${zIndex}` : '10';
       document.body.appendChild(element);
@@ -116,0 +128,0 @@ }

test/recaptcha-manager.test.ts

@@ -19,3 +19,2 @@ // import { html, fixture, expect } from '@open-wc/testing';
   // });
-
   // it('can error properly like a Promise', async () => {
@@ -38,3 +37,2 @@ //   const recaptchaElement = (await fixture(html`
   // });
-
   // it('can expire properly like a Promise', async () => {
@@ -57,3 +55,2 @@ //   const recaptchaElement = (await fixture(html`
   // });
-
   // it('resets the captcha if execute() gets called more than once', async () => {
@@ -60,0 +57,0 @@ //   const recaptchaElement = (await fixture(html`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146558

increased by0.86%

Lines of code

1569

increased by1.16%

No dependency changes