[PM-1504] Migrate Dialogs to DialogService (#5013)

This PR introduces a generic `DialogService` which can be used by all the clients. This allows us to decouple dialogs from the `PlatformUtilsHelper`. The `DialogService` provides a new method, `openSimpleDialog` which is the new interface for that type of dialogs. This gives us 3 different implementations: - Web: DialogService modern dialogs - Browser: SweetAlert - Desktop: Native electron based
2025-12-12 14:23:32 +00:00 · 2023-05-02 18:46:03 +02:00
parent 7c4b2c04b9
commit 4e1867682f
144 changed files with 1514 additions and 1212 deletions
--- a/libs/angular/src/vault/components/add-edit.component.ts
+++ b/libs/angular/src/vault/components/add-edit.component.ts
@@ -34,6 +34,8 @@ import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { SecureNoteView } from "@bitwarden/common/vault/models/view/secure-note.view";

+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
@Directive()
 export class AddEditComponent implements OnInit, OnDestroy {
  @Input() cloneMode = false;
@@ -98,7 +100,8 @@ export class AddEditComponent implements OnInit, OnDestroy {
    private logService: LogService,
    protected passwordRepromptService: PasswordRepromptService,
    private organizationService: OrganizationService,
-    protected sendApiService: SendApiService
+    protected sendApiService: SendApiService,
+    protected dialogService: DialogServiceAbstraction
  ) {
    this.typeOptions = [
      { name: i18nService.t("typeLogin"), value: CipherType.Login },
@@ -390,17 +393,14 @@ export class AddEditComponent implements OnInit, OnDestroy {
  }

  async delete(): Promise<boolean> {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t(
-        this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
-      ),
-      this.i18nService.t("deleteItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning",
-      false,
-      this.componentName != "" ? this.componentName + " .modal-content" : null
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteItem" },
+      content: {
+        key: this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation",
+      },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -429,13 +429,12 @@ export class AddEditComponent implements OnInit, OnDestroy {
      return false;
    }

-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("restoreItemConfirmation"),
-      this.i18nService.t("restoreItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "restoreItem" },
+      content: { key: "restoreItemConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -455,12 +454,12 @@ export class AddEditComponent implements OnInit, OnDestroy {

  async generateUsername(): Promise<boolean> {
    if (this.cipher.login?.username?.length) {
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("overwriteUsernameConfirmation"),
-        this.i18nService.t("overwriteUsername"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no")
-      );
+      const confirmed = await this.dialogService.openSimpleDialog({
+        title: { key: "overwriteUsername" },
+        content: { key: "overwriteUsernameConfirmation" },
+        type: SimpleDialogType.WARNING,
+      });
+
      if (!confirmed) {
        return false;
      }
@@ -472,12 +471,12 @@ export class AddEditComponent implements OnInit, OnDestroy {

  async generatePassword(): Promise<boolean> {
    if (this.cipher.login?.password?.length) {
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("overwritePasswordConfirmation"),
-        this.i18nService.t("overwritePassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no")
-      );
+      const confirmed = await this.dialogService.openSimpleDialog({
+        title: { key: "overwritePassword" },
+        content: { key: "overwritePasswordConfirmation" },
+        type: SimpleDialogType.WARNING,
+      });
+
      if (!confirmed) {
        return false;
      }
--- a/libs/angular/src/vault/components/attachments.component.ts
+++ b/libs/angular/src/vault/components/attachments.component.ts
@@ -14,6 +14,8 @@ import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";

+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
@Directive()
 export class AttachmentsComponent implements OnInit {
  @Input() cipherId: string;
@@ -40,7 +42,8 @@ export class AttachmentsComponent implements OnInit {
    protected win: Window,
    protected logService: LogService,
    protected stateService: StateService,
-    protected fileDownloadService: FileDownloadService
+    protected fileDownloadService: FileDownloadService,
+    protected dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -100,15 +103,12 @@ export class AttachmentsComponent implements OnInit {
      return;
    }

-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteAttachmentConfirmation"),
-      this.i18nService.t("deleteAttachment"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning",
-      false,
-      this.componentName != "" ? this.componentName + " .modal-content" : null
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteAttachment" },
+      content: { key: "deleteAttachmentConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return;
    }
@@ -197,23 +197,24 @@ export class AttachmentsComponent implements OnInit {
    this.canAccessAttachments = canAccessPremium || this.cipher.organizationId != null;

    if (!this.canAccessAttachments) {
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("premiumRequiredDesc"),
-        this.i18nService.t("premiumRequired"),
-        this.i18nService.t("learnMore"),
-        this.i18nService.t("cancel")
-      );
+      const confirmed = await this.dialogService.openSimpleDialog({
+        title: { key: "premiumRequired" },
+        content: { key: "premiumRequiredDesc" },
+        acceptButtonText: { key: "learnMore" },
+        type: SimpleDialogType.SUCCESS,
+      });
+
      if (confirmed) {
        this.platformUtilsService.launchUri("https://vault.bitwarden.com/#/?premium=purchase");
      }
    } else if (!this.hasUpdatedKey) {
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("updateKey"),
-        this.i18nService.t("featureUnavailable"),
-        this.i18nService.t("learnMore"),
-        this.i18nService.t("cancel"),
-        "warning"
-      );
+      const confirmed = await this.dialogService.openSimpleDialog({
+        title: { key: "featureUnavailable" },
+        content: { key: "updateKey" },
+        acceptButtonText: { key: "learnMore" },
+        type: SimpleDialogType.WARNING,
+      });
+
      if (confirmed) {
        this.platformUtilsService.launchUri(
          "https://bitwarden.com/help/account-encryption-key/#rotate-your-encryption-key"
--- a/libs/angular/src/vault/components/folder-add-edit.component.ts
+++ b/libs/angular/src/vault/components/folder-add-edit.component.ts
@@ -7,6 +7,8 @@ import { FolderApiServiceAbstraction } from "@bitwarden/common/vault/abstraction
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";

+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
@Directive()
 export class FolderAddEditComponent implements OnInit {
  @Input() folderId: string;
@@ -25,7 +27,8 @@ export class FolderAddEditComponent implements OnInit {
    protected folderApiService: FolderApiServiceAbstraction,
    protected i18nService: I18nService,
    protected platformUtilsService: PlatformUtilsService,
-    private logService: LogService
+    private logService: LogService,
+    protected dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -61,15 +64,12 @@ export class FolderAddEditComponent implements OnInit {
  }

  async delete(): Promise<boolean> {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteFolderConfirmation"),
-      this.i18nService.t("deleteFolder"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning",
-      false,
-      this.componentName != "" ? this.componentName + " .modal-content" : null
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteFolder" },
+      content: { key: "deleteFolderConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
--- a/libs/angular/src/vault/components/premium.component.ts
+++ b/libs/angular/src/vault/components/premium.component.ts
@@ -6,6 +6,8 @@ import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";

+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
@Directive()
 export class PremiumComponent implements OnInit {
  isPremium = false;
@@ -17,7 +19,8 @@ export class PremiumComponent implements OnInit {
    protected platformUtilsService: PlatformUtilsService,
    protected apiService: ApiService,
    private logService: LogService,
-    protected stateService: StateService
+    protected stateService: StateService,
+    protected dialogService: DialogServiceAbstraction
  ) {}

  async ngOnInit() {
@@ -36,24 +39,24 @@ export class PremiumComponent implements OnInit {
  }

  async purchase() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("premiumPurchaseAlert"),
-      this.i18nService.t("premiumPurchase"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("cancel")
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "premiumPurchase" },
+      content: { key: "premiumPurchaseAlert" },
+      type: SimpleDialogType.INFO,
+    });
+
    if (confirmed) {
      this.platformUtilsService.launchUri("https://vault.bitwarden.com/#/?premium=purchase");
    }
  }

  async manage() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("premiumManageAlert"),
-      this.i18nService.t("premiumManage"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("cancel")
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "premiumManage" },
+      content: { key: "premiumManageAlert" },
+      type: SimpleDialogType.INFO,
+    });
+
    if (confirmed) {
      this.platformUtilsService.launchUri("https://vault.bitwarden.com/#/?premium=manage");
    }
--- a/libs/angular/src/vault/components/view.component.ts
+++ b/libs/angular/src/vault/components/view.component.ts
@@ -35,6 +35,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";

+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 const BroadcasterSubscriptionId = "ViewComponent";

@Directive()
@@ -84,7 +86,8 @@ export class ViewComponent implements OnDestroy, OnInit {
    protected passwordRepromptService: PasswordRepromptService,
    private logService: LogService,
    protected stateService: StateService,
-    protected fileDownloadService: FileDownloadService
+    protected fileDownloadService: FileDownloadService,
+    protected dialogService: DialogServiceAbstraction
  ) {}

  ngOnInit() {
@@ -174,15 +177,14 @@ export class ViewComponent implements OnDestroy, OnInit {
      return;
    }

-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t(
-        this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
-      ),
-      this.i18nService.t("deleteItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteItem" },
+      content: {
+        key: this.cipher.isDeleted ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation",
+      },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }
@@ -207,13 +209,12 @@ export class ViewComponent implements OnDestroy, OnInit {
      return false;
    }

-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("restoreItemConfirmation"),
-      this.i18nService.t("restoreItem"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "restoreItem" },
+      content: { key: "restoreItemConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
    if (!confirmed) {
      return false;
    }