add back events for browser refresh extension (#11085)

- something went sideways in a merge
2025-01-31 22:51:28 +01:00 · 2024-09-16 14:02:20 -05:00 · 2024-09-16 14:02:20 -05:00 · 26f3dcfc66
commit 26f3dcfc66
parent 51a2ec393c
22 changed files with 300 additions and 16 deletions
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.spec.ts
@ -3,6 +3,8 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject } from "rxjs";

+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@ -44,12 +46,14 @@ describe("AddEditV2Component", () => {
  const disable = jest.fn();
  const navigate = jest.fn();
  const back = jest.fn().mockResolvedValue(null);
+  const collect = jest.fn().mockResolvedValue(null);

  beforeEach(async () => {
    buildConfig.mockClear();
    disable.mockClear();
    navigate.mockClear();
    back.mockClear();
+    collect.mockClear();

    addEditCipherInfo$ = new BehaviorSubject(null);
    cipherServiceMock = mock<CipherService>();
@ -66,6 +70,7 @@ describe("AddEditV2Component", () => {
        { provide: ActivatedRoute, useValue: { queryParams: queryParams$ } },
        { provide: I18nService, useValue: { t: (key: string) => key } },
        { provide: CipherService, useValue: cipherServiceMock },
+        { provide: EventCollectionService, useValue: { collect } },
      ],
    })
      .overrideProvider(CipherFormConfigService, {
@ -122,6 +127,57 @@ describe("AddEditV2Component", () => {
    });
  });

+  describe("analytics", () => {
+    it("does not log viewed event when mode is add", fakeAsync(() => {
+      queryParams$.next({});
+
+      tick();
+
+      expect(collect).not.toHaveBeenCalled();
+    }));
+
+    it("does not log viewed event whe mode is clone", fakeAsync(() => {
+      queryParams$.next({ cipherId: "222-333-444-5555", clone: "true" });
+      buildConfigResponse.originalCipher = {} as Cipher;
+
+      tick();
+
+      expect(collect).not.toHaveBeenCalled();
+    }));
+
+    it("logs viewed event when mode is edit", fakeAsync(() => {
+      buildConfigResponse.originalCipher = {
+        edit: true,
+        id: "222-333-444-5555",
+        organizationId: "444-555-666",
+      } as Cipher;
+      queryParams$.next({ cipherId: "222-333-444-5555" });
+
+      tick();
+
+      expect(collect).toHaveBeenCalledWith(
+        EventType.Cipher_ClientViewed,
+        "222-333-444-5555",
+        false,
+        "444-555-666",
+      );
+    }));
+
+    it("logs viewed event whe mode is partial-edit", fakeAsync(() => {
+      buildConfigResponse.originalCipher = { edit: false } as Cipher;
+      queryParams$.next({ cipherId: "222-333-444-5555", orgId: "444-555-666" });
+
+      tick();
+
+      expect(collect).toHaveBeenCalledWith(
+        EventType.Cipher_ClientViewed,
+        "222-333-444-5555",
+        false,
+        "444-555-666",
+      );
+    }));
+  });
+
  describe("addEditCipherInfo initialization", () => {
    it("populates config.initialValues with `addEditCipherInfo` values", fakeAsync(() => {
      const addEditCipherInfo = {
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
@ -6,6 +6,8 @@ import { ActivatedRoute, Params, Router } from "@angular/router";
 import { firstValueFrom, map, switchMap } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId, CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@ -160,6 +162,7 @@ export class AddEditV2Component implements OnInit {
    private popupRouterCacheService: PopupRouterCacheService,
    private router: Router,
    private cipherService: CipherService,
+    private eventCollectionService: EventCollectionService,
  ) {
    this.subscribeToParams();
  }
@ -275,6 +278,15 @@ export class AddEditV2Component implements OnInit {
            await this.cipherService.setAddEditCipherInfo(null);
          }

+          if (["edit", "partial-edit"].includes(config.mode) && config.originalCipher?.id) {
+            await this.eventCollectionService.collect(
+              EventType.Cipher_ClientViewed,
+              config.originalCipher.id,
+              false,
+              config.originalCipher.organizationId,
+            );
+          }
+
          return config;
        }),
      )
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.spec.ts
@ -3,7 +3,9 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { mock } from "jest-mock-extended";
 import { Subject } from "rxjs";

+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { EventType } from "@bitwarden/common/enums";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@ -29,10 +31,12 @@ describe("ViewV2Component", () => {
  let fixture: ComponentFixture<ViewV2Component>;
  const params$ = new Subject();
  const mockNavigate = jest.fn();
+  const collect = jest.fn().mockResolvedValue(null);

  const mockCipher = {
    id: "122-333-444",
    type: CipherType.Login,
+    orgId: "222-444-555",
  };

  const mockVaultPopupAutofillService = {
@ -48,6 +52,7 @@ describe("ViewV2Component", () => {

  beforeEach(async () => {
    mockNavigate.mockClear();
+    collect.mockClear();

    await TestBed.configureTestingModule({
      imports: [ViewV2Component],
@ -59,6 +64,7 @@ describe("ViewV2Component", () => {
        { provide: ConfigService, useValue: mock<ConfigService>() },
        { provide: PopupRouterCacheService, useValue: mock<PopupRouterCacheService>() },
        { provide: ActivatedRoute, useValue: { queryParams: params$ } },
+        { provide: EventCollectionService, useValue: { collect } },
        {
          provide: I18nService,
          useValue: {
@ -122,5 +128,18 @@ describe("ViewV2Component", () => {

      expect(component.headerText).toEqual("viewItemHeader note");
    }));
+
+    it("sends viewed event", fakeAsync(() => {
+      params$.next({ cipherId: "122-333-444" });
+
+      flush(); // Resolve all promises
+
+      expect(collect).toHaveBeenCalledWith(
+        EventType.Cipher_ClientViewed,
+        mockCipher.id,
+        false,
+        undefined,
+      );
+    }));
  });
 });
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
@ -6,9 +6,11 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom, map, Observable, switchMap } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AUTOFILL_ID, SHOW_AUTOFILL_BUTTON } from "@bitwarden/common/autofill/constants";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@ -73,6 +75,7 @@ export class ViewV2Component {
    private toastService: ToastService,
    private vaultPopupAutofillService: VaultPopupAutofillService,
    private accountService: AccountService,
+    private eventCollectionService: EventCollectionService,
  ) {
    this.subscribeToParams();
  }
@ -90,6 +93,13 @@ export class ViewV2Component {
          if (this.loadAction === AUTOFILL_ID || this.loadAction === SHOW_AUTOFILL_BUTTON) {
            await this.vaultPopupAutofillService.doAutofill(this.cipher);
          }
+
+          await this.eventCollectionService.collect(
+            EventType.Cipher_ClientViewed,
+            cipher.id,
+            false,
+            cipher.organizationId,
+          );
        }),
        takeUntilDestroyed(),
      )
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.html
@ -19,6 +19,7 @@
        bitSuffix
        bitPasswordInputToggle
        data-testid="visibility-for-card-number"
+        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardNumberVisible)"
      ></button>
    </bit-form-field>

@ -60,6 +61,7 @@
        bitSuffix
        bitPasswordInputToggle
        data-testid="visibility-for-card-code"
+        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardCodeVisible)"
      ></button>
    </bit-form-field>
  </bit-card>
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts
@ -4,6 +4,7 @@ import { ReactiveFormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { mock, MockProxy } from "jest-mock-extended";

+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@ -27,6 +28,7 @@ describe("CardDetailsSectionComponent", () => {
    await TestBed.configureTestingModule({
      imports: [CardDetailsSectionComponent, CommonModule, ReactiveFormsModule],
      providers: [
+        { provide: EventCollectionService, useValue: mock<EventCollectionService>() },
        { provide: CipherFormContainer, useValue: cipherFormProvider },
        { provide: I18nService, useValue: { t: (key: string) => key } },
      ],
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts
@ -4,6 +4,8 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@ -91,10 +93,13 @@ export class CardDetailsSectionComponent implements OnInit {
    { name: "12 - " + this.i18nService.t("december"), value: "12" },
  ];

+  EventType = EventType;
+
  constructor(
    private cipherFormContainer: CipherFormContainer,
    private formBuilder: FormBuilder,
    private i18nService: I18nService,
+    private eventCollectionService: EventCollectionService,
  ) {
    this.cipherFormContainer.registerChildForm("cardDetails", this.cardDetailsForm);

@ -149,6 +154,21 @@ export class CardDetailsSectionComponent implements OnInit {
    return this.i18nService.t("cardDetails");
  }

+  async logCardEvent(hiddenFieldVisible: boolean, event: EventType) {
+    const { mode, originalCipher } = this.cipherFormContainer.config;
+
+    const isEdit = ["edit", "partial-edit"].includes(mode);
+
+    if (hiddenFieldVisible && isEdit) {
+      await this.eventCollectionService.collect(
+        event,
+        originalCipher.id,
+        false,
+        originalCipher.organizationId,
+      );
+    }
+  }
+
  /** Set form initial form values from the current cipher */
  private setInitialValues() {
    const { cardholderName, number, brand, expMonth, expYear, code } = this.originalCipherView.card;
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
@ -46,6 +46,7 @@
            bitPasswordInputToggle
            data-testid="visibility-for-custom-hidden-field"
            [disabled]="!canViewPasswords(i)"
+            (toggledChange)="logHiddenEvent($event)"
          ></button>
        </bit-form-field>

--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts
@ -4,7 +4,9 @@ import { CdkDragDrop } from "@angular/cdk/drag-drop";
 import { DebugElement } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
+import { mock } from "jest-mock-extended";

+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
  CardLinkedId,
@ -50,6 +52,7 @@ describe("CustomFieldsComponent", () => {
    await TestBed.configureTestingModule({
      imports: [CustomFieldsComponent],
      providers: [
+        { provide: EventCollectionService, useValue: mock<EventCollectionService>() },
        {
          provide: I18nService,
          useValue: { t: (...keys: string[]) => keys.filter(Boolean).join(" ") },
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
@ -19,6 +19,8 @@ import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from "@angul
 import { Subject, zip } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherType, FieldType, LinkedIdType } from "@bitwarden/common/vault/enums";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
@ -118,6 +120,7 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
    private formBuilder: FormBuilder,
    private i18nService: I18nService,
    private liveAnnouncer: LiveAnnouncer,
+    private eventCollectionService: EventCollectionService,
  ) {
    this.destroyed$ = inject(DestroyRef);
    this.cipherFormContainer.registerChildForm("customFields", this.customFieldsForm);
@ -301,6 +304,21 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
    }
  }

+  async logHiddenEvent(hiddenFieldVisible: boolean) {
+    const { mode, originalCipher } = this.cipherFormContainer.config;
+
+    const isEdit = ["edit", "partial-edit"].includes(mode);
+
+    if (hiddenFieldVisible && isEdit) {
+      await this.eventCollectionService.collect(
+        EventType.Cipher_ClientToggledHiddenFieldVisible,
+        originalCipher.id,
+        false,
+        originalCipher.organizationId,
+      );
+    }
+  }
+
  /**
   * Returns the linked field options for the current cipher type
   *
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.html
@ -57,6 +57,7 @@
        *ngIf="viewHiddenFields"
        data-testid="toggle-password-visibility"
        bitPasswordInputToggle
+        (toggledChange)="logVisibleEvent($event, EventType.Cipher_ClientToggledPasswordVisible)"
      ></button>
      <button
        type="button"
@ -113,6 +114,7 @@
        *ngIf="viewHiddenFields"
        data-testid="toggle-totp-visibility"
        bitPasswordInputToggle
+        (toggledChange)="logVisibleEvent($event, EventType.Cipher_ClientToggledTOTPSeedVisible)"
      ></button>
      <button
        type="button"
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.spec.ts
@ -1,14 +1,19 @@
 import { DatePipe } from "@angular/common";
 import { Component } from "@angular/core";
 import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { mock, MockProxy } from "jest-mock-extended";

 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { Fido2CredentialView } from "@bitwarden/common/vault/models/view/fido2-credential.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { ToastService } from "@bitwarden/components";
+import { BitPasswordInputToggleDirective } from "@bitwarden/components/src/form-field/password-input-toggle.directive";

 import { CipherFormGenerationService } from "../../abstractions/cipher-form-generation.service";
 import { TotpCaptureService } from "../../abstractions/totp-capture.service";
@ -34,6 +39,7 @@ describe("LoginDetailsSectionComponent", () => {
  let toastService: MockProxy<ToastService>;
  let totpCaptureService: MockProxy<TotpCaptureService>;
  let i18nService: MockProxy<I18nService>;
+  const collect = jest.fn().mockResolvedValue(null);

  beforeEach(async () => {
    cipherFormContainer = mock<CipherFormContainer>();
@ -43,6 +49,7 @@ describe("LoginDetailsSectionComponent", () => {
    toastService = mock<ToastService>();
    totpCaptureService = mock<TotpCaptureService>();
    i18nService = mock<I18nService>();
+    collect.mockClear();

    await TestBed.configureTestingModule({
      imports: [LoginDetailsSectionComponent],
@ -53,6 +60,7 @@ describe("LoginDetailsSectionComponent", () => {
        { provide: ToastService, useValue: toastService },
        { provide: TotpCaptureService, useValue: totpCaptureService },
        { provide: I18nService, useValue: i18nService },
+        { provide: EventCollectionService, useValue: { collect } },
      ],
    })
      .overrideComponent(LoginDetailsSectionComponent, {
@ -255,6 +263,32 @@ describe("LoginDetailsSectionComponent", () => {
      expect(getTogglePasswordVisibilityBtn()).toBeNull();
    });

+    it("logs password viewed event when toggledChange is true", async () => {
+      cipherFormContainer.config.mode = "edit";
+      cipherFormContainer.config.originalCipher = {
+        id: "111-222-333",
+        organizationId: "333-444-555",
+      } as Cipher;
+      jest.spyOn(component, "viewHiddenFields", "get").mockReturnValue(true);
+      fixture.detectChanges();
+
+      const passwordToggle = fixture.debugElement.query(
+        By.directive(BitPasswordInputToggleDirective),
+      );
+      await passwordToggle.triggerEventHandler("toggledChange", true);
+
+      expect(collect).toHaveBeenCalledWith(
+        EventType.Cipher_ClientToggledPasswordVisible,
+        "111-222-333",
+        false,
+        "333-444-555",
+      );
+
+      await passwordToggle.triggerEventHandler("toggledChange", false);
+
+      expect(collect).toHaveBeenCalledTimes(1);
+    });
+
    describe("password generation", () => {
      it("should show generate password button when editable", () => {
        expect(getGeneratePasswordBtn()).not.toBeNull();
--- a/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts
+++ b/libs/vault/src/cipher-form/components/login-details-section/login-details-section.component.ts
@ -6,6 +6,8 @@ import { map } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Fido2CredentialView } from "@bitwarden/common/vault/models/view/fido2-credential.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
@ -48,6 +50,7 @@ import { AutofillOptionsComponent } from "../autofill-options/autofill-options.c
  ],
 })
 export class LoginDetailsSectionComponent implements OnInit {
+  EventType = EventType;
  loginDetailsForm = this.formBuilder.group({
    username: [""],
    password: [""],
@ -106,6 +109,7 @@ export class LoginDetailsSectionComponent implements OnInit {
    private generationService: CipherFormGenerationService,
    private auditService: AuditService,
    private toastService: ToastService,
+    private eventCollectionService: EventCollectionService,
    @Optional() private totpCaptureService?: TotpCaptureService,
  ) {
    this.cipherFormContainer.registerChildForm("loginDetails", this.loginDetailsForm);
@ -163,6 +167,24 @@ export class LoginDetailsSectionComponent implements OnInit {
    });
  }

+  /** Logs the givin event when in edit mode */
+  logVisibleEvent = async (passwordVisible: boolean, event: EventType) => {
+    const { mode, originalCipher } = this.cipherFormContainer.config;
+
+    const isEdit = ["edit", "partial-edit"].includes(mode);
+
+    if (!passwordVisible || !isEdit || !originalCipher) {
+      return;
+    }
+
+    await this.eventCollectionService.collect(
+      event,
+      originalCipher.id,
+      false,
+      originalCipher.organizationId,
+    );
+  };
+
  captureTotp = async () => {
    if (!this.canCaptureTotp) {
      return;
--- 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
@ -30,6 +30,7 @@
        bitIconButton
        bitPasswordInputToggle
        data-testid="toggle-number"
+        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardNumberVisible)"
      ></button>
      <button
        bitIconButton="bwi-clone"
@ -69,6 +70,7 @@
        bitIconButton
        bitPasswordInputToggle
        data-testid="toggle-code"
+        (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardCodeVisible)"
      ></button>
      <button
        bitIconButton="bwi-clone"
@ -79,6 +81,7 @@
        [valueLabel]="'securityCode' | i18n"
        [appA11yTitle]="'copyValue' | i18n"
        data-testid="copy-code"
+        (click)="logCardEvent(true, EventType.Cipher_ClientCopiedCardCode)"
      ></button>
    </bit-form-field>
  </read-only-cipher-card>
--- 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
@ -2,8 +2,10 @@ import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { CardView } from "@bitwarden/common/vault/models/view/card.view";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
  CardComponent,
  SectionComponent,
@ -32,9 +34,17 @@ import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-
  ],
 })
 export class CardDetailsComponent {
-  @Input() card: CardView;
+  @Input() cipher: CipherView;
+  EventType = EventType;

-  constructor(private i18nService: I18nService) {}
+  constructor(
+    private i18nService: I18nService,
+    private eventCollectionService: EventCollectionService,
+  ) {}
+
+  get card() {
+    return this.cipher.card;
+  }

  get setSectionTitle() {
    if (this.card.brand && this.card.brand !== "Other") {
@ -42,4 +52,15 @@ export class CardDetailsComponent {
    }
    return this.i18nService.t("cardDetails");
  }
+
+  async logCardEvent(conditional: boolean, event: EventType) {
+    if (conditional) {
+      await this.eventCollectionService.collect(
+        event,
+        this.cipher.id,
+        false,
+        this.cipher.organizationId,
+      );
+    }
+  }
 }
--- a/libs/vault/src/cipher-view/cipher-view.component.html
+++ b/libs/vault/src/cipher-view/cipher-view.component.html
@ -29,7 +29,7 @@
  </app-autofill-options-view>

  <!-- CARD DETAILS -->
-  <app-card-details-view *ngIf="hasCard" [card]="cipher.card"></app-card-details-view>
+  <app-card-details-view *ngIf="hasCard" [cipher]="cipher"></app-card-details-view>

  <!-- IDENTITY SECTIONS -->
  <app-view-identity-sections *ngIf="cipher.identity" [cipher]="cipher">
@ -42,8 +42,7 @@

  <!-- CUSTOM FIELDS -->
  <ng-container *ngIf="cipher.fields">
-    <app-custom-fields-v2 [fields]="cipher.fields" [cipherType]="cipher.type">
-    </app-custom-fields-v2>
+    <app-custom-fields-v2 [cipher]="cipher"> </app-custom-fields-v2>
  </ng-container>

  <!-- ATTACHMENTS SECTION -->
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@ -5,7 +5,7 @@
  <bit-card>
    <div
      class="tw-border-secondary-300 [&_bit-form-field:last-of-type]:tw-mb-0"
-      *ngFor="let field of fields; let last = last"
+      *ngFor="let field of cipher.fields; let last = last"
      [ngClass]="{ 'tw-mb-4': !last }"
    >
      <bit-form-field *ngIf="field.type === fieldType.Text" [disableReadOnlyBorder]="last">
@ -24,7 +24,13 @@
      <bit-form-field *ngIf="field.type === fieldType.Hidden" [disableReadOnlyBorder]="last">
        <bit-label>{{ field.name }}</bit-label>
        <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
-        <button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button>
+        <button
+          bitSuffix
+          type="button"
+          bitIconButton
+          bitPasswordInputToggle
+          (toggledChange)="logHiddenEvent($event)"
+        ></button>
        <button
          bitIconButton="bwi-clone"
          bitSuffix
@ -33,6 +39,7 @@
          showToast
          [valueLabel]="field.name"
          [appA11yTitle]="'copyValue' | i18n"
+          (click)="logCopyEvent()"
        ></button>
      </bit-form-field>
      <bit-form-control *ngIf="field.type === fieldType.Boolean">
--- 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
@ -2,10 +2,12 @@ import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherType, FieldType, LinkedIdType } from "@bitwarden/common/vault/enums";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
-import { FieldView } from "@bitwarden/common/vault/models/view/field.view";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { IdentityView } from "@bitwarden/common/vault/models/view/identity.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import {
@ -37,12 +39,14 @@ import {
  ],
 })
 export class CustomFieldV2Component implements OnInit {
-  @Input() fields: FieldView[];
-  @Input() cipherType: CipherType;
+  @Input() cipher: CipherView;
  fieldType = FieldType;
  fieldOptions: any;

-  constructor(private i18nService: I18nService) {}
+  constructor(
+    private i18nService: I18nService,
+    private eventCollectionService: EventCollectionService,
+  ) {}

  ngOnInit(): void {
    this.fieldOptions = this.getLinkedFieldsOptionsForCipher();
@ -53,8 +57,28 @@ export class CustomFieldV2Component implements OnInit {
    return this.i18nService.t(linkedType.i18nKey);
  }

+  async logHiddenEvent(hiddenFieldVisible: boolean) {
+    if (hiddenFieldVisible) {
+      await this.eventCollectionService.collect(
+        EventType.Cipher_ClientToggledHiddenFieldVisible,
+        this.cipher.id,
+        false,
+        this.cipher.organizationId,
+      );
+    }
+  }
+
+  async logCopyEvent() {
+    await this.eventCollectionService.collect(
+      EventType.Cipher_ClientCopiedHiddenField,
+      this.cipher.id,
+      false,
+      this.cipher.organizationId,
+    );
+  }
+
  private getLinkedFieldsOptionsForCipher() {
-    switch (this.cipherType) {
+    switch (this.cipher.type) {
      case CipherType.Login:
        return LoginView.prototype.linkedFieldOptions;
      case CipherType.Card:
--- 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
@ -66,6 +66,7 @@
        showToast
        [appA11yTitle]="'copyValue' | i18n"
        data-testid="copy-password"
+        (click)="logCopyEvent()"
      ></button>
    </bit-form-field>
    <div
--- 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
@ -4,7 +4,9 @@ import { Router } from "@angular/router";
 import { Observable, shareReplay } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
+import { EventType } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
@ -61,6 +63,7 @@ export class LoginCredentialsViewComponent {
    private billingAccountProfileStateService: BillingAccountProfileStateService,
    private router: Router,
    private i18nService: I18nService,
+    private eventCollectionService: EventCollectionService,
  ) {}

  get fido2CredentialCreationDateValue(): string {
@ -76,8 +79,17 @@ export class LoginCredentialsViewComponent {
    await this.router.navigate(["/premium"]);
  }

-  pwToggleValue(evt: boolean) {
-    this.passwordRevealed = evt;
+  async pwToggleValue(passwordVisible: boolean) {
+    this.passwordRevealed = passwordVisible;
+
+    if (passwordVisible) {
+      await this.eventCollectionService.collect(
+        EventType.Cipher_ClientToggledPasswordVisible,
+        this.cipher.id,
+        false,
+        this.cipher.organizationId,
+      );
+    }
  }

  togglePasswordCount() {
@ -87,4 +99,13 @@ export class LoginCredentialsViewComponent {
  setTotpCopyCode(e: TotpCodeValues) {
    this.totpCodeCopyObj = e;
  }
+
+  async logCopyEvent() {
+    await this.eventCollectionService.collect(
+      EventType.Cipher_ClientCopiedPassword,
+      this.cipher.id,
+      false,
+      this.cipher.organizationId,
+    );
+  }
 }
--- a/libs/vault/src/services/copy-cipher-field.service.spec.ts
+++ b/libs/vault/src/services/copy-cipher-field.service.spec.ts
@ -158,6 +158,8 @@ describe("CopyCipherFieldService", () => {
      expect(eventCollectionService.collect).toHaveBeenCalledWith(
        EventType.Cipher_ClientCopiedPassword,
        cipher.id,
+        false,
+        cipher.organizationId,
      );
    });
  });
--- a/libs/vault/src/services/copy-cipher-field.service.ts
+++ b/libs/vault/src/services/copy-cipher-field.service.ts
@ -125,7 +125,12 @@ export class CopyCipherFieldService {
    });

    if (action.event !== undefined) {
-      await this.eventCollectionService.collect(action.event, cipher.id);
+      await this.eventCollectionService.collect(
+        action.event,
+        cipher.id,
+        false,
+        cipher.organizationId,
+      );
    }
  }