[PM-3763] remove Sweet Alert from desktop and browser (#6138)

* update desktop and browser swal references to use CL * rename bit-dialog-close * share fingerprint dialog between desktop and browser * apply code review * format fingerprint in template * apply code review * fix button color * fix button types * update var names * close awaitDesktop dialog on success AND error * add DialogService to NativeMessageHandlerService deps * wrap browser message dialogs in ngZone.run * wrap native messaging handler in ngzone.run * apply code review * fix async ngzone --------- Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
2025-12-22 03:03:43 +00:00 · 2023-09-11 14:54:23 -04:00
parent 2323509dee
commit f999e2cea9
20 changed files with 268 additions and 118 deletions
--- a/apps/desktop/src/app/app.component.ts
+++ b/apps/desktop/src/app/app.component.ts
@@ -16,6 +16,7 @@ import { firstValueFrom, Subject, takeUntil } from "rxjs";

 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { FingerprintDialogComponent } from "@bitwarden/auth";
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
@@ -244,18 +245,8 @@ export class AppComponent implements OnInit, OnDestroy {
            const fingerprint = await this.cryptoService.getFingerprint(
              await this.stateService.getUserId()
            );
-            const result = await this.dialogService.openSimpleDialog({
-              title: { key: "fingerprintPhrase" },
-              content:
-                this.i18nService.t("yourAccountsFingerprint") + ":\n" + fingerprint.join("-"),
-              acceptButtonText: { key: "learnMore" },
-              cancelButtonText: { key: "close" },
-              type: "info",
-            });
-
-            if (result) {
-              this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
-            }
+            const dialogRef = FingerprintDialogComponent.open(this.dialogService, { fingerprint });
+            await firstValueFrom(dialogRef.closed);
            break;
          }
          case "deleteAccount":
--- a/apps/desktop/src/app/components/browser-sync-verification-dialog.component.html
+++ b/apps/desktop/src/app/components/browser-sync-verification-dialog.component.html
@@ -0,0 +1,19 @@
+<bit-simple-dialog>
+  <span bitDialogTitle>
+    {{ "verifyBrowserTitle" | i18n }}
+  </span>
+  <span bitDialogContent>
+    <p>{{ "verifyBrowserDesc" | i18n }}</p>
+    <p>
+      <strong>{{ params.fingerprint.join("-") }}</strong>
+    </p>
+  </span>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="primary" [bitDialogClose]="true">
+      {{ "approve" | i18n }}
+    </button>
+    <button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
+      {{ "cancel" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>
--- a/apps/desktop/src/app/components/browser-sync-verification-dialog.component.ts
+++ b/apps/desktop/src/app/components/browser-sync-verification-dialog.component.ts
@@ -0,0 +1,25 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+
+export type BrowserSyncVerificationDialogParams = {
+  fingerprint: string[];
+};
+
+@Component({
+  templateUrl: "browser-sync-verification-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, ButtonModule, DialogModule],
+})
+export class BrowserSyncVerificationDialogComponent {
+  constructor(@Inject(DIALOG_DATA) protected params: BrowserSyncVerificationDialogParams) {}
+
+  static open(dialogService: DialogService, data: BrowserSyncVerificationDialogParams) {
+    return dialogService.open(BrowserSyncVerificationDialogComponent, {
+      data,
+      disableClose: true,
+    });
+  }
+}
--- a/apps/desktop/src/app/components/verify-native-messaging-dialog.component.html
+++ b/apps/desktop/src/app/components/verify-native-messaging-dialog.component.html
@@ -0,0 +1,18 @@
+<bit-simple-dialog>
+  <span bitDialogTitle>
+    {{ "verifyNativeMessagingConnectionTitle" | i18n : data.applicationName }}:
+  </span>
+  <span bitDialogContent>
+    {{ "verifyNativeMessagingConnectionDesc" | i18n }}
+    <br />
+    {{ "verifyNativeMessagingConnectionWarning" | i18n }}
+  </span>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="primary" [bitDialogClose]="true">
+      {{ "yes" | i18n }}
+    </button>
+    <button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
+      {{ "no" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>
--- a/apps/desktop/src/app/components/verify-native-messaging-dialog.component.ts
+++ b/apps/desktop/src/app/components/verify-native-messaging-dialog.component.ts
@@ -0,0 +1,24 @@
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+
+export type VerifyNativeMessagingDialogData = {
+  applicationName: string;
+};
+
+@Component({
+  templateUrl: "verify-native-messaging-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, ButtonModule, DialogModule],
+})
+export class VerifyNativeMessagingDialogComponent {
+  constructor(@Inject(DIALOG_DATA) protected data: VerifyNativeMessagingDialogData) {}
+
+  static open(dialogService: DialogService, data: VerifyNativeMessagingDialogData) {
+    return dialogService.open<boolean>(VerifyNativeMessagingDialogComponent, {
+      data,
+    });
+  }
+}
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/apps/desktop/src/app/services/services.module.ts
@@ -169,6 +169,7 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
        MessagingServiceAbstraction,
        I18nServiceAbstraction,
        EncryptedMessageHandlerService,
+        DialogService,
      ],
    },
    {
--- a/apps/desktop/src/services/native-message-handler.service.ts
+++ b/apps/desktop/src/services/native-message-handler.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { ipcRenderer } from "electron";
-import Swal from "sweetalert2";
+import { firstValueFrom } from "rxjs";

 import { NativeMessagingVersion } from "@bitwarden/common/enums";
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@@ -11,7 +11,9 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncryptedString, EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
 import { StateService } from "@bitwarden/common/platform/services/state.service";
+import { DialogService } from "@bitwarden/components";

+import { VerifyNativeMessagingDialogComponent } from "../app/components/verify-native-messaging-dialog.component";
 import { DecryptedCommandData } from "../models/native-messaging/decrypted-command-data";
 import { EncryptedMessage } from "../models/native-messaging/encrypted-message";
 import { EncryptedMessageResponse } from "../models/native-messaging/encrypted-message-response";
@@ -33,7 +35,8 @@ export class NativeMessageHandlerService {
    private cryptoFunctionService: CryptoFunctionService,
    private messagingService: MessagingService,
    private i18nService: I18nService,
-    private encryptedMessageHandlerService: EncryptedMessageHandlerService
+    private encryptedMessageHandlerService: EncryptedMessageHandlerService,
+    private dialogService: DialogService
  ) {}

  async handleMessage(message: Message) {
@@ -87,21 +90,12 @@ export class NativeMessageHandlerService {

      // Ask for confirmation from user
      this.messagingService.send("setFocus");
-      const submitted = await Swal.fire({
-        heightAuto: false,
-        titleText: this.i18nService.t("verifyNativeMessagingConnectionTitle", applicationName),
-        html: `${this.i18nService.t("verifyNativeMessagingConnectionDesc")}<br>${this.i18nService.t(
-          "verifyNativeMessagingConnectionWarning"
-        )}`,
-        showCancelButton: true,
-        cancelButtonText: this.i18nService.t("no"),
-        showConfirmButton: true,
-        confirmButtonText: this.i18nService.t("yes"),
-        allowOutsideClick: false,
-        focusCancel: true,
-      });

-      if (submitted.value !== true) {
+      const nativeMessagingVerified = await firstValueFrom(
+        VerifyNativeMessagingDialogComponent.open(this.dialogService, { applicationName }).closed
+      );
+
+      if (nativeMessagingVerified !== true) {
        this.sendResponse({
          messageId: messageId,
          version: NativeMessagingVersion.Latest,
--- a/apps/desktop/src/services/native-messaging.service.ts
+++ b/apps/desktop/src/services/native-messaging.service.ts
@@ -1,7 +1,6 @@
-import { Injectable } from "@angular/core";
+import { Injectable, NgZone } from "@angular/core";
 import { ipcRenderer } from "electron";
 import { firstValueFrom } from "rxjs";
-import Swal from "sweetalert2";

 import { KeySuffixOptions } from "@bitwarden/common/enums";
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
@@ -14,7 +13,9 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { DialogService } from "@bitwarden/components";

+import { BrowserSyncVerificationDialogComponent } from "../app/components/browser-sync-verification-dialog.component";
 import { LegacyMessage } from "../models/native-messaging/legacy-message";
 import { LegacyMessageWrapper } from "../models/native-messaging/legacy-message-wrapper";
 import { Message } from "../models/native-messaging/message";
@@ -36,7 +37,9 @@ export class NativeMessagingService {
    private i18nService: I18nService,
    private messagingService: MessagingService,
    private stateService: StateService,
-    private nativeMessageHandler: NativeMessageHandlerService
+    private nativeMessageHandler: NativeMessageHandlerService,
+    private dialogService: DialogService,
+    private ngZone: NgZone
  ) {}

  init() {
@@ -69,27 +72,20 @@ export class NativeMessagingService {
      if (await this.stateService.getEnableBrowserIntegrationFingerprint()) {
        ipcRenderer.send("nativeMessagingReply", { command: "verifyFingerprint", appId: appId });

-        const fingerprint = (
-          await this.cryptoService.getFingerprint(
-            await this.stateService.getUserId(),
-            remotePublicKey
-          )
-        ).join(" ");
+        const fingerprint = await this.cryptoService.getFingerprint(
+          await this.stateService.getUserId(),
+          remotePublicKey
+        );

        this.messagingService.send("setFocus");

-        // Await confirmation that fingerprint is correct
-        const submitted = await Swal.fire({
-          titleText: this.i18nService.t("verifyBrowserTitle"),
-          html: `${this.i18nService.t("verifyBrowserDesc")}<br><br><strong>${fingerprint}</strong>`,
-          showCancelButton: true,
-          cancelButtonText: this.i18nService.t("cancel"),
-          showConfirmButton: true,
-          confirmButtonText: this.i18nService.t("approve"),
-          allowOutsideClick: false,
-        });
+        const dialogRef = this.ngZone.run(() =>
+          BrowserSyncVerificationDialogComponent.open(this.dialogService, { fingerprint })
+        );

-        if (submitted.value !== true) {
+        const browserSyncVerified = await firstValueFrom(dialogRef.closed);
+
+        if (browserSyncVerified !== true) {
          return;
        }
      }
@@ -127,13 +123,15 @@ export class NativeMessagingService {
        if (!(await this.stateService.getBiometricUnlock({ userId: message.userId }))) {
          this.send({ command: "biometricUnlock", response: "not enabled" }, appId);

-          return await Swal.fire({
-            title: this.i18nService.t("biometricsNotEnabledTitle"),
-            text: this.i18nService.t("biometricsNotEnabledDesc"),
-            showCancelButton: true,
-            cancelButtonText: this.i18nService.t("cancel"),
-            showConfirmButton: false,
-          });
+          return this.ngZone.run(() =>
+            this.dialogService.openSimpleDialog({
+              type: "warning",
+              title: { key: "biometricsNotEnabledTitle" },
+              content: { key: "biometricsNotEnabledDesc" },
+              cancelButtonText: null,
+              acceptButtonText: { key: "cancel" },
+            })
+          );
        }

        const userKey = await this.cryptoService.getUserKeyFromStorage(