From 2282a74abda260dd21916c3e330409c2a3e181e8 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Fri, 9 May 2025 18:09:26 -0700
Subject: [PATCH] [PM-21021] - fix toggled hidden field state for custom fields
 view (#14595)

* fix toggled hidden field state for custom fields view

* fix hidden field toggle for cards and login details
---
 .../card-details-view.component.html          |  2 ++
 .../card-details-view.component.ts            | 19 +++++++++++++++++--
 .../custom-fields-v2.component.ts             | 10 ++++++++--
 .../login-credentials-view.component.html     |  1 +
 .../login-credentials-view.component.ts       | 19 +++++++++++++++++--
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.html b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
index fff771b6465..ff61addd7db 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.html
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.html
@@ -33,6 +33,7 @@
         bitIconButton
         bitPasswordInputToggle
         data-testid="toggle-number"
+        [toggled]="revealCardNumber"
         (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardNumberVisible)"
       ></button>
       <button
@@ -76,6 +77,7 @@
         bitIconButton
         bitPasswordInputToggle
         data-testid="toggle-code"
+        [toggled]="revealCardCode"
         (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardCodeVisible)"
       ></button>
       <button
diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
index 1b040897d42..95117adaa78 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -35,10 +35,13 @@ import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-
     ReadOnlyCipherCardComponent,
   ],
 })
-export class CardDetailsComponent {
+export class CardDetailsComponent implements OnChanges {
   @Input() cipher: CipherView;
   EventType = EventType;
 
+  revealCardNumber: boolean = false;
+  revealCardCode: boolean = false;
+
   constructor(
     private i18nService: I18nService,
     private eventCollectionService: EventCollectionService,
@@ -48,6 +51,13 @@ export class CardDetailsComponent {
     return this.cipher.card;
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["cipher"]) {
+      this.revealCardNumber = false;
+      this.revealCardCode = false;
+    }
+  }
+
   get setSectionTitle() {
     if (this.card.brand && this.card.brand !== "Other") {
       return this.i18nService.t("cardBrandDetails", this.card.brand);
@@ -56,6 +66,11 @@ export class CardDetailsComponent {
   }
 
   async logCardEvent(conditional: boolean, event: EventType) {
+    if (event === EventType.Cipher_ClientToggledCardNumberVisible) {
+      this.revealCardNumber = conditional;
+    } else if (event === EventType.Cipher_ClientToggledCardCodeVisible) {
+      this.revealCardCode = conditional;
+    }
     if (conditional) {
       await this.eventCollectionService.collect(
         event,
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
index e18836df144..a8f4e1417b4 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -45,7 +45,7 @@ import { VaultAutosizeReadOnlyTextArea } from "../../directives/readonly-textare
     VaultAutosizeReadOnlyTextArea,
   ],
 })
-export class CustomFieldV2Component implements OnInit {
+export class CustomFieldV2Component implements OnInit, OnChanges {
   @Input() cipher: CipherView;
   fieldType = FieldType;
   fieldOptions: any;
@@ -67,6 +67,12 @@ export class CustomFieldV2Component implements OnInit {
     this.fieldOptions = this.getLinkedFieldsOptionsForCipher();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["cipher"]) {
+      this.revealedHiddenFields = [];
+    }
+  }
+
   getLinkedType(linkedId: LinkedIdType) {
     const linkedType = this.fieldOptions.get(linkedId);
     return this.i18nService.t(linkedType.i18nKey);
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index 2c1acf96a14..dc1168b7f01 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -73,6 +73,7 @@
         type="button"
         bitIconButton
         bitPasswordInputToggle
+        [toggled]="passwordRevealed"
         data-testid="toggle-password"
         (toggledChange)="pwToggleValue($event)"
       ></button>
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
index 27d81f32ee6..d99ac438f27 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
@@ -1,7 +1,15 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule, DatePipe } from "@angular/common";
-import { Component, EventEmitter, inject, Input, Output } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from "@angular/core";
 import { Observable, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -51,7 +59,7 @@ type TotpCodeValues = {
     LinkModule,
   ],
 })
-export class LoginCredentialsViewComponent {
+export class LoginCredentialsViewComponent implements OnChanges {
   @Input() cipher: CipherView;
   @Input() activeUserId: UserId;
   @Input() hadPendingChangePasswordTask: boolean;
@@ -85,6 +93,13 @@ export class LoginCredentialsViewComponent {
     return `${dateCreated} ${creationDate}`;
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["cipher"]) {
+      this.passwordRevealed = false;
+      this.showPasswordCount = false;
+    }
+  }
+
   async getPremium(organizationId?: string) {
     await this.premiumUpgradeService.promptForPremium(organizationId);
   }