fix: login bug and naming

Author: austin

src/config.ts

@@ -1,4 +1,4 @@
-import { LoginRequestEvent, NavigateRequestEvent } from "./messaging/incoming";
+import { LoginEvent, NavigateEvent } from "./messaging/incoming";
 
 export interface TestBoxConfig {
   allowFullStory?: boolean;
@@ -8,8 +8,8 @@ export interface TestBoxConfig {
   healthCheckInterval?: number;
   window?: Window;
 
-  onNavigateRequest?: (url: NavigateRequestEvent) => void;
-  onLoginRequest?: (props: LoginRequestEvent) => void;
+  onNavigate?: (url: NavigateEvent) => void;
+  onLogin?: (props: LoginEvent) => void;
 }
 
 declare global {

src/index.ts

@@ -18,13 +18,18 @@ export function startTestBox(config?: TestBoxConfig) {
 
   window.__tbxConfig = config;
 
-  if (window.__tbxConfig.onNavigateRequest) {
-    messageHandlers["navigate-request"] = [
-      window.__tbxConfig.onNavigateRequest,
+  if (window.__tbxConfig.onNavigate) {
+    messageHandlers["navigate"] = [window.__tbxConfig.onNavigate];
+  } else {
+    messageHandlers["navigate"] = [
+      (data) => {
+        window.location.href = data.url;
+      },
     ];
   }
-  if (window.__tbxConfig.onLoginRequest) {
-    messageHandlers["login-request"] = [window.__tbxConfig.onLoginRequest];
+
+  if (window.__tbxConfig.onLogin) {
+    messageHandlers["login"] = [window.__tbxConfig.onLogin];
   }
 
   window.addEventListener("message", (ev) => {

src/initialize.ts

@@ -7,10 +7,10 @@ import {
   INITIALIZE_FAIL,
   INITIALIZE_SUCCESS,
 } from "./messaging/outgoing";
-import { InitializeRequestEvent } from "./messaging/incoming";
+import { InitializeEvent } from "./messaging/incoming";
 import { getConfigItem } from "./config";
 
-export function initializeTestBox(data: InitializeRequestEvent) {
+export function initializeTestBox(data: InitializeEvent) {
   try {
     sendMessageToTestBox(INITIALIZE_ACK);
     initializeCookies();

src/messaging/incoming.ts

@@ -11,42 +11,36 @@ export const VALID_INCOMING_EVENTS = [NAVIGATE, INITIALIZE, LOGIN];
 // events due to a this issue in TypeScript:
 // https://github.com/microsoft/TypeScript/issues/33014
 
-export type InitializeRequestEvent = {
+export type InitializeEvent = {
   optInFullStory: boolean;
 };
 
-export type InitializeRequestMessage = TestBoxMessage<
+export type InitializeMessage = TestBoxMessage<
   typeof INITIALIZE,
-  InitializeRequestEvent
+  InitializeEvent
 >;
 
-export type NavigateRequestEvent = {
+export type NavigateEvent = {
   url: string;
 };
 
-export type NavigateRequestMessage = TestBoxMessage<
-  typeof NAVIGATE,
-  NavigateRequestEvent
->;
+export type NavigateMessage = TestBoxMessage<typeof NAVIGATE, NavigateEvent>;
 
-export type LoginRequestEvent = {
+export type LoginEvent = {
   username?: string;
   password?: string;
   totpCode?: string;
 };
 
-export type LoginRequestMessage = TestBoxMessage<
-  typeof LOGIN,
-  LoginRequestEvent
->;
+export type LoginMessage = TestBoxMessage<typeof LOGIN, LoginEvent>;
 
 export type UnionedIncomingMessages =
-  | InitializeRequestMessage
-  | NavigateRequestMessage
-  | LoginRequestMessage;
+  | InitializeMessage
+  | NavigateMessage
+  | LoginMessage;
 
 export type IncomingEventMap = {
-  [INITIALIZE]: InitializeRequestEvent;
-  [NAVIGATE]: NavigateRequestEvent;
-  [LOGIN]: LoginRequestEvent;
+  [INITIALIZE]: InitializeEvent;
+  [NAVIGATE]: NavigateEvent;
+  [LOGIN]: LoginEvent;
 };

src/messaging/outgoing.ts

@@ -11,6 +11,8 @@ export const LOGIN_ACK = "login-ack";
 export const LOGIN_SUCCESS = "login-success";
 export const LOGIN_FAIL = "login-fail";
 
+export const NAVIGATE_ACK = "navigate-ack";
+
 type HealthCheckEvent = {
   url: string;
 };
@@ -31,4 +33,5 @@ export interface TestBoxOutgoingEvents {
   [LOGIN_ACK]: undefined;
   [LOGIN_SUCCESS]: undefined;
   [LOGIN_FAIL]: undefined;
+  [NAVIGATE_ACK]: undefined;
 }

src/router.ts

@@ -9,13 +9,18 @@ import {
 } from "./messaging/incoming";
 import { info, warn } from "./utils/logging";
 import { autoLogin } from "./utils/login";
+import { sendMessageToTestBox } from "./messaging";
+import { INITIALIZE_ACK, LOGIN_ACK, NAVIGATE_ACK } from "./messaging/outgoing";
 
 export type TestBoxEventRouter = {
   [K in keyof IncomingEventMap]?: ((data: IncomingEventMap[K]) => void)[];
 };
 
 // Note to future selves: you cannot destructure testbox here, the
 // type narrowing does not work correctly if you do so here.
+let loggingIn = false;
+let navigateUrl = "";
+
 export function routeMessage(
   { testbox }: UnionedIncomingMessages,
   router: TestBoxEventRouter
@@ -24,15 +29,27 @@ export function routeMessage(
   if (VALID_INCOMING_EVENTS.includes(event)) {
     switch (event) {
       case INITIALIZE:
+        sendMessageToTestBox(INITIALIZE_ACK);
         initializeTestBox(data);
         break;
       case NAVIGATE:
-        window.location.href = data.url;
+        sendMessageToTestBox(NAVIGATE_ACK);
+        if (loggingIn) {
+          navigateUrl = data.url;
+        } else {
+          const navigateFunc = router["navigate"][0];
+          navigateFunc(data);
+        }
         break;
       case LOGIN:
+        loggingIn = true;
+        sendMessageToTestBox(LOGIN_ACK);
         autoLogin(data, router).then((nextUrl) => {
-          if (nextUrl && nextUrl !== window.location.href) {
-            window.location.href = nextUrl;
+          loggingIn = false;
+          const goTo = navigateUrl || nextUrl;
+          if (goTo && goTo !== window.location.href) {
+            const navigateFunc = router["navigate"][0];
+            navigateFunc({ url: goTo });
           }
         });
         break;

src/utils/login.ts

@@ -1,13 +1,10 @@
 import { sendMessageToTestBox } from "../messaging";
-import { LOGIN_ACK, LOGIN_FAIL, LOGIN_SUCCESS } from "../messaging/outgoing";
+import { LOGIN_FAIL, LOGIN_SUCCESS } from "../messaging/outgoing";
 
-export let loggingIn = false;
 export async function autoLogin(data, router) {
-  loggingIn = true;
-  sendMessageToTestBox(LOGIN_ACK);
   let nextUrl;
   try {
-    const funcs = router["login-request"];
+    const funcs = router["login"];
     if (!funcs) {
       console.log("No login callback exists!");
       sendMessageToTestBox(LOGIN_FAIL);
@@ -18,7 +15,6 @@ export async function autoLogin(data, router) {
     console.log(e);
     nextUrl = false;
   }
-  loggingIn = false;
 
   if (nextUrl === false) {
     sendMessageToTestBox(LOGIN_FAIL);