migrate weak passwords report component

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

@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <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">
       {{ "noWeakPasswords" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
+      <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
         {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -31,36 +31,33 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <table class="table table-hover table-list table-ciphers">
-        <thead
-          class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-secondary-300 tw-font-bold tw-text-muted"
-          *ngIf="!isAdminConsoleActive"
-        >
+      <bit-table [dataSource]="dataSource">
+        <ng-container header *ngIf="!isAdminConsoleActive">
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let c of ciphers">
-            <td class="table-list-icon">
-              <app-vault-icon [cipher]="c"></app-vault-icon>
+        </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 class="reduced-lh wrap">
-              <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
@@ -69,7 +66,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
@@ -79,26 +76,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"
-                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="r.organizationId"
+                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
-              <span bitBadge [variant]="passwordStrengthMap.get(c.id)[1]">
-                {{ passwordStrengthMap.get(c.id)[0] | i18n }}
+              <span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]">
+                {{ passwordStrengthMap.get(r.id)[0] | i18n }}
               </span>
             </td>
           </tr>
-        </tbody>
-      </table>
+        </ng-template>
+      </bit-table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>