Add height to popupOption (#114)

* add `height` option

* pass height to constructor

Author: hwhmeikle

src/authsignal.ts

@@ -154,7 +154,11 @@ export class Authsignal {
   private launchWithPopup(url: string, options: PopupLaunchOptions) {
     const {popupOptions} = options;
 
-    const popupHandler = new PopupHandler({width: popupOptions?.width, isClosable: popupOptions?.isClosable});
+    const popupHandler = new PopupHandler({
+      width: popupOptions?.width,
+      height: popupOptions?.height,
+      isClosable: popupOptions?.isClosable,
+    });
 
     const popupUrl = `${url}&mode=popup`;
 

src/handlers/popup-handler.ts

@@ -16,21 +16,25 @@ type PopupShowInput = {
 
 type PopupHandlerOptions = {
   width?: string;
+  height?: string;
   isClosable?: boolean;
 };
 
 export class PopupHandler {
   private popup: A11yDialog | null = null;
+  private height: string | undefined;
 
-  constructor({width, isClosable}: PopupHandlerOptions) {
+  constructor({width, height, isClosable}: PopupHandlerOptions) {
     if (document.querySelector(`#${CONTAINER_ID}`)) {
       throw new Error("Multiple instances of Authsignal popup is not supported.");
     }
 
-    this.create({width, isClosable});
+    this.height = height;
+
+    this.create({width, height, isClosable});
   }
 
-  create({width = DEFAULT_WIDTH, isClosable = true}: PopupHandlerOptions) {
+  create({width = DEFAULT_WIDTH, height, isClosable = true}: PopupHandlerOptions) {
     const isWidthValidCSSValue = CSS.supports("width", width);
 
     let popupWidth = width;
@@ -102,8 +106,8 @@ export class PopupHandler {
         width: 1px;
         min-width: 100%;
         border-radius: inherit;
-        max-height: 95vh;
-        height: ${INITIAL_HEIGHT};
+        max-height: ${height ? "100%" : "95vh"};
+        height: ${height ?? INITIAL_HEIGHT};
       }
     `;
 
@@ -157,7 +161,10 @@ export class PopupHandler {
       dialogContent.appendChild(iframe);
     }
 
-    window.addEventListener("message", resizeIframe);
+    // Dynamic resizing if no height is set.
+    if (!this.height) {
+      window.addEventListener("message", resizeIframe);
+    }
 
     this.popup?.show();
   }
@@ -179,6 +186,10 @@ export class PopupHandler {
   }
 }
 
+/**
+ * Resize the iframe to the height of the pre-built UI's (#widget_container)
+ * @param event MessageEvent
+ */
 function resizeIframe(event: MessageEvent) {
   const iframeEl = document.querySelector<HTMLIFrameElement>(`#${IFRAME_ID}`);
 

src/types.ts

@@ -20,7 +20,7 @@ export type PopupLaunchOptions = BaseLaunchOptions & {
     /** Any valid CSS value for the `width` property. */
     width?: string;
     /**
-     * @deprecated The popup will automatically resize to fit the content.
+     * Set the height of the popup. If not set, the popup will automatically resize to fit the content.
      */
     height?: string;
     /**