update desktop and browser swal references to use CL

2025-12-29 06:33:40 +00:00 · 2023-08-29 10:58:41 -04:00
parent 834531bd98
commit f59628bbf1
14 changed files with 261 additions and 87 deletions
--- 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,18 @@
+<bit-simple-dialog>
+  <span bitDialogTitle>
+    {{ "verifyBrowserTitle" | i18n }}
+  </span>
+  <span bitDialogContent>
+    {{ "verifyBrowserDesc" | i18n }}
+    <br /><br />
+    <strong>{{ params.fingerprint }}</strong>
+  </span>
+  <ng-container bitDialogFooter>
+    <button bitButton type="submit" buttonType="primary" bitDialogClose bit-dialog-close="true">
+      {{ "approve" | i18n }}
+    </button>
+    <button bitButton type="submit" buttonType="secondary" bitDialogClose bit-dialog-close="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 bit-dialog-close="true">
+      {{ "yes" | i18n }}
+    </button>
+    <button bitButton type="button" buttonType="secondary" bitDialogClose bit-dialog-close="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/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 submitted = await firstValueFrom(
+        VerifyNativeMessagingDialogComponent.open(this.dialogService, { applicationName }).closed
+      );
+
+      if (submitted !== 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 { 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,8 @@ export class NativeMessagingService {
    private i18nService: I18nService,
    private messagingService: MessagingService,
    private stateService: StateService,
-    private nativeMessageHandler: NativeMessageHandlerService
+    private nativeMessageHandler: NativeMessageHandlerService,
+    private dialogService: DialogService
  ) {}

  init() {
@@ -74,22 +76,15 @@ export class NativeMessagingService {
            await this.stateService.getUserId(),
            remotePublicKey
          )
-        ).join(" ");
+        ).join("-");

        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 submitted = await firstValueFrom(
+          BrowserSyncVerificationDialogComponent.open(this.dialogService, { fingerprint }).closed
+        );

-        if (submitted.value !== true) {
+        if (submitted !== true) {
          return;
        }
      }
@@ -127,12 +122,12 @@ 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.dialogService.openSimpleDialog({
+            type: "warning",
+            title: { key: "biometricsNotEnabledTitle" },
+            content: { key: "biometricsNotEnabledDesc" },
+            cancelButtonText: null,
+            acceptButtonText: { key: "cancel" },
          });
        }