[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

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

@@ -5,6 +5,7 @@ import { EnvironmentComponent as BaseEnvironmentComponent } from "@bitwarden/ang
 import { ModalService } from "@bitwarden/angular/services/modal.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";
 
 import { BrowserEnvironmentService } from "../../platform/services/browser-environment.service";
 
@@ -21,8 +22,9 @@ export class EnvironmentComponent extends BaseEnvironmentComponent implements On
     i18nService: I18nService,
     private router: Router,
     modalService: ModalService,
+    toastService: ToastService,
   ) {
-    super(platformUtilsService, environmentService, i18nService, modalService);
+    super(platformUtilsService, environmentService, i18nService, modalService, toastService);
     this.showCustom = true;
   }
 

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

@@ -7,6 +7,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",
@@ -21,8 +22,17 @@ export class HintComponent extends BaseHintComponent {
     logService: LogService,
     private route: ActivatedRoute,
     loginEmailService: LoginEmailServiceAbstraction,
+    toastService: ToastService,
   ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
 
     super.onSuccessfulSubmit = async () => {
       // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.

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

@@ -7,6 +7,7 @@ import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components
 import { LoginEmailServiceAbstraction, RegisterRouteService } from "@bitwarden/auth/common";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { AccountSwitcherService } from "./account-switching/services/account-switcher.service";
 
@@ -36,6 +37,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     private loginEmailService: LoginEmailServiceAbstraction,
     private accountSwitcherService: AccountSwitcherService,
     private registerRouteService: RegisterRouteService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -76,11 +78,11 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.formGroup.markAllAsTouched();
 
     if (this.formGroup.invalid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccured"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccured"),
+        message: this.i18nService.t("invalidEmail"),
+      });
       return;
     }
 

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

@@ -27,7 +27,7 @@ import { BiometricStateService } from "@bitwarden/common/platform/biometrics/bio
 import { BiometricsService } from "@bitwarden/common/platform/biometrics/biometric.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErrors";
 import { BrowserRouterService } from "../../platform/popup/services/browser-router.service";
@@ -72,6 +72,7 @@ export class LockComponent extends BaseLockComponent implements OnInit {
     accountService: AccountService,
     kdfConfigService: KdfConfigService,
     syncService: SyncService,
+    toastService: ToastService,
   ) {
     super(
       masterPasswordService,
@@ -100,6 +101,7 @@ export class LockComponent extends BaseLockComponent implements OnInit {
       authService,
       kdfConfigService,
       syncService,
+      toastService,
     );
     this.successRoute = "/tabs/current";
     this.isInitialLockScreen = (window as any).previousPopupUrl == null;

apps/browser/src/auth/popup/login-via-auth-request.component.ts

@@ -22,6 +22,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -50,6 +51,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
     loginStrategyService: LoginStrategyServiceAbstraction,
     accountService: AccountService,
     private location: Location,
+    toastService: ToastService,
   ) {
     super(
       router,
@@ -70,6 +72,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
       deviceTrustService,
       authRequestService,
       loginStrategyService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       await syncService.fullSync(true);

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

@@ -22,6 +22,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { flagEnabled } from "../../platform/flags";
@@ -53,6 +54,7 @@ export class LoginComponent extends BaseLoginComponent {
     ssoLoginService: SsoLoginServiceAbstraction,
     webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     registerRouteService: RegisterRouteService,
+    toastService: ToastService,
   ) {
     super(
       devicesApiService,
@@ -74,6 +76,7 @@ export class LoginComponent extends BaseLoginComponent {
       ssoLoginService,
       webAuthnLoginService,
       registerRouteService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       await syncService.fullSync(true);

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

@@ -13,7 +13,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";
 
 @Component({
@@ -39,6 +39,7 @@ export class RegisterComponent extends BaseRegisterComponent {
     logService: LogService,
     auditService: AuditService,
     dialogService: DialogService,
+    toastService: ToastService,
   ) {
     super(
       formValidationErrorService,
@@ -55,6 +56,7 @@ export class RegisterComponent extends BaseRegisterComponent {
       logService,
       auditService,
       dialogService,
+      toastService,
     );
   }
 }

apps/browser/src/auth/popup/settings/account-security.component.ts

@@ -39,7 +39,7 @@ import {
   VaultTimeoutOption,
   VaultTimeoutStringType,
 } from "@bitwarden/common/types/vault-timeout.type";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -95,6 +95,7 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef,
     private biometricStateService: BiometricStateService,
+    private toastService: ToastService,
     private biometricsService: BiometricsService,
   ) {
     this.accountSwitcherEnabled = enableAccountSwitching();
@@ -274,11 +275,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     // The minTimeoutError does not apply to browser because it supports Immediately
     // So only check for the policyError
     if (this.form.controls.vaultTimeout.hasError("policyError")) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("vaultTimeoutTooLarge"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("vaultTimeoutTooLarge"),
+      });
       return;
     }
 
@@ -315,11 +316,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     }
 
     if (this.form.controls.vaultTimeout.hasError("policyError")) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("vaultTimeoutTooLarge"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("vaultTimeoutTooLarge"),
+      });
       return;
     }
 
@@ -417,11 +418,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
 
           this.form.controls.biometric.setValue(result);
           if (!result) {
-            this.platformUtilsService.showToast(
-              "error",
-              this.i18nService.t("errorEnableBiometricTitle"),
-              this.i18nService.t("errorEnableBiometricDesc"),
-            );
+            this.toastService.showToast({
+              variant: "error",
+              title: this.i18nService.t("errorEnableBiometricTitle"),
+              message: this.i18nService.t("errorEnableBiometricDesc"),
+            });
           }
         } catch (e) {
           // prevent duplicate dialog

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

@@ -22,6 +22,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 { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
@@ -51,6 +52,7 @@ export class SsoComponent extends BaseSsoComponent {
     accountService: AccountService,
     private authService: AuthService,
     @Inject(WINDOW) private win: Window,
+    toastService: ToastService,
   ) {
     super(
       ssoLoginService,
@@ -69,6 +71,7 @@ export class SsoComponent extends BaseSsoComponent {
       configService,
       masterPasswordService,
       accountService,
+      toastService,
     );
 
     environmentService.environment$.pipe(takeUntilDestroyed()).subscribe((env) => {

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

@@ -32,6 +32,7 @@ import {
   LinkModule,
   TypographyModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 import {
@@ -95,6 +96,7 @@ export class TwoFactorAuthComponent
     @Inject(WINDOW) protected win: Window,
     private syncService: SyncService,
     private messagingService: MessagingService,
+    toastService: ToastService,
   ) {
     super(
       loginStrategyService,
@@ -114,6 +116,7 @@ export class TwoFactorAuthComponent
       accountService,
       formBuilder,
       win,
+      toastService,
     );
     super.onSuccessfulLoginTdeNavigate = async () => {
       this.win.close();

apps/desktop/src/auth/accessibility-cookie.component.ts

@@ -6,6 +6,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 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 { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-accessibility-cookie",
@@ -25,6 +26,7 @@ export class AccessibilityCookieComponent {
     protected environmentService: EnvironmentService,
     protected i18nService: I18nService,
     protected ngZone: NgZone,
+    private toastService: ToastService,
   ) {}
 
   registerhCaptcha() {
@@ -42,28 +44,28 @@ export class AccessibilityCookieComponent {
   }
 
   onCookieSavedSuccess() {
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("accessibilityCookieSaved"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("accessibilityCookieSaved"),
+    });
   }
 
   onCookieSavedFailure() {
-    this.platformUtilsService.showToast(
-      "error",
-      null,
-      this.i18nService.t("noAccessibilityCookieSaved"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: null,
+      message: this.i18nService.t("noAccessibilityCookieSaved"),
+    });
   }
 
   async submit() {
     if (Utils.getHostname(this.accessibilityForm.value.link) !== "accounts.hcaptcha.com") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidUrl"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidUrl"),
+      });
       return;
     }
     this.listenForCookie = true;

apps/desktop/src/auth/delete-account.component.ts

@@ -13,6 +13,7 @@ import {
   CalloutModule,
   DialogModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 import { UserVerificationComponent } from "../app/components/user-verification.component";
@@ -41,6 +42,7 @@ export class DeleteAccountComponent {
     private platformUtilsService: PlatformUtilsService,
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
+    private toastService: ToastService,
   ) {}
 
   static open(dialogService: DialogService): DialogRef<DeleteAccountComponent> {
@@ -54,10 +56,10 @@ export class DeleteAccountComponent {
   submit = async () => {
     const verification = this.deleteForm.get("verification").value;
     await this.accountApiService.deleteAccount(verification);
-    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"),
+    });
   };
 }

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

@@ -5,6 +5,7 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.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-environment",
@@ -16,7 +17,8 @@ export class EnvironmentComponent extends BaseEnvironmentComponent {
     environmentService: EnvironmentService,
     i18nService: I18nService,
     modalService: ModalService,
+    toastService: ToastService,
   ) {
-    super(platformUtilsService, environmentService, i18nService, modalService);
+    super(platformUtilsService, environmentService, i18nService, modalService, toastService);
   }
 }

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

@@ -7,6 +7,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",
@@ -20,7 +21,16 @@ export class HintComponent extends BaseHintComponent {
     apiService: ApiService,
     logService: LogService,
     loginEmailService: LoginEmailServiceAbstraction,
+    toastService: ToastService,
   ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
   }
 }

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

@@ -34,7 +34,7 @@ import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/sp
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { UserId } from "@bitwarden/common/types/guid";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricsService } from "src/platform/main/biometric";
 
@@ -62,6 +62,7 @@ describe("LockComponent", () => {
   let platformUtilsServiceMock: MockProxy<PlatformUtilsService>;
   let activatedRouteMock: MockProxy<ActivatedRoute>;
   let mockMasterPasswordService: FakeMasterPasswordService;
+  let mockToastService: MockProxy<ToastService>;
 
   const mockUserId = Utils.newGuid() as UserId;
   const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
@@ -72,6 +73,7 @@ describe("LockComponent", () => {
     messagingServiceMock = mock<MessagingService>();
     broadcasterServiceMock = mock<BroadcasterService>();
     platformUtilsServiceMock = mock<PlatformUtilsService>();
+    mockToastService = mock<ToastService>();
 
     activatedRouteMock = mock<ActivatedRoute>();
     activatedRouteMock.queryParams = mock<ActivatedRoute["queryParams"]>();
@@ -187,6 +189,10 @@ describe("LockComponent", () => {
           provide: SyncService,
           useValue: mock<SyncService>(),
         },
+        {
+          provide: ToastService,
+          useValue: mockToastService,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

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

@@ -28,7 +28,7 @@ import { BiometricStateService } from "@bitwarden/common/platform/biometrics/bio
 import { BiometricsService } from "@bitwarden/common/platform/biometrics/biometric.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 const BroadcasterSubscriptionId = "LockComponent";
 
@@ -72,6 +72,7 @@ export class LockComponent extends BaseLockComponent implements OnInit, OnDestro
     authService: AuthService,
     kdfConfigService: KdfConfigService,
     syncService: SyncService,
+    toastService: ToastService,
   ) {
     super(
       masterPasswordService,
@@ -100,6 +101,7 @@ export class LockComponent extends BaseLockComponent implements OnInit, OnDestro
       authService,
       kdfConfigService,
       syncService,
+      toastService,
     );
   }
 

apps/desktop/src/auth/login/login-approval.component.ts

@@ -18,6 +18,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 const RequestTimeOut = 60000 * 15; //15 Minutes
@@ -54,6 +55,7 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
     protected appIdService: AppIdService,
     protected cryptoService: CryptoService,
     private dialogRef: DialogRef,
+    private toastService: ToastService,
   ) {
     this.notificationId = params.notificationId;
   }
@@ -117,11 +119,11 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
   private async retrieveAuthRequestAndRespond(approve: boolean) {
     this.authRequestResponse = await this.apiService.getAuthRequest(this.notificationId);
     if (this.authRequestResponse.requestApproved || this.authRequestResponse.responseDate != null) {
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("thisRequestIsNoLongerValid"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("thisRequestIsNoLongerValid"),
+      });
     } else {
       const loginResponse = await this.authRequestService.approveOrDenyAuthRequest(
         approve,
@@ -133,21 +135,21 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
 
   showResultToast(loginResponse: AuthRequestResponse) {
     if (loginResponse.requestApproved) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t(
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t(
           "logInConfirmedForEmailOnDevice",
           this.email,
           loginResponse.requestDeviceType,
         ),
-      );
+      });
     } else {
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("youDeniedALogInAttemptFromAnotherDevice"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("youDeniedALogInAttemptFromAnotherDevice"),
+      });
     }
   }
 
@@ -186,11 +188,11 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
     } else {
       clearInterval(this.interval);
       this.dialogRef.close();
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("loginRequestHasAlreadyExpired"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("loginRequestHasAlreadyExpired"),
+      });
     }
   }
 }

apps/desktop/src/auth/login/login-via-auth-request.component.ts

@@ -23,6 +23,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { EnvironmentComponent } from "../environment.component";
@@ -58,6 +59,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
     loginStrategyService: LoginStrategyServiceAbstraction,
     accountService: AccountService,
     private location: Location,
+    toastService: ToastService,
   ) {
     super(
       router,
@@ -78,6 +80,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
       deviceTrustService,
       authRequestService,
       loginStrategyService,
+      toastService,
     );
 
     super.onSuccessfulLogin = () => {

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

@@ -25,6 +25,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { EnvironmentComponent } from "../environment.component";
@@ -74,6 +75,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
     ssoLoginService: SsoLoginServiceAbstraction,
     webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     registerRouteService: RegisterRouteService,
+    toastService: ToastService,
   ) {
     super(
       devicesApiService,
@@ -95,6 +97,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
       ssoLoginService,
       webAuthnLoginService,
       registerRouteService,
+      toastService,
     );
     super.onSuccessfulLogin = () => {
       return syncService.fullSync(true);
@@ -162,11 +165,11 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
   async continue() {
     await super.validateEmail();
     if (!this.formGroup.controls.email.valid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccured"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccured"),
+        message: this.i18nService.t("invalidEmail"),
+      });
       return;
     }
     this.focusInput();

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

@@ -14,7 +14,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";
 
 const BroadcasterSubscriptionId = "RegisterComponent";
@@ -41,6 +41,7 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
     logService: LogService,
     auditService: AuditService,
     dialogService: DialogService,
+    toastService: ToastService,
   ) {
     super(
       formValidationErrorService,
@@ -57,6 +58,7 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
       logService,
       auditService,
       dialogService,
+      toastService,
     );
   }
 

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

@@ -22,7 +22,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 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";
 
 const BroadcasterSubscriptionId = "SetPasswordComponent";
@@ -56,6 +56,7 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
     dialogService: DialogService,
     kdfConfigService: KdfConfigService,
     encryptService: EncryptService,
+    toastService: ToastService,
   ) {
     super(
       accountService,
@@ -79,6 +80,7 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
       dialogService,
       kdfConfigService,
       encryptService,
+      toastService,
     );
   }
 

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

@@ -18,6 +18,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 { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -43,6 +44,7 @@ export class SsoComponent extends BaseSsoComponent {
     configService: ConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    toastService: ToastService,
   ) {
     super(
       ssoLoginService,
@@ -61,6 +63,7 @@ export class SsoComponent extends BaseSsoComponent {
       configService,
       masterPasswordService,
       accountService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.

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 {

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");

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);

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(["/"]);
   };

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(["/"]);
   };
 }

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

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"),
+      });
     }
   };
 

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);

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);

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;

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"),
+    });
   };
 }

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"),
+      });
     }
   }
 

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);

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)),
+      });
     }
   };
 

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);
   };

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

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);
   }
 

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);
   }
 

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,
     );
   }
 

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() {

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);
   }

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,
     );
   }
 

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 () => {

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);

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 {

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) {

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";

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

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(["/"]);

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(["/"]);
   };
 }