WIP - migrate exposed passwords report components

apps/web/src/app/tools/reports/pages/cipher-report.component.ts

@@ -9,6 +9,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { TableDataSource } from "@bitwarden/components";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { AddEditComponent } from "../../../vault/individual-vault/add-edit.component";
@@ -24,6 +25,7 @@ export class CipherReportComponent implements OnDestroy {
   hasLoaded = false;
   ciphers: CipherView[] = [];
   allCiphers: CipherView[] = [];
+  dataSource = new TableDataSource<CipherView>();
   organization: Organization;
   organizations: Organization[];
   organizations$: Observable<Organization[]>;
@@ -104,6 +106,7 @@ export class CipherReportComponent implements OnDestroy {
     } else {
       this.ciphers = this.ciphers.filter((c: any) => c.orgFilterStatus === status);
     }
+    this.dataSource.data = this.ciphers;
   }
 
   async load() {
@@ -193,6 +196,8 @@ export class CipherReportComponent implements OnDestroy {
       return ciph;
     });
 
+    this.dataSource.data = this.ciphers;
+
     if (this.filterStatus.length > 2) {
       this.showFilterToggle = true;
       this.vaultMsg = "vaults";

apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html

@@ -6,13 +6,13 @@
     {{ "checkExposedPasswords" | i18n }}
   </button>
   <div class="mt-4" *ngIf="hasLoaded">
-    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noExposedPasswords" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
+      <bit-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
         {{ "exposedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -26,36 +26,33 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <table class="table table-hover table-list table-ciphers">
+      <bit-table [dataSource]="dataSource">
-        <thead
+        <ng-container header *ngIf="!isAdminConsoleActive">
-          class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
-          *ngIf="!isAdminConsoleActive"
-        >
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </thead>
+        </ng-container>
-        <tbody>
+        <ng-template body let-rows$>
-          <tr *ngFor="let c of ciphers">
+          <tr bitRow *ngFor="let r of rows$ | async">
-            <td class="table-list-icon">
+            <td bitCell>
-              <app-vault-icon [cipher]="c"></app-vault-icon>
+              <app-vault-icon [cipher]="r"></app-vault-icon>
             </td>
-            <td class="reduced-lh wrap">
+            <td>
-              <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
+              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                 <a
                   href="#"
                   appStopClick
-                  (click)="selectCipher(c)"
+                  (click)="selectCipher(r)"
                   title="{{ 'editItem' | i18n }}"
-                  >{{ c.name }}</a
+                  >{{ r.name }}</a
                 >
               </ng-container>
               <ng-template #cantManage>
-                <span>{{ c.name }}</span>
+                <span>{{ r.name }}</span>
               </ng-template>
-              <ng-container *ngIf="!organization && c.organizationId">
+              <ng-container *ngIf="!organization && r.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -64,7 +61,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="c.hasAttachments">
+              <ng-container *ngIf="r.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -74,26 +71,26 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ c.subTitle }}</small>
+              <small>{{ r.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="c.organizationId"
+                [organizationId]="r.organizationId"
-                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
               <span bitBadge variant="warning">
-                {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }}
+                {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(r.id) | number) }}
               </span>
             </td>
           </tr>
-        </tbody>
+        </ng-template>
-      </table>
+      </bit-table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>

apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts

@@ -11,6 +11,8 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
+import { cipherData } from "./reports-ciphers.mock";
+
 
 @Component({
   selector: "app-exposed-passwords-report",
@@ -44,7 +46,9 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
   }
 
   async setCiphers() {
-    const allCiphers = await this.getAllCiphers();
+    const allCiphers = cipherData;
+    // const allCiphers = await this.getAllCiphers();
+    this.dataSource.data = allCiphers;
     const exposedPasswordCiphers: CipherView[] = [];
     const promises: Promise<void>[] = [];
     this.filterStatus = [0];

apps/web/src/app/tools/reports/reports-routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/auth/guards";
 
-import { hasPremiumGuard } from "../../core/guards/has-premium.guard";
+// import { hasPremiumGuard } from "../../core/guards/has-premium.guard";
 
 import { BreachReportComponent } from "./pages/breach-report.component";
 import { ExposedPasswordsReportComponent } from "./pages/exposed-passwords-report.component";
@@ -35,31 +35,31 @@ const routes: Routes = [
         path: "reused-passwords-report",
         component: ReusedPasswordsReportComponent,
         data: { titleId: "reusedPasswordsReport" },
-        canActivate: [hasPremiumGuard()],
+        // canActivate: [hasPremiumGuard()],
       },
       {
         path: "unsecured-websites-report",
         component: UnsecuredWebsitesReportComponent,
         data: { titleId: "unsecuredWebsitesReport" },
-        canActivate: [hasPremiumGuard()],
+        // canActivate: [hasPremiumGuard()],
       },
       {
         path: "weak-passwords-report",
         component: WeakPasswordsReportComponent,
         data: { titleId: "weakPasswordsReport" },
-        canActivate: [hasPremiumGuard()],
+        // canActivate: [hasPremiumGuard()],
       },
       {
         path: "exposed-passwords-report",
         component: ExposedPasswordsReportComponent,
         data: { titleId: "exposedPasswordsReport" },
-        canActivate: [hasPremiumGuard()],
+        // canActivate: [hasPremiumGuard()],
       },
       {
         path: "inactive-two-factor-report",
         component: InactiveTwoFactorReportComponent,
         data: { titleId: "inactive2faReport" },
-        canActivate: [hasPremiumGuard()],
+        // canActivate: [hasPremiumGuard()],
       },
     ],
   },