From 39655ebe29b9921fdbd6843cad1468dcf1509729 Mon Sep 17 00:00:00 2001 From: Andreas Coroiu Date: Tue, 22 Nov 2022 14:33:47 +0100 Subject: [PATCH] [EC-73] edit collection modal (#3638) * [EC-16] Cleanup RxJS linting problems * [EC-16] Update Group tab to use table component and show collections. * [EC-16] Extract interface from GroupResponse and use it in the view * [EC-16] Remove heading underline * [EC-16] Cleanup i18n * [EC-16] More i18n cleanup * [EC-16] Fix bulk group request type name * [EC-16] Rename group details type * [EC-73] feat: add inital version of modal using dialog service * [EC-73] feat: create story for dialog * [EC-73] feat: setup story with support for injected data * [EC-73] feat: add inital version of subtitle * [EC-73] feat: add tabs * [EC-73] feat: initial version of collection info form * [EC-73] feat: start of working form * [EC-73] feat: add custom form validator * [EC-73] fix: dialog directive names after rebase * [EC-73] feat: use custom validator * [EC-73] fix: story * [EC-73] feat: allow parent picking * [EC-73] feat: remove tabs to allow for merging * [EC-73] feat: extend story with new and edit dialogs * [EC-73] feat: change title depending on if editing or not * [EC-73] fix: parent not connected to form * [EC-73] feat: add organizationId to dialog data * [EC-73] feat: only allow nesting within collections with access * [EC-73] feat: handle loading with spinner * [EC-73] feat: update collections on submit * [EC-73] feat: reload on save * [EC-73] feat: update story to work with latest changes * [EC-73] feat: always fetch collections from server * [EC-73] fix: do not submit if form invalid * [EC-73] feat: create new collections using new ui * [EC-73] fix: external id not being saved * [EC-73] chore: move calls to separete collection admin service * [EC-73] feat: use new admin views * [EC-73] feat: implement deletion * [EC-73] feat: add support for collection details in service * [EC-73] fix: story * [EC-73] fix: cancel button * [EC-73] feat: re-add tabs * [EC-73] fix: jslib service collection deps * [EC-73] chore: rename component to collection-dialog * [EC-73] chore: clean up collection api service which was replaced * [EC-73] chore: restore collection.service * [EC-73] chore: restore dialog component changes * [EC-73] fix: move subscription to ngOnInit * [EC-73] feat: disable padding when using tabbed content * [EC-73] fix: new lint rules after merge * Add Access Selector Component and Stories * Cherry pick FormSelectionList * Fix some problems caused from cherry-pick * Fix some Web module problems caused from cherry-pick * Move AccessSelector out of the root components directory. Move UserType pipe to AccessSelectorModule * Fix broken member access selector story * Add organization feature module * Undo changes to messages.json * Fix messages.json * Remove redundant CommonModule * [EC-86] Clear collectionMap before populating it with new collections * [EC-86] Update initialization/loading logic to make better use of the Observable pattern * [EC-86] Make table cells use a pointer cursor * [EC-86] Use bitIconButton for row menu triggers * [EC-86] Refactor GroupDetailsRow interface to wrap GroupDetailsResponse. Remove response model interfaces. Cleanup GroupsComponent. * [EC-86] Add bit-badge-list component and tweak BadgeModule to support both the component and directive. Update mockI18nService to support templated strings. * [EC-86] Cleanup badge color and bitIconButton classes * [EC-86] Cleanup more styles * [EC-86] Add GroupApiService Add a new GroupApiService to replace Group Api calls in the ApiService. * [EC-599] Fix avatar/icon sizing * [EC-599] Remove padding in permission column * [EC-599] Make FormSelectionList operations immutable * [EC-599] Integrate the multi-select component * [EC-599] Handle readonly/access all edge cases * [EC-599] Add initial unit tests Also cleans up public interface for the AccessSelectorComponent. Fixes a bug found during unit test creation. * [EC-599] Include item name in control labels * [EC-599] Cleanup member email display * [EC-86] Revisions for badge-list implementation. - Remove `| null` for maxItems according to ADR-0014 - Remove custom setter for items - Use ngOnChanges to update filteredItems - Fix sr-only tailwind class and show screen reader comma after last item if truncated. * [EC-86] Refactor badge-list module/component - Move the badge list component to its own module. - Extract badge list stories from badge stories. - Cleanup bade stories and module after refactor. * [EC-86] Refactor/rename GroupApiService - Re-name GroupApiService to GroupService as there is no need for a separate Api service (no sync or local data for admin services) - Add GroupView for use in the GroupService instead of raw API models - Update views to use GroupView instead of raw GroupResponse models * [EC-86] Refactor group API request models - Move organizationGroupBulkRequest to group requests folder - Fix relative imports in GroupService * [EC-86] Fix linting errors * Fix tab item text color Tab item text color broke after a merge from master and needs a fix to account for bootstrap styles in Web. * [EC-599] Review suggestions - Change PermissionMode to Enum - Rename permControl to permissionControl to be more clear - Rename FormSelectionList file to kebab case. - Move permission row boolean logic to named function for readability * [EC-599] Cleanup AccessSelectorComponent tests - Clarify test states - Add tests for column rendering - Add tests for permission mode - Add id to column headers for testing - Fix small permissionControl bug found during testing * [EC-599] Add FormSelectionList unit tests * [EC-73] chore: re-add collections page * [EC-86] Rename new files using kebab-case * [EC-73] chore: move component to shared org module * Fix MultiSelect component styles and CSP error (#3841) * Update Web styles and CSP to support MultiSelect component - Include the MultiSelect module in the CL barrel file of exports - Import the MultiSelect scss into the Web styles.scss - Add the necessary sha256 hash to webpack CSP policy to support ngSelect inline styles * Undo removal of 127.0.0.1 from webpack CSP (cherry picked from commit 3ed1221f7f150928612f3fab01a2ae63a39f781a) * [EC-73] feat: add empty access selector * [EC-73] feat: add groups to access selector * [EC-73] chore: improve storybook support * [EC-73] feat: tweak item assignment * [EC-73] feat: add support for showing users * [EC-73] feat: use async actions * [EC-73] chore: clean up casting * [EC-73] fix: permissions not loading correctly in access selector * [EC-73] feat: implement saving group permissions * [EC-73] feat: rename to collection access selection view * [EC-73] feat: save users as well * [EC-73] fix: access selector usage * [EC-73] feat: new collection creation * [EC-73] feat: fetch users from collection details * [EC-73] chore: clean up * [EC-73] fix: circular dependency issues * [EC-73] fix: import shared module directly to workaround build issues * [EC-73] fix: missing dependencies in story * [EC-73] chore: move story * [EC-73] fix: manual cherry pick permission bug fix * [EC-73] feat: hide delete button if no permission * [EC-73] feat: properly handle orgs without groups * [EC-73] fix: use correct functions in template * [EC-73] feat: properly handle non-existing parent * [EC-73] chore: use double ngIf instead of else template * [EC-73] fix: add type to dialog ref * [EC-73] fix: restrict field modifiers * [EC-73] fix: use result enum directly * [EC-73] fix: simplify mapping logic * [EC-73] * [EC-73] feat: add story for free orgs without groups * [EC-73] fix: parametrized i18n * [EC-73] feat: create new shared org module * [EC-73] feat: move collection dialog to shared * [EC-73] feat: move access selector to shared * [EC-73] feat: create core organization module * [EC-73] feat: move collection admin service to web * [EC-73] feat: move collection admin views to web * [EC-73] fix: missing i18n * [EC-73] fix: refactor for type safety * [EC-73] fix: storybook not compiling again * [EC-73] feat: use helper function to open dialog * [EC-73] chore: remove comment * [EC-73] fix: revert permission fix * [EC-73] fix: only show delete if in edit mode * [EC-73] chore: remove ngIf else in template * [EC-73] fix: add missing appA11yTitle * [EC-73] chore: rename remove to delete * [EC-73] chore: refactor ngOnInit * [EC-73] fix: dialog position strategy * [EC-73] fix: revert spinner to old way of doing it Signed-off-by: Jacob Fink Co-authored-by: Shane Melton Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Co-authored-by: Thomas Rittson --- .../core/core-organization.module.ts | 4 + apps/web/src/app/organizations/core/index.ts | 4 + .../core/services/collection-admin.service.ts | 123 ++++++++ .../views/collection-access-selection-view.ts | 25 ++ .../core/views/collection-admin-view.ts | 25 ++ .../manage/collection-add-edit.component.html | 162 ----------- .../manage/collection-add-edit.component.ts | 181 ------------ .../manage/collections.component.html | 10 + .../manage/collections.component.ts | 46 ++- .../manage/group-add-edit.component.ts | 5 +- .../organizations/manage/groups.component.ts | 10 - .../organization-routing.module.ts | 15 + .../app/organizations/organization.module.ts | 22 +- .../access-selector.component.html | 0 .../access-selector.component.spec.ts | 2 +- .../access-selector.component.ts | 0 .../access-selector/access-selector.models.ts | 2 +- .../access-selector/access-selector.module.ts | 2 +- .../access-selector.stories.ts | 2 +- .../components/access-selector/index.ts | 0 .../access-selector/user-type.pipe.ts | 0 .../collection-dialog.component.html | 94 +++++++ .../collection-dialog.component.ts | 266 ++++++++++++++++++ .../collection-dialog.module.ts | 13 + .../collection-dialog.stories.ts | 245 ++++++++++++++++ .../components/collection-dialog/index.ts | 2 + .../web/src/app/organizations/shared/index.ts | 2 + .../shared/shared-organization.module.ts | 9 + .../src/app/shared/loose-components.module.ts | 2 +- apps/web/src/app/shared/shared.module.ts | 5 +- apps/web/src/locales/en/messages.json | 46 ++- .../src/services/jslib-services.module.ts | 7 + libs/common/src/abstractions/api.service.ts | 4 +- .../group/group.service.abstraction.ts | 9 + libs/common/src/abstractions/group/index.ts | 2 + .../group/responses/group-response.ts | 31 ++ libs/common/src/misc/utils.ts | 4 + .../src/models/request/collection.request.ts | 1 + .../models/response/collection.response.ts | 8 +- .../common/src/models/view/collection.view.ts | 4 +- libs/common/src/models/view/group-view.ts | 17 ++ libs/common/src/services/api.service.ts | 6 +- .../src/services/group/group.service.ts | 65 +++++ .../organization-group-bulk-request.ts | 7 + .../async-actions/form-button.directive.ts | 3 +- .../src/badge-list/badge-list.component.ts | 4 +- libs/components/src/badge/badge.directive.ts | 8 +- libs/components/src/badge/badge.stories.ts | 8 +- libs/components/src/badge/index.ts | 2 +- .../src/callout/callout.component.spec.ts | 2 +- .../src/form-field/bit-validators.stories.ts | 56 ++++ .../forbidden-characters.validator.spec.ts | 45 +++ .../forbidden-characters.validator.ts | 23 ++ .../src/form-field/bit-validators/index.ts | 1 + .../src/form-field/error.component.ts | 2 + libs/components/src/form-field/index.ts | 1 + libs/components/src/multi-select/index.ts | 1 + 57 files changed, 1225 insertions(+), 420 deletions(-) create mode 100644 apps/web/src/app/organizations/core/core-organization.module.ts create mode 100644 apps/web/src/app/organizations/core/index.ts create mode 100644 apps/web/src/app/organizations/core/services/collection-admin.service.ts create mode 100644 apps/web/src/app/organizations/core/views/collection-access-selection-view.ts create mode 100644 apps/web/src/app/organizations/core/views/collection-admin-view.ts delete mode 100644 apps/web/src/app/organizations/manage/collection-add-edit.component.html delete mode 100644 apps/web/src/app/organizations/manage/collection-add-edit.component.ts rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.component.html (100%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.component.spec.ts (98%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.component.ts (100%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.models.ts (97%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.module.ts (83%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/access-selector.stories.ts (98%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/index.ts (100%) rename apps/web/src/app/organizations/{ => shared}/components/access-selector/user-type.pipe.ts (100%) create mode 100644 apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html create mode 100644 apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.ts create mode 100644 apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.module.ts create mode 100644 apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.stories.ts create mode 100644 apps/web/src/app/organizations/shared/components/collection-dialog/index.ts create mode 100644 apps/web/src/app/organizations/shared/index.ts create mode 100644 apps/web/src/app/organizations/shared/shared-organization.module.ts create mode 100644 libs/common/src/abstractions/group/group.service.abstraction.ts create mode 100644 libs/common/src/abstractions/group/index.ts create mode 100644 libs/common/src/abstractions/group/responses/group-response.ts create mode 100644 libs/common/src/models/view/group-view.ts create mode 100644 libs/common/src/services/group/group.service.ts create mode 100644 libs/common/src/services/group/requests/organization-group-bulk-request.ts create mode 100644 libs/components/src/form-field/bit-validators.stories.ts create mode 100644 libs/components/src/form-field/bit-validators/forbidden-characters.validator.spec.ts create mode 100644 libs/components/src/form-field/bit-validators/forbidden-characters.validator.ts create mode 100644 libs/components/src/form-field/bit-validators/index.ts diff --git a/apps/web/src/app/organizations/core/core-organization.module.ts b/apps/web/src/app/organizations/core/core-organization.module.ts new file mode 100644 index 0000000000..57362e01d7 --- /dev/null +++ b/apps/web/src/app/organizations/core/core-organization.module.ts @@ -0,0 +1,4 @@ +import { NgModule } from "@angular/core"; + +@NgModule({}) +export class CoreOrganizationModule {} diff --git a/apps/web/src/app/organizations/core/index.ts b/apps/web/src/app/organizations/core/index.ts new file mode 100644 index 0000000000..e68991103c --- /dev/null +++ b/apps/web/src/app/organizations/core/index.ts @@ -0,0 +1,4 @@ +export * from "./core-organization.module"; +export * from "./services/collection-admin.service"; +export * from "./views/collection-access-selection-view"; +export * from "./views/collection-admin-view"; diff --git a/apps/web/src/app/organizations/core/services/collection-admin.service.ts b/apps/web/src/app/organizations/core/services/collection-admin.service.ts new file mode 100644 index 0000000000..039751eb75 --- /dev/null +++ b/apps/web/src/app/organizations/core/services/collection-admin.service.ts @@ -0,0 +1,123 @@ +import { Injectable } from "@angular/core"; + +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { CryptoService } from "@bitwarden/common/abstractions/crypto.service"; +import { EncString } from "@bitwarden/common/models/domain/enc-string"; +import { CollectionRequest } from "@bitwarden/common/models/request/collection.request"; +import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request"; +import { + CollectionAccessDetailsResponse, + CollectionResponse, +} from "@bitwarden/common/models/response/collection.response"; +import { CollectionView } from "@bitwarden/common/models/view/collection.view"; + +import { CoreOrganizationModule } from "../core-organization.module"; +import { CollectionAdminView } from "../views/collection-admin-view"; + +@Injectable({ providedIn: CoreOrganizationModule }) +export class CollectionAdminService { + constructor(private apiService: ApiService, private cryptoService: CryptoService) {} + + async getAll(organizationId: string): Promise { + const collectionResponse = await this.apiService.getCollections(organizationId); + if (collectionResponse?.data == null || collectionResponse.data.length === 0) { + return []; + } + + return await this.decryptMany(organizationId, collectionResponse.data); + } + + async get( + organizationId: string, + collectionId: string + ): Promise { + const collectionResponse = await this.apiService.getCollectionDetails( + organizationId, + collectionId + ); + + if (collectionResponse == null) { + return undefined; + } + + const [view] = await this.decryptMany(organizationId, [collectionResponse]); + + return view; + } + + async save(collection: CollectionAdminView): Promise { + const request = await this.encrypt(collection); + + let response: CollectionResponse; + if (collection.id == null) { + response = await this.apiService.postCollection(collection.organizationId, request); + collection.id = response.id; + } else { + response = await this.apiService.putCollection( + collection.organizationId, + collection.id, + request + ); + } + + // TODO: Implement upsert when in PS-1083: Collection Service refactors + // await this.collectionService.upsert(data); + return; + } + + async delete(organizationId: string, collectionId: string): Promise { + await this.apiService.deleteCollection(organizationId, collectionId); + } + + private async decryptMany( + organizationId: string, + collections: CollectionResponse[] | CollectionAccessDetailsResponse[] + ): Promise { + const orgKey = await this.cryptoService.getOrgKey(organizationId); + + const promises = collections.map(async (c) => { + const view = new CollectionAdminView(); + view.id = c.id; + view.name = await this.cryptoService.decryptToUtf8(new EncString(c.name), orgKey); + view.externalId = c.externalId; + view.organizationId = c.organizationId; + + if (isCollectionAccessDetailsResponse(c)) { + view.groups = c.groups; + view.users = c.users; + } + + return view; + }); + + return await Promise.all(promises); + } + + private async encrypt(model: CollectionAdminView): Promise { + if (model.organizationId == null) { + throw new Error("Collection has no organization id."); + } + const key = await this.cryptoService.getOrgKey(model.organizationId); + if (key == null) { + throw new Error("No key for this collection's organization."); + } + const collection = new CollectionRequest(); + collection.externalId = model.externalId; + collection.name = (await this.cryptoService.encrypt(model.name, key)).encryptedString; + collection.groups = model.groups.map( + (group) => new SelectionReadOnlyRequest(group.id, group.readOnly, group.hidePasswords) + ); + collection.users = model.users.map( + (user) => new SelectionReadOnlyRequest(user.id, user.readOnly, user.hidePasswords) + ); + return collection; + } +} + +function isCollectionAccessDetailsResponse( + response: CollectionResponse | CollectionAccessDetailsResponse +): response is CollectionAccessDetailsResponse { + const anyResponse = response as any; + + return anyResponse?.groups instanceof Array && anyResponse?.users instanceof Array; +} diff --git a/apps/web/src/app/organizations/core/views/collection-access-selection-view.ts b/apps/web/src/app/organizations/core/views/collection-access-selection-view.ts new file mode 100644 index 0000000000..38191605fd --- /dev/null +++ b/apps/web/src/app/organizations/core/views/collection-access-selection-view.ts @@ -0,0 +1,25 @@ +import { View } from "@bitwarden/common/models/view/view"; + +interface SelectionResponseLike { + id: string; + readOnly: boolean; + hidePasswords: boolean; +} + +export class CollectionAccessSelectionView extends View { + readonly id: string; + readonly readOnly: boolean; + readonly hidePasswords: boolean; + + constructor(response?: SelectionResponseLike) { + super(); + + if (!response) { + return; + } + + this.id = response.id; + this.readOnly = response.readOnly; + this.hidePasswords = response.hidePasswords; + } +} diff --git a/apps/web/src/app/organizations/core/views/collection-admin-view.ts b/apps/web/src/app/organizations/core/views/collection-admin-view.ts new file mode 100644 index 0000000000..e0ad35bf43 --- /dev/null +++ b/apps/web/src/app/organizations/core/views/collection-admin-view.ts @@ -0,0 +1,25 @@ +import { CollectionView } from "@bitwarden/common/models/view/collection.view"; +import { CollectionAccessDetailsResponse } from "@bitwarden/common/src/models/response/collection.response"; + +import { CollectionAccessSelectionView } from "./collection-access-selection-view"; + +export class CollectionAdminView extends CollectionView { + groups: CollectionAccessSelectionView[] = []; + users: CollectionAccessSelectionView[] = []; + + constructor(response?: CollectionAccessDetailsResponse) { + super(response); + + if (!response) { + return; + } + + this.groups = response.groups + ? response.groups.map((g) => new CollectionAccessSelectionView(g)) + : []; + + this.users = response.users + ? response.users.map((g) => new CollectionAccessSelectionView(g)) + : []; + } +} diff --git a/apps/web/src/app/organizations/manage/collection-add-edit.component.html b/apps/web/src/app/organizations/manage/collection-add-edit.component.html deleted file mode 100644 index 97c973a419..0000000000 --- a/apps/web/src/app/organizations/manage/collection-add-edit.component.html +++ /dev/null @@ -1,162 +0,0 @@ - diff --git a/apps/web/src/app/organizations/manage/collection-add-edit.component.ts b/apps/web/src/app/organizations/manage/collection-add-edit.component.ts deleted file mode 100644 index 6f0ad08292..0000000000 --- a/apps/web/src/app/organizations/manage/collection-add-edit.component.ts +++ /dev/null @@ -1,181 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; - -import { ApiService } from "@bitwarden/common/abstractions/api.service"; -import { CryptoService } from "@bitwarden/common/abstractions/crypto.service"; -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; -import { LogService } from "@bitwarden/common/abstractions/log.service"; -import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; -import { Utils } from "@bitwarden/common/misc/utils"; -import { EncString } from "@bitwarden/common/models/domain/enc-string"; -import { SymmetricCryptoKey } from "@bitwarden/common/models/domain/symmetric-crypto-key"; -import { CollectionRequest } from "@bitwarden/common/models/request/collection.request"; -import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request"; - -import { GroupServiceAbstraction } from "../services/abstractions/group"; -import { GroupView } from "../views/group.view"; - -@Component({ - selector: "app-collection-add-edit", - templateUrl: "collection-add-edit.component.html", -}) -export class CollectionAddEditComponent implements OnInit { - @Input() collectionId: string; - @Input() organizationId: string; - @Input() canSave: boolean; - @Input() canDelete: boolean; - @Output() onSavedCollection = new EventEmitter(); - @Output() onDeletedCollection = new EventEmitter(); - - loading = true; - editMode = false; - accessGroups = false; - title: string; - name: string; - externalId: string; - groups: GroupView[] = []; - formPromise: Promise; - deletePromise: Promise; - - private orgKey: SymmetricCryptoKey; - - constructor( - private apiService: ApiService, - private groupApiService: GroupServiceAbstraction, - private i18nService: I18nService, - private platformUtilsService: PlatformUtilsService, - private cryptoService: CryptoService, - private logService: LogService, - private organizationService: OrganizationService - ) {} - - async ngOnInit() { - const organization = await this.organizationService.get(this.organizationId); - this.accessGroups = organization.useGroups; - this.editMode = this.loading = this.collectionId != null; - if (this.accessGroups) { - const groupsResponse = await this.groupApiService.getAll(this.organizationId); - this.groups = groupsResponse.sort(Utils.getSortFunction(this.i18nService, "name")); - } - this.orgKey = await this.cryptoService.getOrgKey(this.organizationId); - - if (this.editMode) { - this.editMode = true; - this.title = this.i18nService.t("editCollection"); - try { - const collection = await this.apiService.getCollectionDetails( - this.organizationId, - this.collectionId - ); - this.name = await this.cryptoService.decryptToUtf8( - new EncString(collection.name), - this.orgKey - ); - this.externalId = collection.externalId; - if (collection.groups != null && this.groups.length > 0) { - collection.groups.forEach((s) => { - const group = this.groups.filter((g) => !g.accessAll && g.id === s.id); - if (group != null && group.length > 0) { - (group[0] as any).checked = true; - (group[0] as any).readOnly = s.readOnly; - (group[0] as any).hidePasswords = s.hidePasswords; - } - }); - } - } catch (e) { - this.logService.error(e); - } - } else { - this.title = this.i18nService.t("addCollection"); - } - - this.groups.forEach((g) => { - if (g.accessAll) { - (g as any).checked = true; - } - }); - - this.loading = false; - } - - check(g: GroupView, select?: boolean) { - if (g.accessAll) { - return; - } - (g as any).checked = select == null ? !(g as any).checked : select; - if (!(g as any).checked) { - (g as any).readOnly = false; - (g as any).hidePasswords = false; - } - } - - selectAll(select: boolean) { - this.groups.forEach((g) => this.check(g, select)); - } - - async submit() { - if (this.orgKey == null) { - throw new Error("No encryption key for this organization."); - } - - const request = new CollectionRequest(); - request.name = (await this.cryptoService.encrypt(this.name, this.orgKey)).encryptedString; - request.externalId = this.externalId; - request.groups = this.groups - .filter((g) => (g as any).checked && !g.accessAll) - .map( - (g) => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly, !!(g as any).hidePasswords) - ); - - try { - if (this.editMode) { - this.formPromise = this.apiService.putCollection( - this.organizationId, - this.collectionId, - request - ); - } else { - this.formPromise = this.apiService.postCollection(this.organizationId, request); - } - await this.formPromise; - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t(this.editMode ? "editedCollectionId" : "createdCollectionId", this.name) - ); - this.onSavedCollection.emit(); - } catch (e) { - this.logService.error(e); - } - } - - async delete() { - if (!this.editMode) { - return; - } - - const confirmed = await this.platformUtilsService.showDialog( - this.i18nService.t("deleteCollectionConfirmation"), - this.name, - this.i18nService.t("yes"), - this.i18nService.t("no"), - "warning" - ); - if (!confirmed) { - return false; - } - - try { - this.deletePromise = this.apiService.deleteCollection(this.organizationId, this.collectionId); - await this.deletePromise; - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t("deletedCollectionId", this.name) - ); - this.onDeletedCollection.emit(); - } catch (e) { - this.logService.error(e); - } - } -} diff --git a/apps/web/src/app/organizations/manage/collections.component.html b/apps/web/src/app/organizations/manage/collections.component.html index 976a63fe6d..69fc9e9896 100644 --- a/apps/web/src/app/organizations/manage/collections.component.html +++ b/apps/web/src/app/organizations/manage/collections.component.html @@ -65,6 +65,16 @@
+ + + {{ "edit" | i18n }} + this.pageSize; } - async edit(collection: CollectionView) { - const canCreate = collection == null && this.canCreate; - const canEdit = collection != null && this.canEdit(collection); - const canDelete = collection != null && this.canDelete(collection); + async edit(collection?: CollectionView) { + const canCreate = collection == undefined && this.canCreate; + const canEdit = collection != undefined && this.canEdit(collection); + const canDelete = collection != undefined && this.canDelete(collection); if (!(canCreate || canEdit || canDelete)) { this.platformUtilsService.showToast("error", null, this.i18nService.t("missingPermissions")); return; } - const [modal] = await this.modalService.openViewRef( - CollectionAddEditComponent, - this.addEditModalRef, - (comp) => { - comp.organizationId = this.organizationId; - comp.collectionId = collection != null ? collection.id : null; - comp.canSave = canCreate || canEdit; - comp.canDelete = canDelete; - // eslint-disable-next-line rxjs-angular/prefer-takeuntil - comp.onSavedCollection.subscribe(() => { - modal.close(); - this.load(); - }); - // eslint-disable-next-line rxjs-angular/prefer-takeuntil - comp.onDeletedCollection.subscribe(() => { - modal.close(); - this.removeCollection(collection); - }); - } - ); + const dialog = openCollectionDialog(this.dialogService, this.overlay, { + data: { collectionId: collection?.id, organizationId: this.organizationId }, + }); + + const result = await lastValueFrom(dialog.closed); + if (result === CollectionDialogResult.Saved || result === CollectionDialogResult.Deleted) { + this.load(); + } } add() { diff --git a/apps/web/src/app/organizations/manage/group-add-edit.component.ts b/apps/web/src/app/organizations/manage/group-add-edit.component.ts index d5fc83a108..3eb6e5a80e 100644 --- a/apps/web/src/app/organizations/manage/group-add-edit.component.ts +++ b/apps/web/src/app/organizations/manage/group-add-edit.component.ts @@ -15,6 +15,7 @@ import { CollectionDetailsResponse } from "@bitwarden/common/models/response/col import { ErrorResponse } from "@bitwarden/common/models/response/error.response"; import { DialogService } from "@bitwarden/components"; +import { GroupServiceAbstraction } from "../services/abstractions/group"; import { AccessItemType, AccessItemValue, @@ -22,8 +23,7 @@ import { convertToPermission, convertToSelectionView, PermissionMode, -} from "../components/access-selector"; -import { GroupServiceAbstraction } from "../services/abstractions/group"; +} from "../shared/components/access-selector"; import { GroupView } from "../views/group.view"; /** @@ -179,6 +179,7 @@ export class GroupAddEditComponent implements OnInit, OnDestroy { @Inject(DIALOG_DATA) private params: GroupAddEditDialogParams, private dialogRef: DialogRef, private apiService: ApiService, + private groupApiService: GroupServiceAbstraction, private groupService: GroupServiceAbstraction, private i18nService: I18nService, private collectionService: CollectionService, diff --git a/apps/web/src/app/organizations/manage/groups.component.ts b/apps/web/src/app/organizations/manage/groups.component.ts index 65025b8b36..51c114d2e1 100644 --- a/apps/web/src/app/organizations/manage/groups.component.ts +++ b/apps/web/src/app/organizations/manage/groups.component.ts @@ -48,16 +48,6 @@ type CollectionViewMap = { }; type GroupDetailsRow = { - /** - * Group Id (used for searching) - */ - id: string; - - /** - * Group name (used for searching) - */ - name: string; - /** * Details used for displaying group information */ diff --git a/apps/web/src/app/organizations/organization-routing.module.ts b/apps/web/src/app/organizations/organization-routing.module.ts index f21072f23f..1bfe016023 100644 --- a/apps/web/src/app/organizations/organization-routing.module.ts +++ b/apps/web/src/app/organizations/organization-routing.module.ts @@ -10,7 +10,9 @@ import { import { OrganizationPermissionsGuard } from "./guards/org-permissions.guard"; import { OrganizationLayoutComponent } from "./layouts/organization-layout.component"; +import { CollectionsComponent } from "./manage/collections.component"; import { GroupsComponent } from "./manage/groups.component"; +import { ManageComponent } from "./manage/manage.component"; import { PeopleComponent } from "./manage/people.component"; import { VaultModule } from "./vault/vault.module"; @@ -50,6 +52,19 @@ const routes: Routes = [ organizationPermissions: canAccessGroupsTab, }, }, + { + path: "manage", + component: ManageComponent, + children: [ + { + path: "collections", + component: CollectionsComponent, + data: { + titleId: "collections", + }, + }, + ], + }, { path: "reporting", loadChildren: () => diff --git a/apps/web/src/app/organizations/organization.module.ts b/apps/web/src/app/organizations/organization.module.ts index ca74257780..4356085cb3 100644 --- a/apps/web/src/app/organizations/organization.module.ts +++ b/apps/web/src/app/organizations/organization.module.ts @@ -2,25 +2,29 @@ import { NgModule } from "@angular/core"; import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service"; -import { SharedModule } from "../shared"; +import { SharedModule } from "../shared/shared.module"; -import { AccessSelectorModule } from "./components/access-selector"; -import { CollectionAddEditComponent } from "./manage/collection-add-edit.component"; +import { CoreOrganizationModule } from "./core"; import { GroupAddEditComponent } from "./manage/group-add-edit.component"; import { GroupsComponent } from "./manage/groups.component"; import { UserGroupsComponent } from "./manage/user-groups.component"; import { OrganizationsRoutingModule } from "./organization-routing.module"; import { GroupServiceAbstraction } from "./services/abstractions/group"; import { GroupService } from "./services/group/group.service"; +import { SharedOrganizationModule } from "./shared"; +import { AccessSelectorModule } from "./shared/components/access-selector"; @NgModule({ - imports: [SharedModule, AccessSelectorModule, OrganizationsRoutingModule], - declarations: [ - GroupsComponent, - GroupAddEditComponent, - CollectionAddEditComponent, - UserGroupsComponent, + imports: [ + SharedModule, + OrganizationsRoutingModule, + SharedOrganizationModule, + CoreOrganizationModule, + SharedModule, + AccessSelectorModule, + OrganizationsRoutingModule, ], + declarations: [GroupsComponent, GroupAddEditComponent, UserGroupsComponent], providers: [ { provide: GroupServiceAbstraction, diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.html b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.html similarity index 100% rename from apps/web/src/app/organizations/components/access-selector/access-selector.component.html rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.html diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.spec.ts similarity index 98% rename from apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.spec.ts index 3b2ba911aa..145f1ad11e 100644 --- a/apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts +++ b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.spec.ts @@ -15,7 +15,7 @@ import { } from "@bitwarden/components"; import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view"; -import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; +import { PreloadedEnglishI18nModule } from "../../../../tests/preloaded-english-i18n.module"; import { AccessSelectorComponent, PermissionMode } from "./access-selector.component"; import { AccessItemType, CollectionPermission } from "./access-selector.models"; diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.component.ts b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.ts similarity index 100% rename from apps/web/src/app/organizations/components/access-selector/access-selector.component.ts rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.ts diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.models.ts b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.models.ts similarity index 97% rename from apps/web/src/app/organizations/components/access-selector/access-selector.models.ts rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.models.ts index 5a9f878e55..ba457b9409 100644 --- a/apps/web/src/app/organizations/components/access-selector/access-selector.models.ts +++ b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.models.ts @@ -2,7 +2,7 @@ import { OrganizationUserStatusType } from "@bitwarden/common/enums/organization import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType"; import { SelectItemView } from "@bitwarden/components/src/multi-select/models/select-item-view"; -import { CollectionAccessSelectionView } from "../../views/collection-access-selection.view"; +import { CollectionAccessSelectionView } from "../../../core"; /** * Permission options that replace/correspond with readOnly and hidePassword server fields. diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.module.ts b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.module.ts similarity index 83% rename from apps/web/src/app/organizations/components/access-selector/access-selector.module.ts rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.module.ts index cbb01137b4..9bd0139f32 100644 --- a/apps/web/src/app/organizations/components/access-selector/access-selector.module.ts +++ b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.module.ts @@ -1,6 +1,6 @@ import { NgModule } from "@angular/core"; -import { SharedModule } from "../../../shared"; +import { SharedModule } from "../../../../shared/shared.module"; import { AccessSelectorComponent } from "./access-selector.component"; import { UserTypePipe } from "./user-type.pipe"; diff --git a/apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.stories.ts similarity index 98% rename from apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts rename to apps/web/src/app/organizations/shared/components/access-selector/access-selector.stories.ts index 059fb1c430..63249f67a0 100644 --- a/apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts +++ b/apps/web/src/app/organizations/shared/components/access-selector/access-selector.stories.ts @@ -15,7 +15,7 @@ import { TabsModule, } from "@bitwarden/components"; -import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; +import { PreloadedEnglishI18nModule } from "../../../../tests/preloaded-english-i18n.module"; import { AccessSelectorComponent } from "./access-selector.component"; import { AccessItemType, AccessItemView, CollectionPermission } from "./access-selector.models"; diff --git a/apps/web/src/app/organizations/components/access-selector/index.ts b/apps/web/src/app/organizations/shared/components/access-selector/index.ts similarity index 100% rename from apps/web/src/app/organizations/components/access-selector/index.ts rename to apps/web/src/app/organizations/shared/components/access-selector/index.ts diff --git a/apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts b/apps/web/src/app/organizations/shared/components/access-selector/user-type.pipe.ts similarity index 100% rename from apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts rename to apps/web/src/app/organizations/shared/components/access-selector/user-type.pipe.ts diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html new file mode 100644 index 0000000000..944f38f387 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.html @@ -0,0 +1,94 @@ +
+ + + + {{ "editCollection" | i18n }} + {{ + collection.name + }} + + + {{ "newCollection" | i18n }} + + +
+ + + + + + + {{ "name" | i18n }} + + + + + {{ "externalId" | i18n }} + + {{ "externalIdDesc" | i18n }} + + + + {{ "nestCollectionUnder" | i18n }} + + + + + + + + +
+
+ + + +
+ +
diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.ts b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.ts new file mode 100644 index 0000000000..51c4a36953 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.component.ts @@ -0,0 +1,266 @@ +import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog"; +import { Overlay } from "@angular/cdk/overlay"; +import { Component, Inject, OnDestroy, OnInit } from "@angular/core"; +import { FormBuilder } from "@angular/forms"; +import { takeUntil, Subject, of, combineLatest, shareReplay, switchMap } from "rxjs"; + +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { GroupServiceAbstraction } from "@bitwarden/common/abstractions/group/group.service.abstraction"; +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +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"; +import { GroupView } from "@bitwarden/common/models/view/group-view"; +import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/src/models/response/organization-user.response"; +import { CollectionView } from "@bitwarden/common/src/models/view/collection.view"; +import { BitValidators, DialogService } from "@bitwarden/components"; + +import { CollectionAdminView, CollectionAdminService } from "../../../core"; +import { + AccessItemType, + AccessItemValue, + AccessItemView, + convertToPermission, + convertToSelectionView, +} from "../access-selector"; + +export interface CollectionDialogParams { + collectionId?: string; + organizationId: string; +} + +export enum CollectionDialogResult { + Saved = "saved", + Canceled = "canceled", + Deleted = "deleted", +} + +@Component({ + selector: "app-collection-dialog", + templateUrl: "collection-dialog.component.html", +}) +export class CollectionDialogComponent implements OnInit, OnDestroy { + private destroy$ = new Subject(); + + protected loading = true; + protected organization?: Organization; + protected collection?: CollectionView; + protected nestOptions: CollectionView[] = []; + protected accessItems: AccessItemView[] = []; + protected deletedParentName: string | undefined; + protected formGroup = this.formBuilder.group({ + name: ["", BitValidators.forbiddenCharacters(["/"])], + externalId: "", + parent: null as string | null, + access: [[] as AccessItemValue[]], + }); + + constructor( + @Inject(DIALOG_DATA) private params: CollectionDialogParams, + private formBuilder: FormBuilder, + private dialogRef: DialogRef, + private apiService: ApiService, + private organizationService: OrganizationService, + private groupService: GroupServiceAbstraction, + private collectionService: CollectionAdminService, + private i18nService: I18nService, + private platformUtilsService: PlatformUtilsService + ) {} + + ngOnInit() { + const organization$ = of(this.organizationService.get(this.params.organizationId)).pipe( + shareReplay({ refCount: true, bufferSize: 1 }) + ); + const groups$ = organization$.pipe( + switchMap((organization) => { + if (!organization.useGroups) { + return of([] as GroupView[]); + } + + return this.groupService.getAll(this.params.organizationId); + }) + ); + + combineLatest({ + organization: organization$, + collections: this.collectionService.getAll(this.params.organizationId), + collectionDetails: this.params.collectionId + ? this.collectionService.get(this.params.organizationId, this.params.collectionId) + : of(null), + groups: groups$, + users: this.apiService.getOrganizationUsers(this.params.organizationId), + }) + .pipe(takeUntil(this.destroy$)) + .subscribe(({ organization, collections, collectionDetails, groups, users }) => { + this.organization = organization; + this.accessItems = [].concat( + groups.map(mapGroupToAccessItemView), + users.data.map(mapUserToAccessItemView) + ); + + if (this.params.collectionId) { + this.collection = collections.find((c) => c.id === this.collectionId); + this.nestOptions = collections.filter((c) => c.id !== this.collectionId); + + if (!this.collection) { + throw new Error("Could not find collection to edit."); + } + + const { name, parent } = parseName(this.collection); + if (parent !== null && !this.nestOptions.find((c) => c.name === parent)) { + this.deletedParentName = parent; + } + + const accessSelections = mapToAccessSelections(collectionDetails); + this.formGroup.patchValue({ + name, + externalId: this.collection.externalId, + parent, + access: accessSelections, + }); + } else { + this.nestOptions = collections; + } + + this.loading = false; + }); + } + + protected get collectionId() { + return this.params.collectionId; + } + + protected get editMode() { + return this.params.collectionId != undefined; + } + + protected async cancel() { + this.close(CollectionDialogResult.Canceled); + } + + protected submit = async () => { + if (this.formGroup.invalid) { + return; + } + + const collectionView = new CollectionAdminView(); + collectionView.id = this.params.collectionId; + collectionView.organizationId = this.params.organizationId; + collectionView.externalId = this.formGroup.controls.externalId.value; + collectionView.groups = this.formGroup.controls.access.value + .filter((v) => v.type === AccessItemType.Group) + .map(convertToSelectionView); + collectionView.users = this.formGroup.controls.access.value + .filter((v) => v.type === AccessItemType.Member) + .map(convertToSelectionView); + + const parent = this.formGroup.controls.parent.value; + if (parent) { + collectionView.name = `${parent}/${this.formGroup.controls.name.value}`; + } else { + collectionView.name = this.formGroup.controls.name.value; + } + + await this.collectionService.save(collectionView); + + this.close(CollectionDialogResult.Saved); + }; + + protected delete = async () => { + const confirmed = await this.platformUtilsService.showDialog( + this.i18nService.t("deleteCollectionConfirmation"), + this.collection?.name, + this.i18nService.t("yes"), + this.i18nService.t("no"), + "warning" + ); + + if (!confirmed && this.params.collectionId) { + return false; + } + + await this.collectionService.delete(this.params.organizationId, this.params.collectionId); + + this.close(CollectionDialogResult.Deleted); + }; + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); + } + + private close(result: CollectionDialogResult) { + this.dialogRef.close(result); + } +} + +function parseName(collection: CollectionView) { + const nameParts = collection.name?.split("/"); + const name = nameParts[nameParts.length - 1]; + const parent = nameParts.length > 1 ? nameParts.slice(0, -1).join("/") : null; + + return { name, parent }; +} + +function mapGroupToAccessItemView(group: GroupView): AccessItemView { + return { + id: group.id, + type: AccessItemType.Group, + listName: group.name, + labelName: group.name, + accessAllItems: group.accessAll, + readonly: group.accessAll, + }; +} + +// TODO: Use view when user apis are migrated to a service +function mapUserToAccessItemView(user: OrganizationUserUserDetailsResponse): AccessItemView { + return { + id: user.id, + type: AccessItemType.Member, + email: user.email, + role: user.type, + listName: user.name?.length > 0 ? `${user.name} (${user.email})` : user.email, + labelName: user.name ?? user.email, + status: user.status, + accessAllItems: user.accessAll, + readonly: user.accessAll, + }; +} + +function mapToAccessSelections(collectionDetails: CollectionAdminView): AccessItemValue[] { + if (collectionDetails == undefined) { + return []; + } + return [].concat( + collectionDetails.groups.map((selection) => ({ + id: selection.id, + type: AccessItemType.Group, + permission: convertToPermission(selection), + })), + collectionDetails.users.map((selection) => ({ + id: selection.id, + type: AccessItemType.Member, + permission: convertToPermission(selection), + })) + ); +} + +/** + * Strongly typed helper to open a CollectionDialog + * @param dialogService Instance of the dialog service that will be used to open the dialog + * @param config Configuration for the dialog + */ +export function openCollectionDialog( + dialogService: DialogService, + overlay: Overlay, + config: DialogConfig +) { + return dialogService.open( + CollectionDialogComponent, + { + positionStrategy: overlay.position().global().centerHorizontally().top(), + ...config, + } + ); +} diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.module.ts b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.module.ts new file mode 100644 index 0000000000..523eeb9a72 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from "@angular/core"; + +import { SharedModule } from "../../../../shared/shared.module"; +import { AccessSelectorModule } from "../access-selector"; + +import { CollectionDialogComponent } from "./collection-dialog.component"; + +@NgModule({ + imports: [SharedModule, AccessSelectorModule], + declarations: [CollectionDialogComponent], + exports: [CollectionDialogComponent], +}) +export class CollectionDialogModule {} diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.stories.ts b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.stories.ts new file mode 100644 index 0000000000..6ea81d0d4a --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/collection-dialog/collection-dialog.stories.ts @@ -0,0 +1,245 @@ +import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog"; +import { Provider } from "@angular/core"; +import { ReactiveFormsModule } from "@angular/forms"; +import { action } from "@storybook/addon-actions"; +import { Meta, Story, moduleMetadata } from "@storybook/angular"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { GroupServiceAbstraction } from "@bitwarden/common/abstractions/group"; +import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; +import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType"; +import { Utils } from "@bitwarden/common/misc/utils"; +import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/models/response/organization-user.response"; +import { GroupView } from "@bitwarden/common/models/view/group-view"; +import { PlatformUtilsService } from "@bitwarden/common/src/abstractions/platformUtils.service"; + +import { SharedModule } from "../../../../shared/shared.module"; +import { PreloadedEnglishI18nModule } from "../../../../tests/preloaded-english-i18n.module"; +import { + CollectionAccessSelectionView, + CollectionAdminView, + CollectionAdminService, +} from "../../../core"; +import { AccessSelectorModule } from "../access-selector"; + +import { CollectionDialogComponent, CollectionDialogParams } from "./collection-dialog.component"; + +interface ProviderData { + collectionId: string; + organizationId: string; + collections: CollectionAdminView[]; + groups: GroupView[]; + users: OrganizationUserUserDetailsResponse[]; + useGroups: boolean; +} + +export default { + title: "Web/Organizations/Collection Dialog", + component: CollectionDialogComponent, + decorators: [ + moduleMetadata({ + imports: [ + JslibModule, + PreloadedEnglishI18nModule, + SharedModule, + ReactiveFormsModule, + AccessSelectorModule, + ], + }), + ], +} as Meta; + +const organizationId = Utils.newGuid(); +const groups = Array.from({ length: 10 }, (x, i) => createGroup(`Group ${i}`)); +const users = Array.from({ length: 10 }, (x, i) => createUser(i)); +const groupSelection = new CollectionAccessSelectionView({ + id: groups[0].id, + readOnly: false, + hidePasswords: false, +}); +const userSelection = new CollectionAccessSelectionView({ + id: users[0].id, + readOnly: false, + hidePasswords: false, +}); +let collections = Array.from({ length: 10 }, (x, i) => + createCollection(`Collection ${i}`, [groupSelection], [userSelection]) +); +collections = collections.concat( + collections.map((c, i) => + createCollection(`${c.name}/Sub-collection ${i}`, [groupSelection], [userSelection]) + ) +); + +function providers(data: ProviderData) { + return [ + { + provide: DIALOG_DATA, + useValue: { + collectionId: data.collectionId, + organizationId: data.organizationId, + } as CollectionDialogParams, + }, + { + provide: DialogRef, + useClass: MockDialogRef, + }, + { + provide: CollectionAdminService, + useValue: new MockCollectionAdminService(data.collections, data.collectionId), + }, + { + provide: OrganizationService, + useValue: { + get: () => ({ useGroups: data.useGroups, canDeleteAssignedCollections: true } as any), + } as Partial, + }, + { + provide: GroupServiceAbstraction, + useValue: { getAll: () => Promise.resolve(data.groups) } as Partial, + }, + { + provide: ApiService, + useValue: { + getOrganizationUsers: () => Promise.resolve({ data: data.users }), + }, + }, + { + provide: PlatformUtilsService, + useValue: { + showDialog: action("PlatformUtilsService.show") as () => Promise, + } as Partial, + }, + ] as Provider[]; +} + +class MockDialogRef implements Partial { + close = action("DialogRef.close"); +} + +class MockCollectionAdminService implements Partial { + constructor(private collections: CollectionAdminView[], private collectionId: string) {} + + private saveAction = action("CollectionApiService.save"); + + getAll = () => Promise.resolve(this.collections); + + get = () => Promise.resolve(this.collections.find((c) => c.id === this.collectionId)); + + async save(...args: unknown[]) { + this.saveAction(args); + await Utils.delay(1500); + } +} + +function createCollection( + name: string, + collectionGroups: CollectionAccessSelectionView[], + collectionUsers: CollectionAccessSelectionView[], + id = Utils.newGuid() +) { + const collection = new CollectionAdminView(); + collection.id = id; + collection.name = name; + collection.groups = collectionGroups; + collection.users = collectionUsers; + return collection; +} + +function createGroup(name: string, id = Utils.newGuid()) { + const group = new GroupView(); + group.id = id; + group.name = name; + return group; +} + +function createUser(i: number, id = Utils.newGuid()) { + const user = new OrganizationUserUserDetailsResponse({}); + user.name = `User ${i}`; + user.email = `user_${i}@email.com`; + user.twoFactorEnabled = false; + user.usesKeyConnector = false; + user.status = OrganizationUserStatusType.Accepted; + return user; +} + +const NewCollectionTemplate: Story = ( + args: CollectionDialogComponent +) => ({ + moduleMetadata: { + providers: providers({ + collectionId: undefined, + organizationId, + collections, + groups, + users, + useGroups: true, + }), + }, + template: ``, +}); + +export const NewCollection = NewCollectionTemplate.bind({}); + +const ExistingCollectionTemplate: Story = ( + args: CollectionDialogComponent +) => ({ + moduleMetadata: { + providers: providers({ + collectionId: collections[collections.length - 1].id, + organizationId, + collections, + groups, + users, + useGroups: true, + }), + }, + template: ``, +}); + +export const ExistingCollection = ExistingCollectionTemplate.bind({}); + +const NonExistingParentTemplate: Story = ( + args: CollectionDialogComponent +) => { + const collection = createCollection( + "Non existing parent/Collection", + [groupSelection], + [userSelection] + ); + + return { + moduleMetadata: { + providers: providers({ + collectionId: collection.id, + organizationId, + collections: [collection, ...collections], + groups, + users, + useGroups: true, + }), + }, + template: ``, + }; +}; + +export const NonExistingParentCollection = NonExistingParentTemplate.bind({}); + +const FreeOrganizationTemplate: Story = ( + args: CollectionDialogComponent +) => ({ + moduleMetadata: { + providers: providers({ + collectionId: collections[collections.length - 1].id, + organizationId, + collections, + groups, + users, + useGroups: false, + }), + }, + template: ``, +}); + +export const FreeOrganization = FreeOrganizationTemplate.bind({}); diff --git a/apps/web/src/app/organizations/shared/components/collection-dialog/index.ts b/apps/web/src/app/organizations/shared/components/collection-dialog/index.ts new file mode 100644 index 0000000000..4d4c463eb6 --- /dev/null +++ b/apps/web/src/app/organizations/shared/components/collection-dialog/index.ts @@ -0,0 +1,2 @@ +export * from "./collection-dialog.component"; +export * from "./collection-dialog.module"; diff --git a/apps/web/src/app/organizations/shared/index.ts b/apps/web/src/app/organizations/shared/index.ts new file mode 100644 index 0000000000..24a7c9176b --- /dev/null +++ b/apps/web/src/app/organizations/shared/index.ts @@ -0,0 +1,2 @@ +export * from "./shared-organization.module"; +export * from "./components/collection-dialog"; diff --git a/apps/web/src/app/organizations/shared/shared-organization.module.ts b/apps/web/src/app/organizations/shared/shared-organization.module.ts new file mode 100644 index 0000000000..9706df1721 --- /dev/null +++ b/apps/web/src/app/organizations/shared/shared-organization.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from "@angular/core"; + +import { CollectionDialogModule } from "./components/collection-dialog"; + +@NgModule({ + imports: [CollectionDialogModule], + exports: [CollectionDialogModule], +}) +export class SharedOrganizationModule {} diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index 0657dedce4..123a28a76d 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -123,7 +123,7 @@ import { FolderAddEditComponent } from "../vault/folder-add-edit.component"; import { OrganizationBadgeModule } from "../vault/organization-badge/organization-badge.module"; import { ShareComponent } from "../vault/share.component"; -import { SharedModule } from "."; +import { SharedModule } from "./shared.module"; // Please do not add to this list of declarations - we should refactor these into modules when doing so makes sense until there are none left. // If you are building new functionality, please create or extend a feature module instead. diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 551574210e..f1dba87e1f 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -10,7 +10,6 @@ import { JslibModule } from "@bitwarden/angular/jslib.module"; import { AsyncActionsModule, AvatarModule, - BadgeListModule, BadgeModule, ButtonModule, CalloutModule, @@ -23,6 +22,7 @@ import { MultiSelectModule, TableModule, TabsModule, + BadgeListModule, } from "@bitwarden/components"; // Register the locales for the application @@ -39,6 +39,7 @@ import "./locales"; imports: [ CommonModule, DragDropModule, + DialogModule, FormsModule, InfiniteScrollModule, JslibModule, @@ -66,6 +67,7 @@ import "./locales"; CommonModule, AsyncActionsModule, DragDropModule, + DialogModule, FormsModule, InfiniteScrollModule, JslibModule, @@ -80,6 +82,7 @@ import "./locales"; MultiSelectModule, FormFieldModule, IconModule, + IconButtonModule, TabsModule, TableModule, AvatarModule, diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index ca7cec696b..d4fbf463a0 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -2396,10 +2396,13 @@ "message": "Warning! This user requires Key Connector to manage their encryption. Removing this user from your organization will permanently deactivate their account. This action cannot be undone. Do you want to proceed?" }, "externalId": { - "message": "External id" + "message": "External ID" }, "externalIdDesc": { - "message": "External ID is an unencrypted reference used by the Bitwarden Directory Connector or API." + "message": "External ID is an unencrypted reference used by the Bitwarden Directory Connector and API." + }, + "nestCollectionUnder": { + "message": "Nest collection under" }, "accessControl": { "message": "Access control" @@ -2422,6 +2425,12 @@ "editCollection": { "message": "Edit collection" }, + "collectionInfo": { + "message": "Collection info" + }, + "access": { + "message": "Access" + }, "deleteCollectionConfirmation": { "message": "Are you sure you want to delete this collection?" }, @@ -5454,6 +5463,15 @@ } } }, + "inputForbiddenCharacters": { + "message": "The following characters are not allowed: $CHARACTERS$", + "placeholders": { + "characters": { + "content": "$1", + "example": "@, #, $, %" + } + } + }, "inputMaxLength": { "message": "Input must not exceed $COUNT$ characters in length.", "placeholders": { @@ -5547,9 +5565,6 @@ "accessAllCollectionsHelp": { "message": "If checked, this will replace all other collection permissions." }, - "selectMembers": { - "message": "Select members" - }, "selectCollections": { "message": "Select collections" }, @@ -5588,5 +5603,26 @@ }, "memberAccessAll": { "message": "This member can access and modify all items." + }, + "membersColumnHeader": { + "message": "Member/Group" + }, + "groupAndMemberColumnHeader": { + "message": "Member" + }, + "selectGroupsAndMembers": { + "message": "Select groups and members" + }, + "selectMembers": { + "message": "Select members" + }, + "userPermissionOverrideHelper": { + "message": "Permissions set for a member will replace permissions set by that member's group" + }, + "noMembersOrGroupsAdded": { + "message": "No members or groups added" + }, + "deleted": { + "message": "Deleted" } } diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts index 0725e83ebd..630fc7c713 100644 --- a/libs/angular/src/services/jslib-services.module.ts +++ b/libs/angular/src/services/jslib-services.module.ts @@ -28,6 +28,7 @@ import { InternalFolderService, } from "@bitwarden/common/abstractions/folder/folder.service.abstraction"; import { FormValidationErrorsService as FormValidationErrorsServiceAbstraction } from "@bitwarden/common/abstractions/formValidationErrors.service"; +import { GroupServiceAbstraction } from "@bitwarden/common/abstractions/group"; import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service"; import { KeyConnectorService as KeyConnectorServiceAbstraction } from "@bitwarden/common/abstractions/keyConnector.service"; import { LogService } from "@bitwarden/common/abstractions/log.service"; @@ -88,6 +89,7 @@ import { FileUploadService } from "@bitwarden/common/services/fileUpload.service import { FolderApiService } from "@bitwarden/common/services/folder/folder-api.service"; import { FolderService } from "@bitwarden/common/services/folder/folder.service"; import { FormValidationErrorsService } from "@bitwarden/common/services/formValidationErrors.service"; +import { GroupService } from "@bitwarden/common/services/group/group.service"; import { KeyConnectorService } from "@bitwarden/common/services/keyConnector.service"; import { LoginService } from "@bitwarden/common/services/login.service"; import { NotificationsService } from "@bitwarden/common/services/notifications.service"; @@ -580,6 +582,11 @@ import { AbstractThemingService } from "./theming/theming.service.abstraction"; useClass: ValidationService, deps: [I18nServiceAbstraction, PlatformUtilsServiceAbstraction], }, + { + provide: GroupServiceAbstraction, + useClass: GroupService, + deps: [ApiServiceAbstraction], + }, { provide: LoginServiceAbstraction, useClass: LoginService, diff --git a/libs/common/src/abstractions/api.service.ts b/libs/common/src/abstractions/api.service.ts index 0fcfd543d1..977ff1586e 100644 --- a/libs/common/src/abstractions/api.service.ts +++ b/libs/common/src/abstractions/api.service.ts @@ -92,7 +92,7 @@ import { BillingPaymentResponse } from "../models/response/billing-payment.respo import { BreachAccountResponse } from "../models/response/breach-account.response"; import { CipherResponse } from "../models/response/cipher.response"; import { - CollectionGroupDetailsResponse, + CollectionAccessDetailsResponse, CollectionResponse, } from "../models/response/collection.response"; import { DeviceVerificationResponse } from "../models/response/device-verification.response"; @@ -314,7 +314,7 @@ export abstract class ApiService { getCollectionDetails: ( organizationId: string, id: string - ) => Promise; + ) => Promise; getUserCollections: () => Promise>; getCollections: (organizationId: string) => Promise>; getCollectionUsers: (organizationId: string, id: string) => Promise; diff --git a/libs/common/src/abstractions/group/group.service.abstraction.ts b/libs/common/src/abstractions/group/group.service.abstraction.ts new file mode 100644 index 0000000000..f9705c2a3d --- /dev/null +++ b/libs/common/src/abstractions/group/group.service.abstraction.ts @@ -0,0 +1,9 @@ +import { GroupView } from "../../models/view/group-view"; + +export class GroupServiceAbstraction { + delete: (orgId: string, groupId: string) => Promise; + deleteMany: (orgId: string, groupIds: string[]) => Promise; + + get: (orgId: string, groupId: string) => Promise; + getAll: (orgId: string) => Promise; +} diff --git a/libs/common/src/abstractions/group/index.ts b/libs/common/src/abstractions/group/index.ts new file mode 100644 index 0000000000..e6971edb29 --- /dev/null +++ b/libs/common/src/abstractions/group/index.ts @@ -0,0 +1,2 @@ +export * from "./group.service.abstraction"; +export * from "./responses/group-response"; diff --git a/libs/common/src/abstractions/group/responses/group-response.ts b/libs/common/src/abstractions/group/responses/group-response.ts new file mode 100644 index 0000000000..b0f3645875 --- /dev/null +++ b/libs/common/src/abstractions/group/responses/group-response.ts @@ -0,0 +1,31 @@ +import { BaseResponse } from "../../../models/response/base.response"; +import { SelectionReadOnlyResponse } from "../../../models/response/selection-read-only.response"; + +export class GroupResponse extends BaseResponse { + id: string; + organizationId: string; + name: string; + accessAll: boolean; + externalId: string; + + constructor(response: any) { + super(response); + this.id = this.getResponseProperty("Id"); + this.organizationId = this.getResponseProperty("OrganizationId"); + this.name = this.getResponseProperty("Name"); + this.accessAll = this.getResponseProperty("AccessAll"); + this.externalId = this.getResponseProperty("ExternalId"); + } +} + +export class GroupDetailsResponse extends GroupResponse { + collections: SelectionReadOnlyResponse[] = []; + + constructor(response: any) { + super(response); + const collections = this.getResponseProperty("Collections"); + if (collections != null) { + this.collections = collections.map((c: any) => new SelectionReadOnlyResponse(c)); + } + } +} diff --git a/libs/common/src/misc/utils.ts b/libs/common/src/misc/utils.ts index ff21a919f1..6bacce72b9 100644 --- a/libs/common/src/misc/utils.ts +++ b/libs/common/src/misc/utils.ts @@ -440,6 +440,10 @@ export class Utils { return mobile || win.navigator.userAgent.match(/iPad/i) != null; } + static delay(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + private static isAppleMobile(win: Window) { return ( win.navigator.userAgent.match(/iPhone/i) != null || diff --git a/libs/common/src/models/request/collection.request.ts b/libs/common/src/models/request/collection.request.ts index 6f752bfb5d..d28a7d06fe 100644 --- a/libs/common/src/models/request/collection.request.ts +++ b/libs/common/src/models/request/collection.request.ts @@ -6,6 +6,7 @@ export class CollectionRequest { name: string; externalId: string; groups: SelectionReadOnlyRequest[] = []; + users: SelectionReadOnlyRequest[] = []; constructor(collection?: Collection) { if (collection == null) { diff --git a/libs/common/src/models/response/collection.response.ts b/libs/common/src/models/response/collection.response.ts index 4165aa568e..a3e4f85482 100644 --- a/libs/common/src/models/response/collection.response.ts +++ b/libs/common/src/models/response/collection.response.ts @@ -25,8 +25,9 @@ export class CollectionDetailsResponse extends CollectionResponse { } } -export class CollectionGroupDetailsResponse extends CollectionResponse { +export class CollectionAccessDetailsResponse extends CollectionResponse { groups: SelectionReadOnlyResponse[] = []; + users: SelectionReadOnlyResponse[] = []; constructor(response: any) { super(response); @@ -34,5 +35,10 @@ export class CollectionGroupDetailsResponse extends CollectionResponse { if (groups != null) { this.groups = groups.map((g: any) => new SelectionReadOnlyResponse(g)); } + + const users = this.getResponseProperty("Users"); + if (users != null) { + this.users = users.map((g: any) => new SelectionReadOnlyResponse(g)); + } } } diff --git a/libs/common/src/models/view/collection.view.ts b/libs/common/src/models/view/collection.view.ts index 259a8e9b85..859979373b 100644 --- a/libs/common/src/models/view/collection.view.ts +++ b/libs/common/src/models/view/collection.view.ts @@ -1,6 +1,6 @@ import { Collection } from "../domain/collection"; import { ITreeNodeObject } from "../domain/tree-node"; -import { CollectionGroupDetailsResponse } from "../response/collection.response"; +import { CollectionResponse } from "../response/collection.response"; import { View } from "./view"; @@ -12,7 +12,7 @@ export class CollectionView implements View, ITreeNodeObject { readOnly: boolean = null; hidePasswords: boolean = null; - constructor(c?: Collection | CollectionGroupDetailsResponse) { + constructor(c?: Collection | CollectionResponse) { if (!c) { return; } diff --git a/libs/common/src/models/view/group-view.ts b/libs/common/src/models/view/group-view.ts new file mode 100644 index 0000000000..3508842afb --- /dev/null +++ b/libs/common/src/models/view/group-view.ts @@ -0,0 +1,17 @@ +import { GroupResponse } from "../../abstractions/group"; +import { SelectionReadOnlyResponse } from "../response/selection-read-only.response"; + +import { View } from "./view"; + +export class GroupView implements View { + id: string; + organizationId: string; + name: string; + accessAll: boolean; + externalId: string; + collections: SelectionReadOnlyResponse[] = []; + + static fromResponse(response: GroupResponse) { + return Object.assign(new GroupView(), response); + } +} diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts index 384298747e..2ae5b34a92 100644 --- a/libs/common/src/services/api.service.ts +++ b/libs/common/src/services/api.service.ts @@ -100,7 +100,7 @@ import { BillingPaymentResponse } from "../models/response/billing-payment.respo import { BreachAccountResponse } from "../models/response/breach-account.response"; import { CipherResponse } from "../models/response/cipher.response"; import { - CollectionGroupDetailsResponse, + CollectionAccessDetailsResponse, CollectionResponse, } from "../models/response/collection.response"; import { DeviceVerificationResponse } from "../models/response/device-verification.response"; @@ -810,7 +810,7 @@ export class ApiService implements ApiServiceAbstraction { async getCollectionDetails( organizationId: string, id: string - ): Promise { + ): Promise { const r = await this.send( "GET", "/organizations/" + organizationId + "/collections/" + id + "/details", @@ -818,7 +818,7 @@ export class ApiService implements ApiServiceAbstraction { true, true ); - return new CollectionGroupDetailsResponse(r); + return new CollectionAccessDetailsResponse(r); } async getUserCollections(): Promise> { diff --git a/libs/common/src/services/group/group.service.ts b/libs/common/src/services/group/group.service.ts new file mode 100644 index 0000000000..68142aae05 --- /dev/null +++ b/libs/common/src/services/group/group.service.ts @@ -0,0 +1,65 @@ +import { ApiService } from "../../abstractions/api.service"; +import { + GroupDetailsResponse, + GroupResponse, + GroupServiceAbstraction, +} from "../../abstractions/group"; +import { ListResponse } from "../../models/response/list.response"; +import { GroupView } from "../../models/view/group-view"; + +import { OrganizationGroupBulkRequest } from "./requests/organization-group-bulk-request"; + +export class GroupService implements GroupServiceAbstraction { + constructor(private apiService: ApiService) {} + + async delete(orgId: string, groupId: string): Promise { + await this.apiService.send( + "DELETE", + "/organizations/" + orgId + "/groups/" + groupId, + null, + true, + false + ); + } + + async deleteMany(orgId: string, groupIds: string[]): Promise { + const request = new OrganizationGroupBulkRequest(groupIds); + + const r = await this.apiService.send( + "DELETE", + "/organizations/" + orgId + "/groups", + request, + true, + true + ); + const listResponse = new ListResponse(r, GroupResponse); + + return listResponse.data?.map((gr) => GroupView.fromResponse(gr)) ?? []; + } + + async get(orgId: string, groupId: string): Promise { + const r = await this.apiService.send( + "GET", + "/organizations/" + orgId + "/groups/" + groupId + "/details", + null, + true, + true + ); + + return GroupView.fromResponse(new GroupDetailsResponse(r)); + } + + async getAll(orgId: string): Promise { + const r = await this.apiService.send( + "GET", + "/organizations/" + orgId + "/groups", + null, + true, + true + ); + + const listResponse = new ListResponse(r, GroupDetailsResponse); + + return listResponse.data?.map((gr) => GroupView.fromResponse(gr)) ?? []; + } +} diff --git a/libs/common/src/services/group/requests/organization-group-bulk-request.ts b/libs/common/src/services/group/requests/organization-group-bulk-request.ts new file mode 100644 index 0000000000..d8f1b5876d --- /dev/null +++ b/libs/common/src/services/group/requests/organization-group-bulk-request.ts @@ -0,0 +1,7 @@ +export class OrganizationGroupBulkRequest { + ids: string[]; + + constructor(ids: string[]) { + this.ids = ids == null ? [] : ids; + } +} diff --git a/libs/components/src/async-actions/form-button.directive.ts b/libs/components/src/async-actions/form-button.directive.ts index 20ca289f7b..e44244ca3e 100644 --- a/libs/components/src/async-actions/form-button.directive.ts +++ b/libs/components/src/async-actions/form-button.directive.ts @@ -3,10 +3,9 @@ import { Subject, takeUntil } from "rxjs"; import { ButtonLikeAbstraction } from "../shared/button-like.abstraction"; +import { BitActionDirective } from "./bit-action.directive"; import { BitSubmitDirective } from "./bit-submit.directive"; -import { BitActionDirective } from "."; - /** * This directive has two purposes: * diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index c507dc2515..2b427756f5 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnChanges } from "@angular/core"; -import { BadgeTypes } from "../badge"; +import { BadgeType } from "../badge"; @Component({ selector: "bit-badge-list", @@ -12,7 +12,7 @@ export class BadgeListComponent implements OnChanges { protected filteredItems: string[] = []; protected isFiltered = false; - @Input() badgeType: BadgeTypes = "primary"; + @Input() badgeType: BadgeType = "primary"; @Input() items: string[] = []; @Input() diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts index c5482423e5..d173f7e54c 100644 --- a/libs/components/src/badge/badge.directive.ts +++ b/libs/components/src/badge/badge.directive.ts @@ -1,8 +1,8 @@ import { Directive, ElementRef, HostBinding, Input } from "@angular/core"; -export type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info"; +export type BadgeType = "primary" | "secondary" | "success" | "danger" | "warning" | "info"; -const styles: Record = { +const styles: Record = { primary: ["tw-bg-primary-500"], secondary: ["tw-bg-text-muted"], success: ["tw-bg-success-500"], @@ -11,7 +11,7 @@ const styles: Record = { info: ["tw-bg-info-500"], }; -const hoverStyles: Record = { +const hoverStyles: Record = { primary: ["hover:tw-bg-primary-700"], secondary: ["hover:tw-bg-secondary-700"], success: ["hover:tw-bg-success-700"], @@ -47,7 +47,7 @@ export class BadgeDirective { .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []); } - @Input() badgeType: BadgeTypes = "primary"; + @Input() badgeType: BadgeType = "primary"; private hasHoverEffects = false; diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index a5584c1a89..dc4325ca06 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Meta, moduleMetadata, Story } from "@storybook/angular"; -import { BadgeDirective } from "./badge.directive"; +import { BadgeDirective, BadgeType } from "./badge.directive"; export default { title: "Component Library/Badge", @@ -15,6 +15,12 @@ export default { args: { badgeType: "primary", }, + argTypes: { + badgeType: { + options: ["primary", "secondary", "success", "danger", "warning", "info"] as BadgeType[], + control: { type: "inline-radio" }, + }, + }, parameters: { design: { type: "figma", diff --git a/libs/components/src/badge/index.ts b/libs/components/src/badge/index.ts index 574db348ba..31ff59e2e9 100644 --- a/libs/components/src/badge/index.ts +++ b/libs/components/src/badge/index.ts @@ -1,2 +1,2 @@ -export { BadgeDirective, BadgeTypes } from "./badge.directive"; +export { BadgeDirective, BadgeType } from "./badge.directive"; export * from "./badge.module"; diff --git a/libs/components/src/callout/callout.component.spec.ts b/libs/components/src/callout/callout.component.spec.ts index f98dc37e50..cc54ff6dc2 100644 --- a/libs/components/src/callout/callout.component.spec.ts +++ b/libs/components/src/callout/callout.component.spec.ts @@ -4,7 +4,7 @@ import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { I18nMockService } from "../utils/i18n-mock.service"; -import { CalloutComponent } from "."; +import { CalloutComponent } from "./callout.component"; describe("Callout", () => { let component: CalloutComponent; diff --git a/libs/components/src/form-field/bit-validators.stories.ts b/libs/components/src/form-field/bit-validators.stories.ts new file mode 100644 index 0000000000..e12b13dd40 --- /dev/null +++ b/libs/components/src/form-field/bit-validators.stories.ts @@ -0,0 +1,56 @@ +import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms"; +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; + +import { ButtonModule } from "../button"; +import { InputModule } from "../input/input.module"; +import { I18nMockService } from "../utils/i18n-mock.service"; + +import { forbiddenCharacters } from "./bit-validators/forbidden-characters.validator"; +import { BitFormFieldComponent } from "./form-field.component"; +import { FormFieldModule } from "./form-field.module"; + +export default { + title: "Component Library/Form/Custom Validators", + component: BitFormFieldComponent, + decorators: [ + moduleMetadata({ + imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService({ + inputForbiddenCharacters: (chars) => + `The following characters are not allowed: ${chars}`, + }); + }, + }, + ], + }), + ], + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17689", + }, + }, +} as Meta; + +const template = ` +
+ + Name + + +
`; + +export const ForbiddenCharacters: Story = (args: BitFormFieldComponent) => ({ + props: { + formObj: new FormBuilder().group({ + name: ["", forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"])], + }), + }, + template, +}); diff --git a/libs/components/src/form-field/bit-validators/forbidden-characters.validator.spec.ts b/libs/components/src/form-field/bit-validators/forbidden-characters.validator.spec.ts new file mode 100644 index 0000000000..332294b26e --- /dev/null +++ b/libs/components/src/form-field/bit-validators/forbidden-characters.validator.spec.ts @@ -0,0 +1,45 @@ +import { FormControl } from "@angular/forms"; + +import { forbiddenCharacters } from "./forbidden-characters.validator"; + +describe("forbiddenCharacters", () => { + it("should return no error when input is null", () => { + const input = createControl(null); + const validate = forbiddenCharacters(["n", "u", "l", "l"]); + + const errors = validate(input); + + expect(errors).toBe(null); + }); + + it("should return no error when no characters are forbidden", () => { + const input = createControl("special characters: \\/@#$%^&*()"); + const validate = forbiddenCharacters([]); + + const errors = validate(input); + + expect(errors).toBe(null); + }); + + it("should return no error when input does not contain forbidden characters", () => { + const input = createControl("contains no special characters"); + const validate = forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"]); + + const errors = validate(input); + + expect(errors).toBe(null); + }); + + it("should return error when input contains forbidden characters", () => { + const input = createControl("contains / illegal @ characters"); + const validate = forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"]); + + const errors = validate(input); + + expect(errors).not.toBe(null); + }); +}); + +function createControl(input: string) { + return new FormControl(input); +} diff --git a/libs/components/src/form-field/bit-validators/forbidden-characters.validator.ts b/libs/components/src/form-field/bit-validators/forbidden-characters.validator.ts new file mode 100644 index 0000000000..c53f9347fa --- /dev/null +++ b/libs/components/src/form-field/bit-validators/forbidden-characters.validator.ts @@ -0,0 +1,23 @@ +import { AbstractControl, FormControl, ValidationErrors, ValidatorFn } from "@angular/forms"; + +export function forbiddenCharacters(characters: string[]): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + if (!(control instanceof FormControl)) { + throw new Error("forbiddenCharacters only supports validating FormControls"); + } + + if (control.value === null || control.value === undefined) { + return null; + } + + const value = String(control.value); + + for (const char of value) { + if (characters.includes(char)) { + return { forbiddenCharacters: { value: control.value, characters } }; + } + } + + return null; + }; +} diff --git a/libs/components/src/form-field/bit-validators/index.ts b/libs/components/src/form-field/bit-validators/index.ts new file mode 100644 index 0000000000..971649450c --- /dev/null +++ b/libs/components/src/form-field/bit-validators/index.ts @@ -0,0 +1 @@ +export { forbiddenCharacters } from "./forbidden-characters.validator"; diff --git a/libs/components/src/form-field/error.component.ts b/libs/components/src/form-field/error.component.ts index 74a6e9da27..f443a21409 100644 --- a/libs/components/src/form-field/error.component.ts +++ b/libs/components/src/form-field/error.component.ts @@ -30,6 +30,8 @@ export class BitErrorComponent { return this.i18nService.t("inputMinLength", this.error[1]?.requiredLength); case "maxlength": return this.i18nService.t("inputMaxLength", this.error[1]?.requiredLength); + case "forbiddenCharacters": + return this.i18nService.t("inputForbiddenCharacters", this.error[1]?.characters.join(", ")); default: // Attempt to show a custom error message. if (this.error[1]?.message) { diff --git a/libs/components/src/form-field/index.ts b/libs/components/src/form-field/index.ts index 7176209df2..613ebaf9a9 100644 --- a/libs/components/src/form-field/index.ts +++ b/libs/components/src/form-field/index.ts @@ -1,3 +1,4 @@ export * from "./form-field.module"; export * from "./form-field.component"; export * from "./form-field-control"; +export * as BitValidators from "./bit-validators"; diff --git a/libs/components/src/multi-select/index.ts b/libs/components/src/multi-select/index.ts index b2dfe6b01b..5b6d7b6ced 100644 --- a/libs/components/src/multi-select/index.ts +++ b/libs/components/src/multi-select/index.ts @@ -1 +1,2 @@ export * from "./multi-select.module"; +export * from "./models/select-item-view";