From ea97ffe60e41c8ca05367eca12f28712b16a62d8 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Mon, 8 Aug 2022 15:27:56 -0700 Subject: [PATCH] [EC-8] Restructure Tabs (#3109) * Cherry pick pending PR for tabs component [CL-17] Tabs - Routing * Update organization tabs from 4 to 6 * Create initial 'Members' tab * Create initial 'Groups' tab * Add initial "Reporting" tab * Use correct report label/layout by product type * Create initial 'Billing' tab * Breakup billing payment and billing history pages * Cleanup org routing and nav permission service * More org tab permission cleanup * Refactor organization billing to use a module * Refactor organization reporting to use module * Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952) * This partially reverts commit 24bb775 to fix tracking of people.component.html rename. * Fix people component file rename * Recover lost member page changes * Undo members component rename as it was causing difficult merge conflicts * Fix member and group page container * Remove unnecessary organization lookup * [EC-8] Some PR suggestions * [EC-8] Reuse user billing history for orgs * [EC-8] Renamed user billing history component * [EC-8] Repurpose payment method component Update end user payment method component to be usable for organizations. * [EC-8] Fix missing verify bank condition * [EC-8] Remove org payment method component * [EC-8] Use CL in payment method component * [EC-8] Extend maxWidth Tailwind theme config * [EC-8] Add lazy loading to org reports * [EC-8] Add lazy loading to org billing * [EC-8] Prettier * [EC-8] Cleanup org reporting component redundancy * [EC-8] Use different class for negative margin * [EC-8] Make billing history component "dumb" * Revert "[EC-8] Cleanup org reporting component redundancy" This reverts commit eca337e89bb0be4600af4351640636aa8a498cff. * [EC-8] Create and export shared reports module * [EC-8] Use shared reports module in orgs * [EC-8] Use takeUntil pattern * [EC-8] Move org reporting module out of old modules folder * [EC-8] Move org billing module out of old modules folder * [EC-8] Fix some remaining merge conflicts * [EC-8] Move maxWidth into 'extend' key for Tailwind config * [EC-8] Remove unused module * [EC-8] Rename org report list component * Prettier Co-authored-by: Vincent Salucci --- .../billing-sync-api-key.component.html | 0 .../billing-sync-api-key.component.ts | 0 ...zation-billing-history-view.component.html | 27 + ...nization-billing-history-view.component.ts | 35 ++ .../organization-billing-routing.module.ts | 47 ++ .../organization-billing-tab.component.html | 23 + .../organization-billing-tab.component.ts | 7 + .../billing/organization-billing.module.ts | 21 + .../organization-subscription.component.html | 0 .../organization-subscription.component.ts | 0 .../organization-layout.component.html | 45 +- .../layouts/organization-layout.component.ts | 56 +- .../manage/groups.component.html | 148 ++--- .../organizations/manage/groups.component.ts | 2 +- .../manage/people.component.html | 568 +++++++++--------- .../organizations/manage/people.component.ts | 2 +- .../organization-routing.module.ts | 187 +----- .../organization-reporting-routing.module.ts | 98 +++ .../organization-reporting.module.ts | 14 + .../reporting/reporting.component.html | 30 + .../reporting/reporting.component.ts | 24 + .../reporting/reports-home.component.html | 20 + .../reporting/reports-home.component.ts | 65 ++ .../navigation-permissions.service.ts | 34 +- .../settings/account.component.html | 27 +- .../settings/account.component.ts | 9 - .../organization-billing.component.html | 212 ------- .../organization-billing.component.ts | 154 ----- .../settings/settings.component.html | 13 +- apps/web/src/app/reports/index.ts | 4 +- .../reports/pages/reports-home.component.ts | 3 +- apps/web/src/app/reports/reports.module.ts | 7 +- apps/web/src/app/reports/reports.ts | 2 +- apps/web/src/app/reports/shared/index.ts | 3 + .../{ => shared}/models/report-entry.ts | 0 .../{ => shared}/models/report-variant.ts | 0 .../report-card/report-card.component.html | 2 +- .../report-card/report-card.component.ts | 0 .../report-card/report-card.stories.ts | 4 +- .../report-list/report-list.component.html | 0 .../report-list/report-list.component.ts | 0 .../report-list/report-list.stories.ts | 6 +- .../reports/shared/reports-shared.module.ts | 14 + .../billing-history-view.component.html | 27 + ...t.ts => billing-history-view.component.ts} | 25 +- .../settings/billing-history.component.html | 65 ++ .../app/settings/billing-history.component.ts | 41 ++ .../settings/payment-method.component.html | 85 ++- .../app/settings/payment-method.component.ts | 123 +++- .../settings/subscription-routing.module.ts | 4 +- .../user-billing-history.component.html | 98 --- .../src/app/shared/loose-components.module.ts | 17 +- apps/web/src/app/shared/shared.module.ts | 3 + apps/web/src/locales/en/messages.json | 13 + .../src/models/response/billingResponse.ts | 4 + libs/components/tailwind.config.base.js | 3 + 56 files changed, 1252 insertions(+), 1169 deletions(-) rename apps/web/src/app/organizations/{settings => billing}/billing-sync-api-key.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/billing-sync-api-key.component.ts (100%) create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history-view.component.html create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing-routing.module.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing-tab.component.html create mode 100644 apps/web/src/app/organizations/billing/organization-billing-tab.component.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing.module.ts rename apps/web/src/app/organizations/{settings => billing}/organization-subscription.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/organization-subscription.component.ts (100%) create mode 100644 apps/web/src/app/organizations/reporting/organization-reporting-routing.module.ts create mode 100644 apps/web/src/app/organizations/reporting/organization-reporting.module.ts create mode 100644 apps/web/src/app/organizations/reporting/reporting.component.html create mode 100644 apps/web/src/app/organizations/reporting/reporting.component.ts create mode 100644 apps/web/src/app/organizations/reporting/reports-home.component.html create mode 100644 apps/web/src/app/organizations/reporting/reports-home.component.ts delete mode 100644 apps/web/src/app/organizations/settings/organization-billing.component.html delete mode 100644 apps/web/src/app/organizations/settings/organization-billing.component.ts create mode 100644 apps/web/src/app/reports/shared/index.ts rename apps/web/src/app/reports/{ => shared}/models/report-entry.ts (100%) rename apps/web/src/app/reports/{ => shared}/models/report-variant.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.component.html (74%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.component.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.stories.ts (88%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.component.html (100%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.component.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.stories.ts (84%) create mode 100644 apps/web/src/app/reports/shared/reports-shared.module.ts create mode 100644 apps/web/src/app/settings/billing-history-view.component.html rename apps/web/src/app/settings/{user-billing-history.component.ts => billing-history-view.component.ts} (53%) create mode 100644 apps/web/src/app/settings/billing-history.component.html create mode 100644 apps/web/src/app/settings/billing-history.component.ts delete mode 100644 apps/web/src/app/settings/user-billing-history.component.html diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html b/apps/web/src/app/organizations/billing/billing-sync-api-key.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/billing-sync-api-key.component.html rename to apps/web/src/app/organizations/billing/billing-sync-api-key.component.html diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.ts b/apps/web/src/app/organizations/billing/billing-sync-api-key.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/billing-sync-api-key.component.ts rename to apps/web/src/app/organizations/billing/billing-sync-api-key.component.ts diff --git a/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html new file mode 100644 index 00000000000..6622245ad1d --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html @@ -0,0 +1,27 @@ +
+

+ {{ "billingHistory" | i18n }} +

+ +
+ + + {{ "loading" | i18n }} + + + + diff --git a/apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts new file mode 100644 index 00000000000..6680b3f19a9 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; + +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { BillingHistoryResponse } from "@bitwarden/common/models/response/billingHistoryResponse"; + +@Component({ + selector: "app-org-billing-history-view", + templateUrl: "organization-billing-history-view.component.html", +}) +export class OrgBillingHistoryViewComponent implements OnInit { + loading = false; + firstLoaded = false; + billing: BillingHistoryResponse; + organizationId: string; + + constructor(private apiService: ApiService, private route: ActivatedRoute) {} + + async ngOnInit() { + this.route.params.subscribe(async (params) => { + this.organizationId = params.organizationId; + await this.load(); + this.firstLoaded = true; + }); + } + + async load() { + if (this.loading) { + return; + } + this.loading = true; + this.billing = await this.apiService.getOrganizationBilling(this.organizationId); + this.loading = false; + } +} diff --git a/apps/web/src/app/organizations/billing/organization-billing-routing.module.ts b/apps/web/src/app/organizations/billing/organization-billing-routing.module.ts new file mode 100644 index 00000000000..476b98e1c36 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-routing.module.ts @@ -0,0 +1,47 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { Permissions } from "@bitwarden/common/enums/permissions"; + +import { PaymentMethodComponent } from "../../settings/payment-method.component"; +import { PermissionsGuard } from "../guards/permissions.guard"; +import { NavigationPermissionsService } from "../services/navigation-permissions.service"; + +import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component"; +import { OrganizationBillingTabComponent } from "./organization-billing-tab.component"; +import { OrganizationSubscriptionComponent } from "./organization-subscription.component"; + +const routes: Routes = [ + { + path: "", + component: OrganizationBillingTabComponent, + canActivate: [PermissionsGuard], + data: { permissions: NavigationPermissionsService.getPermissions("billing") }, + children: [ + { path: "", pathMatch: "full", redirectTo: "subscription" }, + { + path: "subscription", + component: OrganizationSubscriptionComponent, + data: { titleId: "subscription" }, + }, + { + path: "payment-method", + component: PaymentMethodComponent, + canActivate: [PermissionsGuard], + data: { titleId: "paymentMethod", permissions: [Permissions.ManageBilling] }, + }, + { + path: "history", + component: OrgBillingHistoryViewComponent, + canActivate: [PermissionsGuard], + data: { titleId: "billingHistory", permissions: [Permissions.ManageBilling] }, + }, + ], + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class OrganizationBillingRoutingModule {} diff --git a/apps/web/src/app/organizations/billing/organization-billing-tab.component.html b/apps/web/src/app/organizations/billing/organization-billing-tab.component.html new file mode 100644 index 00000000000..b01c0eea7f0 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-tab.component.html @@ -0,0 +1,23 @@ +
+
+
+
+
{{ "billing" | i18n }}
+
+ + {{ "subscription" | i18n }} + + + {{ "paymentMethod" | i18n }} + + + {{ "billingHistory" | i18n }} + +
+
+
+
+ +
+
+
diff --git a/apps/web/src/app/organizations/billing/organization-billing-tab.component.ts b/apps/web/src/app/organizations/billing/organization-billing-tab.component.ts new file mode 100644 index 00000000000..17f47e54d10 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-tab.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "app-org-billing-tab", + templateUrl: "organization-billing-tab.component.html", +}) +export class OrganizationBillingTabComponent {} diff --git a/apps/web/src/app/organizations/billing/organization-billing.module.ts b/apps/web/src/app/organizations/billing/organization-billing.module.ts new file mode 100644 index 00000000000..7e2dcf534e9 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule } from "../../shared/loose-components.module"; +import { SharedModule } from "../../shared/shared.module"; + +import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component"; +import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component"; +import { OrganizationBillingRoutingModule } from "./organization-billing-routing.module"; +import { OrganizationBillingTabComponent } from "./organization-billing-tab.component"; +import { OrganizationSubscriptionComponent } from "./organization-subscription.component"; + +@NgModule({ + imports: [SharedModule, LooseComponentsModule, OrganizationBillingRoutingModule], + declarations: [ + BillingSyncApiKeyComponent, + OrganizationBillingTabComponent, + OrganizationSubscriptionComponent, + OrgBillingHistoryViewComponent, + ], +}) +export class OrganizationBillingModule {} diff --git a/apps/web/src/app/organizations/settings/organization-subscription.component.html b/apps/web/src/app/organizations/billing/organization-subscription.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/organization-subscription.component.html rename to apps/web/src/app/organizations/billing/organization-subscription.component.html diff --git a/apps/web/src/app/organizations/settings/organization-subscription.component.ts b/apps/web/src/app/organizations/billing/organization-subscription.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/organization-subscription.component.ts rename to apps/web/src/app/organizations/billing/organization-subscription.component.ts diff --git a/apps/web/src/app/organizations/layouts/organization-layout.component.html b/apps/web/src/app/organizations/layouts/organization-layout.component.html index 3834635e189..8716e12740d 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.html @@ -6,34 +6,27 @@ class="my-auto pl-1" [activeOrganization]="organization" > - + + {{ "vault" | i18n }} + {{ + "members" | i18n + }} + {{ + "groups" | i18n + }} + {{ + reportTabLabel | i18n + }} + {{ + "billing" | i18n + }} + {{ + "settings" | i18n + }} + + diff --git a/apps/web/src/app/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/organizations/layouts/organization-layout.component.ts index c9dcbd5cf3c..3b46a2521a6 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.ts @@ -50,49 +50,29 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { this.organization = await this.organizationService.get(this.organizationId); } - get showManageTab(): boolean { - return NavigationPermissionsService.canAccessManage(this.organization); - } - - get showToolsTab(): boolean { - return NavigationPermissionsService.canAccessTools(this.organization); - } - get showSettingsTab(): boolean { return NavigationPermissionsService.canAccessSettings(this.organization); } - get toolsRoute(): string { - return this.organization.canAccessImportExport - ? "tools/import" - : "tools/exposed-passwords-report"; + get showMembersTab(): boolean { + return NavigationPermissionsService.canAccessMembers(this.organization); } - get manageRoute(): string { - let route: string; - switch (true) { - case this.organization.canManageUsers: - route = "manage/people"; - break; - case this.organization.canViewAssignedCollections || this.organization.canViewAllCollections: - route = "manage/collections"; - break; - case this.organization.canManageGroups: - route = "manage/groups"; - break; - case this.organization.canManagePolicies: - route = "manage/policies"; - break; - case this.organization.canManageSso: - route = "manage/sso"; - break; - case this.organization.canManageScim: - route = "manage/scim"; - break; - case this.organization.canAccessEventLogs: - route = "manage/events"; - break; - } - return route; + get showGroupsTab(): boolean { + return ( + this.organization.useGroups && NavigationPermissionsService.canAccessGroups(this.organization) + ); + } + + get showReportsTab(): boolean { + return NavigationPermissionsService.canAccessReporting(this.organization); + } + + get showBillingTab(): boolean { + return NavigationPermissionsService.canAccessBilling(this.organization); + } + + get reportTabLabel(): string { + return this.organization.useEvents ? "reporting" : "reports"; } } diff --git a/apps/web/src/app/organizations/manage/groups.component.html b/apps/web/src/app/organizations/manage/groups.component.html index 050307b8539..72c6c2ee115 100644 --- a/apps/web/src/app/organizations/manage/groups.component.html +++ b/apps/web/src/app/organizations/manage/groups.component.html @@ -1,77 +1,79 @@ -
-

{{ "groups" | i18n }}

-
-
- - +
+
+

{{ "groups" | i18n }}

+
+
+ + +
+
-
-
- - - {{ "loading" | i18n }} - - -

{{ "noGroupsInList" | i18n }}

- + + {{ "loading" | i18n }} + + - - - - + + +
- {{ g.name }} - -
- -
- - - {{ "users" | i18n }} - - - - {{ "delete" | i18n }} - +

{{ "noGroupsInList" | i18n }}

+ + + + + - - -
+ {{ g.name }} + +
+ +
+ + + {{ "users" | i18n }} + + + + {{ "delete" | i18n }} + +
- -
- - - +
+ + + +
diff --git a/apps/web/src/app/organizations/manage/groups.component.ts b/apps/web/src/app/organizations/manage/groups.component.ts index fbf009762c1..769d38cda70 100644 --- a/apps/web/src/app/organizations/manage/groups.component.ts +++ b/apps/web/src/app/organizations/manage/groups.component.ts @@ -48,7 +48,7 @@ export class GroupsComponent implements OnInit { ) {} async ngOnInit() { - this.route.parent.parent.params.subscribe(async (params) => { + this.route.parent.params.subscribe(async (params) => { this.organizationId = params.organizationId; const organization = await this.organizationService.get(this.organizationId); if (organization == null || !organization.useGroups) { diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html index ff583bcf36b..9d14e35c9b3 100644 --- a/apps/web/src/app/organizations/manage/people.component.html +++ b/apps/web/src/app/organizations/manage/people.component.html @@ -1,293 +1,295 @@ -
-

{{ "people" | i18n }}

-
-
- - - - -
-
- - -
-
- -
- - - - -
- -
+
+ + +
+
+ +
+ + + + + +
+ + +
+
+
-
-
- - - {{ "loading" | i18n }} - - -

{{ "noUsersInList" | i18n }}

- - - {{ "usersNeedConfirmed" | i18n }} - - - - - - - - - - - - -
- - - - - - {{ u.email }} - {{ - "invited" | i18n - }} - {{ - "accepted" | i18n - }} - {{ - "revoked" | i18n - }} - {{ u.name }} - - - - {{ "userUsingTwoStep" | i18n }} - - - - {{ "enrolledPasswordReset" | i18n }} - - - {{ "owner" | i18n }} - {{ "admin" | i18n }} - {{ "manager" | i18n }} - {{ "user" | i18n }} - {{ "custom" | i18n }} - -
- -
- - - {{ "resendInvitation" | i18n }} - - - - {{ "confirm" | i18n }} - - - - {{ "groups" | i18n }} - - - - {{ "eventLogs" | i18n }} - - - - {{ "resetPassword" | i18n }} - - - - {{ "restoreAccess" | i18n }} - - - - {{ "revokeAccess" | i18n }} - - - - {{ "remove" | i18n }} - -
-
-
+ + + {{ "loading" | i18n }} - - - - - - - - - + +

{{ "noUsersInList" | i18n }}

+ + + {{ "usersNeedConfirmed" | i18n }} + + + + + + + + + + + + +
+ + + + + + {{ u.email }} + {{ + "invited" | i18n + }} + {{ + "accepted" | i18n + }} + {{ + "revoked" | i18n + }} + {{ u.name }} + + + + {{ "userUsingTwoStep" | i18n }} + + + + {{ "enrolledPasswordReset" | i18n }} + + + {{ "owner" | i18n }} + {{ "admin" | i18n }} + {{ "manager" | i18n }} + {{ "user" | i18n }} + {{ "custom" | i18n }} + +
+ +
+ + + {{ "resendInvitation" | i18n }} + + + + {{ "confirm" | i18n }} + + + + {{ "groups" | i18n }} + + + + {{ "eventLogs" | i18n }} + + + + {{ "resetPassword" | i18n }} + + + + {{ "restoreAccess" | i18n }} + + + + {{ "revokeAccess" | i18n }} + + + + {{ "remove" | i18n }} + +
+
+
+ + + + + + + + + + +
diff --git a/apps/web/src/app/organizations/manage/people.component.ts b/apps/web/src/app/organizations/manage/people.component.ts index 1763e9d414e..3b32eeb7701 100644 --- a/apps/web/src/app/organizations/manage/people.component.ts +++ b/apps/web/src/app/organizations/manage/people.component.ts @@ -110,7 +110,7 @@ export class PeopleComponent } async ngOnInit() { - this.route.parent.parent.params.subscribe(async (params) => { + this.route.parent.params.subscribe(async (params) => { this.organizationId = params.organizationId; const organization = await this.organizationService.get(this.organizationId); if (!organization.canManageUsers) { diff --git a/apps/web/src/app/organizations/organization-routing.module.ts b/apps/web/src/app/organizations/organization-routing.module.ts index d820ed09bda..5110ffcba1f 100644 --- a/apps/web/src/app/organizations/organization-routing.module.ts +++ b/apps/web/src/app/organizations/organization-routing.module.ts @@ -2,28 +2,15 @@ import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; import { AuthGuard } from "@bitwarden/angular/guards/auth.guard"; -import { Permissions } from "@bitwarden/common/enums/permissions"; import { PermissionsGuard } from "./guards/permissions.guard"; import { OrganizationLayoutComponent } from "./layouts/organization-layout.component"; -import { CollectionsComponent } from "./manage/collections.component"; -import { EventsComponent } from "./manage/events.component"; import { GroupsComponent } from "./manage/groups.component"; -import { ManageComponent } from "./manage/manage.component"; import { PeopleComponent } from "./manage/people.component"; -import { PoliciesComponent } from "./manage/policies.component"; import { NavigationPermissionsService } from "./services/navigation-permissions.service"; import { AccountComponent } from "./settings/account.component"; -import { OrganizationBillingComponent } from "./settings/organization-billing.component"; -import { OrganizationSubscriptionComponent } from "./settings/organization-subscription.component"; import { SettingsComponent } from "./settings/settings.component"; import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component"; -import { ExposedPasswordsReportComponent } from "./tools/exposed-passwords-report.component"; -import { InactiveTwoFactorReportComponent } from "./tools/inactive-two-factor-report.component"; -import { ReusedPasswordsReportComponent } from "./tools/reused-passwords-report.component"; -import { ToolsComponent } from "./tools/tools.component"; -import { UnsecuredWebsitesReportComponent } from "./tools/unsecured-websites-report.component"; -import { WeakPasswordsReportComponent } from "./tools/weak-passwords-report.component"; import { VaultModule } from "./vault/vault.module"; const routes: Routes = [ @@ -40,137 +27,6 @@ const routes: Routes = [ path: "vault", loadChildren: () => VaultModule, }, - { - path: "tools", - component: ToolsComponent, - canActivate: [PermissionsGuard], - data: { permissions: NavigationPermissionsService.getPermissions("tools") }, - children: [ - { - path: "", - pathMatch: "full", - redirectTo: "import", - }, - { - path: "", - loadChildren: () => - import("./tools/import-export/org-import-export.module").then( - (m) => m.OrganizationImportExportModule - ), - }, - { - path: "exposed-passwords-report", - component: ExposedPasswordsReportComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "exposedPasswordsReport", - permissions: [Permissions.AccessReports], - }, - }, - { - path: "inactive-two-factor-report", - component: InactiveTwoFactorReportComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "inactive2faReport", - permissions: [Permissions.AccessReports], - }, - }, - { - path: "reused-passwords-report", - component: ReusedPasswordsReportComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "reusedPasswordsReport", - permissions: [Permissions.AccessReports], - }, - }, - { - path: "unsecured-websites-report", - component: UnsecuredWebsitesReportComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "unsecuredWebsitesReport", - permissions: [Permissions.AccessReports], - }, - }, - { - path: "weak-passwords-report", - component: WeakPasswordsReportComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "weakPasswordsReport", - permissions: [Permissions.AccessReports], - }, - }, - ], - }, - { - path: "manage", - component: ManageComponent, - canActivate: [PermissionsGuard], - data: { - permissions: NavigationPermissionsService.getPermissions("manage"), - }, - children: [ - { - path: "", - pathMatch: "full", - redirectTo: "people", - }, - { - path: "collections", - component: CollectionsComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "collections", - permissions: [ - Permissions.CreateNewCollections, - Permissions.EditAnyCollection, - Permissions.DeleteAnyCollection, - Permissions.EditAssignedCollections, - Permissions.DeleteAssignedCollections, - ], - }, - }, - { - path: "events", - component: EventsComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "eventLogs", - permissions: [Permissions.AccessEventLogs], - }, - }, - { - path: "groups", - component: GroupsComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "groups", - permissions: [Permissions.ManageGroups], - }, - }, - { - path: "people", - component: PeopleComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "people", - permissions: [Permissions.ManageUsers, Permissions.ManageUsersPassword], - }, - }, - { - path: "policies", - component: PoliciesComponent, - canActivate: [PermissionsGuard], - data: { - titleId: "policies", - permissions: [Permissions.ManagePolicies], - }, - }, - ], - }, { path: "settings", component: SettingsComponent, @@ -178,25 +34,44 @@ const routes: Routes = [ data: { permissions: NavigationPermissionsService.getPermissions("settings") }, children: [ { path: "", pathMatch: "full", redirectTo: "account" }, - { path: "account", component: AccountComponent, data: { titleId: "myOrganization" } }, + { path: "account", component: AccountComponent, data: { titleId: "organizationInfo" } }, { path: "two-factor", component: TwoFactorSetupComponent, data: { titleId: "twoStepLogin" }, }, - { - path: "billing", - component: OrganizationBillingComponent, - canActivate: [PermissionsGuard], - data: { titleId: "billing", permissions: [Permissions.ManageBilling] }, - }, - { - path: "subscription", - component: OrganizationSubscriptionComponent, - data: { titleId: "subscription" }, - }, ], }, + { + path: "members", + component: PeopleComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "members", + permissions: NavigationPermissionsService.getPermissions("members"), + }, + }, + { + path: "groups", + component: GroupsComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "groups", + permissions: NavigationPermissionsService.getPermissions("groups"), + }, + }, + { + path: "reporting", + loadChildren: () => + import("./reporting/organization-reporting.module").then( + (m) => m.OrganizationReportingModule + ), + }, + { + path: "billing", + loadChildren: () => + import("./billing/organization-billing.module").then((m) => m.OrganizationBillingModule), + }, ], }, ]; diff --git a/apps/web/src/app/organizations/reporting/organization-reporting-routing.module.ts b/apps/web/src/app/organizations/reporting/organization-reporting-routing.module.ts new file mode 100644 index 00000000000..d529ed3e6cc --- /dev/null +++ b/apps/web/src/app/organizations/reporting/organization-reporting-routing.module.ts @@ -0,0 +1,98 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { Permissions } from "@bitwarden/common/enums/permissions"; + +import { PermissionsGuard } from "../guards/permissions.guard"; +import { EventsComponent } from "../manage/events.component"; +import { NavigationPermissionsService } from "../services/navigation-permissions.service"; +import { ExposedPasswordsReportComponent } from "../tools/exposed-passwords-report.component"; +import { InactiveTwoFactorReportComponent } from "../tools/inactive-two-factor-report.component"; +import { ReusedPasswordsReportComponent } from "../tools/reused-passwords-report.component"; +import { UnsecuredWebsitesReportComponent } from "../tools/unsecured-websites-report.component"; +import { WeakPasswordsReportComponent } from "../tools/weak-passwords-report.component"; + +import { ReportingComponent } from "./reporting.component"; +import { ReportsHomeComponent } from "./reports-home.component"; + +const routes: Routes = [ + { + path: "", + component: ReportingComponent, + canActivate: [PermissionsGuard], + data: { permissions: NavigationPermissionsService.getPermissions("reporting") }, + children: [ + { path: "", pathMatch: "full", redirectTo: "reports" }, + { + path: "reports", + component: ReportsHomeComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "reports", + permissions: [Permissions.AccessReports], + }, + children: [ + { + path: "exposed-passwords-report", + component: ExposedPasswordsReportComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "exposedPasswordsReport", + permissions: [Permissions.AccessReports], + }, + }, + { + path: "inactive-two-factor-report", + component: InactiveTwoFactorReportComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "inactive2faReport", + permissions: [Permissions.AccessReports], + }, + }, + { + path: "reused-passwords-report", + component: ReusedPasswordsReportComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "reusedPasswordsReport", + permissions: [Permissions.AccessReports], + }, + }, + { + path: "unsecured-websites-report", + component: UnsecuredWebsitesReportComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "unsecuredWebsitesReport", + permissions: [Permissions.AccessReports], + }, + }, + { + path: "weak-passwords-report", + component: WeakPasswordsReportComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "weakPasswordsReport", + permissions: [Permissions.AccessReports], + }, + }, + ], + }, + { + path: "events", + component: EventsComponent, + canActivate: [PermissionsGuard], + data: { + titleId: "eventLogs", + permissions: [Permissions.AccessEventLogs], + }, + }, + ], + }, +]; +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class OrganizationReportingRoutingModule {} diff --git a/apps/web/src/app/organizations/reporting/organization-reporting.module.ts b/apps/web/src/app/organizations/reporting/organization-reporting.module.ts new file mode 100644 index 00000000000..846798ae01e --- /dev/null +++ b/apps/web/src/app/organizations/reporting/organization-reporting.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from "@angular/core"; + +import { ReportsSharedModule } from "../../reports"; +import { SharedModule } from "../../shared/shared.module"; + +import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module"; +import { ReportingComponent } from "./reporting.component"; +import { ReportsHomeComponent } from "./reports-home.component"; + +@NgModule({ + imports: [SharedModule, ReportsSharedModule, OrganizationReportingRoutingModule], + declarations: [ReportsHomeComponent, ReportingComponent], +}) +export class OrganizationReportingModule {} diff --git a/apps/web/src/app/organizations/reporting/reporting.component.html b/apps/web/src/app/organizations/reporting/reporting.component.html new file mode 100644 index 00000000000..975d34e76fa --- /dev/null +++ b/apps/web/src/app/organizations/reporting/reporting.component.html @@ -0,0 +1,30 @@ +
+
+
+
+
{{ "reporting" | i18n }}
+
+ + {{ "reports" | i18n }} + + + {{ "eventLogs" | i18n }} + +
+
+
+
+ +
+
+
diff --git a/apps/web/src/app/organizations/reporting/reporting.component.ts b/apps/web/src/app/organizations/reporting/reporting.component.ts new file mode 100644 index 00000000000..4173833b61a --- /dev/null +++ b/apps/web/src/app/organizations/reporting/reporting.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; + +import { OrganizationService } from "@bitwarden/common/abstractions/organization.service"; +import { Organization } from "@bitwarden/common/models/domain/organization"; + +@Component({ + selector: "app-org-reporting", + templateUrl: "reporting.component.html", +}) +export class ReportingComponent implements OnInit { + organization: Organization; + accessEvents = false; + showLeftNav = true; + + constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {} + + ngOnInit() { + this.route.parent.params.subscribe(async (params) => { + this.organization = await this.organizationService.get(params.organizationId); + this.accessEvents = this.showLeftNav = this.organization.useEvents; + }); + } +} diff --git a/apps/web/src/app/organizations/reporting/reports-home.component.html b/apps/web/src/app/organizations/reporting/reports-home.component.html new file mode 100644 index 00000000000..be5ccc5bae6 --- /dev/null +++ b/apps/web/src/app/organizations/reporting/reports-home.component.html @@ -0,0 +1,20 @@ + +
+

{{ "reports" | i18n }}

+
+ +

{{ "orgsReportsDesc" | i18n }}

+ + + + + + +
+
+ + + {{ "backToReports" | i18n }} + +
+
diff --git a/apps/web/src/app/organizations/reporting/reports-home.component.ts b/apps/web/src/app/organizations/reporting/reports-home.component.ts new file mode 100644 index 00000000000..36d6baa67d6 --- /dev/null +++ b/apps/web/src/app/organizations/reporting/reports-home.component.ts @@ -0,0 +1,65 @@ +import { Component, OnDestroy, OnInit } from "@angular/core"; +import { NavigationEnd, Router } from "@angular/router"; +import { filter, Subject, takeUntil } from "rxjs"; + +import { StateService } from "@bitwarden/common/abstractions/state.service"; + +import { ReportVariant, reports, ReportType, ReportEntry } from "../../reports"; + +@Component({ + selector: "app-org-reports-home", + templateUrl: "reports-home.component.html", +}) +export class ReportsHomeComponent implements OnInit, OnDestroy { + reports: ReportEntry[]; + + homepage = true; + private destrory$: Subject = new Subject(); + + constructor(private stateService: StateService, router: Router) { + router.events + .pipe( + takeUntil(this.destrory$), + filter((event) => event instanceof NavigationEnd) + ) + .subscribe((event) => { + this.homepage = (event as NavigationEnd).urlAfterRedirects.endsWith("/reports"); + }); + } + + async ngOnInit(): Promise { + const userHasPremium = await this.stateService.getCanAccessPremium(); + + const reportRequiresPremium = userHasPremium + ? ReportVariant.Enabled + : ReportVariant.RequiresPremium; + + this.reports = [ + { + ...reports[ReportType.ExposedPasswords], + variant: reportRequiresPremium, + }, + { + ...reports[ReportType.ReusedPasswords], + variant: reportRequiresPremium, + }, + { + ...reports[ReportType.WeakPasswords], + variant: reportRequiresPremium, + }, + { + ...reports[ReportType.UnsecuredWebsites], + variant: reportRequiresPremium, + }, + { + ...reports[ReportType.Inactive2fa], + variant: reportRequiresPremium, + }, + ]; + } + + ngOnDestroy(): void { + this.destrory$.next(); + this.destrory$.complete(); + } +} diff --git a/apps/web/src/app/organizations/services/navigation-permissions.service.ts b/apps/web/src/app/organizations/services/navigation-permissions.service.ts index cddd480cebb..c96d451614a 100644 --- a/apps/web/src/app/organizations/services/navigation-permissions.service.ts +++ b/apps/web/src/app/organizations/services/navigation-permissions.service.ts @@ -15,8 +15,11 @@ const permissions = { Permissions.ManageSso, Permissions.ManageScim, ], - tools: [Permissions.AccessImportExport, Permissions.AccessReports], - settings: [Permissions.ManageOrganization], + members: [Permissions.ManageUsers, Permissions.ManageUsersPassword], + groups: [Permissions.ManageGroups], + reporting: [Permissions.AccessReports, Permissions.AccessEventLogs], + billing: [Permissions.ManageBilling], + settings: [Permissions.ManageOrganization, Permissions.ManagePolicies, Permissions.ManageSso], }; export class NavigationPermissionsService { @@ -30,21 +33,30 @@ export class NavigationPermissionsService { static canAccessAdmin(organization: Organization): boolean { return ( - this.canAccessTools(organization) || - this.canAccessSettings(organization) || - this.canAccessManage(organization) + this.canAccessMembers(organization) || + this.canAccessGroups(organization) || + this.canAccessReporting(organization) || + this.canAccessBilling(organization) ); } - static canAccessTools(organization: Organization): boolean { - return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("tools")); + static canAccessMembers(organization: Organization): boolean { + return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("members")); + } + + static canAccessGroups(organization: Organization): boolean { + return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("groups")); + } + + static canAccessReporting(organization: Organization): boolean { + return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("reporting")); + } + + static canAccessBilling(organization: Organization): boolean { + return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("billing")); } static canAccessSettings(organization: Organization): boolean { return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("settings")); } - - static canAccessManage(organization: Organization): boolean { - return organization.hasAnyPermission(NavigationPermissionsService.getPermissions("manage")); - } } diff --git a/apps/web/src/app/organizations/settings/account.component.html b/apps/web/src/app/organizations/settings/account.component.html index 73a2f7872e7..d4c8e71bc51 100644 --- a/apps/web/src/app/organizations/settings/account.component.html +++ b/apps/web/src/app/organizations/settings/account.component.html @@ -1,5 +1,5 @@
-

{{ "myOrganization" | i18n }}

+

{{ "organizationInfo" | i18n }}

-
-

{{ "taxInformation" | i18n }}

-
-

{{ "taxInformationDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - -

{{ "dangerZone" | i18n }}

diff --git a/apps/web/src/app/organizations/settings/account.component.ts b/apps/web/src/app/organizations/settings/account.component.ts index e53f3dd1727..dc2d9581643 100644 --- a/apps/web/src/app/organizations/settings/account.component.ts +++ b/apps/web/src/app/organizations/settings/account.component.ts @@ -15,7 +15,6 @@ import { OrganizationResponse } from "@bitwarden/common/models/response/organiza import { ApiKeyComponent } from "../../settings/api-key.component"; import { PurgeVaultComponent } from "../../settings/purge-vault.component"; -import { TaxInfoComponent } from "../../settings/tax-info.component"; import { DeleteOrganizationComponent } from "./delete-organization.component"; @@ -32,7 +31,6 @@ export class AccountComponent { apiKeyModalRef: ViewContainerRef; @ViewChild("rotateApiKeyTemplate", { read: ViewContainerRef, static: true }) rotateApiKeyModalRef: ViewContainerRef; - @ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent; selfHosted = false; canManageBilling = true; @@ -40,7 +38,6 @@ export class AccountComponent { canUseApi = false; org: OrganizationResponse; formPromise: Promise; - taxFormPromise: Promise; private organizationId: string; @@ -104,12 +101,6 @@ export class AccountComponent { } } - async submitTaxInfo() { - this.taxFormPromise = this.taxInfo.submitTaxInfo(); - await this.taxFormPromise; - this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated")); - } - async deleteOrganization() { await this.modalService.openViewRef( DeleteOrganizationComponent, diff --git a/apps/web/src/app/organizations/settings/organization-billing.component.html b/apps/web/src/app/organizations/settings/organization-billing.component.html deleted file mode 100644 index ce13772296b..00000000000 --- a/apps/web/src/app/organizations/settings/organization-billing.component.html +++ /dev/null @@ -1,212 +0,0 @@ -
-

- {{ "billing" | i18n }} -

- -
- - - {{ "loading" | i18n }} - - -

{{ (isCreditBalance ? "accountCredit" : "accountBalance") | i18n }}

-

- {{ creditOrBalance | currency: "$" }} -

-

{{ "creditAppliedDesc" | i18n }}

- - - -

{{ "paymentMethod" | i18n }}

-

{{ "noPaymentMethod" | i18n }}

- - -

{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}

-
- -
-
-
$0.
-
- -
- -
-
-
$0.
-
- -
- -
- -

- - {{ "inAppPurchase" | i18n }} - {{ paymentSource.description }} -

- - - - -

{{ "invoices" | i18n }}

-

{{ "noInvoices" | i18n }}

- - - - - - - - - -
{{ i.date | date: "mediumDate" }} - - - - {{ "invoiceNumber" | i18n: i.number }} - {{ i.amount | currency: "$" }} - - - {{ "paid" | i18n }} - - - - {{ "unpaid" | i18n }} - -
-

{{ "transactions" | i18n }}

-

{{ "noTransactions" | i18n }}

- - - - - - - - - -
{{ t.createdDate | date: "mediumDate" }} - - {{ "chargeNoun" | i18n }} - - {{ "refundNoun" | i18n }} - - - {{ t.details }} - - {{ t.amount | currency: "$" }} -
- * {{ "chargesStatement" | i18n: "BITWARDEN" }} - diff --git a/apps/web/src/app/organizations/settings/organization-billing.component.ts b/apps/web/src/app/organizations/settings/organization-billing.component.ts deleted file mode 100644 index 33c36c978fa..00000000000 --- a/apps/web/src/app/organizations/settings/organization-billing.component.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { ActivatedRoute } from "@angular/router"; - -import { ApiService } from "@bitwarden/common/abstractions/api.service"; -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; -import { LogService } from "@bitwarden/common/abstractions/log.service"; -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; -import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; -import { TransactionType } from "@bitwarden/common/enums/transactionType"; -import { VerifyBankRequest } from "@bitwarden/common/models/request/verifyBankRequest"; -import { BillingResponse } from "@bitwarden/common/models/response/billingResponse"; - -@Component({ - selector: "app-org-billing", - templateUrl: "./organization-billing.component.html", -}) -export class OrganizationBillingComponent implements OnInit { - loading = false; - firstLoaded = false; - showAdjustPayment = false; - showAddCredit = false; - billing: BillingResponse; - paymentMethodType = PaymentMethodType; - transactionType = TransactionType; - organizationId: string; - verifyAmount1: number; - verifyAmount2: number; - - verifyBankPromise: Promise; - - // TODO - Make sure to properly split out the billing/invoice and payment method/account during org admin refresh - - constructor( - private apiService: ApiService, - private i18nService: I18nService, - private route: ActivatedRoute, - private platformUtilsService: PlatformUtilsService, - private logService: LogService - ) {} - - async ngOnInit() { - this.route.parent.parent.params.subscribe(async (params) => { - this.organizationId = params.organizationId; - await this.load(); - this.firstLoaded = true; - }); - } - - async load() { - if (this.loading) { - return; - } - this.loading = true; - if (this.organizationId != null) { - this.billing = await this.apiService.getOrganizationBilling(this.organizationId); - } - this.loading = false; - } - - async verifyBank() { - if (this.loading) { - return; - } - - try { - const request = new VerifyBankRequest(); - request.amount1 = this.verifyAmount1; - request.amount2 = this.verifyAmount2; - this.verifyBankPromise = this.apiService.postOrganizationVerifyBank( - this.organizationId, - request - ); - await this.verifyBankPromise; - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t("verifiedBankAccount") - ); - this.load(); - } catch (e) { - this.logService.error(e); - } - } - - addCredit() { - if (this.paymentSourceInApp) { - this.platformUtilsService.showDialog( - this.i18nService.t("cannotPerformInAppPurchase"), - this.i18nService.t("addCredit"), - null, - null, - "warning" - ); - return; - } - this.showAddCredit = true; - } - - closeAddCredit(load: boolean) { - this.showAddCredit = false; - if (load) { - this.load(); - } - } - - changePayment() { - if (this.paymentSourceInApp) { - this.platformUtilsService.showDialog( - this.i18nService.t("cannotPerformInAppPurchase"), - this.i18nService.t("changePaymentMethod"), - null, - null, - "warning" - ); - return; - } - this.showAdjustPayment = true; - } - - closePayment(load: boolean) { - this.showAdjustPayment = false; - if (load) { - this.load(); - } - } - - get isCreditBalance() { - return this.billing == null || this.billing.balance <= 0; - } - - get creditOrBalance() { - return Math.abs(this.billing != null ? this.billing.balance : 0); - } - - get paymentSource() { - return this.billing != null ? this.billing.paymentSource : null; - } - - get paymentSourceInApp() { - return ( - this.paymentSource != null && - (this.paymentSource.type === PaymentMethodType.AppleInApp || - this.paymentSource.type === PaymentMethodType.GoogleInApp) - ); - } - - get invoices() { - return this.billing != null ? this.billing.invoices : null; - } - - get transactions() { - return this.billing != null ? this.billing.transactions : null; - } -} diff --git a/apps/web/src/app/organizations/settings/settings.component.html b/apps/web/src/app/organizations/settings/settings.component.html index ad9824ef73c..4134e4391d4 100644 --- a/apps/web/src/app/organizations/settings/settings.component.html +++ b/apps/web/src/app/organizations/settings/settings.component.html @@ -5,18 +5,7 @@
{{ "settings" | i18n }}
- {{ "myOrganization" | i18n }} - - - {{ "subscription" | i18n }} - - - {{ "billing" | i18n }} + {{ "organizationInfo" | i18n }}
diff --git a/apps/web/src/app/reports/report-card/report-card.component.ts b/apps/web/src/app/reports/shared/report-card/report-card.component.ts similarity index 100% rename from apps/web/src/app/reports/report-card/report-card.component.ts rename to apps/web/src/app/reports/shared/report-card/report-card.component.ts diff --git a/apps/web/src/app/reports/report-card/report-card.stories.ts b/apps/web/src/app/reports/shared/report-card/report-card.stories.ts similarity index 88% rename from apps/web/src/app/reports/report-card/report-card.stories.ts rename to apps/web/src/app/reports/shared/report-card/report-card.stories.ts index 2ab9d8962e0..52aa46fe28a 100644 --- a/apps/web/src/app/reports/report-card/report-card.stories.ts +++ b/apps/web/src/app/reports/shared/report-card/report-card.stories.ts @@ -4,8 +4,8 @@ import { Meta, Story, moduleMetadata } from "@storybook/angular"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { BadgeModule, IconModule } from "@bitwarden/components"; -import { PremiumBadgeComponent } from "../../components/premium-badge.component"; -import { PreloadedEnglishI18nModule } from "../../tests/preloaded-english-i18n.module"; +import { PremiumBadgeComponent } from "../../../components/premium-badge.component"; +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; import { ReportVariant } from "../models/report-variant"; import { ReportCardComponent } from "./report-card.component"; diff --git a/apps/web/src/app/reports/report-list/report-list.component.html b/apps/web/src/app/reports/shared/report-list/report-list.component.html similarity index 100% rename from apps/web/src/app/reports/report-list/report-list.component.html rename to apps/web/src/app/reports/shared/report-list/report-list.component.html diff --git a/apps/web/src/app/reports/report-list/report-list.component.ts b/apps/web/src/app/reports/shared/report-list/report-list.component.ts similarity index 100% rename from apps/web/src/app/reports/report-list/report-list.component.ts rename to apps/web/src/app/reports/shared/report-list/report-list.component.ts diff --git a/apps/web/src/app/reports/report-list/report-list.stories.ts b/apps/web/src/app/reports/shared/report-list/report-list.stories.ts similarity index 84% rename from apps/web/src/app/reports/report-list/report-list.stories.ts rename to apps/web/src/app/reports/shared/report-list/report-list.stories.ts index d52621ac623..d1cadbd3562 100644 --- a/apps/web/src/app/reports/report-list/report-list.stories.ts +++ b/apps/web/src/app/reports/shared/report-list/report-list.stories.ts @@ -4,11 +4,11 @@ import { Meta, Story, moduleMetadata } from "@storybook/angular"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { BadgeModule, IconModule } from "@bitwarden/components"; -import { PremiumBadgeComponent } from "../../components/premium-badge.component"; -import { PreloadedEnglishI18nModule } from "../../tests/preloaded-english-i18n.module"; +import { PremiumBadgeComponent } from "../../../components/premium-badge.component"; +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; +import { reports } from "../../reports"; import { ReportVariant } from "../models/report-variant"; import { ReportCardComponent } from "../report-card/report-card.component"; -import { reports } from "../reports"; import { ReportListComponent } from "./report-list.component"; diff --git a/apps/web/src/app/reports/shared/reports-shared.module.ts b/apps/web/src/app/reports/shared/reports-shared.module.ts new file mode 100644 index 00000000000..1cdf4a3127b --- /dev/null +++ b/apps/web/src/app/reports/shared/reports-shared.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +import { SharedModule } from "../../shared/shared.module"; + +import { ReportCardComponent } from "./report-card/report-card.component"; +import { ReportListComponent } from "./report-list/report-list.component"; + +@NgModule({ + imports: [CommonModule, SharedModule], + declarations: [ReportCardComponent, ReportListComponent], + exports: [ReportCardComponent, ReportListComponent], +}) +export class ReportsSharedModule {} diff --git a/apps/web/src/app/settings/billing-history-view.component.html b/apps/web/src/app/settings/billing-history-view.component.html new file mode 100644 index 00000000000..2f5703ed786 --- /dev/null +++ b/apps/web/src/app/settings/billing-history-view.component.html @@ -0,0 +1,27 @@ +
+

+ {{ "billingHistory" | i18n }} +

+ +
+ + + {{ "loading" | i18n }} + + + + diff --git a/apps/web/src/app/settings/user-billing-history.component.ts b/apps/web/src/app/settings/billing-history-view.component.ts similarity index 53% rename from apps/web/src/app/settings/user-billing-history.component.ts rename to apps/web/src/app/settings/billing-history-view.component.ts index dfc3216d2fe..558ec77c717 100644 --- a/apps/web/src/app/settings/user-billing-history.component.ts +++ b/apps/web/src/app/settings/billing-history-view.component.ts @@ -2,33 +2,28 @@ import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; -import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; -import { TransactionType } from "@bitwarden/common/enums/transactionType"; import { BillingHistoryResponse } from "@bitwarden/common/models/response/billingHistoryResponse"; @Component({ - selector: "app-user-billing", - templateUrl: "user-billing-history.component.html", + selector: "app-billing-history-view", + templateUrl: "billing-history-view.component.html", }) -export class UserBillingHistoryComponent implements OnInit { +export class BillingHistoryViewComponent implements OnInit { loading = false; firstLoaded = false; billing: BillingHistoryResponse; - paymentMethodType = PaymentMethodType; - transactionType = TransactionType; constructor( - protected apiService: ApiService, - protected i18nService: I18nService, - protected platformUtilsService: PlatformUtilsService, + private apiService: ApiService, + private platformUtilsService: PlatformUtilsService, private router: Router ) {} async ngOnInit() { if (this.platformUtilsService.isSelfHost()) { this.router.navigate(["/settings/subscription"]); + return; } await this.load(); this.firstLoaded = true; @@ -42,12 +37,4 @@ export class UserBillingHistoryComponent implements OnInit { this.billing = await this.apiService.getUserBillingHistory(); this.loading = false; } - - get invoices() { - return this.billing != null ? this.billing.invoices : null; - } - - get transactions() { - return this.billing != null ? this.billing.transactions : null; - } } diff --git a/apps/web/src/app/settings/billing-history.component.html b/apps/web/src/app/settings/billing-history.component.html new file mode 100644 index 00000000000..27fd038a3b5 --- /dev/null +++ b/apps/web/src/app/settings/billing-history.component.html @@ -0,0 +1,65 @@ +

{{ "invoices" | i18n }}

+

{{ "noInvoices" | i18n }}

+ + + + + + + + + +
{{ i.date | date: "mediumDate" }} + + + + {{ "invoiceNumber" | i18n: i.number }} + {{ i.amount | currency: "$" }} + + + {{ "paid" | i18n }} + + + + {{ "unpaid" | i18n }} + +
+

{{ "transactions" | i18n }}

+

{{ "noTransactions" | i18n }}

+ + + + + + + + + +
{{ t.createdDate | date: "mediumDate" }} + + {{ "chargeNoun" | i18n }} + + {{ "refundNoun" | i18n }} + + + {{ t.details }} + + {{ t.amount | currency: "$" }} +
+* {{ "chargesStatement" | i18n: "BITWARDEN" }} diff --git a/apps/web/src/app/settings/billing-history.component.ts b/apps/web/src/app/settings/billing-history.component.ts new file mode 100644 index 00000000000..70277f33ca5 --- /dev/null +++ b/apps/web/src/app/settings/billing-history.component.ts @@ -0,0 +1,41 @@ +import { Component, Input } from "@angular/core"; + +import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; +import { TransactionType } from "@bitwarden/common/enums/transactionType"; +import { BillingHistoryResponse } from "@bitwarden/common/models/response/billingHistoryResponse"; + +@Component({ + selector: "app-billing-history", + templateUrl: "billing-history.component.html", +}) +export class BillingHistoryComponent { + @Input() + billing: BillingHistoryResponse; + + paymentMethodType = PaymentMethodType; + transactionType = TransactionType; + + get invoices() { + return this.billing != null ? this.billing.invoices : null; + } + + get transactions() { + return this.billing != null ? this.billing.transactions : null; + } + + paymentMethodClasses(type: PaymentMethodType) { + switch (type) { + case PaymentMethodType.Card: + return ["bwi-credit-card"]; + case PaymentMethodType.BankAccount: + case PaymentMethodType.WireTransfer: + return ["bwi-bank"]; + case PaymentMethodType.BitPay: + return ["bwi-bitcoin text-warning"]; + case PaymentMethodType.PayPal: + return ["bwi-paypal text-primary"]; + default: + return []; + } + } +} diff --git a/apps/web/src/app/settings/payment-method.component.html b/apps/web/src/app/settings/payment-method.component.html index bae22bf4cf0..fa80027dd8b 100644 --- a/apps/web/src/app/settings/payment-method.component.html +++ b/apps/web/src/app/settings/payment-method.component.html @@ -1,4 +1,4 @@ -
+

{{ "paymentMethod" | i18n }}

@@ -40,18 +40,48 @@

{{ "paymentMethod" | i18n }}

{{ "noPaymentMethod" | i18n }}

+ +

{{ "verifyBankAccountDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}

+
+ + {{ "amountX" | i18n: "1" }} + + $0. + + + {{ "amountX" | i18n: "2" }} + + $0. + + +
+

- + {{ "inAppPurchase" | i18n }} {{ paymentSource.description }}

@@ -66,4 +96,35 @@ *ngIf="showAdjustPayment" > + +

{{ "taxInformation" | i18n }}

+

{{ "taxInformationDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + +
+ diff --git a/apps/web/src/app/settings/payment-method.component.ts b/apps/web/src/app/settings/payment-method.component.ts index 2cf9a179112..7ec86b37c66 100644 --- a/apps/web/src/app/settings/payment-method.component.ts +++ b/apps/web/src/app/settings/payment-method.component.ts @@ -1,37 +1,72 @@ -import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { Component, OnInit, ViewChild } from "@angular/core"; +import { FormBuilder, FormControl, Validators } from "@angular/forms"; +import { ActivatedRoute, Router } from "@angular/router"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { LogService } from "@bitwarden/common/abstractions/log.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; +import { VerifyBankRequest } from "@bitwarden/common/models/request/verifyBankRequest"; import { BillingPaymentResponse } from "@bitwarden/common/models/response/billingPaymentResponse"; +import { OrganizationResponse } from "@bitwarden/common/models/response/organizationResponse"; + +import { TaxInfoComponent } from "./tax-info.component"; @Component({ selector: "app-payment-method", templateUrl: "payment-method.component.html", }) export class PaymentMethodComponent implements OnInit { + @ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent; + loading = false; firstLoaded = false; showAdjustPayment = false; showAddCredit = false; billing: BillingPaymentResponse; + org: OrganizationResponse; paymentMethodType = PaymentMethodType; + organizationId: string; + + verifyBankPromise: Promise; + taxFormPromise: Promise; + + verifyBankForm = this.formBuilder.group({ + amount1: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + amount2: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + }); constructor( protected apiService: ApiService, protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService, - private router: Router + private router: Router, + private logService: LogService, + private route: ActivatedRoute, + private formBuilder: FormBuilder ) {} async ngOnInit() { - if (this.platformUtilsService.isSelfHost()) { - this.router.navigate(["/settings/subscription"]); - } - await this.load(); - this.firstLoaded = true; + this.route.params.subscribe(async (params) => { + if (params.organizationId) { + this.organizationId = params.organizationId; + } else if (this.platformUtilsService.isSelfHost()) { + this.router.navigate(["/settings/subscription"]); + return; + } + + await this.load(); + this.firstLoaded = true; + }); } async load() { @@ -39,7 +74,16 @@ export class PaymentMethodComponent implements OnInit { return; } this.loading = true; - this.billing = await this.apiService.getUserBillingPayment(); + + if (this.forOrganization) { + const billingPromise = this.apiService.getOrganizationBilling(this.organizationId); + const orgPromise = this.apiService.getOrganization(this.organizationId); + + [this.billing, this.org] = await Promise.all([billingPromise, orgPromise]); + } else { + this.billing = await this.apiService.getUserBillingPayment(); + } + this.loading = false; } @@ -85,6 +129,37 @@ export class PaymentMethodComponent implements OnInit { } } + async verifyBank() { + if (this.loading || !this.forOrganization) { + return; + } + + try { + const request = new VerifyBankRequest(); + request.amount1 = this.verifyBankForm.value.amount1; + request.amount2 = this.verifyBankForm.value.amount2; + this.verifyBankPromise = this.apiService.postOrganizationVerifyBank( + this.organizationId, + request + ); + await this.verifyBankPromise; + this.platformUtilsService.showToast( + "success", + null, + this.i18nService.t("verifiedBankAccount") + ); + this.load(); + } catch (e) { + this.logService.error(e); + } + } + + async submitTaxInfo() { + this.taxFormPromise = this.taxInfo.submitTaxInfo(); + await this.taxFormPromise; + this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated")); + } + get isCreditBalance() { return this.billing == null || this.billing.balance <= 0; } @@ -97,6 +172,36 @@ export class PaymentMethodComponent implements OnInit { return this.billing != null ? this.billing.paymentSource : null; } + get forOrganization() { + return this.organizationId != null; + } + + get headerClass() { + return this.forOrganization ? ["page-header"] : ["tabbed-header"]; + } + + get paymentSourceClasses() { + if (this.paymentSource == null) { + return []; + } + switch (this.paymentSource.type) { + case PaymentMethodType.Card: + return ["bwi-credit-card"]; + case PaymentMethodType.BankAccount: + return ["bwi-bank"]; + case PaymentMethodType.Check: + return ["bwi-money"]; + case PaymentMethodType.AppleInApp: + return ["bwi-apple text-muted"]; + case PaymentMethodType.GoogleInApp: + return ["bwi-google text-muted"]; + case PaymentMethodType.PayPal: + return ["bwi-paypal text-primary"]; + default: + return []; + } + } + get paymentSourceInApp() { return ( this.paymentSource != null && diff --git a/apps/web/src/app/settings/subscription-routing.module.ts b/apps/web/src/app/settings/subscription-routing.module.ts index ae1e58cb160..7d83026d2d8 100644 --- a/apps/web/src/app/settings/subscription-routing.module.ts +++ b/apps/web/src/app/settings/subscription-routing.module.ts @@ -1,10 +1,10 @@ import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; +import { BillingHistoryViewComponent } from "./billing-history-view.component"; import { PaymentMethodComponent } from "./payment-method.component"; import { PremiumComponent } from "./premium.component"; import { SubscriptionComponent } from "./subscription.component"; -import { UserBillingHistoryComponent } from "./user-billing-history.component"; import { UserSubscriptionComponent } from "./user-subscription.component"; const routes: Routes = [ @@ -31,7 +31,7 @@ const routes: Routes = [ }, { path: "billing-history", - component: UserBillingHistoryComponent, + component: BillingHistoryViewComponent, data: { titleId: "billingHistory" }, }, ], diff --git a/apps/web/src/app/settings/user-billing-history.component.html b/apps/web/src/app/settings/user-billing-history.component.html deleted file mode 100644 index 804830c84ed..00000000000 --- a/apps/web/src/app/settings/user-billing-history.component.html +++ /dev/null @@ -1,98 +0,0 @@ -
-

- {{ "billingHistory" | i18n }} -

- -
- - - {{ "loading" | i18n }} - - -

{{ "invoices" | i18n }}

-

{{ "noInvoices" | i18n }}

- - - - - - - - - -
{{ i.date | date: "mediumDate" }} - - - - {{ "invoiceNumber" | i18n: i.number }} - {{ i.amount | currency: "$" }} - - - {{ "paid" | i18n }} - - - - {{ "unpaid" | i18n }} - -
-

{{ "transactions" | i18n }}

-

{{ "noTransactions" | i18n }}

- - - - - - - - - -
{{ t.createdDate | date: "mediumDate" }} - - {{ "chargeNoun" | i18n }} - - {{ "refundNoun" | i18n }} - - - {{ t.details }} - - {{ t.amount | currency: "$" }} -
- * {{ "chargesStatement" | i18n: "BITWARDEN" }} - diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index a9f6369a3dd..f253df0d0a1 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -59,13 +59,10 @@ import { SingleOrgPolicyComponent } from "../organizations/policies/single-org.c import { TwoFactorAuthenticationPolicyComponent } from "../organizations/policies/two-factor-authentication.component"; import { AccountComponent as OrgAccountComponent } from "../organizations/settings/account.component"; import { AdjustSubscription } from "../organizations/settings/adjust-subscription.component"; -import { BillingSyncApiKeyComponent } from "../organizations/settings/billing-sync-api-key.component"; import { ChangePlanComponent } from "../organizations/settings/change-plan.component"; import { DeleteOrganizationComponent } from "../organizations/settings/delete-organization.component"; import { DownloadLicenseComponent } from "../organizations/settings/download-license.component"; import { ImageSubscriptionHiddenComponent as OrgSubscriptionHiddenComponent } from "../organizations/settings/image-subscription-hidden.component"; -import { OrganizationBillingComponent } from "../organizations/settings/organization-billing.component"; -import { OrganizationSubscriptionComponent } from "../organizations/settings/organization-subscription.component"; import { SettingsComponent as OrgSettingComponent } from "../organizations/settings/settings.component"; import { TwoFactorSetupComponent as OrgTwoFactorSetupComponent } from "../organizations/settings/two-factor-setup.component"; import { AcceptFamilySponsorshipComponent } from "../organizations/sponsorships/accept-family-sponsorship.component"; @@ -89,6 +86,8 @@ import { AddCreditComponent } from "../settings/add-credit.component"; import { AdjustPaymentComponent } from "../settings/adjust-payment.component"; import { AdjustStorageComponent } from "../settings/adjust-storage.component"; import { ApiKeyComponent } from "../settings/api-key.component"; +import { BillingHistoryViewComponent } from "../settings/billing-history-view.component"; +import { BillingHistoryComponent } from "../settings/billing-history.component"; import { BillingSyncKeyComponent } from "../settings/billing-sync-key.component"; import { ChangeEmailComponent } from "../settings/change-email.component"; import { ChangeKdfComponent } from "../settings/change-kdf.component"; @@ -128,7 +127,6 @@ import { TwoFactorWebAuthnComponent } from "../settings/two-factor-webauthn.comp import { TwoFactorYubiKeyComponent } from "../settings/two-factor-yubikey.component"; import { UpdateKeyComponent } from "../settings/update-key.component"; import { UpdateLicenseComponent } from "../settings/update-license.component"; -import { UserBillingHistoryComponent } from "../settings/user-billing-history.component"; import { UserSubscriptionComponent } from "../settings/user-subscription.component"; import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component"; import { VerifyEmailComponent } from "../settings/verify-email.component"; @@ -177,7 +175,6 @@ import { SharedModule } from "."; AdjustSubscription, ApiKeyComponent, AttachmentsComponent, - BillingSyncApiKeyComponent, BillingSyncKeyComponent, BulkActionsComponent, BulkDeleteComponent, @@ -216,10 +213,8 @@ import { SharedModule } from "."; OrganizationSwitcherComponent, OrgAccountComponent, OrgAddEditComponent, - OrganizationBillingComponent, OrganizationLayoutComponent, OrganizationPlansComponent, - OrganizationSubscriptionComponent, OrgAttachmentsComponent, OrgBulkConfirmComponent, OrgBulkRestoreRevokeComponent, @@ -299,7 +294,8 @@ import { SharedModule } from "."; UpdateLicenseComponent, UpdatePasswordComponent, UpdateTempPasswordComponent, - UserBillingHistoryComponent, + BillingHistoryComponent, + BillingHistoryViewComponent, UserLayoutComponent, UserSubscriptionComponent, UserVerificationComponent, @@ -360,10 +356,8 @@ import { SharedModule } from "."; OrganizationSwitcherComponent, OrgAccountComponent, OrgAddEditComponent, - OrganizationBillingComponent, OrganizationLayoutComponent, OrganizationPlansComponent, - OrganizationSubscriptionComponent, OrgAttachmentsComponent, OrgBulkConfirmComponent, OrgBulkRestoreRevokeComponent, @@ -442,7 +436,8 @@ import { SharedModule } from "."; UpdateLicenseComponent, UpdatePasswordComponent, UpdateTempPasswordComponent, - UserBillingHistoryComponent, + BillingHistoryComponent, + BillingHistoryViewComponent, UserLayoutComponent, UserSubscriptionComponent, UserVerificationComponent, diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 342948bb515..7db6a1911cb 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -14,6 +14,7 @@ import { FormFieldModule, SubmitButtonModule, MenuModule, + TabsModule, IconModule, } from "@bitwarden/components"; @@ -46,6 +47,7 @@ import "./locales"; FormFieldModule, SubmitButtonModule, IconModule, + TabsModule, ], exports: [ CommonModule, @@ -65,6 +67,7 @@ import "./locales"; FormFieldModule, SubmitButtonModule, IconModule, + TabsModule, ], providers: [DatePipe], bootstrap: [], diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 71f3bd7b8f6..bf8b44c8508 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -1481,6 +1481,10 @@ "message": "Identify and close security gaps in your online accounts by clicking the reports below.", "description": "Vault Health Reports can be used to evaluate the security of your Bitwarden Personal or Organization Vault." }, + "orgsReportsDesc": { + "message": "Identify and close security gaps in your organization's accounts by clicking the reports below.", + "description": "Vault Health Reports can be used to evaluate the security of your Bitwarden Personal or Organization Vault." + }, "unsecuredWebsitesReport": { "message": "Unsecure Websites" }, @@ -2925,6 +2929,9 @@ "myOrganization": { "message": "My Organization" }, + "organizationInfo": { + "message": "Organization Info" + }, "deleteOrganization": { "message": "Delete Organization" }, @@ -5304,6 +5311,12 @@ "on": { "message": "On" }, + "members": { + "message": "Members" + }, + "reporting": { + "message": "Reporting" + }, "cardBrandMir": { "message": "Mir" }, diff --git a/libs/common/src/models/response/billingResponse.ts b/libs/common/src/models/response/billingResponse.ts index 8d09cf9311d..a98434a25e6 100644 --- a/libs/common/src/models/response/billingResponse.ts +++ b/libs/common/src/models/response/billingResponse.ts @@ -23,6 +23,10 @@ export class BillingResponse extends BaseResponse { this.invoices = invoices.map((i: any) => new BillingInvoiceResponse(i)); } } + + get hasNoHistory() { + return this.invoices.length == 0 && this.transactions.length == 0; + } } export class BillingSourceResponse extends BaseResponse { diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index 0ebf0e309a1..820f132dd3b 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -78,6 +78,9 @@ module.exports = { "50vw": "50vw", "75vw": "75vw", }, + maxWidth: ({ theme }) => ({ + ...theme("width"), + }), }, }, plugins: [],