[PM-6564] migrate auth toasts to CL toastService (#10665)

* migrate auth toasts to CL toastService * fix component args * fix component args * fix specs * fix toastService args
2025-12-17 16:53:34 +00:00 · 2024-08-27 10:33:58 -07:00
parent e255d84121
commit 9041a4cd4c
75 changed files with 782 additions and 457 deletions
--- a/apps/web/src/app/auth/hint.component.ts
+++ b/apps/web/src/app/auth/hint.component.ts
@@ -8,6 +8,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 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-hint",
@@ -30,8 +31,17 @@ export class HintComponent extends BaseHintComponent implements OnInit {
    logService: LogService,
    loginEmailService: LoginEmailServiceAbstraction,
    private formBuilder: FormBuilder,
+    protected toastService: ToastService,
  ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
  }

  ngOnInit(): void {
--- a/apps/web/src/app/auth/login/login.component.ts
+++ b/apps/web/src/app/auth/login/login.component.ts
@@ -29,6 +29,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { flagEnabled } from "../../../utils/flags";
@@ -71,6 +72,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
    ssoLoginService: SsoLoginServiceAbstraction,
    webAuthnLoginService: WebAuthnLoginServiceAbstraction,
    registerRouteService: RegisterRouteService,
+    toastService: ToastService,
  ) {
    super(
      devicesApiService,
@@ -92,6 +94,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
      ssoLoginService,
      webAuthnLoginService,
      registerRouteService,
+      toastService,
    );
    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
    this.showPasswordless = flagEnabled("showPasswordless");
--- a/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts
+++ b/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts
@@ -9,6 +9,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";

 import { SharedModule } from "../../shared";
 import { UserKeyRotationModule } from "../key-rotation/user-key-rotation.module";
@@ -35,6 +36,7 @@ export class MigrateFromLegacyEncryptionComponent {
    private messagingService: MessagingService,
    private logService: LogService,
    private syncService: SyncService,
+    private toastService: ToastService,
  ) {}

  submit = async () => {
@@ -59,12 +61,12 @@ export class MigrateFromLegacyEncryptionComponent {

      await this.keyRotationService.rotateUserKeyAndEncryptedData(masterPassword, activeUser);

-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("keyUpdated"),
-        this.i18nService.t("logBackInOthersToo"),
-        { timeout: 15000 },
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("keyUpdated"),
+        message: this.i18nService.t("logBackInOthersToo"),
+        timeout: 15000,
+      });
      this.messagingService.send("logout");
    } catch (e) {
      this.logService.error(e);
--- a/apps/web/src/app/auth/recover-delete.component.ts
+++ b/apps/web/src/app/auth/recover-delete.component.ts
@@ -6,6 +6,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { DeleteRecoverRequest } from "@bitwarden/common/models/request/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";

@Component({
  selector: "app-recover-delete",
@@ -25,6 +26,7 @@ export class RecoverDeleteComponent {
    private apiService: ApiService,
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
+    private toastService: ToastService,
  ) {}

  submit = async () => {
@@ -35,11 +37,11 @@ export class RecoverDeleteComponent {
    const request = new DeleteRecoverRequest();
    request.email = this.email.value.trim().toLowerCase();
    await this.apiService.postAccountRecoverDelete(request);
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("deleteRecoverEmailSent"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("deleteRecoverEmailSent"),
+    });

    await this.router.navigate(["/"]);
  };
--- a/apps/web/src/app/auth/recover-two-factor.component.ts
+++ b/apps/web/src/app/auth/recover-two-factor.component.ts
@@ -8,6 +8,7 @@ import { TwoFactorRecoveryRequest } from "@bitwarden/common/auth/models/request/
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-recover-two-factor",
@@ -27,6 +28,7 @@ export class RecoverTwoFactorComponent {
    private i18nService: I18nService,
    private cryptoService: CryptoService,
    private loginStrategyService: LoginStrategyServiceAbstraction,
+    private toastService: ToastService,
  ) {}

  get email(): string {
@@ -53,11 +55,11 @@ export class RecoverTwoFactorComponent {
    const key = await this.loginStrategyService.makePreloginKey(this.masterPassword, request.email);
    request.masterPasswordHash = await this.cryptoService.hashMasterKey(this.masterPassword, key);
    await this.apiService.postTwoFactorRecover(request);
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("twoStepRecoverDisabled"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepRecoverDisabled"),
+    });
    await this.router.navigate(["/"]);
  };
 }
--- a/apps/web/src/app/auth/register-form/register-form.component.ts
+++ b/apps/web/src/app/auth/register-form/register-form.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 { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { AcceptOrganizationInviteService } from "../organization-invite/accept-organization.service";
@@ -52,6 +52,7 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
    auditService: AuditService,
    dialogService: DialogService,
    acceptOrgInviteService: AcceptOrganizationInviteService,
+    toastService: ToastService,
  ) {
    super(
      formValidationErrorService,
@@ -68,6 +69,7 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
      logService,
      auditService,
      dialogService,
+      toastService,
    );
    super.modifyRegisterRequest = async (request: RegisterRequest) => {
      // Org invites are deep linked. Non-existent accounts are redirected to the register page.
@@ -104,11 +106,11 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
        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;
    }

--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
@@ -15,7 +15,7 @@ import { ProfileResponse } from "@bitwarden/common/models/response/profile.respo
 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";

 type ChangeAvatarDialogData = {
  profile: ProfileResponse;
@@ -55,6 +55,7 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
    private platformUtilsService: PlatformUtilsService,
    private avatarService: AvatarService,
    private dialogRef: DialogRef,
+    private toastService: ToastService,
  ) {
    this.profile = data.profile;
  }
@@ -93,9 +94,17 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
    if (Utils.validateHexColor(this.currentSelection) || this.currentSelection == null) {
      await this.avatarService.setAvatarColor(this.currentSelection);
      this.dialogRef.close();
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("avatarUpdated"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("avatarUpdated"),
+      });
    } else {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
    }
  };

--- a/apps/web/src/app/auth/settings/account/change-email.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-email.component.ts
@@ -12,6 +12,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-change-email",
@@ -39,6 +40,7 @@ export class ChangeEmailComponent implements OnInit {
    private stateService: StateService,
    private formBuilder: FormBuilder,
    private kdfConfigService: KdfConfigService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -100,11 +102,11 @@ export class ChangeEmailComponent implements OnInit {
      try {
        await this.apiService.postEmail(request);
        this.reset();
-        this.platformUtilsService.showToast(
-          "success",
-          this.i18nService.t("emailChanged"),
-          this.i18nService.t("logBackIn"),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: this.i18nService.t("emailChanged"),
+          message: this.i18nService.t("logBackIn"),
+        });
        this.messagingService.send("logout");
      } catch (e) {
        this.logService.error(e);
--- a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
+++ b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-deauthorize-sessions",
@@ -23,6 +24,7 @@ export class DeauthorizeSessionsComponent {
    private userVerificationService: UserVerificationService,
    private messagingService: MessagingService,
    private logService: LogService,
+    private toastService: ToastService,
  ) {}

  async submit() {
@@ -31,11 +33,11 @@ export class DeauthorizeSessionsComponent {
        .buildRequest(this.masterPassword)
        .then((request) => this.apiService.postSecurityStamp(request));
      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("sessionsDeauthorized"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("sessionsDeauthorized"),
+        message: this.i18nService.t("logBackIn"),
+      });
      this.messagingService.send("logout");
    } catch (e) {
      this.logService.error(e);
--- a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
@@ -7,7 +7,7 @@ import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.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";

@Component({
  templateUrl: "delete-account-dialog.component.html",
@@ -24,6 +24,7 @@ export class DeleteAccountDialogComponent {
    private formBuilder: FormBuilder,
    private accountApiService: AccountApiService,
    private dialogRef: DialogRef,
+    private toastService: ToastService,
  ) {}

  submit = async () => {
@@ -31,11 +32,11 @@ export class DeleteAccountDialogComponent {
      const verification = this.deleteForm.get("verification").value;
      await this.accountApiService.deleteAccount(verification);
      this.dialogRef.close();
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("accountDeleted"),
-        this.i18nService.t("accountDeletedDesc"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("accountDeleted"),
+        message: this.i18nService.t("accountDeletedDesc"),
+      });
    } catch (e) {
      if (e instanceof ErrorResponse && e.statusCode === 400) {
        this.invalidSecret = true;
--- a/apps/web/src/app/auth/settings/account/profile.component.ts
+++ b/apps/web/src/app/auth/settings/account/profile.component.ts
@@ -8,7 +8,7 @@ import { ProfileResponse } from "@bitwarden/common/models/response/profile.respo
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { ChangeAvatarDialogComponent } from "./change-avatar-dialog.component";

@@ -33,6 +33,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
    private platformUtilsService: PlatformUtilsService,
    private stateService: StateService,
    private dialogService: DialogService,
+    private toastService: ToastService,
  ) {}

  async ngOnInit() {
@@ -64,6 +65,10 @@ export class ProfileComponent implements OnInit, OnDestroy {
  submit = async () => {
    const request = new UpdateProfileRequest(this.formGroup.get("name").value);
    await this.apiService.putProfile(request);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("accountUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("accountUpdated"),
+    });
  };
 }
--- a/apps/web/src/app/auth/settings/change-password.component.ts
+++ b/apps/web/src/app/auth/settings/change-password.component.ts
@@ -22,7 +22,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { UserKeyRotationService } from "../key-rotation/user-key-rotation.service";
@@ -60,6 +60,7 @@ export class ChangePasswordComponent
    kdfConfigService: KdfConfigService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
    accountService: AccountService,
+    toastService: ToastService,
  ) {
    super(
      i18nService,
@@ -73,6 +74,7 @@ export class ChangePasswordComponent
      kdfConfigService,
      masterPasswordService,
      accountService,
+      toastService,
    );
  }

@@ -141,11 +143,11 @@ export class ChangePasswordComponent
      this.masterPasswordHint != null &&
      this.masterPasswordHint.toLowerCase() === this.masterPassword.toLowerCase()
    ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("hintEqualsPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("hintEqualsPassword"),
+      });
      return;
    }

@@ -159,11 +161,11 @@ export class ChangePasswordComponent

  async setupSubmitActions() {
    if (this.currentMasterPassword == null || this.currentMasterPassword === "") {
-      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;
    }

@@ -194,11 +196,11 @@ export class ChangePasswordComponent

    const userKey = await this.masterPasswordService.decryptUserKeyWithMasterKey(masterKey);
    if (userKey == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("invalidMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("invalidMasterPassword"),
+      });
      return;
    }

@@ -225,14 +227,18 @@ export class ChangePasswordComponent

      await this.formPromise;

-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("masterPasswordChanged"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("masterPasswordChanged"),
+        message: this.i18nService.t("logBackIn"),
+      });
      this.messagingService.send("logout");
    } catch {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
    }
  }

--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
@@ -5,7 +5,7 @@ import { FormBuilder, Validators } from "@angular/forms";
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
@@ -51,6 +51,7 @@ export class EmergencyAccessAddEditComponent implements OnInit {
    private platformUtilsService: PlatformUtilsService,
    private logService: LogService,
    private dialogRef: DialogRef<EmergencyAccessAddEditDialogResult>,
+    private toastService: ToastService,
  ) {}
  async ngOnInit() {
    this.editMode = this.loading = this.params.emergencyAccessId != null;
@@ -104,11 +105,14 @@ export class EmergencyAccessAddEditComponent implements OnInit {
          this.addEditForm.value.waitTime,
        );
      }
-      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.dialogRef.close(EmergencyAccessAddEditDialogResult.Saved);
    } catch (e) {
      this.logService.error(e);
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
@@ -10,7 +10,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessStatusType } from "../../emergency-access/enums/emergency-access-status-type";
@@ -66,6 +66,7 @@ export class EmergencyAccessComponent implements OnInit {
    protected dialogService: DialogService,
    billingAccountProfileStateService: BillingAccountProfileStateService,
    protected organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+    private toastService: ToastService,
  ) {
    this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
  }
@@ -121,11 +122,11 @@ export class EmergencyAccessComponent implements OnInit {
    }
    this.actionPromise = this.emergencyAccessService.reinvite(contact.id);
    await this.actionPromise;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("hasBeenReinvited", contact.email),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("hasBeenReinvited", contact.email),
+    });
    this.actionPromise = null;
  }

@@ -153,11 +154,11 @@ export class EmergencyAccessComponent implements OnInit {
      if (result === EmergencyAccessConfirmDialogResult.Confirmed) {
        await this.emergencyAccessService.confirm(contact.id, contact.granteeId);
        updateUser();
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
+        });
      }
      return;
    }
@@ -166,11 +167,11 @@ export class EmergencyAccessComponent implements OnInit {
    await this.actionPromise;
    updateUser();

-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
+    });
    this.actionPromise = null;
  }

@@ -187,11 +188,11 @@ export class EmergencyAccessComponent implements OnInit {

    try {
      await this.emergencyAccessService.delete(details.id);
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("removedUserId", this.userNamePipe.transform(details)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("removedUserId", this.userNamePipe.transform(details)),
+      });

      if (details instanceof GranteeEmergencyAccess) {
        this.removeGrantee(details);
@@ -221,11 +222,11 @@ export class EmergencyAccessComponent implements OnInit {
    await this.emergencyAccessService.requestAccess(details.id);

    details.status = EmergencyAccessStatusType.RecoveryInitiated;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("requestSent", this.userNamePipe.transform(details)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("requestSent", this.userNamePipe.transform(details)),
+    });
  }

  async approve(details: GranteeEmergencyAccess) {
@@ -250,22 +251,22 @@ export class EmergencyAccessComponent implements OnInit {
    await this.emergencyAccessService.approve(details.id);
    details.status = EmergencyAccessStatusType.RecoveryApproved;

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

  async reject(details: GranteeEmergencyAccess) {
    await this.emergencyAccessService.reject(details.id);
    details.status = EmergencyAccessStatusType.Confirmed;

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

  takeover = async (details: GrantorEmergencyAccess) => {
@@ -278,11 +279,11 @@ export class EmergencyAccessComponent implements OnInit {
    });
    const result = await lastValueFrom(dialogRef.closed);
    if (result === EmergencyAccessTakeoverResultType.Done) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
+      });
    }
  };

--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts
@@ -15,7 +15,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { KdfType } from "@bitwarden/common/platform/enums";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { EmergencyAccessService } from "../../../emergency-access";
@@ -64,6 +64,7 @@ export class EmergencyAccessTakeoverComponent
    kdfConfigService: KdfConfigService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
    accountService: AccountService,
+    protected toastService: ToastService,
  ) {
    super(
      i18nService,
@@ -77,6 +78,7 @@ export class EmergencyAccessTakeoverComponent
      kdfConfigService,
      masterPasswordService,
      accountService,
+      toastService,
    );
  }

@@ -114,11 +116,11 @@ export class EmergencyAccessTakeoverComponent
      );
    } catch (e) {
      this.logService.error(e);
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("unexpectedError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("unexpectedError"),
+      });
    }
    this.dialogRef.close(EmergencyAccessTakeoverResultType.Done);
  };
--- a/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts
+++ b/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts
@@ -12,6 +12,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { KdfType } from "@bitwarden/common/platform/enums";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-change-kdf-confirmation",
@@ -35,6 +36,7 @@ export class ChangeKdfConfirmationComponent {
    private messagingService: MessagingService,
    @Inject(DIALOG_DATA) params: { kdf: KdfType; kdfConfig: KdfConfig },
    private accountService: AccountService,
+    private toastService: ToastService,
  ) {
    this.kdfConfig = params.kdfConfig;
    this.masterPassword = null;
@@ -46,11 +48,11 @@ export class ChangeKdfConfirmationComponent {
    }
    this.loading = true;
    await this.makeKeyAndSaveAsync();
-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("encKeySettingsChanged"),
-      this.i18nService.t("logBackIn"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("encKeySettingsChanged"),
+      message: this.i18nService.t("logBackIn"),
+    });
    this.messagingService.send("logout");
    this.loading = false;
  };
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.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 { TwoFactorBaseComponent } from "./two-factor-base.component";

@@ -68,6 +68,7 @@ export class TwoFactorAuthenticatorComponent
    private accountService: AccountService,
    dialogService: DialogService,
    private configService: ConfigService,
+    protected toastService: ToastService,
  ) {
    super(
      apiService,
@@ -76,6 +77,7 @@ export class TwoFactorAuthenticatorComponent
      logService,
      userVerificationService,
      dialogService,
+      toastService,
    );
    this.qrScript = window.document.createElement("script");
    this.qrScript.src = "scripts/qrious.min.js";
@@ -148,7 +150,11 @@ export class TwoFactorAuthenticatorComponent
    request.userVerificationToken = this.userVerificationToken;
    await this.apiService.deleteTwoFactorAuthenticator(request);
    this.enabled = false;
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepDisabled"),
+    });
    this.onUpdated.emit(false);
  }

--- a/apps/web/src/app/auth/settings/two-factor-base.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-base.component.ts
@@ -10,7 +10,7 @@ import { AuthResponseBase } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

@Directive()
 export abstract class TwoFactorBaseComponent {
@@ -33,6 +33,7 @@ export abstract class TwoFactorBaseComponent {
    protected logService: LogService,
    protected userVerificationService: UserVerificationService,
    protected dialogService: DialogService,
+    protected toastService: ToastService,
  ) {}

  protected auth(authResponse: AuthResponseBase) {
@@ -76,7 +77,11 @@ export abstract class TwoFactorBaseComponent {
      }
      await promise;
      this.enabled = false;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("twoStepDisabled"),
+      });
      this.onUpdated.emit(false);
    } catch (e) {
      this.logService.error(e);
@@ -102,7 +107,11 @@ export abstract class TwoFactorBaseComponent {
      await this.apiService.putTwoFactorDisable(request);
    }
    this.enabled = false;
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepDisabled"),
+    });
    this.onUpdated.emit(false);
  }

--- a/apps/web/src/app/auth/settings/two-factor-duo.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-duo.component.ts
@@ -11,7 +11,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { TwoFactorBaseComponent } from "./two-factor-base.component";

@@ -40,6 +40,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnI
    dialogService: DialogService,
    private formBuilder: FormBuilder,
    private dialogRef: DialogRef,
+    protected toastService: ToastService,
  ) {
    super(
      apiService,
@@ -48,6 +49,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnI
      logService,
      userVerificationService,
      dialogService,
+      toastService,
    );
  }

--- a/apps/web/src/app/auth/settings/two-factor-email.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-email.component.ts
@@ -14,7 +14,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { TwoFactorBaseComponent } from "./two-factor-base.component";

@@ -45,6 +45,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements O
    dialogService: DialogService,
    private formBuilder: FormBuilder,
    private dialogRef: DialogRef,
+    protected toastService: ToastService,
  ) {
    super(
      apiService,
@@ -53,6 +54,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements O
      logService,
      userVerificationService,
      dialogService,
+      toastService,
    );
  }
  get token() {
--- a/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
@@ -16,7 +16,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { TwoFactorBaseComponent } from "./two-factor-base.component";

@@ -61,6 +61,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
    logService: LogService,
    userVerificationService: UserVerificationService,
    dialogService: DialogService,
+    toastService: ToastService,
  ) {
    super(
      apiService,
@@ -69,6 +70,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
      logService,
      userVerificationService,
      dialogService,
+      toastService,
    );
    this.auth(data);
  }
--- a/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
@@ -55,7 +55,7 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements
    userVerificationService: UserVerificationService,
    dialogService: DialogService,
    private formBuilder: FormBuilder,
-    private toastService: ToastService,
+    protected toastService: ToastService,
  ) {
    super(
      apiService,
@@ -64,6 +64,7 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements
      logService,
      userVerificationService,
      dialogService,
+      toastService,
    );
  }

--- a/apps/web/src/app/auth/settings/verify-email.component.ts
+++ b/apps/web/src/app/auth/settings/verify-email.component.ts
@@ -6,7 +6,13 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { AsyncActionsModule, BannerModule, ButtonModule, LinkModule } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  BannerModule,
+  ButtonModule,
+  LinkModule,
+  ToastService,
+} from "@bitwarden/components";

@Component({
  standalone: true,
@@ -25,22 +31,27 @@ export class VerifyEmailComponent {
    private i18nService: I18nService,
    private platformUtilsService: PlatformUtilsService,
    private tokenService: TokenService,
+    private toastService: ToastService,
  ) {}

  async verifyEmail(): Promise<void> {
    await this.apiService.refreshIdentityToken();
    if (await this.tokenService.getEmailVerified()) {
      this.onVerified.emit(true);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("emailVerified"),
+      });
      return;
    }

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

  send = async () => {
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -9,7 +9,7 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { WebauthnLoginAdminService } from "../../../core";
 import { CredentialCreateOptionsView } from "../../../core/views/credential-create-options.view";
@@ -60,6 +60,7 @@ export class CreateCredentialDialogComponent implements OnInit {
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
    private logService: LogService,
+    private toastService: ToastService,
  ) {}

  ngOnInit(): void {
@@ -102,11 +103,11 @@ export class CreateCredentialDialogComponent implements OnInit {
        this.invalidSecret = true;
      } else {
        this.logService?.error(error);
-        this.platformUtilsService.showToast(
-          "error",
-          this.i18nService.t("unexpectedError"),
-          error.message,
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("unexpectedError"),
+          message: error.message,
+        });
      }
      return;
    }
@@ -162,17 +163,17 @@ export class CreateCredentialDialogComponent implements OnInit {
    );

    if (await firstValueFrom(this.hasPasskeys$)) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("passkeySaved", name),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passkeySaved", name),
+      });
    } else {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("loginWithPasskeyEnabled"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("loginWithPasskeyEnabled"),
+      });
    }

    this.dialogRef.close(CreateCredentialDialogResult.Success);
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts
@@ -8,7 +8,7 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 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 { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";

 import { WebauthnLoginAdminService } from "../../../core";
 import { WebauthnLoginCredentialView } from "../../../core/views/webauthn-login-credential.view";
@@ -38,6 +38,7 @@ export class DeleteCredentialDialogComponent implements OnInit, OnDestroy {
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
    private logService: LogService,
+    private toastService: ToastService,
  ) {}

  ngOnInit(): void {
@@ -55,17 +56,21 @@ export class DeleteCredentialDialogComponent implements OnInit, OnDestroy {
    this.dialogRef.disableClose = true;
    try {
      await this.webauthnService.deleteCredential(this.credential.id, this.formGroup.value.secret);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("passkeyRemoved"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passkeyRemoved"),
+      });
    } catch (error) {
      if (error instanceof ErrorResponse && error.statusCode === 400) {
        this.invalidSecret = true;
      } else {
        this.logService?.error(error);
-        this.platformUtilsService.showToast(
-          "error",
-          this.i18nService.t("unexpectedError"),
-          error.message,
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("unexpectedError"),
+          message: error.message,
+        });
      }
      return false;
    } finally {
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
@@ -9,7 +9,7 @@ import {
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 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";

 /**
 * @deprecated Jan 24, 2024: Use new libs/auth UserVerificationDialogComponent instead.
@@ -25,8 +25,17 @@ export class UserVerificationPromptComponent extends BaseUserVerificationPrompt
    formBuilder: FormBuilder,
    platformUtilsService: PlatformUtilsService,
    i18nService: I18nService,
+    toastService: ToastService,
  ) {
-    super(null, data, userVerificationService, formBuilder, platformUtilsService, i18nService);
+    super(
+      null,
+      data,
+      userVerificationService,
+      formBuilder,
+      platformUtilsService,
+      i18nService,
+      toastService,
+    );
  }

  override close(success: boolean) {
--- a/apps/web/src/app/auth/sso.component.ts
+++ b/apps/web/src/app/auth/sso.component.ts
@@ -25,6 +25,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

@Component({
@@ -60,6 +61,7 @@ export class SsoComponent extends BaseSsoComponent implements OnInit {
    configService: ConfigService,
    masterPasswordService: InternalMasterPasswordServiceAbstraction,
    accountService: AccountService,
+    toastService: ToastService,
  ) {
    super(
      ssoLoginService,
@@ -78,6 +80,7 @@ export class SsoComponent extends BaseSsoComponent implements OnInit {
      configService,
      masterPasswordService,
      accountService,
+      toastService,
    );
    this.redirectUri = window.location.origin + "/sso-connector.html";
    this.clientId = "web";
--- a/apps/web/src/app/auth/two-factor-auth.component.ts
+++ b/apps/web/src/app/auth/two-factor-auth.component.ts
@@ -17,7 +17,13 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 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 { LinkModule, TypographyModule, CheckboxModule, DialogService } from "@bitwarden/components";
+import {
+  LinkModule,
+  TypographyModule,
+  CheckboxModule,
+  DialogService,
+  ToastService,
+} from "@bitwarden/components";

 import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
 import { TwoFactorAuthEmailComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component";
@@ -81,6 +87,7 @@ export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
    accountService: AccountService,
    formBuilder: FormBuilder,
    @Inject(WINDOW) protected win: Window,
+    toastService: ToastService,
  ) {
    super(
      loginStrategyService,
@@ -100,6 +107,7 @@ export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
      accountService,
      formBuilder,
      win,
+      toastService,
    );
    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
  }
--- a/apps/web/src/app/auth/verify-email-token.component.ts
+++ b/apps/web/src/app/auth/verify-email-token.component.ts
@@ -8,6 +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 { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { ToastService } from "@bitwarden/components";

@Component({
  selector: "app-verify-email-token",
@@ -23,6 +24,7 @@ export class VerifyEmailTokenComponent implements OnInit {
    private apiService: ApiService,
    private logService: LogService,
    private stateService: StateService,
+    private toastService: ToastService,
  ) {}

  ngOnInit() {
@@ -36,7 +38,11 @@ export class VerifyEmailTokenComponent implements OnInit {
          if (await this.stateService.getIsAuthenticated()) {
            await this.apiService.refreshIdentityToken();
          }
-          this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+          this.toastService.showToast({
+            variant: "success",
+            title: null,
+            message: this.i18nService.t("emailVerified"),
+          });
          // 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(["/"]);
@@ -45,7 +51,11 @@ export class VerifyEmailTokenComponent implements OnInit {
          this.logService.error(e);
        }
      }
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("emailVerifiedFailed"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("emailVerifiedFailed"),
+      });
      // 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(["/"]);
--- a/apps/web/src/app/auth/verify-recover-delete.component.ts
+++ b/apps/web/src/app/auth/verify-recover-delete.component.ts
@@ -7,6 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { VerifyDeleteRecoverRequest } from "@bitwarden/common/models/request/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";

@Component({
  selector: "app-verify-recover-delete",
@@ -26,6 +27,7 @@ export class VerifyRecoverDeleteComponent implements OnInit {
    private platformUtilsService: PlatformUtilsService,
    private i18nService: I18nService,
    private route: ActivatedRoute,
+    private toastService: ToastService,
  ) {}

  ngOnInit() {
@@ -44,11 +46,11 @@ export class VerifyRecoverDeleteComponent implements OnInit {
  submit = async () => {
    const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
    await this.apiService.postAccountRecoverDeleteToken(request);
-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("accountDeleted"),
-      this.i18nService.t("accountDeletedDesc"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("accountDeleted"),
+      message: this.i18nService.t("accountDeletedDesc"),
+    });
    await this.router.navigate(["/"]);
  };
 }