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

libs/angular/src/auth/device-management/device-management-item-group.component.ts

@@ -2,13 +2,12 @@ import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { LoginApprovalComponent } from "@bitwarden/auth/angular";
 import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
 import { BadgeModule, DialogService, ItemModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
+import { LoginApprovalDialogComponent } from "../login-approval/login-approval-dialog.component";
+
 import { DeviceDisplayData } from "./device-management.component";
 import { clearAuthRequestAndResortDevices } from "./resort-devices.helper";
 
@@ -29,7 +28,7 @@ export class DeviceManagementItemGroupComponent {
       return;
     }
 
-    const loginApprovalDialog = LoginApprovalComponent.open(this.dialogService, {
+    const loginApprovalDialog = LoginApprovalDialogComponent.open(this.dialogService, {
       notificationId: pendingAuthRequest.id,
     });
 

libs/angular/src/auth/device-management/device-management-table.component.ts

@@ -3,9 +3,6 @@ import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
-import { LoginApprovalComponent } from "@bitwarden/auth/angular";
 import { DevicePendingAuthRequest } from "@bitwarden/common/auth/abstractions/devices/responses/device.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
@@ -17,6 +14,8 @@ import {
   TableModule,
 } from "@bitwarden/components";
 
+import { LoginApprovalDialogComponent } from "../login-approval/login-approval-dialog.component";
+
 import { DeviceDisplayData } from "./device-management.component";
 import { clearAuthRequestAndResortDevices } from "./resort-devices.helper";
 
@@ -68,7 +67,7 @@ export class DeviceManagementTableComponent implements OnChanges {
       return;
     }
 
-    const loginApprovalDialog = LoginApprovalComponent.open(this.dialogService, {
+    const loginApprovalDialog = LoginApprovalDialogComponent.open(this.dialogService, {
       notificationId: pendingAuthRequest.id,
     });
 

libs/angular/src/auth/login-approval/default-login-approval-dialog-component.service.spec.ts

@@ -0,0 +1,30 @@
+import { TestBed } from "@angular/core/testing";
+
+import { DefaultLoginApprovalDialogComponentService } from "./default-login-approval-dialog-component.service";
+import { LoginApprovalDialogComponent } from "./login-approval-dialog.component";
+
+describe("DefaultLoginApprovalDialogComponentService", () => {
+  let service: DefaultLoginApprovalDialogComponentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DefaultLoginApprovalDialogComponentService],
+    });
+
+    service = TestBed.inject(DefaultLoginApprovalDialogComponentService);
+  });
+
+  it("is created successfully", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("has showLoginRequestedAlertIfWindowNotVisible method that is a no-op", async () => {
+    const loginApprovalDialogComponent = {} as LoginApprovalDialogComponent;
+
+    const result = await service.showLoginRequestedAlertIfWindowNotVisible(
+      loginApprovalDialogComponent.email,
+    );
+
+    expect(result).toBeUndefined();
+  });
+});

libs/angular/src/auth/login-approval/default-login-approval-dialog-component.service.ts

@@ -0,0 +1,16 @@
+import { LoginApprovalDialogComponentServiceAbstraction } from "./login-approval-dialog-component.service.abstraction";
+
+/**
+ * Default implementation of the LoginApprovalDialogComponentServiceAbstraction.
+ */
+export class DefaultLoginApprovalDialogComponentService
+  implements LoginApprovalDialogComponentServiceAbstraction
+{
+  /**
+   * No-op implementation of the showLoginRequestedAlertIfWindowNotVisible method.
+   * @returns
+   */
+  async showLoginRequestedAlertIfWindowNotVisible(email?: string): Promise<void> {
+    return;
+  }
+}

libs/angular/src/auth/login-approval/index.ts

@@ -0,0 +1,3 @@
+export * from "./login-approval-dialog.component";
+export * from "./login-approval-dialog-component.service.abstraction";
+export * from "./default-login-approval-dialog-component.service";

libs/angular/src/auth/login-approval/login-approval-dialog-component.service.abstraction.ts

@@ -0,0 +1,9 @@
+/**
+ * Abstraction for the LoginApprovalDialogComponent service.
+ */
+export abstract class LoginApprovalDialogComponentServiceAbstraction {
+  /**
+   * Shows a login requested alert if the window is not visible.
+   */
+  abstract showLoginRequestedAlertIfWindowNotVisible: (email?: string) => Promise<void>;
+}

libs/angular/src/auth/login-approval/login-approval-dialog.component.html

@@ -0,0 +1,55 @@
+<bit-dialog>
+  <span bitDialogTitle>{{ "loginRequest" | i18n }}</span>
+
+  <ng-container bitDialogContent>
+    <ng-container *ngIf="loading">
+      <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
+        <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="!loading">
+      <p>{{ "accessAttemptBy" | i18n: email }}</p>
+      <div>
+        <span class="tw-font-medium">{{ "fingerprintPhraseHeader" | i18n }}</span>
+        <p class="tw-text-code">{{ fingerprintPhrase }}</p>
+      </div>
+      <div>
+        <span class="tw-font-medium">{{ "deviceType" | i18n }}</span>
+        <p>{{ readableDeviceTypeName }}</p>
+      </div>
+      <div>
+        <span class="tw-font-medium">{{ "location" | i18n }}</span>
+        <p>
+          <span class="tw-capitalize">{{ authRequestResponse?.requestCountryName }} </span>
+          ({{ authRequestResponse?.requestIpAddress }})
+        </p>
+      </div>
+      <div>
+        <span class="tw-font-medium">{{ "time" | i18n }}</span>
+        <p>{{ requestTimeText }}</p>
+      </div>
+    </ng-container>
+  </ng-container>
+
+  <ng-container bitDialogFooter>
+    <button
+      bitButton
+      type="button"
+      buttonType="primary"
+      [bitAction]="approveLogin"
+      [disabled]="loading"
+    >
+      {{ "confirmAccess" | i18n }}
+    </button>
+    <button
+      bitButton
+      type="button"
+      buttonType="secondary"
+      [bitAction]="denyLogin"
+      [disabled]="loading"
+    >
+      {{ "denyAccess" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>

libs/angular/src/auth/login-approval/login-approval-dialog.component.spec.ts

@@ -0,0 +1,126 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+import { of } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/devices/devices.service.abstraction";
+import { AuthRequestResponse } from "@bitwarden/common/auth/models/response/auth-request.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import { DialogRef, DIALOG_DATA, ToastService } from "@bitwarden/components";
+import { LogService } from "@bitwarden/logging";
+
+import { LoginApprovalDialogComponentServiceAbstraction } from "./login-approval-dialog-component.service.abstraction";
+import { LoginApprovalDialogComponent } from "./login-approval-dialog.component";
+
+describe("LoginApprovalDialogComponent", () => {
+  let component: LoginApprovalDialogComponent;
+  let fixture: ComponentFixture<LoginApprovalDialogComponent>;
+
+  let accountService: MockProxy<AccountService>;
+  let apiService: MockProxy<ApiService>;
+  let authRequestService: MockProxy<AuthRequestServiceAbstraction>;
+  let devicesService: MockProxy<DevicesServiceAbstraction>;
+  let dialogRef: MockProxy<DialogRef>;
+  let i18nService: MockProxy<I18nService>;
+  let logService: MockProxy<LogService>;
+  let toastService: MockProxy<ToastService>;
+  let validationService: MockProxy<ValidationService>;
+
+  const testNotificationId = "test-notification-id";
+  const testEmail = "test@bitwarden.com";
+  const testPublicKey = "test-public-key";
+
+  beforeEach(async () => {
+    accountService = mock<AccountService>();
+    apiService = mock<ApiService>();
+    authRequestService = mock<AuthRequestServiceAbstraction>();
+    devicesService = mock<DevicesServiceAbstraction>();
+    dialogRef = mock<DialogRef>();
+    i18nService = mock<I18nService>();
+    logService = mock<LogService>();
+    toastService = mock<ToastService>();
+    validationService = mock<ValidationService>();
+
+    accountService.activeAccount$ = of({
+      email: testEmail,
+      id: "test-user-id" as UserId,
+      emailVerified: true,
+      name: null,
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [LoginApprovalDialogComponent],
+      providers: [
+        { provide: DIALOG_DATA, useValue: { notificationId: testNotificationId } },
+        { provide: AccountService, useValue: accountService },
+        { provide: ApiService, useValue: apiService },
+        { provide: AuthRequestServiceAbstraction, useValue: authRequestService },
+        { provide: DevicesServiceAbstraction, useValue: devicesService },
+        { provide: DialogRef, useValue: dialogRef },
+        { provide: I18nService, useValue: i18nService },
+        { provide: LogService, useValue: logService },
+        { provide: ToastService, useValue: toastService },
+        { provide: ValidationService, useValue: validationService },
+        {
+          provide: LoginApprovalDialogComponentServiceAbstraction,
+          useValue: mock<LoginApprovalDialogComponentServiceAbstraction>(),
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoginApprovalDialogComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("creates successfully", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("ngOnInit", () => {
+    beforeEach(() => {
+      apiService.getAuthRequest.mockResolvedValue({
+        publicKey: testPublicKey,
+        creationDate: new Date().toISOString(),
+      } as AuthRequestResponse);
+      authRequestService.getFingerprintPhrase.mockResolvedValue("test-phrase");
+    });
+
+    it("retrieves and sets auth request data", async () => {
+      await component.ngOnInit();
+
+      expect(apiService.getAuthRequest).toHaveBeenCalledWith(testNotificationId);
+      expect(component.email).toBe(testEmail);
+      expect(component.fingerprintPhrase).toBeDefined();
+    });
+
+    it("updates time text initially", async () => {
+      i18nService.t.mockReturnValue("justNow");
+
+      await component.ngOnInit();
+      expect(component.requestTimeText).toBe("justNow");
+    });
+  });
+
+  describe("denyLogin", () => {
+    it("denies auth request and shows info toast", async () => {
+      const response = { requestApproved: false } as AuthRequestResponse;
+      apiService.getAuthRequest.mockResolvedValue(response);
+      authRequestService.approveOrDenyAuthRequest.mockResolvedValue(response);
+      i18nService.t.mockReturnValue("denied message");
+
+      await component.denyLogin();
+
+      expect(authRequestService.approveOrDenyAuthRequest).toHaveBeenCalledWith(false, response);
+      expect(toastService.showToast).toHaveBeenCalledWith({
+        variant: "info",
+        message: "denied message",
+      });
+    });
+  });
+});

libs/angular/src/auth/login-approval/login-approval-dialog.component.ts

@@ -0,0 +1,220 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit, OnDestroy, Inject } from "@angular/core";
+import { firstValueFrom, map } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DevicesServiceAbstraction } from "@bitwarden/common/auth/abstractions/devices/devices.service.abstraction";
+import { AuthRequestResponse } from "@bitwarden/common/auth/models/response/auth-request.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import {
+  DIALOG_DATA,
+  DialogRef,
+  AsyncActionsModule,
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  ToastService,
+} from "@bitwarden/components";
+import { LogService } from "@bitwarden/logging";
+
+import { LoginApprovalDialogComponentServiceAbstraction } from "./login-approval-dialog-component.service.abstraction";
+
+const RequestTimeOut = 60000 * 15; // 15 Minutes
+const RequestTimeUpdate = 60000 * 5; // 5 Minutes
+
+export interface LoginApprovalDialogParams {
+  notificationId: string;
+}
+
+@Component({
+  templateUrl: "login-approval-dialog.component.html",
+  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, JslibModule],
+})
+export class LoginApprovalDialogComponent implements OnInit, OnDestroy {
+  authRequestId: string;
+  authRequestResponse?: AuthRequestResponse;
+  email?: string;
+  fingerprintPhrase?: string;
+  interval?: NodeJS.Timeout;
+  loading = true;
+  readableDeviceTypeName?: string;
+  requestTimeText?: string;
+
+  constructor(
+    @Inject(DIALOG_DATA) private params: LoginApprovalDialogParams,
+    private accountService: AccountService,
+    private apiService: ApiService,
+    private authRequestService: AuthRequestServiceAbstraction,
+    private devicesService: DevicesServiceAbstraction,
+    private dialogRef: DialogRef,
+    private i18nService: I18nService,
+    private loginApprovalDialogComponentService: LoginApprovalDialogComponentServiceAbstraction,
+    private logService: LogService,
+    private toastService: ToastService,
+    private validationService: ValidationService,
+  ) {
+    this.authRequestId = params.notificationId;
+  }
+
+  async ngOnDestroy(): Promise<void> {
+    clearInterval(this.interval);
+  }
+
+  async ngOnInit() {
+    if (this.authRequestId == null) {
+      this.logService.error("LoginApprovalDialogComponent: authRequestId is null");
+      return;
+    }
+
+    try {
+      this.authRequestResponse = await this.apiService.getAuthRequest(this.authRequestId);
+    } catch (error) {
+      this.validationService.showError(error);
+      this.logService.error("LoginApprovalDialogComponent: getAuthRequest error", error);
+    }
+
+    if (this.authRequestResponse == null) {
+      this.logService.error("LoginApprovalDialogComponent: authRequestResponse not found");
+      return;
+    }
+
+    const publicKey = Utils.fromB64ToArray(this.authRequestResponse.publicKey);
+
+    this.email = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.email)),
+    );
+
+    if (!this.email) {
+      this.logService.error("LoginApprovalDialogComponent: email not found");
+      return;
+    }
+
+    this.fingerprintPhrase = await this.authRequestService.getFingerprintPhrase(
+      this.email,
+      publicKey,
+    );
+
+    this.readableDeviceTypeName = this.devicesService.getReadableDeviceTypeName(
+      this.authRequestResponse.requestDeviceTypeValue,
+    );
+
+    this.updateTimeText();
+
+    this.interval = setInterval(() => {
+      this.updateTimeText();
+    }, RequestTimeUpdate);
+
+    await this.loginApprovalDialogComponentService.showLoginRequestedAlertIfWindowNotVisible(
+      this.email,
+    );
+
+    this.loading = false;
+  }
+
+  /**
+   * Strongly-typed helper to open a LoginApprovalDialog
+   * @param dialogService Instance of the dialog service that will be used to open the dialog
+   * @param data Configuration for the dialog
+   */
+  static open(dialogService: DialogService, data: LoginApprovalDialogParams) {
+    return dialogService.open(LoginApprovalDialogComponent, { data });
+  }
+
+  denyLogin = async () => {
+    await this.retrieveAuthRequestAndRespond(false);
+  };
+
+  approveLogin = async () => {
+    await this.retrieveAuthRequestAndRespond(true);
+  };
+
+  private async retrieveAuthRequestAndRespond(approve: boolean) {
+    this.authRequestResponse = await this.apiService.getAuthRequest(this.authRequestId);
+    if (this.authRequestResponse.requestApproved || this.authRequestResponse.responseDate != null) {
+      this.toastService.showToast({
+        variant: "info",
+        message: this.i18nService.t("thisRequestIsNoLongerValid"),
+      });
+    } else {
+      const loginResponse = await this.authRequestService.approveOrDenyAuthRequest(
+        approve,
+        this.authRequestResponse,
+      );
+      this.showResultToast(loginResponse);
+    }
+
+    this.dialogRef.close(approve);
+  }
+
+  showResultToast(loginResponse: AuthRequestResponse) {
+    if (loginResponse.requestApproved) {
+      this.toastService.showToast({
+        variant: "success",
+        message: this.i18nService.t(
+          "loginRequestApprovedForEmailOnDevice",
+          this.email,
+          this.devicesService.getReadableDeviceTypeName(loginResponse.requestDeviceTypeValue),
+        ),
+      });
+    } else {
+      this.toastService.showToast({
+        variant: "info",
+        message: this.i18nService.t("youDeniedLoginAttemptFromAnotherDevice"),
+      });
+    }
+  }
+
+  updateTimeText() {
+    if (this.authRequestResponse == null) {
+      this.logService.error("LoginApprovalDialogComponent: authRequestResponse not found");
+      return;
+    }
+
+    const requestDate = new Date(this.authRequestResponse.creationDate);
+    const requestDateUTC = Date.UTC(
+      requestDate.getUTCFullYear(),
+      requestDate.getUTCMonth(),
+      requestDate.getDate(),
+      requestDate.getUTCHours(),
+      requestDate.getUTCMinutes(),
+      requestDate.getUTCSeconds(),
+      requestDate.getUTCMilliseconds(),
+    );
+
+    const dateNow = new Date(Date.now());
+    const dateNowUTC = Date.UTC(
+      dateNow.getUTCFullYear(),
+      dateNow.getUTCMonth(),
+      dateNow.getDate(),
+      dateNow.getUTCHours(),
+      dateNow.getUTCMinutes(),
+      dateNow.getUTCSeconds(),
+      dateNow.getUTCMilliseconds(),
+    );
+
+    const diffInMinutes = dateNowUTC - requestDateUTC;
+
+    if (diffInMinutes <= RequestTimeUpdate) {
+      this.requestTimeText = this.i18nService.t("justNow");
+    } else if (diffInMinutes < RequestTimeOut) {
+      this.requestTimeText = this.i18nService.t(
+        "requestedXMinutesAgo",
+        (diffInMinutes / 60000).toFixed(),
+      );
+    } else {
+      clearInterval(this.interval);
+      this.dialogRef.close();
+      this.toastService.showToast({
+        variant: "info",
+        message: this.i18nService.t("loginRequestHasAlreadyExpired"),
+      });
+    }
+  }
+}

libs/angular/src/services/jslib-services.module.ts

@@ -18,7 +18,6 @@ import {
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
-  DefaultLoginApprovalComponentService,
   DefaultLoginComponentService,
   DefaultLoginDecryptionOptionsService,
   DefaultRegistrationFinishService,
@@ -40,7 +39,6 @@ import {
   DefaultLoginSuccessHandlerService,
   DefaultLogoutService,
   InternalUserDecryptionOptionsServiceAbstraction,
-  LoginApprovalComponentServiceAbstraction,
   LoginEmailService,
   LoginEmailServiceAbstraction,
   LoginStrategyService,
@@ -343,6 +341,8 @@ import {
   VaultExportServiceAbstraction,
 } from "@bitwarden/vault-export-core";
 
+import { DefaultLoginApprovalDialogComponentService } from "../auth/login-approval/default-login-approval-dialog-component.service";
+import { LoginApprovalDialogComponentServiceAbstraction } from "../auth/login-approval/login-approval-dialog-component.service.abstraction";
 import { DefaultSetInitialPasswordService } from "../auth/password-management/set-initial-password/default-set-initial-password.service.implementation";
 import { SetInitialPasswordService } from "../auth/password-management/set-initial-password/set-initial-password.service.abstraction";
 import { DeviceTrustToastService as DeviceTrustToastServiceAbstraction } from "../auth/services/device-trust-toast.service.abstraction";
@@ -1494,8 +1494,8 @@ const safeProviders: SafeProvider[] = [
     deps: [CryptoFunctionServiceAbstraction],
   }),
   safeProvider({
-    provide: LoginApprovalComponentServiceAbstraction,
-    useClass: DefaultLoginApprovalComponentService,
+    provide: LoginApprovalDialogComponentServiceAbstraction,
+    useClass: DefaultLoginApprovalDialogComponentService,
     deps: [],
   }),
   safeProvider({