[PM-13453] - Health report raw data with member count component (#11573)

* add raw data + members table

* remove commented code

apps/web/src/app/tools/access-intelligence/access-intelligence.component.html

@@ -3,6 +3,9 @@
   <bit-tab label="Raw Data">
     <tools-password-health></tools-password-health>
   </bit-tab>
+  <bit-tab label="Raw Data + members">
+    <tools-password-health-members></tools-password-health-members>
+  </bit-tab>
   <!-- <bit-tab label="{{ 'allApplicationsWithCount' | i18n: apps.length }}">
     <h2 bitTypography="h2">{{ "allApplications" | i18n }}</h2>
     <tools-application-table></tools-application-table>

apps/web/src/app/tools/access-intelligence/access-intelligence.component.ts

@@ -11,6 +11,7 @@ import { HeaderModule } from "../../layouts/header/header.module";
 
 import { ApplicationTableComponent } from "./application-table.component";
 import { NotifiedMembersTableComponent } from "./notified-members-table.component";
+import { PasswordHealthMembersComponent } from "./password-health-members.component";
 import { PasswordHealthComponent } from "./password-health.component";
 
 export enum AccessIntelligenceTabType {
@@ -28,6 +29,7 @@ export enum AccessIntelligenceTabType {
     JslibModule,
     HeaderModule,
     PasswordHealthComponent,
+    PasswordHealthMembersComponent,
     NotifiedMembersTableComponent,
     TabsModule,
   ],

apps/web/src/app/tools/access-intelligence/password-health-members.component.html

@@ -0,0 +1,61 @@
+<bit-container>
+  <p>{{ "passwordsReportDesc" | i18n }}</p>
+  <div *ngIf="loading">
+    <i
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  </div>
+  <div class="tw-mt-4" *ngIf="!loading">
+    <bit-table [dataSource]="dataSource">
+      <ng-container header>
+        <tr bitRow>
+          <th bitCell></th>
+          <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "weakness" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "timesReused" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "timesExposed" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "totalMembers" | i18n }}</th>
+        </tr>
+      </ng-container>
+      <ng-template body let-rows$>
+        <tr bitRow *ngFor="let r of rows$ | async">
+          <td bitCell>
+            <app-vault-icon [cipher]="r"></app-vault-icon>
+          </td>
+          <td bitCell>
+            <ng-container>
+              <span>{{ r.name }}</span>
+            </ng-container>
+            <br />
+            <small>{{ r.subTitle }}</small>
+          </td>
+          <td bitCell class="tw-text-right">
+            <span
+              bitBadge
+              *ngIf="passwordStrengthMap.has(r.id)"
+              [variant]="passwordStrengthMap.get(r.id)[1]"
+            >
+              {{ passwordStrengthMap.get(r.id)[0] | i18n }}
+            </span>
+          </td>
+          <td bitCell class="tw-text-right">
+            <span bitBadge *ngIf="passwordUseMap.has(r.login.password)" variant="warning">
+              {{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }}
+            </span>
+          </td>
+          <td bitCell class="tw-text-right">
+            <span bitBadge *ngIf="exposedPasswordMap.has(r.id)" variant="warning">
+              {{ "exposedXTimes" | i18n: exposedPasswordMap.get(r.id) }}
+            </span>
+          </td>
+          <td bitCell class="tw-text-right" data-testid="total-membership">
+            {{ totalMembersMap.get(r.id) || 0 }}
+          </td>
+        </tr>
+      </ng-template>
+    </bit-table>
+  </div>
+</bit-container>

apps/web/src/app/tools/access-intelligence/password-health-members.component.ts

@@ -0,0 +1,233 @@
+import { CommonModule } from "@angular/common";
+import { Component, DestroyRef, inject, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ActivatedRoute } from "@angular/router";
+import { from, map, switchMap, tap } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AuditService } from "@bitwarden/common/abstractions/audit.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import {
+  BadgeModule,
+  BadgeVariant,
+  ContainerComponent,
+  TableDataSource,
+  TableModule,
+} from "@bitwarden/components";
+
+// eslint-disable-next-line no-restricted-imports
+import { HeaderModule } from "../../layouts/header/header.module";
+// eslint-disable-next-line no-restricted-imports
+import { OrganizationBadgeModule } from "../../vault/individual-vault/organization-badge/organization-badge.module";
+// eslint-disable-next-line no-restricted-imports
+import { PipesModule } from "../../vault/individual-vault/pipes/pipes.module";
+// eslint-disable-next-line no-restricted-imports
+import { cipherData } from "../reports/pages/reports-ciphers.mock";
+
+import { userData } from "./password-health.mock";
+
+@Component({
+  standalone: true,
+  selector: "tools-password-health-members",
+  templateUrl: "password-health-members.component.html",
+  imports: [
+    BadgeModule,
+    OrganizationBadgeModule,
+    CommonModule,
+    ContainerComponent,
+    PipesModule,
+    JslibModule,
+    HeaderModule,
+    TableModule,
+  ],
+})
+export class PasswordHealthMembersComponent implements OnInit {
+  passwordStrengthMap = new Map<string, [string, BadgeVariant]>();
+
+  weakPasswordCiphers: CipherView[] = [];
+
+  passwordUseMap = new Map<string, number>();
+
+  exposedPasswordMap = new Map<string, number>();
+
+  dataSource = new TableDataSource<CipherView>();
+
+  totalMembersMap = new Map<string, number>();
+
+  reportCiphers: CipherView[] = [];
+  reportCipherIds: string[] = [];
+
+  organization: Organization;
+
+  loading = true;
+
+  private destroyRef = inject(DestroyRef);
+
+  constructor(
+    protected cipherService: CipherService,
+    protected passwordStrengthService: PasswordStrengthServiceAbstraction,
+    protected organizationService: OrganizationService,
+    protected auditService: AuditService,
+    protected i18nService: I18nService,
+    protected activatedRoute: ActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.activatedRoute.paramMap
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        map((params) => params.get("organizationId")),
+        switchMap((organizationId) => {
+          return from(this.organizationService.get(organizationId));
+        }),
+        tap((organization) => {
+          this.organization = organization;
+        }),
+        switchMap(() => from(this.setCiphers())),
+      )
+      .subscribe();
+
+    // mock data - will be replaced with actual data
+    userData.forEach((user) => {
+      user.cipherIds.forEach((cipherId: string) => {
+        if (this.totalMembersMap.has(cipherId)) {
+          this.totalMembersMap.set(cipherId, (this.totalMembersMap.get(cipherId) || 0) + 1);
+        } else {
+          this.totalMembersMap.set(cipherId, 1);
+        }
+      });
+    });
+  }
+
+  async setCiphers() {
+    // const allCiphers = await this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    const allCiphers = cipherData;
+    allCiphers.forEach(async (cipher) => {
+      this.findWeakPassword(cipher);
+      this.findReusedPassword(cipher);
+      await this.findExposedPassword(cipher);
+    });
+    this.dataSource.data = this.reportCiphers;
+    this.loading = false;
+  }
+
+  protected checkForExistingCipher(ciph: CipherView) {
+    if (!this.reportCipherIds.includes(ciph.id)) {
+      this.reportCipherIds.push(ciph.id);
+      this.reportCiphers.push(ciph);
+    }
+  }
+
+  protected async findExposedPassword(cipher: CipherView) {
+    const { type, login, isDeleted, edit, viewPassword, id } = cipher;
+    if (
+      type !== CipherType.Login ||
+      login.password == null ||
+      login.password === "" ||
+      isDeleted ||
+      (!this.organization && !edit) ||
+      !viewPassword
+    ) {
+      return;
+    }
+
+    const exposedCount = await this.auditService.passwordLeaked(login.password);
+    if (exposedCount > 0) {
+      this.exposedPasswordMap.set(id, exposedCount);
+      this.checkForExistingCipher(cipher);
+    }
+  }
+
+  protected findReusedPassword(cipher: CipherView) {
+    const { type, login, isDeleted, edit, viewPassword } = cipher;
+    if (
+      type !== CipherType.Login ||
+      login.password == null ||
+      login.password === "" ||
+      isDeleted ||
+      (!this.organization && !edit) ||
+      !viewPassword
+    ) {
+      return;
+    }
+
+    if (this.passwordUseMap.has(login.password)) {
+      this.passwordUseMap.set(login.password, this.passwordUseMap.get(login.password) || 0 + 1);
+    } else {
+      this.passwordUseMap.set(login.password, 1);
+    }
+
+    this.checkForExistingCipher(cipher);
+  }
+
+  protected findWeakPassword(cipher: CipherView): void {
+    const { type, login, isDeleted, edit, viewPassword } = cipher;
+    if (
+      type !== CipherType.Login ||
+      login.password == null ||
+      login.password === "" ||
+      isDeleted ||
+      (!this.organization && !edit) ||
+      !viewPassword
+    ) {
+      return;
+    }
+
+    const hasUserName = this.isUserNameNotEmpty(cipher);
+    let userInput: string[] = [];
+    if (hasUserName) {
+      const atPosition = login.username.indexOf("@");
+      if (atPosition > -1) {
+        userInput = userInput
+          .concat(
+            login.username
+              .substring(0, atPosition)
+              .trim()
+              .toLowerCase()
+              .split(/[^A-Za-z0-9]/),
+          )
+          .filter((i) => i.length >= 3);
+      } else {
+        userInput = login.username
+          .trim()
+          .toLowerCase()
+          .split(/[^A-Za-z0-9]/)
+          .filter((i) => i.length >= 3);
+      }
+    }
+    const { score } = this.passwordStrengthService.getPasswordStrength(
+      login.password,
+      null,
+      userInput.length > 0 ? userInput : null,
+    );
+
+    if (score != null && score <= 2) {
+      this.passwordStrengthMap.set(cipher.id, this.scoreKey(score));
+      this.checkForExistingCipher(cipher);
+    }
+  }
+
+  private isUserNameNotEmpty(c: CipherView): boolean {
+    return !Utils.isNullOrWhitespace(c.login.username);
+  }
+
+  private scoreKey(score: number): [string, BadgeVariant] {
+    switch (score) {
+      case 4:
+        return ["strong", "success"];
+      case 3:
+        return ["good", "primary"];
+      case 2:
+        return ["weak", "warning"];
+      default:
+        return ["veryWeak", "danger"];
+    }
+  }
+}

apps/web/src/app/tools/access-intelligence/password-health.mock.ts

@@ -0,0 +1,66 @@
+export const userData: any[] = [
+  {
+    userName: "David Brent",
+    email: "david.brent@wernhamhogg.uk",
+    usesKeyConnector: true,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228ab1",
+      "cbea34a8-bde4-46ad-9d19-b05001228ab2",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+      "cbea34a8-bde4-46ad-9d19-b05001227nm5",
+    ],
+  },
+  {
+    userName: "Tim Canterbury",
+    email: "tim.canterbury@wernhamhogg.uk",
+    usesKeyConnector: false,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228ab2",
+      "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+      "cbea34a8-bde4-46ad-9d19-b05001227nm5",
+    ],
+  },
+  {
+    userName: "Gareth Keenan",
+    email: "gareth.keenan@wernhamhogg.uk",
+    usesKeyConnector: true,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+      "cbea34a8-bde4-46ad-9d19-b05001227nm5",
+      "cbea34a8-bde4-46ad-9d19-b05001227nm7",
+    ],
+  },
+  {
+    userName: "Dawn Tinsley",
+    email: "dawn.tinsley@wernhamhogg.uk",
+    usesKeyConnector: true,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228ab2",
+      "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+    ],
+  },
+  {
+    userName: "Keith Bishop",
+    email: "keith.bishop@wernhamhogg.uk",
+    usesKeyConnector: false,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228ab1",
+      "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+      "cbea34a8-bde4-46ad-9d19-b05001227nm5",
+    ],
+  },
+  {
+    userName: "Chris Finch",
+    email: "chris.finch@wernhamhogg.uk",
+    usesKeyConnector: true,
+    cipherIds: [
+      "cbea34a8-bde4-46ad-9d19-b05001228ab2",
+      "cbea34a8-bde4-46ad-9d19-b05001228cd3",
+      "cbea34a8-bde4-46ad-9d19-b05001228xy4",
+    ],
+  },
+];