Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-18 15:47:57 +01:00
Code Issues Projects Releases Wiki Activity

fix(auth): [PM-15987] handle browser back button on login screen

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

Resolves PM-15987
This commit is contained in:
Alec Rippberger 2024-12-16 09:22:15 -06:00 committed by GitHub
parent 878d82e16f
commit edf90e62e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/auth/src/angular/login/login.component.html
View File

@ -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>

30
libs/auth/src/angular/login/login.component.ts
View File

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