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

libs/common/src/abstractions/platformUtils.service.ts

@@ -27,15 +27,6 @@ export abstract class PlatformUtilsService {
     text: string | string[],
     options?: ToastOptions
   ) => void;
-  showDialog: (
-    body: string,
-    title?: string,
-    confirmText?: string,
-    cancelText?: string,
-    type?: string,
-    bodyIsHtml?: boolean,
-    target?: string
-  ) => Promise<boolean>;
   isDev: () => boolean;
   isSelfHost: () => boolean;
   copyToClipboard: (text: string, options?: any) => void | boolean;

libs/components/src/dialog/dialog.module.ts

@@ -1,6 +1,8 @@
 import { DialogModule as CdkDialogModule } from "@angular/cdk/dialog";
 import { NgModule } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
+
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
@@ -29,6 +31,11 @@ import { IconDirective, SimpleDialogComponent } from "./simple-dialog/simple-dia
     DialogCloseDirective,
     IconDirective,
   ],
-  providers: [DialogService],
+  providers: [
+    {
+      provide: DialogServiceAbstraction,
+      useClass: DialogService,
+    },
+  ],
 })
 export class DialogModule {}

libs/components/src/dialog/dialog.service.ts

@@ -16,26 +16,24 @@ import {
   TemplateRef,
 } from "@angular/core";
 import { NavigationEnd, Router } from "@angular/router";
-import { filter, Subject, switchMap, takeUntil } from "rxjs";
+import { filter, firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
 
+import {
+  DialogServiceAbstraction,
+  SimpleDialogCloseType,
+} from "@bitwarden/angular/services/dialog";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 
-import { SimpleDialogOptions } from "./simple-configurable-dialog/models/simple-dialog-options";
+import { SimpleDialogOptions } from "../../../angular/src/services/dialog/simple-dialog-options";
+
 import { SimpleConfigurableDialogComponent } from "./simple-configurable-dialog/simple-configurable-dialog.component";
 
 @Injectable()
-export class DialogService extends Dialog implements OnDestroy {
+export class DialogService extends Dialog implements OnDestroy, DialogServiceAbstraction {
   private _destroy$ = new Subject<void>();
 
-  private backDropClasses = [
-    "tw-fixed",
-    "tw-bg-black",
-    "tw-bg-opacity-30",
-    "tw-inset-0",
-    // CDK dialog panels have a default z-index of 1000. Matching this allows us to easily stack dialogs.
-    "tw-z-[1000]",
-  ];
+  private backDropClasses = ["tw-fixed", "tw-bg-black", "tw-bg-opacity-30", "tw-inset-0"];
 
   constructor(
     /** Parent class constructor */
@@ -83,16 +81,33 @@ export class DialogService extends Dialog implements OnDestroy {
     return super.open(componentOrTemplateRef, config);
   }
 
+  /**
+   * 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.
+   */
+  async openSimpleDialog(simpleDialogOptions: SimpleDialogOptions): Promise<boolean> {
+    const dialogRef = this.open(SimpleConfigurableDialogComponent, {
+      data: simpleDialogOptions,
+      disableClose: simpleDialogOptions.disableClose,
+    });
+
+    return (await firstValueFrom(dialogRef.closed)) == SimpleDialogCloseType.ACCEPT;
+  }
+
   /**
    * Opens a simple dialog.
    *
+   * @deprecated Use `openSimpleDialog` 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`)
    */
-  openSimpleDialog(simpleDialogOptions: SimpleDialogOptions): DialogRef {
-    // Method needs to return dialog reference so devs can sub to closed and get results.
+  openSimpleDialogRef(simpleDialogOptions: SimpleDialogOptions): DialogRef {
     return this.open(SimpleConfigurableDialogComponent, {
       data: simpleDialogOptions,
       disableClose: simpleDialogOptions.disableClose,

libs/components/src/dialog/index.ts

@@ -1,5 +1 @@
 export * from "./dialog.module";
-export * from "./dialog.service";
-export * from "./simple-configurable-dialog/models/simple-dialog-options";
-export * from "./simple-configurable-dialog/models/simple-dialog-type.enum";
-export * from "./simple-configurable-dialog/models/simple-dialog-close-type.enum";

libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.component.ts

@@ -1,13 +1,14 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 
+import {
+  SimpleDialogType,
+  SimpleDialogCloseType,
+  Translation,
+} from "@bitwarden/angular/services/dialog";
+import { SimpleDialogOptions } from "@bitwarden/angular/services/dialog/simple-dialog-options";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
-import { SimpleDialogCloseType } from "./models/simple-dialog-close-type.enum";
-import { SimpleDialogOptions } from "./models/simple-dialog-options";
-import { SimpleDialogType } from "./models/simple-dialog-type.enum";
-import { Translation } from "./models/translation";
-
 const DEFAULT_ICON: Record<SimpleDialogType, string> = {
   [SimpleDialogType.PRIMARY]: "bwi-business",
   [SimpleDialogType.SUCCESS]: "bwi-star",
@@ -70,7 +71,7 @@ export class SimpleConfigurableDialogComponent {
   private translate(translation: string | Translation, defaultKey?: string): string {
     // Translation interface use implies we must localize.
     if (typeof translation === "object") {
-      return this.i18nService.t(translation.key, ...translation.placeholders);
+      return this.i18nService.t(translation.key, ...(translation.placeholders ?? []));
     }
 
     // Use string that is already translated or use default key post translate

libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts

@@ -1,8 +1,8 @@
-import { DialogModule, DialogRef } from "@angular/cdk/dialog";
+import { DialogModule } from "@angular/cdk/dialog";
 import { Component } from "@angular/core";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
-import { firstValueFrom } from "rxjs";
 
+import { SimpleDialogType, SimpleDialogOptions } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 import { ButtonModule } from "../../button";
@@ -15,10 +15,6 @@ import { DialogCloseDirective } from "../directives/dialog-close.directive";
 import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
 import { SimpleDialogComponent } from "../simple-dialog/simple-dialog.component";
 
-import { SimpleDialogCloseType } from "./models/simple-dialog-close-type.enum";
-import { SimpleDialogOptions } from "./models/simple-dialog-options";
-import { SimpleDialogType } from "./models/simple-dialog-type.enum";
-
 @Component({
   template: `
     <h2 class="tw-text-main">Dialog Type Examples:</h2>
@@ -114,8 +110,7 @@ import { SimpleDialogType } from "./models/simple-dialog-type.enum";
     </div>
 
     <bit-callout *ngIf="showCallout" [type]="calloutType" title="Dialog Close Result">
-      <span *ngIf="dialogCloseResult">{{ dialogCloseResult }}</span>
-      <span *ngIf="!dialogCloseResult">undefined</span>
+      {{ dialogCloseResult }}
     </bit-callout>
   `,
 })
@@ -189,22 +184,19 @@ class StoryDialogComponent {
 
   showCallout = false;
   calloutType = "info";
-  dialogCloseResult: undefined | SimpleDialogCloseType;
+  dialogCloseResult: boolean;
 
   constructor(public dialogService: DialogService, private i18nService: I18nService) {}
 
-  openSimpleConfigurableDialog(opts: SimpleDialogOptions) {
-    const dialogReference: DialogRef = this.dialogService.openSimpleDialog(opts);
+  async openSimpleConfigurableDialog(opts: SimpleDialogOptions) {
+    this.dialogCloseResult = await this.dialogService.openSimpleDialog(opts);
 
-    firstValueFrom(dialogReference.closed).then((result: SimpleDialogCloseType | undefined) => {
-      this.showCallout = true;
-      this.dialogCloseResult = result;
-      if (result && result === SimpleDialogCloseType.ACCEPT) {
-        this.calloutType = "success";
-      } else {
-        this.calloutType = "info";
-      }
-    });
+    this.showCallout = true;
+    if (this.dialogCloseResult) {
+      this.calloutType = "success";
+    } else {
+      this.calloutType = "info";
+    }
   }
 }