From e53218211da3bc0b8ef3e314c50b804e82d4685d Mon Sep 17 00:00:00 2001
From: jaasen-livefront <jaasen@livefront.com>
Date: Tue, 9 Jul 2024 09:40:15 -0700
Subject: [PATCH] revert changes to reports

---
 .../pages/breach-report.component.html        |   8 +-
 .../inactive-two-factor-report.component.html | 127 +++++++++---------
 .../reused-passwords-report.component.html    |  51 +++----
 .../unsecured-websites-report.component.html  |  43 +++---
 .../weak-passwords-report.component.html      |  51 +++----
 5 files changed, 143 insertions(+), 137 deletions(-)

diff --git a/apps/web/src/app/tools/reports/pages/breach-report.component.html b/apps/web/src/app/tools/reports/pages/breach-report.component.html
index ca5c60fc846..51191ddf2d0 100644
--- a/apps/web/src/app/tools/reports/pages/breach-report.component.html
+++ b/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">
-      <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
+      <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
         {{ "breachUsernameNotFound" | i18n: checkedUsername }}
-      </bit-callout>
-      <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
+      </app-callout>
+      <app-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
         {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
-      </bit-callout>
+      </app-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">
diff --git a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
index a47d6fc60b9..ae03a3bcb80 100644
--- a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noInactive2fa" | i18n }}
-    </bit-callout>
+    </app-callout>
     <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
+      <app-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
         {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
+      </app-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -31,74 +31,71 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
+      <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"
+        >
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | i18n }}</th>
           </tr>
-        </ng-container>
+        </thead>
         <tbody>
-          <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">
-                <a
-                  href="#"
-                  appStopClick
-                  (click)="selectCipher(r)"
-                  title="{{ 'editItem' | i18n }}"
-                  >{{ r.name }}</a
-                >
-                <ng-container *ngIf="!organization && r.organizationId">
-                  <i
-                    class="bwi bwi-collection"
-                    appStopProp
-                    title="{{ 'shared' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="sr-only">{{ "shared" | i18n }}</span>
-                </ng-container>
-                <ng-container *ngIf="r.hasAttachments">
-                  <i
-                    class="bwi bwi-paperclip"
-                    appStopProp
-                    title="{{ 'attachments' | i18n }}"
-                    aria-hidden="true"
-                  ></i>
-                  <span class="sr-only">{{ "attachments" | i18n }}</span>
-                </ng-container>
-                <br />
-                <small>{{ r.subTitle }}</small>
-              </td>
-              <td>
-                <app-org-badge
-                  *ngIf="!organization"
-                  [disabled]="disabled"
-                  [organizationId]="r.organizationId"
-                  [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
+          <tr *ngFor="let c of ciphers">
+            <td class="table-list-icon">
+              <app-vault-icon [cipher]="c"></app-vault-icon>
+            </td>
+            <td class="reduced-lh wrap">
+              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+                c.name
+              }}</a>
+              <ng-container *ngIf="!organization && c.organizationId">
+                <i
+                  class="bwi bwi-collection"
                   appStopProp
-                >
-                </app-org-badge>
-              </td>
-              <td class="text-right">
-                <a
-                  bitBadge
-                  href="{{ cipherDocs.get(r.id) }}"
-                  target="_blank"
-                  rel="noreferrer"
-                  *ngIf="cipherDocs.has(r.id)"
-                >
-                  {{ "instructions" | i18n }}</a
-                >
-              </td>
-            </tr>
-          </ng-template>
-        </tbody></bit-table
-      >
+                  title="{{ 'shared' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "shared" | i18n }}</span>
+              </ng-container>
+              <ng-container *ngIf="c.hasAttachments">
+                <i
+                  class="bwi bwi-paperclip"
+                  appStopProp
+                  title="{{ 'attachments' | i18n }}"
+                  aria-hidden="true"
+                ></i>
+                <span class="sr-only">{{ "attachments" | i18n }}</span>
+              </ng-container>
+              <br />
+              <small>{{ c.subTitle }}</small>
+            </td>
+            <td>
+              <app-org-badge
+                *ngIf="!organization"
+                [disabled]="disabled"
+                [organizationId]="c.organizationId"
+                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
+                appStopProp
+              >
+              </app-org-badge>
+            </td>
+            <td class="text-right">
+              <a
+                bitBadge
+                href="{{ cipherDocs.get(c.id) }}"
+                target="_blank"
+                rel="noreferrer"
+                *ngIf="cipherDocs.has(c.id)"
+              >
+                {{ "instructions" | i18n }}</a
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
index 8887702b3d8..549773ba8ce 100644
--- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
@@ -11,13 +11,13 @@
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </div>
   <div class="mt-4" *ngIf="hasLoaded">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noReusedPasswords" | i18n }}
-    </bit-callout>
+    </app-callout>
     <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
+      <app-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
         {{ "reusedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
+      </app-callout>
 
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
@@ -33,33 +33,36 @@
         </ng-container>
       </bit-toggle-group>
 
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
+      <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"
+        >
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | 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>
+        </thead>
+        <tbody>
+          <tr *ngFor="let c of ciphers">
+            <td class="table-list-icon">
+              <app-vault-icon [cipher]="c"></app-vault-icon>
             </td>
-            <td>
-              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
+            <td class="reduced-lh wrap">
+              <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
                 <a
                   href="#"
                   appStopClick
-                  (click)="selectCipher(r)"
+                  (click)="selectCipher(c)"
                   title="{{ 'editItem' | i18n }}"
-                  >{{ r.name }}</a
+                  >{{ c.name }}</a
                 >
               </ng-container>
               <ng-template #cantManage>
-                <span>{{ r.name }}</span>
+                <span>{{ c.name }}</span>
               </ng-template>
-              <ng-container *ngIf="!organization && r.organizationId">
+              <ng-container *ngIf="!organization && c.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -68,7 +71,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="r.hasAttachments">
+              <ng-container *ngIf="c.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -78,26 +81,26 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ r.subTitle }}</small>
+              <small>{{ c.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="r.organizationId"
-                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="c.organizationId"
+                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
               <span bitBadge variant="warning">
-                {{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }}
+                {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
               </span>
             </td>
           </tr>
-        </ng-template>
-      </bit-table>
+        </tbody>
+      </table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
index bcb0db296f4..ced0ff9731d 100644
--- a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
+++ b/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">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noUnsecuredWebsites" | i18n }}
-    </bit-callout>
+    </app-callout>
     <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
+      <app-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
         {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
+      </app-callout>
 
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
@@ -32,24 +32,27 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
+      <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"
+        >
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | 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>
+        </thead>
+        <tbody>
+          <tr *ngFor="let c of ciphers">
+            <td class="table-list-icon">
+              <app-vault-icon [cipher]="c"></app-vault-icon>
             </td>
             <td class="reduced-lh wrap">
-              <a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{
-                r.name
+              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+                c.name
               }}</a>
-              <ng-container *ngIf="!organization && r.organizationId">
+              <ng-container *ngIf="!organization && c.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -58,7 +61,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="r.hasAttachments">
+              <ng-container *ngIf="c.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -68,21 +71,21 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ r.subTitle }}</small>
+              <small>{{ c.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="r.organizationId"
-                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="c.organizationId"
+                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
           </tr>
-        </ng-template>
-      </bit-table>
+        </tbody>
+      </table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
index ab116743478..a943c8c29ec 100644
--- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html
+++ b/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">
-    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
+    <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
       {{ "noWeakPasswords" | i18n }}
-    </bit-callout>
+    </app-callout>
     <ng-container *ngIf="ciphers.length">
-      <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
+      <app-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
         {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
-      </bit-callout>
+      </app-callout>
       <bit-toggle-group
         *ngIf="showFilterToggle && !isAdminConsoleActive"
         [selected]="filterOrgStatus$ | async"
@@ -31,33 +31,36 @@
           </bit-toggle>
         </ng-container>
       </bit-toggle-group>
-      <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
+      <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"
+        >
           <tr>
             <th></th>
             <th>{{ "name" | i18n }}</th>
             <th>{{ "owner" | 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>
+        </thead>
+        <tbody>
+          <tr *ngFor="let c of ciphers">
+            <td class="table-list-icon">
+              <app-vault-icon [cipher]="c"></app-vault-icon>
             </td>
             <td class="reduced-lh wrap">
-              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
+              <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
                 <a
                   href="#"
                   appStopClick
-                  (click)="selectCipher(r)"
+                  (click)="selectCipher(c)"
                   title="{{ 'editItem' | i18n }}"
-                  >{{ r.name }}</a
+                  >{{ c.name }}</a
                 >
               </ng-container>
               <ng-template #cantManage>
-                <span>{{ r.name }}</span>
+                <span>{{ c.name }}</span>
               </ng-template>
-              <ng-container *ngIf="!organization && r.organizationId">
+              <ng-container *ngIf="!organization && c.organizationId">
                 <i
                   class="bwi bwi-collection"
                   appStopProp
@@ -66,7 +69,7 @@
                 ></i>
                 <span class="sr-only">{{ "shared" | i18n }}</span>
               </ng-container>
-              <ng-container *ngIf="r.hasAttachments">
+              <ng-container *ngIf="c.hasAttachments">
                 <i
                   class="bwi bwi-paperclip"
                   appStopProp
@@ -76,26 +79,26 @@
                 <span class="sr-only">{{ "attachments" | i18n }}</span>
               </ng-container>
               <br />
-              <small>{{ r.subTitle }}</small>
+              <small>{{ c.subTitle }}</small>
             </td>
             <td>
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
-                [organizationId]="r.organizationId"
-                [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
+                [organizationId]="c.organizationId"
+                [organizationName]="c.organizationId | orgNameFromId: (organizations$ | async)"
                 appStopProp
               >
               </app-org-badge>
             </td>
             <td class="text-right">
-              <span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]">
-                {{ passwordStrengthMap.get(r.id)[0] | i18n }}
+              <span bitBadge [variant]="passwordStrengthMap.get(c.id)[1]">
+                {{ passwordStrengthMap.get(c.id)[0] | i18n }}
               </span>
             </td>
           </tr>
-        </ng-template>
-      </bit-table>
+        </tbody>
+      </table>
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>