From edf90e62e7cf78b4eba8ba0e8d6e8ac989a8ca35 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:22:15 -0600
Subject: [PATCH] fix(auth): [PM-15987] handle browser back button on login
 screen

Intercepts browser back button press on the login screen to properly
transition back to email entry portion instead of unexpected navigation.

Resolves PM-15987
---
 .../src/angular/login/login.component.html    |  8 +----
 .../auth/src/angular/login/login.component.ts | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index efea291752..54a04d3de6 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -121,13 +121,7 @@
 
       <!-- Back button -->
       <ng-container *ngIf="shouldShowBackButton()">
-        <button
-          type="button"
-          bitButton
-          block
-          buttonType="secondary"
-          (click)="toggleLoginUiState(LoginUiState.EMAIL_ENTRY)"
-        >
+        <button type="button" bitButton block buttonType="secondary" (click)="backButtonClicked()">
           {{ "back" | i18n }}
         </button>
       </ng-container>
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index 161a1fe169..93beef42bd 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -137,6 +137,9 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   async ngOnInit(): Promise<void> {
+    // Add popstate listener to listen for browser back button clicks
+    window.addEventListener("popstate", this.handlePopState);
+
     // TODO: remove this when the UnauthenticatedExtensionUIRefresh feature flag is removed.
     this.listenForUnauthUiRefreshFlagChanges();
 
@@ -148,6 +151,9 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    // Remove popstate listener
+    window.removeEventListener("popstate", this.handlePopState);
+
     if (this.clientType === ClientType.Desktop) {
       // TODO: refactor to not use deprecated broadcaster service.
       this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
@@ -562,4 +568,28 @@ export class LoginComponent implements OnInit, OnDestroy {
       this.clientType !== ClientType.Browser
     );
   }
+
+  /**
+   * Handle the back button click to transition back to the email entry state.
+   */
+  protected async backButtonClicked() {
+    // Replace the history so the "forward" button doesn't show (which wouldn't do anything)
+    history.pushState(null, "", window.location.pathname);
+    await this.toggleLoginUiState(LoginUiState.EMAIL_ENTRY);
+  }
+
+  /**
+   * Handle the popstate event to transition back to the email entry state when the back button is clicked.
+   * @param event - The popstate event.
+   */
+  private handlePopState = (event: PopStateEvent) => {
+    if (this.loginUiState === LoginUiState.MASTER_PASSWORD_ENTRY) {
+      // Prevent default navigation
+      event.preventDefault();
+      // Replace the history so the "forward" button doesn't show (which wouldn't do anything)
+      history.pushState(null, "", window.location.pathname);
+      // Transition back to email entry state
+      void this.toggleLoginUiState(LoginUiState.EMAIL_ENTRY);
+    }
+  };
 }