[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-29 06:33:40 +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/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 {