diff --git a/apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts b/apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts index 93342ebf48..a7ed44b831 100644 --- a/apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts +++ b/apps/web/src/app/modules/organizations/reporting/organization-reporting-routing.module.ts @@ -11,27 +11,29 @@ import { InactiveTwoFactorReportComponent } from "../../../organizations/tools/i import { ReusedPasswordsReportComponent } from "../../../organizations/tools/reused-passwords-report.component"; import { UnsecuredWebsitesReportComponent } from "../../../organizations/tools/unsecured-websites-report.component"; import { WeakPasswordsReportComponent } from "../../../organizations/tools/weak-passwords-report.component"; +import { ReportListComponent } from "../../../reports/report-list.component"; -import { ReportListComponent } from "./report-list.component"; -import { ReportingComponent } from "./reporting.component"; +import { ReportsComponent } from "./../../../reports/reports.component"; +import { ReportingTabComponent } from "./reporting-tab.component"; const routes: Routes = [ { path: "", - component: ReportingComponent, + component: ReportingTabComponent, canActivate: [PermissionsGuard], data: { permissions: NavigationPermissionsService.getPermissions("reporting") }, children: [ { path: "", pathMatch: "full", redirectTo: "reports" }, { path: "reports", - component: ReportListComponent, + component: ReportsComponent, canActivate: [PermissionsGuard], data: { titleId: "reports", permissions: [Permissions.AccessReports], }, children: [ + { path: "", pathMatch: "full", component: ReportListComponent }, { path: "exposed-passwords-report", component: ExposedPasswordsReportComponent, diff --git a/apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts b/apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts index 4fb12df3b2..f32e915aa7 100644 --- a/apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts +++ b/apps/web/src/app/modules/organizations/reporting/organization-reporting.module.ts @@ -4,11 +4,10 @@ import { LooseComponentsModule } from "../../loose-components.module"; import { SharedModule } from "../../shared.module"; import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module"; -import { ReportListComponent } from "./report-list.component"; -import { ReportingComponent } from "./reporting.component"; +import { ReportingTabComponent } from "./reporting-tab.component"; @NgModule({ imports: [SharedModule, LooseComponentsModule, OrganizationReportingRoutingModule], - declarations: [ReportListComponent, ReportingComponent], + declarations: [ReportingTabComponent], }) export class OrganizationReportingModule {} diff --git a/apps/web/src/app/modules/organizations/reporting/report-list.component.html b/apps/web/src/app/modules/organizations/reporting/report-list.component.html deleted file mode 100644 index 605146e024..0000000000 --- a/apps/web/src/app/modules/organizations/reporting/report-list.component.html +++ /dev/null @@ -1,24 +0,0 @@ - - - -

{{ "orgsReportsDesc" | i18n }}

- -
-
- -
-
-
- - - -
-
- - - {{ "backToReports" | i18n }} - -
-
diff --git a/apps/web/src/app/modules/organizations/reporting/report-list.component.ts b/apps/web/src/app/modules/organizations/reporting/report-list.component.ts deleted file mode 100644 index cbc5e1d863..0000000000 --- a/apps/web/src/app/modules/organizations/reporting/report-list.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Component } from "@angular/core"; -import { NavigationEnd, Router } from "@angular/router"; -import { filter, Subscription } from "rxjs"; - -import { ReportTypes } from "../../../reports/report-card.component"; - -@Component({ - selector: "app-org-report-list", - templateUrl: "report-list.component.html", -}) -export class ReportListComponent { - reports = [ - ReportTypes.exposedPasswords, - ReportTypes.reusedPasswords, - ReportTypes.weakPasswords, - ReportTypes.unsecuredWebsites, - ReportTypes.inactive2fa, - ]; - - homepage = true; - subscription: Subscription; - - constructor(router: Router) { - this.subscription = router.events - .pipe(filter((event) => event instanceof NavigationEnd)) - .subscribe((event) => { - this.homepage = (event as NavigationEnd).urlAfterRedirects.endsWith("/reports"); - }); - } - - ngOnDestroy(): void { - this.subscription?.unsubscribe(); - } -} diff --git a/apps/web/src/app/modules/organizations/reporting/reporting.component.html b/apps/web/src/app/modules/organizations/reporting/reporting-tab.component.html similarity index 100% rename from apps/web/src/app/modules/organizations/reporting/reporting.component.html rename to apps/web/src/app/modules/organizations/reporting/reporting-tab.component.html diff --git a/apps/web/src/app/modules/organizations/reporting/reporting.component.ts b/apps/web/src/app/modules/organizations/reporting/reporting-tab.component.ts similarity index 87% rename from apps/web/src/app/modules/organizations/reporting/reporting.component.ts rename to apps/web/src/app/modules/organizations/reporting/reporting-tab.component.ts index 4173833b61..415d4afefc 100644 --- a/apps/web/src/app/modules/organizations/reporting/reporting.component.ts +++ b/apps/web/src/app/modules/organizations/reporting/reporting-tab.component.ts @@ -6,9 +6,9 @@ import { Organization } from "@bitwarden/common/models/domain/organization"; @Component({ selector: "app-org-reporting", - templateUrl: "reporting.component.html", + templateUrl: "reporting-tab.component.html", }) -export class ReportingComponent implements OnInit { +export class ReportingTabComponent implements OnInit { organization: Organization; accessEvents = false; showLeftNav = true; diff --git a/apps/web/src/app/reports/report-list.component.html b/apps/web/src/app/reports/report-list.component.html index e302873119..c5689a5a75 100644 --- a/apps/web/src/app/reports/report-list.component.html +++ b/apps/web/src/app/reports/report-list.component.html @@ -2,10 +2,10 @@

{{ "reports" | i18n }}

-

{{ "reportsDesc" | i18n }}

+

{{ reportDescKey | i18n }}

-
+
diff --git a/apps/web/src/app/reports/report-list.component.ts b/apps/web/src/app/reports/report-list.component.ts index 488949842d..41547391db 100644 --- a/apps/web/src/app/reports/report-list.component.ts +++ b/apps/web/src/app/reports/report-list.component.ts @@ -1,4 +1,5 @@ import { Component } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; import { ReportTypes } from "./report-card.component"; @@ -7,12 +8,25 @@ import { ReportTypes } from "./report-card.component"; templateUrl: "report-list.component.html", }) export class ReportListComponent { - reports = [ - ReportTypes.exposedPasswords, - ReportTypes.reusedPasswords, - ReportTypes.weakPasswords, - ReportTypes.unsecuredWebsites, - ReportTypes.inactive2fa, - ReportTypes.dataBreach, - ]; + forOrganization = false; + + constructor(private route: ActivatedRoute) { + this.route.params.subscribe((params) => { + this.forOrganization = params.organizationId != null; + }); + } + + get reportDescKey() { + return this.forOrganization ? "orgsReportsDesc" : "reportsDesc"; + } + + get reportTypes() { + return [ + ReportTypes.exposedPasswords, + ReportTypes.reusedPasswords, + ReportTypes.weakPasswords, + ReportTypes.unsecuredWebsites, + ReportTypes.inactive2fa, + ].concat(this.forOrganization ? [] : [ReportTypes.dataBreach]); + } } diff --git a/apps/web/src/app/reports/reports.component.html b/apps/web/src/app/reports/reports.component.html index 3c6bd313c4..7d8988c828 100644 --- a/apps/web/src/app/reports/reports.component.html +++ b/apps/web/src/app/reports/reports.component.html @@ -1,12 +1,10 @@ -
- + -
- + diff --git a/apps/web/src/app/reports/reports.component.ts b/apps/web/src/app/reports/reports.component.ts index c0e67ac5ea..e46d323038 100644 --- a/apps/web/src/app/reports/reports.component.ts +++ b/apps/web/src/app/reports/reports.component.ts @@ -1,5 +1,5 @@ -import { Component, OnDestroy } from "@angular/core"; -import { NavigationEnd, Router } from "@angular/router"; +import { Component, HostBinding, OnDestroy } from "@angular/core"; +import { ActivatedRoute, NavigationEnd, Router } from "@angular/router"; import { Subscription } from "rxjs"; import { filter } from "rxjs/operators"; @@ -10,15 +10,29 @@ import { filter } from "rxjs/operators"; export class ReportsComponent implements OnDestroy { homepage = true; subscription: Subscription; + forOrganization: boolean; + + @HostBinding("class") + get classList() { + return this.forOrganization ? [] : ["container", "page-content", "d-block"]; + } + + constructor(router: Router, route: ActivatedRoute) { + route.params.subscribe((params) => { + this.forOrganization = params.organizationId != null; + }); - constructor(router: Router) { this.subscription = router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe((event) => { - this.homepage = (event as NavigationEnd).url == "/reports"; + this.homepage = (event as NavigationEnd).urlAfterRedirects.endsWith("/reports"); }); } + get containerClasses() { + return this.forOrganization ? [] : ["container", "page-content"]; + } + ngOnDestroy(): void { this.subscription?.unsubscribe(); }