bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-02 09:43:29 +00:00
Code Issues Releases Wiki Activity

logic to fetch totals and new styling

Browse Source
This commit is contained in:
Alex
2025-10-30 13:23:36 -04:00
parent 08df1ea44e
commit 8d99996f66
2 changed files with 180 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.html
View File

@@ -1,35 +1,173 @@
<div class="tw-flex tw-flex-col tw-gap-4">
<!-- Task Summary Info Card (matches password-change-metric styling) -->
<div
class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-background tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg"
>
<div class="tw-mb-2">
<i class="bwi bwi-info-circle tw-text-muted tw-mr-2" aria-hidden="true"></i>
<span bitTypography="h6">{{ "taskSummary" | i18n }}</span>
<div class="tw-flex tw-flex-col tw-gap-6">
<!-- Two-column layout: Left panel (stats) and Right panel (browser extension mockup) -->
<div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-6">
<!-- Left Panel -->
<div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
<!-- Task Summary Info Card -->
<div
class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-secondary-100 tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg"
>
<div class="tw-flex tw-items-center tw-mb-3">
<i class="bwi bwi-info-circle tw-text-primary-600 tw-mr-2" aria-hidden="true"></i>
<span bitTypography="h6" class="tw-font-semibold">{{ "taskSummary" | i18n }}</span>
</div>
<div bitTypography="body1" class="tw-text-main">
<strong>{{ criticalAppsAtRiskMemberCount }}</strong>
{{ "membersWithAtRiskPasswords" | i18n }}
for
<strong>{{ selectedApplicationsCount() }}</strong>
{{ "criticalApplications" | i18n }}
</div>
</div>
<!-- Stat Box: Members with At-Risk Passwords -->
<div class="tw-flex tw-items-start tw-gap-3">
<bit-icon-tile
icon="bwi-users"
variant="primary"
size="large"
aria-label=""
></bit-icon-tile>
<div class="tw-flex tw-flex-col">
<span bitTypography="h2" class="tw-font-bold tw-mb-1">
{{ criticalAppsAtRiskMemberCount }}
</span>
<span bitTypography="body2" class="tw-text-muted">
{{ "membersWithAtRiskPasswords" | i18n }}
</span>
</div>
</div>
<!-- Stat Box: Critical Applications At-Risk -->
<div class="tw-flex tw-items-start tw-gap-3">
<bit-icon-tile
icon="bwi-desktop"
variant="warning"
size="large"
aria-label=""
></bit-icon-tile>
<div class="tw-flex tw-flex-col">
<div class="tw-flex tw-items-baseline tw-gap-2 tw-mb-1">
<span bitTypography="h2" class="tw-font-bold tw-text-main">
{{ selectedApplicationsCount() }}
</span>
<span bitTypography="body1" class="tw-text-muted">
of {{ totalApplicationsCount }} total
</span>
</div>
<span bitTypography="body2" class="tw-text-muted">
{{ "criticalApplications" | i18n }} at-risk
</span>
</div>
</div>
</div>
<div class="tw-flex tw-items-baseline tw-gap-2 tw-mb-4">
<span bitTypography="h3">{{ selectedApplicationsCount() }}</span>
<span bitTypography="body2" class="tw-text-muted">
{{ "criticalApplicationsMarked" | i18n }}
</span>
</div>
<!-- Right Panel: Browser Extension Mockup -->
<div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
<!-- Browser Extension Mockup -->
<div
class="tw-relative tw-bg-secondary-100 tw-rounded-lg tw-p-4 tw-border tw-border-secondary-300"
>
<!-- Browser Window Mockup -->
<div class="tw-bg-background tw-rounded tw-shadow-md tw-overflow-hidden">
<!-- Browser Top Bar -->
<div
class="tw-flex tw-items-center tw-gap-2 tw-bg-secondary-100 tw-px-3 tw-py-2 tw-border-b tw-border-secondary-300"
>
<div class="tw-flex tw-gap-1">
<div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
<div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
<div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
</div>
<div
class="tw-flex-1 tw-bg-background tw-rounded tw-px-2 tw-py-1 tw-text-xs tw-text-muted tw-border tw-border-secondary-300"
>
example.com
</div>
<div class="tw-size-4 tw-bg-secondary-300 tw-rounded"></div>
</div>
<div class="tw-flex tw-items-baseline tw-gap-2">
<span bitTypography="h3">{{ criticalAppsAtRiskMemberCount }}</span>
<span bitTypography="body2" class="tw-text-muted">
{{ "membersWithAtRiskPasswords" | i18n }}
</span>
<!-- Browser Content Area -->
<div class="tw-p-4 tw-bg-primary-100 tw-min-h-[200px] tw-relative">
<!-- Extension Popup Mockup -->
<div
class="tw-absolute tw-top-4 tw-right-4 tw-w-64 tw-bg-background tw-rounded-lg tw-shadow-lg tw-border tw-border-secondary-300 tw-p-4"
>
<!-- Extension Items -->
<div class="tw-space-y-3 tw-mb-4">
<div class="tw-flex tw-items-center tw-gap-2">
<div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
<div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
<button
type="button"
class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
>
{{ "change" | i18n }}
</button>
</div>
<div class="tw-flex tw-items-center tw-gap-2">
<div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
<div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
<button
type="button"
class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
>
{{ "change" | i18n }}
</button>
</div>
<div class="tw-flex tw-items-center tw-gap-2">
<div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
<div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
<button
type="button"
class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
>
{{ "change" | i18n }}
</button>
</div>
</div>
<!-- Review Section -->
<div class="tw-mb-4">
<div class="tw-h-3 tw-bg-secondary-300 tw-rounded tw-mb-2 tw-w-3/4"></div>
<div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-full tw-mb-1"></div>
<div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-5/6"></div>
</div>
<!-- Pagination Dots -->
<div class="tw-flex tw-justify-center tw-gap-1 tw-mb-3">
<div class="tw-size-1.5 tw-rounded-full tw-bg-primary-600"></div>
<div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
<div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
</div>
<!-- Review Button -->
<button
type="button"
class="tw-w-full tw-py-2 tw-bg-primary-600 tw-text-contrast tw-rounded tw-text-sm tw-font-semibold"
>
{{ "reviewAtRiskPasswords" | i18n }}
</button>
</div>
<!-- Mouse Cursor Mockup -->
<div
class="tw-absolute tw-top-8 tw-right-16 tw-size-4 tw-border-2 tw-border-text-main tw-bg-background"
></div>
</div>
</div>
</div>
<!-- Description Text -->
<div bitTypography="body2" class="tw-text-muted">
{{ "membersWillReceiveNotification" | i18n }}
</div>
</div>
</div>
<!-- Description Text -->
<div bitTypography="body2" class="tw-text-muted">
{{ "membersWillReceiveNotification" | i18n }}
</div>
<!-- Action Buttons -->
<div class="tw-flex tw-gap-2">
<!-- Footer: Action Buttons -->
<div class="tw-flex tw-gap-2 tw-pt-4 tw-pb-2">
<button
type="button"
bitButton
@@ -40,7 +178,6 @@
[loading]="isAssigning"
[attr.aria-label]="'assignTasks' | i18n"
>
<i class="bwi bwi-envelope tw-mr-2" aria-hidden="true"></i>
{{ "assignTasks" | i18n }}
</button>
<button

24
bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.ts
View File

@@ -6,7 +6,12 @@ import { AllActivitiesService } from "@bitwarden/bit-common/dirt/reports/risk-in
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { OrganizationId } from "@bitwarden/common/types/guid";
import { ButtonModule, ToastService, TypographyModule } from "@bitwarden/components";
import {
ButtonModule,
IconTileComponent,
ToastService,
TypographyModule,
} from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { DefaultAdminTaskService } from "../../../vault/services/default-admin-task.service";
@@ -18,7 +23,7 @@ import { AccessIntelligenceSecurityTasksService } from "../shared/security-tasks
*
* Important: This component provides its own instances of AccessIntelligenceSecurityTasksService
* and DefaultAdminTaskService. These services are scoped to this component to ensure proper
* dependency injection when the component is dynamically rendered within the dialog.
* dependency injection when the component is dynamically rendered within the structure.
* Without these providers, Angular would throw NullInjectorError when trying to inject
* DefaultAdminTaskService, which is required by AccessIntelligenceSecurityTasksService.
*/
@@ -27,7 +32,7 @@ import { AccessIntelligenceSecurityTasksService } from "../shared/security-tasks
@Component({
selector: "dirt-assign-tasks-view",
templateUrl: "./assign-tasks-view.component.html",
imports: [CommonModule, ButtonModule, TypographyModule, I18nPipe],
imports: [CommonModule, ButtonModule, TypographyModule, I18nPipe, IconTileComponent],
providers: [AccessIntelligenceSecurityTasksService, DefaultAdminTaskService],
})
export class AssignTasksViewComponent implements OnInit {
@@ -53,6 +58,7 @@ export class AssignTasksViewComponent implements OnInit {
readonly back = output<void>();
protected criticalAppsAtRiskMemberCount = 0;
protected totalApplicationsCount = 0;
protected isAssigning = false;
private allActivitiesService = inject(AllActivitiesService);
@@ -62,22 +68,24 @@ export class AssignTasksViewComponent implements OnInit {
private logService = inject(LogService);
async ngOnInit(): Promise<void> {
// Get unique members with at-risk passwords from report summary
// Get unique members with at-risk passwords and total applications from report summary
// Uses the same pattern as all-activity.component.ts
await this.loadAtRiskMemberCount();
await this.loadReportSummary();
}
/**
* Loads the count of unique members with at-risk passwords.
* Loads the count of unique members with at-risk passwords and total applications.
* Uses the same pattern as all-activity.component.ts
*/
private async loadAtRiskMemberCount(): Promise<void> {
private async loadReportSummary(): Promise<void> {
try {
const summary = await firstValueFrom(this.allActivitiesService.reportSummary$);
this.criticalAppsAtRiskMemberCount = summary.totalCriticalAtRiskMemberCount;
this.totalApplicationsCount = summary.totalApplicationCount;
} catch (error) {
this.logService.error("[AssignTasksView] Failed to load at-risk member count", error);
this.logService.error("[AssignTasksView] Failed to load report summary", error);
this.criticalAppsAtRiskMemberCount = 0;
this.totalApplicationsCount = 0;
}
}