[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-29 14:43:31 +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/browser/src/background/nativeMessaging.background.ts
+++ b/apps/browser/src/background/nativeMessaging.background.ts
@@ -422,9 +422,10 @@ export class NativeMessagingBackground {
  }

  private async showFingerprintDialog() {
-    const fingerprint = (
-      await this.cryptoService.getFingerprint(await this.stateService.getUserId(), this.publicKey)
-    ).join(" ");
+    const fingerprint = await this.cryptoService.getFingerprint(
+      await this.stateService.getUserId(),
+      this.publicKey
+    );

    this.messagingService.send("showNativeMessagingFinterprintDialog", {
      fingerprint: fingerprint,
--- a/apps/browser/src/popup/app.component.ts
+++ b/apps/browser/src/popup/app.component.ts
@@ -9,8 +9,7 @@ import {
 import { DomSanitizer } from "@angular/platform-browser";
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import { IndividualConfig, ToastrService } from "ngx-toastr";
-import { filter, concatMap, Subject, takeUntil } from "rxjs";
-import Swal from "sweetalert2";
+import { filter, concatMap, Subject, takeUntil, firstValueFrom } from "rxjs";

 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
@@ -23,6 +22,7 @@ import { BrowserApi } from "../platform/browser/browser-api";
 import { BrowserStateService } from "../platform/services/abstractions/browser-state.service";

 import { routerTransition } from "./app-routing.animations";
+import { DesktopSyncVerificationDialogComponent } from "./components/desktop-sync-verification-dialog.component";

@Component({
  selector: "app-root",
@@ -113,10 +113,10 @@ export class AppComponent implements OnInit, OnDestroy {
          });
        }
      } else if (msg.command === "showDialog") {
-        await this.showDialog(msg);
+        await this.ngZone.run(() => this.showDialog(msg));
      } else if (msg.command === "showNativeMessagingFinterprintDialog") {
        // TODO: Should be refactored to live in another service.
-        await this.showNativeMessagingFingerprintDialog(msg);
+        await this.ngZone.run(() => this.showNativeMessagingFingerprintDialog(msg));
      } else if (msg.command === "showToast") {
        this.ngZone.run(() => {
          this.showToast(msg);
@@ -242,19 +242,11 @@ export class AppComponent implements OnInit, OnDestroy {
  }

  private async showNativeMessagingFingerprintDialog(msg: any) {
-    await Swal.fire({
-      heightAuto: false,
-      buttonsStyling: false,
-      icon: "warning",
-      iconHtml: '<i class="swal-custom-icon bwi bwi-exclamation-triangle text-warning"></i>',
-      html: `${this.i18nService.t("desktopIntegrationVerificationText")}<br><br><strong>${
-        msg.fingerprint
-      }</strong>`,
-      titleText: this.i18nService.t("desktopSyncVerificationTitle"),
-      showConfirmButton: true,
-      confirmButtonText: this.i18nService.t("ok"),
-      timer: 300000,
+    const dialogRef = DesktopSyncVerificationDialogComponent.open(this.dialogService, {
+      fingerprint: msg.fingerprint,
    });
+
+    return firstValueFrom(dialogRef.closed);
  }

  private async clearComponentStates() {
--- a/apps/browser/src/popup/components/desktop-sync-verification-dialog.component.html
+++ b/apps/browser/src/popup/components/desktop-sync-verification-dialog.component.html
@@ -0,0 +1,18 @@
+<bit-simple-dialog>
+  <span bitDialogTitle>
+    {{ "desktopSyncVerificationTitle" | i18n }}
+  </span>
+  <span bitDialogContent>
+    <p>
+      {{ "desktopIntegrationVerificationText" | i18n }}
+    </p>
+    <p>
+      <strong>{{ params.fingerprint.join("-") }}</strong>
+    </p>
+  </span>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="primary" bitDialogClose>
+      {{ "ok" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>
--- a/apps/browser/src/popup/components/desktop-sync-verification-dialog.component.ts
+++ b/apps/browser/src/popup/components/desktop-sync-verification-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 DesktopSyncVerificationDialogParams = {
+  fingerprint: string[];
+};
+
+@Component({
+  templateUrl: "desktop-sync-verification-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, ButtonModule, DialogModule],
+})
+export class DesktopSyncVerificationDialogComponent {
+  constructor(@Inject(DIALOG_DATA) protected params: DesktopSyncVerificationDialogParams) {}
+
+  static open(dialogService: DialogService, data: DesktopSyncVerificationDialogParams) {
+    return dialogService.open(DesktopSyncVerificationDialogComponent, {
+      data,
+    });
+  }
+}
--- a/apps/browser/src/popup/settings/await-desktop-dialog.component.html
+++ b/apps/browser/src/popup/settings/await-desktop-dialog.component.html
@@ -0,0 +1,11 @@
+<bit-simple-dialog>
+  <span bitDialogTitle>{{ "awaitDesktop" | i18n }}</span>
+  <span bitDialogContent>
+    {{ "awaitDesktopDesc" | i18n }}
+  </span>
+  <ng-container bitDialogFooter>
+    <button bitButton type="button" buttonType="secondary" [bitDialogClose]="true">
+      {{ "close" | i18n }}
+    </button>
+  </ng-container>
+</bit-simple-dialog>
--- a/apps/browser/src/popup/settings/await-desktop-dialog.component.ts
+++ b/apps/browser/src/popup/settings/await-desktop-dialog.component.ts
@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+
+@Component({
+  templateUrl: "await-desktop-dialog.component.html",
+  standalone: true,
+  imports: [JslibModule, ButtonModule, DialogModule],
+})
+export class AwaitDesktopDialogComponent {
+  static open(dialogService: DialogService) {
+    return dialogService.open<boolean>(AwaitDesktopDialogComponent, {
+      disableClose: true,
+    });
+  }
+}
--- a/apps/browser/src/popup/settings/settings.component.ts
+++ b/apps/browser/src/popup/settings/settings.component.ts
@@ -15,9 +15,9 @@ import {
  switchMap,
  takeUntil,
 } from "rxjs";
-import Swal from "sweetalert2";

 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { FingerprintDialogComponent } from "@bitwarden/auth";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -39,6 +39,7 @@ import { SetPinComponent } from "../components/set-pin.component";
 import { PopupUtilsService } from "../services/popup-utils.service";

 import { AboutComponent } from "./about.component";
+import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";

 const RateUrls = {
  [DeviceType.ChromeExtension]:
@@ -361,25 +362,15 @@ export class SettingsComponent implements OnInit {
        return;
      }

-      const submitted = Swal.fire({
-        heightAuto: false,
-        buttonsStyling: false,
-        titleText: this.i18nService.t("awaitDesktop"),
-        text: this.i18nService.t("awaitDesktopDesc"),
-        icon: "info",
-        iconHtml: '<i class="swal-custom-icon bwi bwi-info-circle text-info"></i>',
-        showCancelButton: true,
-        cancelButtonText: this.i18nService.t("cancel"),
-        showConfirmButton: false,
-        allowOutsideClick: false,
-      });
+      const awaitDesktopDialogRef = AwaitDesktopDialogComponent.open(this.dialogService);
+      const awaitDesktopDialogClosed = firstValueFrom(awaitDesktopDialogRef.closed);

      await this.stateService.setBiometricAwaitingAcceptance(true);
      await this.cryptoService.refreshAdditionalKeys();

      await Promise.race([
-        submitted.then(async (result) => {
-          if (result.dismiss === Swal.DismissReason.cancel) {
+        awaitDesktopDialogClosed.then(async (result) => {
+          if (result) {
            this.form.controls.biometric.setValue(false);
            await this.stateService.setBiometricAwaitingAcceptance(null);
          }
@@ -388,8 +379,6 @@ export class SettingsComponent implements OnInit {
          .authenticateBiometric()
          .then((result) => {
            this.form.controls.biometric.setValue(result);
-
-            Swal.close();
            if (!result) {
              this.platformUtilsService.showToast(
                "error",
@@ -411,6 +400,9 @@ export class SettingsComponent implements OnInit {
              cancelButtonText: null,
              type: "danger",
            });
+          })
+          .finally(() => {
+            awaitDesktopDialogRef.close(false);
          }),
      ]);
    } else {
@@ -497,27 +489,12 @@ export class SettingsComponent implements OnInit {
    const fingerprint = await this.cryptoService.getFingerprint(
      await this.stateService.getUserId()
    );
-    const p = document.createElement("p");
-    p.innerText = this.i18nService.t("yourAccountsFingerprint") + ":";
-    const p2 = document.createElement("p");
-    p2.innerText = fingerprint.join("-");
-    const div = document.createElement("div");
-    div.appendChild(p);
-    div.appendChild(p2);

-    const result = await Swal.fire({
-      heightAuto: false,
-      buttonsStyling: false,
-      html: div,
-      showCancelButton: true,
-      cancelButtonText: this.i18nService.t("close"),
-      showConfirmButton: true,
-      confirmButtonText: this.i18nService.t("learnMore"),
+    const dialogRef = FingerprintDialogComponent.open(this.dialogService, {
+      fingerprint,
    });

-    if (result.value) {
-      this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
-    }
+    return firstValueFrom(dialogRef.closed);
  }

  rate() {