1
0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-14 20:01:31 +01:00

[PM-16104] [PM-15929] Org at risk members click on the card (#12732)

* Org at risk members click on the card

* Fixing at risk member counts

* At risk member text modification

* Changing ok button to close
This commit is contained in:
Tom 2025-01-13 11:18:03 -05:00 committed by GitHub
parent 8062475044
commit 52b6bfea1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 185 additions and 2 deletions

View File

@ -113,6 +113,27 @@
"atRiskMembers": {
"message": "At-risk members"
},
"atRiskMembersWithCount": {
"message": "At-risk members ($COUNT$)",
"placeholders": {
"count": {
"content": "$1",
"example": "3"
}
}
},
"atRiskMembersDescription": {
"message": "These members are logging into applications with weak, exposed, or reused passwords."
},
"atRiskMembersDescriptionWithApp": {
"message": "These members are logging into $APPNAME$ with weak, exposed, or reused passwords.",
"placeholders": {
"appname": {
"content": "$1",
"example": "Salesforce"
}
}
},
"totalMembers": {
"message": "Total members"
},

View File

@ -90,3 +90,13 @@ export type MemberDetailsFlat = {
email: string;
cipherId: string;
};
/**
* Member email with the number of at risk passwords
* At risk member detail that contains the email
* and the count of at risk ciphers
*/
export type AtRiskMemberDetail = {
email: string;
atRiskPasswordCount: number;
};

View File

@ -12,6 +12,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import {
ApplicationHealthReportDetail,
ApplicationHealthReportSummary,
AtRiskMemberDetail,
CipherHealthReportDetail,
CipherHealthReportUriDetail,
ExposedPasswordDetail,
@ -89,6 +90,30 @@ export class RiskInsightsReportService {
return results$;
}
/**
* Generates a list of members with at-risk passwords along with the number of at-risk passwords.
*/
generateAtRiskMemberList(
cipherHealthReportDetails: ApplicationHealthReportDetail[],
): AtRiskMemberDetail[] {
const memberRiskMap = new Map<string, number>();
cipherHealthReportDetails.forEach((app) => {
app.atRiskMemberDetails.forEach((member) => {
if (memberRiskMap.has(member.email)) {
memberRiskMap.set(member.email, memberRiskMap.get(member.email) + 1);
} else {
memberRiskMap.set(member.email, 1);
}
});
});
return Array.from(memberRiskMap.entries()).map(([email, atRiskPasswordCount]) => ({
email,
atRiskPasswordCount,
}));
}
/**
* Gets the summary from the application health report. Returns total members and applications as well
* as the total at risk members and at risk applications

View File

@ -27,10 +27,11 @@
<h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
<div class="tw-flex tw-gap-6">
<tools-card
class="tw-flex-1"
class="tw-flex-1 tw-cursor-pointer"
[title]="'atRiskMembers' | i18n"
[value]="applicationSummary.totalAtRiskMemberCount"
[maxValue]="applicationSummary.totalMemberCount"
(click)="showOrgAtRiskMembers()"
>
</tools-card>
<tools-card
@ -82,7 +83,7 @@
(change)="onCheckboxChange(r.id, $event)"
/>
</td>
<td bitCell>
<td class="tw-cursor-pointer" (click)="showAppAtRiskMembers(r.applicationName)" bitCell>
<span>{{ r.applicationName }}</span>
</td>
<td bitCell>

View File

@ -19,6 +19,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import {
DialogService,
Icons,
NoItemsModule,
SearchModule,
@ -30,6 +31,8 @@ import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.mod
import { SharedModule } from "@bitwarden/web-vault/app/shared";
import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
import { openAppAtRiskMembersDialog } from "./app-at-risk-members-dialog.component";
import { OrgAtRiskMembersDialogComponent } from "./org-at-risk-members-dialog.component";
import { ApplicationsLoadingComponent } from "./risk-insights-loading.component";
@Component({
@ -99,6 +102,7 @@ export class AllApplicationsComponent implements OnInit, OnDestroy {
protected dataService: RiskInsightsDataService,
protected organizationService: OrganizationService,
protected reportService: RiskInsightsReportService,
protected dialogService: DialogService,
) {
this.searchControl.valueChanges
.pipe(debounceTime(200), takeUntilDestroyed())
@ -135,6 +139,21 @@ export class AllApplicationsComponent implements OnInit, OnDestroy {
return item.applicationName;
}
showAppAtRiskMembers = async (applicationName: string) => {
openAppAtRiskMembersDialog(this.dialogService, {
members:
this.dataSource.data.find((app) => app.applicationName === applicationName)
?.atRiskMemberDetails ?? [],
applicationName,
});
};
showOrgAtRiskMembers = async () => {
this.dialogService.open(OrgAtRiskMembersDialogComponent, {
data: this.reportService.generateAtRiskMemberList(this.dataSource.data),
});
};
onCheckboxChange(id: number, event: Event) {
const isChecked = (event.target as HTMLInputElement).checked;
if (isChecked) {

View File

@ -0,0 +1,21 @@
<bit-dialog>
<span bitDialogTitle>{{ applicationName }}</span>
<ng-container bitDialogContent>
<div class="tw-flex tw-flex-col tw-gap-2">
<span bitDialogTitle>{{ "atRiskMembersWithCount" | i18n: members.length }} </span>
<span class="tw-text-muted">{{
"atRiskMembersDescriptionWithApp" | i18n: applicationName
}}</span>
<div class="tw-mt-1">
<ng-container *ngFor="let member of members">
<div>{{ member.email }}</div>
</ng-container>
</div>
</div>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton bitDialogClose buttonType="secondary" type="button">
{{ "close" | i18n }}
</button>
</ng-container>
</bit-dialog>

View File

@ -0,0 +1,35 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { MemberDetailsFlat } from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
type AppAtRiskMembersDialogParams = {
members: MemberDetailsFlat[];
applicationName: string;
};
export const openAppAtRiskMembersDialog = (
dialogService: DialogService,
dialogConfig: AppAtRiskMembersDialogParams,
) =>
dialogService.open<boolean, AppAtRiskMembersDialogParams>(AppAtRiskMembersDialogComponent, {
data: dialogConfig,
});
@Component({
standalone: true,
templateUrl: "./app-at-risk-members-dialog.component.html",
imports: [ButtonModule, CommonModule, JslibModule, DialogModule],
})
export class AppAtRiskMembersDialogComponent {
protected members: MemberDetailsFlat[];
protected applicationName: string;
constructor(@Inject(DIALOG_DATA) private params: AppAtRiskMembersDialogParams) {
this.members = params.members;
this.applicationName = params.applicationName;
}
}

View File

@ -0,0 +1,27 @@
<bit-dialog>
<ng-container bitDialogTitle>
<span bitDialogTitle>{{ "atRiskMembersWithCount" | i18n: atRiskMembers.length }} </span>
</ng-container>
<ng-container bitDialogContent>
<div class="tw-flex tw-flex-col tw-gap-2">
<span bitTypography="body2" class="tw-text-muted">{{
"atRiskMembersDescription" | i18n
}}</span>
<div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
<div bitTypography="body2" class="tw-font-bold">{{ "email" | i18n }}</div>
<div bitTypography="body2" class="tw-font-bold">{{ "atRiskPasswords" | i18n }}</div>
</div>
<ng-container *ngFor="let member of atRiskMembers">
<div class="tw-flex tw-justify-between tw-mt-2">
<div>{{ member.email }}</div>
<div>{{ member.atRiskPasswordCount }}</div>
</div>
</ng-container>
</div>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton bitDialogClose buttonType="secondary" type="button">
{{ "close" | i18n }}
</button>
</ng-container>
</bit-dialog>

View File

@ -0,0 +1,24 @@
import { DIALOG_DATA } from "@angular/cdk/dialog";
import { CommonModule } from "@angular/common";
import { Component, Inject } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AtRiskMemberDetail } from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
export const openOrgAtRiskMembersDialog = (
dialogService: DialogService,
dialogConfig: AtRiskMemberDetail[],
) =>
dialogService.open<boolean, AtRiskMemberDetail[]>(OrgAtRiskMembersDialogComponent, {
data: dialogConfig,
});
@Component({
standalone: true,
templateUrl: "./org-at-risk-members-dialog.component.html",
imports: [ButtonModule, CommonModule, DialogModule, JslibModule, TypographyModule],
})
export class OrgAtRiskMembersDialogComponent {
constructor(@Inject(DIALOG_DATA) protected atRiskMembers: AtRiskMemberDetail[]) {}
}