migrate breach and unsecured websites reports

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

@@ -24,12 +24,12 @@
   <div class="mt-4" *ngIf="!form.loading && checkedUsername">
     <p *ngIf="error">{{ "reportError" | i18n }}...</p>
     <ng-container *ngIf="!error">
-      <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
+      <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
         {{ "breachUsernameNotFound" | i18n: checkedUsername }}
-      </app-callout>
+      </bit-callout>
-      <app-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
+      <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
         {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
-      </app-callout>
+      </bit-callout>
       <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
         <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
           <div class="row">

apps/web/src/app/tools/reports/pages/unsecured-websites-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">
       {{ "noUnsecuredWebsites" | i18n }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="ciphers.length">
-      <app-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
+      <bit-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
         {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </app-callout>
+      </bit-callout>
 
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
@@ -32,27 +32,24 @@
           </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">
-              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+              <a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{
-                c.name
+                r.name
               }}</a>
-              <ng-container *ngIf="!organization && c.organizationId">
+              <ng-container *ngIf="!organization && r.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -61,7 +58,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
@@ -71,21 +68,21 @@
                 <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>
           </tr>
-        </tbody>
+        </ng-template>
-      </table>
+      </bit-table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>