Fix stale data issue in new login popout (#17307)

* Fix stale data issue in new login popout

* Update the comments

* Address critical claude code bot suggestions

* Clean out all stale data from pop up

* Fix cached cipher issue

* Fix caching issue between tab and overlay flow

* Address claude comments

libs/vault/src/cipher-form/components/cipher-form.component.spec.ts

@@ -42,9 +42,18 @@ describe("CipherFormComponent", () => {
         { provide: CipherFormService, useValue: mockAddEditFormService },
         {
           provide: CipherFormCacheService,
-          useValue: { init: jest.fn(), getCachedCipherView: jest.fn() },
+          useValue: { init: jest.fn(), getCachedCipherView: jest.fn(), clearCache: jest.fn() },
+        },
+        {
+          provide: ViewCacheService,
+          useValue: {
+            signal: jest.fn(() => {
+              const signalFn = (): any => null;
+              signalFn.set = jest.fn();
+              return signalFn;
+            }),
+          },
         },
-        { provide: ViewCacheService, useValue: { signal: jest.fn(() => (): any => null) } },
         { provide: ConfigService, useValue: mock<ConfigService>() },
         { provide: AccountService, useValue: mockAccountService },
         { provide: CipherArchiveService, useValue: mockCipherArchiveService },

libs/vault/src/cipher-form/components/cipher-form.component.ts

@@ -304,13 +304,30 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
    * Updates `updatedCipherView` based on the value from the cache.
    */
   setInitialCipherFromCache() {
+    // If we are coming from the overlay/popup flow clear the cache to avoid old cached data
+    const hasOverlayData =
+      this.config.initialValues &&
+      (this.config.initialValues.username !== undefined ||
+        this.config.initialValues.password !== undefined);
+
+    if (hasOverlayData) {
+      this.cipherFormCacheService.clearCache();
+      return;
+    }
+
     const cachedCipher = this.cipherFormCacheService.getCachedCipherView();
     if (cachedCipher === null) {
       return;
     }
 
-    // Use the cached cipher when it matches the cipher being edited
-    if (this.updatedCipherView.id === cachedCipher.id) {
+    const isEditingExistingCipher =
+      this.updatedCipherView.id && this.updatedCipherView.id === cachedCipher.id;
+    const isCreatingNewCipher =
+      !this.updatedCipherView.id &&
+      !cachedCipher.id &&
+      this.updatedCipherView.type === cachedCipher.type;
+
+    if (isEditingExistingCipher || isCreatingNewCipher) {
       this.updatedCipherView = cachedCipher;
     }
   }
@@ -382,6 +399,9 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
       this.config,
     );
 
+    // Clear the cache after successful save
+    this.cipherFormCacheService.clearCache();
+
     this.toastService.showToast({
       variant: "success",
       title: null,

libs/vault/src/cipher-form/services/default-cipher-form-cache.service.ts

@@ -22,7 +22,6 @@ export class CipherFormCacheService {
     key: CIPHER_FORM_CACHE_KEY,
     initialValue: null,
     deserializer: CipherView.fromJSON,
-    clearOnTabChange: true,
   });
 
   constructor() {
@@ -45,4 +44,11 @@ export class CipherFormCacheService {
   getCachedCipherView(): CipherView | null {
     return this.cipherCache();
   }
+
+  /**
+   * Clear the cached CipherView.
+   */
+  clearCache(): void {
+    this.cipherCache.set(null);
+  }
 }