Refactor service to use ViewCacheService

libs/auth/src/angular/two-factor-auth/abstractions/two-factor-form-cache.service.abstraction.ts

@@ -1,9 +1,11 @@
+import { Observable } from "rxjs";
+
 import { TwoFactorProviderType } from "@bitwarden/common/auth/enums/two-factor-provider-type";
 
 /**
  * Interface for two-factor form data
  */
-interface TwoFactorFormData {
+export interface TwoFactorFormData {
   token?: string;
   remember?: boolean;
   selectedProviderType?: TwoFactorProviderType;
@@ -13,12 +15,17 @@ interface TwoFactorFormData {
 /**
  * Abstract service for two-factor form caching
  */
-export abstract class TwoFactorFormCacheServiceAbstraction {
+export abstract class TwoFactorFormCacheService {
   /**
    * Check if the form persistence feature is enabled
    */
   abstract isEnabled(): Promise<boolean>;
 
+  /**
+   * Observable that emits the current enabled state
+   */
+  abstract isEnabled$(): Observable<boolean>;
+
   /**
    * Save form data to persistent storage
    */
@@ -29,6 +36,11 @@ export abstract class TwoFactorFormCacheServiceAbstraction {
    */
   abstract getFormData(): Promise<TwoFactorFormData | null>;
 
+  /**
+   * Observable that emits the current form data
+   */
+  abstract formData$(): Observable<TwoFactorFormData | null>;
+
   /**
    * Clear form data from persistent storage
    */

libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-email/two-factor-auth-email.component.ts

@@ -22,7 +22,8 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
-import { TwoFactorFormCacheServiceAbstraction } from "../../abstractions/two-factor-form-cache.service.abstraction";
+import { TwoFactorFormCacheService } from "../../abstractions/two-factor-form-cache.service.abstraction";
+
 import { TwoFactorAuthEmailComponentService } from "./two-factor-auth-email-component.service";
 
 @Component({
@@ -41,7 +42,6 @@ import { TwoFactorAuthEmailComponentService } from "./two-factor-auth-email-comp
     AsyncActionsModule,
     FormsModule,
   ],
-  providers: [],
 })
 export class TwoFactorAuthEmailComponent implements OnInit {
   @Input({ required: true }) tokenFormControl: FormControl | undefined = undefined;
@@ -60,7 +60,7 @@ export class TwoFactorAuthEmailComponent implements OnInit {
     protected appIdService: AppIdService,
     private toastService: ToastService,
     private twoFactorAuthEmailComponentService: TwoFactorAuthEmailComponentService,
-    private twoFactorFormCacheService: TwoFactorFormCacheServiceAbstraction,
+    private twoFactorFormCacheService: TwoFactorFormCacheService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -81,12 +81,17 @@ export class TwoFactorAuthEmailComponent implements OnInit {
     this.twoFactorEmail = email2faProviderData.Email;
 
     // Check if email has already been sent according to the cache
-    let cachedData;
+    let emailAlreadySent = false;
     if (this.twoFactorFormCacheService) {
-      cachedData = await this.twoFactorFormCacheService.getFormData();
+      try {
+        const cachedData = await this.twoFactorFormCacheService.getFormData();
+        emailAlreadySent = cachedData?.emailSent === true;
+      } catch (e) {
+        this.logService.error(e);
+      }
     }
 
-    if (providers.size > 1 && !cachedData?.emailSent) {
+    if (providers.size > 1 && !emailAlreadySent) {
       await this.sendEmail(false);
     }
   }
@@ -129,11 +134,15 @@ export class TwoFactorAuthEmailComponent implements OnInit {
 
       // Update cache to indicate email was sent
       if (this.twoFactorFormCacheService) {
-        const cachedData = (await this.twoFactorFormCacheService.getFormData()) || {};
-        await this.twoFactorFormCacheService.saveFormData({
-          ...cachedData,
-          emailSent: true,
-        });
+        try {
+          const cachedData = (await this.twoFactorFormCacheService.getFormData()) || {};
+          await this.twoFactorFormCacheService.saveFormData({
+            ...cachedData,
+            emailSent: true,
+          });
+        } catch (e) {
+          this.logService.error(e);
+        }
       }
 
       if (doToast) {

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts

@@ -54,8 +54,8 @@ import {
   TwoFactorAuthSecurityKeyIcon,
   TwoFactorAuthDuoIcon,
 } from "../icons/two-factor-auth";
-import { TwoFactorFormCacheServiceAbstraction } from "./abstractions/two-factor-form-cache.service.abstraction";
 
+import { TwoFactorFormCacheService } from "./abstractions";
 import { TwoFactorAuthAuthenticatorComponent } from "./child-components/two-factor-auth-authenticator.component";
 import { TwoFactorAuthDuoComponent } from "./child-components/two-factor-auth-duo/two-factor-auth-duo.component";
 import { TwoFactorAuthEmailComponent } from "./child-components/two-factor-auth-email/two-factor-auth-email.component";
@@ -171,7 +171,7 @@ export class TwoFactorAuthComponent implements OnInit, OnDestroy {
     private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
     private environmentService: EnvironmentService,
     private loginSuccessHandlerService: LoginSuccessHandlerService,
-    private twoFactorFormCacheService: TwoFactorFormCacheServiceAbstraction,
+    private twoFactorFormCacheService: TwoFactorFormCacheService,
   ) {}
 
   async ngOnInit() {