refactor(login-approval-component) [Auth/PM-14940] Update LoginApprovalComponent (#15511)

- Renames the `LoginApprovalComponent` to `LoginApprovalDialogComponent` - Renames the property `notificationId` to `authRequestId` for clarity - Updates text content on the component
2025-12-15 15:53:27 +00:00 · 2025-08-04 09:20:12 -07:00
parent 0bd48f6e58
commit 25ada6f80f
22 changed files with 261 additions and 256 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3657,25 +3657,6 @@
  "thisRequestIsNoLongerValid": {
    "message": "This request is no longer valid."
  },
-  "areYouTryingToAccessYourAccount": {
-    "message": "Are you trying to access your account?"
-  },
-  "logInConfirmedForEmailOnDevice": {
-    "message": "Login confirmed for $EMAIL$ on $DEVICE$",
-    "placeholders": {
-      "email": {
-        "content": "$1",
-        "example": "name@example.com"
-      },
-      "device": {
-        "content": "$2",
-        "example": "iOS"
-      }
-    }
-  },
-  "youDeniedALogInAttemptFromAnotherDevice": {
-    "message": "You denied a login attempt from another device. If this really was you, try to log in with the device again."
-  },
  "loginRequestHasAlreadyExpired": {
    "message": "Login request has already expired."
  },
--- a/apps/desktop/src/app/app.component.ts
+++ b/apps/desktop/src/app/app.component.ts
@@ -24,11 +24,12 @@ import {
 } from "rxjs";

 import { CollectionService } from "@bitwarden/admin-console/common";
+import { LoginApprovalDialogComponent } from "@bitwarden/angular/auth/login-approval";
 import { DeviceTrustToastService } from "@bitwarden/angular/auth/services/device-trust-toast.service.abstraction";
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { DocumentLangSetter } from "@bitwarden/angular/platform/i18n";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { FingerprintDialogComponent, LoginApprovalComponent } from "@bitwarden/auth/angular";
+import { FingerprintDialogComponent } from "@bitwarden/auth/angular";
 import {
  DESKTOP_SSO_CALLBACK,
  LogoutReason,
@@ -476,7 +477,7 @@ export class AppComponent implements OnInit, OnDestroy {
          case "openLoginApproval":
            if (message.notificationId != null) {
              this.dialogService.closeAll();
-              const dialogRef = LoginApprovalComponent.open(this.dialogService, {
+              const dialogRef = LoginApprovalDialogComponent.open(this.dialogService, {
                notificationId: message.notificationId,
              });
              await firstValueFrom(dialogRef.closed);
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/apps/desktop/src/app/services/services.module.ts
@@ -5,6 +5,7 @@ import { Router } from "@angular/router";
 import { Subject, merge } from "rxjs";

 import { OrganizationUserApiService } from "@bitwarden/admin-console/common";
+import { LoginApprovalDialogComponentServiceAbstraction } from "@bitwarden/angular/auth/login-approval";
 import { SetInitialPasswordService } from "@bitwarden/angular/auth/password-management/set-initial-password/set-initial-password.service.abstraction";
 import { SafeProvider, safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
 import {
@@ -31,7 +32,6 @@ import {
 } from "@bitwarden/auth/angular";
 import {
  InternalUserDecryptionOptionsServiceAbstraction,
-  LoginApprovalComponentServiceAbstraction,
  LoginEmailService,
  SsoUrlService,
 } from "@bitwarden/auth/common";
@@ -107,7 +107,7 @@ import {
 import { LockComponentService } from "@bitwarden/key-management-ui";
 import { DefaultSshImportPromptService, SshImportPromptService } from "@bitwarden/vault";

-import { DesktopLoginApprovalComponentService } from "../../auth/login/desktop-login-approval-component.service";
+import { DesktopLoginApprovalDialogComponentService } from "../../auth/login/desktop-login-approval-dialog-component.service";
 import { DesktopLoginComponentService } from "../../auth/login/desktop-login-component.service";
 import { DesktopTwoFactorAuthDuoComponentService } from "../../auth/services/desktop-two-factor-auth-duo-component.service";
 import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
@@ -444,8 +444,8 @@ const safeProviders: SafeProvider[] = [
    deps: [],
  }),
  safeProvider({
-    provide: LoginApprovalComponentServiceAbstraction,
-    useClass: DesktopLoginApprovalComponentService,
+    provide: LoginApprovalDialogComponentServiceAbstraction,
+    useClass: DesktopLoginApprovalDialogComponentService,
    deps: [I18nServiceAbstraction],
  }),
  safeProvider({
--- a/apps/desktop/src/auth/login/desktop-login-approval-dialog-component.service.spec.ts
+++ b/apps/desktop/src/auth/login/desktop-login-approval-dialog-component.service.spec.ts
@@ -2,13 +2,13 @@ import { TestBed } from "@angular/core/testing";
 import { mock, MockProxy } from "jest-mock-extended";
 import { Subject } from "rxjs";

-import { LoginApprovalComponent } from "@bitwarden/auth/angular";
+import { LoginApprovalDialogComponent } from "@bitwarden/angular/auth/login-approval";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";

-import { DesktopLoginApprovalComponentService } from "./desktop-login-approval-component.service";
+import { DesktopLoginApprovalDialogComponentService } from "./desktop-login-approval-dialog-component.service";

-describe("DesktopLoginApprovalComponentService", () => {
-  let service: DesktopLoginApprovalComponentService;
+describe("DesktopLoginApprovalDialogComponentService", () => {
+  let service: DesktopLoginApprovalDialogComponentService;
  let i18nService: MockProxy<I18nServiceAbstraction>;
  let originalIpc: any;

@@ -31,12 +31,12 @@ describe("DesktopLoginApprovalComponentService", () => {

    TestBed.configureTestingModule({
      providers: [
-        DesktopLoginApprovalComponentService,
+        DesktopLoginApprovalDialogComponentService,
        { provide: I18nServiceAbstraction, useValue: i18nService },
      ],
    });

-    service = TestBed.inject(DesktopLoginApprovalComponentService);
+    service = TestBed.inject(DesktopLoginApprovalDialogComponentService);
  });

  afterEach(() => {
@@ -54,7 +54,7 @@ describe("DesktopLoginApprovalComponentService", () => {
    const message = `Confirm access attempt for ${email}`;
    const closeText = "Close";

-    const loginApprovalComponent = { email } as LoginApprovalComponent;
+    const loginApprovalDialogComponent = { email } as LoginApprovalDialogComponent;
    i18nService.t.mockImplementation((key: string) => {
      switch (key) {
        case "accountAccessRequested":
@@ -71,18 +71,20 @@ describe("DesktopLoginApprovalComponentService", () => {
    jest.spyOn(ipc.platform, "isWindowVisible").mockResolvedValue(false);
    jest.spyOn(ipc.auth, "loginRequest").mockResolvedValue();

-    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalComponent.email);
+    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalDialogComponent.email);

    expect(ipc.auth.loginRequest).toHaveBeenCalledWith(title, message, closeText);
  });

  it("does not call ipc.auth.loginRequest when window is visible", async () => {
-    const loginApprovalComponent = { email: "test@bitwarden.com" } as LoginApprovalComponent;
+    const loginApprovalDialogComponent = {
+      email: "test@bitwarden.com",
+    } as LoginApprovalDialogComponent;

    jest.spyOn(ipc.platform, "isWindowVisible").mockResolvedValue(true);
    jest.spyOn(ipc.auth, "loginRequest");

-    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalComponent.email);
+    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalDialogComponent.email);

    expect(ipc.auth.loginRequest).not.toHaveBeenCalled();
  });
--- a/apps/desktop/src/auth/login/desktop-login-approval-dialog-component.service.ts
+++ b/apps/desktop/src/auth/login/desktop-login-approval-dialog-component.service.ts
@@ -1,13 +1,15 @@
 import { Injectable } from "@angular/core";

-import { DefaultLoginApprovalComponentService } from "@bitwarden/auth/angular";
-import { LoginApprovalComponentServiceAbstraction } from "@bitwarden/auth/common";
+import {
+  DefaultLoginApprovalDialogComponentService,
+  LoginApprovalDialogComponentServiceAbstraction,
+} from "@bitwarden/angular/auth/login-approval";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";

@Injectable()
-export class DesktopLoginApprovalComponentService
-  extends DefaultLoginApprovalComponentService
-  implements LoginApprovalComponentServiceAbstraction
+export class DesktopLoginApprovalDialogComponentService
+  extends DefaultLoginApprovalDialogComponentService
+  implements LoginApprovalDialogComponentServiceAbstraction
 {
  constructor(private i18nService: I18nServiceAbstraction) {
    super();
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -3027,9 +3027,6 @@
    "message": "Toggle character count",
    "description": "'Character count' describes a feature that displays a number next to each character of the password."
  },
-  "areYouTryingToAccessYourAccount": {
-    "message": "Are you trying to access your account?"
-  },
  "accessAttemptBy": {
    "message": "Access attempt by $EMAIL$",
    "placeholders": {
@@ -3039,6 +3036,50 @@
      }
    }
  },
+  "loginRequestApprovedForEmailOnDevice": {
+    "message": "Login request approved for $EMAIL$ on $DEVICE$",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "name@example.com"
+      },
+      "device": {
+        "content": "$2",
+        "example": "Web app - Chrome"
+      }
+    }
+  },
+  "youDeniedLoginAttemptFromAnotherDevice": {
+    "message": "You denied a login attempt from another device. If this was you, try to log in with the device again."
+  },
+  "webApp": {
+    "message": "Web app"
+  },
+  "mobile": {
+    "message": "Mobile",
+    "description": "Mobile app"
+  },
+  "extension": {
+    "message": "Extension",
+    "description": "Browser extension/addon"
+  },
+  "desktop": {
+    "message": "Desktop",
+    "description": "Desktop app"
+  },
+  "cli": {
+    "message": "CLI"
+  },
+  "sdk": {
+    "message": "SDK",
+    "description": "Software Development Kit"
+  },
+  "server": {
+    "message": "Server"
+  },
+  "loginRequest": {
+    "message": "Login request"
+  },
  "deviceType": {
    "message": "Device Type"
  },
@@ -3054,22 +3095,6 @@
  "denyAccess": {
    "message": "Deny access"
  },
-  "logInConfirmedForEmailOnDevice": {
-    "message": "Login confirmed for $EMAIL$ on $DEVICE$",
-    "placeholders": {
-      "email": {
-        "content": "$1",
-        "example": "name@example.com"
-      },
-      "device": {
-        "content": "$2",
-        "example": "iOS"
-      }
-    }
-  },
-  "youDeniedALogInAttemptFromAnotherDevice": {
-    "message": "You denied a login attempt from another device. If this really was you, try to log in with the device again."
-  },
  "justNow": {
    "message": "Just now"
  },
--- a/apps/web/src/app/auth/settings/security/device-management-old.component.ts
+++ b/apps/web/src/app/auth/settings/security/device-management-old.component.ts
@@ -3,7 +3,7 @@ import { Component, DestroyRef } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { firstValueFrom } from "rxjs";

-import { LoginApprovalComponent } from "@bitwarden/auth/angular";
+import { LoginApprovalDialogComponent } from "@bitwarden/angular/auth/login-approval";
 import { AuthRequestApiServiceAbstraction } from "@bitwarden/auth/common";
 import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/devices/devices.service.abstraction";
 import {
@@ -325,7 +325,7 @@ export class DeviceManagementOldComponent {
      return;
    }

-    const dialogRef = LoginApprovalComponent.open(this.dialogService, {
+    const dialogRef = LoginApprovalDialogComponent.open(this.dialogService, {
      notificationId: device.devicePendingAuthRequest.id,
    });

--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1428,9 +1428,6 @@
  "notificationSentDevicePart1": {
    "message": "Unlock Bitwarden on your device or on the "
  },
-  "areYouTryingToAccessYourAccount": {
-    "message": "Are you trying to access your account?"
-  },
  "accessAttemptBy": {
    "message": "Access attempt by $EMAIL$",
    "placeholders": {
@@ -3981,22 +3978,6 @@
  "thisRequestIsNoLongerValid": {
    "message": "This request is no longer valid."
  },
-  "logInConfirmedForEmailOnDevice": {
-    "message": "Login confirmed for $EMAIL$ on $DEVICE$",
-    "placeholders": {
-      "email": {
-        "content": "$1",
-        "example": "name@example.com"
-      },
-      "device": {
-        "content": "$2",
-        "example": "iOS"
-      }
-    }
-  },
-  "youDeniedALogInAttemptFromAnotherDevice": {
-    "message": "You denied a login attempt from another device. If this really was you, try to log in with the device again."
-  },
  "loginRequestApprovedForEmailOnDevice": {
    "message": "Login request approved for $EMAIL$ on $DEVICE$",
    "placeholders": {