[AUT-270] - Add ability to configure popup dimensions (#21)

Add ability to configure popup dimensions

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@authsignal/browser",
  "type": "module",
- "version": "0.0.16",
+ "version": "0.0.17",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
@@ -18,27 +18,27 @@
  "typecheck": "tsc",
  "clean": "rm -rf ./dist",
  "lint": "eslint \"{cli,config,src,test}/**/*.ts\"",
- "build": "rollup --configPlugin rollup-plugin-ts --config rollup.config.ts"
+ "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript"
  },
  "dependencies": {
- "@fingerprintjs/fingerprintjs": "^3.3.3",
- "a11y-dialog": "^7.4.0",
- "uuid": "^8.3.2"
+ "@fingerprintjs/fingerprintjs": "^3.3.6",
+ "a11y-dialog": "^7.5.2",
+ "uuid": "^9.0.0"
  },
  "devDependencies": {
- "@rollup/plugin-commonjs": "^22.0.0",
- "@rollup/plugin-node-resolve": "^13.3.0",
+ "@rollup/plugin-commonjs": "^22.0.2",
+ "@rollup/plugin-node-resolve": "^14.1.0",
+ "@rollup/plugin-typescript": "^8.5.0",
  "@types/uuid": "^8.3.4",
- "@typescript-eslint/eslint-plugin": "^5.25.0",
- "@typescript-eslint/parser": "^5.25.0",
- "eslint": "^8.15.0",
+ "@typescript-eslint/eslint-plugin": "^5.39.0",
+ "@typescript-eslint/parser": "^5.39.0",
+ "eslint": "^8.24.0",
  "eslint-config-prettier": "^8.5.0",
- "eslint-plugin-prettier": "^4.0.0",
- "prettier": "^2.6.2",
- "rollup": "^2.73.0",
- "rollup-plugin-ts": "^2.0.7",
+ "eslint-plugin-prettier": "^4.2.1",
+ "prettier": "^2.7.1",
+ "rollup": "^2.79.1",
  "tslib": "^2.4.0",
- "typescript": "^4.6.4"
+ "typescript": "^4.8.4"
  },
  "files": [
  "dist"

rollup.config.ts

@@ -1,13 +1,13 @@
 import type {RollupOptions} from "rollup";
-import ts from "rollup-plugin-ts";
+import typescript from "@rollup/plugin-typescript";
 import {nodeResolve} from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import pkg from "./package.json";
 
 const isWatchMode = process.env.ROLLUP_WATCH === "true";
 
 const input = "src/index.ts";
-const plugins = [nodeResolve(), commonjs(), ts({browserslist: false})];
+const plugins = [nodeResolve(), commonjs(), typescript()];
 const watch: RollupOptions["watch"] = {include: ["src/**"], clearScreen: false};
 const sourcemap = isWatchMode ? false : true;
 const onwarn: RollupOptions["onwarn"] = (warning) => {

src/authsignal.ts

@@ -45,14 +45,14 @@ export class Authsignal {
  launch(url: string, options?: {mode?: "redirect"} & LaunchOptions): undefined;
  launch(url: string, options?: {mode: "popup"} & LaunchOptions): Promise<TokenPayload>;
  launch(url: string, options?: LaunchOptions) {
- const mode = options?.mode || "redirect";
-
- if (mode === "redirect") {
+ if (!options?.mode || options.mode === "redirect") {
  window.location.href = url;
  } else {
- const popupUrl = `${url}&mode=popup`;
+ const {popupOptions} = options;
 
- const Popup = new PopupHandler();
+ const Popup = new PopupHandler({width: popupOptions?.width, height: popupOptions?.height});
+
+ const popupUrl = `${url}&mode=popup`;
 
  Popup.show({url: popupUrl});
 

src/popup-handler.ts

@@ -4,6 +4,8 @@ const CONTAINER_ID = "__authsignal-popup-container";
 const CONTENT_ID = "__authsignal-popup-content";
 const OVERLAY_ID = "__authsignal-popup-overlay";
 const STYLE_ID = "__authsignal-popup-style";
+const DEFAULT_WIDTH = "576px";
+const DEFAULT_HEIGHT = "600px";
 
 type PopupShowInput = {
  url: string;
@@ -13,18 +15,38 @@ type EventType = "show" | "hide" | "destroy" | "create";
 
 type EventHandler = (node: Element, event?: Event) => void;
 
+type PopupHandlerOptions = {
+ width?: string;
+ height?: string;
+};
+
 class PopupHandler {
  private popup: A11yDialog | null = null;
 
- constructor() {
+ constructor({width, height}: PopupHandlerOptions) {
  if (document.querySelector(`#${CONTAINER_ID}`)) {
  throw new Error("Multiple instances of Authsignal popup is not supported.");
  }
 
- this.create();
+ this.create({width, height});
  }
 
- create() {
+ create({width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT}: PopupHandlerOptions) {
+ const isWidthValidCSSValue = CSS.supports("width", width);
+ const isHeightValidCSSValue = CSS.supports("height", height);
+
+ let popupWidth = width;
+ let popupHeight = height;
+
+ if (!isWidthValidCSSValue) {
+ console.warn("Invalid CSS value for `popupOptions.width`. Using default value instead.");
+ popupWidth = DEFAULT_WIDTH;
+ }
+ if (!isHeightValidCSSValue) {
+ console.warn("Invalid CSS value for `popupOptions.height`. Using default value instead.");
+ popupHeight = DEFAULT_HEIGHT;
+ }
+
  // Create dialog container
  const container = document.createElement("div");
  container.setAttribute("id", CONTAINER_ID);
@@ -72,14 +94,15 @@ class PopupHandler {
  z-index: 2147483647;
  position: relative;
  background-color: white;
- height: 600px;
- width: 576px;
+ height: ${popupHeight};
+ width: ${popupWidth};
  border-radius: 8px;
  }
 
  #${CONTENT_ID} iframe {
  width: 100%;
  height: 100%;
+ border-radius: inherit;
  }
  `;
 

src/types.ts

@@ -1,4 +1,4 @@
-export type LaunchOptions = {
+type BaseLaunchOptions = {
  /**
  * How the Authsignal Prebuilt MFA page should launch.
  * `popup` will cause it to open in a overlay, whilst `redirect`
@@ -8,6 +8,22 @@ export type LaunchOptions = {
  mode?: "popup" | "redirect";
 };
 
+type RedirectLaunchOptions = BaseLaunchOptions & {
+ mode: "redirect";
+};
+
+type PopupLaunchOptions = BaseLaunchOptions & {
+ mode: "popup";
+ popupOptions?: {
+ /** Any valid CSS value for the `width` property. */
+ width: string;
+ /** Any valid CSS value for the `height` property. */
+ height: string;
+ };
+};
+
+export type LaunchOptions = RedirectLaunchOptions | PopupLaunchOptions;
+
 export type AuthsignalOptions = {
  publishableKey: string;
  /**
@@ -24,7 +40,7 @@ export type AuthsignalOptions = {
  trackingHost?: string;
 
  /**
- * Name of id cookie. __eventn_id by default
+ * Name of id cookie. `__as_aid` by default
  */
  cookieName?: string;
 };