[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

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

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,

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

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>

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