[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

apps/browser/src/auth/popup/lock.component.ts

@@ -2,6 +2,7 @@ import { Component, NgZone } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { LockComponent as BaseLockComponent } from "@bitwarden/angular/auth/components/lock.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -48,7 +49,8 @@ export class LockComponent extends BaseLockComponent {
     policyApiService: PolicyApiServiceAbstraction,
     policyService: InternalPolicyService,
     passwordGenerationService: PasswordGenerationServiceAbstraction,
-    private authService: AuthService
+    private authService: AuthService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       router,
@@ -66,7 +68,8 @@ export class LockComponent extends BaseLockComponent {
       ngZone,
       policyApiService,
       policyService,
-      passwordGenerationService
+      passwordGenerationService,
+      dialogService
     );
     this.successRoute = "/tabs/current";
     this.isInitialLockScreen = (window as any).previousPopupUrl == null;

apps/browser/src/auth/popup/register.component.ts

@@ -3,6 +3,7 @@ import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -36,7 +37,8 @@ export class RegisterComponent extends BaseRegisterComponent {
     passwordGenerationService: PasswordGenerationServiceAbstraction,
     environmentService: EnvironmentService,
     logService: LogService,
-    auditService: AuditService
+    auditService: AuditService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       formValidationErrorService,
@@ -51,7 +53,8 @@ export class RegisterComponent extends BaseRegisterComponent {
       passwordGenerationService,
       environmentService,
       logService,
-      auditService
+      auditService,
+      dialogService
     );
   }
 }

apps/browser/src/auth/popup/set-password.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { SetPasswordComponent as BaseSetPasswordComponent } from "@bitwarden/angular/components/set-password.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -34,7 +35,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
     syncService: SyncService,
     route: ActivatedRoute,
     organizationApiService: OrganizationApiServiceAbstraction,
-    organizationUserService: OrganizationUserService
+    organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -50,7 +52,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
       route,
       stateService,
       organizationApiService,
-      organizationUserService
+      organizationUserService,
+      dialogService
     );
   }
 }

apps/browser/src/auth/popup/two-factor.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
 import { TwoFactorComponent as BaseTwoFactorComponent } from "@bitwarden/angular/auth/components/two-factor.component";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService } from "@bitwarden/common/abstractions/appId.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -46,7 +47,8 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     logService: LogService,
     twoFactorService: TwoFactorService,
     appIdService: AppIdService,
-    loginService: LoginService
+    loginService: LoginService,
+    private dialogService: DialogServiceAbstraction
   ) {
     super(
       authService,
@@ -102,12 +104,11 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       this.selectedProviderType === TwoFactorProviderType.Email &&
       this.popupUtilsService.inPopup(window)
     ) {
-      const confirmed = await this.platformUtilsService.showDialog(
+      const confirmed = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("popup2faCloseMessage"),
+        title: { key: "warning" },
-        null,
+        content: { key: "popup2faCloseMessage" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("no")
+      });
-      );
       if (confirmed) {
         this.popupUtilsService.popOut(window);
       }

apps/browser/src/background/nativeMessaging.background.ts

@@ -153,10 +153,11 @@ export class NativeMessagingBackground {
             this.connected = false;
 
             this.messagingService.send("showDialog", {
-              text: this.i18nService.t("nativeMessagingInvalidEncryptionDesc"),
+              title: { key: "nativeMessagingInvalidEncryptionTitle" },
-              title: this.i18nService.t("nativeMessagingInvalidEncryptionTitle"),
+              content: { key: "nativeMessagingInvalidEncryptionDesc" },
-              confirmText: this.i18nService.t("ok"),
+              acceptButtonText: { key: "ok" },
-              type: "error",
+              cancelButtonText: null,
+              type: "danger",
             });
             break;
           case "verifyFingerprint": {
@@ -199,10 +200,11 @@ export class NativeMessagingBackground {
 
   showWrongUserDialog() {
     this.messagingService.send("showDialog", {
-      text: this.i18nService.t("nativeMessagingWrongUserDesc"),
+      title: { key: "nativeMessagingWrongUserTitle" },
-      title: this.i18nService.t("nativeMessagingWrongUserTitle"),
+      content: { key: "nativeMessagingWrongUserDesc" },
-      confirmText: this.i18nService.t("ok"),
+      acceptButtonText: { key: "ok" },
-      type: "error",
+      cancelButtonText: null,
+      type: "danger",
     });
   }
 
@@ -258,10 +260,11 @@ export class NativeMessagingBackground {
       this.connected = false;
 
       this.messagingService.send("showDialog", {
-        text: this.i18nService.t("nativeMessagingInvalidEncryptionDesc"),
+        title: { key: "nativeMessagingInvalidEncryptionTitle" },
-        title: this.i18nService.t("nativeMessagingInvalidEncryptionTitle"),
+        content: { key: "nativeMessagingInvalidEncryptionDesc" },
-        confirmText: this.i18nService.t("ok"),
+        acceptButtonText: { key: "ok" },
-        type: "error",
+        cancelButtonText: null,
+        type: "danger",
       });
     }
   }
@@ -285,18 +288,20 @@ export class NativeMessagingBackground {
 
         if (message.response === "not enabled") {
           this.messagingService.send("showDialog", {
-            text: this.i18nService.t("biometricsNotEnabledDesc"),
+            title: { key: "biometricsNotEnabledTitle" },
-            title: this.i18nService.t("biometricsNotEnabledTitle"),
+            content: { key: "biometricsNotEnabledDesc" },
-            confirmText: this.i18nService.t("ok"),
+            acceptButtonText: { key: "ok" },
-            type: "error",
+            cancelButtonText: null,
+            type: "danger",
           });
           break;
         } else if (message.response === "not supported") {
           this.messagingService.send("showDialog", {
-            text: this.i18nService.t("biometricsNotSupportedDesc"),
+            title: { key: "biometricsNotSupportedTitle" },
-            title: this.i18nService.t("biometricsNotSupportedTitle"),
+            content: { key: "biometricsNotSupportedDesc" },
-            confirmText: this.i18nService.t("ok"),
+            acceptButtonText: { key: "ok" },
-            type: "error",
+            cancelButtonText: null,
+            type: "danger",
           });
           break;
         }
@@ -377,13 +382,8 @@ export class NativeMessagingBackground {
       await this.cryptoService.getFingerprint(await this.stateService.getUserId(), this.publicKey)
     ).join(" ");
 
-    this.messagingService.send("showDialog", {
+    this.messagingService.send("showNativeMessagingFinterprintDialog", {
-      html: `${this.i18nService.t(
+      fingerprint: fingerprint,
-        "desktopIntegrationVerificationText"
-      )}<br><br><strong>${fingerprint}</strong>`,
-      title: this.i18nService.t("desktopSyncVerificationTitle"),
-      confirmText: this.i18nService.t("ok"),
-      type: "warning",
     });
   }
 }

apps/browser/src/background/runtime.background.ts

@@ -119,9 +119,6 @@ export default class RuntimeBackground {
           BrowserApi.closeBitwardenExtensionTab();
         }, msg.delay ?? 0);
         break;
-      case "showDialogResolve":
-        this.platformUtilsService.resolveDialogPromise(msg.dialogId, msg.confirmed);
-        break;
       case "bgCollectPageDetails":
         await this.main.collectPageDetailsForContentScript(sender.tab, msg.sender, sender.frameId);
         break;
@@ -204,10 +201,10 @@ export default class RuntimeBackground {
         break;
       case "emailVerificationRequired":
         this.messagingService.send("showDialog", {
-          dialogId: "emailVerificationRequired",
+          title: { key: "emailVerificationRequired" },
-          title: this.i18nService.t("emailVerificationRequired"),
+          content: { key: "emailVerificationRequiredDesc" },
-          text: this.i18nService.t("emailVerificationRequiredDesc"),
+          acceptButtonText: { key: "ok" },
-          confirmText: this.i18nService.t("ok"),
+          cancelButtonText: null,
           type: "info",
         });
         break;

apps/browser/src/popup/app.component.ts

@@ -10,8 +10,9 @@ import { DomSanitizer } from "@angular/platform-browser";
 import { NavigationEnd, Router, RouterOutlet } from "@angular/router";
 import { IndividualConfig, ToastrService } from "ngx-toastr";
 import { Subject, takeUntil } from "rxjs";
-import Swal, { SweetAlertIcon } from "sweetalert2";
+import Swal from "sweetalert2";
 
+import { DialogServiceAbstraction, SimpleDialogOptions } from "@bitwarden/angular/services/dialog";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -48,7 +49,8 @@ export class AppComponent implements OnInit, OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     private ngZone: NgZone,
     private sanitizer: DomSanitizer,
-    private platformUtilsService: PlatformUtilsService
+    private platformUtilsService: PlatformUtilsService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -102,6 +104,9 @@ export class AppComponent implements OnInit, OnDestroy {
         }
       } else if (msg.command === "showDialog") {
         await this.showDialog(msg);
+      } else if (msg.command === "showNativeMessagingFinterprintDialog") {
+        // TODO: Should be refactored to live in another service.
+        await this.showNativeMessagingFingerprintDialog(msg);
       } else if (msg.command === "showToast") {
         this.ngZone.run(() => {
           this.showToast(msg);
@@ -222,51 +227,24 @@ export class AppComponent implements OnInit, OnDestroy {
     this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
   }
 
-  private async showDialog(msg: any) {
+  private async showDialog(msg: SimpleDialogOptions) {
-    let iconClasses: string = null;
+    await this.dialogService.openSimpleDialog(msg);
-    const type = msg.type;
+  }
-    if (type != null) {
-      // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
-      switch (type) {
-        case "success":
-          iconClasses = "bwi-check text-success";
-          break;
-        case "warning":
-          iconClasses = "bwi-exclamation-triangle text-warning";
-          break;
-        case "error":
-          iconClasses = "bwi-error text-danger";
-          break;
-        case "info":
-          iconClasses = "bwi-info-circle text-info";
-          break;
-        default:
-          break;
-      }
-    }
 
-    const cancelText = msg.cancelText;
+  private async showNativeMessagingFingerprintDialog(msg: any) {
-    const confirmText = msg.confirmText;
+    await Swal.fire({
-    const confirmed = await Swal.fire({
       heightAuto: false,
       buttonsStyling: false,
-      icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
+      icon: "warning",
-      iconHtml:
+      iconHtml: '<i class="swal-custom-icon bwi bwi-exclamation-triangle text-warning"></i>',
-        iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined,
+      html: `${this.i18nService.t("desktopIntegrationVerificationText")}<br><br><strong>${
-      text: msg.text,
+        msg.fingerprint
-      html: msg.html,
+      }</strong>`,
-      titleText: msg.title,
+      titleText: this.i18nService.t("desktopSyncVerificationTitle"),
-      showCancelButton: cancelText != null,
-      cancelButtonText: cancelText,
       showConfirmButton: true,
-      confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
+      confirmButtonText: this.i18nService.t("ok"),
       timer: 300000,
     });
-
-    this.messagingService.send("showDialogResolve", {
-      dialogId: msg.dialogId,
-      confirmed: confirmed.value,
-    });
   }
 
   private async clearComponentStates() {

apps/browser/src/popup/app.module.ts

@@ -1,14 +1,10 @@
 import { A11yModule } from "@angular/cdk/a11y";
+import { DialogModule } from "@angular/cdk/dialog";
 import { DragDropModule } from "@angular/cdk/drag-drop";
 import { LayoutModule } from "@angular/cdk/layout";
 import { OverlayModule } from "@angular/cdk/overlay";
 import { ScrollingModule } from "@angular/cdk/scrolling";
-// eslint-disable-next-line import/order
 import { CurrencyPipe, DatePipe } from "@angular/common";
-
-// Register the locales for the application
-import "./locales";
-
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
@@ -76,6 +72,9 @@ import { SyncComponent } from "./settings/sync.component";
 import { VaultTimeoutInputComponent } from "./settings/vault-timeout-input.component";
 import { TabsComponent } from "./tabs.component";
 
+// Register the locales for the application
+import "./locales";
+
 @NgModule({
   imports: [
     A11yModule,
@@ -96,6 +95,7 @@ import { TabsComponent } from "./tabs.component";
     ReactiveFormsModule,
     ScrollingModule,
     ServicesModule,
+    DialogModule,
   ],
   declarations: [
     ActionButtonsComponent,

apps/browser/src/popup/services/browser-dialog.service.ts

@@ -0,0 +1,79 @@
+import { Injectable } from "@angular/core";
+import Swal, { SweetAlertIcon } from "sweetalert2";
+
+import {
+  DialogService,
+  SimpleDialogOptions,
+  SimpleDialogType,
+} from "@bitwarden/angular/services/dialog";
+
+@Injectable()
+export class BrowserDialogService extends DialogService {
+  async openSimpleDialog(options: SimpleDialogOptions) {
+    const defaultCancel =
+      options.cancelButtonText === undefined
+        ? options.acceptButtonText == null
+          ? "no"
+          : "cancel"
+        : null;
+
+    return this.legacyShowDialog(
+      this.translate(options.content),
+      this.translate(options.title),
+      this.translate(options.acceptButtonText, "yes"),
+      this.translate(options.cancelButtonText, defaultCancel),
+      options.type
+    );
+  }
+
+  private async legacyShowDialog(
+    body: string,
+    title?: string,
+    confirmText?: string,
+    cancelText?: string,
+    type?: SimpleDialogType
+  ) {
+    let iconClasses: string = null;
+    let icon: SweetAlertIcon = null;
+    if (type != null) {
+      // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
+      switch (type) {
+        case "success":
+          iconClasses = "bwi-check text-success";
+          icon = "success";
+          break;
+        case "warning":
+          iconClasses = "bwi-exclamation-triangle text-warning";
+          icon = "warning";
+          break;
+        case "danger":
+          iconClasses = "bwi-error text-danger";
+          icon = "error";
+          break;
+        case "info":
+          iconClasses = "bwi-info-circle text-info";
+          icon = "info";
+          break;
+        default:
+          break;
+      }
+    }
+
+    const confirmed = await Swal.fire({
+      heightAuto: false,
+      buttonsStyling: false,
+      icon: icon,
+      iconHtml:
+        iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined,
+      text: body,
+      titleText: title,
+      showCancelButton: cancelText != null,
+      cancelButtonText: cancelText,
+      showConfirmButton: true,
+      confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
+      timer: 300000,
+    });
+
+    return confirmed.value;
+  }
+}

apps/browser/src/popup/services/services.module.ts

@@ -2,6 +2,7 @@ import { APP_INITIALIZER, LOCALE_ID, NgModule } from "@angular/core";
 
 import { LockGuard as BaseLockGuardService } from "@bitwarden/angular/auth/guards/lock.guard";
 import { UnauthGuard as BaseUnauthGuardService } from "@bitwarden/angular/auth/guards/unauth.guard";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { MEMORY_STORAGE, SECURE_STORAGE } from "@bitwarden/angular/services/injection-tokens";
 import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
 import { ThemingService } from "@bitwarden/angular/services/theming/theming.service";
@@ -101,6 +102,7 @@ import { PasswordRepromptService } from "../../vault/popup/services/password-rep
 import { BrowserFolderService } from "../../vault/services/browser-folder.service";
 import { VaultFilterService } from "../../vault/services/vault-filter.service";
 
+import { BrowserDialogService } from "./browser-dialog.service";
 import { DebounceNavigationService } from "./debounceNavigationService";
 import { InitService } from "./init.service";
 import { PopupSearchService } from "./popup-search.service";
@@ -489,6 +491,10 @@ function getBgService<T>(service: keyof MainBackground) {
       useClass: BrowserConfigService,
       deps: [StateServiceAbstraction, ConfigApiServiceAbstraction],
     },
+    {
+      provide: DialogServiceAbstraction,
+      useClass: BrowserDialogService,
+    },
   ],
 })
 export class ServicesModule {}

apps/browser/src/popup/settings/folder-add-edit.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -22,9 +23,17 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     platformUtilsService: PlatformUtilsService,
     private router: Router,
     private route: ActivatedRoute,
-    logService: LogService
+    logService: LogService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(folderService, folderApiService, i18nService, platformUtilsService, logService);
+    super(
+      folderService,
+      folderApiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      dialogService
+    );
   }
 
   async ngOnInit() {

apps/browser/src/popup/settings/premium.component.ts

@@ -1,6 +1,7 @@
 import { CurrencyPipe, Location } from "@angular/common";
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { PremiumComponent as BasePremiumComponent } from "@bitwarden/angular/vault/components/premium.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -22,9 +23,10 @@ export class PremiumComponent extends BasePremiumComponent {
     stateService: StateService,
     logService: LogService,
     private location: Location,
-    private currencyPipe: CurrencyPipe
+    private currencyPipe: CurrencyPipe,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(i18nService, platformUtilsService, apiService, logService, stateService);
+    super(i18nService, platformUtilsService, apiService, logService, stateService, dialogService);
 
     // Support old price string. Can be removed in future once all translations are properly updated.
     const thePrice = this.currencyPipe.transform(this.price, "$");

apps/browser/src/popup/settings/settings.component.ts

@@ -4,6 +4,7 @@ import { Router } from "@angular/router";
 import { concatMap, debounceTime, filter, map, Observable, Subject, takeUntil, tap } from "rxjs";
 import Swal from "sweetalert2";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -82,7 +83,8 @@ export class SettingsComponent implements OnInit {
     private stateService: StateService,
     private popupUtilsService: PopupUtilsService,
     private modalService: ModalService,
-    private keyConnectorService: KeyConnectorService
+    private keyConnectorService: KeyConnectorService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -185,13 +187,12 @@ export class SettingsComponent implements OnInit {
 
   async saveVaultTimeout(newValue: number) {
     if (newValue == null) {
-      const confirmed = await this.platformUtilsService.showDialog(
+      const confirmed = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("neverLockWarning"),
+        title: { key: "warning" },
-        null,
+        content: { key: "neverLockWarning" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("cancel"),
+      });
-        "warning"
+
-      );
       if (!confirmed) {
         this.form.controls.vaultTimeout.setValue(this.previousVaultTimeout);
         return;
@@ -222,13 +223,12 @@ export class SettingsComponent implements OnInit {
 
   async saveVaultTimeoutAction(newValue: VaultTimeoutAction) {
     if (newValue === VaultTimeoutAction.LogOut) {
-      const confirmed = await this.platformUtilsService.showDialog(
+      const confirmed = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("vaultTimeoutLogOutConfirmation"),
+        title: { key: "vaultTimeoutLogOutConfirmationTitle" },
-        this.i18nService.t("vaultTimeoutLogOutConfirmationTitle"),
+        content: { key: "vaultTimeoutLogOutConfirmation" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("cancel"),
+      });
-        "warning"
+
-      );
       if (!confirmed) {
         this.vaultTimeoutActionOptions.forEach((option: any, i) => {
           if (option.value === this.form.value.vaultTimeoutAction) {
@@ -284,24 +284,28 @@ export class SettingsComponent implements OnInit {
         console.error(e);
 
         if (this.platformUtilsService.isFirefox() && this.popupUtilsService.inSidebar(window)) {
-          await this.platformUtilsService.showDialog(
+          await this.dialogService.openSimpleDialog({
-            this.i18nService.t("nativeMessaginPermissionSidebarDesc"),
+            title: { key: "nativeMessaginPermissionSidebarTitle" },
-            this.i18nService.t("nativeMessaginPermissionSidebarTitle"),
+            content: { key: "nativeMessaginPermissionSidebarDesc" },
-            this.i18nService.t("ok"),
+            acceptButtonText: { key: "ok" },
-            null
+            cancelButtonText: null,
-          );
+            type: SimpleDialogType.INFO,
+          });
+
           this.form.controls.biometric.setValue(false);
           return;
         }
       }
 
       if (!granted) {
-        await this.platformUtilsService.showDialog(
+        await this.dialogService.openSimpleDialog({
-          this.i18nService.t("nativeMessaginPermissionErrorDesc"),
+          title: { key: "nativeMessaginPermissionErrorTitle" },
-          this.i18nService.t("nativeMessaginPermissionErrorTitle"),
+          content: { key: "nativeMessaginPermissionErrorDesc" },
-          this.i18nService.t("ok"),
+          acceptButtonText: { key: "ok" },
-          null
+          cancelButtonText: null,
-        );
+          type: SimpleDialogType.DANGER,
+        });
+
         this.form.controls.biometric.setValue(false);
         return;
       }
@@ -349,13 +353,13 @@ export class SettingsComponent implements OnInit {
 
             const error = BiometricErrors[e as BiometricErrorTypes];
 
-            this.platformUtilsService.showDialog(
+            this.dialogService.openSimpleDialog({
-              this.i18nService.t(error.description),
+              title: { key: error.title },
-              this.i18nService.t(error.title),
+              content: { key: error.description },
-              this.i18nService.t("ok"),
+              acceptButtonText: { key: "ok" },
-              null,
+              cancelButtonText: null,
-              "error"
+              type: SimpleDialogType.DANGER,
-            );
+            });
           }),
       ]);
     } else {
@@ -375,24 +379,23 @@ export class SettingsComponent implements OnInit {
   }
 
   async logOut() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("logOutConfirmation"),
+      title: { key: "logOut" },
-      this.i18nService.t(VaultTimeoutAction.LogOut),
+      content: { key: "logOutConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.INFO,
-      this.i18nService.t("cancel")
+    });
-    );
+
     if (confirmed) {
       this.messagingService.send("logout");
     }
   }
 
   async changePassword() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("changeMasterPasswordConfirmation"),
+      title: { key: "changeMasterPassword" },
-      this.i18nService.t("changeMasterPassword"),
+      content: { key: "changeMasterPasswordConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.INFO,
-      this.i18nService.t("cancel")
+    });
-    );
     if (confirmed) {
       BrowserApi.createNewTab(
         "https://bitwarden.com/help/master-password/#change-your-master-password"
@@ -401,24 +404,22 @@ export class SettingsComponent implements OnInit {
   }
 
   async twoStep() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("twoStepLoginConfirmation"),
+      title: { key: "twoStepLogin" },
-      this.i18nService.t("twoStepLogin"),
+      content: { key: "twoStepLoginConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.INFO,
-      this.i18nService.t("cancel")
+    });
-    );
     if (confirmed) {
       BrowserApi.createNewTab("https://bitwarden.com/help/setup-two-step-login/");
     }
   }
 
   async share() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("learnOrgConfirmation"),
+      title: { key: "learnOrg" },
-      this.i18nService.t("learnOrg"),
+      content: { key: "learnOrgConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.INFO,
-      this.i18nService.t("cancel")
+    });
-    );
     if (confirmed) {
       BrowserApi.createNewTab("https://bitwarden.com/help/about-organizations/");
     }

apps/browser/src/services/browserPlatformUtils.service.ts

@@ -5,14 +5,7 @@ import { ClientType, DeviceType } from "@bitwarden/common/enums";
 import { BrowserApi } from "../browser/browserApi";
 import { SafariApp } from "../browser/safariApp";
 
-const DialogPromiseExpiration = 600000; // 10 minutes
-
 export default class BrowserPlatformUtilsService implements PlatformUtilsService {
-  private showDialogResolves = new Map<number, { resolve: (value: boolean) => void; date: Date }>();
-  private passwordDialogResolves = new Map<
-    number,
-    { tryResolve: (canceled: boolean, password: string) => Promise<boolean>; date: Date }
-  >();
   private static deviceCache: DeviceType = null;
 
   constructor(
@@ -215,29 +208,6 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     });
   }
 
-  showDialog(
-    body: string,
-    title?: string,
-    confirmText?: string,
-    cancelText?: string,
-    type?: string,
-    bodyIsHtml = false
-  ) {
-    const dialogId = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
-    this.messagingService.send("showDialog", {
-      text: bodyIsHtml ? null : body,
-      html: bodyIsHtml ? body : null,
-      title: title,
-      confirmText: confirmText,
-      cancelText: cancelText,
-      type: type,
-      dialogId: dialogId,
-    });
-    return new Promise<boolean>((resolve) => {
-      this.showDialogResolves.set(dialogId, { resolve: resolve, date: new Date() });
-    });
-  }
-
   isDev(): boolean {
     return process.env.ENV === "development";
   }
@@ -339,47 +309,6 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     return null;
   }
 
-  resolveDialogPromise(dialogId: number, confirmed: boolean) {
-    if (this.showDialogResolves.has(dialogId)) {
-      const resolveObj = this.showDialogResolves.get(dialogId);
-      resolveObj.resolve(confirmed);
-      this.showDialogResolves.delete(dialogId);
-    }
-
-    // Clean up old promises
-    this.showDialogResolves.forEach((val, key) => {
-      const age = new Date().getTime() - val.date.getTime();
-      if (age > DialogPromiseExpiration) {
-        this.showDialogResolves.delete(key);
-      }
-    });
-  }
-
-  async resolvePasswordDialogPromise(
-    dialogId: number,
-    canceled: boolean,
-    password: string
-  ): Promise<boolean> {
-    let result = false;
-    if (this.passwordDialogResolves.has(dialogId)) {
-      const resolveObj = this.passwordDialogResolves.get(dialogId);
-      if (await resolveObj.tryResolve(canceled, password)) {
-        this.passwordDialogResolves.delete(dialogId);
-        result = true;
-      }
-    }
-
-    // Clean up old promises
-    this.passwordDialogResolves.forEach((val, key) => {
-      const age = new Date().getTime() - val.date.getTime();
-      if (age > DialogPromiseExpiration) {
-        this.passwordDialogResolves.delete(key);
-      }
-    });
-
-    return result;
-  }
-
   async supportsBiometric() {
     const platformInfo = await BrowserApi.getPlatformInfo();
     if (platformInfo.os === "android") {

apps/browser/src/tools/popup/send/send-add-edit.component.ts

@@ -3,6 +3,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/tools/send/add-edit.component";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -45,7 +46,8 @@ export class SendAddEditComponent extends BaseAddEditComponent {
     private location: Location,
     private popupUtilsService: PopupUtilsService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -57,7 +59,8 @@ export class SendAddEditComponent extends BaseAddEditComponent {
       policyService,
       logService,
       stateService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/browser/src/tools/popup/send/send-groupings.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -49,7 +50,8 @@ export class SendGroupingsComponent extends BaseSendComponent {
     private changeDetectorRef: ChangeDetectorRef,
     private broadcasterService: BroadcasterService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       sendService,
@@ -60,7 +62,8 @@ export class SendGroupingsComponent extends BaseSendComponent {
       searchService,
       policyService,
       logService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
     super.onSuccessfulLoad = async () => {
       this.calculateTypeCounts();

apps/browser/src/tools/popup/send/send-type.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -49,7 +50,8 @@ export class SendTypeComponent extends BaseSendComponent {
     private broadcasterService: BroadcasterService,
     private router: Router,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       sendService,
@@ -60,7 +62,8 @@ export class SendTypeComponent extends BaseSendComponent {
       searchService,
       policyService,
       logService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
     super.onSuccessfulLoad = async () => {
       this.selectType(this.type);

apps/browser/src/tools/popup/settings/export.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/tools/export/components/export.component";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -29,7 +30,8 @@ export class ExportComponent extends BaseExportComponent {
     logService: LogService,
     userVerificationService: UserVerificationService,
     formBuilder: UntypedFormBuilder,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cryptoService,
@@ -42,7 +44,8 @@ export class ExportComponent extends BaseExportComponent {
       logService,
       userVerificationService,
       formBuilder,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/browser/src/vault/popup/components/vault/add-edit.component.ts

@@ -3,6 +3,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -53,7 +54,8 @@ export class AddEditComponent extends BaseAddEditComponent {
     organizationService: OrganizationService,
     passwordRepromptService: PasswordRepromptService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -69,7 +71,8 @@ export class AddEditComponent extends BaseAddEditComponent {
       logService,
       passwordRepromptService,
       organizationService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/browser/src/vault/popup/components/vault/attachments.component.ts

@@ -3,6 +3,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -31,7 +32,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     private route: ActivatedRoute,
     stateService: StateService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -42,7 +44,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
       window,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/browser/src/vault/popup/components/vault/view.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ViewComponent as BaseViewComponent } from "@bitwarden/angular/vault/components/view.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -65,7 +66,8 @@ export class ViewComponent extends BaseViewComponent {
     apiService: ApiService,
     passwordRepromptService: PasswordRepromptService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -85,7 +87,8 @@ export class ViewComponent extends BaseViewComponent {
       passwordRepromptService,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/cli/src/services/cli-platform-utils.service.ts

@@ -112,16 +112,6 @@ export class CliPlatformUtilsService implements PlatformUtilsService {
     throw new Error("Not implemented.");
   }
 
-  showDialog(
-    text: string,
-    title?: string,
-    confirmText?: string,
-    cancelText?: string,
-    type?: string
-  ): Promise<boolean> {
-    throw new Error("Not implemented.");
-  }
-
   isDev(): boolean {
     return process.env.BWCLI_ENV === "development";
   }

apps/desktop/src/app/accounts/settings.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder } from "@angular/forms";
 import { Observable, Subject } from "rxjs";
 import { concatMap, debounceTime, filter, map, takeUntil, tap } from "rxjs/operators";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -109,7 +110,8 @@ export class SettingsComponent implements OnInit {
     private cryptoService: CryptoService,
     private modalService: ModalService,
     private themingService: AbstractThemingService,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private dialogService: DialogServiceAbstraction
   ) {
     const isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
 
@@ -295,13 +297,12 @@ export class SettingsComponent implements OnInit {
 
   async saveVaultTimeout(newValue: number) {
     if (newValue == null) {
-      const confirmed = await this.platformUtilsService.showDialog(
+      const confirmed = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("neverLockWarning"),
+        title: { key: "warning" },
-        "",
+        content: { key: "neverLockWarning" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("cancel"),
+      });
-        "warning"
+
-      );
       if (!confirmed) {
         this.form.controls.vaultTimeout.setValue(this.previousVaultTimeout);
         return;
@@ -332,13 +333,12 @@ export class SettingsComponent implements OnInit {
 
   async saveVaultTimeoutAction(newValue: VaultTimeoutAction) {
     if (newValue === "logOut") {
-      const confirmed = await this.platformUtilsService.showDialog(
+      const confirmed = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("vaultTimeoutLogOutConfirmation"),
+        title: { key: "vaultTimeoutLogOutConfirmationTitle" },
-        this.i18nService.t("vaultTimeoutLogOutConfirmationTitle"),
+        content: { key: "vaultTimeoutLogOutConfirmation" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("cancel"),
+      });
-        "warning"
+
-      );
       if (!confirmed) {
         this.form.controls.vaultTimeoutAction.patchValue(VaultTimeoutAction.Lock, {
           emitEvent: false,
@@ -462,13 +462,11 @@ export class SettingsComponent implements OnInit {
       !this.form.value.enableTray &&
       (this.form.value.startToTray || this.form.value.enableCloseToTray)
     ) {
-      const confirm = await this.platformUtilsService.showDialog(
+      const confirm = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("confirmTrayDesc"),
+        title: { key: "confirmTrayTitle" },
-        this.i18nService.t("confirmTrayTitle"),
+        content: { key: "confirmTrayDesc" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("no"),
+      });
-        "warning"
-      );
 
       if (confirm) {
         this.form.controls.startToTray.setValue(false, { emitEvent: false });
@@ -524,35 +522,35 @@ export class SettingsComponent implements OnInit {
 
   async saveBrowserIntegration() {
     if (process.platform === "darwin" && !this.platformUtilsService.isMacAppStore()) {
-      await this.platformUtilsService.showDialog(
+      await this.dialogService.openSimpleDialog({
-        this.i18nService.t("browserIntegrationMasOnlyDesc"),
+        title: { key: "browserIntegrationUnsupportedTitle" },
-        this.i18nService.t("browserIntegrationUnsupportedTitle"),
+        content: { key: "browserIntegrationMasOnlyDesc" },
-        this.i18nService.t("ok"),
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
 
       this.form.controls.enableBrowserIntegration.setValue(false);
       return;
     } else if (isWindowsStore()) {
-      await this.platformUtilsService.showDialog(
+      await this.dialogService.openSimpleDialog({
-        this.i18nService.t("browserIntegrationWindowsStoreDesc"),
+        title: { key: "browserIntegrationUnsupportedTitle" },
-        this.i18nService.t("browserIntegrationUnsupportedTitle"),
+        content: { key: "browserIntegrationWindowsStoreDesc" },
-        this.i18nService.t("ok"),
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
 
       this.form.controls.enableBrowserIntegration.setValue(false);
       return;
     } else if (process.platform == "linux") {
-      await this.platformUtilsService.showDialog(
+      await this.dialogService.openSimpleDialog({
-        this.i18nService.t("browserIntegrationLinuxDesc"),
+        title: { key: "browserIntegrationUnsupportedTitle" },
-        this.i18nService.t("browserIntegrationUnsupportedTitle"),
+        content: { key: "browserIntegrationLinuxDesc" },
-        this.i18nService.t("ok"),
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
 
       this.form.controls.enableBrowserIntegration.setValue(false);
       return;

apps/desktop/src/app/app.component.ts

@@ -14,6 +14,7 @@ import { IndividualConfig, ToastrService } from "ngx-toastr";
 import { firstValueFrom, Subject, takeUntil } from "rxjs";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
@@ -135,7 +136,8 @@ export class AppComponent implements OnInit, OnDestroy {
     private policyService: InternalPolicyService,
     private modalService: ModalService,
     private keyConnectorService: KeyConnectorService,
-    private configService: ConfigServiceAbstraction
+    private configService: ConfigServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit() {
@@ -231,12 +233,15 @@ export class AppComponent implements OnInit, OnDestroy {
             const fingerprint = await this.cryptoService.getFingerprint(
               await this.stateService.getUserId()
             );
-            const result = await this.platformUtilsService.showDialog(
+            const result = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("yourAccountsFingerprint") + ":\n" + fingerprint.join("-"),
+              title: { key: "fingerprintPhrase" },
-              this.i18nService.t("fingerprintPhrase"),
+              content:
-              this.i18nService.t("learnMore"),
+                this.i18nService.t("yourAccountsFingerprint") + ":\n" + fingerprint.join("-"),
-              this.i18nService.t("close")
+              acceptButtonText: { key: "learnMore" },
-            );
+              cancelButtonText: { key: "close" },
+              type: SimpleDialogType.INFO,
+            });
+
             if (result) {
               this.platformUtilsService.launchUri("https://bitwarden.com/help/fingerprint-phrase/");
             }
@@ -265,24 +270,24 @@ export class AppComponent implements OnInit, OnDestroy {
             });
             break;
           case "premiumRequired": {
-            const premiumConfirmed = await this.platformUtilsService.showDialog(
+            const premiumConfirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("premiumRequiredDesc"),
+              title: { key: "premiumRequired" },
-              this.i18nService.t("premiumRequired"),
+              content: { key: "premiumRequiredDesc" },
-              this.i18nService.t("learnMore"),
+              acceptButtonText: { key: "learnMore" },
-              this.i18nService.t("cancel")
+              type: SimpleDialogType.SUCCESS,
-            );
+            });
             if (premiumConfirmed) {
               await this.openModal<PremiumComponent>(PremiumComponent, this.premiumRef);
             }
             break;
           }
           case "emailVerificationRequired": {
-            const emailVerificationConfirmed = await this.platformUtilsService.showDialog(
+            const emailVerificationConfirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("emailVerificationRequiredDesc"),
+              title: { key: "emailVerificationRequired" },
-              this.i18nService.t("emailVerificationRequired"),
+              content: { key: "emailVerificationRequiredDesc" },
-              this.i18nService.t("learnMore"),
+              acceptButtonText: { key: "learnMore" },
-              this.i18nService.t("cancel")
+              type: SimpleDialogType.INFO,
-            );
+            });
             if (emailVerificationConfirmed) {
               this.platformUtilsService.launchUri(
                 "https://bitwarden.com/help/create-bitwarden-account/"

apps/desktop/src/app/app.module.ts

@@ -3,6 +3,7 @@ import "zone.js";
 // Register the locales for the application
 import "./locales";
 
+import { DialogModule } from "@angular/cdk/dialog";
 import { NgModule } from "@angular/core";
 
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
@@ -56,7 +57,7 @@ import { EffluxDatesComponent as SendEffluxDatesComponent } from "./tools/send/e
 import { SendComponent } from "./tools/send/send.component";
 
 @NgModule({
-  imports: [SharedModule, AppRoutingModule, VaultFilterModule, LoginModule],
+  imports: [SharedModule, DialogModule, AppRoutingModule, VaultFilterModule, LoginModule],
   declarations: [
     AccessibilityCookieComponent,
     AccountSwitcherComponent,

apps/desktop/src/app/services/services.module.ts

@@ -1,5 +1,6 @@
 import { APP_INITIALIZER, InjectionToken, NgModule } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import {
   SECURE_STORAGE,
   STATE_FACTORY,
@@ -43,6 +44,7 @@ import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@
 import { LoginGuard } from "../../auth/guards/login.guard";
 import { Account } from "../../models/account";
 import { ElectronCryptoService } from "../../services/electron-crypto.service";
+import { ElectronDialogService } from "../../services/electron-dialog.service";
 import { ElectronLogService } from "../../services/electron-log.service";
 import { ElectronPlatformUtilsService } from "../../services/electron-platform-utils.service";
 import { ElectronRendererMessagingService } from "../../services/electron-renderer-messaging.service";
@@ -176,6 +178,10 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
       useClass: LoginService,
       deps: [StateServiceAbstraction],
     },
+    {
+      provide: DialogServiceAbstraction,
+      useClass: ElectronDialogService,
+    },
     {
       provide: CryptoServiceAbstraction,
       useClass: ElectronCryptoService,

apps/desktop/src/app/tools/export/export.component.ts

@@ -3,6 +3,7 @@ import * as os from "os";
 import { Component, OnInit } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/tools/export/components/export.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -33,7 +34,8 @@ export class ExportComponent extends BaseExportComponent implements OnInit {
     formBuilder: UntypedFormBuilder,
     private broadcasterService: BroadcasterService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cryptoService,
@@ -46,7 +48,8 @@ export class ExportComponent extends BaseExportComponent implements OnInit {
       logService,
       userVerificationService,
       formBuilder,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 
@@ -56,25 +59,23 @@ export class ExportComponent extends BaseExportComponent implements OnInit {
 
   async warningDialog() {
     if (this.encryptedFormat) {
-      return await this.platformUtilsService.showDialog(
+      return await this.dialogService.openSimpleDialog({
-        this.i18nService.t("encExportKeyWarningDesc") +
+        title: { key: "confirmVaultExport" },
+        content:
+          this.i18nService.t("encExportKeyWarningDesc") +
           os.EOL +
           os.EOL +
           this.i18nService.t("encExportAccountWarningDesc"),
-        this.i18nService.t("confirmVaultExport"),
+        acceptButtonText: { key: "exportVault" },
-        this.i18nService.t("exportVault"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("cancel"),
+      });
-        "warning",
-        true
-      );
     } else {
-      return await this.platformUtilsService.showDialog(
+      return await this.dialogService.openSimpleDialog({
-        this.i18nService.t("exportWarningDesc"),
+        title: { key: "confirmVaultExport" },
-        this.i18nService.t("confirmVaultExport"),
+        content: { key: "exportWarningDesc" },
-        this.i18nService.t("exportVault"),
+        acceptButtonText: { key: "exportVault" },
-        this.i18nService.t("cancel"),
+        type: SimpleDialogType.WARNING,
-        "warning"
+      });
-      );
     }
   }
 }

apps/desktop/src/app/tools/send/add-edit.component.ts

@@ -1,6 +1,7 @@
 import { DatePipe } from "@angular/common";
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/tools/send/add-edit.component";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -27,7 +28,8 @@ export class AddEditComponent extends BaseAddEditComponent {
     messagingService: MessagingService,
     policyService: PolicyService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -39,7 +41,8 @@ export class AddEditComponent extends BaseAddEditComponent {
       policyService,
       logService,
       stateService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/desktop/src/app/tools/send/send.component.ts

@@ -1,5 +1,6 @@
 import { Component, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -46,7 +47,8 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
     policyService: PolicyService,
     private searchBarService: SearchBarService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       sendService,
@@ -57,7 +59,8 @@ export class SendComponent extends BaseSendComponent implements OnInit, OnDestro
       searchService,
       policyService,
       logService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     this.searchBarService.searchText$.subscribe((searchText) => {

apps/desktop/src/auth/lock.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { ipcRenderer } from "electron";
 
 import { LockComponent as BaseLockComponent } from "@bitwarden/angular/auth/components/lock.component";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -50,7 +51,8 @@ export class LockComponent extends BaseLockComponent {
     policyService: InternalPolicyService,
     passwordGenerationService: PasswordGenerationServiceAbstraction,
     logService: LogService,
-    keyConnectorService: KeyConnectorService
+    keyConnectorService: KeyConnectorService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       router,
@@ -68,7 +70,8 @@ export class LockComponent extends BaseLockComponent {
       ngZone,
       policyApiService,
       policyService,
-      passwordGenerationService
+      passwordGenerationService,
+      dialogService
     );
   }
 
@@ -149,12 +152,11 @@ export class LockComponent extends BaseLockComponent {
     }
 
     if (await this.stateService.getBiometricUnlock()) {
-      const response = await this.platformUtilsService.showDialog(
+      const response = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("windowsBiometricUpdateWarning"),
+        title: { key: "windowsBiometricUpdateWarningTitle" },
-        this.i18nService.t("windowsBiometricUpdateWarningTitle"),
+        content: { key: "windowsBiometricUpdateWarning" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("no")
+      });
-      );
 
       await this.stateService.setBiometricRequirePasswordOnStart(response);
       if (response) {

apps/desktop/src/auth/register.component.ts

@@ -3,6 +3,7 @@ import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -38,7 +39,8 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
     private broadcasterService: BroadcasterService,
     private ngZone: NgZone,
     logService: LogService,
-    auditService: AuditService
+    auditService: AuditService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       formValidationErrorService,
@@ -53,7 +55,8 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
       passwordGenerationService,
       environmentService,
       logService,
-      auditService
+      auditService,
+      dialogService
     );
   }
 

apps/desktop/src/auth/set-password.component.ts

@@ -2,6 +2,7 @@ import { Component, NgZone, OnDestroy } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { SetPasswordComponent as BaseSetPasswordComponent } from "@bitwarden/angular/components/set-password.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -39,7 +40,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
     private ngZone: NgZone,
     stateService: StateService,
     organizationApiService: OrganizationApiServiceAbstraction,
-    organizationUserService: OrganizationUserService
+    organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -55,7 +57,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
       route,
       stateService,
       organizationApiService,
-      organizationUserService
+      organizationUserService,
+      dialogService
     );
   }
 

apps/desktop/src/services/electron-dialog.service.ts

@@ -0,0 +1,62 @@
+import { ipcRenderer } from "electron";
+
+import {
+  DialogService,
+  SimpleDialogOptions,
+  SimpleDialogType,
+} from "@bitwarden/angular/services/dialog";
+
+// Electron supports a limited set of dialog types
+// https://www.electronjs.org/docs/latest/api/dialog#dialogshowmessageboxbrowserwindow-options
+const electronTypeMap: Record<SimpleDialogType, string> = {
+  [SimpleDialogType.PRIMARY]: "info",
+  [SimpleDialogType.SUCCESS]: "info",
+  [SimpleDialogType.INFO]: "info",
+  [SimpleDialogType.WARNING]: "warning",
+  [SimpleDialogType.DANGER]: "error",
+};
+
+export class ElectronDialogService extends DialogService {
+  async openSimpleDialog(options: SimpleDialogOptions) {
+    const defaultCancel =
+      options.cancelButtonText === undefined
+        ? options.acceptButtonText == null
+          ? "no"
+          : "cancel"
+        : null;
+
+    return this.legacyShowDialog(
+      this.translate(options.content),
+      this.translate(options.title),
+      this.translate(options.acceptButtonText, "yes"),
+      this.translate(options.cancelButtonText, defaultCancel),
+      options.type
+    );
+  }
+
+  private async legacyShowDialog(
+    body: string,
+    title?: string,
+    confirmText?: string,
+    cancelText?: string,
+    type?: SimpleDialogType
+  ) {
+    const buttons = [confirmText == null ? this.i18nService.t("ok") : confirmText];
+    if (cancelText != null) {
+      buttons.push(cancelText);
+    }
+
+    const result = await ipcRenderer.invoke("showMessageBox", {
+      type: electronTypeMap[type] ?? "none",
+      title: title,
+      message: title,
+      detail: body,
+      buttons: buttons,
+      cancelId: buttons.length === 2 ? 1 : null,
+      defaultId: 0,
+      noLink: true,
+    });
+
+    return Promise.resolve(result.response === 0);
+  }
+}

apps/desktop/src/services/electron-platform-utils.service.ts

@@ -115,32 +115,6 @@ export class ElectronPlatformUtilsService implements PlatformUtilsService {
     });
   }
 
-  async showDialog(
-    text: string,
-    title?: string,
-    confirmText?: string,
-    cancelText?: string,
-    type?: string
-  ): Promise<boolean> {
-    const buttons = [confirmText == null ? this.i18nService.t("ok") : confirmText];
-    if (cancelText != null) {
-      buttons.push(cancelText);
-    }
-
-    const result = await ipcRenderer.invoke("showMessageBox", {
-      type: type,
-      title: title,
-      message: title,
-      detail: text,
-      buttons: buttons,
-      cancelId: buttons.length === 2 ? 1 : null,
-      defaultId: 0,
-      noLink: true,
-    });
-
-    return Promise.resolve(result.response === 0);
-  }
-
   isDev(): boolean {
     return isDev();
   }

apps/desktop/src/vault/app/accounts/premium.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { PremiumComponent as BasePremiumComponent } from "@bitwarden/angular/vault/components/premium.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -17,8 +18,9 @@ export class PremiumComponent extends BasePremiumComponent {
     platformUtilsService: PlatformUtilsService,
     apiService: ApiService,
     logService: LogService,
-    stateService: StateService
+    stateService: StateService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(i18nService, platformUtilsService, apiService, logService, stateService);
+    super(i18nService, platformUtilsService, apiService, logService, stateService, dialogService);
   }
 }

apps/desktop/src/vault/app/vault/add-edit.component.ts

@@ -1,6 +1,7 @@
 import { Component, NgZone, OnChanges, OnDestroy, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -43,7 +44,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges,
     private ngZone: NgZone,
     logService: LogService,
     organizationService: OrganizationService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -59,7 +61,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges,
       logService,
       passwordRepromptService,
       organizationService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/desktop/src/vault/app/vault/attachments.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -23,7 +24,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     apiService: ApiService,
     logService: LogService,
     stateService: StateService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -34,7 +36,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
       window,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 }

apps/desktop/src/vault/app/vault/folder-add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -17,8 +18,16 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     folderApiService: FolderApiServiceAbstraction,
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
-    logService: LogService
+    logService: LogService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(folderService, folderApiService, i18nService, platformUtilsService, logService);
+    super(
+      folderService,
+      folderApiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      dialogService
+    );
   }
 }

apps/desktop/src/vault/app/vault/vault.component.ts

@@ -11,6 +11,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
 import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -100,7 +101,8 @@ export class VaultComponent implements OnInit, OnDestroy {
     private passwordRepromptService: PasswordRepromptService,
     private stateService: StateService,
     private searchBarService: SearchBarService,
-    private apiService: ApiService
+    private apiService: ApiService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -679,13 +681,11 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   private async wantsToSaveChanges(): Promise<boolean> {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("unsavedChangesConfirmation"),
+      title: { key: "unsavedChangesTitle" },
-      this.i18nService.t("unsavedChangesTitle"),
+      content: { key: "unsavedChangesConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
-    );
     return !confirmed;
   }
 

apps/desktop/src/vault/app/vault/view.component.ts

@@ -7,6 +7,7 @@ import {
   Output,
 } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ViewComponent as BaseViewComponent } from "@bitwarden/angular/vault/components/view.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -53,7 +54,8 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
     passwordRepromptService: PasswordRepromptService,
     logService: LogService,
     stateService: StateService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -73,7 +75,8 @@ export class ViewComponent extends BaseViewComponent implements OnChanges {
       passwordRepromptService,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
   ngOnInit() {

apps/web/src/app/admin-console/organizations/guards/is-paid-org.guard.ts

@@ -1,9 +1,8 @@
 import { Injectable } from "@angular/core";
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
 
-import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
-import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 
 @Injectable({
@@ -13,9 +12,8 @@ export class IsPaidOrgGuard implements CanActivate {
   constructor(
     private router: Router,
     private organizationService: OrganizationService,
-    private platformUtilsService: PlatformUtilsService,
     private messagingService: MessagingService,
-    private i18nService: I18nService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
@@ -28,11 +26,13 @@ export class IsPaidOrgGuard implements CanActivate {
     if (org.isFreeOrg) {
       // Users without billing permission can't access billing
       if (!org.canEditSubscription) {
-        await this.platformUtilsService.showDialog(
+        await this.dialogService.openSimpleDialog({
-          this.i18nService.t("notAvailableForFreeOrganization"),
+          title: { key: "upgradeOrganization" },
-          this.i18nService.t("upgradeOrganization"),
+          content: { key: "notAvailableForFreeOrganization" },
-          this.i18nService.t("ok")
+          acceptButtonText: { key: "ok" },
-        );
+          cancelButtonText: null,
+          type: SimpleDialogType.INFO,
+        });
         return false;
       } else {
         this.messagingService.send("upgradeOrganization", { organizationId: org.id });

apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from "@angula
 import { FormBuilder, Validators } from "@angular/forms";
 import { catchError, combineLatest, from, map, of, Subject, switchMap, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -13,7 +14,6 @@ import { CollectionData } from "@bitwarden/common/admin-console/models/data/coll
 import { Collection } from "@bitwarden/common/admin-console/models/domain/collection";
 import { CollectionDetailsResponse } from "@bitwarden/common/admin-console/models/response/collection.response";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
-import { DialogService } from "@bitwarden/components";
 
 import { GroupService, GroupView } from "../core";
 import {
@@ -64,7 +64,7 @@ export enum GroupAddEditDialogResultType {
  * @param config Configuration for the dialog
  */
 export const openGroupAddEditDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<GroupAddEditDialogParams>
 ) => {
   return dialogService.open<GroupAddEditDialogResultType, GroupAddEditDialogParams>(
@@ -180,7 +180,8 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {
     private platformUtilsService: PlatformUtilsService,
     private logService: LogService,
     private formBuilder: FormBuilder,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private dialogService: DialogServiceAbstraction
   ) {
     this.tabIndex = params.initialTab ?? GroupAddEditTabType.Info;
   }
@@ -269,15 +270,11 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("deleteGroupConfirmation"),
+      title: this.group.name,
-      this.group.name,
+      content: { key: "deleteGroupConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning",
-      false,
-      "app-group-add-edit .modal-content"
-    );
     if (!confirmed) {
       return false;
     }

apps/web/src/app/admin-console/organizations/manage/groups.component.ts

@@ -15,6 +15,7 @@ import {
 import { first } from "rxjs/operators";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -31,7 +32,6 @@ import {
 import { CollectionView } from "@bitwarden/common/admin-console/models/view/collection.view";
 import { Utils } from "@bitwarden/common/misc/utils";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
-import { DialogService } from "@bitwarden/components";
 
 import { GroupService, GroupView } from "../core";
 
@@ -127,7 +127,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private i18nService: I18nService,
     private modalService: ModalService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private platformUtilsService: PlatformUtilsService,
     private searchService: SearchService,
     private logService: LogService,
@@ -233,13 +233,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
   async delete(groupRow: GroupDetailsRow) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("deleteGroupConfirmation"),
+      title: groupRow.details.name,
-      groupRow.details.name,
+      content: { key: "deleteGroupConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
-    );
     if (!confirmed) {
       return false;
     }
@@ -265,13 +263,14 @@ export class GroupsComponent implements OnInit, OnDestroy {
     }
 
     const deleteMessage = groupsToDelete.map((g) => g.details.name).join(", ");
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      deleteMessage,
+      title: {
-      this.i18nService.t("deleteMultipleGroupsConfirmation", groupsToDelete.length.toString()),
+        key: "deleteMultipleGroupsConfirmation",
-      this.i18nService.t("yes"),
+        placeholders: [groupsToDelete.length.toString()],
-      this.i18nService.t("no"),
+      },
-      "warning"
+      content: deleteMessage,
-    );
+      type: SimpleDialogType.WARNING,
+    });
     if (!confirmed) {
       return false;
     }

apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { combineLatest, of, shareReplay, Subject, switchMap, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -14,7 +15,6 @@ import {
 import { PermissionsApi } from "@bitwarden/common/admin-console/models/api/permissions.api";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { CollectionView } from "@bitwarden/common/admin-console/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";
 
 import { flagEnabled } from "../../../../../../utils/flags";
 import {
@@ -130,7 +130,8 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
     private collectionAdminService: CollectionAdminService,
     private groupService: GroupService,
     private userService: UserAdminService,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -364,15 +365,13 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
     const message = this.params.usesKeyConnector
       ? "removeUserConfirmationKeyConnector"
       : "removeOrgUserConfirmation";
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t(message),
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeUserIdAccess", this.params.name),
+      title: { key: "removeUserIdAccess", placeholders: [this.params.name] },
-      this.i18nService.t("yes"),
+      content: { key: message },
-      this.i18nService.t("no"),
+      type: SimpleDialogType.WARNING,
-      "warning",
+    });
-      false,
+
-      "app-user-add-edit .modal-content"
-    );
     if (!confirmed) {
       return false;
     }
@@ -395,15 +394,13 @@ export class MemberDialogComponent implements OnInit, OnDestroy {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("revokeUserConfirmation"),
+      title: { key: "revokeUserId", placeholders: [this.params.name] },
-      this.i18nService.t("revokeUserId", this.params.name),
+      content: { key: "revokeUserConfirmation" },
-      this.i18nService.t("revokeAccess"),
+      acceptButtonText: { key: "revokeAccess" },
-      this.i18nService.t("cancel"),
+      type: SimpleDialogType.WARNING,
-      "warning",
+    });
-      false,
+
-      "app-user-add-edit .modal-content"
-    );
     if (!confirmed) {
       return false;
     }
@@ -511,7 +508,7 @@ function mapToGroupAccessSelections(groups: string[]): AccessItemValue[] {
  * @param config Configuration for the dialog
  */
 export function openUserAddEditDialog(
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<MemberDialogParams>
 ) {
   return dialogService.open<MemberDialogResult, MemberDialogParams>(MemberDialogComponent, config);

apps/web/src/app/admin-console/organizations/members/components/reset-password.component.ts

@@ -10,6 +10,7 @@ import {
 import { Subject, takeUntil } from "rxjs";
 import zxcvbn from "zxcvbn";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { PasswordStrengthComponent } from "@bitwarden/angular/shared/components/password-strength/password-strength.component";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -52,7 +53,8 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
     private policyService: PolicyService,
     private cryptoService: CryptoService,
     private logService: LogService,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -135,13 +137,12 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
     }
 
     if (this.passwordStrengthResult.score < 3) {
-      const result = await this.platformUtilsService.showDialog(
+      const result = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("weakMasterPasswordDesc"),
+        title: { key: "weakMasterPassword" },
-        this.i18nService.t("weakMasterPassword"),
+        content: { key: "weakMasterPasswordDesc" },
-        this.i18nService.t("yes"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("no"),
+      });
-        "warning"
+
-      );
       if (!result) {
         return false;
       }

apps/web/src/app/admin-console/organizations/members/people.component.ts

@@ -15,6 +15,12 @@ import {
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import {
+  SimpleDialogType,
+  DialogServiceAbstraction,
+  SimpleDialogCloseType,
+  SimpleDialogOptions,
+} from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -48,12 +54,6 @@ import { CollectionDetailsResponse } from "@bitwarden/common/admin-console/model
 import { ProductType } from "@bitwarden/common/enums";
 import { ListResponse } from "@bitwarden/common/models/response/list.response";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import {
-  DialogService,
-  SimpleDialogCloseType,
-  SimpleDialogOptions,
-  SimpleDialogType,
-} from "@bitwarden/components";
 
 import { EntityEventsComponent } from "../../../admin-console/organizations/manage/entity-events.component";
 import { BasePeopleComponent } from "../../../common/base.people.component";
@@ -123,7 +123,7 @@ export class PeopleComponent
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private organizationUserService: OrganizationUserService,
-    private dialogService: DialogService,
+    dialogService: DialogServiceAbstraction,
     private router: Router,
     private groupService: GroupService,
     private collectionService: CollectionService
@@ -139,7 +139,8 @@ export class PeopleComponent
       logService,
       searchPipe,
       userNamePipe,
-      stateService
+      stateService,
+      dialogService
     );
   }
 
@@ -362,7 +363,7 @@ export class PeopleComponent
       orgUpgradeSimpleDialogOpts.cancelButtonText = null; // hide secondary btn
     }
 
-    const simpleDialog = this.dialogService.openSimpleDialog(orgUpgradeSimpleDialogOpts);
+    const simpleDialog = this.dialogService.openSimpleDialogRef(orgUpgradeSimpleDialogOpts);
 
     firstValueFrom(simpleDialog.closed).then((result: SimpleDialogCloseType | undefined) => {
       if (!result) {
@@ -541,17 +542,18 @@ export class PeopleComponent
   }
 
   protected async removeUserConfirmationDialog(user: OrganizationUserView) {
-    const warningMessage = user.usesKeyConnector
+    const content = user.usesKeyConnector
-      ? this.i18nService.t("removeUserConfirmationKeyConnector")
+      ? "removeUserConfirmationKeyConnector"
-      : this.i18nService.t("removeOrgUserConfirmation");
+      : "removeOrgUserConfirmation";
 
-    return this.platformUtilsService.showDialog(
+    return await this.dialogService.openSimpleDialog({
-      warningMessage,
+      title: {
-      this.i18nService.t("removeUserIdAccess", this.userNamePipe.transform(user)),
+        key: "removeUserIdAccess",
-      this.i18nService.t("yes"),
+        placeholders: [this.userNamePipe.transform(user)],
-      this.i18nService.t("no"),
+      },
-      "warning"
+      content: { key: content },
-    );
+      type: SimpleDialogType.WARNING,
+    });
   }
 
   private async showBulkStatus(

apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { combineLatest, of, shareReplay, Subject, switchMap, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
 import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
@@ -10,7 +11,7 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { CollectionView } from "@bitwarden/common/admin-console/models/view/collection.view";
-import { BitValidators, DialogService } from "@bitwarden/components";
+import { BitValidators } from "@bitwarden/components";
 
 import {
   CollectionAdminService,
@@ -75,7 +76,8 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     private collectionService: CollectionAdminService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
   ) {
     this.tabIndex = params.initialTab ?? CollectionDialogTabType.Info;
   }
@@ -200,13 +202,11 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   };
 
   protected delete = async () => {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("deleteCollectionConfirmation"),
+      title: this.collection?.name,
-      this.collection?.name,
+      content: { key: "deleteCollectionConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
-    );
 
     if (!confirmed && this.params.collectionId) {
       return false;
@@ -291,7 +291,7 @@ function mapToAccessSelections(collectionDetails: CollectionAdminView): AccessIt
  * @param config Configuration for the dialog
  */
 export function openCollectionDialog(
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<CollectionDialogParams>
 ) {
   return dialogService.open<CollectionDialogResult, CollectionDialogParams>(

apps/web/src/app/admin-console/organizations/tools/import-export/org-export.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -34,7 +35,8 @@ export class OrganizationExportComponent extends ExportComponent {
     userVerificationService: UserVerificationService,
     formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService,
-    modalService: ModalService
+    modalService: ModalService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cryptoService,
@@ -47,7 +49,8 @@ export class OrganizationExportComponent extends ExportComponent {
       userVerificationService,
       formBuilder,
       fileDownloadService,
-      modalService
+      modalService,
+      dialogService
     );
   }
 

apps/web/src/app/admin-console/organizations/tools/import-export/org-import.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -8,7 +9,6 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
 import { ImportServiceAbstraction } from "@bitwarden/importer";
 
 import { ImportComponent } from "../../../../tools/import-export/import.component";
@@ -32,7 +32,7 @@ export class OrganizationImportComponent extends ImportComponent {
     logService: LogService,
     modalService: ModalService,
     syncService: SyncService,
-    dialogService: DialogService
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -59,13 +59,12 @@ export class OrganizationImportComponent extends ImportComponent {
   }
 
   async submit() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("importWarning", this.organizationName),
+      title: { key: "warning" },
-      this.i18nService.t("warning"),
+      content: { key: "importWarning", placeholders: [this.organizationName] },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }

apps/web/src/app/admin-console/settings/sponsoring-org-row.component.ts

@@ -2,6 +2,7 @@ import { formatDate } from "@angular/common";
 import { Component, EventEmitter, Input, Output, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -30,7 +31,8 @@ export class SponsoringOrgRowComponent implements OnInit {
     private apiService: ApiService,
     private i18nService: I18nService,
     private logService: LogService,
-    private platformUtilsService: PlatformUtilsService
+    private platformUtilsService: PlatformUtilsService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -67,15 +69,14 @@ export class SponsoringOrgRowComponent implements OnInit {
   }
 
   private async doRevokeSponsorship() {
-    const isConfirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("revokeSponsorshipConfirmation"),
+      title: `${this.i18nService.t("remove")} ${this.sponsoringOrg.familySponsorshipFriendlyName}?`,
-      `${this.i18nService.t("remove")} ${this.sponsoringOrg.familySponsorshipFriendlyName}?`,
+      content: { key: "revokeSponsorshipConfirmation" },
-      this.i18nService.t("remove"),
+      acceptButtonText: { key: "remove" },
-      this.i18nService.t("cancel"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
 
-    if (!isConfirmed) {
+    if (!confirmed) {
       return;
     }
 

apps/web/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { IndividualConfig, ToastrService } from "ngx-toastr";
 import { Subject, takeUntil } from "rxjs";
 import Swal from "sweetalert2";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { ConfigServiceAbstraction } from "@bitwarden/common/abstractions/config/config.service.abstraction";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -79,7 +80,8 @@ export class AppComponent implements OnDestroy, OnInit {
     private policyService: InternalPolicyService,
     protected policyListService: PolicyListService,
     private keyConnectorService: KeyConnectorService,
-    private configService: ConfigServiceAbstraction
+    private configService: ConfigServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit() {
@@ -132,12 +134,12 @@ export class AppComponent implements OnDestroy, OnInit {
             await this.configService.fetchServerConfig();
             break;
           case "upgradeOrganization": {
-            const upgradeConfirmed = await this.platformUtilsService.showDialog(
+            const upgradeConfirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("upgradeOrganizationDesc"),
+              title: { key: "upgradeOrganization" },
-              this.i18nService.t("upgradeOrganization"),
+              content: { key: "upgradeOrganizationDesc" },
-              this.i18nService.t("upgradeOrganization"),
+              acceptButtonText: { key: "upgradeOrganization" },
-              this.i18nService.t("cancel")
+              type: SimpleDialogType.INFO,
-            );
+            });
             if (upgradeConfirmed) {
               this.router.navigate([
                 "organizations",
@@ -149,24 +151,24 @@ export class AppComponent implements OnDestroy, OnInit {
             break;
           }
           case "premiumRequired": {
-            const premiumConfirmed = await this.platformUtilsService.showDialog(
+            const premiumConfirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("premiumRequiredDesc"),
+              title: { key: "premiumRequired" },
-              this.i18nService.t("premiumRequired"),
+              content: { key: "premiumRequiredDesc" },
-              this.i18nService.t("upgrade"),
+              acceptButtonText: { key: "upgrade" },
-              this.i18nService.t("cancel")
+              type: SimpleDialogType.SUCCESS,
-            );
+            });
             if (premiumConfirmed) {
               this.router.navigate(["settings/subscription/premium"]);
             }
             break;
           }
           case "emailVerificationRequired": {
-            const emailVerificationConfirmed = await this.platformUtilsService.showDialog(
+            const emailVerificationConfirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("emailVerificationRequiredDesc"),
+              title: { key: "emailVerificationRequired" },
-              this.i18nService.t("emailVerificationRequired"),
+              content: { key: "emailVerificationRequiredDesc" },
-              this.i18nService.t("learnMore"),
+              acceptButtonText: { key: "learnMore" },
-              this.i18nService.t("cancel")
+              type: SimpleDialogType.INFO,
-            );
+            });
             if (emailVerificationConfirmed) {
               this.platformUtilsService.launchUri(
                 "https://bitwarden.com/help/create-bitwarden-account/"

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { concatMap, Subject, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -46,7 +47,8 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private modalService: ModalService,
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -203,13 +205,12 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("cancelConfirmation"),
+      title: { key: "cancelSubscription" },
-      this.i18nService.t("cancelSubscription"),
+      content: { key: "cancelConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }
@@ -232,12 +233,12 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("reinstateConfirmation"),
+      title: { key: "reinstateSubscription" },
-      this.i18nService.t("reinstateSubscription"),
+      content: { key: "reinstateConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("cancel")
+    });
-    );
+
     if (!confirmed) {
       return;
     }
@@ -303,15 +304,14 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   }
 
   removeSponsorship = async () => {
-    const isConfirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeSponsorshipConfirmation"),
+      title: { key: "removeSponsorship" },
-      this.i18nService.t("removeSponsorship"),
+      content: { key: "removeSponsorshipConfirmation" },
-      this.i18nService.t("remove"),
+      acceptButtonText: { key: "remove" },
-      this.i18nService.t("cancel"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
 
-    if (!isConfirmed) {
+    if (!confirmed) {
       return;
     }
 

apps/web/src/app/billing/settings/payment-method.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, FormControl, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -55,7 +56,8 @@ export class PaymentMethodComponent implements OnInit {
     private router: Router,
     private logService: LogService,
     private route: ActivatedRoute,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -93,13 +95,14 @@ export class PaymentMethodComponent implements OnInit {
 
   addCredit() {
     if (this.paymentSourceInApp) {
-      this.platformUtilsService.showDialog(
+      this.dialogService.openSimpleDialog({
-        this.i18nService.t("cannotPerformInAppPurchase"),
+        title: { key: "addCredit" },
-        this.i18nService.t("addCredit"),
+        content: { key: "cannotPerformInAppPurchase" },
-        null,
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
+
       return;
     }
     this.showAddCredit = true;
@@ -114,13 +117,14 @@ export class PaymentMethodComponent implements OnInit {
 
   changePayment() {
     if (this.paymentSourceInApp) {
-      this.platformUtilsService.showDialog(
+      this.dialogService.openSimpleDialog({
-        this.i18nService.t("cannotPerformInAppPurchase"),
+        title: { key: "changePaymentMethod" },
-        this.i18nService.t("changePaymentMethod"),
+        content: { key: "cannotPerformInAppPurchase" },
-        null,
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
+
       return;
     }
     this.showAdjustPayment = true;

apps/web/src/app/billing/settings/user-subscription.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -32,7 +33,8 @@ export class UserSubscriptionComponent implements OnInit {
     private i18nService: I18nService,
     private router: Router,
     private logService: LogService,
-    private fileDownloadService: FileDownloadService
+    private fileDownloadService: FileDownloadService,
+    private dialogService: DialogServiceAbstraction
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -64,22 +66,23 @@ export class UserSubscriptionComponent implements OnInit {
     }
 
     if (this.usingInAppPurchase) {
-      this.platformUtilsService.showDialog(
+      this.dialogService.openSimpleDialog({
-        this.i18nService.t("manageSubscriptionFromStore"),
+        title: { key: "cancelSubscription" },
-        this.i18nService.t("cancelSubscription"),
+        content: { key: "manageSubscriptionFromStore" },
-        null,
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
+
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("reinstateConfirmation"),
+      title: { key: "reinstateSubscription" },
-      this.i18nService.t("reinstateSubscription"),
+      content: { key: "reinstateConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("cancel")
+    });
-    );
+
     if (!confirmed) {
       return;
     }
@@ -100,23 +103,23 @@ export class UserSubscriptionComponent implements OnInit {
     }
 
     if (this.usingInAppPurchase) {
-      this.platformUtilsService.showDialog(
+      this.dialogService.openSimpleDialog({
-        this.i18nService.t("manageSubscriptionFromStore"),
+        title: { key: "cancelSubscription" },
-        this.i18nService.t("cancelSubscription"),
+        content: { key: "manageSubscriptionFromStore" },
-        null,
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
+
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("cancelConfirmation"),
+      title: { key: "cancelSubscription" },
-      this.i18nService.t("cancelSubscription"),
+      content: { key: "cancelConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }
@@ -163,13 +166,14 @@ export class UserSubscriptionComponent implements OnInit {
 
   adjustStorage(add: boolean) {
     if (this.usingInAppPurchase) {
-      this.platformUtilsService.showDialog(
+      this.dialogService.openSimpleDialog({
-        this.i18nService.t("cannotPerformInAppPurchase"),
+        title: { key: add ? "addStorage" : "removeStorage" },
-        this.i18nService.t(add ? "addStorage" : "removeStorage"),
+        content: { key: "cannotPerformInAppPurchase" },
-        null,
+        acceptButtonText: { key: "ok" },
-        null,
+        cancelButtonText: null,
-        "warning"
+        type: SimpleDialogType.WARNING,
-      );
+      });
+
       return;
     }
     this.adjustStorageAdd = add;

apps/web/src/app/common/base.people.component.ts

@@ -2,6 +2,7 @@ import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -108,7 +109,8 @@ export abstract class BasePeopleComponent<
     private logService: LogService,
     private searchPipe: SearchPipe,
     protected userNamePipe: UserNamePipe,
-    protected stateService: StateService
+    protected stateService: StateService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   abstract edit(user: UserType): void;
@@ -217,13 +219,11 @@ export abstract class BasePeopleComponent<
   }
 
   protected async removeUserConfirmationDialog(user: UserType) {
-    return this.platformUtilsService.showDialog(
+    return this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeUserConfirmation"),
+      title: this.userNamePipe.transform(user),
-      this.userNamePipe.transform(user),
+      content: { key: "removeUserConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
-    );
   }
 
   async remove(user: UserType) {
@@ -248,13 +248,12 @@ export abstract class BasePeopleComponent<
   }
 
   async revoke(user: UserType) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.revokeWarningMessage(),
+      title: { key: "revokeAccess", placeholders: [this.userNamePipe.transform(user)] },
-      this.i18nService.t("revokeUserId", this.userNamePipe.transform(user)),
+      content: this.revokeWarningMessage(),
-      this.i18nService.t("revokeAccess"),
+      acceptButtonText: { key: "revokeAccess" },
-      this.i18nService.t("cancel"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
 
     if (!confirmed) {
       return false;

apps/web/src/app/core/web-platform-utils.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from "@angular/core";
-import Swal, { SweetAlertIcon } from "sweetalert2";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -133,66 +132,6 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
     });
   }
 
-  async showDialog(
-    body: string,
-    title?: string,
-    confirmText?: string,
-    cancelText?: string,
-    type?: string,
-    bodyIsHtml = false,
-    target?: string
-  ) {
-    let iconClasses: string = null;
-    if (type != null) {
-      // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
-      switch (type) {
-        case "success":
-          iconClasses = "bwi-check text-success";
-          break;
-        case "warning":
-          iconClasses = "bwi-exclamation-triangle text-warning";
-          break;
-        case "error":
-          iconClasses = "bwi-error text-danger";
-          break;
-        case "info":
-          iconClasses = "bwi-info-circle text-info";
-          break;
-        default:
-          break;
-      }
-    }
-
-    const bootstrapModal = document.querySelector("div.modal");
-    if (bootstrapModal != null) {
-      bootstrapModal.removeAttribute("tabindex");
-    }
-
-    const iconHtmlStr =
-      iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined;
-    const confirmed = await Swal.fire({
-      heightAuto: false,
-      buttonsStyling: false,
-      icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
-      iconHtml: iconHtmlStr,
-      text: bodyIsHtml ? null : body,
-      html: bodyIsHtml ? body : null,
-      titleText: title,
-      showCancelButton: cancelText != null,
-      cancelButtonText: cancelText,
-      showConfirmButton: true,
-      confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
-      target: target != null ? target : "body",
-      onOpen: () => Swal.getConfirmButton().focus(),
-    });
-
-    if (bootstrapModal != null) {
-      bootstrapModal.setAttribute("tabindex", "-1");
-    }
-
-    return confirmed.value;
-  }
-
   isDev(): boolean {
     return process.env.NODE_ENV === "development";
   }

apps/web/src/app/settings/change-kdf/change-kdf.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { KdfConfig } from "@bitwarden/common/auth/models/domain/kdf-config";
 import {
@@ -10,7 +11,6 @@ import {
   DEFAULT_ARGON2_PARALLELISM,
   KdfType,
 } from "@bitwarden/common/enums";
-import { DialogService } from "@bitwarden/components";
 
 import { ChangeKdfConfirmationComponent } from "./change-kdf-confirmation.component";
 
@@ -25,7 +25,7 @@ export class ChangeKdfComponent implements OnInit {
   kdfOptions: any[] = [];
   recommendedPbkdf2Iterations = DEFAULT_PBKDF2_ITERATIONS;
 
-  constructor(private stateService: StateService, private dialogService: DialogService) {
+  constructor(private stateService: StateService, private dialogService: DialogServiceAbstraction) {
     this.kdfOptions = [
       { name: "PBKDF2 SHA-256", value: KdfType.PBKDF2_SHA256 },
       { name: "Argon2id", value: KdfType.Argon2id },

apps/web/src/app/settings/change-password.component.ts

@@ -3,6 +3,7 @@ import { Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -61,7 +62,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     private keyConnectorService: KeyConnectorService,
     private router: Router,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -70,7 +72,8 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 
@@ -99,13 +102,14 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
       }
 
       if (hasOldAttachments) {
-        const learnMore = await this.platformUtilsService.showDialog(
+        const learnMore = await this.dialogService.openSimpleDialog({
-          this.i18nService.t("oldAttachmentsNeedFixDesc"),
+          title: { key: "warning" },
-          null,
+          content: { key: "oldAttachmentsNeedFixDesc" },
-          this.i18nService.t("learnMore"),
+          acceptButtonText: { key: "learnMore" },
-          this.i18nService.t("close"),
+          cancelButtonText: { key: "close" },
-          "warning"
+          type: SimpleDialogType.WARNING,
-        );
+        });
+
         if (learnMore) {
           this.platformUtilsService.launchUri(
             "https://bitwarden.com/help/attachments/#add-storage-space"
@@ -115,17 +119,17 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
         return;
       }
 
-      const result = await this.platformUtilsService.showDialog(
+      const result = await this.dialogService.openSimpleDialog({
-        this.i18nService.t("updateEncryptionKeyWarning") +
+        title: { key: "rotateEncKeyTitle" },
+        content:
+          this.i18nService.t("updateEncryptionKeyWarning") +
           " " +
           this.i18nService.t("updateEncryptionKeyExportWarning") +
           " " +
           this.i18nService.t("rotateEncKeyConfirmation"),
-        this.i18nService.t("rotateEncKeyTitle"),
+        type: SimpleDialogType.WARNING,
-        this.i18nService.t("yes"),
+      });
-        this.i18nService.t("no"),
+
-        "warning"
-      );
       if (!result) {
         this.rotateEncKey = false;
       }

apps/web/src/app/settings/preferences.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { concatMap, filter, map, Observable, Subject, takeUntil, tap } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -53,7 +54,8 @@ export class PreferencesComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private messagingService: MessagingService,
     private themingService: AbstractThemingService,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private dialogService: DialogServiceAbstraction
   ) {
     this.vaultTimeoutOptions = [
       { name: i18nService.t("oneMinute"), value: 1 },
@@ -112,13 +114,12 @@ export class PreferencesComponent implements OnInit {
       .pipe(
         concatMap(async (action) => {
           if (action === VaultTimeoutAction.LogOut) {
-            const confirmed = await this.platformUtilsService.showDialog(
+            const confirmed = await this.dialogService.openSimpleDialog({
-              this.i18nService.t("vaultTimeoutLogOutConfirmation"),
+              title: { key: "vaultTimeoutLogOutConfirmationTitle" },
-              this.i18nService.t("vaultTimeoutLogOutConfirmationTitle"),
+              content: { key: "vaultTimeoutLogOutConfirmation" },
-              this.i18nService.t("yes"),
+              type: SimpleDialogType.WARNING,
-              this.i18nService.t("cancel"),
+            });
-              "warning"
+
-            );
             if (!confirmed) {
               this.form.controls.vaultTimeoutAction.patchValue(VaultTimeoutAction.Lock, {
                 emitEvent: false,

apps/web/src/app/tools/import-export/export.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { UntypedFormBuilder } from "@angular/forms";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/tools/export/components/export.component";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -36,7 +37,8 @@ export class ExportComponent extends BaseExportComponent {
     userVerificationService: UserVerificationService,
     formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService,
-    private modalService: ModalService
+    private modalService: ModalService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cryptoService,
@@ -49,7 +51,8 @@ export class ExportComponent extends BaseExportComponent {
       logService,
       userVerificationService,
       formBuilder,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/web/src/app/tools/import-export/import.component.ts

@@ -4,6 +4,7 @@ import * as JSZip from "jszip";
 import { firstValueFrom } from "rxjs";
 import Swal, { SweetAlertIcon } from "sweetalert2";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -11,7 +12,6 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
 import {
   ImportOption,
   ImportType,
@@ -46,7 +46,7 @@ export class ImportComponent implements OnInit {
     private logService: LogService,
     protected modalService: ModalService,
     protected syncService: SyncService,
-    protected dialogService: DialogService
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {

apps/web/src/app/tools/send/add-edit.component.ts

@@ -1,6 +1,7 @@
 import { DatePipe } from "@angular/common";
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/tools/send/add-edit.component";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -29,7 +30,8 @@ export class AddEditComponent extends BaseAddEditComponent {
     messagingService: MessagingService,
     policyService: PolicyService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -41,7 +43,8 @@ export class AddEditComponent extends BaseAddEditComponent {
       policyService,
       logService,
       stateService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/web/src/app/tools/send/send.component.ts

@@ -1,5 +1,6 @@
 import { Component, NgZone, ViewChild, ViewContainerRef } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { SendComponent as BaseSendComponent } from "@bitwarden/angular/tools/send/send.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -38,7 +39,8 @@ export class SendComponent extends BaseSendComponent {
     private modalService: ModalService,
     private broadcasterService: BroadcasterService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       sendService,
@@ -49,7 +51,8 @@ export class SendComponent extends BaseSendComponent {
       searchService,
       policyService,
       logService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/web/src/app/vault/individual-vault/add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AddEditComponent as BaseAddEditComponent } from "@bitwarden/angular/vault/components/add-edit.component";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -57,7 +58,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
     organizationService: OrganizationService,
     logService: LogService,
     passwordRepromptService: PasswordRepromptService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -73,7 +75,8 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
       logService,
       passwordRepromptService,
       organizationService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/web/src/app/vault/individual-vault/attachments.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -27,7 +28,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     platformUtilsService: PlatformUtilsService,
     apiService: ApiService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -38,7 +40,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
       window,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.ts

@@ -1,6 +1,7 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -8,7 +9,6 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { CollectionBulkDeleteRequest } from "@bitwarden/common/models/request/collection-bulk-delete.request";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherBulkDeleteRequest } from "@bitwarden/common/vault/models/request/cipher-bulk-delete.request";
-import { DialogService } from "@bitwarden/components";
 
 export interface BulkDeleteDialogParams {
   cipherIds?: string[];
@@ -28,7 +28,7 @@ export enum BulkDeleteDialogResult {
  * @param config Configuration for the dialog
  */
 export const openBulkDeleteDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<BulkDeleteDialogParams>
 ) => {
   return dialogService.open<BulkDeleteDialogResult, BulkDeleteDialogParams>(

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-move-dialog/bulk-move-dialog.component.ts

@@ -3,12 +3,12 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { firstValueFrom, Observable } from "rxjs";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
-import { DialogService } from "@bitwarden/components";
 
 export interface BulkMoveDialogParams {
   cipherIds?: string[];
@@ -25,7 +25,7 @@ export enum BulkMoveDialogResult {
  * @param config Configuration for the dialog
  */
 export const openBulkMoveDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<BulkMoveDialogParams>
 ) => {
   return dialogService.open<BulkMoveDialogResult, BulkMoveDialogParams>(

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-restore-dialog/bulk-restore-dialog.component.ts

@@ -1,10 +1,10 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { DialogService } from "@bitwarden/components";
 
 export interface BulkRestoreDialogParams {
   cipherIds: string[];
@@ -21,7 +21,7 @@ export enum BulkRestoreDialogResult {
  * @param config Configuration for the dialog
  */
 export const openBulkRestoreDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<BulkRestoreDialogParams>
 ) => {
   return dialogService.open<BulkRestoreDialogResult, BulkRestoreDialogParams>(

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.ts

@@ -1,6 +1,7 @@
 import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject, OnInit } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
@@ -11,7 +12,6 @@ import { CollectionView } from "@bitwarden/common/admin-console/models/view/coll
 import { Checkable, isChecked } from "@bitwarden/common/types/checkable";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
 
 export interface BulkShareDialogParams {
   ciphers: CipherView[];
@@ -29,7 +29,7 @@ export enum BulkShareDialogResult {
  * @param config Configuration for the dialog
  */
 export const openBulkShareDialog = (
-  dialogService: DialogService,
+  dialogService: DialogServiceAbstraction,
   config: DialogConfig<BulkShareDialogParams>
 ) => {
   return dialogService.open<BulkShareDialogResult, BulkShareDialogParams>(

apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -18,8 +19,16 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     folderApiService: FolderApiServiceAbstraction,
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
-    logService: LogService
+    logService: LogService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(folderService, folderApiService, i18nService, platformUtilsService, logService);
+    super(
+      folderService,
+      folderApiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      dialogService
+    );
   }
 }

apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.ts

@@ -1,6 +1,7 @@
 import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { map, Subject, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -40,7 +41,8 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
     private modalService: ModalService,
     private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    private organizationUserService: OrganizationUserService
+    private organizationUserService: OrganizationUserService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -80,13 +82,12 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
   }
 
   async unlinkSso(org: Organization) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("unlinkSsoConfirmation"),
+      title: org.name,
-      org.name,
+      content: { key: "unlinkSsoConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return false;
     }
@@ -103,13 +104,12 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
   }
 
   async leave(org: Organization) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("leaveOrganizationConfirmation"),
+      title: org.name,
-      org.name,
+      content: { key: "leaveOrganizationConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return false;
     }

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -29,6 +29,7 @@ import {
 } from "rxjs/operators";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -54,7 +55,7 @@ import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/pa
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService, Icons } from "@bitwarden/components";
+import { Icons } from "@bitwarden/components";
 
 import { UpdateKeyComponent } from "../../settings/update-key.component";
 import { VaultItemEvent } from "../components/vault-items/vault-item-event";
@@ -151,7 +152,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     private i18nService: I18nService,
     private modalService: ModalService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private tokenService: TokenService,
     private cryptoService: CryptoService,
     private messagingService: MessagingService,
@@ -650,13 +651,13 @@ export class VaultComponent implements OnInit, OnDestroy {
     if (!c.isDeleted) {
       return;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t("restoreItemConfirmation"),
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("restoreItem"),
+      title: { key: "restoreItemConfirmation" },
-      this.i18nService.t("yes"),
+      content: { key: "restoreItem" },
-      this.i18nService.t("no"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
+
     if (!confirmed) {
       return false;
     }
@@ -701,15 +702,13 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
 
     const permanent = c.isDeleted;
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t(
+    const confirmed = await this.dialogService.openSimpleDialog({
-        permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
+      title: { key: permanent ? "permanentlyDeleteItem" : "deleteItem" },
-      ),
+      content: { key: permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation" },
-      this.i18nService.t(permanent ? "permanentlyDeleteItem" : "deleteItem"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("yes"),
+    });
-      this.i18nService.t("no"),
+
-      "warning"
-    );
     if (!confirmed) {
       return false;
     }

apps/web/src/app/vault/org-vault/add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -49,7 +50,8 @@ export class AddEditComponent extends BaseAddEditComponent {
     logService: LogService,
     passwordRepromptService: PasswordRepromptService,
     organizationService: OrganizationService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -67,7 +69,8 @@ export class AddEditComponent extends BaseAddEditComponent {
       organizationService,
       logService,
       passwordRepromptService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/web/src/app/vault/org-vault/attachments.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
@@ -31,7 +32,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     platformUtilsService: PlatformUtilsService,
     apiService: ApiService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -41,7 +43,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
       platformUtilsService,
       apiService,
       logService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts

@@ -2,17 +2,17 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
+import {
+  SimpleDialogType,
+  DialogServiceAbstraction,
+  SimpleDialogCloseType,
+  SimpleDialogOptions,
+} from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { ProductType } from "@bitwarden/common/enums";
 import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
-import {
-  DialogService,
-  SimpleDialogCloseType,
-  SimpleDialogOptions,
-  SimpleDialogType,
-} from "@bitwarden/components";
 
 import {
   CollectionAdminService,
@@ -66,7 +66,7 @@ export class VaultHeaderComponent {
   constructor(
     private organizationService: OrganizationService,
     private i18nService: I18nService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private collectionAdminService: CollectionAdminService,
     private router: Router
   ) {}
@@ -126,7 +126,7 @@ export class VaultHeaderComponent {
       orgUpgradeSimpleDialogOpts.cancelButtonText = null; // hide secondary btn
     }
 
-    const simpleDialog = this.dialogService.openSimpleDialog(orgUpgradeSimpleDialogOpts);
+    const simpleDialog = this.dialogService.openSimpleDialogRef(orgUpgradeSimpleDialogOpts);
 
     firstValueFrom(simpleDialog.closed).then((result: SimpleDialogCloseType | undefined) => {
       if (!result) {

apps/web/src/app/vault/org-vault/vault.component.ts

@@ -30,6 +30,7 @@ import {
 } from "rxjs/operators";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -52,7 +53,7 @@ import { PasswordRepromptService } from "@bitwarden/common/vault/abstractions/pa
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService, Icons } from "@bitwarden/components";
+import { Icons } from "@bitwarden/components";
 
 import {
   CollectionAdminService,
@@ -147,7 +148,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     private syncService: SyncService,
     private i18nService: I18nService,
     private modalService: ModalService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private messagingService: MessagingService,
     private broadcasterService: BroadcasterService,
     private ngZone: NgZone,
@@ -662,13 +663,13 @@ export class VaultComponent implements OnInit, OnDestroy {
     if (!c.isDeleted) {
       return;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t("restoreItemConfirmation"),
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("restoreItem"),
+      title: { key: "restoreItem" },
-      this.i18nService.t("yes"),
+      content: { key: "restoreItemConfirmation" },
-      this.i18nService.t("no"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
+
     if (!confirmed) {
       return false;
     }
@@ -714,15 +715,13 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
 
     const permanent = c.isDeleted;
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t(
+    const confirmed = await this.dialogService.openSimpleDialog({
-        permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation"
+      title: { key: permanent ? "permanentlyDeleteItem" : "deleteItem" },
-      ),
+      content: { key: permanent ? "permanentlyDeleteItemConfirmation" : "deleteItemConfirmation" },
-      this.i18nService.t(permanent ? "permanentlyDeleteItem" : "deleteItem"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("yes"),
+    });
-      this.i18nService.t("no"),
+
-      "warning"
-    );
     if (!confirmed) {
       return false;
     }
@@ -752,13 +751,12 @@ export class VaultComponent implements OnInit, OnDestroy {
       );
       return;
     }
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("deleteCollectionConfirmation"),
+      title: collection.name,
-      collection.name,
+      content: { key: "deleteCollectionConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }

apps/web/src/auth/lock.component.ts

@@ -2,6 +2,7 @@ import { Component, NgZone } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { LockComponent as BaseLockComponent } from "@bitwarden/angular/auth/components/lock.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
@@ -41,7 +42,8 @@ export class LockComponent extends BaseLockComponent {
     ngZone: NgZone,
     policyApiService: PolicyApiServiceAbstraction,
     policyService: InternalPolicyService,
-    passwordGenerationService: PasswordGenerationServiceAbstraction
+    passwordGenerationService: PasswordGenerationServiceAbstraction,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       router,
@@ -59,7 +61,8 @@ export class LockComponent extends BaseLockComponent {
       ngZone,
       policyApiService,
       policyService,
-      passwordGenerationService
+      passwordGenerationService,
+      dialogService
     );
   }
 

apps/web/src/auth/register-form/register-form.component.ts

@@ -3,6 +3,7 @@ import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -44,7 +45,8 @@ export class RegisterFormComponent extends BaseRegisterComponent {
     private policyService: PolicyService,
     environmentService: EnvironmentService,
     logService: LogService,
-    auditService: AuditService
+    auditService: AuditService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       formValidationErrorService,
@@ -59,7 +61,8 @@ export class RegisterFormComponent extends BaseRegisterComponent {
       passwordGenerationService,
       environmentService,
       logService,
-      auditService
+      auditService,
+      dialogService
     );
   }
 

apps/web/src/auth/set-password.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { SetPasswordComponent as BaseSetPasswordComponent } from "@bitwarden/angular/components/set-password.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -34,7 +35,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
     route: ActivatedRoute,
     stateService: StateService,
     organizationApiService: OrganizationApiServiceAbstraction,
-    organizationUserService: OrganizationUserService
+    organizationUserService: OrganizationUserService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -50,7 +52,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
       route,
       stateService,
       organizationApiService,
-      organizationUserService
+      organizationUserService,
+      dialogService
     );
   }
 }

apps/web/src/auth/settings/emergency-access/emergency-access-attachments.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AttachmentsComponent as BaseAttachmentsComponent } from "@bitwarden/angular/vault/components/attachments.component";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -27,7 +28,8 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
     platformUtilsService: PlatformUtilsService,
     apiService: ApiService,
     logService: LogService,
-    fileDownloadService: FileDownloadService
+    fileDownloadService: FileDownloadService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -38,7 +40,8 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
       window,
       logService,
       stateService,
-      fileDownloadService
+      fileDownloadService,
+      dialogService
     );
   }
 

apps/web/src/auth/settings/emergency-access/emergency-access-takeover.component.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angu
 import { takeUntil } from "rxjs";
 
 import { ChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -46,7 +47,8 @@ export class EmergencyAccessTakeoverComponent
     platformUtilsService: PlatformUtilsService,
     policyService: PolicyService,
     private apiService: ApiService,
-    private logService: LogService
+    private logService: LogService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       i18nService,
@@ -55,7 +57,8 @@ export class EmergencyAccessTakeoverComponent
       passwordGenerationService,
       platformUtilsService,
       policyService,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

apps/web/src/auth/settings/emergency-access/emergency-access.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -54,7 +55,8 @@ export class EmergencyAccessComponent implements OnInit {
     private userNamePipe: UserNamePipe,
     private logService: LogService,
     private stateService: StateService,
-    private organizationService: OrganizationService
+    private organizationService: OrganizationService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -169,13 +171,12 @@ export class EmergencyAccessComponent implements OnInit {
   async remove(
     details: EmergencyAccessGranteeDetailsResponse | EmergencyAccessGrantorDetailsResponse
   ) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeUserConfirmation"),
+      title: this.userNamePipe.transform(details),
-      this.userNamePipe.transform(details),
+      content: { key: "removeUserConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return false;
     }
@@ -199,13 +200,15 @@ export class EmergencyAccessComponent implements OnInit {
   }
 
   async requestAccess(details: EmergencyAccessGrantorDetailsResponse) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("requestAccessConfirmation", details.waitTimeDays.toString()),
+      title: this.userNamePipe.transform(details),
-      this.userNamePipe.transform(details),
+      content: {
-      this.i18nService.t("requestAccess"),
+        key: "requestAccessConfirmation",
-      this.i18nService.t("no"),
+        placeholders: [details.waitTimeDays.toString()],
-      "warning"
+      },
-    );
+      acceptButtonText: { key: "requestAccess" },
+      type: SimpleDialogType.WARNING,
+    });
 
     if (!confirmed) {
       return false;
@@ -226,13 +229,15 @@ export class EmergencyAccessComponent implements OnInit {
       details.type === EmergencyAccessType.View ? "view" : "takeover"
     );
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("approveAccessConfirmation", this.userNamePipe.transform(details), type),
+      title: this.userNamePipe.transform(details),
-      this.userNamePipe.transform(details),
+      content: {
-      this.i18nService.t("approve"),
+        key: "approveAccessConfirmation",
-      this.i18nService.t("no"),
+        placeholders: [this.userNamePipe.transform(details), type],
-      "warning"
+      },
-    );
+      acceptButtonText: { key: "approve" },
+      type: SimpleDialogType.WARNING,
+    });
 
     if (!confirmed) {
       return false;

apps/web/src/auth/settings/emergency-access/emergency-add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -45,7 +46,8 @@ export class EmergencyAddEditComponent extends BaseAddEditComponent {
     passwordRepromptService: PasswordRepromptService,
     organizationService: OrganizationService,
     logService: LogService,
-    sendApiService: SendApiService
+    sendApiService: SendApiService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       cipherService,
@@ -63,7 +65,8 @@ export class EmergencyAddEditComponent extends BaseAddEditComponent {
       organizationService,
       logService,
       passwordRepromptService,
-      sendApiService
+      sendApiService,
+      dialogService
     );
   }
 

apps/web/src/auth/settings/two-factor-authenticator.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -50,9 +51,17 @@ export class TwoFactorAuthenticatorComponent
     userVerificationService: UserVerificationService,
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
-    private stateService: StateService
+    private stateService: StateService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      userVerificationService,
+      dialogService
+    );
     this.qrScript = window.document.createElement("script");
     this.qrScript.src = "scripts/qrious.min.js";
     this.qrScript.async = true;

apps/web/src/auth/settings/two-factor-base.component.ts

@@ -1,5 +1,6 @@
 import { Directive, EventEmitter, Output } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -30,7 +31,8 @@ export abstract class TwoFactorBaseComponent {
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService,
     protected logService: LogService,
-    protected userVerificationService: UserVerificationService
+    protected userVerificationService: UserVerificationService,
+    protected dialogService: DialogServiceAbstraction
   ) {}
 
   protected auth(authResponse: AuthResponseBase) {
@@ -49,15 +51,12 @@ export abstract class TwoFactorBaseComponent {
   }
 
   protected async disable(promise: Promise<unknown>) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("twoStepDisableDesc"),
+      title: { key: "disable" },
-      this.i18nService.t("disable"),
+      content: { key: "twoStepDisableDesc" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning",
+
-      false,
-      this.componentName != "" ? this.componentName + " .modal-content" : null
-    );
     if (!confirmed) {
       return;
     }

apps/web/src/auth/settings/two-factor-duo.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -30,9 +31,17 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
-    userVerificationService: UserVerificationService
+    userVerificationService: UserVerificationService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      userVerificationService,
+      dialogService
+    );
   }
 
   auth(authResponse: AuthResponse<TwoFactorDuoResponse>) {

apps/web/src/auth/settings/two-factor-email.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -34,9 +35,17 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent {
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
     userVerificationService: UserVerificationService,
-    private stateService: StateService
+    private stateService: StateService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      userVerificationService,
+      dialogService
+    );
   }
 
   auth(authResponse: AuthResponse<TwoFactorEmailResponse>) {

apps/web/src/auth/settings/two-factor-webauthn.component.ts

@@ -1,5 +1,6 @@
 import { Component, NgZone } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -49,9 +50,17 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     platformUtilsService: PlatformUtilsService,
     private ngZone: NgZone,
     logService: LogService,
-    userVerificationService: UserVerificationService
+    userVerificationService: UserVerificationService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      userVerificationService,
+      dialogService
+    );
   }
 
   auth(authResponse: AuthResponse<TwoFactorWebAuthnResponse>) {
@@ -85,13 +94,13 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
       return;
     }
     const name = key.name != null ? key.name : this.i18nService.t("webAuthnkeyX", key.id as any);
-    const confirmed = await this.platformUtilsService.showDialog(
+
-      this.i18nService.t("removeU2fConfirmation"),
+    const confirmed = await this.dialogService.openSimpleDialog({
-      name,
+      title: name,
-      this.i18nService.t("yes"),
+      content: { key: "removeU2fConfirmation" },
-      this.i18nService.t("no"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
+
     if (!confirmed) {
       return;
     }

apps/web/src/auth/settings/two-factor-yubikey.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -36,9 +37,17 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     logService: LogService,
-    userVerificationService: UserVerificationService
+    userVerificationService: UserVerificationService,
+    dialogService: DialogServiceAbstraction
   ) {
-    super(apiService, i18nService, platformUtilsService, logService, userVerificationService);
+    super(
+      apiService,
+      i18nService,
+      platformUtilsService,
+      logService,
+      userVerificationService,
+      dialogService
+    );
   }
 
   auth(authResponse: AuthResponse<TwoFactorYubiKeyResponse>) {

apps/web/src/auth/update-password.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { UpdatePasswordComponent as BaseUpdatePasswordComponent } from "@bitwarden/angular/auth/components/update-password.component";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -29,7 +30,8 @@ export class UpdatePasswordComponent extends BaseUpdatePasswordComponent {
     apiService: ApiService,
     logService: LogService,
     stateService: StateService,
-    userVerificationService: UserVerificationService
+    userVerificationService: UserVerificationService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       router,
@@ -42,7 +44,8 @@ export class UpdatePasswordComponent extends BaseUpdatePasswordComponent {
       apiService,
       stateService,
       userVerificationService,
-      logService
+      logService,
+      dialogService
     );
   }
 }

apps/web/src/scss/tailwind.css

@@ -28,3 +28,16 @@ summary.tw-list-none::-webkit-details-marker {
 .tw-text-unset {
   text-align: unset;
 }
+
+/**
+ * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
+ * Remove once bootstrap is removed from our codebase.
+ * CL-XYZ
+ */
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper,
+.cdk-overlay-connected-position-bounding-box,
+.cdk-overlay-backdrop,
+.cdk-overlay-pane {
+  z-index: 2000 !important;
+}

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.ts

@@ -3,6 +3,7 @@ import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from "@angular/forms";
 import { Subject, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/abstractions/cryptoFunction.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain-api.service.abstraction";
@@ -64,7 +65,8 @@ export class DomainAddEditDialogComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private orgDomainApiService: OrgDomainApiServiceAbstraction,
     private orgDomainService: OrgDomainServiceAbstraction,
-    private validationService: ValidationService
+    private validationService: ValidationService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   //#region Angular Method Implementations
@@ -248,13 +250,12 @@ export class DomainAddEditDialogComponent implements OnInit, OnDestroy {
   }
 
   deleteDomain = async (): Promise<void> => {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeDomainWarning"),
+      title: { key: "removeDomain" },
-      this.i18nService.t("removeDomain"),
+      content: { key: "removeDomainWarning" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.ts

@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
 import { concatMap, Observable, Subject, take, takeUntil } from "rxjs";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain-api.service.abstraction";
 import { OrgDomainServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain.service.abstraction";
@@ -10,7 +11,6 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
 import { HttpStatusCode } from "@bitwarden/common/enums";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
-import { DialogService } from "@bitwarden/components";
 
 import {
   DomainAddEditDialogComponent,
@@ -35,7 +35,7 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private orgDomainApiService: OrgDomainApiServiceAbstraction,
     private orgDomainService: OrgDomainServiceAbstraction,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private validationService: ValidationService
   ) {}
 
@@ -154,13 +154,12 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
   }
 
   async deleteDomain(orgDomainId: string): Promise<void> {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeDomainWarning"),
+      title: { key: "removeDomain" },
-      this.i18nService.t("removeDomain"),
+      content: { key: "removeDomainWarning" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return;
     }

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { UntypedFormBuilder, FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -45,7 +46,8 @@ export class ScimComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private environmentService: EnvironmentService,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -84,13 +86,13 @@ export class ScimComponent implements OnInit {
   }
 
   async rotateScimKey() {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("rotateScimKeyWarning"),
+      title: { key: "rotateScimKey" },
-      this.i18nService.t("rotateScimKey"),
+      content: { key: "rotateScimKeyWarning" },
-      this.i18nService.t("rotateKey"),
+      acceptButtonText: { key: "rotateKey" },
-      this.i18nService.t("cancel"),
+      type: SimpleDialogType.WARNING,
-      "warning"
+    });
-    );
+
     if (!confirmed) {
       return false;
     }

bitwarden_license/bit-web/src/app/admin-console/providers/clients/add-organization.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
@@ -27,7 +28,8 @@ export class AddOrganizationComponent implements OnInit {
     private webProviderService: WebProviderService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private validationService: ValidationService
+    private validationService: ValidationService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -49,13 +51,14 @@ export class AddOrganizationComponent implements OnInit {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("addOrganizationConfirmation", organization.name, this.provider.name),
+      title: organization.name,
-      organization.name,
+      content: {
-      this.i18nService.t("yes"),
+        key: "addOrganizationConfirmation",
-      this.i18nService.t("no"),
+        placeholders: [organization.name, this.provider.name],
-      "warning"
+      },
-    );
+      type: SimpleDialogType.WARNING,
+    });
 
     if (!confirmed) {
       return false;

bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -61,7 +62,8 @@ export class ClientsComponent implements OnInit {
     private logService: LogService,
     private modalService: ModalService,
     private organizationService: OrganizationService,
-    private organizationApiService: OrganizationApiServiceAbstraction
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -153,13 +155,11 @@ export class ClientsComponent implements OnInit {
   }
 
   async remove(organization: ProviderOrganizationOrganizationDetailsResponse) {
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("detachOrganizationConfirmation"),
+      title: organization.organizationName,
-      organization.organizationName,
+      content: { key: "detachOrganizationConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
-    );
 
     if (!confirmed) {
       return false;

bitwarden_license/bit-web/src/app/admin-console/providers/manage/people.component.ts

@@ -4,6 +4,7 @@ import { first } from "rxjs/operators";
 
 import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -68,7 +69,8 @@ export class PeopleComponent
     searchPipe: SearchPipe,
     userNamePipe: UserNamePipe,
     stateService: StateService,
-    private providerService: ProviderService
+    private providerService: ProviderService,
+    dialogService: DialogServiceAbstraction
   ) {
     super(
       apiService,
@@ -81,7 +83,8 @@ export class PeopleComponent
       logService,
       searchPipe,
       userNamePipe,
-      stateService
+      stateService,
+      dialogService
     );
   }
 

bitwarden_license/bit-web/src/app/admin-console/providers/manage/user-add-edit.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -36,7 +37,8 @@ export class UserAddEditComponent implements OnInit {
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private logService: LogService
+    private logService: LogService,
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   async ngOnInit() {
@@ -91,13 +93,12 @@ export class UserAddEditComponent implements OnInit {
       return;
     }
 
-    const confirmed = await this.platformUtilsService.showDialog(
+    const confirmed = await this.dialogService.openSimpleDialog({
-      this.i18nService.t("removeUserConfirmation"),
+      title: this.name,
-      this.name,
+      content: { key: "removeUserConfirmation" },
-      this.i18nService.t("yes"),
+      type: SimpleDialogType.WARNING,
-      this.i18nService.t("no"),
+    });
-      "warning"
+
-    );
     if (!confirmed) {
       return false;
     }

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.ts

@@ -13,11 +13,11 @@ import {
   share,
 } from "rxjs";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../models/view/project-list.view";
 import { SecretListView } from "../models/view/secret-list.view";
@@ -84,7 +84,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     private projectService: ProjectService,
     private secretService: SecretService,
     private serviceAccountService: ServiceAccountService,
-    private dialogService: DialogService,
+    private dialogService: DialogServiceAbstraction,
     private organizationService: OrganizationService,
     private stateService: StateService,
     private platformUtilsService: PlatformUtilsService,

bitwarden_license/bit-web/src/app/secrets-manager/projects/dialog/project-delete-dialog.component.ts

@@ -8,9 +8,9 @@ import {
   AbstractControl,
 } from "@angular/forms";
 
+import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { DialogService } from "@bitwarden/components";
 
 import { ProjectListView } from "../../models/view/project-list.view";
 import {
@@ -38,7 +38,7 @@ export class ProjectDeleteDialogComponent implements OnInit {
     private projectService: ProjectService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
-    private dialogService: DialogService
+    private dialogService: DialogServiceAbstraction
   ) {}
 
   ngOnInit(): void {