diff --git a/apps/web/.eslintrc.json b/apps/web/.eslintrc.json index 6c519d70ae..69dae5e732 100644 --- a/apps/web/.eslintrc.json +++ b/apps/web/.eslintrc.json @@ -10,6 +10,8 @@ "**/app/core/*", "**/reports/*", "**/app/shared/*", + "**/organizations/settings/*", + "**/organizations/policies/*", "@bitwarden/web-vault/*", "src/**/*" ], diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index b1700a8551..9bd0fda6fc 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -27,15 +27,17 @@ import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.ab import { VaultTimeoutService } from "@bitwarden/common/abstractions/vaultTimeout/vaultTimeout.service"; import { PolicyListService, RouterService } from "./core"; -import { DisableSendPolicy } from "./organizations/policies/disable-send.component"; -import { MasterPasswordPolicy } from "./organizations/policies/master-password.component"; -import { PasswordGeneratorPolicy } from "./organizations/policies/password-generator.component"; -import { PersonalOwnershipPolicy } from "./organizations/policies/personal-ownership.component"; -import { RequireSsoPolicy } from "./organizations/policies/require-sso.component"; -import { ResetPasswordPolicy } from "./organizations/policies/reset-password.component"; -import { SendOptionsPolicy } from "./organizations/policies/send-options.component"; -import { SingleOrgPolicy } from "./organizations/policies/single-org.component"; -import { TwoFactorAuthenticationPolicy } from "./organizations/policies/two-factor-authentication.component"; +import { + DisableSendPolicy, + MasterPasswordPolicy, + PasswordGeneratorPolicy, + PersonalOwnershipPolicy, + RequireSsoPolicy, + ResetPasswordPolicy, + SendOptionsPolicy, + SingleOrgPolicy, + TwoFactorAuthenticationPolicy, +} from "./organizations/policies"; const BroadcasterSubscriptionId = "AppComponent"; const IdleTimeout = 60000 * 10; // 10 minutes diff --git a/apps/web/src/app/core/event.service.ts b/apps/web/src/app/core/event.service.ts index 6205418810..4c4e488ff0 100644 --- a/apps/web/src/app/core/event.service.ts +++ b/apps/web/src/app/core/event.service.ts @@ -479,16 +479,14 @@ export class EventService implements OnInit, OnDestroy { private formatGroupId(ev: EventResponse) { const shortId = this.getShortId(ev.groupId); const a = this.makeAnchor(shortId); - a.setAttribute( - "href", - "#/organizations/" + ev.organizationId + "/manage/groups?search=" + shortId - ); + a.setAttribute("href", "#/organizations/" + ev.organizationId + "/groups?search=" + shortId); return a.outerHTML; } private formatCollectionId(ev: EventResponse) { const shortId = this.getShortId(ev.collectionId); const a = this.makeAnchor(shortId); + // TODO: Update view/edit collection link after EC-14 is completed a.setAttribute( "href", "#/organizations/" + ev.organizationId + "/manage/collections?search=" + shortId @@ -503,7 +501,7 @@ export class EventService implements OnInit, OnDestroy { "href", "#/organizations/" + ev.organizationId + - "/manage/people?search=" + + "/members?search=" + shortId + "&viewEvents=" + ev.organizationUserId diff --git a/apps/web/src/app/core/policy-list.service.ts b/apps/web/src/app/core/policy-list.service.ts index 70857ef819..bb20700690 100644 --- a/apps/web/src/app/core/policy-list.service.ts +++ b/apps/web/src/app/core/policy-list.service.ts @@ -1,4 +1,4 @@ -import { BasePolicy } from "../organizations/policies/base-policy.component"; +import { BasePolicy } from "../organizations/policies"; export class PolicyListService { private policies: BasePolicy[] = []; diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.html b/apps/web/src/app/organizations/billing/adjust-subscription.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.html rename to apps/web/src/app/organizations/billing/adjust-subscription.component.html diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.ts b/apps/web/src/app/organizations/billing/adjust-subscription.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.ts rename to apps/web/src/app/organizations/billing/adjust-subscription.component.ts 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/settings/change-plan.component.html b/apps/web/src/app/organizations/billing/change-plan.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.html rename to apps/web/src/app/organizations/billing/change-plan.component.html diff --git a/apps/web/src/app/organizations/settings/change-plan.component.ts b/apps/web/src/app/organizations/billing/change-plan.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.ts rename to apps/web/src/app/organizations/billing/change-plan.component.ts diff --git a/apps/web/src/app/organizations/settings/download-license.component.html b/apps/web/src/app/organizations/billing/download-license.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.html rename to apps/web/src/app/organizations/billing/download-license.component.html diff --git a/apps/web/src/app/organizations/settings/download-license.component.ts b/apps/web/src/app/organizations/billing/download-license.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.ts rename to apps/web/src/app/organizations/billing/download-license.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 0000000000..6622245ad1 --- /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 0000000000..c352bb83f1 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts @@ -0,0 +1,51 @@ +import { Component, OnDestroy, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; +import { concatMap, Subject, takeUntil } from "rxjs"; + +import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction"; +import { BillingHistoryResponse } from "@bitwarden/common/models/response/billing-history.response"; + +@Component({ + selector: "app-org-billing-history-view", + templateUrl: "organization-billing-history-view.component.html", +}) +export class OrgBillingHistoryViewComponent implements OnInit, OnDestroy { + loading = false; + firstLoaded = false; + billing: BillingHistoryResponse; + organizationId: string; + + private destroy$ = new Subject(); + + constructor( + private organizationApiService: OrganizationApiServiceAbstraction, + private route: ActivatedRoute + ) {} + + async ngOnInit() { + this.route.params + .pipe( + concatMap(async (params) => { + this.organizationId = params.organizationId; + await this.load(); + this.firstLoaded = true; + }), + takeUntil(this.destroy$) + ) + .subscribe(); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + + async load() { + if (this.loading) { + return; + } + this.loading = true; + this.billing = await this.organizationApiService.getBilling(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 0000000000..0e410d9734 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-routing.module.ts @@ -0,0 +1,48 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { canAccessBillingTab } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; + +import { PaymentMethodComponent } from "../../settings/payment-method.component"; +import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard"; + +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: [OrganizationPermissionsGuard], + data: { organizationPermissions: canAccessBillingTab }, + children: [ + { path: "", pathMatch: "full", redirectTo: "subscription" }, + { + path: "subscription", + component: OrganizationSubscriptionComponent, + data: { titleId: "subscription" }, + }, + { + path: "payment-method", + component: PaymentMethodComponent, + data: { + titleId: "paymentMethod", + }, + }, + { + path: "history", + component: OrgBillingHistoryViewComponent, + data: { + titleId: "billingHistory", + }, + }, + ], + }, +]; + +@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 0000000000..7f755fccbb --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-tab.component.html @@ -0,0 +1,33 @@ +
+
+
+
+
{{ "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 0000000000..5eb207dee9 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-tab.component.ts @@ -0,0 +1,14 @@ +import { Component } from "@angular/core"; + +import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; + +@Component({ + selector: "app-org-billing-tab", + templateUrl: "organization-billing-tab.component.html", +}) +export class OrganizationBillingTabComponent { + showPaymentAndHistory: boolean; + constructor(private platformUtilsService: PlatformUtilsService) { + this.showPaymentAndHistory = !this.platformUtilsService.isSelfHost(); + } +} 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 0000000000..513b7ba766 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule, SharedModule } from "../../shared"; + +import { AdjustSubscription } from "./adjust-subscription.component"; +import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component"; +import { ChangePlanComponent } from "./change-plan.component"; +import { DownloadLicenseComponent } from "./download-license.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: [ + AdjustSubscription, + BillingSyncApiKeyComponent, + ChangePlanComponent, + DownloadLicenseComponent, + 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 93% rename from apps/web/src/app/organizations/settings/organization-subscription.component.ts rename to apps/web/src/app/organizations/billing/organization-subscription.component.ts index dbcdfd907a..803be05097 100644 --- a/apps/web/src/app/organizations/settings/organization-subscription.component.ts +++ b/apps/web/src/app/organizations/billing/organization-subscription.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; +import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; +import { concatMap, Subject, takeUntil } from "rxjs"; import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref"; import { ModalService } from "@bitwarden/angular/services/modal.service"; @@ -27,17 +28,13 @@ import { SubscriptionHiddenIcon } from "./subscription-hidden.icon"; selector: "app-org-subscription", templateUrl: "organization-subscription.component.html", }) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class OrganizationSubscriptionComponent implements OnInit { +export class OrganizationSubscriptionComponent implements OnInit, OnDestroy { @ViewChild("setupBillingSyncTemplate", { read: ViewContainerRef, static: true }) setupBillingSyncModalRef: ViewContainerRef; loading = false; firstLoaded = false; organizationId: string; - adjustSeatsAdd = true; - showAdjustSeats = false; - showAdjustSeatAutoscale = false; adjustStorageAdd = true; showAdjustStorage = false; showUpdateLicense = false; @@ -61,6 +58,8 @@ export class OrganizationSubscriptionComponent implements OnInit { subscriptionHiddenIcon = SubscriptionHiddenIcon; + private destroy$ = new Subject(); + constructor( private apiService: ApiService, private platformUtilsService: PlatformUtilsService, @@ -76,19 +75,27 @@ export class OrganizationSubscriptionComponent implements OnInit { } async ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.parent.params.subscribe(async (params) => { - this.organizationId = params.organizationId; - await this.load(); - this.firstLoaded = true; - }); + this.route.params + .pipe( + concatMap(async (params) => { + this.organizationId = params.organizationId; + await this.load(); + this.firstLoaded = true; + }), + takeUntil(this.destroy$) + ) + .subscribe(); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); } async load() { if (this.loading) { return; } - this.loading = true; this.userOrg = this.organizationService.get(this.organizationId); if (this.userOrg.canManageBilling) { @@ -175,7 +182,7 @@ export class OrganizationSubscriptionComponent implements OnInit { this.showChangePlan = !this.showChangePlan; } - closeChangePlan(changed: boolean) { + closeChangePlan() { this.showChangePlan = false; } @@ -192,10 +199,14 @@ export class OrganizationSubscriptionComponent implements OnInit { comp.hasBillingToken = this.hasBillingSyncToken; } ); - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - ref.onClosed.subscribe(async () => { - await this.load(); - }); + ref.onClosed + .pipe( + concatMap(async () => { + await this.load(); + }), + takeUntil(this.destroy$) + ) + .subscribe(); } closeDownloadLicense() { diff --git a/apps/web/src/app/organizations/settings/subscription-hidden.icon.ts b/apps/web/src/app/organizations/billing/subscription-hidden.icon.ts similarity index 100% rename from apps/web/src/app/organizations/settings/subscription-hidden.icon.ts rename to apps/web/src/app/organizations/billing/subscription-hidden.icon.ts diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.html b/apps/web/src/app/organizations/components/access-selector/access-selector.component.html new file mode 100644 index 0000000000..10390b3e05 --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.component.html @@ -0,0 +1,136 @@ +
+ + {{ "permission" | i18n }} + + + + + {{ selectorLabelText }} + + {{ selectorHelpText }} + +
+ + + + + {{ columnHeader }} + + {{ "permission" | i18n }} + + {{ "role" | i18n }} + {{ "group" | i18n }} + + + + + + +
+ +
+
+ {{ item.labelName }} + + {{ "invited" | i18n }} + +
+
{{ item.email }}
+
+
+ +
+ + {{ item.labelName }} +
+ + + + + + + + + +
+ {{ "canEdit" | i18n }} + +
+ +
+ {{ permissionLabelId(item.readonlyPermission) | i18n }} +
+ + + + + {{ item.role | userType: "-" }} + + + + {{ item.viaGroupName ?? "-" }} + + + + + + + + {{ emptySelectionText }} + + + diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts b/apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts new file mode 100644 index 0000000000..3b2ba911aa --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts @@ -0,0 +1,250 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType"; +import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType"; +import { + AvatarModule, + BadgeModule, + ButtonModule, + FormFieldModule, + IconButtonModule, + TableModule, + TabsModule, +} from "@bitwarden/components"; +import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view"; + +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; + +import { AccessSelectorComponent, PermissionMode } from "./access-selector.component"; +import { AccessItemType, CollectionPermission } from "./access-selector.models"; +import { UserTypePipe } from "./user-type.pipe"; + +/** + * Helper class that makes it easier to test the AccessSelectorComponent by + * exposing some protected methods/properties + */ +class TestableAccessSelectorComponent extends AccessSelectorComponent { + selectItems(items: SelectItemView[]) { + super.selectItems(items); + } + deselectItem(id: string) { + this.selectionList.deselectItem(id); + } + + /** + * Helper used to simulate a user selecting a new permission for a table row + * @param index - "Row" index + * @param perm - The new permission value + */ + changeSelectedItemPerm(index: number, perm: CollectionPermission) { + this.selectionList.formArray.at(index).patchValue({ + permission: perm, + }); + } +} + +describe("AccessSelectorComponent", () => { + let component: TestableAccessSelectorComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + ButtonModule, + FormFieldModule, + AvatarModule, + BadgeModule, + ReactiveFormsModule, + FormsModule, + TabsModule, + TableModule, + PreloadedEnglishI18nModule, + JslibModule, + IconButtonModule, + ], + declarations: [TestableAccessSelectorComponent, UserTypePipe], + providers: [], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestableAccessSelectorComponent); + component = fixture.componentInstance; + + component.emptySelectionText = "Nothing selected"; + + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + describe("item selection", () => { + beforeEach(() => { + component.items = [ + { + id: "123", + type: AccessItemType.Group, + labelName: "Group 1", + listName: "Group 1", + }, + ]; + fixture.detectChanges(); + }); + + it("should show the empty row when nothing is selected", () => { + const emptyTableCell = fixture.nativeElement.querySelector("tbody tr td"); + expect(emptyTableCell?.textContent).toEqual("Nothing selected"); + }); + + it("should show one row when one value is selected", () => { + component.selectItems([{ id: "123" } as any]); + fixture.detectChanges(); + const firstColSpan = fixture.nativeElement.querySelector("tbody tr td span"); + expect(firstColSpan.textContent).toEqual("Group 1"); + }); + + it("should emit value change when a value is selected", () => { + // Arrange + const mockChange = jest.fn(); + component.registerOnChange(mockChange); + component.permissionMode = PermissionMode.Edit; + + // Act + component.selectItems([{ id: "123" } as any]); + + // Assert + expect(mockChange.mock.calls.length).toEqual(1); + expect(mockChange.mock.lastCall[0]).toHaveProperty("[0].id", "123"); + }); + + it("should emit value change when a row is modified", () => { + // Arrange + const mockChange = jest.fn(); + component.permissionMode = PermissionMode.Edit; + component.selectItems([{ id: "123" } as any]); + component.registerOnChange(mockChange); // Register change listener after setup + + // Act + component.changeSelectedItemPerm(0, CollectionPermission.Edit); + + // Assert + expect(mockChange.mock.calls.length).toEqual(1); + expect(mockChange.mock.lastCall[0]).toHaveProperty("[0].id", "123"); + expect(mockChange.mock.lastCall[0]).toHaveProperty( + "[0].permission", + CollectionPermission.Edit + ); + }); + + it("should emit value change when a row is removed", () => { + // Arrange + const mockChange = jest.fn(); + component.permissionMode = PermissionMode.Edit; + component.selectItems([{ id: "123" } as any]); + component.registerOnChange(mockChange); // Register change listener after setup + + // Act + component.deselectItem("123"); + + // Assert + expect(mockChange.mock.calls.length).toEqual(1); + expect(mockChange.mock.lastCall[0].length).toEqual(0); + }); + + it("should emit permission values when in edit mode", () => { + // Arrange + const mockChange = jest.fn(); + component.registerOnChange(mockChange); + component.permissionMode = PermissionMode.Edit; + + // Act + component.selectItems([{ id: "123" } as any]); + + // Assert + expect(mockChange.mock.calls.length).toEqual(1); + expect(mockChange.mock.lastCall[0]).toHaveProperty("[0].id", "123"); + expect(mockChange.mock.lastCall[0]).toHaveProperty("[0].permission"); + }); + + it("should not emit permission values when not in edit mode", () => { + // Arrange + const mockChange = jest.fn(); + component.registerOnChange(mockChange); + component.permissionMode = PermissionMode.Hidden; + + // Act + component.selectItems([{ id: "123" } as any]); + + // Assert + expect(mockChange.mock.calls.length).toEqual(1); + expect(mockChange.mock.lastCall[0]).toHaveProperty("[0].id", "123"); + expect(mockChange.mock.lastCall[0]).not.toHaveProperty("[0].permission"); + }); + }); + + describe("column rendering", () => { + beforeEach(() => { + component.items = [ + { + id: "g1", + type: AccessItemType.Group, + labelName: "Group 1", + listName: "Group 1", + }, + { + id: "m1", + type: AccessItemType.Member, + labelName: "Member 1", + listName: "Member 1 (member1@email.com)", + email: "member1@email.com", + role: OrganizationUserType.Manager, + status: OrganizationUserStatusType.Confirmed, + }, + ]; + fixture.detectChanges(); + }); + + test.each([true, false])("should show the role column when enabled", (columnEnabled) => { + // Act + component.showMemberRoles = columnEnabled; + fixture.detectChanges(); + + // Assert + const colHeading = fixture.nativeElement.querySelector("#roleColHeading"); + expect(!!colHeading).toEqual(columnEnabled); + }); + + test.each([true, false])("should show the group column when enabled", (columnEnabled) => { + // Act + component.showGroupColumn = columnEnabled; + fixture.detectChanges(); + + // Assert + const colHeading = fixture.nativeElement.querySelector("#groupColHeading"); + expect(!!colHeading).toEqual(columnEnabled); + }); + + const permissionColumnCases = [ + [PermissionMode.Hidden, false], + [PermissionMode.Edit, true], + [PermissionMode.Readonly, true], + ]; + + test.each(permissionColumnCases)( + "should show the permission column when enabled", + (mode: PermissionMode, shouldShowColumn) => { + // Act + component.permissionMode = mode; + fixture.detectChanges(); + + // Assert + const colHeading = fixture.nativeElement.querySelector("#permissionColHeading"); + expect(!!colHeading).toEqual(shouldShowColumn); + } + ); + }); +}); diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.ts b/apps/web/src/app/organizations/components/access-selector/access-selector.component.ts new file mode 100644 index 0000000000..98a49d5c3a --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.component.ts @@ -0,0 +1,290 @@ +import { Component, forwardRef, Input, OnDestroy, OnInit } from "@angular/core"; +import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from "@angular/forms"; +import { Subject, takeUntil } from "rxjs"; + +import { FormSelectionList } from "@bitwarden/angular/utils/form-selection-list"; +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view"; + +import { + AccessItemType, + AccessItemValue, + AccessItemView, + CollectionPermission, +} from "./access-selector.models"; + +export enum PermissionMode { + /** + * No permission controls or column present. No permission values are emitted. + */ + Hidden = "hidden", + + /** + * No permission controls. Column rendered an if available on an item. No permission values are emitted + */ + Readonly = "readonly", + + /** + * Permission Controls and column present. Permission values are emitted. + */ + Edit = "edit", +} + +@Component({ + selector: "bit-access-selector", + templateUrl: "access-selector.component.html", + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => AccessSelectorComponent), + multi: true, + }, + ], +}) +export class AccessSelectorComponent implements ControlValueAccessor, OnInit, OnDestroy { + private destroy$ = new Subject(); + private notifyOnChange: (v: unknown) => void; + private notifyOnTouch: () => void; + private pauseChangeNotification: boolean; + + /** + * The internal selection list that tracks the value of this form control / component. + * It's responsible for keeping items sorted and synced with the rendered form controls + * @protected + */ + protected selectionList = new FormSelectionList((item) => { + const permissionControl = this.formBuilder.control(this.initialPermission); + + const fg = this.formBuilder.group({ + id: item.id, + type: item.type, + permission: permissionControl, + }); + + // Disable entire row form group if readonly + if (item.readonly) { + fg.disable(); + } + + // Disable permission control if accessAllItems is enabled + if (item.accessAllItems || this.permissionMode != PermissionMode.Edit) { + permissionControl.disable(); + } + + return fg; + }, this._itemComparator.bind(this)); + + /** + * Internal form group for this component. + * @protected + */ + protected formGroup = this.formBuilder.group({ + items: this.selectionList.formArray, + }); + + protected itemType = AccessItemType; + protected permissionList = [ + { perm: CollectionPermission.View, labelId: "canView" }, + { perm: CollectionPermission.ViewExceptPass, labelId: "canViewExceptPass" }, + { perm: CollectionPermission.Edit, labelId: "canEdit" }, + { perm: CollectionPermission.EditExceptPass, labelId: "canEditExceptPass" }, + ]; + protected initialPermission = CollectionPermission.View; + + disabled: boolean; + + /** + * List of all selectable items that. Sorted internally. + */ + @Input() + get items(): AccessItemView[] { + return this.selectionList.allItems; + } + + set items(val: AccessItemView[]) { + const selected = (this.selectionList.formArray.getRawValue() ?? []).concat( + val.filter((m) => m.readonly) + ); + this.selectionList.populateItems( + val.map((m) => { + m.icon = m.icon ?? this.itemIcon(m); // Ensure an icon is set + return m; + }), + selected + ); + } + + /** + * Permission mode that controls if the permission form controls and column should be present. + */ + @Input() + get permissionMode(): PermissionMode { + return this._permissionMode; + } + + set permissionMode(value: PermissionMode) { + this._permissionMode = value; + // Toggle any internal permission controls + for (const control of this.selectionList.formArray.controls) { + if (value == PermissionMode.Edit) { + control.get("permission").enable(); + } else { + control.get("permission").disable(); + } + } + } + private _permissionMode: PermissionMode = PermissionMode.Hidden; + + /** + * Column header for the selected items table + */ + @Input() columnHeader: string; + + /** + * Label used for the ng selector + */ + @Input() selectorLabelText: string; + + /** + * Helper text displayed under the ng selector + */ + @Input() selectorHelpText: string; + + /** + * Text that is shown in the table when no items are selected + */ + @Input() emptySelectionText: string; + + /** + * Flag for if the member roles column should be present + */ + @Input() showMemberRoles: boolean; + + /** + * Flag for if the group column should be present + */ + @Input() showGroupColumn: boolean; + + constructor( + private readonly formBuilder: FormBuilder, + private readonly i18nService: I18nService + ) {} + + /** Required for NG_VALUE_ACCESSOR */ + registerOnChange(fn: any): void { + this.notifyOnChange = fn; + } + + /** Required for NG_VALUE_ACCESSOR */ + registerOnTouched(fn: any): void { + this.notifyOnTouch = fn; + } + + /** Required for NG_VALUE_ACCESSOR */ + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + + // Keep the internal FormGroup in sync + if (this.disabled) { + this.formGroup.disable(); + } else { + this.formGroup.enable(); + } + } + + /** Required for NG_VALUE_ACCESSOR */ + writeValue(selectedItems: AccessItemValue[]): void { + // Modifying the selection list, mistakenly fires valueChanges in the + // internal form array, so we need to know to pause external notification + this.pauseChangeNotification = true; + + // Always clear the internal selection list on a new value + this.selectionList.deselectAll(); + + // We need to also select any read only items to appear in the table + this.selectionList.selectItems(this.items.filter((m) => m.readonly).map((m) => m.id)); + + // If the new value is null, then we're done + if (selectedItems == null) { + this.pauseChangeNotification = false; + return; + } + + // Unable to handle other value types, throw + if (!Array.isArray(selectedItems)) { + throw new Error("The access selector component only supports Array form values!"); + } + + // Iterate and internally select each item + for (const value of selectedItems) { + this.selectionList.selectItem(value.id, value); + } + + this.pauseChangeNotification = false; + } + + ngOnInit() { + // Watch the internal formArray for changes and propagate them + this.selectionList.formArray.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => { + if (!this.notifyOnChange || this.pauseChangeNotification) { + return; + } + this.notifyOnChange(v); + }); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } + + protected handleBlur() { + if (!this.notifyOnTouch) { + return; + } + + this.notifyOnTouch(); + } + + protected selectItems(items: SelectItemView[]) { + this.pauseChangeNotification = true; + this.selectionList.selectItems(items.map((i) => i.id)); + this.pauseChangeNotification = false; + if (this.notifyOnChange != undefined) { + this.notifyOnChange(this.selectionList.formArray.value); + } + } + + protected itemIcon(item: AccessItemView) { + switch (item.type) { + case AccessItemType.Collection: + return "bwi-collection"; + case AccessItemType.Group: + return "bwi-users"; + case AccessItemType.Member: + return "bwi-user"; + } + } + + protected permissionLabelId(perm: CollectionPermission) { + return this.permissionList.find((p) => p.perm == perm)?.labelId; + } + + protected accessAllLabelId(item: AccessItemView) { + return item.type == AccessItemType.Group ? "groupAccessAll" : "memberAccessAll"; + } + + protected canEditItemPermission(item: AccessItemView) { + return this.permissionMode == PermissionMode.Edit && !item.readonly && !item.accessAllItems; + } + + private _itemComparator(a: AccessItemView, b: AccessItemView) { + if (a.type != b.type) { + return a.type - b.type; + } + return this.i18nService.collator.compare( + a.listName + a.labelName + a.readonly, + b.listName + b.labelName + b.readonly + ); + } +} diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.models.ts b/apps/web/src/app/organizations/components/access-selector/access-selector.models.ts new file mode 100644 index 0000000000..d621de271e --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.models.ts @@ -0,0 +1,107 @@ +import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType"; +import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType"; +import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request"; +import { SelectionReadOnlyResponse } from "@bitwarden/common/models/response/selection-read-only.response"; +import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view"; + +/** + * Permission options that replace/correspond with readOnly and hidePassword server fields. + */ +export enum CollectionPermission { + View = "view", + ViewExceptPass = "viewExceptPass", + Edit = "edit", + EditExceptPass = "editExceptPass", +} + +export enum AccessItemType { + Collection, + Group, + Member, +} + +/** + * A "generic" type that describes an item that can be selected from a + * ng-select list and have its collection permission modified. + * + * Currently, it supports Collections, Groups, and Members. Members require some additional + * details to render in the AccessSelectorComponent so their type is defined separately + * and then joined back with the base type. + * + */ +export type AccessItemView = + | SelectItemView & { + /** + * Flag that this group/member can access all items. + * This will disable the permission editor for this item. + */ + accessAllItems?: boolean; + + /** + * Flag that this item cannot be modified. + * This will disable the permission editor and will keep + * the item always selected. + */ + readonly?: boolean; + + /** + * Optional permission that will be rendered for this + * item if it set to readonly. + */ + readonlyPermission?: CollectionPermission; + } & ( + | { + type: AccessItemType.Collection; + viaGroupName?: string; + } + | { + type: AccessItemType.Group; + } + | { + type: AccessItemType.Member; // Members have a few extra details required to display, so they're added here + email: string; + role: OrganizationUserType; + status: OrganizationUserStatusType; + } + ); + +/** + * A type that is emitted as a value for the ngControl + */ +export type AccessItemValue = { + id: string; + permission?: CollectionPermission; + type: AccessItemType; +}; + +/** + * Converts the older SelectionReadOnly interface to one of the new CollectionPermission values + * for the dropdown in the AccessSelectorComponent + * @param value + */ +export const convertToPermission = (value: SelectionReadOnlyResponse) => { + if (value.readOnly) { + return value.hidePasswords ? CollectionPermission.ViewExceptPass : CollectionPermission.View; + } else { + return value.hidePasswords ? CollectionPermission.EditExceptPass : CollectionPermission.Edit; + } +}; + +/** + * Converts an AccessItemValue back into a SelectionReadOnly class using the CollectionPermission + * to determine the values for `readOnly` and `hidePassword` + * @param value + */ +export const convertToSelectionReadOnly = (value: AccessItemValue) => { + return new SelectionReadOnlyRequest( + value.id, + readOnly(value.permission), + hidePassword(value.permission) + ); +}; + +const readOnly = (perm: CollectionPermission) => + [CollectionPermission.View, CollectionPermission.ViewExceptPass].includes(perm); + +const hidePassword = (perm: CollectionPermission) => + [CollectionPermission.ViewExceptPass, CollectionPermission.EditExceptPass].includes(perm); diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.module.ts b/apps/web/src/app/organizations/components/access-selector/access-selector.module.ts new file mode 100644 index 0000000000..cbb01137b4 --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from "@angular/core"; + +import { SharedModule } from "../../../shared"; + +import { AccessSelectorComponent } from "./access-selector.component"; +import { UserTypePipe } from "./user-type.pipe"; + +@NgModule({ + imports: [SharedModule], + declarations: [AccessSelectorComponent, UserTypePipe], + exports: [AccessSelectorComponent], +}) +export class AccessSelectorModule {} diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts b/apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts new file mode 100644 index 0000000000..059fb1c430 --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts @@ -0,0 +1,302 @@ +import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { action } from "@storybook/addon-actions"; +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType"; +import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType"; +import { + AvatarModule, + BadgeModule, + ButtonModule, + FormFieldModule, + IconButtonModule, + TableModule, + TabsModule, +} from "@bitwarden/components"; + +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; + +import { AccessSelectorComponent } from "./access-selector.component"; +import { AccessItemType, AccessItemView, CollectionPermission } from "./access-selector.models"; +import { UserTypePipe } from "./user-type.pipe"; + +export default { + title: "Web/Organizations/Access Selector", + decorators: [ + moduleMetadata({ + declarations: [AccessSelectorComponent, UserTypePipe], + imports: [ + ButtonModule, + FormFieldModule, + AvatarModule, + BadgeModule, + ReactiveFormsModule, + FormsModule, + TabsModule, + TableModule, + PreloadedEnglishI18nModule, + JslibModule, + IconButtonModule, + ], + providers: [], + }), + ], + parameters: {}, + argTypes: { + formObj: { table: { disable: true } }, + }, +} as Meta; + +const actionsData = { + onValueChanged: action("onValueChanged"), + onSubmit: action("onSubmit"), +}; + +/** + * Factory to help build semi-realistic looking items + * @param n - The number of items to build + * @param type - Which type to build + */ +const itemsFactory = (n: number, type: AccessItemType) => { + return [...Array(n)].map((_: unknown, id: number) => { + const item: AccessItemView = { + id: id.toString(), + type: type, + } as AccessItemView; + + switch (item.type) { + case AccessItemType.Collection: + item.labelName = item.listName = `Collection ${id}`; + item.id = item.id + "c"; + item.parentGrouping = "Collection Parent Group " + ((id % 2) + 1); + break; + case AccessItemType.Group: + item.labelName = item.listName = `Group ${id}`; + item.id = item.id + "g"; + break; + case AccessItemType.Member: + item.id = item.id + "m"; + item.email = `member${id}@email.com`; + item.status = id % 3 == 0 ? 0 : 2; + item.labelName = item.status == 2 ? `Member ${id}` : item.email; + item.listName = item.status == 2 ? `${item.labelName} (${item.email})` : item.email; + item.role = id % 5; + break; + } + + return item; + }); +}; + +const sampleMembers = itemsFactory(10, AccessItemType.Member); +const sampleGroups = itemsFactory(6, AccessItemType.Group); + +const StandaloneAccessSelectorTemplate: Story = ( + args: AccessSelectorComponent +) => ({ + props: { + items: [], + valueChanged: actionsData.onValueChanged, + initialValue: [], + ...args, + }, + template: ` + +`, +}); + +const memberCollectionAccessItems = itemsFactory(3, AccessItemType.Collection).concat([ + { + id: "c1-group1", + type: AccessItemType.Collection, + labelName: "Collection 1", + listName: "Collection 1", + viaGroupName: "Group 1", + readonlyPermission: CollectionPermission.View, + readonly: true, + }, + { + id: "c1-group2", + type: AccessItemType.Collection, + labelName: "Collection 1", + listName: "Collection 1", + viaGroupName: "Group 2", + readonlyPermission: CollectionPermission.ViewExceptPass, + readonly: true, + }, +]); + +export const MemberCollectionAccess = StandaloneAccessSelectorTemplate.bind({}); +MemberCollectionAccess.args = { + permissionMode: "edit", + showMemberRoles: false, + showGroupColumn: true, + columnHeader: "Collection", + selectorLabelText: "Select Collections", + selectorHelpText: "Some helper text describing what this does", + emptySelectionText: "No collections added", + disabled: false, + initialValue: [], + items: memberCollectionAccessItems, +}; +MemberCollectionAccess.story = { + parameters: { + docs: { + storyDescription: ` + Example of an access selector for modifying the collections a member has access to. + Includes examples of a readonly group and member that cannot be edited. + `, + }, + }, +}; + +export const MemberGroupAccess = StandaloneAccessSelectorTemplate.bind({}); +MemberGroupAccess.args = { + permissionMode: "readonly", + showMemberRoles: false, + columnHeader: "Groups", + selectorLabelText: "Select Groups", + selectorHelpText: "Some helper text describing what this does", + emptySelectionText: "No groups added", + disabled: false, + initialValue: [{ id: "3g" }, { id: "0g" }], + items: itemsFactory(4, AccessItemType.Group).concat([ + { + id: "admin", + type: AccessItemType.Group, + listName: "Admin Group", + labelName: "Admin Group", + accessAllItems: true, + }, + ]), +}; +MemberGroupAccess.story = { + parameters: { + docs: { + storyDescription: ` + Example of an access selector for selecting which groups an individual member belongs too. + `, + }, + }, +}; + +export const GroupMembersAccess = StandaloneAccessSelectorTemplate.bind({}); +GroupMembersAccess.args = { + permissionMode: "hidden", + showMemberRoles: true, + columnHeader: "Members", + selectorLabelText: "Select Members", + selectorHelpText: "Some helper text describing what this does", + emptySelectionText: "No members added", + disabled: false, + initialValue: [{ id: "2m" }, { id: "0m" }], + items: sampleMembers, +}; +GroupMembersAccess.story = { + parameters: { + docs: { + storyDescription: ` + Example of an access selector for selecting which members belong to an specific group. + `, + }, + }, +}; + +export const CollectionAccess = StandaloneAccessSelectorTemplate.bind({}); +CollectionAccess.args = { + permissionMode: "edit", + showMemberRoles: false, + columnHeader: "Groups/Members", + selectorLabelText: "Select groups and members", + selectorHelpText: + "Permissions set for a member will replace permissions set by that member's group", + emptySelectionText: "No members or groups added", + disabled: false, + initialValue: [ + { id: "3g", permission: CollectionPermission.EditExceptPass }, + { id: "0m", permission: CollectionPermission.View }, + ], + items: sampleGroups.concat(sampleMembers).concat([ + { + id: "admin-group", + type: AccessItemType.Group, + listName: "Admin Group", + labelName: "Admin Group", + accessAllItems: true, + readonly: true, + }, + { + id: "admin-member", + type: AccessItemType.Member, + listName: "Admin Member (admin@email.com)", + labelName: "Admin Member", + status: OrganizationUserStatusType.Confirmed, + role: OrganizationUserType.Admin, + email: "admin@email.com", + accessAllItems: true, + readonly: true, + }, + ]), +}; +GroupMembersAccess.story = { + parameters: { + docs: { + storyDescription: ` + Example of an access selector for selecting which members/groups have access to a specific collection. + `, + }, + }, +}; + +const fb = new FormBuilder(); + +const ReactiveFormAccessSelectorTemplate: Story = ( + args: AccessSelectorComponent +) => ({ + props: { + items: [], + onSubmit: actionsData.onSubmit, + ...args, + }, + template: ` +
+ + +
+`, +}); + +export const ReactiveForm = ReactiveFormAccessSelectorTemplate.bind({}); +ReactiveForm.args = { + formObj: fb.group({ formItems: [[{ id: "1g" }]] }), + permissionMode: "edit", + showMemberRoles: false, + columnHeader: "Groups/Members", + selectorLabelText: "Select groups and members", + selectorHelpText: + "Permissions set for a member will replace permissions set by that member's group", + emptySelectionText: "No members or groups added", + items: sampleGroups.concat(sampleMembers), +}; diff --git a/apps/web/src/app/organizations/components/access-selector/index.ts b/apps/web/src/app/organizations/components/access-selector/index.ts new file mode 100644 index 0000000000..86624f8e94 --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/index.ts @@ -0,0 +1,3 @@ +export * from "./access-selector.component"; +export * from "./access-selector.module"; +export * from "./access-selector.models"; diff --git a/apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts b/apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts new file mode 100644 index 0000000000..6ef78cb65e --- /dev/null +++ b/apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts @@ -0,0 +1,29 @@ +import { Pipe, PipeTransform } from "@angular/core"; + +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType"; + +@Pipe({ + name: "userType", +}) +export class UserTypePipe implements PipeTransform { + constructor(private i18nService: I18nService) {} + + transform(value?: OrganizationUserType, unknownText?: string): string { + if (value == null) { + return unknownText ?? this.i18nService.t("unknown"); + } + switch (value) { + case OrganizationUserType.Owner: + return this.i18nService.t("owner"); + case OrganizationUserType.Admin: + return this.i18nService.t("admin"); + case OrganizationUserType.User: + return this.i18nService.t("user"); + case OrganizationUserType.Manager: + return this.i18nService.t("manager"); + case OrganizationUserType.Custom: + return this.i18nService.t("custom"); + } + } +} 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 7c04938cf3..5f5aa497f7 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.html @@ -1,49 +1,32 @@ - -
-
-
- - -
+
+
+
+ + + {{ "vault" | i18n }} + + {{ "manage" | i18n }} + + + {{ getReportTabLabel(organization) | 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 fe9d9de8b1..8c871f74db 100644 --- a/apps/web/src/app/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/organizations/layouts/organization-layout.component.ts @@ -3,11 +3,14 @@ import { ActivatedRoute } from "@angular/router"; import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs"; import { - OrganizationService, - getOrganizationById, + canAccessBillingTab, + canAccessGroupsTab, canAccessManageTab, + canAccessMembersTab, + canAccessReportingTab, canAccessSettingsTab, - canAccessToolsTab, + getOrganizationById, + OrganizationService, } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; import { Organization } from "@bitwarden/common/models/domain/organization"; @@ -17,7 +20,6 @@ import { Organization } from "@bitwarden/common/models/domain/organization"; }) export class OrganizationLayoutComponent implements OnInit, OnDestroy { organization$: Observable; - businessTokenPromise: Promise; private _destroy = new Subject(); @@ -43,27 +45,43 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { this._destroy.complete(); } - canShowManageTab(organization: Organization): boolean { - return canAccessManageTab(organization); - } - - canShowToolsTab(organization: Organization): boolean { - return canAccessToolsTab(organization); - } - canShowSettingsTab(organization: Organization): boolean { return canAccessSettingsTab(organization); } - getToolsRoute(organization: Organization): string { - return organization.canAccessImportExport ? "tools/import" : "tools/exposed-passwords-report"; + canShowManageTab(organization: Organization): boolean { + return canAccessManageTab(organization); + } + + canShowMembersTab(organization: Organization): boolean { + return canAccessMembersTab(organization); + } + + canShowGroupsTab(organization: Organization): boolean { + return canAccessGroupsTab(organization); + } + + canShowReportsTab(organization: Organization): boolean { + return canAccessReportingTab(organization); + } + + canShowBillingTab(organization: Organization): boolean { + return canAccessBillingTab(organization); + } + + getReportTabLabel(organization: Organization): string { + return organization.useEvents ? "reporting" : "reports"; + } + + getReportRoute(organization: Organization): string { + return organization.useEvents ? "reporting/events" : "reporting/reports"; } getManageRoute(organization: Organization): string { let route: string; switch (true) { case organization.canManageUsers: - route = "manage/people"; + route = "manage/members"; break; case organization.canViewAssignedCollections || organization.canViewAllCollections: route = "manage/collections"; @@ -71,18 +89,6 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { case organization.canManageGroups: route = "manage/groups"; break; - case organization.canManagePolicies: - route = "manage/policies"; - break; - case organization.canManageSso: - route = "manage/sso"; - break; - case organization.canManageScim: - route = "manage/scim"; - break; - case organization.canAccessEventLogs: - route = "manage/events"; - break; } return route; } diff --git a/apps/web/src/app/organizations/manage/events.component.html b/apps/web/src/app/organizations/manage/events.component.html index d27b53e8d9..a7468bcf37 100644 --- a/apps/web/src/app/organizations/manage/events.component.html +++ b/apps/web/src/app/organizations/manage/events.component.html @@ -1,54 +1,57 @@ -
+

{{ "eventLogs" | i18n }}

-
-
- +
+ + {{ "from" | i18n }} - - - + + - + + {{ "to" | i18n }} -
-
+ +
-
+
@@ -63,45 +66,44 @@

{{ "noEventsInList" | i18n }}

- - + + - - - - + + + + - - - - - + + - - + - -
{{ "timestamp" | i18n }} - {{ "device" | i18n }} - {{ "user" | i18n }}{{ "event" | i18n }}{{ "timestamp" | i18n }}{{ "client" | i18n }}{{ "member" | i18n }}{{ "event" | i18n }}
{{ e.date | date: "medium" }} - - {{ e.appName }}, {{ e.ip }} + + +
{{ e.date | date: "medium" }} + {{ e.appName }} + {{ e.userName }}
+ + diff --git a/apps/web/src/app/organizations/manage/events.component.ts b/apps/web/src/app/organizations/manage/events.component.ts index 43896085ef..abc8b52543 100644 --- a/apps/web/src/app/organizations/manage/events.component.ts +++ b/apps/web/src/app/organizations/manage/events.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { ActivatedRoute, Router } from "@angular/router"; +import { concatMap, Subject, takeUntil } from "rxjs"; import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -20,13 +21,13 @@ import { EventService } from "../../core"; selector: "app-org-events", templateUrl: "events.component.html", }) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class EventsComponent extends BaseEventsComponent implements OnInit { +export class EventsComponent extends BaseEventsComponent implements OnInit, OnDestroy { exportFileName = "org-events"; organizationId: string; organization: Organization; private orgUsersUserIdMap = new Map(); + private destroy$ = new Subject(); constructor( private apiService: ApiService, @@ -53,17 +54,20 @@ export class EventsComponent extends BaseEventsComponent implements OnInit { } async ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.parent.params.subscribe(async (params) => { - this.organizationId = params.organizationId; - this.organization = await this.organizationService.get(this.organizationId); - if (this.organization == null || !this.organization.useEvents) { - this.router.navigate(["/organizations", this.organizationId]); - return; - } - - await this.load(); - }); + this.route.params + .pipe( + concatMap(async (params) => { + this.organizationId = params.organizationId; + this.organization = await this.organizationService.get(this.organizationId); + if (this.organization == null || !this.organization.useEvents) { + await this.router.navigate(["/organizations", this.organizationId]); + return; + } + await this.load(); + }), + takeUntil(this.destroy$) + ) + .subscribe(); } async load() { @@ -126,4 +130,9 @@ export class EventsComponent extends BaseEventsComponent implements OnInit { return null; } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/apps/web/src/app/organizations/manage/groups.component.ts b/apps/web/src/app/organizations/manage/groups.component.ts index e38ddf38da..ed750fbe82 100644 --- a/apps/web/src/app/organizations/manage/groups.component.ts +++ b/apps/web/src/app/organizations/manage/groups.component.ts @@ -47,7 +47,7 @@ export class GroupsComponent implements OnInit { async ngOnInit() { // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.parent.params.subscribe(async (params) => { + this.route.parent.params.subscribe(async (params) => { this.organizationId = params.organizationId; await this.load(); /* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */ diff --git a/apps/web/src/app/organizations/manage/manage.component.html b/apps/web/src/app/organizations/manage/manage.component.html index b96b8b0859..da1090063d 100644 --- a/apps/web/src/app/organizations/manage/manage.component.html +++ b/apps/web/src/app/organizations/manage/manage.component.html @@ -5,12 +5,12 @@
{{ "manage" | i18n }}
- {{ "people" | i18n }} + {{ "members" | i18n }} {{ "groups" | i18n }} - - {{ "policies" | i18n }} - - - {{ "singleSignOn" | i18n }} - - - {{ "scim" | i18n }} - - - {{ "eventLogs" | i18n }} -
diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html index 58ce6043b1..2de6f673e0 100644 --- a/apps/web/src/app/organizations/manage/people.component.html +++ b/apps/web/src/app/organizations/manage/people.component.html @@ -1,6 +1,6 @@ -
-

{{ "people" | i18n }}

-
+
+

{{ "members" | i18n }}

+
@@ -87,31 +77,6 @@ {{ "rotateApiKey" | 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 ca3cb55991..7e685ea9c8 100644 --- a/apps/web/src/app/organizations/settings/account.component.ts +++ b/apps/web/src/app/organizations/settings/account.component.ts @@ -14,7 +14,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; @@ -100,12 +98,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/index.ts b/apps/web/src/app/organizations/settings/index.ts new file mode 100644 index 0000000000..289bf3d632 --- /dev/null +++ b/apps/web/src/app/organizations/settings/index.ts @@ -0,0 +1,2 @@ +export * from "./organization-settings.module"; +export { DeleteOrganizationComponent } from "./delete-organization.component"; 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 ce13772296..0000000000 --- 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 index 99121482ff..e69de29bb2 100644 --- a/apps/web/src/app/organizations/settings/organization-billing.component.ts +++ b/apps/web/src/app/organizations/settings/organization-billing.component.ts @@ -1,153 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { ActivatedRoute } from "@angular/router"; - -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; -import { LogService } from "@bitwarden/common/abstractions/log.service"; -import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction"; -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/verify-bank.request"; -import { BillingResponse } from "@bitwarden/common/models/response/billing.response"; - -@Component({ - selector: "app-org-billing", - templateUrl: "./organization-billing.component.html", -}) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -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 i18nService: I18nService, - private route: ActivatedRoute, - private platformUtilsService: PlatformUtilsService, - private logService: LogService, - private organizationApiService: OrganizationApiServiceAbstraction - ) {} - - async ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - 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.organizationApiService.getBilling(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.organizationApiService.verifyBank(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/organization-settings-routing.module.ts b/apps/web/src/app/organizations/settings/organization-settings-routing.module.ts new file mode 100644 index 0000000000..1d4a4df852 --- /dev/null +++ b/apps/web/src/app/organizations/settings/organization-settings-routing.module.ts @@ -0,0 +1,52 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { canAccessSettingsTab } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; +import { Organization } from "@bitwarden/common/models/domain/organization"; + +import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard"; +import { PoliciesComponent } from "../policies"; + +import { AccountComponent } from "./account.component"; +import { SettingsComponent } from "./settings.component"; +import { TwoFactorSetupComponent } from "./two-factor-setup.component"; + +const routes: Routes = [ + { + path: "", + component: SettingsComponent, + canActivate: [OrganizationPermissionsGuard], + data: { organizationPermissions: canAccessSettingsTab }, + children: [ + { path: "", pathMatch: "full", redirectTo: "account" }, + { path: "account", component: AccountComponent, data: { titleId: "organizationInfo" } }, + { + path: "two-factor", + component: TwoFactorSetupComponent, + data: { titleId: "twoStepLogin" }, + }, + { + path: "policies", + component: PoliciesComponent, + canActivate: [OrganizationPermissionsGuard], + data: { + organizationPermissions: (org: Organization) => org.canManagePolicies, + titleId: "policies", + }, + }, + { + path: "tools", + loadChildren: () => + import("../tools/import-export/org-import-export.module").then( + (m) => m.OrganizationImportExportModule + ), + }, + ], + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class OrganizationSettingsRoutingModule {} diff --git a/apps/web/src/app/organizations/settings/organization-settings.module.ts b/apps/web/src/app/organizations/settings/organization-settings.module.ts new file mode 100644 index 0000000000..1c5b72552c --- /dev/null +++ b/apps/web/src/app/organizations/settings/organization-settings.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule, SharedModule } from "../../shared"; +import { PoliciesModule } from "../policies"; + +import { AccountComponent } from "./account.component"; +import { DeleteOrganizationComponent } from "./delete-organization.component"; +import { OrganizationSettingsRoutingModule } from "./organization-settings-routing.module"; +import { SettingsComponent } from "./settings.component"; +import { TwoFactorSetupComponent } from "./two-factor-setup.component"; + +@NgModule({ + imports: [SharedModule, LooseComponentsModule, PoliciesModule, OrganizationSettingsRoutingModule], + declarations: [ + SettingsComponent, + AccountComponent, + DeleteOrganizationComponent, + TwoFactorSetupComponent, + ], +}) +export class OrganizationSettingsModule {} diff --git a/apps/web/src/app/organizations/settings/settings.component.html b/apps/web/src/app/organizations/settings/settings.component.html index ad9824ef73..d81d7553dc 100644 --- a/apps/web/src/app/organizations/settings/settings.component.html +++ b/apps/web/src/app/organizations/settings/settings.component.html @@ -5,27 +5,56 @@
{{ "settings" | i18n }}
- {{ "myOrganization" | i18n }} - - - {{ "subscription" | i18n }} + {{ "organizationInfo" | i18n }} - {{ "billing" | i18n }} + {{ "policies" | i18n }} {{ "twoStepLogin" | i18n }} + + {{ "importData" | i18n }} + + + {{ "exportVault" | i18n }} + + + {{ "singleSignOn" | i18n }} + + + {{ "scim" | i18n }} +
diff --git a/apps/web/src/app/organizations/settings/settings.component.ts b/apps/web/src/app/organizations/settings/settings.component.ts index 20ba0a0316..9988e65dd7 100644 --- a/apps/web/src/app/organizations/settings/settings.component.ts +++ b/apps/web/src/app/organizations/settings/settings.component.ts @@ -1,30 +1,34 @@ -import { Component } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; +import { Subject, switchMap, takeUntil } from "rxjs"; import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; +import { Organization } from "@bitwarden/common/models/domain/organization"; @Component({ selector: "app-org-settings", templateUrl: "settings.component.html", }) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class SettingsComponent { - access2fa = false; - showBilling: boolean; +export class SettingsComponent implements OnInit, OnDestroy { + organization: Organization; - constructor( - private route: ActivatedRoute, - private organizationService: OrganizationService, - private platformUtilsService: PlatformUtilsService - ) {} + private destroy$ = new Subject(); + + constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {} ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.params.subscribe(async (params) => { - const organization = await this.organizationService.get(params.organizationId); - this.showBilling = !this.platformUtilsService.isSelfHost() && organization.canManageBilling; - this.access2fa = organization.use2fa; - }); + this.route.params + .pipe( + switchMap(async (params) => await this.organizationService.get(params.organizationId)), + takeUntil(this.destroy$) + ) + .subscribe((organization) => { + this.organization = organization; + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts index 58286c55fc..b0db38a850 100644 --- a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts +++ b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts @@ -16,8 +16,8 @@ import { ProductType } from "@bitwarden/common/enums/productType"; import { Organization } from "@bitwarden/common/models/domain/organization"; import { OrganizationSponsorshipRedeemRequest } from "@bitwarden/common/models/request/organization/organization-sponsorship-redeem.request"; +import { DeleteOrganizationComponent } from "../../organizations/settings"; import { OrganizationPlansComponent } from "../../settings/organization-plans.component"; -import { DeleteOrganizationComponent } from "../settings/delete-organization.component"; @Component({ selector: "families-for-enterprise-setup", diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 6e1c4e569e..f77043a777 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -28,7 +28,7 @@ import { VerifyRecoverDeleteComponent } from "./accounts/verify-recover-delete.c import { HomeGuard } from "./guards/home.guard"; import { FrontendLayoutComponent } from "./layouts/frontend-layout.component"; import { UserLayoutComponent } from "./layouts/user-layout.component"; -import { OrganizationsRoutingModule } from "./organizations/organization-routing.module"; +import { OrganizationModule } from "./organizations/organization.module"; import { AcceptFamilySponsorshipComponent } from "./organizations/sponsorships/accept-family-sponsorship.component"; import { FamiliesForEnterpriseSetupComponent } from "./organizations/sponsorships/families-for-enterprise-setup.component"; import { ReportsModule } from "./reports"; @@ -251,7 +251,7 @@ const routes: Routes = [ }, { path: "organizations", - loadChildren: () => OrganizationsRoutingModule, + loadChildren: () => OrganizationModule, }, ]; diff --git a/apps/web/src/app/reports/index.ts b/apps/web/src/app/reports/index.ts index 0e922232d6..474e8ba810 100644 --- a/apps/web/src/app/reports/index.ts +++ b/apps/web/src/app/reports/index.ts @@ -1,3 +1,3 @@ export * from "./reports.module"; -export * from "./models/report-entry"; -export * from "./models/report-variant"; +export * from "./shared"; +export * from "./reports"; diff --git a/apps/web/src/app/reports/pages/reports-home.component.ts b/apps/web/src/app/reports/pages/reports-home.component.ts index 422b945444..81058c6094 100644 --- a/apps/web/src/app/reports/pages/reports-home.component.ts +++ b/apps/web/src/app/reports/pages/reports-home.component.ts @@ -2,9 +2,8 @@ import { Component, OnInit } from "@angular/core"; import { StateService } from "@bitwarden/common/abstractions/state.service"; -import { ReportEntry } from "../models/report-entry"; -import { ReportVariant } from "../models/report-variant"; import { reports, ReportType } from "../reports"; +import { ReportEntry, ReportVariant } from "../shared"; @Component({ selector: "app-reports-home", diff --git a/apps/web/src/app/reports/reports.module.ts b/apps/web/src/app/reports/reports.module.ts index 77a42fa816..f4150f2382 100644 --- a/apps/web/src/app/reports/reports.module.ts +++ b/apps/web/src/app/reports/reports.module.ts @@ -10,19 +10,16 @@ import { ReportsHomeComponent } from "./pages/reports-home.component"; import { ReusedPasswordsReportComponent } from "./pages/reused-passwords-report.component"; import { UnsecuredWebsitesReportComponent } from "./pages/unsecured-websites-report.component"; import { WeakPasswordsReportComponent } from "./pages/weak-passwords-report.component"; -import { ReportCardComponent } from "./report-card/report-card.component"; -import { ReportListComponent } from "./report-list/report-list.component"; import { ReportsLayoutComponent } from "./reports-layout.component"; import { ReportsRoutingModule } from "./reports-routing.module"; +import { ReportsSharedModule } from "./shared"; @NgModule({ - imports: [CommonModule, SharedModule, ReportsRoutingModule], + imports: [CommonModule, SharedModule, ReportsSharedModule, ReportsRoutingModule], declarations: [ BreachReportComponent, ExposedPasswordsReportComponent, InactiveTwoFactorReportComponent, - ReportCardComponent, - ReportListComponent, ReportsLayoutComponent, ReportsHomeComponent, ReusedPasswordsReportComponent, diff --git a/apps/web/src/app/reports/reports.ts b/apps/web/src/app/reports/reports.ts index 43d086d418..6f802e5478 100644 --- a/apps/web/src/app/reports/reports.ts +++ b/apps/web/src/app/reports/reports.ts @@ -4,7 +4,7 @@ import { ReportInactiveTwoFactor } from "./icons/report-inactive-two-factor.icon import { ReportReusedPasswords } from "./icons/report-reused-passwords.icon"; import { ReportUnsecuredWebsites } from "./icons/report-unsecured-websites.icon"; import { ReportWeakPasswords } from "./icons/report-weak-passwords.icon"; -import { ReportEntry } from "./models/report-entry"; +import { ReportEntry } from "./shared"; export enum ReportType { ExposedPasswords = "exposedPasswords", diff --git a/apps/web/src/app/reports/shared/index.ts b/apps/web/src/app/reports/shared/index.ts new file mode 100644 index 0000000000..eeadbd423f --- /dev/null +++ b/apps/web/src/app/reports/shared/index.ts @@ -0,0 +1,3 @@ +export * from "./models/report-entry"; +export * from "./models/report-variant"; +export * from "./reports-shared.module"; diff --git a/apps/web/src/app/reports/models/report-entry.ts b/apps/web/src/app/reports/shared/models/report-entry.ts similarity index 100% rename from apps/web/src/app/reports/models/report-entry.ts rename to apps/web/src/app/reports/shared/models/report-entry.ts diff --git a/apps/web/src/app/reports/models/report-variant.ts b/apps/web/src/app/reports/shared/models/report-variant.ts similarity index 100% rename from apps/web/src/app/reports/models/report-variant.ts rename to apps/web/src/app/reports/shared/models/report-variant.ts diff --git a/apps/web/src/app/reports/report-card/report-card.component.html b/apps/web/src/app/reports/shared/report-card/report-card.component.html similarity index 74% rename from apps/web/src/app/reports/report-card/report-card.component.html rename to apps/web/src/app/reports/shared/report-card/report-card.component.html index 6fc33a46d5..229bc6a42d 100644 --- a/apps/web/src/app/reports/report-card/report-card.component.html +++ b/apps/web/src/app/reports/shared/report-card/report-card.component.html @@ -1,5 +1,5 @@
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 2ab9d8962e..52aa46fe28 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 d52621ac62..d1cadbd356 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 0000000000..1cdf4a3127 --- /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 0000000000..2f5703ed78 --- /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 30682e03b4..4a2ff349a1 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/billing-history.response"; @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 0000000000..27fd038a3b --- /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 0000000000..acc90d969d --- /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/billing-history.response"; + +@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 bae22bf4cf..fa80027dd8 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 4dd2018095..1d17fb78ab 100644 --- a/apps/web/src/app/settings/payment-method.component.ts +++ b/apps/web/src/app/settings/payment-method.component.ts @@ -1,37 +1,76 @@ -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 { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; +import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.request"; import { BillingPaymentResponse } from "@bitwarden/common/models/response/billing-payment.response"; +import { OrganizationResponse } from "@bitwarden/common/models/response/organization.response"; + +import { TaxInfoComponent } from "./tax-info.component"; @Component({ selector: "app-payment-method", templateUrl: "payment-method.component.html", }) +// eslint-disable-next-line rxjs-angular/prefer-takeuntil 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 organizationApiService: OrganizationApiServiceAbstraction, 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; + // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe + 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 +78,16 @@ export class PaymentMethodComponent implements OnInit { return; } this.loading = true; - this.billing = await this.apiService.getUserBillingPayment(); + + if (this.forOrganization) { + const billingPromise = this.organizationApiService.getBilling(this.organizationId); + const orgPromise = this.organizationApiService.get(this.organizationId); + + [this.billing, this.org] = await Promise.all([billingPromise, orgPromise]); + } else { + this.billing = await this.apiService.getUserBillingPayment(); + } + this.loading = false; } @@ -85,6 +133,34 @@ 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.organizationApiService.verifyBank(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 +173,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 ae1e58cb16..7d83026d2d 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/two-factor-setup.component.html b/apps/web/src/app/settings/two-factor-setup.component.html index 27fc2990e6..921a465fab 100644 --- a/apps/web/src/app/settings/two-factor-setup.component.html +++ b/apps/web/src/app/settings/two-factor-setup.component.html @@ -1,8 +1,17 @@
-

{{ "twoStepLogin" | i18n }}

+

{{ "twoStepLogin" | i18n }}

+

{{ "twoStepLoginEnforcement" | i18n }}

{{ "twoStepLoginDesc" | i18n }}

-

{{ "twoStepLoginOrganizationDesc" | i18n }}

+ +

+ {{ "twoStepLoginOrganizationDescStart" | i18n }} + {{ "twoStepLoginPolicy" | i18n }}. +
+ {{ "twoStepLoginOrganizationDuoDesc" | i18n }} +

+

{{ "twoStepLoginOrganizationSsoDesc" | i18n }}

+

{{ "twoStepLoginRecoveryWarning" | 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 a8a01714ac..1dfbc8da6b 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -42,31 +42,10 @@ import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizati import { GroupsComponent as OrgGroupsComponent } from "../organizations/manage/groups.component"; import { ManageComponent as OrgManageComponent } from "../organizations/manage/manage.component"; import { PeopleComponent as OrgPeopleComponent } from "../organizations/manage/people.component"; -import { PoliciesComponent as OrgPoliciesComponent } from "../organizations/manage/policies.component"; -import { PolicyEditComponent as OrgPolicyEditComponent } from "../organizations/manage/policy-edit.component"; import { ResetPasswordComponent as OrgResetPasswordComponent } from "../organizations/manage/reset-password.component"; import { UserAddEditComponent as OrgUserAddEditComponent } from "../organizations/manage/user-add-edit.component"; import { UserConfirmComponent as OrgUserConfirmComponent } from "../organizations/manage/user-confirm.component"; import { UserGroupsComponent as OrgUserGroupsComponent } from "../organizations/manage/user-groups.component"; -import { DisableSendPolicyComponent } from "../organizations/policies/disable-send.component"; -import { MasterPasswordPolicyComponent } from "../organizations/policies/master-password.component"; -import { PasswordGeneratorPolicyComponent } from "../organizations/policies/password-generator.component"; -import { PersonalOwnershipPolicyComponent } from "../organizations/policies/personal-ownership.component"; -import { RequireSsoPolicyComponent } from "../organizations/policies/require-sso.component"; -import { ResetPasswordPolicyComponent } from "../organizations/policies/reset-password.component"; -import { SendOptionsPolicyComponent } from "../organizations/policies/send-options.component"; -import { SingleOrgPolicyComponent } from "../organizations/policies/single-org.component"; -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 { 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"; import { FamiliesForEnterpriseSetupComponent } from "../organizations/sponsorships/families-for-enterprise-setup.component"; import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../organizations/tools/exposed-passwords-report.component"; @@ -88,6 +67,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"; @@ -127,7 +108,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"; @@ -173,10 +153,8 @@ import { SharedModule } from "."; AddEditCustomFieldsComponent, AdjustPaymentComponent, AdjustStorageComponent, - AdjustSubscription, ApiKeyComponent, AttachmentsComponent, - BillingSyncApiKeyComponent, BillingSyncKeyComponent, BulkActionsComponent, BulkDeleteComponent, @@ -186,15 +164,11 @@ import { SharedModule } from "."; ChangeEmailComponent, ChangeKdfComponent, ChangePasswordComponent, - ChangePlanComponent, CollectionsComponent, CreateOrganizationComponent, DeauthorizeSessionsComponent, DeleteAccountComponent, - DeleteOrganizationComponent, - DisableSendPolicyComponent, DomainRulesComponent, - DownloadLicenseComponent, EmergencyAccessAddEditComponent, EmergencyAccessAttachmentsComponent, EmergencyAccessComponent, @@ -208,16 +182,12 @@ import { SharedModule } from "."; FrontendLayoutComponent, HintComponent, LockComponent, - MasterPasswordPolicyComponent, NavbarComponent, NestedCheckboxComponent, OrganizationSwitcherComponent, - OrgAccountComponent, OrgAddEditComponent, - OrganizationBillingComponent, OrganizationLayoutComponent, OrganizationPlansComponent, - OrganizationSubscriptionComponent, OrgAttachmentsComponent, OrgBulkConfirmComponent, OrgBulkRestoreRevokeComponent, @@ -234,13 +204,9 @@ import { SharedModule } from "."; OrgManageCollectionsComponent, OrgManageComponent, OrgPeopleComponent, - OrgPoliciesComponent, - OrgPolicyEditComponent, OrgResetPasswordComponent, OrgReusedPasswordsReportComponent, - OrgSettingComponent, OrgToolsComponent, - OrgTwoFactorSetupComponent, OrgUnsecuredWebsitesReportComponent, OrgUserAddEditComponent, OrgUserConfirmComponent, @@ -248,12 +214,10 @@ import { SharedModule } from "."; OrgWeakPasswordsReportComponent, GeneratorComponent, PasswordGeneratorHistoryComponent, - PasswordGeneratorPolicyComponent, PasswordRepromptComponent, UserVerificationPromptComponent, PaymentComponent, PaymentMethodComponent, - PersonalOwnershipPolicyComponent, PreferencesComponent, PremiumBadgeComponent, PremiumComponent, @@ -264,25 +228,20 @@ import { SharedModule } from "."; RecoverTwoFactorComponent, RegisterComponent, RemovePasswordComponent, - RequireSsoPolicyComponent, - ResetPasswordPolicyComponent, SecurityComponent, SecurityKeysComponent, SendAddEditComponent, SendComponent, SendEffluxDatesComponent, - SendOptionsPolicyComponent, SetPasswordComponent, SettingsComponent, ShareComponent, - SingleOrgPolicyComponent, SponsoredFamiliesComponent, SponsoringOrgRowComponent, SsoComponent, SubscriptionComponent, TaxInfoComponent, ToolsComponent, - TwoFactorAuthenticationPolicyComponent, TwoFactorAuthenticatorComponent, TwoFactorComponent, TwoFactorDuoComponent, @@ -297,7 +256,8 @@ import { SharedModule } from "."; UpdateLicenseComponent, UpdatePasswordComponent, UpdateTempPasswordComponent, - UserBillingHistoryComponent, + BillingHistoryComponent, + BillingHistoryViewComponent, UserLayoutComponent, UserSubscriptionComponent, UserVerificationComponent, @@ -318,7 +278,6 @@ import { SharedModule } from "."; AddEditCustomFieldsComponent, AdjustPaymentComponent, AdjustStorageComponent, - AdjustSubscription, ApiKeyComponent, AttachmentsComponent, BulkActionsComponent, @@ -329,15 +288,11 @@ import { SharedModule } from "."; ChangeEmailComponent, ChangeKdfComponent, ChangePasswordComponent, - ChangePlanComponent, CollectionsComponent, CreateOrganizationComponent, DeauthorizeSessionsComponent, DeleteAccountComponent, - DeleteOrganizationComponent, - DisableSendPolicyComponent, DomainRulesComponent, - DownloadLicenseComponent, EmergencyAccessAddEditComponent, EmergencyAccessAttachmentsComponent, EmergencyAccessComponent, @@ -351,16 +306,12 @@ import { SharedModule } from "."; FrontendLayoutComponent, HintComponent, LockComponent, - MasterPasswordPolicyComponent, NavbarComponent, NestedCheckboxComponent, OrganizationSwitcherComponent, - OrgAccountComponent, OrgAddEditComponent, - OrganizationBillingComponent, OrganizationLayoutComponent, OrganizationPlansComponent, - OrganizationSubscriptionComponent, OrgAttachmentsComponent, OrgBulkConfirmComponent, OrgBulkRestoreRevokeComponent, @@ -377,13 +328,9 @@ import { SharedModule } from "."; OrgManageCollectionsComponent, OrgManageComponent, OrgPeopleComponent, - OrgPoliciesComponent, - OrgPolicyEditComponent, OrgResetPasswordComponent, OrgReusedPasswordsReportComponent, - OrgSettingComponent, OrgToolsComponent, - OrgTwoFactorSetupComponent, OrgUnsecuredWebsitesReportComponent, OrgUserAddEditComponent, OrgUserConfirmComponent, @@ -391,11 +338,9 @@ import { SharedModule } from "."; OrgWeakPasswordsReportComponent, GeneratorComponent, PasswordGeneratorHistoryComponent, - PasswordGeneratorPolicyComponent, PasswordRepromptComponent, PaymentComponent, PaymentMethodComponent, - PersonalOwnershipPolicyComponent, PreferencesComponent, PremiumBadgeComponent, PremiumComponent, @@ -406,25 +351,20 @@ import { SharedModule } from "."; RecoverTwoFactorComponent, RegisterComponent, RemovePasswordComponent, - RequireSsoPolicyComponent, - ResetPasswordPolicyComponent, SecurityComponent, SecurityKeysComponent, SendAddEditComponent, SendComponent, SendEffluxDatesComponent, - SendOptionsPolicyComponent, SetPasswordComponent, SettingsComponent, ShareComponent, - SingleOrgPolicyComponent, SponsoredFamiliesComponent, SponsoringOrgRowComponent, SsoComponent, SubscriptionComponent, TaxInfoComponent, ToolsComponent, - TwoFactorAuthenticationPolicyComponent, TwoFactorAuthenticatorComponent, TwoFactorComponent, TwoFactorDuoComponent, @@ -439,7 +379,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 e64f3e70b5..c217b9b12e 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -1,5 +1,5 @@ import { DragDropModule } from "@angular/cdk/drag-drop"; -import { DatePipe, CommonModule } from "@angular/common"; +import { CommonModule, DatePipe } from "@angular/common"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { RouterModule } from "@angular/router"; @@ -14,8 +14,11 @@ import { ButtonModule, CalloutModule, FormFieldModule, + IconButtonModule, IconModule, MenuModule, + TableModule, + TabsModule, } from "@bitwarden/components"; // Register the locales for the application @@ -46,7 +49,10 @@ import "./locales"; MenuModule, FormFieldModule, IconModule, + TabsModule, + TableModule, AvatarModule, + IconButtonModule, ], exports: [ CommonModule, @@ -66,7 +72,10 @@ import "./locales"; MenuModule, FormFieldModule, IconModule, + TabsModule, + TableModule, AvatarModule, + IconButtonModule, ], providers: [DatePipe], bootstrap: [], diff --git a/apps/web/src/app/tools/import-export/import.component.html b/apps/web/src/app/tools/import-export/import.component.html index ba2eb69925..5a9dacc3f3 100644 --- a/apps/web/src/app/tools/import-export/import.component.html +++ b/apps/web/src/app/tools/import-export/import.component.html @@ -314,7 +314,7 @@ - - - - - -
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 0edc70d0a6..42779b7372 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -278,7 +278,7 @@ "message": "Search favorites" }, "searchType": { - "message": "Search type", + "message": "Search Type", "description": "Search item type" }, "searchVault": { @@ -1290,11 +1290,24 @@ "twoStepLogin": { "message": "Two-step login" }, + "twoStepLoginEnforcement": { + "message": "Two-step Login Enforcement" + }, "twoStepLoginDesc": { "message": "Secure your account by requiring an additional step when logging in." }, - "twoStepLoginOrganizationDesc": { - "message": "Require two-step login for your organization's users by configuring providers at the organization level." + "twoStepLoginOrganizationDescStart": { + "message": "Enforce Bitwarden Two-step Login options for members by using the ", + "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'Enforce Bitwarden Two-step Login options for members by using the Two-step Login Policy.'" + }, + "twoStepLoginPolicy": { + "message": "Two-step Login Policy" + }, + "twoStepLoginOrganizationDuoDesc": { + "message": "To enforce Two-step Login through Duo, use the options below." + }, + "twoStepLoginOrganizationSsoDesc": { + "message": "If you have setup SSO or plan to, Two-step Login may already be enforced through your Identity Provider." }, "twoStepLoginRecoveryWarning": { "message": "Setting up two-step login can permanently lock you out of your Bitwarden account. A recovery code allows you to access your account in the event that you can no longer use your normal two-step login provider (example: you lose your device). Bitwarden support will not be able to assist you if you lose access to your account. We recommend you write down or print the recovery code and keep it in a safe place." @@ -1541,7 +1554,11 @@ }, "reportsDesc": { "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 individual or organization vault." + "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" @@ -2990,6 +3007,9 @@ "myOrganization": { "message": "My organization" }, + "organizationInfo": { + "message": "Organization Info" + }, "deleteOrganization": { "message": "Delete organization" }, @@ -3108,7 +3128,7 @@ "message": "Enter your installation id" }, "limitSubscriptionDesc": { - "message": "Set a seat limit for your subscription. Once this limit is reached, you will not be able to invite new users." + "message": "Set a seat limit for your subscription. Once this limit is reached, you will not be able to invite new members." }, "maxSeatLimit": { "message": "Seat Limit (optional)", @@ -3129,7 +3149,7 @@ "message": "Adjustments to your subscription will result in prorated changes to your billing totals. If newly invited users exceed your subscription seats, you will immediately receive a prorated charge for the additional users." }, "subscriptionUserSeats": { - "message": "Your subscription allows for a total of $COUNT$ users.", + "message": "Your subscription allows for a total of $COUNT$ members.", "placeholders": { "count": { "content": "$1", @@ -3153,10 +3173,10 @@ "message": "For additional help in managing your subscription, please contact Customer Support." }, "subscriptionUserSeatsUnlimitedAutoscale": { - "message": "Adjustments to your subscription will result in prorated changes to your billing totals. If newly invited users exceed your subscription seats, you will immediately receive a prorated charge for the additional users." + "message": "Adjustments to your subscription will result in prorated changes to your billing totals. If newly invited members exceed your subscription seats, you will immediately receive a prorated charge for the additional members." }, "subscriptionUserSeatsLimitedAutoscale": { - "message": "Adjustments to your subscription will result in prorated changes to your billing totals. If newly invited users exceed your subscription seats, you will immediately receive a prorated charge for the additional users until your $MAX$ seat limit is reached.", + "message": "Adjustments to your subscription will result in prorated changes to your billing totals. If newly invited members exceed your subscription seats, you will immediately receive a prorated charge for the additional members until your $MAX$ seat limit is reached.", "placeholders": { "max": { "content": "$1", @@ -3165,7 +3185,7 @@ } }, "subscriptionFreePlan": { - "message": "You cannot invite more than $COUNT$ users without upgrading your plan.", + "message": "You cannot invite more than $COUNT$ members without upgrading your plan.", "placeholders": { "count": { "content": "$1", @@ -3174,7 +3194,7 @@ } }, "subscriptionFamiliesPlan": { - "message": "You cannot invite more than $COUNT$ users without upgrading your plan. Please contact Customer Support to upgrade.", + "message": "You cannot invite more than $COUNT$ members without upgrading your plan. Please contact Customer Support to upgrade.", "placeholders": { "count": { "content": "$1", @@ -3183,7 +3203,7 @@ } }, "subscriptionSponsoredFamiliesPlan": { - "message": "Your subscription allows for a total of $COUNT$ users. Your plan is sponsored and billed to an external organization.", + "message": "Your subscription allows for a total of $COUNT$ members. Your plan is sponsored and billed to an external organization.", "placeholders": { "count": { "content": "$1", @@ -3192,7 +3212,7 @@ } }, "subscriptionMaxReached": { - "message": "Adjustments to your subscription will result in prorated changes to your billing totals. You cannot invite more than $COUNT$ users without increasing your subscription seats.", + "message": "Adjustments to your subscription will result in prorated changes to your billing totals. You cannot invite more than $COUNT$ members without increasing your subscription seats.", "placeholders": { "count": { "content": "$1", @@ -3686,6 +3706,12 @@ "ssoIdentifierRequired": { "message": "Organization identifier is required." }, + "ssoIdentifier": { + "message": "SSO Identifier" + }, + "ssoIdentifierHint": { + "message": "Provide this ID to your members to login with SSO." + }, "unlinkSso": { "message": "Unlink SSO" }, @@ -4031,7 +4057,7 @@ "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated." }, "disableSendExemption": { - "message": "Organization users that can manage the organization's policies are exempt from this policy's enforcement." + "message": "Organization members that can manage the organization's policies are exempt from this policy's enforcement." }, "sendDisabled": { "message": "Send removed", @@ -4050,7 +4076,7 @@ "description": "'Sends' is a plural noun and the name of a feature called 'Bitwarden Send'. It should not be translated." }, "sendOptionsExemption": { - "message": "Organization users that can manage the organization's policies are exempt from this policy's enforcement." + "message": "Organization members that can manage the organization's policies are exempt from this policy's enforcement." }, "disableHideEmail": { "message": "Always show member’s email address with recipients when creating or editing a Send.", @@ -4087,6 +4113,9 @@ "permissions": { "message": "Permissions" }, + "permission": { + "message": "Permission" + }, "managerPermissions": { "message": "Manager Permissions" }, @@ -4361,19 +4390,19 @@ "message": "Allow admins to reset master passwords for members." }, "resetPasswordPolicyWarning": { - "message": "Users in the organization will need to self-enroll or be auto-enrolled before administrators can reset their master password." + "message": "Members in the organization will need to self-enroll or be auto-enrolled before administrators can reset their master password." }, "resetPasswordPolicyAutoEnroll": { "message": "Automatic enrollment" }, "resetPasswordPolicyAutoEnrollDescription": { - "message": "All users will be automatically enrolled in password reset once their invite is accepted and will not be allowed to withdraw." + "message": "All members will be automatically enrolled in password reset once their invite is accepted and will not be allowed to withdraw." }, "resetPasswordPolicyAutoEnrollWarning": { - "message": "Users already in the organization will not be retroactively enrolled in password reset. They will need to self-enroll before administrators can reset their master password." + "message": "Members already in the organization will not be retroactively enrolled in password reset. They will need to self-enroll before administrators can reset their master password." }, "resetPasswordPolicyAutoEnrollCheckbox": { - "message": "Require new users to be enrolled automatically" + "message": "Require new members to be enrolled automatically" }, "resetPasswordAutoEnrollInviteWarning": { "message": "This organization has an Enterprise policy that will automatically enroll you in password reset. Enrollment will allow organization administrators to change your master password." @@ -4492,6 +4521,10 @@ "clients": { "message": "Clients" }, + "client": { + "message": "Client", + "description": "This is used as a table header to describe which client application created an event log." + }, "providerAdmin": { "message": "Provider admin" }, @@ -5376,6 +5409,15 @@ } } }, + "inputMaxLength": { + "message": "Input must not exceed $COUNT$ characters in length.", + "placeholders": { + "count": { + "content": "$1", + "example": "20" + } + } + }, "fieldsNeedAttention": { "message": "$COUNT$ field(s) above need your attention.", "placeholders": { @@ -5391,6 +5433,12 @@ "on": { "message": "On" }, + "members": { + "message": "Members" + }, + "reporting": { + "message": "Reporting" + }, "cardBrandMir": { "message": "Mir" }, @@ -5414,5 +5462,41 @@ }, "multiSelectClearAll": { "message": "Clear all" + }, + "from": { + "message": "From" + }, + "to": { + "message": "To" + }, + "member": { + "message": "Member" + }, + "update": { + "message": "Update" + }, + "role": { + "message": "Role" + }, + "canView": { + "message": "Can view" + }, + "canViewExceptPass": { + "message": "Can view, except passwords" + }, + "canEdit": { + "message": "Can edit" + }, + "canEditExceptPass": { + "message": "Can edit, except passwords" + }, + "group": { + "message": "Group" + }, + "groupAccessAll": { + "message": "This group can access and modify all items." + }, + "memberAccessAll": { + "message": "This member can access and modify all items." } } diff --git a/bitwarden_license/bit-web/src/app/organizations/components/base-cva.component.ts b/bitwarden_license/bit-web/src/app/organizations/components/base-cva.component.ts index e49eac0c59..11fb78e41e 100644 --- a/bitwarden_license/bit-web/src/app/organizations/components/base-cva.component.ts +++ b/bitwarden_license/bit-web/src/app/organizations/components/base-cva.component.ts @@ -1,8 +1,6 @@ import { Directive, Input, OnInit, Self } from "@angular/core"; import { ControlValueAccessor, UntypedFormControl, NgControl, Validators } from "@angular/forms"; -import { dirtyRequired } from "@bitwarden/angular/validators/dirty.validator"; - /** For use in the SSO Config Form only - will be deprecated by the Component Library */ @Directive() export abstract class BaseCvaComponent implements ControlValueAccessor, OnInit { @@ -15,10 +13,7 @@ export abstract class BaseCvaComponent implements ControlValueAccessor, OnInit { } get isRequired() { - return ( - this.controlDir.control.hasValidator(Validators.required) || - this.controlDir.control.hasValidator(dirtyRequired) - ); + return this.controlDir.control.hasValidator(Validators.required); } @Input() label: string; diff --git a/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.html b/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.html deleted file mode 100644 index b25edf6363..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- -
- -
- -
-
- -
-
-
diff --git a/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.ts b/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.ts deleted file mode 100644 index 4b9a675b08..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, Input } from "@angular/core"; - -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; - -/** For use in the SSO Config Form only - will be deprecated by the Component Library */ -@Component({ - selector: "app-input-text-readonly", - templateUrl: "input-text-readonly.component.html", -}) -export class InputTextReadOnlyComponent { - @Input() controlValue: string; - @Input() label: string; - @Input() showCopy = true; - @Input() showLaunch = false; - - constructor(private platformUtilsService: PlatformUtilsService) {} - - copy(value: string) { - this.platformUtilsService.copyToClipboard(value); - } - - launchUri(url: string) { - this.platformUtilsService.launchUri(url); - } -} diff --git a/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.html b/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.html deleted file mode 100644 index e19963474c..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.html +++ /dev/null @@ -1,33 +0,0 @@ -
- - -
- - {{ helperText }} - - - - {{ "error" | i18n }}: - {{ - controlDir.control.hasError(helperTextSameAsError) - ? helperText - : ("fieldRequiredError" | i18n: label) - }} - -
-
diff --git a/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.ts b/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.ts deleted file mode 100644 index a8810e3806..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/input-text.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, Input, OnInit } from "@angular/core"; - -import { BaseCvaComponent } from "./base-cva.component"; - -/** For use in the SSO Config Form only - will be deprecated by the Component Library */ -@Component({ - selector: "app-input-text[label][controlId]", - templateUrl: "input-text.component.html", -}) -export class InputTextComponent extends BaseCvaComponent implements OnInit { - @Input() helperTextSameAsError: string; - @Input() requiredErrorMessage: string; - @Input() stripSpaces = false; - - transformValue: (value: string) => string = null; - - ngOnInit() { - super.ngOnInit(); - if (this.stripSpaces) { - this.transformValue = this.doStripSpaces; - } - } - - writeValue(value: string) { - this.internalControl.setValue(value == null ? "" : value); - } - - protected onValueChangesInternal: any = (value: string) => { - let newValue = value; - if (this.transformValue != null) { - newValue = this.transformValue(value); - this.internalControl.setValue(newValue, { emitEvent: false }); - } - this.onChange(newValue); - }; - - protected onValueChangeInternal(value: string) { - let newValue = value; - if (this.transformValue != null) { - newValue = this.transformValue(value); - this.internalControl.setValue(newValue, { emitEvent: false }); - } - } - - private doStripSpaces(value: string) { - return value.replace(/ /g, ""); - } -} diff --git a/bitwarden_license/bit-web/src/app/organizations/components/select.component.html b/bitwarden_license/bit-web/src/app/organizations/components/select.component.html deleted file mode 100644 index bc2108e8af..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/select.component.html +++ /dev/null @@ -1,19 +0,0 @@ -
- - -
diff --git a/bitwarden_license/bit-web/src/app/organizations/components/select.component.ts b/bitwarden_license/bit-web/src/app/organizations/components/select.component.ts deleted file mode 100644 index 5c2ab30867..0000000000 --- a/bitwarden_license/bit-web/src/app/organizations/components/select.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component, Input } from "@angular/core"; - -import { SelectOptions } from "@bitwarden/angular/interfaces/selectOptions"; - -import { BaseCvaComponent } from "./base-cva.component"; - -/** For use in the SSO Config Form only - will be deprecated by the Component Library */ -@Component({ - selector: "app-select", - templateUrl: "select.component.html", -}) -export class SelectComponent extends BaseCvaComponent { - @Input() selectOptions: SelectOptions[]; -} diff --git a/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html b/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html index 525dc22b8e..2c6f45c3a3 100644 --- a/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html +++ b/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html @@ -35,6 +35,14 @@ [helperText]="'allowSsoDesc' | i18n" > + + {{ "ssoIdentifier" | i18n }} + + {{ "ssoIdentifierHint" | i18n }} + + +
+
@@ -80,66 +88,55 @@ {{ "keyConnectorWarning" | i18n }} -
- -
- -
- -
-
-
- - - {{ "error" | i18n }}: - {{ "keyConnectorTestFail" | i18n }} + + {{ "keyConnectorUrl" | i18n }} + + + + + + {{ "keyConnectorTestSuccess" | i18n }} - - - - {{ "keyConnectorTestSuccess" | i18n }} - - -
-
+ + - - +
+ + + {{ "type" | i18n }} + + @@ -150,52 +147,67 @@

{{ "openIdConnectConfig" | i18n }}

- + + {{ "callbackPath" | i18n }} + + + - + + {{ "signedOutCallbackPath" | i18n }} + + + - + + {{ "authority" | i18n }} + + - + + {{ "clientId" | i18n }} + + - + + {{ "clientSecret" | i18n }} + + - + + {{ "metadataAddress" | i18n }} + + {{ "openIdAuthorityRequired" | i18n }} + - - + + {{ "oidcRedirectBehavior" | i18n }} + +
- + + {{ "additionalScopes" | i18n }} + + {{ "separateMultipleWithComma" | i18n }} + - + + {{ "additionalUserIdClaimTypes" | i18n }} + + {{ "separateMultipleWithComma" | i18n }} + - + + {{ "additionalEmailClaimTypes" | i18n }} + + {{ "separateMultipleWithComma" | i18n }} + - + + {{ "additionalNameClaimTypes" | i18n }} + + {{ "separateMultipleWithComma" | i18n }} + - + + {{ "acrValues" | i18n }} + + acr_values + - + + {{ "expectedReturnAcrValue" | i18n }} + + acr_validaton +
@@ -282,53 +288,108 @@

{{ "samlSpConfig" | i18n }}

- + + {{ "spEntityId" | i18n }} + + + - + + {{ "spMetadataUrl" | i18n }} + + + + - + + {{ "spAcsUrl" | i18n }} + + + - - + + {{ "spNameIdFormat" | i18n }} + + - - + + {{ "spOutboundSigningAlgorithm" | i18n }} + + - - + + {{ "spSigningBehavior" | i18n }} + + - - + + {{ "spMinIncomingSigningAlgorithm" | i18n }} + +

{{ "samlIdpConfig" | i18n }}

- + + {{ "idpEntityId" | i18n }} + + - - + + {{ "idpBindingType" | i18n }} + + - + + {{ "idpSingleSignOnServiceUrl" | i18n }} + + {{ "idpSingleSignOnServiceUrlRequired" | i18n }} + - + + {{ "idpSingleLogoutServiceUrl" | i18n }} + + -
- - - - - {{ "error" | i18n }}: - {{ "fieldRequiredError" | i18n: ("idpX509PublicCert" | i18n) }} - -
+ + {{ "idpX509PublicCert" | i18n }} + + - - + + {{ "idpOutboundSigningAlgorithm" | i18n }} + +