[PM-4816] Create shared LoginApprovalComponent (#11982)

* Stub out dialog

* Genericize LoginApprovalComponent

* update ipc mocks

* Remove changes to account component

* Remove changes to account component

* Remove debug

* Remove test component

* Remove added translations

* Fix failing test

* Run lint and prettier

* Rename LoginApprovalServiceAbstraction to LoginApprovalComponentServiceAbstraction

* Add back missing "isVisible" check before calling loginRequest

* Rename classes to contain "Component" in the name

* Add missing space between "login attempt" and fingerprint phrase

* Require email

apps/desktop/src/app/app.component.ts

@@ -25,7 +25,7 @@ import {
 import { CollectionService } from "@bitwarden/admin-console/common";
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
-import { FingerprintDialogComponent } from "@bitwarden/auth/angular";
+import { FingerprintDialogComponent, LoginApprovalComponent } from "@bitwarden/auth/angular";
 import { LogoutReason } from "@bitwarden/auth/common";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -67,7 +67,6 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legac
 import { KeyService, BiometricStateService } from "@bitwarden/key-management";
 
 import { DeleteAccountComponent } from "../auth/delete-account.component";
-import { LoginApprovalComponent } from "../auth/login/login-approval.component";
 import { MenuAccount, MenuUpdateRequest } from "../main/menu/menu.updater";
 import { flagEnabled } from "../platform/flags";
 import { PremiumComponent } from "../vault/app/accounts/premium.component";

apps/desktop/src/app/services/services.module.ts

@@ -26,6 +26,7 @@ import {
 } from "@bitwarden/auth/angular";
 import {
   InternalUserDecryptionOptionsServiceAbstraction,
+  LoginApprovalComponentServiceAbstraction,
   LoginEmailService,
   PinServiceAbstraction,
 } from "@bitwarden/auth/common";
@@ -87,6 +88,7 @@ import {
   BiometricsService,
 } from "@bitwarden/key-management";
 
+import { DesktopLoginApprovalComponentService } from "../../auth/login/desktop-login-approval-component.service";
 import { DesktopLoginComponentService } from "../../auth/login/desktop-login-component.service";
 import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
 import { ElectronBiometricsService } from "../../key-management/biometrics/electron-biometrics.service";
@@ -349,6 +351,11 @@ const safeProviders: SafeProvider[] = [
     useClass: LoginEmailService,
     deps: [AccountService, AuthService, StateProvider],
   }),
+  safeProvider({
+    provide: LoginApprovalComponentServiceAbstraction,
+    useClass: DesktopLoginApprovalComponentService,
+    deps: [I18nServiceAbstraction],
+  }),
 ];
 
 @NgModule({

apps/desktop/src/auth/login/desktop-login-approval-component.service.spec.ts

@@ -0,0 +1,89 @@
+import { TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+import { Subject } from "rxjs";
+
+import { LoginApprovalComponent } from "@bitwarden/auth/angular";
+import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { DesktopLoginApprovalComponentService } from "./desktop-login-approval-component.service";
+
+describe("DesktopLoginApprovalComponentService", () => {
+  let service: DesktopLoginApprovalComponentService;
+  let i18nService: MockProxy<I18nServiceAbstraction>;
+  let originalIpc: any;
+
+  beforeEach(() => {
+    originalIpc = (global as any).ipc;
+    (global as any).ipc = {
+      auth: {
+        loginRequest: jest.fn(),
+      },
+      platform: {
+        isWindowVisible: jest.fn(),
+      },
+    };
+
+    i18nService = mock<I18nServiceAbstraction>({
+      t: jest.fn(),
+      userSetLocale$: new Subject<string>(),
+      locale$: new Subject<string>(),
+    });
+
+    TestBed.configureTestingModule({
+      providers: [
+        DesktopLoginApprovalComponentService,
+        { provide: I18nServiceAbstraction, useValue: i18nService },
+      ],
+    });
+
+    service = TestBed.inject(DesktopLoginApprovalComponentService);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    (global as any).ipc = originalIpc;
+  });
+
+  it("is created successfully", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("calls ipc.auth.loginRequest with correct parameters when window is not visible", async () => {
+    const title = "Log in requested";
+    const email = "test@bitwarden.com";
+    const message = `Confirm login attempt for ${email}`;
+    const closeText = "Close";
+
+    const loginApprovalComponent = { email } as LoginApprovalComponent;
+    i18nService.t.mockImplementation((key: string) => {
+      switch (key) {
+        case "logInRequested":
+          return title;
+        case "confirmLoginAtemptForMail":
+          return message;
+        case "close":
+          return closeText;
+        default:
+          return "";
+      }
+    });
+
+    jest.spyOn(ipc.platform, "isWindowVisible").mockResolvedValue(false);
+    jest.spyOn(ipc.auth, "loginRequest").mockResolvedValue();
+
+    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalComponent.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;
+
+    jest.spyOn(ipc.platform, "isWindowVisible").mockResolvedValue(true);
+    jest.spyOn(ipc.auth, "loginRequest");
+
+    await service.showLoginRequestedAlertIfWindowNotVisible(loginApprovalComponent.email);
+
+    expect(ipc.auth.loginRequest).not.toHaveBeenCalled();
+  });
+});

apps/desktop/src/auth/login/desktop-login-approval-component.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+
+import { DefaultLoginApprovalComponentService } from "@bitwarden/auth/angular";
+import { LoginApprovalComponentServiceAbstraction } from "@bitwarden/auth/common";
+import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+@Injectable()
+export class DesktopLoginApprovalComponentService
+  extends DefaultLoginApprovalComponentService
+  implements LoginApprovalComponentServiceAbstraction
+{
+  constructor(private i18nService: I18nServiceAbstraction) {
+    super();
+  }
+
+  async showLoginRequestedAlertIfWindowNotVisible(email: string): Promise<void> {
+    const isVisible = await ipc.platform.isWindowVisible();
+    if (!isVisible) {
+      await ipc.auth.loginRequest(
+        this.i18nService.t("logInRequested"),
+        this.i18nService.t("confirmLoginAtemptForMail", email),
+        this.i18nService.t("close"),
+      );
+    }
+  }
+}

apps/desktop/src/auth/login/login-approval.component.html

@@ -1,42 +0,0 @@
-<bit-dialog>
-  <span bitDialogTitle>{{ "areYouTryingtoLogin" | i18n }}</span>
-  <ng-container bitDialogContent>
-    <h4>{{ "logInAttemptBy" | i18n: email }}</h4>
-    <div>
-      <b>{{ "fingerprintPhraseHeader" | i18n }}</b>
-      <p class="tw-text-code">{{ fingerprintPhrase }}</p>
-    </div>
-    <div>
-      <b>{{ "deviceType" | i18n }}</b>
-      <p>{{ authRequestResponse?.requestDeviceType }}</p>
-    </div>
-    <div>
-      <b>{{ "ipAddress" | i18n }}</b>
-      <p>{{ authRequestResponse?.requestIpAddress }}</p>
-    </div>
-    <div>
-      <b>{{ "time" | i18n }}</b>
-      <p>{{ requestTimeText }}</p>
-    </div>
-  </ng-container>
-  <ng-container bitDialogFooter>
-    <button
-      bitButton
-      type="button"
-      buttonType="primary"
-      [bitAction]="approveLogin"
-      [bitDialogClose]="true"
-    >
-      {{ "confirmLogIn" | i18n }}
-    </button>
-    <button
-      bitButton
-      type="button"
-      buttonType="secondary"
-      [bitAction]="denyLogin"
-      [bitDialogClose]="true"
-    >
-      {{ "denyLogIn" | i18n }}
-    </button>
-  </ng-container>
-</bit-dialog>

apps/desktop/src/auth/login/login-approval.component.ts

@@ -1,199 +0,0 @@
-import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
-import { CommonModule } from "@angular/common";
-import { Component, OnInit, OnDestroy, Inject } from "@angular/core";
-import { Subject, firstValueFrom, map } from "rxjs";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { AuthRequestServiceAbstraction } from "@bitwarden/auth/common";
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { AuthRequestResponse } from "@bitwarden/common/auth/models/response/auth-request.response";
-import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import {
-  AsyncActionsModule,
-  ButtonModule,
-  DialogModule,
-  DialogService,
-  ToastService,
-} from "@bitwarden/components";
-import { KeyService } from "@bitwarden/key-management";
-
-const RequestTimeOut = 60000 * 15; //15 Minutes
-const RequestTimeUpdate = 60000 * 5; //5 Minutes
-
-export interface LoginApprovalDialogParams {
-  notificationId: string;
-}
-
-@Component({
-  selector: "login-approval",
-  templateUrl: "login-approval.component.html",
-  standalone: true,
-  imports: [CommonModule, AsyncActionsModule, ButtonModule, DialogModule, JslibModule],
-})
-export class LoginApprovalComponent implements OnInit, OnDestroy {
-  notificationId: string;
-
-  private destroy$ = new Subject<void>();
-
-  email: string;
-  fingerprintPhrase: string;
-  authRequestResponse: AuthRequestResponse;
-  interval: NodeJS.Timeout;
-  requestTimeText: string;
-
-  constructor(
-    @Inject(DIALOG_DATA) private params: LoginApprovalDialogParams,
-    protected authRequestService: AuthRequestServiceAbstraction,
-    protected accountService: AccountService,
-    protected platformUtilsService: PlatformUtilsService,
-    protected i18nService: I18nService,
-    protected apiService: ApiService,
-    protected appIdService: AppIdService,
-    protected keyService: KeyService,
-    private dialogRef: DialogRef,
-    private toastService: ToastService,
-  ) {
-    this.notificationId = params.notificationId;
-  }
-
-  async ngOnDestroy(): Promise<void> {
-    clearInterval(this.interval);
-    const closedWithButton = await firstValueFrom(this.dialogRef.closed);
-    if (!closedWithButton) {
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.retrieveAuthRequestAndRespond(false);
-    }
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  async ngOnInit() {
-    if (this.notificationId != null) {
-      this.authRequestResponse = await this.apiService.getAuthRequest(this.notificationId);
-      const publicKey = Utils.fromB64ToArray(this.authRequestResponse.publicKey);
-      this.email = await await firstValueFrom(
-        this.accountService.activeAccount$.pipe(map((a) => a?.email)),
-      );
-      this.fingerprintPhrase = await this.authRequestService.getFingerprintPhrase(
-        this.email,
-        publicKey,
-      );
-      this.updateTimeText();
-
-      this.interval = setInterval(() => {
-        this.updateTimeText();
-      }, RequestTimeUpdate);
-
-      const isVisible = await ipc.platform.isWindowVisible();
-      if (!isVisible) {
-        await ipc.auth.loginRequest(
-          this.i18nService.t("logInRequested"),
-          this.i18nService.t("confirmLoginAtemptForMail", this.email),
-          this.i18nService.t("close"),
-        );
-      }
-    }
-  }
-
-  /**
-   * 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(LoginApprovalComponent, { 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.notificationId);
-    if (this.authRequestResponse.requestApproved || this.authRequestResponse.responseDate != null) {
-      this.toastService.showToast({
-        variant: "info",
-        title: null,
-        message: this.i18nService.t("thisRequestIsNoLongerValid"),
-      });
-    } else {
-      const loginResponse = await this.authRequestService.approveOrDenyAuthRequest(
-        approve,
-        this.authRequestResponse,
-      );
-      this.showResultToast(loginResponse);
-    }
-  }
-
-  showResultToast(loginResponse: AuthRequestResponse) {
-    if (loginResponse.requestApproved) {
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t(
-          "logInConfirmedForEmailOnDevice",
-          this.email,
-          loginResponse.requestDeviceType,
-        ),
-      });
-    } else {
-      this.toastService.showToast({
-        variant: "info",
-        title: null,
-        message: this.i18nService.t("youDeniedALogInAttemptFromAnotherDevice"),
-      });
-    }
-  }
-
-  updateTimeText() {
-    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",
-        title: null,
-        message: this.i18nService.t("loginRequestHasAlreadyExpired"),
-      });
-    }
-  }
-}