[AC-2268] - migrate toast to CL service for admin-console (#10663)

* migrate toast to CL service for admin-console * fix spec * add missing dep for toastService * fix toastService args * fix toastService args * fix toastService args
2025-12-14 15:23:33 +00:00 · 2024-08-30 11:16:06 -07:00
parent d9ff8b0944
commit 2882fa3077
33 changed files with 381 additions and 255 deletions
--- a/apps/browser/src/vault/popup/components/vault/collections.component.ts
+++ b/apps/browser/src/vault/popup/components/vault/collections.component.ts
@@ -12,6 +12,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-vault-collections",
@@ -30,6 +31,7 @@ export class CollectionsComponent extends BaseCollectionsComponent implements On
    logService: LogService,
    configService: ConfigService,
    accountService: AccountService,
+    toastService: ToastService,
  ) {
    super(
      collectionService,
@@ -40,6 +42,7 @@ export class CollectionsComponent extends BaseCollectionsComponent implements On
      logService,
      configService,
      accountService,
+      toastService,
    );
  }

--- a/apps/desktop/src/vault/app/vault/collections.component.ts
+++ b/apps/desktop/src/vault/app/vault/collections.component.ts
@@ -9,6 +9,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-vault-collections",
@@ -24,6 +25,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
    logService: LogService,
    configService: ConfigService,
    accountService: AccountService,
+    toastService: ToastService,
  ) {
    super(
      collectionService,
@@ -34,6 +36,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
      logService,
      configService,
      accountService,
+      toastService,
    );
  }
 }
--- a/apps/web/src/app/admin-console/common/base.events.component.ts
+++ b/apps/web/src/app/admin-console/common/base.events.component.ts
@@ -8,6 +8,7 @@ import { FileDownloadService } from "@bitwarden/common/platform/abstractions/fil
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

 import { EventService } from "../../core";
 import { EventExportService } from "../../tools/event-export";
@@ -34,6 +35,7 @@ export abstract class BaseEventsComponent {
    protected platformUtilsService: PlatformUtilsService,
    protected logService: LogService,
    protected fileDownloadService: FileDownloadService,
+    private toastService: ToastService,
  ) {
    const defaultDates = this.eventService.getDefaultDateFilters();
    this.start = defaultDates[0];
@@ -164,11 +166,11 @@ export abstract class BaseEventsComponent {
    try {
      dates = this.eventService.formatDateFilters(this.start, this.end);
    } catch (e) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidDateRange"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidDateRange"),
+      });
      return null;
    }
    return dates;
--- a/apps/web/src/app/admin-console/common/base.people.component.ts
+++ b/apps/web/src/app/admin-console/common/base.people.component.ts
@@ -22,7 +22,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { OrganizationUserView } from "../organizations/core/views/organization-user.view";
 import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
@@ -127,6 +127,7 @@ export abstract class BasePeopleComponent<
    protected userNamePipe: UserNamePipe,
    protected dialogService: DialogService,
    protected organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+    protected toastService: ToastService,
  ) {}

  abstract edit(user: UserType): void;
@@ -251,11 +252,11 @@ export abstract class BasePeopleComponent<
    this.actionPromise = this.deleteUser(user.id);
    try {
      await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("removedUserId", this.userNamePipe.transform(user)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("removedUserId", this.userNamePipe.transform(user)),
+      });
      this.removeUser(user);
    } catch (e) {
      this.validationService.showError(e);
@@ -282,11 +283,11 @@ export abstract class BasePeopleComponent<
    this.actionPromise = this.revokeUser(user.id);
    try {
      await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("revokedUserId", this.userNamePipe.transform(user)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("revokedUserId", this.userNamePipe.transform(user)),
+      });
      await this.load();
    } catch (e) {
      this.validationService.showError(e);
@@ -298,11 +299,11 @@ export abstract class BasePeopleComponent<
    this.actionPromise = this.restoreUser(user.id);
    try {
      await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("restoredUserId", this.userNamePipe.transform(user)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("restoredUserId", this.userNamePipe.transform(user)),
+      });
      await this.load();
    } catch (e) {
      this.validationService.showError(e);
@@ -318,11 +319,11 @@ export abstract class BasePeopleComponent<
    this.actionPromise = this.reinviteUser(user.id);
    try {
      await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("hasBeenReinvited", this.userNamePipe.transform(user)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("hasBeenReinvited", this.userNamePipe.transform(user)),
+      });
    } catch (e) {
      this.validationService.showError(e);
    }
@@ -344,11 +345,11 @@ export abstract class BasePeopleComponent<
        this.actionPromise = this.confirmUser(user, publicKey);
        await this.actionPromise;
        updateUser(this);
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(user)),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(user)),
+        });
      } catch (e) {
        this.validationService.showError(e);
        throw e;
--- a/apps/web/src/app/admin-console/organizations/manage/entity-events.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/entity-events.component.ts
@@ -12,7 +12,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
-import { DialogService, TableDataSource } from "@bitwarden/components";
+import { DialogService, TableDataSource, ToastService } from "@bitwarden/components";

 import { EventService } from "../../../core";
 import { SharedModule } from "../../../shared";
@@ -63,6 +63,7 @@ export class EntityEventsComponent implements OnInit {
    private organizationUserService: OrganizationUserService,
    private formBuilder: FormBuilder,
    private validationService: ValidationService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -109,11 +110,11 @@ export class EntityEventsComponent implements OnInit {
        this.filterFormGroup.value.end,
      );
    } catch (e) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidDateRange"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidDateRange"),
+      });
      return;
    }

--- a/apps/web/src/app/admin-console/organizations/manage/events.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.ts
@@ -14,6 +14,7 @@ import { FileDownloadService } from "@bitwarden/common/platform/abstractions/fil
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

 import { EventService } from "../../../core";
 import { EventExportService } from "../../../tools/event-export";
@@ -51,6 +52,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit, OnDe
    private organizationUserService: OrganizationUserService,
    private providerService: ProviderService,
    fileDownloadService: FileDownloadService,
+    toastService: ToastService,
  ) {
    super(
      eventService,
@@ -59,6 +61,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit, OnDe
      platformUtilsService,
      logService,
      fileDownloadService,
+      toastService,
    );
  }

--- a/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.ts
@@ -24,7 +24,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { CollectionAdminService } from "../../../vault/core/collection-admin.service";
 import { CollectionAdminView } from "../../../vault/core/views/collection-admin.view";
@@ -213,6 +213,7 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {
    private organizationService: OrganizationService,
    private accountService: AccountService,
    private collectionAdminService: CollectionAdminService,
+    private toastService: ToastService,
  ) {
    this.tabIndex = params.initialTab ?? GroupAddEditTabType.Info;
  }
@@ -280,11 +281,14 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {

    if (this.groupForm.invalid) {
      if (this.tabIndex !== GroupAddEditTabType.Info) {
-        this.platformUtilsService.showToast(
-          "error",
-          null,
-          this.i18nService.t("fieldOnTabRequiresAttention", this.i18nService.t("groupInfo")),
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t(
+            "fieldOnTabRequiresAttention",
+            this.i18nService.t("groupInfo"),
+          ),
+        });
      }
      return;
    }
@@ -300,11 +304,14 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {

    await this.groupService.save(groupView);

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t(this.editMode ? "editedGroupId" : "createdGroupId", formValue.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t(
+        this.editMode ? "editedGroupId" : "createdGroupId",
+        formValue.name,
+      ),
+    });

    this.dialogRef.close(GroupAddEditDialogResultType.Saved);
  };
@@ -325,11 +332,11 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {

    await this.groupService.delete(this.organizationId, this.groupId);

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("deletedGroupId", this.group.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("deletedGroupId", this.group.name),
+    });
    this.dialogRef.close(GroupAddEditDialogResultType.Deleted);
  };
 }
--- a/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.ts
@@ -6,6 +6,7 @@ import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-conso
 import { OrganizationVerifyDeleteRecoverRequest } from "@bitwarden/common/admin-console/models/request/organization-verify-delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

 import { SharedModule } from "../../../shared/shared.module";

@@ -27,6 +28,7 @@ export class VerifyRecoverDeleteOrgComponent implements OnInit {
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
    private route: ActivatedRoute,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -44,11 +46,11 @@ export class VerifyRecoverDeleteOrgComponent implements OnInit {
  submit = async () => {
    const request = new OrganizationVerifyDeleteRecoverRequest(this.token);
    await this.apiService.deleteUsingToken(this.orgId, request);
-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("organizationDeleted"),
-      this.i18nService.t("organizationDeletedDesc"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("organizationDeleted"),
+      message: this.i18nService.t("organizationDeletedDesc"),
+    });
    await this.router.navigate(["/"]);
  };
 }
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-enable-sm-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-enable-sm-dialog.component.ts
@@ -4,7 +4,7 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { OrganizationUserService } from "@bitwarden/common/admin-console/abstractions/organization-user/organization-user.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService, TableDataSource } from "@bitwarden/components";
+import { DialogService, TableDataSource, ToastService } from "@bitwarden/components";

 import { OrganizationUserView } from "../../../core";

@@ -24,6 +24,7 @@ export class BulkEnableSecretsManagerDialogComponent implements OnInit {
    private organizationUserService: OrganizationUserService,
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
+    private toastService: ToastService,
  ) {}

  ngOnInit(): void {
@@ -35,11 +36,11 @@ export class BulkEnableSecretsManagerDialogComponent implements OnInit {
      this.data.orgId,
      this.dataSource.data.map((u) => u.id),
    );
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("activatedAccessToSecretsManager"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("activatedAccessToSecretsManager"),
+    });
    this.dialogRef.close();
  };

--- a/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/member-dialog/member-dialog.component.ts
@@ -26,7 +26,7 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { CollectionAdminService } from "../../../../../vault/core/collection-admin.service";
 import { CollectionAdminView } from "../../../../../vault/core/views/collection-admin.view";
@@ -143,6 +143,7 @@ export class MemberDialogComponent implements OnDestroy {
    private dialogService: DialogService,
    private accountService: AccountService,
    organizationService: OrganizationService,
+    private toastService: ToastService,
  ) {
    this.organization$ = organizationService
      .get$(this.params.organizationId)
@@ -376,11 +377,11 @@ export class MemberDialogComponent implements OnDestroy {
    ) {
      this.permissionsGroup.value.manageUsers = true;
      (document.getElementById("manageUsers") as HTMLInputElement).checked = true;
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("accountRecoveryManageUsers"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("accountRecoveryManageUsers"),
+      });
    }
  }

@@ -389,11 +390,11 @@ export class MemberDialogComponent implements OnDestroy {

    if (this.formGroup.invalid) {
      if (this.tabIndex !== MemberDialogTab.Role) {
-        this.platformUtilsService.showToast(
-          "error",
-          null,
-          this.i18nService.t("fieldOnTabRequiresAttention", this.i18nService.t("role")),
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("fieldOnTabRequiresAttention", this.i18nService.t("role")),
+        });
      }
      return;
    }
@@ -401,11 +402,11 @@ export class MemberDialogComponent implements OnDestroy {
    const organization = await firstValueFrom(this.organization$);

    if (!organization.useCustomPermissions && this.customUserTypeSelected) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("customNonEnterpriseError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("customNonEnterpriseError"),
+      });
      return;
    }

@@ -452,11 +453,14 @@ export class MemberDialogComponent implements OnDestroy {
      await this.userService.invite(emails, userView);
    }

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.params.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t(
+        this.editMode ? "editedUserId" : "invitedUsers",
+        this.params.name,
+      ),
+    });
    this.close(MemberDialogResult.Saved);
  };

@@ -492,11 +496,11 @@ export class MemberDialogComponent implements OnDestroy {
      this.params.organizationUserId,
    );

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("removedUserId", this.params.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("removedUserId", this.params.name),
+    });
    this.close(MemberDialogResult.Deleted);
  };

@@ -529,11 +533,11 @@ export class MemberDialogComponent implements OnDestroy {
      this.params.organizationUserId,
    );

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("revokedUserId", this.params.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("revokedUserId", this.params.name),
+    });
    this.isRevoked = true;
    this.close(MemberDialogResult.Revoked);
  };
@@ -548,11 +552,11 @@ export class MemberDialogComponent implements OnDestroy {
      this.params.organizationUserId,
    );

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("restoredUserId", this.params.name),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("restoredUserId", this.params.name),
+    });
    this.isRevoked = false;
    this.close(MemberDialogResult.Restored);
  };
--- a/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/reset-password.component.ts
@@ -17,7 +17,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { OrganizationUserResetPasswordService } from "../services/organization-user-reset-password/organization-user-reset-password.service";
@@ -50,6 +50,7 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
    private policyService: PolicyService,
    private logService: LogService,
    private dialogService: DialogService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -88,30 +89,30 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
    }

    this.platformUtilsService.copyToClipboard(value, { window: window });
-    this.platformUtilsService.showToast(
-      "info",
-      null,
-      this.i18nService.t("valueCopied", this.i18nService.t("password")),
-    );
+    this.toastService.showToast({
+      variant: "info",
+      title: null,
+      message: this.i18nService.t("valueCopied", this.i18nService.t("password")),
+    });
  }

  async submit() {
    // Validation
    if (this.newPassword == null || this.newPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
      return false;
    }

    if (this.newPassword.length < Utils.minimumPasswordLength) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordMinlength", Utils.minimumPasswordLength),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordMinlength", Utils.minimumPasswordLength),
+      });
      return false;
    }

@@ -123,11 +124,11 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
        this.enforcedPolicyOptions,
      )
    ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
+      });
      return;
    }

@@ -151,11 +152,11 @@ export class ResetPasswordComponent implements OnInit, OnDestroy {
        this.organizationId,
      );
      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("resetPasswordSuccess"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("resetPasswordSuccess"),
+      });
      this.passwordReset.emit();
    } catch (e) {
      this.logService.error(e);
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
@@ -15,7 +15,7 @@ import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/po
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { BasePolicy, BasePolicyComponent } from "../policies";

@@ -58,6 +58,7 @@ export class PolicyEditComponent implements AfterViewInit {
    private cdr: ChangeDetectorRef,
    private formBuilder: FormBuilder,
    private dialogRef: DialogRef<PolicyEditDialogResult>,
+    private toastService: ToastService,
  ) {}
  get policy(): BasePolicy {
    return this.data.policy;
@@ -95,7 +96,7 @@ export class PolicyEditComponent implements AfterViewInit {
    try {
      request = await this.policyComponent.buildRequest(this.data.policiesEnabledMap);
    } catch (e) {
-      this.platformUtilsService.showToast("error", null, e.message);
+      this.toastService.showToast({ variant: "error", title: null, message: e.message });
      return;
    }
    this.formPromise = this.policyApiService.putPolicy(
@@ -104,11 +105,11 @@ export class PolicyEditComponent implements AfterViewInit {
      request,
    );
    await this.formPromise;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
+    });
    this.dialogRef.close(PolicyEditDialogResult.Saved);
  };

--- a/apps/web/src/app/admin-console/organizations/settings/account.component.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/account.component.ts
@@ -14,7 +14,7 @@ import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.se
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { ApiKeyComponent } from "../../../auth/settings/security/api-key.component";
 import { PurgeVaultComponent } from "../../../vault/settings/purge-vault.component";
@@ -77,6 +77,7 @@ export class AccountComponent implements OnInit, OnDestroy {
    private organizationApiService: OrganizationApiServiceAbstraction,
    private dialogService: DialogService,
    private formBuilder: FormBuilder,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -167,7 +168,11 @@ export class AccountComponent implements OnInit, OnDestroy {

    await this.organizationApiService.save(this.organizationId, request);

-    this.platformUtilsService.showToast("success", null, this.i18nService.t("organizationUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("organizationUpdated"),
+    });
  };

  submitCollectionManagement = async () => {
@@ -184,11 +189,11 @@ export class AccountComponent implements OnInit, OnDestroy {

    await this.organizationApiService.updateCollectionManagement(this.organizationId, request);

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("updatedCollectionManagement"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("updatedCollectionManagement"),
+    });
  };

  async deleteOrganization() {
--- a/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.ts
@@ -14,7 +14,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { UserVerificationModule } from "../../../../auth/shared/components/user-verification";
 import { SharedModule } from "../../../../shared/shared.module";
@@ -94,6 +94,7 @@ export class DeleteOrganizationDialogComponent implements OnInit, OnDestroy {
    private organizationService: OrganizationService,
    private organizationApiService: OrganizationApiServiceAbstraction,
    private formBuilder: FormBuilder,
+    private toastService: ToastService,
  ) {}

  ngOnDestroy(): void {
@@ -121,11 +122,11 @@ export class DeleteOrganizationDialogComponent implements OnInit, OnDestroy {
      .buildRequest(this.formGroup.value.secret)
      .then((request) => this.organizationApiService.delete(this.organization.id, request));

-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("organizationDeleted"),
-      this.i18nService.t("organizationDeletedDesc"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("organizationDeleted"),
+      message: this.i18nService.t("organizationDeletedDesc"),
+    });
    this.dialogRef.close(DeleteOrganizationDialogResult.Deleted);
  };

--- a/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts
@@ -14,7 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { OrganizationPlansComponent } from "../../../billing";
 import { SharedModule } from "../../../shared";
@@ -68,6 +68,7 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
    private organizationService: OrganizationService,
    private dialogService: DialogService,
    private formBuilder: FormBuilder,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -76,12 +77,12 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
      const error = qParams.token == null;
      if (error) {
-        this.platformUtilsService.showToast(
-          "error",
-          null,
-          this.i18nService.t("sponsoredFamiliesAcceptFailed"),
-          { timeout: 10000 },
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("sponsoredFamiliesAcceptFailed"),
+          timeout: 10000,
+        });
        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
        // eslint-disable-next-line @typescript-eslint/no-floating-promises
        this.router.navigate(["/"]);
@@ -139,11 +140,11 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
      request.sponsoredOrganizationId = organizationId;

      await this.apiService.postRedeemSponsorship(this.token, request);
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("sponsoredFamiliesOfferRedeemed"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("sponsoredFamiliesOfferRedeemed"),
+      });
      await this.syncService.fullSync(true);

      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
--- a/apps/web/src/app/admin-console/organizations/users/enroll-master-password-reset.component.ts
+++ b/apps/web/src/app/admin-console/organizations/users/enroll-master-password-reset.component.ts
@@ -8,7 +8,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { OrganizationUserResetPasswordService } from "../members/services/organization-user-reset-password/organization-user-reset-password.service";

@@ -29,6 +29,7 @@ export class EnrollMasterPasswordReset {
    syncService: SyncService,
    logService: LogService,
    userVerificationService: UserVerificationService,
+    toastService: ToastService,
  ) {
    const result = await UserVerificationDialogComponent.open(dialogService, {
      title: "enrollAccountRecovery",
@@ -71,7 +72,11 @@ export class EnrollMasterPasswordReset {

    // Enrollment succeeded
    try {
-      platformUtilsService.showToast("success", null, i18nService.t("enrollPasswordResetSuccess"));
+      toastService.showToast({
+        variant: "success",
+        title: null,
+        message: i18nService.t("enrollPasswordResetSuccess"),
+      });
      await syncService.fullSync(true);
    } catch (e) {
      logService.error(e);
--- a/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
+++ b/apps/web/src/app/admin-console/providers/verify-recover-delete-provider.component.ts
@@ -7,6 +7,7 @@ import { ProviderVerifyRecoverDeleteRequest } from "@bitwarden/common/admin-cons
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-verify-recover-delete-provider",
@@ -27,6 +28,7 @@ export class VerifyRecoverDeleteProviderComponent implements OnInit {
    private i18nService: I18nService,
    private route: ActivatedRoute,
    private logService: LogService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -48,11 +50,11 @@ export class VerifyRecoverDeleteProviderComponent implements OnInit {
        request,
      );
      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("providerDeleted"),
-        this.i18nService.t("providerDeletedDesc"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("providerDeleted"),
+        message: this.i18nService.t("providerDeletedDesc"),
+      });
      await this.router.navigate(["/"]);
    } catch (e) {
      this.logService.error(e);
--- a/apps/web/src/app/vault/individual-vault/collections.component.ts
+++ b/apps/web/src/app/vault/individual-vault/collections.component.ts
@@ -11,7 +11,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

@Component({
  selector: "app-vault-collections",
@@ -29,6 +29,7 @@ export class CollectionsComponent extends BaseCollectionsComponent implements On
    accountService: AccountService,
    protected dialogRef: DialogRef,
    @Inject(DIALOG_DATA) params: CollectionsDialogParams,
+    toastService: ToastService,
  ) {
    super(
      collectionService,
@@ -39,6 +40,7 @@ export class CollectionsComponent extends BaseCollectionsComponent implements On
      logService,
      configService,
      accountService,
+      toastService,
    );
    this.cipherId = params?.cipherId;
  }
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.ts
@@ -15,7 +15,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { OrganizationUserResetPasswordService } from "../../../../admin-console/organizations/members/services/organization-user-reset-password/organization-user-reset-password.service";
 import { EnrollMasterPasswordReset } from "../../../../admin-console/organizations/users/enroll-master-password-reset.component";
@@ -50,6 +50,7 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
    private dialogService: DialogService,
    private resetPasswordService: OrganizationUserResetPasswordService,
    private userVerificationService: UserVerificationService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -158,6 +159,7 @@ export class OrganizationOptionsComponent implements OnInit, OnDestroy {
        this.syncService,
        this.logService,
        this.userVerificationService,
+        this.toastService,
      );
    } else {
      // Remove reset password
--- a/apps/web/src/app/vault/org-vault/collections.component.ts
+++ b/apps/web/src/app/vault/org-vault/collections.component.ts
@@ -15,7 +15,7 @@ import { CipherData } from "@bitwarden/common/vault/models/data/cipher.data";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherCollectionsRequest } from "@bitwarden/common/vault/models/request/cipher-collections.request";
 import { CollectionView } from "@bitwarden/common/vault/models/view/collection.view";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import {
  CollectionsComponent as BaseCollectionsComponent,
@@ -41,6 +41,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
    accountService: AccountService,
    protected dialogRef: DialogRef,
    @Inject(DIALOG_DATA) params: OrgVaultCollectionsDialogParams,
+    toastService: ToastService,
  ) {
    super(
      collectionService,
@@ -53,6 +54,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
      accountService,
      dialogRef,
      params,
+      toastService,
    );
    this.allowSelectNone = true;
    this.collectionIds = params?.collectionIds;