Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-02-18 01:41:27 +01:00
Code Issues Projects Releases Wiki Activity

[PM-4962] remove all bootstrap classes from reports. add missing header column (#10524)

Browse Source 
* remove all bootstrap classes from reports. add missing header column

* finish migrating table components to component library

* update reports based on PR feedback
This commit is contained in:
Jordan Aasen 2024-08-15 17:16:38 -07:00 committed by GitHub
parent 333c9f3f4f
commit 92f87dad9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,25 +12,25 @@
{{ "checkBreaches" | i18n }} {{ "checkBreaches" | i18n }}
</button> </button>
</form> </form>
<div class="mt-4" *ngIf="!loading && checkedUsername"> <div class="tw-mt-4" *ngIf="!loading && checkedUsername">
<p *ngIf="error">{{ "reportError" | i18n }}...</p> <p *ngIf="error">{{ "reportError" | i18n }}...</p>
<ng-container *ngIf="!error"> <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 }} {{ "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 }} {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
</app-callout> </bit-callout>
<ul class="list-group list-group-breach" *ngIf="breachedAccounts.length"> <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
<li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix"> <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
<div class="row"> <div class="row">
<div class="col-2 text-center"> <div class="col-2 tw-text-center">
<img [src]="a.logoPath" alt="" class="img-fluid" /> <img [src]="a.logoPath" alt="" class="img-fluid" />
</div> </div>
<div class="col-7"> <div class="col-7">
<h3 class="text-lg">{{ a.title }}</h3> <h3 class="tw-text-lg">{{ a.title }}</h3>
<p [innerHTML]="a.description"></p> <p [innerHTML]="a.description"></p>
<p class="mb-1">{{ "compromisedData" | i18n }}:</p> <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
<ul> <ul>
<li *ngFor="let d of a.dataClasses">{{ d }}</li> <li *ngFor="let d of a.dataClasses">{{ d }}</li>
</ul> </ul>

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

@ -98,15 +98,13 @@ export class CipherReportComponent implements OnDestroy {
async filterOrgToggle(status: any) { async filterOrgToggle(status: any) {
this.currentFilterStatus = status; this.currentFilterStatus = status;
await this.setCiphers();
if (status === 0) { if (status === 0) {
return; this.dataSource.filter = null;
} else if (status === 1) { } else if (status === 1) {
this.ciphers = this.ciphers.filter((c: any) => c.orgFilterStatus == null); this.dataSource.filter = (c: any) => c.orgFilterStatus == null;
} else { } else {
this.ciphers = this.ciphers.filter((c: any) => c.orgFilterStatus === status); this.dataSource.filter = (c: any) => c.orgFilterStatus === status;
} }
this.dataSource.data = this.ciphers;
} }
async load() { async load() {

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

@ -5,7 +5,7 @@
<button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()"> <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
{{ "checkExposedPasswords" | i18n }} {{ "checkExposedPasswords" | i18n }}
</button> </button>
<div class="mt-4" *ngIf="hasLoaded"> <div class="tw-mt-4" *ngIf="hasLoaded">
<bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length"> <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noExposedPasswords" | i18n }} {{ "noExposedPasswords" | i18n }}
</bit-callout> </bit-callout>
@ -26,21 +26,21 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource" class="table"> <bit-table [dataSource]="dataSource">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr> <tr bitRow>
<th></th> <th bitCell></th>
<th>{{ "name" | i18n }}</th> <th bitCell>{{ "name" | i18n }}</th>
<th>{{ "owner" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th></th> <th bitCell></th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async"> <tr bitRow *ngFor="let r of rows$ | async">
<td class="table-list-icon"> <td bitCell>
<app-vault-icon [cipher]="r"></app-vault-icon> <app-vault-icon [cipher]="r"></app-vault-icon>
</td> </td>
<td> <td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a <a
href="#" href="#"
@ -74,7 +74,7 @@
<br /> <br />
<small>{{ r.subTitle }}</small> <small>{{ r.subTitle }}</small>
</td> </td>
<td> <td bitCell>
<app-org-badge <app-org-badge
*ngIf="!organization" *ngIf="!organization"
[disabled]="disabled" [disabled]="disabled"
@ -84,7 +84,7 @@
> >
</app-org-badge> </app-org-badge>
</td> </td>
<td class="text-right"> <td bitCell class="tw-text-right">
<span bitBadge variant="warning"> <span bitBadge variant="warning">
{{ "exposedXTimes" | i18n: (exposedPasswordMap.get(r.id) | number) }} {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(r.id) | number) }}
</span> </span>

23
apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html
View File

@ -4,13 +4,13 @@
<p>{{ "inactive2faReportDesc" | i18n }}</p> <p>{{ "inactive2faReportDesc" | i18n }}</p>
<div *ngIf="!hasLoaded && loading"> <div *ngIf="!hasLoaded && loading">
<i <i
class="bwi bwi-spinner bwi-spin text-muted" class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}" title="{{ 'loading' | i18n }}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span> <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div> </div>
<div class="mt-4" *ngIf="hasLoaded"> <div class="tw-mt-4" *ngIf="hasLoaded">
<bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length"> <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noInactive2fa" | i18n }} {{ "noInactive2fa" | i18n }}
</bit-callout> </bit-callout>
@ -31,21 +31,22 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource" class="table"> <bit-table [dataSource]="dataSource">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr> <tr bitRow>
<th></th> <th bitCell></th>
<th>{{ "name" | i18n }}</th> <th bitCell>{{ "name" | i18n }}</th>
<th>{{ "owner" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th bitCell></th>
</tr> </tr>
</ng-container> </ng-container>
<tbody> <tbody>
<ng-template body let-rows$> <ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async"> <tr bitRow *ngFor="let r of rows$ | async">
<td class="table-list-icon"> <td bitCell>
<app-vault-icon [cipher]="r"></app-vault-icon> <app-vault-icon [cipher]="r"></app-vault-icon>
</td> </td>
<td class="reduced-lh wrap"> <td bitCell>
<a <a
href="#" href="#"
appStopClick appStopClick
@ -74,7 +75,7 @@
<br /> <br />
<small>{{ r.subTitle }}</small> <small>{{ r.subTitle }}</small>
</td> </td>
<td> <td bitCell>
<app-org-badge <app-org-badge
*ngIf="!organization" *ngIf="!organization"
[disabled]="disabled" [disabled]="disabled"
@ -84,7 +85,7 @@
> >
</app-org-badge> </app-org-badge>
</td> </td>
<td class="text-right"> <td bitCell class="tw-text-right">
<a <a
bitBadge bitBadge
href="{{ cipherDocs.get(r.id) }}" href="{{ cipherDocs.get(r.id) }}"

23
apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html
View File

@ -4,13 +4,13 @@
<p>{{ "reusedPasswordsReportDesc" | i18n }}</p> <p>{{ "reusedPasswordsReportDesc" | i18n }}</p>
<div *ngIf="!hasLoaded && loading"> <div *ngIf="!hasLoaded && loading">
<i <i
class="bwi bwi-spinner bwi-spin text-muted" class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}" title="{{ 'loading' | i18n }}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span> <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div> </div>
<div class="mt-4" *ngIf="hasLoaded"> <div class="tw-mt-4" *ngIf="hasLoaded">
<bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length"> <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noReusedPasswords" | i18n }} {{ "noReusedPasswords" | i18n }}
</bit-callout> </bit-callout>
@ -33,20 +33,21 @@
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource" class="table"> <bit-table [dataSource]="dataSource">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr> <tr bitRow>
<th></th> <th bitCell></th>
<th>{{ "name" | i18n }}</th> <th bitCell>{{ "name" | i18n }}</th>
<th>{{ "owner" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th bitCell></th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async"> <tr bitRow *ngFor="let r of rows$ | async">
<td class="table-list-icon"> <td bitCell>
<app-vault-icon [cipher]="r"></app-vault-icon> <app-vault-icon [cipher]="r"></app-vault-icon>
</td> </td>
<td> <td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a <a
href="#" href="#"
@ -80,7 +81,7 @@
<br /> <br />
<small>{{ r.subTitle }}</small> <small>{{ r.subTitle }}</small>
</td> </td>
<td> <td bitCell>
<app-org-badge <app-org-badge
*ngIf="!organization" *ngIf="!organization"
[disabled]="disabled" [disabled]="disabled"
@ -90,7 +91,7 @@
> >
</app-org-badge> </app-org-badge>
</td> </td>
<td class="text-right"> <td bitCell class="tw-text-right">
<span bitBadge variant="warning"> <span bitBadge variant="warning">
{{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }} {{ "reusedXTimes" | i18n: passwordUseMap.get(r.login.password) }}
</span> </span>

21
apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html
View File

@ -4,13 +4,13 @@
<p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p> <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
<div *ngIf="!hasLoaded && loading"> <div *ngIf="!hasLoaded && loading">
<i <i
class="bwi bwi-spinner bwi-spin text-muted" class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}" title="{{ 'loading' | i18n }}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span> <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div> </div>
<div class="mt-4" *ngIf="hasLoaded"> <div class="tw-mt-4" *ngIf="hasLoaded">
<bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length"> <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noUnsecuredWebsites" | i18n }} {{ "noUnsecuredWebsites" | i18n }}
</bit-callout> </bit-callout>
@ -32,20 +32,21 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource" class="table"> <bit-table [dataSource]="dataSource">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr> <tr bitRow>
<th></th> <th bitCell></th>
<th>{{ "name" | i18n }}</th> <th bitCell>{{ "name" | i18n }}</th>
<th>{{ "owner" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th bitCell></th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async"> <tr bitRow *ngFor="let r of rows$ | async">
<td class="table-list-icon"> <td bitCell>
<app-vault-icon [cipher]="r"></app-vault-icon> <app-vault-icon [cipher]="r"></app-vault-icon>
</td> </td>
<td class="reduced-lh wrap"> <td bitCell>
<a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{ <a href="#" appStopClick (click)="selectCipher(r)" title="{{ 'editItem' | i18n }}">{{
r.name r.name
}}</a> }}</a>
@ -70,7 +71,7 @@
<br /> <br />
<small>{{ r.subTitle }}</small> <small>{{ r.subTitle }}</small>
</td> </td>
<td> <td bitCell>
<app-org-badge <app-org-badge
*ngIf="!organization" *ngIf="!organization"
[disabled]="disabled" [disabled]="disabled"

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

@ -4,13 +4,13 @@
<p>{{ "weakPasswordsReportDesc" | i18n }}</p> <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
<div *ngIf="!hasLoaded && loading"> <div *ngIf="!hasLoaded && loading">
<i <i
class="bwi bwi-spinner bwi-spin text-muted" class="bwi bwi-spinner bwi-spin tw-text-muted"
title="{{ 'loading' | i18n }}" title="{{ 'loading' | i18n }}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
<span class="tw-sr-only">{{ "loading" | i18n }}</span> <span class="tw-sr-only">{{ "loading" | i18n }}</span>
</div> </div>
<div class="mt-4" *ngIf="hasLoaded"> <div class="tw-mt-4" *ngIf="hasLoaded">
<bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length"> <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noWeakPasswords" | i18n }} {{ "noWeakPasswords" | i18n }}
</bit-callout> </bit-callout>
@ -31,20 +31,21 @@
</bit-toggle> </bit-toggle>
</ng-container> </ng-container>
</bit-toggle-group> </bit-toggle-group>
<bit-table [dataSource]="dataSource" class="table"> <bit-table [dataSource]="dataSource">
<ng-container header *ngIf="!isAdminConsoleActive"> <ng-container header *ngIf="!isAdminConsoleActive">
<tr> <tr bitRow>
<th></th> <th bitCell></th>
<th>{{ "name" | i18n }}</th> <th bitCell>{{ "name" | i18n }}</th>
<th>{{ "owner" | i18n }}</th> <th bitCell>{{ "owner" | i18n }}</th>
<th bitCell></th>
</tr> </tr>
</ng-container> </ng-container>
<ng-template body let-rows$> <ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async"> <tr bitRow *ngFor="let r of rows$ | async">
<td class="table-list-icon"> <td bitCell>
<app-vault-icon [cipher]="r"></app-vault-icon> <app-vault-icon [cipher]="r"></app-vault-icon>
</td> </td>
<td class="reduced-lh wrap"> <td bitCell>
<ng-container *ngIf="!organization || canManageCipher(r); else cantManage"> <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
<a <a
href="#" href="#"
@ -78,7 +79,7 @@
<br /> <br />
<small>{{ r.subTitle }}</small> <small>{{ r.subTitle }}</small>
</td> </td>
<td> <td bitCell>
<app-org-badge <app-org-badge
*ngIf="!organization" *ngIf="!organization"
[disabled]="disabled" [disabled]="disabled"
@ -88,7 +89,7 @@
> >
</app-org-badge> </app-org-badge>
</td> </td>
<td class="text-right"> <td bitCell class="tw-text-right">
<span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]"> <span bitBadge [variant]="passwordStrengthMap.get(r.id)[1]">
{{ passwordStrengthMap.get(r.id)[0] | i18n }} {{ passwordStrengthMap.get(r.id)[0] | i18n }}
</span> </span>