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 @@ - 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 { + // 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); + } + }; }