[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

libs/angular/src/auth/components/change-password.component.ts

@@ -15,6 +15,7 @@ import { EncString } from "@bitwarden/common/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetric-crypto-key";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
 import { PasswordColorText } from "../../shared/components/password-strength/password-strength.component";
 
 @Directive()
@@ -42,7 +43,8 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
     protected passwordGenerationService: PasswordGenerationServiceAbstraction,
     protected platformUtilsService: PlatformUtilsService,
     protected policyService: PolicyService,
-    protected stateService: StateService
+    protected stateService: StateService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -157,37 +159,34 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
     const weakPassword = strengthResult != null && strengthResult.score < 3;
 
     if (weakPassword && this.leakedPassword) {
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("weakAndBreachedMasterPasswordDesc"),
-        this.i18nService.t("weakAndExposedMasterPassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "weakAndExposedMasterPassword" },
+        content: { key: "weakAndBreachedMasterPasswordDesc" },
+        type: SimpleDialogType.WARNING,
+      });
+
       if (!result) {
         return false;
       }
     } else {
       if (weakPassword) {
-        const result = await this.platformUtilsService.showDialog(
-          this.i18nService.t("weakMasterPasswordDesc"),
-          this.i18nService.t("weakMasterPassword"),
-          this.i18nService.t("yes"),
-          this.i18nService.t("no"),
-          "warning"
-        );
+        const result = await this.dialogService.openSimpleDialog({
+          title: { key: "weakMasterPassword" },
+          content: { key: "weakMasterPasswordDesc" },
+          type: SimpleDialogType.WARNING,
+        });
+
         if (!result) {
           return false;
         }
       }
       if (this.leakedPassword) {
-        const result = await this.platformUtilsService.showDialog(
-          this.i18nService.t("exposedMasterPasswordDesc"),
-          this.i18nService.t("exposedMasterPassword"),
-          this.i18nService.t("yes"),
-          this.i18nService.t("no"),
-          "warning"
-        );
+        const result = await this.dialogService.openSimpleDialog({
+          title: { key: "exposedMasterPassword" },
+          content: { key: "exposedMasterPasswordDesc" },
+          type: SimpleDialogType.WARNING,
+        });
+
         if (!result) {
           return false;
         }
@@ -198,12 +197,13 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
   }
 
   async logOut() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("logOutConfirmation"),
-      this.i18nService.t("logOut"),
-      this.i18nService.t("logOut"),
-      this.i18nService.t("cancel")
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "logOut" },
+      content: { key: "logOutConfirmation" },
+      acceptButtonText: { key: "logOut" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (confirmed) {
       this.messagingService.send("logout");
     }

libs/angular/src/auth/components/lock.component.ts

@@ -26,6 +26,8 @@ import { EncString } from "@bitwarden/common/models/domain/enc-string";
 import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetric-crypto-key";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class LockComponent implements OnInit, OnDestroy {
   masterPassword = "";
@@ -67,7 +69,8 @@ export class LockComponent implements OnInit, OnDestroy {
     protected ngZone: NgZone,
     protected policyApiService: PolicyApiServiceAbstraction,
     protected policyService: InternalPolicyService,
-    protected passwordGenerationService: PasswordGenerationServiceAbstraction
+    protected passwordGenerationService: PasswordGenerationServiceAbstraction,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -95,12 +98,13 @@ export class LockComponent implements OnInit, OnDestroy {
   }
 
   async logOut() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("logOutConfirmation"),
-      this.i18nService.t("logOut"),
-      this.i18nService.t("logOut"),
-      this.i18nService.t("cancel")
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "logOut" },
+      content: { key: "logOutConfirmation" },
+      acceptButtonText: { key: "logOut" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (confirmed) {
       this.messagingService.send("logout");
     }

libs/angular/src/auth/components/remove-password.component.ts

@@ -9,6 +9,8 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class RemovePasswordComponent implements OnInit {
   actionPromise: Promise<void | boolean>;
@@ -26,7 +28,8 @@ export class RemovePasswordComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private keyConnectorService: KeyConnectorService,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -55,13 +58,12 @@ export class RemovePasswordComponent implements OnInit {
   }
 
   async leave() {
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("leaveOrganizationConfirmation"),
-      this.organization.name,
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: this.organization.name,
+      content: { key: "leaveOrganizationConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }

libs/angular/src/auth/components/update-password.component.ts

@@ -18,6 +18,8 @@ import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetric-cr
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 import { Verification } from "@bitwarden/common/types/verification";
 
+import { DialogServiceAbstraction } from "../../services/dialog";
+
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
 
 @Directive()
@@ -41,7 +43,8 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
     private apiService: ApiService,
     stateService: StateService,
     private userVerificationService: UserVerificationService,
-    private logService: LogService
+    private logService: LogService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -50,7 +53,8 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

libs/angular/src/auth/components/update-temp-password.component.ts

@@ -21,6 +21,8 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/ge
 import { Verification } from "@bitwarden/common/types/verification";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 
+import { DialogServiceAbstraction } from "../../services/dialog";
+
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
 
 @Directive()
@@ -53,7 +55,8 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent {
     private syncService: SyncService,
     private logService: LogService,
     private userVerificationService: UserVerificationService,
-    private router: Router
+    private router: Router,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -62,7 +65,8 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent {
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

libs/angular/src/components/register.component.ts

@@ -25,6 +25,7 @@ import { RegisterRequest } from "@bitwarden/common/models/request/register.reque
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password";
 
 import { CaptchaProtectedComponent } from "../auth/components/captcha-protected.component";
+import { DialogServiceAbstraction, SimpleDialogType } from "../services/dialog";
 import { PasswordColorText } from "../shared/components/password-strength/password-strength.component";
 import { InputsFieldMatch } from "../validators/inputsFieldMatch.validator";
 
@@ -90,7 +91,8 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     protected passwordGenerationService: PasswordGenerationServiceAbstraction,
     environmentService: EnvironmentService,
     protected logService: LogService,
-    protected auditService: AuditService
+    protected auditService: AuditService,
+    protected dialogService: DialogServiceAbstraction
   ) {
     super(environmentService, i18nService, platformUtilsService);
     this.showTerms = !platformUtilsService.isSelfHost();
@@ -227,35 +229,32 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
       (await this.auditService.passwordLeaked(this.formGroup.controls.masterPassword.value)) > 0;
 
     if (passwordWeak && passwordLeak) {
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("weakAndBreachedMasterPasswordDesc"),
-        this.i18nService.t("weakAndExposedMasterPassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "weakAndExposedMasterPassword" },
+        content: { key: "weakAndBreachedMasterPasswordDesc" },
+        type: SimpleDialogType.WARNING,
+      });
+
       if (!result) {
         return { isValid: false };
       }
     } else if (passwordWeak) {
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("weakMasterPasswordDesc"),
-        this.i18nService.t("weakMasterPassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "weakMasterPassword" },
+        content: { key: "weakMasterPasswordDesc" },
+        type: SimpleDialogType.WARNING,
+      });
+
       if (!result) {
         return { isValid: false };
       }
     } else if (passwordLeak) {
-      const result = await this.platformUtilsService.showDialog(
-        this.i18nService.t("exposedMasterPasswordDesc"),
-        this.i18nService.t("exposedMasterPassword"),
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
+      const result = await this.dialogService.openSimpleDialog({
+        title: { key: "exposedMasterPassword" },
+        content: { key: "exposedMasterPasswordDesc" },
+        type: SimpleDialogType.WARNING,
+      });
+
       if (!result) {
         return { isValid: false };
       }

libs/angular/src/components/set-password.component.ts

@@ -23,6 +23,7 @@ import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/ge
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "../auth/components/change-password.component";
+import { DialogServiceAbstraction } from "../services/dialog";
 
 @Directive()
 export class SetPasswordComponent extends BaseChangePasswordComponent {
@@ -50,7 +51,8 @@ export class SetPasswordComponent extends BaseChangePasswordComponent {
     private route: ActivatedRoute,
     stateService: StateService,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -59,7 +61,8 @@ export class SetPasswordComponent extends BaseChangePasswordComponent {
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

libs/angular/src/services/dialog/dialog.service.abstraction.ts

@@ -0,0 +1,26 @@
+import { Dialog, DialogRef } from "@angular/cdk/dialog";
+
+import { SimpleDialogOptions } from "./simple-dialog-options";
+
+export abstract class DialogServiceAbstraction extends Dialog {
+  /**
+   * Opens a simple dialog, returns true if the user accepted the dialog.
+   *
+   * @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
+   * @returns `boolean` - True if the user accepted the dialog, false otherwise.
+   */
+  openSimpleDialog: (simpleDialogOptions: SimpleDialogOptions) => Promise<boolean>;
+
+  /**
+   * Opens a simple dialog.
+   *
+   * @deprecated Use `openSimpleDialogAcceptedPromise` instead. If you find a use case for the `dialogRef`
+   * please let #wg-component-library know and we can un-deprecate this method.
+   *
+   * @param {SimpleDialogOptions} simpleDialogOptions - An object containing options for the dialog.
+   * @returns `DialogRef` - The reference to the opened dialog.
+   * Contains a closed observable which can be subscribed to for determining which button
+   * a user pressed (see `SimpleDialogCloseType`)
+   */
+  openSimpleDialogRef: (simpleDialogOptions: SimpleDialogOptions) => DialogRef;
+}

libs/angular/src/services/dialog/dialog.service.ts

@@ -0,0 +1,65 @@
+import {
+  DialogRef,
+  DialogConfig,
+  Dialog,
+  DEFAULT_DIALOG_CONFIG,
+  DIALOG_SCROLL_STRATEGY,
+} from "@angular/cdk/dialog";
+import { Overlay, OverlayContainer } from "@angular/cdk/overlay";
+import { ComponentType } from "@angular/cdk/portal";
+import { Inject, Injectable, Injector, Optional, SkipSelf, TemplateRef } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { DialogServiceAbstraction } from "./dialog.service.abstraction";
+import { SimpleDialogOptions } from "./simple-dialog-options";
+import { Translation } from "./translation";
+
+// This is a temporary base class for Dialogs. It is intended to be removed once the Component Library is adopted by each app.
+@Injectable()
+export abstract class DialogService extends Dialog implements DialogServiceAbstraction {
+  constructor(
+    /** Parent class constructor */
+    _overlay: Overlay,
+    _injector: Injector,
+    @Optional() @Inject(DEFAULT_DIALOG_CONFIG) _defaultOptions: DialogConfig,
+    @Optional() @SkipSelf() _parentDialog: Dialog,
+    _overlayContainer: OverlayContainer,
+    @Inject(DIALOG_SCROLL_STRATEGY) scrollStrategy: any,
+    protected i18nService: I18nService
+  ) {
+    super(_overlay, _injector, _defaultOptions, _parentDialog, _overlayContainer, scrollStrategy);
+  }
+
+  async openSimpleDialog(options: SimpleDialogOptions): Promise<boolean> {
+    throw new Error("Method not implemented.");
+  }
+
+  openSimpleDialogRef(simpleDialogOptions: SimpleDialogOptions): DialogRef {
+    throw new Error("Method not implemented.");
+  }
+
+  override open<R = unknown, D = unknown, C = unknown>(
+    componentOrTemplateRef: ComponentType<C> | TemplateRef<C>,
+    config?: DialogConfig<D, DialogRef<R, C>>
+  ): DialogRef<R, C> {
+    throw new Error("Method not implemented.");
+  }
+
+  protected translate(translation: string | Translation, defaultKey?: string): string {
+    if (translation == null && defaultKey == null) {
+      return null;
+    }
+
+    if (translation == null) {
+      return this.i18nService.t(defaultKey);
+    }
+
+    // Translation interface use implies we must localize.
+    if (typeof translation === "object") {
+      return this.i18nService.t(translation.key, ...(translation.placeholders ?? []));
+    }
+
+    return translation;
+  }
+}

libs/angular/src/services/dialog/index.ts

@@ -0,0 +1,6 @@
+export * from "./dialog.service.abstraction";
+export * from "./simple-dialog-options";
+export * from "./simple-dialog-type.enum";
+export * from "./simple-dialog-close-type.enum";
+export * from "./dialog.service";
+export * from "./translation";

libs/angular/src/services/dialog/simple-dialog-close-type.enum.ts

@@ -0,0 +1,4 @@
+export enum SimpleDialogCloseType {
+  ACCEPT = "accept",
+  CANCEL = "cancel",
+}

libs/angular/src/services/dialog/simple-dialog-options.ts

@@ -0,0 +1,51 @@
+import { SimpleDialogType } from "./simple-dialog-type.enum";
+import { Translation } from "./translation";
+
+// Using type lets devs skip optional params w/out having to pass undefined.
+/**
+ *
+ * @typedef {Object} SimpleDialogOptions - A configuration type for the Simple Dialog component
+ */
+export type SimpleDialogOptions = {
+  /**
+   * Dialog title.
+   *
+   * If not localized, pass in a `Translation`. */
+  title: string | Translation;
+
+  /** Dialog content.
+   *
+   * If not localized, pass in a `Translation`. */
+  content: string | Translation;
+
+  /** Dialog type. It controls default icons and icon colors. */
+  type: SimpleDialogType;
+
+  /** Dialog custom icon class.
+   *
+   * If not provided, a standard icon will be inferred from type.
+   * Note: icon color is enforced based on dialog type.  */
+  icon?: string;
+
+  /** Dialog custom accept button text.
+   *
+   * If not provided, ("yes" | i18n) will be used.
+   *
+   * If not localized, pass in a `Translation`  */
+  acceptButtonText?: string | Translation;
+
+  /**
+   * Dialog custom cancel button text.
+   *
+   * If not provided, ("no" | i18n) will be used.
+   *
+   * If custom acceptButtonText is passed in, ("cancel" | i18n) will be used.
+   *
+   * If null is provided, the cancel button will be removed.
+   *
+   * If not localized, pass in a `Translation` */
+  cancelButtonText?: string | Translation;
+
+  /** Whether or not the user can use escape or clicking the backdrop to close the dialog */
+  disableClose?: boolean;
+};

libs/angular/src/services/dialog/simple-dialog-type.enum.ts

@@ -0,0 +1,7 @@
+export enum SimpleDialogType {
+  PRIMARY = "primary",
+  SUCCESS = "success",
+  INFO = "info",
+  WARNING = "warning",
+  DANGER = "danger",
+}

libs/angular/src/services/dialog/translation.ts

@@ -0,0 +1,4 @@
+export interface Translation {
+  key: string;
+  placeholders?: Array<string | number>;
+}

libs/angular/src/tools/export/components/export.component.ts

@@ -14,6 +14,8 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { EncryptedExportType, EventType } from "@bitwarden/common/enums";
 import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../../services/dialog";
+
 @Directive()
 export class ExportComponent implements OnInit, OnDestroy {
   @Output() onSaved = new EventEmitter();
@@ -48,7 +50,8 @@ export class ExportComponent implements OnInit, OnDestroy {
     private logService: LogService,
     private userVerificationService: UserVerificationService,
     private formBuilder: UntypedFormBuilder,
-    protected fileDownloadService: FileDownloadService
+    protected fileDownloadService: FileDownloadService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -126,25 +129,22 @@ export class ExportComponent implements OnInit, OnDestroy {
 
   async warningDialog() {
     if (this.encryptedFormat) {
-      return await this.platformUtilsService.showDialog(
-        "<p>" +
+      return await this.dialogService.openSimpleDialog({
+        title: { key: "confirmVaultExport" },
+        content:
           this.i18nService.t("encExportKeyWarningDesc") +
-          "<p>" +
+          " " +
           this.i18nService.t("encExportAccountWarningDesc"),
-        this.i18nService.t("confirmVaultExport"),
-        this.i18nService.t("exportVault"),
-        this.i18nService.t("cancel"),
-        "warning",
-        true
-      );
+        acceptButtonText: { key: "exportVault" },
+        type: SimpleDialogType.WARNING,
+      });
     } else {
-      return await this.platformUtilsService.showDialog(
-        this.i18nService.t("exportWarningDesc"),
-        this.i18nService.t("confirmVaultExport"),
-        this.i18nService.t("exportVault"),
-        this.i18nService.t("cancel"),
-        "warning"
-      );
+      return await this.dialogService.openSimpleDialog({
+        title: { key: "confirmVaultExport" },
+        content: { key: "exportWarningDesc" },
+        acceptButtonText: { key: "exportVault" },
+        type: SimpleDialogType.WARNING,
+      });
     }
   }
 

libs/angular/src/tools/send/add-edit.component.ts

@@ -19,6 +19,8 @@ import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class AddEditComponent implements OnInit, OnDestroy {
   @Input() sendId: string;
@@ -60,7 +62,8 @@ export class AddEditComponent implements OnInit, OnDestroy {
     protected policyService: PolicyService,
     private logService: LogService,
     protected stateService: StateService,
-    protected sendApiService: SendApiService
+    protected sendApiService: SendApiService,
+    protected dialogService: DialogServiceAbstraction
   ) {
     this.typeOptions = [
       { name: i18nService.t("sendTypeFile"), value: SendType.File },
@@ -229,15 +232,13 @@ export class AddEditComponent implements OnInit, OnDestroy {
     if (this.deletePromise != null) {
       return false;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteSendConfirmation"),
-      this.i18nService.t("deleteSend"),
-      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: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }
@@ -308,14 +309,14 @@ export class AddEditComponent implements OnInit, OnDestroy {
         this.i18nService.t(this.editMode ? "editedSend" : "createdSend")
       );
     } else {
-      await this.platformUtilsService.showDialog(
-        this.i18nService.t(this.editMode ? "editedSend" : "createdSend"),
-        null,
-        this.i18nService.t("ok"),
-        null,
-        "success",
-        null
-      );
+      await this.dialogService.openSimpleDialog({
+        title: "",
+        content: { key: this.editMode ? "editedSend" : "createdSend" },
+        acceptButtonText: { key: "ok" },
+        cancelButtonText: null,
+        type: SimpleDialogType.SUCCESS,
+      });
+
       await this.copyLinkToClipboard(this.link);
     }
   }

libs/angular/src/tools/send/send.component.ts

@@ -13,6 +13,8 @@ import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "../../services/dialog";
+
 @Directive()
 export class SendComponent implements OnInit, OnDestroy {
   disableSend = false;
@@ -49,7 +51,8 @@ export class SendComponent implements OnInit, OnDestroy {
     protected searchService: SearchService,
     protected policyService: PolicyService,
     private logService: LogService,
-    protected sendApiService: SendApiService
+    protected sendApiService: SendApiService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -125,13 +128,13 @@ export class SendComponent implements OnInit, OnDestroy {
     if (this.actionPromise != null || s.password == null) {
       return;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("removePasswordConfirmation"),
-      this.i18nService.t("removePassword"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removePassword" },
+      content: { key: "removePasswordConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }
@@ -156,13 +159,13 @@ export class SendComponent implements OnInit, OnDestroy {
     if (this.actionPromise != null) {
       return false;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
-      this.i18nService.t("deleteSendConfirmation"),
-      this.i18nService.t("deleteSend"),
-      this.i18nService.t("yes"),
-      this.i18nService.t("no"),
-      "warning"
-    );
+
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "deleteSend" },
+      content: { key: "deleteSendConfirmation" },
+      type: SimpleDialogType.WARNING,
+    });
+
     if (!confirmed) {
       return false;
     }

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;
       }

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"

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;
     }

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");
     }

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;
     }