[EC-647] OAVR v2 Feature Branch Merge (#3882)

* [EC-8] Restructure Tabs (#3109)

* Cherry pick pending PR for tabs component [CL-17] Tabs - Routing

* Update organization tabs from 4 to 6

* Create initial 'Members' tab

* Create initial 'Groups' tab

* Add initial "Reporting" tab

* Use correct report label/layout by product type

* Create initial 'Billing' tab

* Breakup billing payment and billing history pages

* Cleanup org routing and nav permission service

* More org tab permission cleanup

* Refactor organization billing to use a module

* Refactor organization reporting to use module

* Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

* This partially reverts commit 24bb775 to fix tracking of people.component.html rename.

* Fix people component file rename

* Recover lost member page changes

* Undo members component rename as it was causing difficult merge conflicts

* Fix member and group page container

* Remove unnecessary organization lookup

* [EC-8] Some PR suggestions

* [EC-8] Reuse user billing history for orgs

* [EC-8] Renamed user billing history component

* [EC-8] Repurpose payment method component

Update end user payment method component to be usable for organizations.

* [EC-8] Fix missing verify bank condition

* [EC-8] Remove org payment method component

* [EC-8] Use CL in payment method component

* [EC-8] Extend maxWidth Tailwind theme config

* [EC-8] Add lazy loading to org reports

* [EC-8] Add lazy loading to org billing

* [EC-8] Prettier

* [EC-8] Cleanup org reporting component redundancy

* [EC-8] Use different class for negative margin

* [EC-8] Make billing history component "dumb"

* Revert "[EC-8] Cleanup org reporting component redundancy"

This reverts commit eca337e89b.

* [EC-8] Create and export shared reports module

* [EC-8] Use shared reports module in orgs

* [EC-8] Use takeUntil pattern

* [EC-8] Move org reporting module out of old modules folder

* [EC-8] Move org billing module out of old modules folder

* [EC-8] Fix some remaining merge conflicts

* [EC-8] Move maxWidth into 'extend' key for Tailwind config

* [EC-8] Remove unused module

* [EC-8] Rename org report list component

* Prettier

Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>

* [EC-451] Org Admin Refresh Permissions Refactor (#3320)

* [EC-451] Update new org permissions for new tabs

* [EC-451] Remove redudant route guards

* [EC-451] Remove canAccessManageTab()

* [EC-451] Use canAccess* callbacks in org routing module

* Fix org api service refactor and linting after pulling in master

* Fix broken org people and group pages after merge

* [EC-18] Reporting side nav direction (#3420)

* [EC-18] Re-order side nav for org reports according to Figma

* [EC-18] Fix rxjs linter errors and redundant org flag

* [EC-526] Default to Event Logs page for Reporting Tab (#3470)

* [EC-526] Default to the Events Logs page when navigating to the Reporting tab

* [EC-526] Undo default routing redirect when the child path is missing. Avoids defaulting to "/events" in case a user/org doesn't have access to event logs.

* [EC-19] Update Organization Settings Page (#3251)

* [EC-19] Refactor existing organization settings components to its own module

* [EC-19] Move SSO page to settings tab

* [EC-19] Move Policies page to Settings tab

Refactor Policy components into its own module

* [EC-19] Move ImageSubscriptionHiddenComponent

* [EC-19] Lazy load org settings module

* [EC-19] Add SSO Id to SSO config view

* [EC-19] Remove SSO identfier from org info page

* [EC-19] Update org settings/policies to follow ADR-0011

* [EC-19] Update two-step login setup description

* [EC-19] Revert nested policy components folder

* [EC-19] Revert nested org setting components folder

* [EC-19] Remove left over image component

* [EC-19] Prettier

* [EC-19] Fix missing i18n

* [EC-19] Update SSO form to use CL

* [EC-19] Remove unused SSO input components

* [EC-19] Fix bad SSO locale identifier

* [EC-19] Fix import order linting

* [EC-19] Add explicit whitespace check for launch click directive

* [EC-19] Add restricted import paths to eslint config

* [EC-19] Tag deprecated field with Jira issue to cleanup in future release

* [EC-19] Remove out of date comment

* [EC-19] Move policy components to policies module

* [EC-19] Remove dityRequired validator

* [EC-19] Use explicit type for SSO config form

* [EC-19] Fix rxjs linter errors

* [EC-19] Fix RxJS eslint comments in org settings component

* [EC-19] Use explicit ControlsOf<T> helper for nested SSO form groups.

* [EC-19] Attribute source of ControlsOf<T> helper

* [EC-19] Fix missing settings side nav links

* [EC-19] Fix member/user language for policy modals

* [EC-551] Update Event Logs Client Column (#3572)

* [EC-551] Fix RxJS warnings

* [EC-551] Update page to use CL components and Tailwind classes

* [EC-551] Update Client column to use text instead of icon. Update language and i18n.

* [EC-14] Refactor vault filter (#3440)

* [EC-14] initial refactoring of vault filter

* [EC-14] return observable trees for all filters with head node

* [EC-14] Remove bindings on callbacks

* [EC-14] fix formatting on disabled orgs

* [EC-14] hide MyVault if personal org policy

* [EC-14] add check for single org policy

* [EC-14] add policies to org and change node constructor

* [EC-14] don't show options if personal vault policy

* [EC-14] default to all vaults

* [EC-14] add default selection to filters

* [EC-14] finish filter model callbacks

* [EC-14] finish filter functionality and begin cleaning up

* [EC-14] clean up old components and start on org vault

* [EC-14] loop through filters for presentation

* [EC-14] refactor VaultFilterService and put filter presentation data back into Vault Filter component. Remove VaultService

* [EC-14] begin refactoring org vault

* [EC-14] Refactor Vault Filter Service to use observables

* [EC-14] finish org vault filter

* [EC-14] fix vault model tests

* [EC-14] fix org service calls

* [EC-14] pull refactor out of shared code

* [EC-14] include head node for collections even if collections aren't loaded yet

* [EC-14] fix url params for vaults

* [EC-14] remove comments

* [EC-14] Remove unnecesary getter for org on vault filter

* [EC-14] fix linter

* [EC-14] fix prettier

* [EC-14] add deprecated methods to collection service for desktop and browser

* [EC-14] simplify cipher type node check

* [EC-14] add getters to vault filter model

* [EC-14] refactor how we build the filter list into methods

* [EC-14] add getters to build filter method

* [EC-14] remove param ids if false

* [EC-14] fix collapsing nodes

* [EC-14] add specific type to search placeholder

* [EC-14] remove extra constructor and comment from org vault filter

* [EC-14] extract subscription callback to methods

* [EC-14] Remove unecessary await

* [EC-14] Remove ternary operators while building org filter

* [EC-14] remove unnecessary deps array in vault filter service declaration

* [EC-14] consolidate new models into one file

* [EC-14] initialize nested observable inside of service

Signed-off-by: Jacob Fink <jfink@bitwarden.com>

* [EC-14] change how we load orgs into the vault filter and select the default filter

* [EC-14] remove get from getters name

* [EC-14] remove eslint-disable comment

* [EC-14] move vault filter service abstraction to angular folder and separate

* [EC-14] rename filter types and delete VaultFilterLabel

* [EC-14] remove changes to workspace file

* [EC-14] remove deprecated service from jslib module

* [EC-14] remove any remaining files from common code

* [EC-14] consolidate vault filter components into components folder

* [EC-14] simplify method call

* [EC-14] refactor the vault filter service
- orgs now have observable property
- BehaviorSubjects have been migrated to ReplaySubjects if they don't need starting value
- added unit tests
- fix small error when selecting org badge of personal vault
- renamed some properties

* [EC-14] replace mergeMap with switchMap in vault filter service

* [EC-14] early return to prevent nesting

* [EC-14] clean up filterCollections method

* [EC-14] use isDeleted helper in html

* [EC-14] add jsdoc comments to ServiceUtils

* [EC-14] fix linter

* [EC-14] use array.slice instead of setting length

* Update apps/web/src/app/vault/vault-filter/services/vault-filter.service.ts

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [EC-14] add missing high level jsdoc description

* [EC-14] fix storybook absolute imports

* [EC-14] delete vault-shared.module

* [EC-14] change search placeholder text to getter and add missing strings

* [EC-14] remove two way binding from search text in vault filter

* [EC-14] removed all binding from search text and just use input event

* [EC-14] remove async from apply vault filter

* [EC-14] remove circular observable calls in vault filter service

Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-14] move collapsed nodes to vault filter section

* [EC-14] deconstruct filter section inside component

* [EC-14] fix merge conflicts and introduce refactored organization service to vault filter service

* [EC-14] remove mutation from filter builders

* [EC-14] fix styling on buildFolderTree

* [EC-14] remove leftover folder-filters reference and use ternary for collapse icon

* [EC-14] remove unecessary checks

* [EC-14] stop rebuilding filters when the organization changes

* [EC-14] Move subscription out of setter in vault filter section

* [EC-14] remove extra policy service methods from vault filter service

* [EC-14] remove new methods from old vault-filter.service

* [EC-14] Use vault filter service in vault components

* [EC-14] reload collections from vault now that we have vault filter service

* [EC-14] remove currentFilterCollections in vault filter component

* [EC-14] change VaultFilterType to more specific OrganizationFilter in organization-options

* [EC-14] include org check in isNodeSelected

* [EC-14] add getters to filter function, fix storybook, and add test for All Collections

* [EC-14] show org options even if there's a personal vault policy

* [EC-14] use !"AllCollections" instead of just !null

* [EC-14] Remove extra org Subject in vault filter service

* [EC-14] remove null check from vault search text

* [EC-14] replace store/build names with set/get. Remove extra call to setOrganizationFilter

* [EC-14] add take(1) to subscribe in test

* [EC-14] move init logic in org vault filter component to ngOnInit

* [EC-14] Fix linter

* [EC-14] revert change to vault filter model

* [EC-14] be specific about ignoring All Collections

* [EC-14] move observable init logic to beforeEach in test

* [EC-14] make buildAllFilters return something to reduce side effects

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-97] Organization Billing Language / RxJS Warnings (#3688)

* [EC-97] Update copy to use the word members in a few places

* [EC-97] Cleanup RxJS warnings and unused properties in org billing components

* [EC-599] Access Selector Component (#3717)

* 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-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-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-599] Fix unit test and linter

* [EC-599] Update Enums to Pascal case

* [EC-599] Undo change to Enum values

* [EC-7] fix: broken build

* [EC-593] Top align event logs row content (#3813)

* [EC-593] Top align event log row contents

* [EC-593] Prevent event log timestamp from wrapping

* [EC-593] Add alignContent input to bitRow directive

* [EC-593] Remove ineffective inline styles (CSP)

* [EC-593] Remove templated tailwind classes

Tailwind minimizes the bundled stylesheet by removing classes that aren't used in code. Using a string template for the classes causes those classes to be ignored.

* [EC-593] Introduce alignContent input to table story

* Remove old reference to bit-submit-button that no longer exists (#3927)

* [EC-657] Hide Billing History and Payment Method for selfhosted orgs (#3935)

* Merge master into feature/org-admin-refresh (#4072)

* Remove DDG forwarder from SH (#3888)

* [EC-272] Web workers using EncryptionService (#3532)

* Add item decryption to encryptService
* Create multithreadEncryptService subclass to handle web workers
* Create encryption web worker
* Refactor cipherService to use new interface
* Update dependencies

* Don't refresh org vault on filter change (#3879)

* Autosync the updated translations (#3914)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#3915)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#3916)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Revert "[PS-1465] Fix #2806 - The "Import Data" page's file selector button cannot be translated (#3502)" (#3900)

This reverts commit 768de03269.

* Autosync the updated translations (#3919)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* [SM-260] Hide email verification prompt if already verified (#3922)

Co-authored-by: Sammy Chang <sammychang2185@gmail.com>

* Two-Step Login (#3852)

* [SG-163] Two step login flow web (#3648)

* two step login flow

* moved code from old branch and reafctored

* fixed review comments

* [SG-164] Two Step Login Flow - Browser (#3793)

* Add new messages

* Remove SSO button from home component

* Change create account button to text

* Add top padding to create account link

* Add email input to HomeComponent

* Add continue button to email input

* Add form to home component

* Retreive email from state service

* Redirect to login after submit

* Add error message for invalid email

* Remove email input from login component

* Remove loggingInTo from under MP input

* Style the MP hint link

* Add self hosted domain to email form

* Made the mp hint link bold

* Add the new login button

* Style app-private-mode-warning in its component

* Bitwarden -> Login text change

* Remove the old login button

* Cancel -> Close text change

* Add avatar to login header

* Login -> LoginWithMasterPassword text change

* Add SSO button to login screen

* Add not you button

* Allow all clients to use the email query param on the login component

* Introduct HomeGuard

* Clear remembered email when clicking Not You

* Make remember email opt-in

* Use formGroup.patchValue instead of directly patching individual controls

* [SG-165] Desktop login flow changes (#3814)

* two step login flow

* moved code from old branch and reafctored

* fixed review comments

* Make toggleValidateEmail in base class public

* Add desktop login messages

* Desktop login flow changes

* Fix known device api error

* Only submit if email has been validated

* Clear remembered email when switching accounts

* Fix merge issue

* Add 'login with another device' button

* Remove 'log in with another device' button for now

* Pin login pag content to top instead of center justified

* Leave email if 'Not you?' is clicked

* Continue when enter is hit on email input

Co-authored-by: gbubemismith <gsmithwalter@gmail.com>

* [SG-750] and [SG-751] Web two step login bug fixes (#3843)

* Continue when enter is hit on email input

* Mark email input as touched on 'continue' so field is validated

* disable login with device on self-hosted (#3895)

* [SG-753] Keep email after hint component is launched in browser (#3883)

* Keep email after hint component is launched in browser

* Use query params instead of state for consistency

* Send email and rememberEmail to home component on navigation (#3897)

* removed avatar and close button from the password screen (#3901)

* [SG-781] Remove extra login page and remove rememberEmail code (#3902)

* Remove browser home guard

* Always remember email for browser

* Remove login landing page button

* [SG-782] Add login service to streamline login form data persistence (#3911)

* Add login service and abstraction

* Inject login service into apps

* Inject and use new service in login component

* Use service in hint component to prefill email

* Add method in LoginService to clear service values

* Add LoginService to two-factor component to clear values

* make login.service variables private

Co-authored-by: Gbubemi Smith <gsmith@bitwarden.com>
Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: gbubemismith <gsmithwalter@gmail.com>

* 400s only log out on invalid  grant error (#3924)

* Fix rust tests apt-get install (#3933)

* Added focus to the email and master password fields (#3934)

* Ps 1754 community pr reviewed (#3929)

* community PR reviewed, Update search cancel button to be visible in all themes

* community PR reviewed, Update search cancel button to be visible in all themes 2

* Update search cancel button to be visible in all themes (#3876)

* Adding the 'libs/**' directory back to the Desktop build pipeline PR trigger list (#3938)

* Re-\added the focusInput method to allow desktop build run (#3937)

* [EC-522] Improve handling of rxjs subjects (#3772)

* [EC-522] feat: no public rxjs subjects

* [EC-522] feat: improve null handling

* [EC-552] fix: init subject with empty set instead of null

* [EC-552] fix: don't push null into account subject

* [EC-522] feat: remove null filter

* [EC-641] Browser Ext UI Update (#3842)

* more css changes

* add icon button hover

* Update apps/browser/src/popup/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update apps/desktop/src/scss/box.scss

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* feedback updates

* restore desktop pseudo rule

* update to include some variable fixes and deletions

* updates per oscar

* feedback updates

more universal variable, adjusted box padding (per Kyle), and aligned footer text

* changes per product design

added border for selects, border around generator, and hover for solarizeddark

* add more helper text space below for visual separation

* group new variable

* login page button fix

Dflinn found an odd margin on the login page

* Revert "Merge branch 'master' into browser-ext-ui-update-test"

This reverts commit b8007102f9, reversing
changes made to 246768cb12.

* fix button height

* revert file changes

* test adjustments

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>

* [SG-792] Added focus to master password field on browser and desktop (#3939)

* Added focus to master password field on browser client

* Added focus to master password field on desktop client

* Tell eslint & prettier to ignore storybook-static (#3946)

* [SG-792] Fixed focus on master password when enter key is pressed (#3948)

* Added focus to master password field on browser client

* Added focus to master password field on desktop client

* fixed focus on master password when enter is pressed

* [EC-7] Org Admin Vault Refresh Client V1 (#3925)

* [EC-8] Restructure Tabs (#3109)

* Cherry pick pending PR for tabs component [CL-17] Tabs - Routing

* Update organization tabs from 4 to 6

* Create initial 'Members' tab

* Create initial 'Groups' tab

* Add initial "Reporting" tab

* Use correct report label/layout by product type

* Create initial 'Billing' tab

* Breakup billing payment and billing history pages

* Cleanup org routing and nav permission service

* More org tab permission cleanup

* Refactor organization billing to use a module

* Refactor organization reporting to use module

* Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

* This partially reverts commit 24bb775 to fix tracking of people.component.html rename.

* Fix people component file rename

* Recover lost member page changes

* Undo members component rename as it was causing difficult merge conflicts

* Fix member and group page container

* Remove unnecessary organization lookup

* [EC-8] Some PR suggestions

* [EC-8] Reuse user billing history for orgs

* [EC-8] Renamed user billing history component

* [EC-8] Repurpose payment method component

Update end user payment method component to be usable for organizations.

* [EC-8] Fix missing verify bank condition

* [EC-8] Remove org payment method component

* [EC-8] Use CL in payment method component

* [EC-8] Extend maxWidth Tailwind theme config

* [EC-8] Add lazy loading to org reports

* [EC-8] Add lazy loading to org billing

* [EC-8] Prettier

* [EC-8] Cleanup org reporting component redundancy

* [EC-8] Use different class for negative margin

* [EC-8] Make billing history component "dumb"

* Revert "[EC-8] Cleanup org reporting component redundancy"

This reverts commit eca337e89b.

* [EC-8] Create and export shared reports module

* [EC-8] Use shared reports module in orgs

* [EC-8] Use takeUntil pattern

* [EC-8] Move org reporting module out of old modules folder

* [EC-8] Move org billing module out of old modules folder

* [EC-8] Fix some remaining merge conflicts

* [EC-8] Move maxWidth into 'extend' key for Tailwind config

* [EC-8] Remove unused module

* [EC-8] Rename org report list component

* Prettier

Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>

* [EC-451] Org Admin Refresh Permissions Refactor (#3320)

* [EC-451] Update new org permissions for new tabs

* [EC-451] Remove redudant route guards

* [EC-451] Remove canAccessManageTab()

* [EC-451] Use canAccess* callbacks in org routing module

* Fix org api service refactor and linting after pulling in master

* Fix broken org people and group pages after merge

* [EC-18] Reporting side nav direction (#3420)

* [EC-18] Re-order side nav for org reports according to Figma

* [EC-18] Fix rxjs linter errors and redundant org flag

* [EC-526] Default to Event Logs page for Reporting Tab (#3470)

* [EC-526] Default to the Events Logs page when navigating to the Reporting tab

* [EC-526] Undo default routing redirect when the child path is missing. Avoids defaulting to "/events" in case a user/org doesn't have access to event logs.

* [EC-19] Update Organization Settings Page (#3251)

* [EC-19] Refactor existing organization settings components to its own module

* [EC-19] Move SSO page to settings tab

* [EC-19] Move Policies page to Settings tab

Refactor Policy components into its own module

* [EC-19] Move ImageSubscriptionHiddenComponent

* [EC-19] Lazy load org settings module

* [EC-19] Add SSO Id to SSO config view

* [EC-19] Remove SSO identfier from org info page

* [EC-19] Update org settings/policies to follow ADR-0011

* [EC-19] Update two-step login setup description

* [EC-19] Revert nested policy components folder

* [EC-19] Revert nested org setting components folder

* [EC-19] Remove left over image component

* [EC-19] Prettier

* [EC-19] Fix missing i18n

* [EC-19] Update SSO form to use CL

* [EC-19] Remove unused SSO input components

* [EC-19] Fix bad SSO locale identifier

* [EC-19] Fix import order linting

* [EC-19] Add explicit whitespace check for launch click directive

* [EC-19] Add restricted import paths to eslint config

* [EC-19] Tag deprecated field with Jira issue to cleanup in future release

* [EC-19] Remove out of date comment

* [EC-19] Move policy components to policies module

* [EC-19] Remove dityRequired validator

* [EC-19] Use explicit type for SSO config form

* [EC-19] Fix rxjs linter errors

* [EC-19] Fix RxJS eslint comments in org settings component

* [EC-19] Use explicit ControlsOf<T> helper for nested SSO form groups.

* [EC-19] Attribute source of ControlsOf<T> helper

* [EC-19] Fix missing settings side nav links

* [EC-19] Fix member/user language for policy modals

* [EC-551] Update Event Logs Client Column (#3572)

* [EC-551] Fix RxJS warnings

* [EC-551] Update page to use CL components and Tailwind classes

* [EC-551] Update Client column to use text instead of icon. Update language and i18n.

* [EC-14] Refactor vault filter (#3440)

* [EC-14] initial refactoring of vault filter

* [EC-14] return observable trees for all filters with head node

* [EC-14] Remove bindings on callbacks

* [EC-14] fix formatting on disabled orgs

* [EC-14] hide MyVault if personal org policy

* [EC-14] add check for single org policy

* [EC-14] add policies to org and change node constructor

* [EC-14] don't show options if personal vault policy

* [EC-14] default to all vaults

* [EC-14] add default selection to filters

* [EC-14] finish filter model callbacks

* [EC-14] finish filter functionality and begin cleaning up

* [EC-14] clean up old components and start on org vault

* [EC-14] loop through filters for presentation

* [EC-14] refactor VaultFilterService and put filter presentation data back into Vault Filter component. Remove VaultService

* [EC-14] begin refactoring org vault

* [EC-14] Refactor Vault Filter Service to use observables

* [EC-14] finish org vault filter

* [EC-14] fix vault model tests

* [EC-14] fix org service calls

* [EC-14] pull refactor out of shared code

* [EC-14] include head node for collections even if collections aren't loaded yet

* [EC-14] fix url params for vaults

* [EC-14] remove comments

* [EC-14] Remove unnecesary getter for org on vault filter

* [EC-14] fix linter

* [EC-14] fix prettier

* [EC-14] add deprecated methods to collection service for desktop and browser

* [EC-14] simplify cipher type node check

* [EC-14] add getters to vault filter model

* [EC-14] refactor how we build the filter list into methods

* [EC-14] add getters to build filter method

* [EC-14] remove param ids if false

* [EC-14] fix collapsing nodes

* [EC-14] add specific type to search placeholder

* [EC-14] remove extra constructor and comment from org vault filter

* [EC-14] extract subscription callback to methods

* [EC-14] Remove unecessary await

* [EC-14] Remove ternary operators while building org filter

* [EC-14] remove unnecessary deps array in vault filter service declaration

* [EC-14] consolidate new models into one file

* [EC-14] initialize nested observable inside of service

Signed-off-by: Jacob Fink <jfink@bitwarden.com>

* [EC-14] change how we load orgs into the vault filter and select the default filter

* [EC-14] remove get from getters name

* [EC-14] remove eslint-disable comment

* [EC-14] move vault filter service abstraction to angular folder and separate

* [EC-14] rename filter types and delete VaultFilterLabel

* [EC-14] remove changes to workspace file

* [EC-14] remove deprecated service from jslib module

* [EC-14] remove any remaining files from common code

* [EC-14] consolidate vault filter components into components folder

* [EC-14] simplify method call

* [EC-14] refactor the vault filter service
- orgs now have observable property
- BehaviorSubjects have been migrated to ReplaySubjects if they don't need starting value
- added unit tests
- fix small error when selecting org badge of personal vault
- renamed some properties

* [EC-14] replace mergeMap with switchMap in vault filter service

* [EC-14] early return to prevent nesting

* [EC-14] clean up filterCollections method

* [EC-14] use isDeleted helper in html

* [EC-14] add jsdoc comments to ServiceUtils

* [EC-14] fix linter

* [EC-14] use array.slice instead of setting length

* Update apps/web/src/app/vault/vault-filter/services/vault-filter.service.ts

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [EC-14] add missing high level jsdoc description

* [EC-14] fix storybook absolute imports

* [EC-14] delete vault-shared.module

* [EC-14] change search placeholder text to getter and add missing strings

* [EC-14] remove two way binding from search text in vault filter

* [EC-14] removed all binding from search text and just use input event

* [EC-14] remove async from apply vault filter

* [EC-14] remove circular observable calls in vault filter service

Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-14] move collapsed nodes to vault filter section

* [EC-14] deconstruct filter section inside component

* [EC-14] fix merge conflicts and introduce refactored organization service to vault filter service

* [EC-14] remove mutation from filter builders

* [EC-14] fix styling on buildFolderTree

* [EC-14] remove leftover folder-filters reference and use ternary for collapse icon

* [EC-14] remove unecessary checks

* [EC-14] stop rebuilding filters when the organization changes

* [EC-14] Move subscription out of setter in vault filter section

* [EC-14] remove extra policy service methods from vault filter service

* [EC-14] remove new methods from old vault-filter.service

* [EC-14] Use vault filter service in vault components

* [EC-14] reload collections from vault now that we have vault filter service

* [EC-14] remove currentFilterCollections in vault filter component

* [EC-14] change VaultFilterType to more specific OrganizationFilter in organization-options

* [EC-14] include org check in isNodeSelected

* [EC-14] add getters to filter function, fix storybook, and add test for All Collections

* [EC-14] show org options even if there's a personal vault policy

* [EC-14] use !"AllCollections" instead of just !null

* [EC-14] Remove extra org Subject in vault filter service

* [EC-14] remove null check from vault search text

* [EC-14] replace store/build names with set/get. Remove extra call to setOrganizationFilter

* [EC-14] add take(1) to subscribe in test

* [EC-14] move init logic in org vault filter component to ngOnInit

* [EC-14] Fix linter

* [EC-14] revert change to vault filter model

* [EC-14] be specific about ignoring All Collections

* [EC-14] move observable init logic to beforeEach in test

* [EC-14] make buildAllFilters return something to reduce side effects

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-97] Organization Billing Language / RxJS Warnings (#3688)

* [EC-97] Update copy to use the word members in a few places

* [EC-97] Cleanup RxJS warnings and unused properties in org billing components

* [EC-599] Access Selector Component (#3717)

* 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-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-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-599] Fix unit test and linter

* [EC-599] Update Enums to Pascal case

* [EC-599] Undo change to Enum values

* [EC-7] fix: broken build

* [EC-646] Org Admin Vault Refresh November Release Prep (#3913)

* [EC-646] Remove links from Manage component

These links are no longer necessary as they are now located in the new OAVR tabs.

* [EC-646] Re-introduce the canAccessManageTab helper

* [EC-646] Re-introduce /manage route in Organization routing module

- Add the parent /manage route
- Add child routes for collections, people, and groups

* [EC-646] Adjust Org admin tabs

Re-introduce the Manage tab and remove Groups and Members tabs.

* [EC-646] Change Members title back to People

* [EC-646] Move missing billing components

Some billing components were in the org settings module and needed to be moved the org billing module

* [EC-646] Fix import file upload button

-Update to use click event handler and tailwind class to hide input. Avoids inline styles/js blocked by CSP

- Fix broken async pipe

* [EC-646] Fix groups and people page overflow

Remove the container and page-content wrapper as the pages are no longer on their own tab

* [EC-646] Change People to Members

Change the text regarding managing members from People to Members to more closely follow changes coming later in the OAVR. Also update the URL to use /manage/members

* [EC-646] Cherry-pick ae39afe to fix tab text color

* [EC-646] Fix org routing permissions helpers

- Add canAccessVaultTab helper
- Update canAccessOrgAdmin include check for vault tab access
- Simplify canManageCollections

* [EC-646] Fix Manage tab conditional logic

- Add *ngIf condition for rendering Manage tab
- Re-introduce dynamic route for Manage tab

* Revert "[EC-14] Refactor vault filter (#3440)" (#3926)

This reverts commit 4d83b81d82.

* Remove old reference to bit-submit-button that no longer exists (#3927)

* [EC-593] Top align event logs row content (#3813)

* [EC-593] Top align event log row contents

* [EC-593] Prevent event log timestamp from wrapping

* [EC-593] Add alignContent input to bitRow directive

* [EC-593] Remove ineffective inline styles (CSP)

* [EC-593] Remove templated tailwind classes

Tailwind minimizes the bundled stylesheet by removing classes that aren't used in code. Using a string template for the classes causes those classes to be ignored.

* [EC-593] Introduce alignContent input to table story

* [EC-657] Hide Billing History and Payment Method for selfhosted orgs (#3935)

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Jake Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* Add padding to top of Safari extension (#3949)

* Use correct provider icon instead of bank icon (#3950)

* Fix undefined property error in event logs (#3947)

EventService.policies was undefined because the service was erroneously using
ngOnInit to subscribe to the policies observable

* PS-1763 - handle undefined locale value that exists before a user sets their language (#3952)

* Autosync the updated translations (#3968)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#3967)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* fixed typo in event log (#3962)

* Org admin refresh translation nitpicks (#3971)

* Fix use of personal in favor of individual vault

* Fix capitalization according to #3577

* Fix capitalization on organizationInfo

* Autosync the updated translations (#3974)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#3973)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* add csp and only pass hostname to duo init (#3972)

* add csp and only pass hostname to duo init

* expand style-src

* Update apps/web/src/connectors/duo.html

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Move hint button out of the formfield (#3960)

* [PS-1734] Send saved urls to autofill script (#3861)

* Send all saved url to autofill script

* Handle array of matched urls in content script

* Prompt at most once to override insecure autofill

* Do not send never match URIs to content script

We know these URIs did not cause the autofill match, so we
can safely remove these from the list of potential matches.

* [PS-1804] Display Organization tab for users with custom permissions (#3980)

* [EC-584] Fixed OrganizationExportResponse to correctly parse data (#3641)

* [EC-584] Fixed OrganizationExportResponse to correctly parse data and use CollectionResponse and CipherResponse constructors

* [EC-584] Removed ListResponse from OrganizationExportResponse properties

* Bumped web version to 2022.10.3 (#3957)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Revert "Bumped web version to 2022.10.3 (#3957)"

This reverts commit 5d8d547cd2.

* Web version bump to 2022.11.0 for QA testing

* Revert "Web version bump to 2022.11.0 for QA testing"

This reverts commit 484db431ed.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Joseph Flinn <joseph.s.flinn@gmail.com>

* [EC-678] [EC-673] Fix active tab not showing selected while in child route (#3964)

* [PS-1114] hide reporting sidebar if only events

* [PS-1114] add orgRedirectGuard

* [PS-1114] highlight tabs based on route subset

* [PS-1114] redirect to correct child route on tab
- Use new OrgRedirectGuard

* [PS-1114] add settings redirect using guard
- refactored guard to accept array of strings

* [EC-678] [EC-673] remove remaining methods

* [EC-678][EC-673] address PR feedback
- change switch to if statements
- remove ternary

* [EC-672] Update SSO login page language (#3997)

- Replace 'Organization Identifier' with 'SSO identifier'
- Sentence case 'SSO identifier'
- Add 'SSO' to SSO login page helper text

* Autosync the updated translations (#3969)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* [EC-661] Add web worker code bundles to Safari browser extension (#3986)

* Make browser bundle encrypt-worker.ts into a single named file

* Add encrypt-worker bundle to xcode proj

* Fixed EC reported event log copy bugs (#3977)

* [EC-645] fix: web payment component breaking storybook compilation (#3906)

* add run-name for releases to include their workflow trigger (#3996)

* add run-name for releases to include their workflow trigger

* add edit for linter error

* Update .github/workflows/release-web.yml

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>

* Extract and fix trigger for PR auto responses (Translation-PRs) (#3992)

* Extract and fix trigger for PR auto responses

* Fix permission used for job

* [EC-650] Revert observable usage from ImportComponent (#4010)

* Run enforce labels workflow on version bump in clients repo (#4006)

* Fix version bump to run enforce labels workflow

* Add login to Azure

* Trigger enforce labels manually from bump version workflow

* Update .github/workflows/enforce-labels.yml

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>

* Update .github/workflows/version-bump.yml

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>

* [EC-670] Update Members tab to support flex wrap (#4003)

Use tailwind classes to style the Members page header so that it supports wrapping the controls to a new line should they exceed the width of the container.

* [PS-1841] Fix org-* commands for CLI (#4013)

* Add getFromState method

* Added a method for CLI to get an org from state

* Converted all CLI calls to `.get()`

* Used `.getFromState` instead of `.get`

* Deprecate getFromState method

* Remove local vaultFilter (#4014)

* Use vault filter item from vaultFilterService

* [PS-1843] Sort organizations in `buildOrganizations` (#4015)

* Sort organizations in buildOrganizations

* Add sort by name to Organization Switcher

* [EC-675] Display the Event for “Viewed Card Number for item item-identifier” (#3976)

* [EC-675] Add missing Event capture for viewing item Card Number

* [EC-675] Fix correct event type for viewing item Card Number

* Update apps/web/src/locales/en/messages.json

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [EC-449] Event log user for SCIM events (#3643)

* [EC-449] Added EventSystemUser Enum and added systemUser property to eventResponse

* [EC-449] Add systemUser property to BaseEventsComponent, EventExport and EventView

* [EC-449] Set EventSystemUser as string on EventExport

* [EC-449] Remove systemUser from EventExport

* [EC-449] Rename EventSystemUser file to lowercase

* [EC-449] Force git to rename EventSystemUser file

* [EC-449] Rename EventSystemUser file to event-system-user.ts

* [EC-449] Fix EventSystemUser reference on EventsComponent

* [EC-449] Move installationId username logic to BaseEventsComponent

* Update libs/common/src/enums/event-system-user.ts

Add a note to warn about using the Enum key in the UI.

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [EC-449] Remove EventSystemUser from provider events. Remove nested condition on events component

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [PS-1840] - fix for covered dropdown on empty vault (#4019)

* fix for covered dropdown on empty vault

This could be done one of 2-3 ways. I think this might be the least problematic, but could also be done with just changing "position: absolute" to "relative on the ".no-items" class - base.css:461 For some reason, I'm unable to load the spinner to test.

* rename class

* Remove uses of rxjs in CLI (#4028)

* [SM-327] Electron hard reset (#3988)

* Add folders to whitelist (#3994)

* Defect/sg 650 desktop pw/passphrase gen not auto updating on min value change (#4032)

* SG-650 - Desktop - Pw Generation - Min value ctrls now use (change) instead of (blur) for better responsiveness when using arrows on input or arrow keys.  Note: (input) has change detection issues for resetting the value to either max pw length or max value of 9 + passwordGeneration.service logic possibly needs refactoring to either enforce max of 9 or not

* SG-650 - Desktop - Passphrase Gen - min words now uses (change) instead of (blur) for better responsiveness

* Autosync the updated translations (#4035)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#4036)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Autosync the updated translations (#4037)

Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>

* Expand serve origin protection warning (#4024)

This warning was kept vague during fix rollout, but now that we're more
than a release past, we can expand the explanation.

* [SM-340] Fix share modal not closing on cancel (#4041)

* [EC-739 / EC-740] Add null check to policyFilter on PolicyService (#4039)

* [EC-739 / EC-740] Add null check to policyFilter on PolicyService

* [EC-739 / EC-740] Add unit tests for policy filter

* [PS-1805] BEEEP: Renamed importers based on agreed naming-convention (#3978)

* Rename all importer related files

Renamed all files based on our naming convention which we decided on with https://github.com/bitwarden/adr/blob/master/decisions/0012-angular-filename-convention.md

* Removed entries from whitelist-capital-letters.txt

* Rename missing safeInCloud test data

* Fix broken import

* Renamed folders (removed capital letters)

* Fix filename of BitwardenCsvImporter

* Fix imports of onepassword mac/win importer tests

* Remove already renamed folders from whitelist

* Rename dashlaneImporters to dashlane

Rename the folder
Fix all the imports
Remove dashlaneImporters from white-list

* Rename keeperImporters to keeper

Rename the folder
Fix all the imports
Remove keeperImporters from white-list

* Rename onepasswordImporters to onepassword

Rename the folder
Fix all the imports
Remove onepasswordImporters from white-list

* Rename safeinCloud test data folder

* Fix onepassword importer type imports

* [EC-744] Revert PolicyService back to clearing DecryptedPolicies on StateService (#4042)

* [EC-746] Call BaseAddEditComponent.ngOnInit on Desktop AddEditComponent (#4044)

* PS-1798 - ensure admin users can edit ciphers (#4025)

* Use loginService to get and set remember email values (#3941)

* SG-428 - Browser Extension - Send - Expiration / Deletion date calendar icon +… (#4034)

* Browser Extension - Send - Expiration / Deletion date calendar icon + datepicker pop up now respect theme better in Chrome / Chromium based browsers and Safari (Firefox datepicker pop up doesn't seem to have an easy mechanism for theming)

* SG-428 - Extension - Iconography for date inputs for Chromium browsers now reflects theme colors properly + hover states; icon not shown on non-Chromium browsers

* Variables.scss - ran prettier locally after tweaking comments to pass eslint checks

* [EC-743] Call super to ngOnInit to include policy observable changes (#4047)

* Hide My Vault if Remove Individual Vault is on (#4052)

* Devops 1039 update release flow dry run step names (#4016)

* Updated workflows to not create Github deployment on Dry Run. (#4049)

* Add organization-options menu to single org (#3678) (#4051)

Re-apply commit 7c3255d (#3678) which was accidentally reverted by
the Org Admin Refresh changes in commit 09c3bc8 (#3925)

* SG-725 - Desktop - Moved DuckDuckGo setting down so that the Biometric browser settings are not separated (#4059)

* [EC-750] Specify organizationId for credit and adjust payment components (#4061)

* [SM-330] Disable managed environments for safari (#3953)

* [EC-665] Fix biometrics button style (#3979)

* fix biometrics button style

* expand button to fill space

this is a result of it being used outside the box-content

* remove padding from box-footer

* Added Mastodon to follow us menu (#4029)

* Add branch check for Staged Rollout Desktop workflow (#4062)

* [PS-1783] Fix file selector input bug from PS-1465 ( #3502 ) (#3928)

* Fix file selector input

* Add file selector state changes back

* Remove async pipe

* Revert "[EC-646] Org Admin Vault Refresh November Release Prep (#3913)"

This reverts commit 4b57d28e28.

* [EC-646] Move missing billing components

Some billing components were in the org settings module and needed to be moved the org billing module

(cherry picked from commit 1c11695f46)

* [EC-646] Cherry-pick ae39afe to fix tab text color

(cherry picked from commit 467f584b9e)

* Make destroy$ protected to fix linting error

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Sammy Chang <sammychang2185@gmail.com>
Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
Co-authored-by: Gbubemi Smith <gsmith@bitwarden.com>
Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: gbubemismith <gsmithwalter@gmail.com>
Co-authored-by: Kyle Spearrin <kspearrin@users.noreply.github.com>
Co-authored-by: Michał Chęciński <mchecinski@bitwarden.com>
Co-authored-by: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
Co-authored-by: Scott McFarlane <91044021+scottmondo@users.noreply.github.com>
Co-authored-by: Joseph Flinn <58369717+joseph-flinn@users.noreply.github.com>
Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>
Co-authored-by: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>
Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Jake Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>
Co-authored-by: dgoodman-bw <109169446+dgoodman-bw@users.noreply.github.com>
Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
Co-authored-by: Rui Tomé <108268980+r-tome@users.noreply.github.com>
Co-authored-by: Joseph Flinn <joseph.s.flinn@gmail.com>
Co-authored-by: Opeyemi <54288773+Eebru-gzy@users.noreply.github.com>
Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>
Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Co-authored-by: Ash Leece <ash@leece.im>

* [EC-16] Implement new Groups Tab (#3563)

* [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-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-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-86] Rename new files using kebab-case

* [EC-86] Fix group view file name

* [EC-86] Fix group request/response file names

* [EC-86] Cleanup badge stories per review suggestions

* [EC-86] Use inline-flex for badge list container

* [EC-86] Move GroupService and Views to Web org module

- Move GroupService and GroupServiceAbstraction to Organization Module
- Add GroupService provider to Organization Module
- Move collection-add-edit.component, user-groups.component, group-add-edit.component, and groups.component into Organization Module as they now depend on GroupService
- Remove moved components from Loose Component module

* [EC-86] Fix Group table search

Adds the id and name properties to GroupDetailsRow to support using the searchPipe (which cannot access nested values such as details.name for filtering).

* [EC-86] Fix badge story controls

* [EC-87] Edit Group Dialog (#3651)

* [EC-87] Update the edit dialog to use content tabs

* [EC-87] WIP FormListSelection abstract controller

* [EC-87] WIP FormListSelection for members and collections

* [EC-87] More WIP on FormListSelection

* [EC-87] WIP Working FormSelectionList with initial value support

* [EC-87] WIP SelectionList without FormControls and with i18n support for sorting

* [EC-87] Final sorted SelectionList with FormArray support

* [EC-87] Extract and document FormSelectionList

* [EC-87] Functional edit group modal

* [EC-87] Remove button icon padding for bitButton directives

* [EC-87] Use new disablePadding attribute for Dialog component

* [EC-87] Some more cleanup and finetuning

* [EC-87] Move enum declaration to top

* [EC-87] Remove inline style from access selector

* [EC-87] Move Group components into Organization Module

* [EC-87] Add MultiSelectModule to Shared Web module

* [EC-87] Integrate AccessSelector component in GroupAddEdit modal

- Remove duplicate permission / selection readonly helpers from GroupAddEdit component
- Use access item views/values for collection and member lists
- Replace access selector HTMl with the AccessSelector component

* [EC-87] Update Group collections column to open Collection tab

* [EC-87] Remove old FormSelectionList file

* [EC-87] Fix missed file import changes after merge

* [EC-87] Remove GroupAddEditComponent modal service registration

Groups component is now using the DialogService which does not require explicit registration for lazy loaded components.

* [EC-87] Use injected DIALOG_DATA for GroupAddEdit component

- Add types for the GroupAddEdit dialog params, result, and tab indices
- Add strongly typed helper method to open GroupAddEdit dialogs
- Remove @Input()/@Output() properties. Replaced with the injected DIALOG_DATA params instead
- Use dialogRef.close() and result type instead of event emitters

* [EC-87] Rename collection tab type to collections

* [EC-87] Refactor postGroup() and putGroup() from ApiService

- Move postGroup() and putGroup() methods to GroupService
- Remove postGroup() and putGroup() from ApiService
- Move GroupResponse and GroupRequest into Web (from lib/common)

* [EC-87] Remove required attribute

* [EC-87] Use PascalCase for template Enums

* [EC-87] Use group modal tab enum in template

* [EC-87] Convert dialog result to promise

* [EC-87] Refactor dialog positionStrategy

- Add .top() to position strategy to allow clicking the backdrop to close the dialog
- Move the positionStrategy option into the openGroupAddEditDialog helper

* [EC-87] Remove [preserveContent] from tab group

* [EC-87] Use new CL async actions

- Update handlers to be arrow-functions
- Remove old form and delete promises
- Use [bitSubmit] directive on form
- Use bitFormButton directive and [bitAction] for submit and delete buttons
- Remove delete/spinner bwi icons as they are handled by the new async directives

* [EC-87] Introduce CollectionAccessSelectionView

Use a new view to replace the SelectionReadonlyResponse/Request classes.

* [EC-87] Use new access selection view in GroupView

- Change the collections type
- Add members list to make the view more complete
- Update the static fromResponse helper to properly map the GroupDetailsResponse to the new access selection view
- Update access selector helpers to use new access selection view instead of response/request models

* [EC-87] Update GroupService to have a single save() method that accepts a GroupView

- Add save() method that checks for existing group id to determine which API method to use
- Make post/put group methods private

* [EC-87] Utilize the new save() method in the group modal

* [EC-87] Use observables for fetching data

- Introduce 3 observables for collections, members, and group details
- Combine and subscribe to those observables in ngOnInit
- Add destroy$ subject
- Inject changeDetectorRef to handle quirk of patching the AccessSelector value before available items are set

* [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 3ed1221f7f)

* [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 <jfink@bitwarden.com>
Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* Revert "[EC-73] edit collection modal (#3638)"

This reverts commit 39655ebe29.

* Merge EC-73 Again After Rebase (#4104)

* [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] chore: re-add collections page

* [EC-73] chore: move component to shared org module

* [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] 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: 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

* Fix remaining errors after rebase/merge

* fix: import shared module directly

Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>

* Fix missing Access Selector Module after merge

* remove overlay to center dialogs again (#4146)

* [EC-547] members details dialog improvements (#4161)

* [EC-547] feat: mostly migrate to new CL dialogs

* [EC-547] feat: move dialog to separate module

* [EC-547] chore: rename to user dialog component

* [CL-547] feat: replace footer buttons with CL buttons

* [EC-547] chore: move nested checkbox component into dialog module

* [EC-547] feat: migrate to async actions and remove form promise

* [EC-547] feat: add tab layout

* [EC-547] fix: dialog vertical overflow

We were using `max-height: 100vh` and `margin: 1rem 0` on the same
element which meant that our full height was 100vh + 1rem which pushed
the dialog outside of the screen.

* [EC-547] feat: change user to member in header

* [EC-547] feat: add name to header

* [EC-547] feat: add ability to specify initial tab

* [EC-547] fix: copy pasta in comments

* [EC-547] chore: rename user to member dialog

* [EC-547] chore: simplify switch statement

* Fix strictTemplating warnings/error after merge with master

* Refactor GroupService into Core org module (#4112)

* Refactor GroupService into Core org module

- Move Group service folder into Core org folder
- Remove GroupServiceAbstraction
- Rename GroupService in components
- Remove GroupService from list of Org Module providers (use @Injectable decorator instead)

* Import/export SharedModule from SharedOrganizationModule

* Move GroupView to core organization folder

* Fix file names for org collection views

* Cleanup core organization barrel files

* [EC-15] Members Grid (#4097)

* [EC-623] Introduce shared organization module and search input component

* [EC-623] Add search input story

* [EC-15] Introduce Members module

- Add members module and members routing module
- Move members only components into the members module and folder
- Remove members only components from LooseComponents module
- Update organization routing module to lazy load members module

* [EC-15] Enable ToggleGroup component to support generic values

Using a generic type for the ToggleGroup allows using both Strings and Enums as values without causing Typescript compiler warning/errors.

* [EC-15] Force no bottom margin for Toggle button label

* [EC-15] Update Members page header

- Use bit-toggle for member status filter
- Update bit-toggle Accepted button to say Needs Confirmation
- Use bit-search-input
- Update search placeholder text
- Update invite member button style and text
- Import ToggleGroupModule into ShareModule

* [EC-15] Update members table

- Use the CL bit-table component
- Add new table headings
- Replace cog options menu with bit-menu component
- Add placeholder for groups/collection badges

* [EC-15] Specify default generic type for ToggleGroup

* [EC-15] Modify getOrganizationUsers() in Api service

- Optionally allow the Api service to fetch org user groups and/or collections
- Will eventually be moved to an organization user service, but kept here for now

* [EC-15] Update member view to fetch groups/collections for users

- Use the new Api service functionality
- Fetch the organization's list of groups and decrypted collection for rendering their names in the table

* [EC-15] Refresh table after editing user groups

* [EC-15] Move new members dialog into members module

* [EC-15] Show "All" in collections column for users with AccessAll flag

* [EC-15] Update copy after talking with design/product

* [EC-14] Part II: Add Collection Rows to Vault List (#3875)

* [EC-14] initial refactoring of vault filter

* [EC-14] return observable trees for all filters with head node

* [EC-14] Remove bindings on callbacks

* [EC-14] fix formatting on disabled orgs

* [EC-14] hide MyVault if personal org policy

* [EC-14] add check for single org policy

* [EC-14] add policies to org and change node constructor

* [EC-14] don't show options if personal vault policy

* [EC-14] default to all vaults

* [EC-14] add default selection to filters

* [EC-14] finish filter model callbacks

* [EC-14] finish filter functionality and begin cleaning up

* [EC-14] clean up old components and start on org vault

* [EC-14] loop through filters for presentation

* [EC-14] refactor VaultFilterService and put filter presentation data back into Vault Filter component. Remove VaultService

* [EC-14] begin refactoring org vault

* [EC-14] Refactor Vault Filter Service to use observables

* [EC-14] finish org vault filter

* [EC-14] fix vault model tests

* [EC-14] fix org service calls

* [EC-14] pull refactor out of shared code

* [EC-14] include head node for collections even if collections aren't loaded yet

* [EC-14] fix url params for vaults

* [EC-14] remove comments

* [EC-14] Remove unnecesary getter for org on vault filter

* [EC-14] fix linter

* [EC-14] fix prettier

* [EC-14] add deprecated methods to collection service for desktop and browser

* [EC-14] simplify cipher type node check

* [EC-14] add getters to vault filter model

* [EC-14] refactor how we build the filter list into methods

* [EC-14] add getters to build filter method

* [EC-14] start adding header and collection rows

* [EC-14] remove param ids if false

* [EC-14] Make collection rows navigatable

* [EC-14] fix collapsing nodes

* [EC-14] add specific type to search placeholder

* [EC-14] remove extra constructor and comment from org vault filter

* [EC-14] extract subscription callback to methods

* [EC-14] Remove unecessary await

* [EC-14] Remove ternary operators while building org filter

* [EC-14] remove unnecessary deps array in vault filter service declaration

* [EC-14] consolidate new models into one file

* [EC-14] change name of edit collections method

* [EC-14] add collection badges to item rows

* [EC-14] show groups badge on collection rows

* [EC-14] add bulk actions to header menu button

* [EC-14] initialize nested observable inside of service

Signed-off-by: Jacob Fink <jfink@bitwarden.com>

* [EC-14] change how we load orgs into the vault filter and select the default filter

* [EC-14] remove get from getters name

* [EC-14] remove eslint-disable comment

* [EC-14] move vault filter service abstraction to angular folder and separate

* [EC-14] rename filter types and delete VaultFilterLabel

* [EC-14] remove changes to workspace file

* [EC-14] remove deprecated service from jslib module

* [EC-14] remove any remaining files from common code

* [EC-14] consolidate vault filter components into components folder

* [EC-14] simplify method call

* [EC-14] refactor the vault filter service
- orgs now have observable property
- BehaviorSubjects have been migrated to ReplaySubjects if they don't need starting value
- added unit tests
- fix small error when selecting org badge of personal vault
- renamed some properties

* [EC-14] replace mergeMap with switchMap in vault filter service

* [EC-14] early return to prevent nesting

* [EC-14] clean up filterCollections method

* [EC-14] use isDeleted helper in html

* [EC-14] add jsdoc comments to ServiceUtils

* [EC-14] fix linter

* [EC-14] use array.slice instead of setting length

* [EC-14] resolve merge conflicts

* [EC-14] remove checkbox from end user vault collection rows

* [EC-14] add owner column to collections in end user vault

* [EC-14] add a11y titles for vault filters

* Update apps/web/src/app/vault/vault-filter/services/vault-filter.service.ts

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

* [EC-14] add missing high level jsdoc description

* [EC-14] fix storybook absolute imports

* [EC-14] delete vault-shared.module

* [EC-14] change search placeholder text to getter and add missing strings

* [EC-14] remove two way binding from search text in vault filter

* [EC-14] removed all binding from search text and just use input event

* [EC-14] remove async from apply vault filter

* [EC-14] remove circular observable calls in vault filter service

Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>

* [EC-14] move collapsed nodes to vault filter section

* [EC-14] deconstruct filter section inside component

* [EC-14] fix merge conflicts and introduce refactored organization service to vault filter service

* [EC-14] remove mutation from filter builders

* [EC-14] fix styling on buildFolderTree

* [EC-14] remove leftover folder-filters reference and use ternary for collapse icon

* [EC-14] remove unecessary checks

* [EC-14] stop rebuilding filters when the organization changes

* [EC-14] Move subscription out of setter in vault filter section

* [EC-14] remove extra policy service methods from vault filter service

* [EC-14] remove new methods from old vault-filter.service

* [EC-14] Use vault filter service in vault components

* [EC-14] reload collections from vault now that we have vault filter service

* [EC-14] remove currentFilterCollections in vault filter component

* [EC-14] change VaultFilterType to more specific OrganizationFilter in organization-options

* [EC-14] include org check in isNodeSelected

* [EC-14] add getters to filter function, fix storybook, and add test for All Collections

* [EC-14] Resolve merge conflicts

* [EC-14] fix merge conflicts

* [EC-14] fix merge conflicts: org service protected and remove absolute path

* [EC-14] separate org vault filter service observables

* [EC-14] remove folder subject in vault filter service

* [EC-14] remove collections subject from vault filter service

* [EC-14] change collection api call name
- getCollectionsWithDetails to getManyCollectionsWithDetails

* [EC-14] add collection functionality
- add endpoint to bulk delete collections
- add logic to bulk delete both ciphers and collections
- refresh ciphers list after making collection changes
- stop making api calls from ciphers list each time a filter changes

* [EC-14] get collections from vault filter service
- for badge, instead of passing through @Input variable

* [EC-14] only bulk delete collections if passed

* [EC-14] fix deleting ciphers in org vault
- reuse same logic from end user vault
- call different api endpoints

* [EC-14] include collections in MaxCheckedCount

* [EC-14] add paging to collections

* [EC-14] hide collections if searching

* [EC-14] change vault table to new table component
- removed a lot of scss classes to use tailwind alternatives
- added getters for arrays in component that template can reference
- imported and used new bitIconButton for options button

* [EC-14] remove cursor pointer when checkbox not available

* [EC-14] stop reloading cipher list too early

* [EC-14] stop setting cipher component to loaded too early
- loaded variable on cipher component hides the loaded indicator
- when setting the default filter, we were triggering that variable
- instead, we'll just set the active filter and let it grab the filter when ready

* [EC-14] check/navigate collection when clicked

* [EC-14] rename edit collections callback
- used to be onEditCollection
- renamed to onEditCipherCollections

* [EC-14] remove showOrganizationBadge property
- property used to tell template whether it was org vault or end user
- replace with check for organization property

* [EC-14] replace || with ?? in load function of ciphers

* [EC-14] remove nested subscriptions
- nested subscriptions = bad
- the only dependency any of the subscriptions have is on the organization
- use withLatestFrom to verify that the org has been set before firing

* [EC-14] add getters and rename method

* [EC-14] add null check in bulk delete component
- some input variables can be null, so we can't just check the length

* [EC-14] add ItemRow type
- ItemRow can be either CipherView or CollectionFilter
- Consolidated a large portion of selection logic

* [EC-14] remove extra applyFilter override
- Removed extra applyFIlter, allCiphers has already been filtered by org
- Also reordered some of the methods to make more sense

* [EC-14] remove extra collections uncheck

* [EC-14] transition bulk delete to dialog service

* [EC-14] transition bulk restore to dialog service

* [EC-14] transition bulk move to dialog service

* [EC-14] transition bulk share to dialog service

* [EC-14] remove modal references

* [EC-14] reload cipher list when changing orgs

* [EC-14] add helper method to bulk delete dialog
- Gives us built in typing instead of having to redeclare

* [EC-14] add helper to open bulk restore dialog
- Gives us typing without redeclaring

* [EC-14] add open helper to bulk move dialog

* [EC-14] add open helper to bulk share dialog
- Adds typing to data
- also removed the component refs from bulk actions

* [EC-14] remove modal service from bulk actions

* [EC-14] introduce VaultItemRow to combine cipher and collections

* [EC-14] show loading indicator while switching orgs

* [EC-14] remove indexing every time filter changes
- also reverted back to using setter for changing org

* [EC-14] allow searching by function in search pipe
- this allows us to search parent properties in objects

Co-authored-by: Andreas Coroiu <andreas@andreascoroiu.com>

* [EC-14] make collections searchable
- used search pipe to filter based on search text

* [EC-14] consolidate bulk dialogs in single module

* [EC-14] remove form promise from bulk dialogs

* [EC-14] stop casting dialog return type
- we now have a helper function that gives us typing on result

* [EC-14] add length check to array guard

* [EC-14] remove extra false assignment

* [EC-14] move to sentence case

* [EC-14] address pr feedback

* [EC-14] add back the default assignment to deleted
- we need this default assignment to check for null or undefined values

* [EC-14] remove optional chaining
- everything is initialized to an empty array so it should never be null

* [EC-14] remove manager check to show org vault
- this is fixed upstream in a more comprehensive way

* [EC-686] add tests and comments to serviceUtils (#4092)

* [EC-686] add tests and comments to serviceUtls

* [EC-686] whitelist spec filename from linter

* [EC-686] fix prettier

* [EC-14] use new collection admin service

* [EC-14] fix groups searching

* [EC-14] use new groups service and models

* [EC-14] fix shared module

* [EC-14] remove leftover empty vault filter service

* [EC-14] remove CollectionGroupDetailsView models

* [EC-14] replace GroupDetails with AdminView
- Collections in vault filter now use admin view to get access details
- Collections shown in cipher list use admin view for access details

* [EC-14] add back the dialog to shared module

* [EC-14] hide org vault if lacking permissions

* [EC-14] add edit collection dialog to vault

* [EC-14] add screen reader label to share dialog

* [EC-14] moved sync call below subscription
- the subscription gives a callback for when we finish a sync
- by awaiting the sync before we weren't using the callback to refresh

* [EC-14] move cipher params check to switchMap
- we want to avoid async subscriptions

* [EC-14] clean up subscriptions in org vault
- added takeUntil
- use combineLatest

* [EC-14] clean up vault subscriptions
- remove nested subscriptions
- use takeUntil

* [EC-14] init ciphers component first

* [EC-14] fix view vault tab permissions
- CanViewAssignedCollections doesn't include CanViewAllCollections
- CanViewAssignedCollections does include IsManager

* [EC-14] reduce nesting

* [EC-14] rename bulk action dialogs selectors

* [EC-14] fix permissions for collection management
- users with custom admin permissions should be able to edit as well

* [EC-14] prettier

* [EC-14] use percentages for table columns widths

* [EC-14] use GetCollectionAccessDetails in cli
- renamed api call

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>
Co-authored-by: Andreas Coroiu <andreas@andreascoroiu.com>

* [EC-549] Member details collections tab (#4207)

* [EC-784] Introduce OrganizationUserService and abstraction

* [EC-784] Move API response models into abstraction folder

* [EC-784] Register OrganizationUserService in JsLib

* [EC-784] Add OrganizationUserService to CLI Main

* [EC-784] Move getOrganizationUser()

- Move getOrganizationUser() implementation to OrganizationUserService
- Update any references to the API service in the CLI and Web projects

* [EC-784] Move getOrganizationUserGroups()

* [EC-784] Move and rename getOrganizationUsers()

* [EC-784] Move getOrganizationUserResetPasswordDetails()

* [EC-784] Move OrganizationUser API request models into abstraction folder

* [EC-784] Move postOrganizationUserInvite()

* [EC-784] Move postOrganizationUserReinvite()

* [EC-784] Move postManyOrganizationUserReinvite()

Also tweak the signature to avoid exposing the API request model

* [EC-784] Move postOrganizationUserAccept()

* [EC-784] Move postOrganizationUserConfirm()

* [EC-784] Move postOrganizationUsersPublicKey()

Also modify signature to avoid exposing API request model

* [EC-784] Move postOrganizationUserBulkConfirm()

* [EC-784] Move putOrganizationUser()

* [EC-784] Move putOrganizationUserGroups()

* [EC-784] Update abstraction method definitions to use abstract keyword

* [EC-784] Move putOrganizationUserResetPasswordEnrollment()

* [EC-784] Move putOrganizationUserResetPassword()

* [EC-784] Move deleteOrganizationUser()

* [EC-784] Move deleteManyOrganizationUsers()

* [EC-784] Move revokeOrganizationUser()

* [EC-784] Move revokeManyOrganizationUsers()

* [EC-784] Move restoreOrganizationUser()

* [EC-784] Move restoreManyOrganizationUsers()

* [EC-784] Move internal OrganizationUserBulkRequest model out of service abstraction

* [EC-784] Rename organizationUser folder to organization-user

* [EC-549] feat: add unconnected access selector

* [EC-549] fix: old user group dialog not working

* [EC-549] feat: add support for showing collections

* [EC-549] feat: rewrite and implement saving and inviting

* [EC-549] feat: implement support for access all collections

* [EC-549] feat: remove collection form from role tab

* [EC-549] chore: clean up comments

* [EC-549] fix: revert changes to access selector story

* [EC-549] feat: handle organizations that dont use groups

Co-authored-by: Shane Melton <smelton@bitwarden.com>

* [EC-424] top level vault (#4267)

* [EC-424] remove cog menu and header hr

* [EC-424] change "Add item" to "New item"

* [EC-424] include text for "New item"

* [EC-424] add new item dropdown to org vault
- add parent collection to dialog params

* [EC-14] show Add Item if missing permissions

* fix: broken password input toggle tests

* [EC-63] Implement breadcrumb component (#3762)

* [EC-63] feat: scaffold breadcrumb module

* [EC-63] feat: add first very basic structure

* [EC-63] feat: dynamically rendered crumbs with styling

* [EC-63] feat: implement overflow logic

* [EC-63] feat: hide overflow and show ellipsis

* [EC-63] feat: fully working with links

* [EC-63] feat: add support for only showing last crumb

* [EC-63] chore: fix missing template

* [EC-63] chore: refactor and add test case

* [EC-63] refactor: change parent type to treenode

* [EC-63] feat: add breadcrumbs to org vault

* [EC-63] feat: add links to breadcrumbs (dont work yet)

* [EC-63] feat: add support for click handler in breadcrumbs

* [EC-63] feat: working breadcrumb links

* [EC-63] feat: add collections group head

* [EC-63] feat: add breadcrumbs to personal vault

* [EC-63] feat: use icon button

* [EC-63] feat: use small icon button

* [EC-63] fix: add margin to breadcrumb links

The reason for this fix is that the bitIconButton used to open the overflow menu is much taller than the rest of the elements in the list. This causes the whole component to grow and shrink depending on if it contains too many breadcrumbs or not. In the web vault this causes the cipher list to jump up and down while navigating. This increases the height of the entire component so that the icon button no longer affects it.

* [EC-63] fix: tests using wrong parent

* [EC-63] feat: use ngIf instead of else

* [EC-63] refactor: attempt to improve tree node factory readability

* [EC-548] Member Details Group Tab (#4273)

* [EC-784] Introduce OrganizationUserService and abstraction

* [EC-784] Move API response models into abstraction folder

* [EC-784] Register OrganizationUserService in JsLib

* [EC-784] Add OrganizationUserService to CLI Main

* [EC-784] Move getOrganizationUser()

- Move getOrganizationUser() implementation to OrganizationUserService
- Update any references to the API service in the CLI and Web projects

* [EC-784] Move getOrganizationUserGroups()

* [EC-784] Move and rename getOrganizationUsers()

* [EC-784] Move getOrganizationUserResetPasswordDetails()

* [EC-784] Move OrganizationUser API request models into abstraction folder

* [EC-784] Move postOrganizationUserInvite()

* [EC-784] Move postOrganizationUserReinvite()

* [EC-784] Move postManyOrganizationUserReinvite()

Also tweak the signature to avoid exposing the API request model

* [EC-784] Move postOrganizationUserAccept()

* [EC-784] Move postOrganizationUserConfirm()

* [EC-784] Move postOrganizationUsersPublicKey()

Also modify signature to avoid exposing API request model

* [EC-784] Move postOrganizationUserBulkConfirm()

* [EC-784] Move putOrganizationUser()

* [EC-784] Move putOrganizationUserGroups()

* [EC-784] Update abstraction method definitions to use abstract keyword

* [EC-784] Move putOrganizationUserResetPasswordEnrollment()

* [EC-784] Move putOrganizationUserResetPassword()

* [EC-784] Move deleteOrganizationUser()

* [EC-784] Move deleteManyOrganizationUsers()

* [EC-784] Move revokeOrganizationUser()

* [EC-784] Move revokeManyOrganizationUsers()

* [EC-784] Move restoreOrganizationUser()

* [EC-784] Move restoreManyOrganizationUsers()

* [EC-784] Move internal OrganizationUserBulkRequest model out of service abstraction

* [EC-784] Rename organizationUser folder to organization-user

* [EC-549] feat: add unconnected access selector

* [EC-549] fix: old user group dialog not working

* [EC-549] feat: add support for showing collections

* [EC-549] feat: rewrite and implement saving and inviting

* [EC-549] feat: implement support for access all collections

* [EC-549] feat: remove collection form from role tab

* [EC-549] chore: clean up comments

* [EC-549] fix: revert changes to access selector story

* [EC-549] feat: handle organizations that dont use groups

* [EC-548] Add groups to request models

* [EC-548] Add groups to the user admin service and view

* [EC-548] Add group access selector

* [EC-548] Cleanup data fetching

* [EC-548] Update i18n

- Add new keys
- Update copy
- Remove duplicates

* [EC-548] Rename collection access items

* [EC-548] Move shared fields to parent response class

Move the collections and groups fields to the parent OrganizationUserResponse class as it was being duplicated by both children.

* [EC-548] Add option to include groups in org user details query

* [EC-548] Use groups from user query in member dialog

Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>

* [EC-824] Fix Group table opening two dialogs (#4287)

* [EC-824] Stop button click event propagation to prevent opening the modal twice

Keeping the (click) event on the table cell allows for users to miss the text and still open the group.

* [EC-824] Drop click event handler from button

The button still triggers the click event for the parent cell by both click and keyboard interaction so there's no need to prevent event propagation, we can just remove the button event handler.

* [EC-550] members role tab (#4297)

* [EC-550] rename user type to member role

* [EC-550] rename user admin view to org user admin view

* [EC-550] add user type to reactive forms

* Update ngOnInit to properly handle inviting new members (#4298)

* [EC-550] use checkbox component in members dialog

* [EC-550] use bitInput for emails and add to form control

* [EC-550] set all hint font size to 14px

* [EC-550] feat: migrate role radio group

* [EC-855] refactor permissions checkboxes
- use reactive forms
- remove bootstrap

Co-authored-by: Andreas Coroiu <andreas@andreascoroiu.com>

* [EC-550] hookup new permissions form properties

* [EC-550] update [disabled] to [attr.disabled]

Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Andreas Coroiu <andreas@andreascoroiu.com>

* [EC-864] fix: inconsistent dialog size (#4303)

* chore: Remove collection dialog stories (#4302)

* Sort collections by name before building the node tree (#4308)

* [EC-828] Access selector layout bugs (#4301)

* [EC-828] fix: permission column offset

* [EC-828] fix: focus border width

* [EC-828] feat: add border on hover

Border matches the hover border for the icon button.

* [EC-828] fix: properly align permission column

Chrome adds extra padding to select elements and the only way to remove it is using `appearence: none`. Unfortunately Firefox does not do this, meaning that we have different behavior when trying to use some of the built in select styles.

* [EC-828] feat: re-add select chevron

chevron is removed when setting `appearence: none`. We now have the different chevrons on a single screen thought...

* [EC-828] fix: chevron looking off-center in chrome

* [EC-828] fix: multi-select height

Min-height seems like a very hacky solution but I think we need to properly go through these styles when we have more time. Would be nice if we could change the chevron to be the same everywhere for example.

* [EC-828] fix: multi-select csp issues

* [EC-845] Fix group modal error handling  (#4299)

* [EC-550] rename user type to member role

* [EC-550] rename user admin view to org user admin view

* [EC-550] add user type to reactive forms

* Update ngOnInit to properly handle inviting new members (#4298)

* [EC-550] use checkbox component in members dialog

* [EC-845] Remove try/catch from action handlers

The [bitAction] directive is responsible for handling any exceptions that arise from the API request.

* [EC-845] Add form validators to match server requirements

* [EC-550] use bitInput for emails and add to form control

* [EC-550] set all hint font size to 14px

* [EC-550] feat: migrate role radio group

* [EC-845] Remove try/catch for member dialog actions

Co-authored-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>

* Fix failing vault-filter service tests

* [EC-862] Member dialog collections tab fails to save when trying to remove collection access (#4313)

* [EC-862] Force clear form array value if disabled

* [EC-862] Use form value instead of reading controls directly

* fix csp issues

* [EC-862] Avoid clearing disabled form array in access selector (#4332)

* [EC-862] Do not clear the form array when disabled

Clearing the form array breaks the form selection list and is not necessary

* [EC-862] Add comments clarifying change

* [EC-883] Fix badge list "+n more" message (#4333)

* [EC-883] Modify logic to avoid showing a +1 more badge

Show the last item in a badge list instead of showing "+1 more". The "+n more" will now only show if there are 2 or more items that exceed the max.

* [EC-883] Update max items for people/groups tables

* [EC-882] Show "All" when a group has access to all collections (#4334)

* [EC-876] Remove old group modal (#4336)

* [EC-876] Update click events to use new dialog

Use the new dialog service for all member row click events and specify a starting tab

* [EC-876] Remove the old user groups modal

* [EC-872] Collection dialog success toasts (#4337)

* [EC-872] Show success toast when saving a collection

* [EC-872] Show success toast when deleting a collection

* [EC-870] Add temporary css rule for web app-vault-icon img to restrict height in the bit-table component (#4344)

* [EC-897] Update group modal header text

* [EC-877] Fix missing collection breadcrumbs (#4339)

* [EC-877] Rename ng-template to ng-container

* [EC-877] Remove breadcrumb array slice to support showing current collection

* [EC-896] Fix bulk group deletion message count (#4350)

* [EC-896] Ignore the result from the deleteMany method

Instead, use the number of requested groups for the toast as the deleteMany is an all or nothing request

* [EC-896] Cleanup deleteMany() in GroupService

deleteMany() originally supported a response from the server, but that was scrapped server side and was leftover in the client service

* [EC-871] Use bit-badge-list component for collection group column (#4341)

* [EC-885] Add ability to exclude cipher types from vault filter (#4340)

* [EC-878] Use label for permission dropdown arrow container (#4338)

Using the label tag will allow clicking the arrow to activate the dropdown. It also causes the outline to appear on hover.

* [EC-906] add bitLink to item names (#4381)

- changed from a to button to allow keyboard navigation

* [EC 911] Prevent Table from overflowing (#4377)

* [EC-911] add word break to table component

* [EC-911] let badge column shrink

* [EC-911] set badges to be inline-block
- prevents them from wrapping in the middle

* [EC-911] remove word break style from table component

* [EC-911] go back to inline for badge; fix nowrap

* [EC-905] Vault row alignment (#4401)

* [EC-905] Middle align vault row content

* [EC-905] Prevent center text align for vault item names

* [EC-828] fix: misaligned selects (#4385)

* [EC-907] set name font size to normal (#4410)

* fix: collection breadcrumbs not visible in vault (#4434)

* [EC-887] Fix Managers can see options to edit/delete Collections they aren't assigned to (#4395)

* [EC-887] Introduce 'assigned' property to collection admin view/response

The 'assigned' property is set by the server to indicate that the collection has been explicitly assigned to the acting user. Can be used to determine if the collection can be modified/deleted by managers.

* [EC-887] Update logic to show/hide collection vault controls

Only show checkbox and ellipsis button for collections the user has access to delete and/or edit. Otherwise, hide them to avoid confusion or allowing the user to attempt actions they do not have permission to.

* [EC-887] Add missing permission message visibility property

* [EC-887] Add missing permission message to template

* [EC-887] Check for null id for the 'unassigned' collection

* update OAVR feature branch with bit-table changes (#4465)

* [EC-939] feat: switch to CL breadcrumbs (#4432)

* OAVR Misc Changes (#4496)

* hide missing collections placeholder if not at least admin

* various ui fixes
- consolidate text size and style across pages
- right align icon buttons in tables
- sentence case multi-select placeholder

* [EC-969] "New" button border color (#4498)

* [EC-969] remove bootstrap styling from new button

* [EC-969] add select row click events to all columns

* [EC-969] remove bootstrap from new dropdown

* Align icons with images and make all muted color (#4505)

Signed-off-by: Jacob Fink <jfink@bitwarden.com>
Co-authored-by: Shane Melton <smelton@bitwarden.com>
Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>
Co-authored-by: Jake Fink <jfink@bitwarden.com>
Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Thomas Rittson <eliykat@users.noreply.github.com>
Co-authored-by: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: bitwarden-devops-bot <106330231+bitwarden-devops-bot@users.noreply.github.com>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Sammy Chang <sammychang2185@gmail.com>
Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
Co-authored-by: Gbubemi Smith <gsmith@bitwarden.com>
Co-authored-by: Addison Beck <addisonbeck1@gmail.com>
Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: gbubemismith <gsmithwalter@gmail.com>
Co-authored-by: Kyle Spearrin <kspearrin@users.noreply.github.com>
Co-authored-by: Michał Chęciński <mchecinski@bitwarden.com>
Co-authored-by: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
Co-authored-by: Scott McFarlane <91044021+scottmondo@users.noreply.github.com>
Co-authored-by: Joseph Flinn <58369717+joseph-flinn@users.noreply.github.com>
Co-authored-by: DanHillesheim <79476558+DanHillesheim@users.noreply.github.com>
Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>
Co-authored-by: dgoodman-bw <109169446+dgoodman-bw@users.noreply.github.com>
Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
Co-authored-by: Rui Tomé <108268980+r-tome@users.noreply.github.com>
Co-authored-by: Joseph Flinn <joseph.s.flinn@gmail.com>
Co-authored-by: Opeyemi <54288773+Eebru-gzy@users.noreply.github.com>
Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>
Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Co-authored-by: Ash Leece <ash@leece.im>
Co-authored-by: Andreas Coroiu <andreas@andreascoroiu.com>
This commit is contained in:
Andreas Coroiu 2023-01-19 17:01:07 +01:00 committed by GitHub
parent 98cc28f3c3
commit f4dc7ca8b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
212 changed files with 7810 additions and 4324 deletions

View File

@ -60,6 +60,7 @@
./libs/common/src/misc/nodeUtils.ts
./libs/common/src/misc/linkedFieldOption.decorator.ts
./libs/common/src/misc/serviceUtils.ts
./libs/common/src/misc/serviceUtils.spec.ts
./libs/common/src/types/twoFactorResponse.ts
./libs/common/src/types/authResponse.ts
./libs/common/src/types/syncEventArgs.ts

View File

@ -416,7 +416,7 @@ export class GetCommand extends DownloadCommand {
throw new Error("No encryption key for this organization.");
}
const response = await this.apiService.getCollectionDetails(options.organizationId, id);
const response = await this.apiService.getCollectionAccessDetails(options.organizationId, id);
const decCollection = new CollectionView(response);
decCollection.name = await this.cryptoService.decryptToUtf8(
new EncString(response.name),

View File

@ -1,6 +1,7 @@
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { DeprecatedVaultFilterService as DeprecatedVaultFilterServiceAbstraction } from "@bitwarden/angular/abstractions/deprecated-vault-filter.service";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { VaultFilterService } from "@bitwarden/angular/vault/vault-filter/services/vault-filter.service";
@ -22,6 +23,11 @@ import { VaultFilterComponent } from "./vault-filter.component";
TypeFilterComponent,
],
exports: [VaultFilterComponent],
providers: [VaultFilterService],
providers: [
{
provide: DeprecatedVaultFilterServiceAbstraction,
useClass: VaultFilterService,
},
],
})
export class VaultFilterModule {}

View File

@ -7,7 +7,6 @@ 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 { OrganizationUserUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { SearchService } from "@bitwarden/common/abstractions/search.service";
import { StateService } from "@bitwarden/common/abstractions/state.service";
@ -20,6 +19,7 @@ import { Utils } from "@bitwarden/common/misc/utils";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { ProviderUserUserDetailsResponse } from "@bitwarden/common/models/response/provider/provider-user.response";
import { OrganizationUserView } from "../organizations/core/views/organization-user.view";
import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
@ -28,7 +28,7 @@ const MaxCheckedCount = 500;
@Directive()
export abstract class BasePeopleComponent<
UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse
UserType extends ProviderUserUserDetailsResponse | OrganizationUserView
> {
@ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
confirmModalRef: ViewContainerRef;
@ -110,7 +110,7 @@ export abstract class BasePeopleComponent<
) {}
abstract edit(user: UserType): void;
abstract getUsers(): Promise<ListResponse<UserType>>;
abstract getUsers(): Promise<ListResponse<UserType> | UserType[]>;
abstract deleteUser(id: string): Promise<void>;
abstract revokeUser(id: string): Promise<void>;
abstract restoreUser(id: string): Promise<void>;
@ -125,9 +125,14 @@ export abstract class BasePeopleComponent<
this.statusMap.set(status, []);
}
this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
if (response instanceof ListResponse) {
this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
} else if (Array.isArray(response)) {
this.allUsers = response;
}
this.allUsers.sort(
Utils.getSortFunction<ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse>(
Utils.getSortFunction<ProviderUserUserDetailsResponse | OrganizationUserView>(
this.i18nService,
"email"
)
@ -176,7 +181,7 @@ export abstract class BasePeopleComponent<
this.didScroll = this.pagedUsers.length > this.pageSize;
}
checkUser(user: OrganizationUserUserDetailsResponse, select?: boolean) {
checkUser(user: UserType, select?: boolean) {
(user as any).checked = select == null ? !(user as any).checked : select;
}

View File

@ -1,30 +0,0 @@
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
[name]="pascalize(parentId)"
[id]="parentId"
[(ngModel)]="parentChecked"
[indeterminate]="parentIndeterminate"
/>
<label class="form-check-label font-weight-normal" [for]="parentId">
{{ parentId | i18n }}
</label>
</div>
<div class="form-group form-group-child-check mb-0">
<div class="form-check mt-1" *ngFor="let c of checkboxes">
<input
class="form-check-input"
type="checkbox"
[name]="pascalize(c.id)"
[id]="c.id"
[ngModel]="c.get()"
(ngModelChange)="c.set($event)"
/>
<label class="form-check-label font-weight-normal" [for]="c.id">
{{ c.id | i18n }}
</label>
</div>
</div>
</div>

View File

@ -1,32 +0,0 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { Utils } from "@bitwarden/common/misc/utils";
@Component({
selector: "app-nested-checkbox",
templateUrl: "nested-checkbox.component.html",
})
export class NestedCheckboxComponent {
@Input() parentId: string;
@Input() checkboxes: { id: string; get: () => boolean; set: (v: boolean) => void }[];
@Output() onSavedUser = new EventEmitter();
@Output() onDeletedUser = new EventEmitter();
get parentIndeterminate() {
return !this.parentChecked && this.checkboxes.some((c) => c.get());
}
get parentChecked() {
return this.checkboxes.every((c) => c.get());
}
set parentChecked(value: boolean) {
this.checkboxes.forEach((c) => {
c.set(value);
});
}
pascalize(s: string) {
return Utils.camelToPascalCase(s);
}
}

View File

@ -0,0 +1,4 @@
import { NgModule } from "@angular/core";
@NgModule({})
export class CoreOrganizationModule {}

View File

@ -0,0 +1,3 @@
export * from "./core-organization.module";
export * from "./services";
export * from "./views";

View File

@ -0,0 +1,126 @@
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 { 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<CollectionAdminView[]> {
const collectionResponse = await this.apiService.getManyCollectionsWithAccessDetails(
organizationId
);
if (collectionResponse?.data == null || collectionResponse.data.length === 0) {
return [];
}
return await this.decryptMany(organizationId, collectionResponse.data);
}
async get(
organizationId: string,
collectionId: string
): Promise<CollectionAdminView | undefined> {
const collectionResponse = await this.apiService.getCollectionAccessDetails(
organizationId,
collectionId
);
if (collectionResponse == null) {
return undefined;
}
const [view] = await this.decryptMany(organizationId, [collectionResponse]);
return view;
}
async save(collection: CollectionAdminView): Promise<unknown> {
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<void> {
await this.apiService.deleteCollection(organizationId, collectionId);
}
private async decryptMany(
organizationId: string,
collections: CollectionResponse[] | CollectionAccessDetailsResponse[]
): Promise<CollectionAdminView[]> {
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;
view.assigned = c.assigned;
}
return view;
});
return await Promise.all(promises);
}
private async encrypt(model: CollectionAdminView): Promise<CollectionRequest> {
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;
}

View File

@ -0,0 +1,106 @@
import { Injectable } from "@angular/core";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { CoreOrganizationModule } from "../../core-organization.module";
import { GroupView } from "../../views/group.view";
import { GroupRequest } from "./requests/group.request";
import { OrganizationGroupBulkRequest } from "./requests/organization-group-bulk.request";
import { GroupDetailsResponse, GroupResponse } from "./responses/group.response";
@Injectable({ providedIn: CoreOrganizationModule })
export class GroupService {
constructor(private apiService: ApiService) {}
async delete(orgId: string, groupId: string): Promise<void> {
await this.apiService.send(
"DELETE",
"/organizations/" + orgId + "/groups/" + groupId,
null,
true,
false
);
}
async deleteMany(orgId: string, groupIds: string[]): Promise<void> {
await this.apiService.send(
"DELETE",
"/organizations/" + orgId + "/groups",
new OrganizationGroupBulkRequest(groupIds),
true,
true
);
}
async get(orgId: string, groupId: string): Promise<GroupView> {
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<GroupView[]> {
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)) ?? [];
}
async save(group: GroupView): Promise<GroupView> {
const request = new GroupRequest();
request.name = group.name;
request.externalId = group.externalId;
request.accessAll = group.accessAll;
request.users = group.members;
request.collections = group.collections.map(
(c) => new SelectionReadOnlyRequest(c.id, c.readOnly, c.hidePasswords)
);
if (group.id == undefined) {
return await this.postGroup(group.organizationId, request);
} else {
return await this.putGroup(group.organizationId, group.id, request);
}
}
private async postGroup(organizationId: string, request: GroupRequest): Promise<GroupView> {
const r = await this.apiService.send(
"POST",
"/organizations/" + organizationId + "/groups",
request,
true,
true
);
return GroupView.fromResponse(new GroupResponse(r));
}
private async putGroup(
organizationId: string,
id: string,
request: GroupRequest
): Promise<GroupView> {
const r = await this.apiService.send(
"PUT",
"/organizations/" + organizationId + "/groups/" + id,
request,
true,
true
);
return GroupView.fromResponse(new GroupResponse(r));
}
}

View File

@ -1,8 +1,9 @@
import { SelectionReadOnlyRequest } from "./selection-read-only.request";
import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request";
export class GroupRequest {
name: string;
accessAll: boolean;
externalId: string;
collections: SelectionReadOnlyRequest[] = [];
users: string[] = [];
}

View File

@ -0,0 +1,7 @@
export class OrganizationGroupBulkRequest {
ids: string[];
constructor(ids: string[]) {
this.ids = ids == null ? [] : ids;
}
}

View File

@ -1,5 +1,5 @@
import { BaseResponse } from "./base.response";
import { SelectionReadOnlyResponse } from "./selection-read-only.response";
import { BaseResponse } from "@bitwarden/common/models/response/base.response";
import { SelectionReadOnlyResponse } from "@bitwarden/common/models/response/selection-read-only.response";
export class GroupResponse extends BaseResponse {
id: string;

View File

@ -0,0 +1,3 @@
export * from "./group/group.service";
export * from "./collection-admin.service";
export * from "./user-admin.service";

View File

@ -0,0 +1,88 @@
import { Injectable } from "@angular/core";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import {
OrganizationUserInviteRequest,
OrganizationUserUpdateRequest,
} from "@bitwarden/common/abstractions/organization-user/requests";
import { OrganizationUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
import { CoreOrganizationModule } from "../core-organization.module";
import { OrganizationUserAdminView } from "../views/organization-user-admin-view";
@Injectable({ providedIn: CoreOrganizationModule })
export class UserAdminService {
constructor(private organizationUserService: OrganizationUserService) {}
async get(
organizationId: string,
organizationUserId: string
): Promise<OrganizationUserAdminView | undefined> {
const userResponse = await this.organizationUserService.getOrganizationUser(
organizationId,
organizationUserId,
{
includeGroups: true,
}
);
if (userResponse == null) {
return undefined;
}
const [view] = await this.decryptMany(organizationId, [userResponse]);
return view;
}
async save(user: OrganizationUserAdminView): Promise<void> {
const request = new OrganizationUserUpdateRequest();
request.accessAll = user.accessAll;
request.permissions = user.permissions;
request.type = user.type;
request.collections = user.collections;
request.groups = user.groups;
await this.organizationUserService.putOrganizationUser(user.organizationId, user.id, request);
}
async invite(emails: string[], user: OrganizationUserAdminView): Promise<void> {
const request = new OrganizationUserInviteRequest();
request.emails = emails;
request.accessAll = user.accessAll;
request.permissions = user.permissions;
request.type = user.type;
request.collections = user.collections;
request.groups = user.groups;
await this.organizationUserService.postOrganizationUserInvite(user.organizationId, request);
}
private async decryptMany(
organizationId: string,
users: OrganizationUserDetailsResponse[]
): Promise<OrganizationUserAdminView[]> {
const promises = users.map(async (u) => {
const view = new OrganizationUserAdminView();
view.id = u.id;
view.organizationId = organizationId;
view.userId = u.userId;
view.type = u.type;
view.status = u.status;
view.accessAll = u.accessAll;
view.permissions = u.permissions;
view.resetPasswordEnrolled = u.resetPasswordEnrolled;
view.collections = u.collections.map((c) => ({
id: c.id,
hidePasswords: c.hidePasswords,
readOnly: c.readOnly,
}));
view.groups = u.groups;
return view;
});
return await Promise.all(promises);
}
}

View File

@ -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;
}
}

View File

@ -0,0 +1,32 @@
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[] = [];
/**
* Flag indicating the user has been explicitly assigned to this Collection
*/
assigned: boolean;
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))
: [];
this.assigned = response.assigned;
}
}

View File

@ -0,0 +1,25 @@
import { View } from "@bitwarden/common/src/models/view/view";
import { GroupDetailsResponse, GroupResponse } from "../services/group/responses/group.response";
import { CollectionAccessSelectionView } from "./collection-access-selection.view";
export class GroupView implements View {
id: string;
organizationId: string;
name: string;
accessAll: boolean;
externalId: string;
collections: CollectionAccessSelectionView[] = [];
members: string[] = [];
static fromResponse(response: GroupResponse): GroupView {
const view: GroupView = Object.assign(new GroupView(), response) as GroupView;
if (response instanceof GroupDetailsResponse && response.collections != undefined) {
view.collections = response.collections.map((c) => new CollectionAccessSelectionView(c));
}
return view;
}
}

View File

@ -0,0 +1,5 @@
export * from "./collection-access-selection.view";
export * from "./collection-admin.view";
export * from "./group.view";
export * from "./organization-user.view";
export * from "./organization-user-admin-view";

View File

@ -0,0 +1,19 @@
import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType";
import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
import { PermissionsApi } from "@bitwarden/common/models/api/permissions.api";
import { CollectionAccessSelectionView } from "./collection-access-selection.view";
export class OrganizationUserAdminView {
id: string;
userId: string;
organizationId: string;
type: OrganizationUserType;
status: OrganizationUserStatusType;
accessAll: boolean;
permissions: PermissionsApi;
resetPasswordEnrolled: boolean;
collections: CollectionAccessSelectionView[] = [];
groups: string[] = [];
}

View File

@ -0,0 +1,40 @@
import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType";
import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
import { PermissionsApi } from "@bitwarden/common/models/api/permissions.api";
import { CollectionAccessSelectionView } from "./collection-access-selection.view";
export class OrganizationUserView {
id: string;
userId: string;
type: OrganizationUserType;
status: OrganizationUserStatusType;
accessAll: boolean;
permissions: PermissionsApi;
resetPasswordEnrolled: boolean;
name: string;
email: string;
twoFactorEnabled: boolean;
usesKeyConnector: boolean;
collections: CollectionAccessSelectionView[] = [];
groups: string[] = [];
groupNames: string[] = [];
collectionNames: string[] = [];
static fromResponse(response: OrganizationUserUserDetailsResponse): OrganizationUserView {
const view = Object.assign(new OrganizationUserView(), response) as OrganizationUserView;
if (response.collections != undefined) {
view.collections = response.collections.map((c) => new CollectionAccessSelectionView(c));
}
if (response.groups != undefined) {
view.groups = response.groups;
}
return view;
}
}

View File

@ -7,10 +7,15 @@
[activeOrganization]="organization"
></app-organization-switcher>
<bit-tab-nav-bar class="-tw-mb-px">
<bit-tab-link route="vault">{{ "vault" | i18n }}</bit-tab-link>
<bit-tab-link *ngIf="canShowManageTab(organization)" route="manage">
{{ "manage" | i18n }}
</bit-tab-link>
<bit-tab-link *ngIf="canShowVaultTab(organization)" route="vault">{{
"vault" | i18n
}}</bit-tab-link>
<bit-tab-link *ngIf="canShowMembersTab(organization)" route="members">{{
"members" | i18n
}}</bit-tab-link>
<bit-tab-link *ngIf="canShowGroupsTab(organization)" route="groups">{{
"groups" | i18n
}}</bit-tab-link>
<bit-tab-link *ngIf="canShowReportsTab(organization)" route="reporting">
{{ getReportTabLabel(organization) | i18n }}
</bit-tab-link>

View File

@ -5,10 +5,10 @@ import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs";
import {
canAccessBillingTab,
canAccessGroupsTab,
canAccessManageTab,
canAccessMembersTab,
canAccessReportingTab,
canAccessSettingsTab,
canAccessVaultTab,
getOrganizationById,
OrganizationService,
} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
@ -45,12 +45,12 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
this._destroy.complete();
}
canShowSettingsTab(organization: Organization): boolean {
return canAccessSettingsTab(organization);
canShowVaultTab(organization: Organization): boolean {
return canAccessVaultTab(organization);
}
canShowManageTab(organization: Organization): boolean {
return canAccessManageTab(organization);
canShowSettingsTab(organization: Organization): boolean {
return canAccessSettingsTab(organization);
}
canShowMembersTab(organization: Organization): boolean {

View File

@ -1,162 +0,0 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form
class="modal-content"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="modal-header">
<h1 class="modal-title" id="collectionAddEditTitle">{{ title }}</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="modal-body" *ngIf="!loading">
<div class="form-group">
<label for="name">{{ "name" | i18n }}</label>
<input
id="name"
class="form-control"
type="text"
name="Name"
[(ngModel)]="name"
required
appAutofocus
[disabled]="!this.canSave"
/>
</div>
<div class="form-group">
<label for="externalId">{{ "externalId" | i18n }}</label>
<input
id="externalId"
class="form-control"
type="text"
name="ExternalId"
[(ngModel)]="externalId"
[disabled]="!this.canSave"
/>
<small class="form-text text-muted">{{ "externalIdDesc" | i18n }}</small>
</div>
<ng-container *ngIf="accessGroups">
<h3 class="mt-4 d-flex mb-0">
{{ "groupAccess" | i18n }}
<div class="ml-auto" *ngIf="groups && groups.length && this.canSave">
<button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
{{ "selectAll" | i18n }}
</button>
<button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
{{ "unselectAll" | i18n }}
</button>
</div>
</h3>
<div *ngIf="!groups || !groups.length">
{{ "noGroupsInList" | i18n }}
</div>
<table class="table table-hover table-list mb-0" *ngIf="groups && groups.length">
<thead>
<tr>
<th>&nbsp;</th>
<th>{{ "name" | i18n }}</th>
<th width="100" class="text-center">{{ "hidePasswords" | i18n }}</th>
<th width="100" class="text-center">{{ "readOnly" | i18n }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let g of groups; let i = index">
<td class="table-list-checkbox" (click)="check(g)">
<input
type="checkbox"
[(ngModel)]="$any(g).checked"
name="Groups[{{ i }}].Checked"
[disabled]="g.accessAll || !this.canSave"
appStopProp
/>
</td>
<td (click)="check(g)">
{{ g.name }}
<ng-container *ngIf="g.accessAll">
<i
class="bwi bwi-filter text-muted bwi-fw"
title="{{ 'groupAccessAllItems' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "groupAccessAllItems" | i18n }}</span>
</ng-container>
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="$any(g).hidePasswords"
name="Groups[{{ i }}].HidePasswords"
[disabled]="!$any(g).checked || g.accessAll || !this.canSave"
/>
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="$any(g).readOnly"
name="Groups[{{ i }}].ReadOnly"
[disabled]="!$any(g).checked || g.accessAll || !this.canSave"
/>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
<div class="modal-footer">
<button
type="submit"
class="btn btn-primary btn-submit"
[disabled]="form.loading"
*ngIf="this.canSave"
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>
<div class="ml-auto" *ngIf="this.canDelete">
<button
#deleteBtn
type="button"
(click)="delete()"
class="btn btn-outline-danger"
appA11yTitle="{{ 'delete' | i18n }}"
*ngIf="editMode"
[disabled]="$any(deleteBtn).loading"
[appApiAction]="deletePromise"
>
<i
class="bwi bwi-trash bwi-lg bwi-fw"
[hidden]="$any(deleteBtn).loading"
aria-hidden="true"
></i>
<i
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
[hidden]="!$any(deleteBtn).loading"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
</button>
</div>
</div>
</form>
</div>
</div>

View File

@ -1,182 +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 { GroupResponse } from "@bitwarden/common/models/response/group.response";
@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: GroupResponse[] = [];
formPromise: Promise<any>;
deletePromise: Promise<any>;
private orgKey: SymmetricCryptoKey;
constructor(
private apiService: ApiService,
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.apiService.getGroups(this.organizationId);
this.groups = groupsResponse.data
.map((r) => r)
.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: GroupResponse, 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",
false,
"app-collection-add-edit .modal-content"
);
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);
}
}
}

View File

@ -65,6 +65,16 @@
<i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a
class="dropdown-item"
href="#"
appStopClick
*ngIf="this.canEdit(c)"
(click)="edit(c)"
>
<i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
{{ "edit" | i18n }}
</a>
<a
class="dropdown-item"
href="#"

View File

@ -1,5 +1,6 @@
import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { lastValueFrom } from "rxjs";
import { first } from "rxjs/operators";
import { ModalService } from "@bitwarden/angular/services/modal.service";
@ -22,7 +23,8 @@ import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { DialogService } from "@bitwarden/components";
import { CollectionAddEditComponent } from "./collection-add-edit.component";
import { CollectionDialogResult, openCollectionDialog } from "../shared";
import { EntityUsersComponent } from "./entity-users.component";
import { OrgUpgradeDialogComponent } from "./org-upgrade-dialog/org-upgrade-dialog.component";
@ -120,10 +122,10 @@ export class CollectionsComponent implements OnInit {
this.didScroll = this.pagedCollections.length > 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"));
@ -156,26 +158,14 @@ export class CollectionsComponent implements OnInit {
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, {
data: { collectionId: collection?.id, organizationId: this.organizationId },
});
const result = await lastValueFrom(dialog.closed);
if (result === CollectionDialogResult.Saved || result === CollectionDialogResult.Deleted) {
this.load();
}
}
add() {

View File

@ -1,24 +1,13 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<form
class="modal-content"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="modal-header">
<h1 class="modal-title" id="groupAddEditTitle">{{ title }}</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="loading">
<form [formGroup]="groupForm" [bitSubmit]="submit">
<bit-dialog [disablePadding]="!loading">
<span bitDialogTitle>
{{ title }}
<span *ngIf="editMode" class="tw-text-sm tw-normal-case tw-text-muted">{{
group?.name
}}</span>
</span>
<div bitDialogContent>
<div *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
@ -26,161 +15,77 @@
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="modal-body" *ngIf="!loading">
<div class="form-group">
<label for="name">{{ "name" | i18n }}</label>
<input
id="name"
class="form-control"
type="text"
name="Name"
[(ngModel)]="name"
required
/>
</div>
<div class="form-group">
<label for="externalId">{{ "externalId" | i18n }}</label>
<input
id="externalId"
class="form-control"
type="text"
name="ExternalId"
[(ngModel)]="externalId"
/>
<small class="form-text text-muted">{{ "externalIdDesc" | i18n }}</small>
</div>
<h3 class="mt-4 d-flex">
<div class="mb-2">
{{ "accessControl" | i18n }}
<a
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/#access-control"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
<bit-tab-group *ngIf="!loading" [selectedIndex]="tabIndex">
<bit-tab label="{{ 'groupInfo' | i18n }}">
<bit-form-field>
<bit-label>{{ "name" | i18n }}</bit-label>
<input bitInput type="text" formControlName="name" />
</bit-form-field>
<bit-form-field>
<bit-label>{{ "externalId" | i18n }}</bit-label>
<input bitInput type="text" formControlName="externalId" />
<bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
</bit-form-field>
</bit-tab>
<bit-tab label="{{ 'members' | i18n }}">
<p>{{ "editGroupMembersDesc" | i18n }}</p>
<bit-access-selector
formControlName="members"
[items]="members"
[showMemberRoles]="true"
[permissionMode]="PermissionMode.Hidden"
[columnHeader]="'member' | i18n"
[selectorLabelText]="'selectMembers' | i18n"
[emptySelectionText]="'noMembersAdded' | i18n"
></bit-access-selector>
</bit-tab>
<bit-tab label="{{ 'collections' | i18n }}">
<p>{{ "editGroupCollectionsDesc" | i18n }}</p>
<div class="tw-my-3">
<input type="checkbox" formControlName="accessAll" id="accessAll" />
<label class="tw-mb-0 tw-text-lg" for="accessAll">{{
"accessAllCollectionsDesc" | i18n
}}</label>
<p class="tw-my-0 tw-text-muted">{{ "accessAllCollectionsHelp" | i18n }}</p>
</div>
<div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
<button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
{{ "selectAll" | i18n }}
</button>
<button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
{{ "unselectAll" | i18n }}
</button>
</div>
</h3>
<div class="form-group" [ngClass]="{ 'mb-0': access !== 'selected' }">
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="access"
id="accessAll"
value="all"
[(ngModel)]="access"
/>
<label class="form-check-label" for="accessAll">
{{ "groupAccessAllItems" | i18n }}
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="access"
id="accessSelected"
value="selected"
[(ngModel)]="access"
/>
<label class="form-check-label" for="accessSelected">
{{ "groupAccessSelectedCollections" | i18n }}
</label>
</div>
</div>
<ng-container *ngIf="access === 'selected'">
<div *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }}
</div>
<table
class="table table-hover table-list mb-0"
*ngIf="collections && collections.length"
>
<thead>
<tr>
<th>&nbsp;</th>
<th>{{ "name" | i18n }}</th>
<th width="100" class="text-center">{{ "hidePasswords" | i18n }}</th>
<th width="100" class="text-center">{{ "readOnly" | i18n }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of collections; let i = index">
<td class="table-list-checkbox" (click)="check(c)">
<input
type="checkbox"
[(ngModel)]="$any(c).checked"
name="Collection[{{ i }}].Checked"
appStopProp
/>
</td>
<td (click)="check(c)">
{{ c.name }}
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="c.hidePasswords"
name="Collection[{{ i }}].HidePasswords"
[disabled]="!$any(c).checked"
/>
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="c.readOnly"
name="Collection[{{ i }}].ReadOnly"
[disabled]="!$any(c).checked"
/>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>
<div class="ml-auto">
<button
#deleteBtn
type="button"
(click)="delete()"
class="btn btn-outline-danger"
appA11yTitle="{{ 'delete' | i18n }}"
*ngIf="editMode"
[disabled]="$any(deleteBtn).loading"
[appApiAction]="deletePromise"
>
<i
class="bwi bwi-trash bwi-lg bwi-fw"
[hidden]="$any(deleteBtn).loading"
aria-hidden="true"
></i>
<i
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
[hidden]="!$any(deleteBtn).loading"
aria-hidden="true"
title="{{ 'loading' | i18n }}"
></i>
</button>
</div>
</div>
</form>
</div>
</div>
<ng-container *ngIf="!groupForm.value.accessAll">
<bit-access-selector
formControlName="collections"
[items]="collections"
[permissionMode]="PermissionMode.Edit"
[columnHeader]="'collection' | i18n"
[selectorLabelText]="'selectCollections' | i18n"
[emptySelectionText]="'noCollectionsAdded' | i18n"
></bit-access-selector>
</ng-container>
</bit-tab>
</bit-tab-group>
</div>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton buttonType="primary" bitFormButton type="submit">
{{ "save" | i18n }}
</button>
<button
bitButton
buttonType="secondary"
type="button"
bitDialogClose
[bit-dialog-close]="ResultType.Canceled"
>
{{ "cancel" | i18n }}
</button>
<button
class="tw-ml-auto"
type="button"
buttonType="danger"
bitIconButton="bwi-trash"
bitFormButton
[bitAction]="delete"
[appA11yTitle]="'delete' | i18n"
></button>
</div>
</bit-dialog>
</form>

View File

@ -1,133 +1,269 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, FormControl, Validators } from "@angular/forms";
import { catchError, combineLatest, from, map, of, Subject, switchMap, takeUntil } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { CollectionData } from "@bitwarden/common/models/data/collection.data";
import { Collection } from "@bitwarden/common/models/domain/collection";
import { GroupRequest } from "@bitwarden/common/models/request/group.request";
import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request";
import { CollectionDetailsResponse } from "@bitwarden/common/models/response/collection.response";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
import { DialogService } from "@bitwarden/components";
import { GroupService, GroupView } from "../core";
import {
AccessItemType,
AccessItemValue,
AccessItemView,
convertToPermission,
convertToSelectionView,
PermissionMode,
} from "../shared/components/access-selector";
/**
* Indices for the available tabs in the dialog
*/
export enum GroupAddEditTabType {
Info = 0,
Members = 1,
Collections = 2,
}
export interface GroupAddEditDialogParams {
/**
* ID of the organization the group belongs to
*/
organizationId: string;
/**
* Optional ID of the group being modified
*/
groupId?: string;
/**
* Tab to open when the dialog is open.
* Defaults to Group Info
*/
initialTab?: GroupAddEditTabType;
}
export enum GroupAddEditDialogResultType {
Saved = "saved",
Canceled = "canceled",
Deleted = "deleted",
}
/**
* Strongly typed helper to open a groupAddEditDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export const openGroupAddEditDialog = (
dialogService: DialogService,
config: DialogConfig<GroupAddEditDialogParams>
) => {
return dialogService.open<GroupAddEditDialogResultType, GroupAddEditDialogParams>(
GroupAddEditComponent,
config
);
};
@Component({
selector: "app-group-add-edit",
templateUrl: "group-add-edit.component.html",
})
export class GroupAddEditComponent implements OnInit {
@Input() groupId: string;
@Input() organizationId: string;
@Output() onSavedGroup = new EventEmitter();
@Output() onDeletedGroup = new EventEmitter();
export class GroupAddEditComponent implements OnInit, OnDestroy {
protected PermissionMode = PermissionMode;
protected ResultType = GroupAddEditDialogResultType;
tabIndex: GroupAddEditTabType;
loading = true;
editMode = false;
title: string;
name: string;
externalId: string;
access: "all" | "selected" = "selected";
collections: CollectionView[] = [];
formPromise: Promise<any>;
deletePromise: Promise<any>;
collections: AccessItemView[] = [];
members: AccessItemView[] = [];
group: GroupView;
groupForm = this.formBuilder.group({
accessAll: new FormControl(false),
name: new FormControl("", [Validators.required, Validators.maxLength(100)]),
externalId: new FormControl("", Validators.maxLength(300)),
members: new FormControl<AccessItemValue[]>([]),
collections: new FormControl<AccessItemValue[]>([]),
});
get groupId(): string | undefined {
return this.params.groupId;
}
get organizationId(): string {
return this.params.organizationId;
}
private destroy$ = new Subject<void>();
private get orgCollections$() {
return from(this.apiService.getCollections(this.organizationId)).pipe(
switchMap((response) => {
return from(
this.collectionService.decryptMany(
response.data.map(
(r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
)
)
);
}),
map((collections) =>
collections.map<AccessItemView>((c) => ({
id: c.id,
type: AccessItemType.Collection,
labelName: c.name,
listName: c.name,
}))
)
);
}
private get orgMembers$() {
return from(this.organizationUserService.getAllUsers(this.organizationId)).pipe(
map((response) =>
response.data.map((m) => ({
id: m.id,
type: AccessItemType.Member,
email: m.email,
role: m.type,
listName: m.name?.length > 0 ? `${m.name} (${m.email})` : m.email,
labelName: m.name || m.email,
status: m.status,
}))
)
);
}
private get groupDetails$() {
if (!this.editMode) {
return of(undefined);
}
return combineLatest([
this.groupService.get(this.organizationId, this.groupId),
this.apiService.getGroupUsers(this.organizationId, this.groupId),
]).pipe(
map(([groupView, users]) => {
groupView.members = users;
return groupView;
}),
catchError((e: unknown) => {
if (e instanceof ErrorResponse) {
this.logService.error(e.message);
} else {
this.logService.error(e.toString());
}
return of(undefined);
})
);
}
constructor(
@Inject(DIALOG_DATA) private params: GroupAddEditDialogParams,
private dialogRef: DialogRef<GroupAddEditDialogResultType>,
private apiService: ApiService,
private organizationUserService: OrganizationUserService,
private groupService: GroupService,
private i18nService: I18nService,
private collectionService: CollectionService,
private platformUtilsService: PlatformUtilsService,
private logService: LogService
) {}
private logService: LogService,
private formBuilder: FormBuilder,
private changeDetectorRef: ChangeDetectorRef
) {
this.tabIndex = params.initialTab ?? GroupAddEditTabType.Info;
}
async ngOnInit() {
ngOnInit() {
this.editMode = this.loading = this.groupId != null;
await this.loadCollections();
this.title = this.i18nService.t(this.editMode ? "editGroup" : "newGroup");
if (this.editMode) {
this.editMode = true;
this.title = this.i18nService.t("editGroup");
try {
const group = await this.apiService.getGroupDetails(this.organizationId, this.groupId);
this.access = group.accessAll ? "all" : "selected";
this.name = group.name;
this.externalId = group.externalId;
if (group.collections != null && this.collections != null) {
group.collections.forEach((s) => {
const collection = this.collections.filter((c) => c.id === s.id);
if (collection != null && collection.length > 0) {
(collection[0] as any).checked = true;
collection[0].readOnly = s.readOnly;
collection[0].hidePasswords = s.hidePasswords;
}
combineLatest([this.orgCollections$, this.orgMembers$, this.groupDetails$])
.pipe(takeUntil(this.destroy$))
.subscribe(([collections, members, group]) => {
this.collections = collections;
this.members = members;
this.group = group;
if (this.group != undefined) {
// Must detect changes so that AccessSelector @Inputs() are aware of the latest
// collections/members set above, otherwise no selected values will be patched below
this.changeDetectorRef.detectChanges();
this.groupForm.patchValue({
name: this.group.name,
externalId: this.group.externalId,
accessAll: this.group.accessAll,
members: this.group.members.map((m) => ({
id: m,
type: AccessItemType.Member,
})),
collections: this.group.collections.map((gc) => ({
id: gc.id,
type: AccessItemType.Collection,
permission: convertToPermission(gc),
})),
});
}
} catch (e) {
this.logService.error(e);
}
} else {
this.title = this.i18nService.t("addGroup");
}
this.loading = false;
this.loading = false;
});
}
async loadCollections() {
const response = await this.apiService.getCollections(this.organizationId);
const collections = response.data.map(
(r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
submit = async () => {
if (this.groupForm.invalid) {
return;
}
const groupView = new GroupView();
groupView.id = this.groupId;
groupView.organizationId = this.organizationId;
const formValue = this.groupForm.value;
groupView.name = formValue.name;
groupView.externalId = formValue.externalId;
groupView.accessAll = formValue.accessAll;
groupView.members = formValue.members?.map((m) => m.id) ?? [];
if (!groupView.accessAll) {
groupView.collections = formValue.collections.map((c) => convertToSelectionView(c));
}
await this.groupService.save(groupView);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(this.editMode ? "editedGroupId" : "createdGroupId", formValue.name)
);
this.collections = await this.collectionService.decryptMany(collections);
}
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
if (!(c as any).checked) {
c.readOnly = false;
}
}
this.dialogRef.close(GroupAddEditDialogResultType.Saved);
};
selectAll(select: boolean) {
this.collections.forEach((c) => this.check(c, select));
}
async submit() {
const request = new GroupRequest();
request.name = this.name;
request.externalId = this.externalId;
request.accessAll = this.access === "all";
if (!request.accessAll) {
request.collections = this.collections
.filter((c) => (c as any).checked)
.map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly, !!c.hidePasswords));
}
try {
if (this.editMode) {
this.formPromise = this.apiService.putGroup(this.organizationId, this.groupId, request);
} else {
this.formPromise = this.apiService.postGroup(this.organizationId, request);
}
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(this.editMode ? "editedGroupId" : "createdGroupId", this.name)
);
this.onSavedGroup.emit();
} catch (e) {
this.logService.error(e);
}
}
async delete() {
delete = async () => {
if (!this.editMode) {
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("deleteGroupConfirmation"),
this.name,
this.group.name,
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning",
@ -138,17 +274,13 @@ export class GroupAddEditComponent implements OnInit {
return false;
}
try {
this.deletePromise = this.apiService.deleteGroup(this.organizationId, this.groupId);
await this.deletePromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedGroupId", this.name)
);
this.onDeletedGroup.emit();
} catch (e) {
this.logService.error(e);
}
}
await this.groupService.delete(this.organizationId, this.groupId);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedGroupId", this.group.name)
);
this.dialogRef.close(GroupAddEditDialogResultType.Deleted);
};
}

View File

@ -1,77 +1,125 @@
<div class="page-header d-flex">
<h1>{{ "groups" | i18n }}</h1>
<div class="ml-auto d-flex">
<div>
<label class="sr-only" for="search">{{ "search" | i18n }}</label>
<input
type="search"
class="form-control form-control-sm"
id="search"
placeholder="{{ 'search' | i18n }}"
[(ngModel)]="searchText"
/>
<div class="container page-content">
<div class="tw-mb-4 tw-flex">
<h1>{{ "groups" | i18n }}</h1>
<div class="tw-ml-auto tw-flex tw-items-center">
<div class="tw-mr-2">
<label class="sr-only">{{ "search" | i18n }}</label>
<div class="tw-flex tw-items-center">
<i class="bwi bwi-search bwi-fw tw-z-20 -tw-mr-7 tw-text-muted" aria-hidden="true"></i>
<input
bitInput
type="search"
placeholder="{{ 'search' | i18n }}"
class="tw-rounded-l tw-pl-9"
[(ngModel)]="searchText"
/>
</div>
</div>
<button bitButton type="button" buttonType="primary" (click)="add()">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "newGroup" | i18n }}
</button>
</div>
<button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "newGroup" | i18n }}
</button>
</div>
</div>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container
*ngIf="
!loading &&
(isPaging() ? pagedGroups : (groups | search: searchText:'name':'id')) as searchedGroups
"
>
<p *ngIf="!searchedGroups.length">{{ "noGroupsInList" | i18n }}</p>
<table
class="table table-hover table-list"
*ngIf="searchedGroups.length"
infiniteScroll
[infiniteScrollDistance]="1"
[infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()"
>
<tbody>
<tr *ngFor="let g of searchedGroups">
<td>
<a href="#" appStopClick (click)="edit(g)">{{ g.name }}</a>
</td>
<td class="table-list-options">
<div class="dropdown" appListDropdown>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container *ngIf="!loading && visibleGroups">
<p *ngIf="!visibleGroups.length">{{ "noGroupsInList" | i18n }}</p>
<bit-table
*ngIf="visibleGroups.length"
infinite-scroll
[infiniteScrollDistance]="1"
[infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()"
>
<ng-container header>
<tr>
<th bitCell class="tw-w-20">
<input
type="checkbox"
class="tw-mr-2"
(change)="toggleAllVisible($event)"
id="selectAll"
/>
<label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
"all" | i18n
}}</label>
</th>
<th bitCell>{{ "name" | i18n }}</th>
<th bitCell>{{ "collections" | i18n }}</th>
<th bitCell class="tw-w-10">
<button
class="btn btn-outline-secondary dropdown-toggle"
[bitMenuTriggerFor]="headerMenu"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
bitIconButton="bwi-ellipsis-v"
size="small"
appA11yTitle="{{ 'options' | i18n }}"
>
<i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
></button>
<bit-menu #headerMenu>
<button type="button" bitMenuItem (click)="deleteAllSelected()">
<span class="tw-text-danger"
><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
>
</button>
</bit-menu>
</th>
</tr>
</ng-container>
<ng-template body>
<tr bitRow *ngFor="let g of visibleGroups">
<td bitCell (click)="check(g)" class="tw-cursor-pointer">
<input type="checkbox" [(ngModel)]="g.checked" />
</td>
<td bitCell class="tw-cursor-pointer tw-font-bold" (click)="edit(g)">
<button bitLink>
{{ g.details.name }}
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#" appStopClick (click)="users(g)">
<i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
{{ "users" | i18n }}
</a>
<a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
{{ "delete" | i18n }}
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</ng-container>
<ng-template #addEdit></ng-template>
<ng-template #usersTemplate></ng-template>
</td>
<td bitCell (click)="edit(g, ModalTabType.Collections)" class="tw-cursor-pointer">
<bit-badge-list
*ngIf="!g.details.accessAll"
[items]="g.collectionNames"
[maxItems]="3"
badgeType="secondary"
></bit-badge-list>
<span *ngIf="g.details.accessAll">{{ "all" | i18n }}</span>
</td>
<td bitCell>
<button
[bitMenuTriggerFor]="rowMenu"
type="button"
bitIconButton="bwi-ellipsis-v"
size="small"
appA11yTitle="{{ 'options' | i18n }}"
></button>
<bit-menu #rowMenu>
<button type="button" bitMenuItem (click)="edit(g)">
<i aria-hidden="true" class="bwi bwi-pencil-square"></i> {{ "editInfo" | i18n }}
</button>
<button type="button" bitMenuItem (click)="edit(g, ModalTabType.Members)">
<i aria-hidden="true" class="bwi bwi-user"></i> {{ "members" | i18n }}
</button>
<button type="button" bitMenuItem (click)="edit(g, ModalTabType.Collections)">
<i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
</button>
<button type="button" bitMenuItem (click)="delete(g)">
<span class="tw-text-danger"
><i aria-hidden="true" class="bwi bwi-trash"></i> {{ "delete" | i18n }}</span
>
</button>
</bit-menu>
</td>
</tr>
</ng-template>
</bit-table>
</ng-container>
<ng-template #addEdit></ng-template>
</div>

View File

@ -1,69 +1,192 @@
import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import {
BehaviorSubject,
combineLatest,
concatMap,
from,
lastValueFrom,
map,
Subject,
switchMap,
takeUntil,
tap,
} from "rxjs";
import { first } from "rxjs/operators";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { SearchService } from "@bitwarden/common/abstractions/search.service";
import { Utils } from "@bitwarden/common/misc/utils";
import { GroupResponse } from "@bitwarden/common/models/response/group.response";
import { CollectionData } from "@bitwarden/common/models/data/collection.data";
import { Collection } from "@bitwarden/common/models/domain/collection";
import {
CollectionDetailsResponse,
CollectionResponse,
} from "@bitwarden/common/models/response/collection.response";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { DialogService } from "@bitwarden/components";
import { EntityUsersComponent } from "./entity-users.component";
import { GroupAddEditComponent } from "./group-add-edit.component";
import { GroupService, GroupView } from "../core";
import {
GroupAddEditDialogResultType,
GroupAddEditTabType,
openGroupAddEditDialog,
} from "./group-add-edit.component";
type CollectionViewMap = {
[id: string]: CollectionView;
};
type GroupDetailsRow = {
/**
* Group Id (used for searching)
*/
id: string;
/**
* Group name (used for searching)
*/
name: string;
/**
* Details used for displaying group information
*/
details: GroupView;
/**
* True if the group is selected in the table
*/
checked?: boolean;
/**
* A list of collection names the group has access to
*/
collectionNames?: string[];
};
@Component({
selector: "app-org-groups",
templateUrl: "groups.component.html",
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class GroupsComponent implements OnInit {
export class GroupsComponent implements OnInit, OnDestroy {
@ViewChild("addEdit", { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
@ViewChild("usersTemplate", { read: ViewContainerRef, static: true })
usersModalRef: ViewContainerRef;
loading = true;
organizationId: string;
groups: GroupResponse[];
pagedGroups: GroupResponse[];
searchText: string;
groups: GroupDetailsRow[];
protected didScroll = false;
protected pageSize = 100;
protected ModalTabType = GroupAddEditTabType;
private pagedGroupsCount = 0;
private pagedGroups: GroupDetailsRow[];
private searchedGroups: GroupDetailsRow[];
private _searchText: string;
private destroy$ = new Subject<void>();
private refreshGroups$ = new BehaviorSubject<void>(null);
get searchText() {
return this._searchText;
}
set searchText(value: string) {
this._searchText = value;
// Manually update as we are not using the search pipe in the template
this.updateSearchedGroups();
}
/**
* The list of groups that should be visible in the table.
* This is needed as there are two modes (paging/searching) and
* we need a reference to the currently visible groups for
* the Select All checkbox
*/
get visibleGroups(): GroupDetailsRow[] {
if (this.isPaging()) {
return this.pagedGroups;
}
if (this.isSearching()) {
return this.searchedGroups;
}
return this.groups;
}
constructor(
private apiService: ApiService,
private groupService: GroupService,
private route: ActivatedRoute,
private i18nService: I18nService,
private modalService: ModalService,
private dialogService: DialogService,
private platformUtilsService: PlatformUtilsService,
private searchService: SearchService,
private logService: LogService
private logService: LogService,
private collectionService: CollectionService,
private searchPipe: SearchPipe
) {}
async ngOnInit() {
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
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 */
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
this.searchText = qParams.search;
this.route.params
.pipe(
tap((params) => (this.organizationId = params.organizationId)),
switchMap(() =>
combineLatest([
// collectionMap
from(this.apiService.getCollections(this.organizationId)).pipe(
concatMap((response) => this.toCollectionMap(response))
),
// groups
this.refreshGroups$.pipe(
switchMap(() => this.groupService.getAll(this.organizationId))
),
])
),
map(([collectionMap, groups]) => {
return groups
.sort(Utils.getSortFunction(this.i18nService, "name"))
.map<GroupDetailsRow>((g) => ({
id: g.id,
name: g.name,
details: g,
checked: false,
collectionNames: g.collections
.map((c) => collectionMap[c.id]?.name)
.sort(this.i18nService.collator?.compare),
}));
}),
takeUntil(this.destroy$)
)
.subscribe((groups) => {
this.groups = groups;
this.resetPaging();
this.updateSearchedGroups();
this.loading = false;
});
});
this.route.queryParams
.pipe(
first(),
concatMap(async (qParams) => {
this.searchText = qParams.search;
}),
takeUntil(this.destroy$)
)
.subscribe();
}
async load() {
const response = await this.apiService.getGroups(this.organizationId);
const groups = response.data != null && response.data.length > 0 ? response.data : [];
groups.sort(Utils.getSortFunction(this.i18nService, "name"));
this.groups = groups;
this.resetPaging();
this.loading = false;
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
loadMore() {
@ -84,35 +207,35 @@ export class GroupsComponent implements OnInit {
this.didScroll = this.pagedGroups.length > this.pageSize;
}
async edit(group: GroupResponse) {
const [modal] = await this.modalService.openViewRef(
GroupAddEditComponent,
this.addEditModalRef,
(comp) => {
comp.organizationId = this.organizationId;
comp.groupId = group != null ? group.id : null;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onSavedGroup.subscribe(() => {
modal.close();
this.load();
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onDeletedGroup.subscribe(() => {
modal.close();
this.removeGroup(group);
});
}
);
async edit(
group: GroupDetailsRow,
startingTabIndex: GroupAddEditTabType = GroupAddEditTabType.Info
) {
const dialogRef = openGroupAddEditDialog(this.dialogService, {
data: {
initialTab: startingTabIndex,
organizationId: this.organizationId,
groupId: group != null ? group.details.id : null,
},
});
const result = await lastValueFrom(dialogRef.closed);
if (result == GroupAddEditDialogResultType.Saved) {
this.refreshGroups$.next();
} else if (result == GroupAddEditDialogResultType.Deleted) {
this.removeGroup(group.details.id);
}
}
add() {
this.edit(null);
}
async delete(group: GroupResponse) {
async delete(groupRow: GroupDetailsRow) {
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("deleteGroupConfirmation"),
group.name,
groupRow.details.name,
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning"
@ -122,37 +245,55 @@ export class GroupsComponent implements OnInit {
}
try {
await this.apiService.deleteGroup(this.organizationId, group.id);
await this.groupService.delete(this.organizationId, groupRow.details.id);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedGroupId", group.name)
this.i18nService.t("deletedGroupId", groupRow.details.name)
);
this.removeGroup(group);
this.removeGroup(groupRow.details.id);
} catch (e) {
this.logService.error(e);
}
}
async users(group: GroupResponse) {
const [modal] = await this.modalService.openViewRef(
EntityUsersComponent,
this.usersModalRef,
(comp) => {
comp.organizationId = this.organizationId;
comp.entity = "group";
comp.entityId = group.id;
comp.entityName = group.name;
async deleteAllSelected() {
const groupsToDelete = this.groups.filter((g) => g.checked);
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onEditedUsers.subscribe(() => {
modal.close();
});
}
if (groupsToDelete.length == 0) {
return;
}
const deleteMessage = groupsToDelete.map((g) => g.details.name).join(", ");
const confirmed = await this.platformUtilsService.showDialog(
deleteMessage,
this.i18nService.t("deleteMultipleGroupsConfirmation", groupsToDelete.length.toString()),
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning"
);
if (!confirmed) {
return false;
}
try {
await this.groupService.deleteMany(
this.organizationId,
groupsToDelete.map((g) => g.details.id)
);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedManyGroups", groupsToDelete.length.toString())
);
groupsToDelete.forEach((g) => this.removeGroup(g.details.id));
} catch (e) {
this.logService.error(e);
}
}
async resetPaging() {
resetPaging() {
this.pagedGroups = [];
this.loadMore();
}
@ -161,6 +302,14 @@ export class GroupsComponent implements OnInit {
return this.searchService.isSearchable(this.searchText);
}
check(groupRow: GroupDetailsRow) {
groupRow.checked = !groupRow.checked;
}
toggleAllVisible(event: Event) {
this.visibleGroups.forEach((g) => (g.checked = (event.target as HTMLInputElement).checked));
}
isPaging() {
const searching = this.isSearching();
if (searching && this.didScroll) {
@ -169,11 +318,37 @@ export class GroupsComponent implements OnInit {
return !searching && this.groups && this.groups.length > this.pageSize;
}
private removeGroup(group: GroupResponse) {
const index = this.groups.indexOf(group);
private removeGroup(id: string) {
const index = this.groups.findIndex((g) => g.details.id === id);
if (index > -1) {
this.groups.splice(index, 1);
this.resetPaging();
this.updateSearchedGroups();
}
}
private async toCollectionMap(response: ListResponse<CollectionResponse>) {
const collections = response.data.map(
(r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
);
const decryptedCollections = await this.collectionService.decryptMany(collections);
// Convert to an object using collection Ids as keys for faster name lookups
const collectionMap: CollectionViewMap = {};
decryptedCollections.forEach((c) => (collectionMap[c.id] = c));
return collectionMap;
}
private updateSearchedGroups() {
if (this.searchService.isSearchable(this.searchText)) {
// Making use of the pipe in the component as we need know which groups where filtered
this.searchedGroups = this.searchPipe.transform(
this.groups,
this.searchText,
(group) => group.details.name,
(group) => group.details.id
);
}
}
}

View File

@ -1,288 +0,0 @@
<div
class="-tw-mt-2 tw-mb-2 tw-flex tw-flex-wrap tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-pb-2.5"
>
<h1 class="tw-mt-2 tw-mb-0 tw-grow tw-pr-3">{{ "members" | i18n }}</h1>
<div class="tw-mt-2 tw-flex tw-justify-start tw-space-x-3">
<div class="btn-group btn-group-sm" role="group">
<button
type="button"
class="btn btn-outline-secondary"
[ngClass]="{ active: status == null }"
(click)="filter(null)"
>
{{ "all" | i18n }}
<span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
</button>
<button
type="button"
class="btn btn-outline-secondary"
[ngClass]="{ active: status == userStatusType.Invited }"
(click)="filter(userStatusType.Invited)"
>
{{ "invited" | i18n }}
<span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
</button>
<button
type="button"
class="btn btn-outline-secondary"
[ngClass]="{ active: status == userStatusType.Accepted }"
(click)="filter(userStatusType.Accepted)"
>
{{ "accepted" | i18n }}
<span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
</button>
<button
type="button"
class="btn btn-outline-secondary"
[ngClass]="{ active: status == userStatusType.Revoked }"
(click)="filter(userStatusType.Revoked)"
>
{{ "revoked" | i18n }}
<span bitBadge badgeType="info" *ngIf="revokedCount">{{ revokedCount }}</span>
</button>
</div>
<div class="tw-w-44">
<label class="sr-only" for="search">{{ "search" | i18n }}</label>
<input
type="search"
class="form-control form-control-sm"
id="search"
placeholder="{{ 'search' | i18n }}"
[(ngModel)]="searchText"
/>
</div>
<div class="dropdown" appListDropdown>
<button
class="btn btn-sm btn-outline-secondary dropdown-toggle"
type="button"
id="bulkActionsButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
appA11yTitle="{{ 'options' | i18n }}"
>
<i class="bwi bwi-cog" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
<button class="dropdown-item" appStopClick (click)="bulkReinvite()">
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
{{ "reinviteSelected" | i18n }}
</button>
<button
class="dropdown-item text-success"
appStopClick
(click)="bulkConfirm()"
*ngIf="showBulkConfirmUsers"
>
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
{{ "confirmSelected" | i18n }}
</button>
<button class="dropdown-item" appStopClick (click)="bulkRestore()">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
{{ "restoreAccess" | i18n }}
</button>
<button class="dropdown-item" appStopClick (click)="bulkRevoke()">
<i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
{{ "revokeAccess" | i18n }}
</button>
<button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
{{ "remove" | i18n }}
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" appStopClick (click)="selectAll(true)">
<i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
{{ "selectAll" | i18n }}
</button>
<button class="dropdown-item" appStopClick (click)="selectAll(false)">
<i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
{{ "unselectAll" | i18n }}
</button>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-primary" (click)="invite()">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "inviteUser" | i18n }}
</button>
</div>
</div>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container
*ngIf="
!loading &&
(isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
"
>
<p *ngIf="!searchedUsers.length">{{ "noUsersInList" | i18n }}</p>
<ng-container *ngIf="searchedUsers.length">
<app-callout
type="info"
title="{{ 'confirmUsers' | i18n }}"
icon="bwi bwi-check-circle"
*ngIf="showConfirmUsers"
>
{{ "usersNeedConfirmed" | i18n }}
</app-callout>
<table
class="table table-hover table-list"
infiniteScroll
[infiniteScrollDistance]="1"
[infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()"
>
<tbody>
<tr *ngFor="let u of searchedUsers">
<td (click)="checkUser(u)" class="table-list-checkbox">
<input type="checkbox" [(ngModel)]="u.checked" appStopProp />
</td>
<td width="30">
<bit-avatar [text]="u | userName" [id]="u.userId" size="small"></bit-avatar>
</td>
<td>
<a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
<span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
"invited" | i18n
}}</span>
<span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
"accepted" | i18n
}}</span>
<span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Revoked">{{
"revoked" | i18n
}}</span>
<small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
</td>
<td>
<ng-container *ngIf="u.twoFactorEnabled">
<i
class="bwi bwi-lock"
title="{{ 'userUsingTwoStep' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
</ng-container>
<ng-container *ngIf="showEnrolledStatus(u)">
<i
class="bwi bwi-key"
title="{{ 'enrolledPasswordReset' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "enrolledPasswordReset" | i18n }}</span>
</ng-container>
</td>
<td>
<span *ngIf="u.type === userType.Owner">{{ "owner" | i18n }}</span>
<span *ngIf="u.type === userType.Admin">{{ "admin" | i18n }}</span>
<span *ngIf="u.type === userType.Manager">{{ "manager" | i18n }}</span>
<span *ngIf="u.type === userType.User">{{ "user" | i18n }}</span>
<span *ngIf="u.type === userType.Custom">{{ "custom" | i18n }}</span>
</td>
<td class="table-list-options">
<div class="dropdown" appListDropdown>
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
appA11yTitle="{{ 'options' | i18n }}"
>
<i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a
class="dropdown-item"
href="#"
appStopClick
(click)="reinvite(u)"
*ngIf="u.status === userStatusType.Invited"
>
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
{{ "resendInvitation" | i18n }}
</a>
<a
class="dropdown-item text-success"
href="#"
appStopClick
(click)="confirm(u)"
*ngIf="u.status === userStatusType.Accepted"
>
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
{{ "confirm" | i18n }}
</a>
<a
class="dropdown-item"
href="#"
appStopClick
(click)="groups(u)"
*ngIf="organization.useGroups"
>
<i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
{{ "groups" | i18n }}
</a>
<a
class="dropdown-item"
href="#"
appStopClick
(click)="events(u)"
*ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
>
<i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
{{ "eventLogs" | i18n }}
</a>
<a
class="dropdown-item"
href="#"
appStopClick
(click)="resetPassword(u)"
*ngIf="allowResetPassword(u)"
>
<i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
{{ "resetPassword" | i18n }}
</a>
<a
class="dropdown-item"
href="#"
appStopClick
(click)="restore(u)"
*ngIf="u.status === userStatusType.Revoked"
>
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
{{ "restoreAccess" | i18n }}
</a>
<a
class="dropdown-item"
href="#"
appStopClick
(click)="revoke(u)"
*ngIf="u.status !== userStatusType.Revoked"
>
<i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
{{ "revokeAccess" | i18n }}
</a>
<a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
<i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
{{ "remove" | i18n }}
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</ng-container>
</ng-container>
<ng-template #addEdit></ng-template>
<ng-template #groupsTemplate></ng-template>
<ng-template #eventsTemplate></ng-template>
<ng-template #confirmTemplate></ng-template>
<ng-template #resetPasswordTemplate></ng-template>
<ng-template #bulkStatusTemplate></ng-template>
<ng-template #bulkConfirmTemplate></ng-template>
<ng-template #bulkRemoveTemplate></ng-template>

View File

@ -1,450 +0,0 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<form
class="modal-content"
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
ngNativeValidate
>
<div class="modal-header">
<h1 class="modal-title" id="userAddEditTitle">
{{ title }}
<small class="text-muted" *ngIf="name">{{ name }}</small>
<span bitBadge badgeType="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="modal-body" *ngIf="!loading">
<ng-container *ngIf="!editMode">
<p>{{ "inviteUserDesc" | i18n }}</p>
<div class="form-group mb-4">
<label for="emails">{{ "email" | i18n }}</label>
<input
id="emails"
class="form-control"
type="text"
name="Emails"
[(ngModel)]="emails"
required
appAutoFocus
/>
<small class="text-muted">{{ "inviteMultipleEmailDesc" | i18n: "20" }}</small>
</div>
</ng-container>
<h3>
{{ "userType" | i18n }}
<a
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</h3>
<div class="form-check mt-2 form-check-block">
<input
class="form-check-input"
type="radio"
name="userType"
id="userTypeUser"
[value]="organizationUserType.User"
[(ngModel)]="type"
/>
<label class="form-check-label" for="userTypeUser">
{{ "user" | i18n }}
<small>{{ "userDesc" | i18n }}</small>
</label>
</div>
<div class="form-check mt-2 form-check-block">
<input
class="form-check-input"
type="radio"
name="userType"
id="userTypeManager"
[value]="organizationUserType.Manager"
[(ngModel)]="type"
/>
<label class="form-check-label" for="userTypeManager">
{{ "manager" | i18n }}
<small>{{ "managerDesc" | i18n }}</small>
</label>
</div>
<div class="form-check mt-2 form-check-block">
<input
class="form-check-input"
type="radio"
name="userType"
id="userTypeAdmin"
[value]="organizationUserType.Admin"
[(ngModel)]="type"
/>
<label class="form-check-label" for="userTypeAdmin">
{{ "admin" | i18n }}
<small>{{ "adminDesc" | i18n }}</small>
</label>
</div>
<div class="form-check mt-2 form-check-block">
<input
class="form-check-input"
type="radio"
name="userType"
id="userTypeOwner"
[value]="organizationUserType.Owner"
[(ngModel)]="type"
/>
<label class="form-check-label" for="userTypeOwner">
{{ "owner" | i18n }}
<small>{{ "ownerDesc" | i18n }}</small>
</label>
</div>
<div class="form-check mt-2 form-check-block">
<input
class="form-check-input"
type="radio"
name="userType"
id="userTypeCustom"
[value]="organizationUserType.Custom"
[(ngModel)]="type"
[attr.disabled]="!canUseCustomPermissions || null"
/>
<label class="form-check-label" for="userTypeCustom">
{{ "custom" | i18n }}
<ng-container *ngIf="!canUseCustomPermissions; else enterprise">
<small
>{{ "customDescNonEnterpriseStart" | i18n
}}<a href="https://bitwarden.com/contact/" target="_blank">{{
"customDescNonEnterpriseLink" | i18n
}}</a
>{{ "customDescNonEnterpriseEnd" | i18n }}</small
>
</ng-container>
<ng-template #enterprise>
<small>{{ "customDesc" | i18n }}</small>
</ng-template>
</label>
</div>
<ng-container *ngIf="customUserTypeSelected">
<h3 class="mt-4 d-flex">
{{ "permissions" | i18n }}
</h3>
<div class="row">
<div class="col-6">
<div class="mb-3">
<label class="font-weight-bold mb-0">{{ "managerPermissions" | i18n }}</label>
<hr class="my-0 mr-2" />
<app-nested-checkbox
parentId="manageAssignedCollections"
[checkboxes]="manageAssignedCollectionsCheckboxes"
>
</app-nested-checkbox>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label class="font-weight-bold mb-0">{{ "adminPermissions" | i18n }}</label>
<hr class="my-0 mr-2" />
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="accessEventLogs"
id="accessEventLogs"
[(ngModel)]="permissions.accessEventLogs"
/>
<label class="form-check-label font-weight-normal" for="accessEventLogs">
{{ "accessEventLogs" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="accessImportExport"
id="accessImportExport"
[(ngModel)]="permissions.accessImportExport"
/>
<label class="form-check-label font-weight-normal" for="accessImportExport">
{{ "accessImportExport" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="accessReports"
id="accessReports"
[(ngModel)]="permissions.accessReports"
/>
<label class="form-check-label font-weight-normal" for="accessReports">
{{ "accessReports" | i18n }}
</label>
</div>
</div>
<app-nested-checkbox
parentId="manageAllCollections"
[checkboxes]="manageAllCollectionsCheckboxes"
>
</app-nested-checkbox>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="manageGroups"
id="manageGroups"
[(ngModel)]="permissions.manageGroups"
/>
<label class="form-check-label font-weight-normal" for="manageGroups">
{{ "manageGroups" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="manageSso"
id="managePolicies"
[(ngModel)]="permissions.manageSso"
/>
<label class="form-check-label font-weight-normal" for="manageSso">
{{ "manageSso" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="managePolicies"
id="managePolicies"
[(ngModel)]="permissions.managePolicies"
/>
<label class="form-check-label font-weight-normal" for="managePolicies">
{{ "managePolicies" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="manageUsers"
id="manageUsers"
[(ngModel)]="permissions.manageUsers"
(change)="handleDependentPermissions()"
/>
<label class="form-check-label font-weight-normal" for="manageUsers">
{{ "manageUsers" | i18n }}
</label>
</div>
</div>
<div class="form-group mb-0">
<div class="form-check mt-1 form-check-block">
<input
class="form-check-input"
type="checkbox"
name="manageResetPassword"
id="manageResetPassword"
[(ngModel)]="permissions.manageResetPassword"
(change)="handleDependentPermissions()"
/>
<label class="form-check-label font-weight-normal" for="manageResetPassword">
{{ "manageResetPassword" | i18n }}
</label>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<h3 class="mt-4 d-flex">
<div class="mb-3">
{{ "accessControl" | i18n }}
<a
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/#access-control"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
<button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
{{ "selectAll" | i18n }}
</button>
<button type="button" (click)="selectAll(false)" class="btn btn-link btn-sm py-0">
{{ "unselectAll" | i18n }}
</button>
</div>
</h3>
<div class="form-group" [ngClass]="{ 'mb-0': access !== 'selected' }">
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="access"
id="accessAll"
value="all"
[(ngModel)]="access"
/>
<label class="form-check-label" for="accessAll">
{{ "userAccessAllItems" | i18n }}
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="access"
id="accessSelected"
value="selected"
[(ngModel)]="access"
/>
<label class="form-check-label" for="accessSelected">
{{ "userAccessSelectedCollections" | i18n }}
</label>
</div>
</div>
<ng-container *ngIf="access === 'selected'">
<div *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }}
</div>
<table
class="table table-hover table-list mb-0"
*ngIf="collections && collections.length"
>
<thead>
<tr>
<th>&nbsp;</th>
<th>{{ "name" | i18n }}</th>
<th width="100" class="text-center">{{ "hidePasswords" | i18n }}</th>
<th width="100" class="text-center">{{ "readOnly" | i18n }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of collections; let i = index">
<td class="table-list-checkbox" (click)="check(c)">
<input
type="checkbox"
[(ngModel)]="$any(c).checked"
name="Collection[{{ i }}].Checked"
appStopProp
/>
</td>
<td (click)="check(c)">
{{ c.name }}
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="c.hidePasswords"
name="Collection[{{ i }}].HidePasswords"
[disabled]="!$any(c).checked"
/>
</td>
<td class="text-center">
<input
type="checkbox"
[(ngModel)]="c.readOnly"
name="Collection[{{ i }}].ReadOnly"
[disabled]="!$any(c).checked"
/>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>
<div class="ml-auto">
<button
type="button"
(click)="restore()"
class="btn btn-outline-secondary"
*ngIf="editMode && isRevoked"
[disabled]="form.loading"
>
<i
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
[hidden]="!form.loading"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span>{{ "restoreAccess" | i18n }}</span>
</button>
<button
type="button"
(click)="revoke()"
class="btn btn-outline-secondary"
*ngIf="editMode && !isRevoked"
[disabled]="form.loading"
>
<i
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
[hidden]="!form.loading"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span>{{ "revokeAccess" | i18n }}</span>
</button>
<button
#deleteBtn
type="button"
(click)="delete()"
class="btn btn-outline-danger"
appA11yTitle="{{ 'delete' | i18n }}"
*ngIf="editMode"
[disabled]="$any(deleteBtn).loading"
[appApiAction]="deletePromise"
>
<i
class="bwi bwi-trash bwi-lg bwi-fw"
[hidden]="$any(deleteBtn).loading"
aria-hidden="true"
></i>
<i
class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
[hidden]="!$any(deleteBtn).loading"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
</button>
</div>
</div>
</form>
</div>
</div>

View File

@ -1,337 +0,0 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import {
OrganizationUserInviteRequest,
OrganizationUserUpdateRequest,
} from "@bitwarden/common/abstractions/organization-user/requests";
import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType";
import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
import { PermissionsApi } from "@bitwarden/common/models/api/permissions.api";
import { CollectionData } from "@bitwarden/common/models/data/collection.data";
import { Collection } from "@bitwarden/common/models/domain/collection";
import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request";
import { CollectionDetailsResponse } from "@bitwarden/common/models/response/collection.response";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
@Component({
selector: "app-user-add-edit",
templateUrl: "user-add-edit.component.html",
})
export class UserAddEditComponent implements OnInit {
@Input() name: string;
@Input() organizationUserId: string;
@Input() organizationId: string;
@Input() usesKeyConnector = false;
@Output() onSavedUser = new EventEmitter();
@Output() onDeletedUser = new EventEmitter();
@Output() onRevokedUser = new EventEmitter();
@Output() onRestoredUser = new EventEmitter();
loading = true;
editMode = false;
isRevoked = false;
title: string;
emails: string;
type: OrganizationUserType = OrganizationUserType.User;
permissions = new PermissionsApi();
showCustom = false;
access: "all" | "selected" = "selected";
collections: CollectionView[] = [];
formPromise: Promise<any>;
deletePromise: Promise<any>;
organizationUserType = OrganizationUserType;
canUseCustomPermissions: boolean;
manageAllCollectionsCheckboxes = [
{
id: "createNewCollections",
get: () => this.permissions.createNewCollections,
set: (v: boolean) => (this.permissions.createNewCollections = v),
},
{
id: "editAnyCollection",
get: () => this.permissions.editAnyCollection,
set: (v: boolean) => (this.permissions.editAnyCollection = v),
},
{
id: "deleteAnyCollection",
get: () => this.permissions.deleteAnyCollection,
set: (v: boolean) => (this.permissions.deleteAnyCollection = v),
},
];
manageAssignedCollectionsCheckboxes = [
{
id: "editAssignedCollections",
get: () => this.permissions.editAssignedCollections,
set: (v: boolean) => (this.permissions.editAssignedCollections = v),
},
{
id: "deleteAssignedCollections",
get: () => this.permissions.deleteAssignedCollections,
set: (v: boolean) => (this.permissions.deleteAssignedCollections = v),
},
];
get customUserTypeSelected(): boolean {
return this.type === OrganizationUserType.Custom;
}
constructor(
private apiService: ApiService,
private i18nService: I18nService,
private collectionService: CollectionService,
private platformUtilsService: PlatformUtilsService,
private organizationService: OrganizationService,
private logService: LogService,
private organizationUserService: OrganizationUserService
) {}
async ngOnInit() {
this.editMode = this.loading = this.organizationUserId != null;
const organization = this.organizationService.get(this.organizationId);
this.canUseCustomPermissions = organization.useCustomPermissions;
await this.loadCollections();
if (this.editMode) {
this.editMode = true;
this.title = this.i18nService.t("editUser");
try {
const user = await this.organizationUserService.getOrganizationUser(
this.organizationId,
this.organizationUserId
);
this.access = user.accessAll ? "all" : "selected";
this.type = user.type;
this.isRevoked = user.status === OrganizationUserStatusType.Revoked;
if (user.type === OrganizationUserType.Custom) {
this.permissions = user.permissions;
}
if (user.collections != null && this.collections != null) {
user.collections.forEach((s) => {
const collection = this.collections.filter((c) => c.id === s.id);
if (collection != null && collection.length > 0) {
(collection[0] as any).checked = true;
collection[0].readOnly = s.readOnly;
collection[0].hidePasswords = s.hidePasswords;
}
});
}
} catch (e) {
this.logService.error(e);
}
} else {
this.title = this.i18nService.t("inviteUser");
}
this.loading = false;
}
async loadCollections() {
const response = await this.apiService.getCollections(this.organizationId);
const collections = response.data.map(
(r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
);
this.collections = await this.collectionService.decryptMany(collections);
}
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
if (!(c as any).checked) {
c.readOnly = false;
}
}
selectAll(select: boolean) {
this.collections.forEach((c) => this.check(c, select));
}
setRequestPermissions(p: PermissionsApi, clearPermissions: boolean) {
Object.assign(p, clearPermissions ? new PermissionsApi() : this.permissions);
return p;
}
handleDependentPermissions() {
// Manage Password Reset must have Manage Users enabled
if (this.permissions.manageResetPassword && !this.permissions.manageUsers) {
this.permissions.manageUsers = true;
(document.getElementById("manageUsers") as HTMLInputElement).checked = true;
this.platformUtilsService.showToast(
"info",
null,
this.i18nService.t("resetPasswordManageUsers")
);
}
}
async submit() {
if (!this.canUseCustomPermissions && this.type === OrganizationUserType.Custom) {
this.platformUtilsService.showToast(
"error",
null,
this.i18nService.t("customNonEnterpriseError")
);
return;
}
let collections: SelectionReadOnlyRequest[] = null;
if (this.access !== "all") {
collections = this.collections
.filter((c) => (c as any).checked)
.map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly, !!c.hidePasswords));
}
try {
if (this.editMode) {
this.updateUser(collections);
} else {
this.inviteUser(collections);
}
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.name)
);
this.onSavedUser.emit();
} catch (e) {
this.logService.error(e);
}
}
async delete() {
if (!this.editMode) {
return;
}
const message = this.usesKeyConnector
? "removeUserConfirmationKeyConnector"
: "removeOrgUserConfirmation";
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t(message),
this.i18nService.t("removeUserIdAccess", this.name),
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning",
false,
"app-user-add-edit .modal-content"
);
if (!confirmed) {
return false;
}
try {
this.deletePromise = this.organizationUserService.deleteOrganizationUser(
this.organizationId,
this.organizationUserId
);
await this.deletePromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("removedUserId", this.name)
);
this.onDeletedUser.emit();
} catch (e) {
this.logService.error(e);
}
}
async revoke() {
if (!this.editMode) {
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("revokeUserConfirmation"),
this.i18nService.t("revokeUserId", this.name),
this.i18nService.t("revokeAccess"),
this.i18nService.t("cancel"),
"warning",
false,
"app-user-add-edit .modal-content"
);
if (!confirmed) {
return false;
}
try {
this.formPromise = this.organizationUserService.revokeOrganizationUser(
this.organizationId,
this.organizationUserId
);
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("revokedUserId", this.name)
);
this.isRevoked = true;
this.onRevokedUser.emit();
} catch (e) {
this.logService.error(e);
}
}
async restore() {
if (!this.editMode) {
return;
}
try {
this.formPromise = this.organizationUserService.restoreOrganizationUser(
this.organizationId,
this.organizationUserId
);
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("restoredUserId", this.name)
);
this.isRevoked = false;
this.onRestoredUser.emit();
} catch (e) {
this.logService.error(e);
}
}
updateUser(collections: SelectionReadOnlyRequest[]) {
const request = new OrganizationUserUpdateRequest();
request.accessAll = this.access === "all";
request.type = this.type;
request.collections = collections;
request.permissions = this.setRequestPermissions(
request.permissions ?? new PermissionsApi(),
request.type !== OrganizationUserType.Custom
);
this.formPromise = this.organizationUserService.putOrganizationUser(
this.organizationId,
this.organizationUserId,
request
);
}
inviteUser(collections: SelectionReadOnlyRequest[]) {
const request = new OrganizationUserInviteRequest();
request.emails = [...new Set(this.emails.trim().split(/\s*,\s*/))];
request.accessAll = this.access === "all";
request.type = this.type;
request.permissions = this.setRequestPermissions(
request.permissions ?? new PermissionsApi(),
request.type !== OrganizationUserType.Custom
);
request.collections = collections;
this.formPromise = this.organizationUserService.postOrganizationUserInvite(
this.organizationId,
request
);
}
}

View File

@ -1,60 +0,0 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-header">
<h1 class="modal-title" id="groupAccessTitle">
{{ "groupAccess" | i18n }}
<small class="text-muted" *ngIf="name">{{ name }}</small>
</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<div class="modal-body" *ngIf="!loading">
<p>{{ "groupAccessUserDesc" | i18n }}</p>
<div *ngIf="!groups || !groups.length">
{{ "noGroupsInList" | i18n }}
</div>
<table class="table table-hover table-list mb-0" *ngIf="groups && groups.length">
<tbody>
<tr *ngFor="let g of groups; let i = index">
<td class="table-list-checkbox" (click)="check(g)">
<input
type="checkbox"
[(ngModel)]="$any(g).checked"
name="Groups[{{ i }}].Checked"
appStopProp
/>
</td>
<td (click)="check(g)">
{{ g.name }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>
</div>
</form>
</div>
</div>

View File

@ -1,92 +0,0 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
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 { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import { OrganizationUserUpdateGroupsRequest } from "@bitwarden/common/abstractions/organization-user/requests";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { Utils } from "@bitwarden/common/misc/utils";
import { GroupResponse } from "@bitwarden/common/models/response/group.response";
@Component({
selector: "app-user-groups",
templateUrl: "user-groups.component.html",
})
export class UserGroupsComponent implements OnInit {
@Input() name: string;
@Input() organizationUserId: string;
@Input() organizationId: string;
@Output() onSavedUser = new EventEmitter();
loading = true;
groups: GroupResponse[] = [];
formPromise: Promise<any>;
constructor(
private apiService: ApiService,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private logService: LogService,
private organizationUserService: OrganizationUserService
) {}
async ngOnInit() {
const groupsResponse = await this.apiService.getGroups(this.organizationId);
const groups = groupsResponse.data.map((r) => r);
groups.sort(Utils.getSortFunction(this.i18nService, "name"));
this.groups = groups;
try {
const userGroups = await this.organizationUserService.getOrganizationUserGroups(
this.organizationId,
this.organizationUserId
);
if (userGroups != null && this.groups != null) {
userGroups.forEach((ug) => {
const group = this.groups.filter((g) => g.id === ug);
if (group != null && group.length > 0) {
(group[0] as any).checked = true;
}
});
}
} catch (e) {
this.logService.error(e);
}
this.loading = false;
}
check(g: GroupResponse, select?: boolean) {
(g as any).checked = select == null ? !(g as any).checked : select;
if (!(g as any).checked) {
(g as any).readOnly = false;
}
}
selectAll(select: boolean) {
this.groups.forEach((g) => this.check(g, select));
}
async submit() {
const request = new OrganizationUserUpdateGroupsRequest();
request.groupIds = this.groups.filter((g) => (g as any).checked).map((g) => g.id);
try {
this.formPromise = this.organizationUserService.putOrganizationUserGroups(
this.organizationId,
this.organizationUserId,
request
);
await this.formPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("editedGroupsForUser", this.name)
);
this.onSavedUser.emit();
} catch (e) {
this.logService.error(e);
}
}
}

View File

@ -0,0 +1,2 @@
export * from "./member-dialog.component";
export * from "./member-dialog.module";

View File

@ -0,0 +1,353 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog [disablePadding]="!loading">
<span bitDialogTitle>
{{ title }}
<span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading && params.name">{{
params.name
}}</span>
<span bitBadge badgeType="secondary" *ngIf="isRevoked">{{ "revoked" | i18n }}</span>
</span>
<div bitDialogContent>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<bit-tab-group *ngIf="!loading" [selectedIndex]="tabIndex">
<bit-tab [label]="'role' | i18n">
<ng-container *ngIf="!editMode">
<p>{{ "inviteUserDesc" | i18n }}</p>
<bit-form-field>
<bit-label>{{ "email" | i18n }}</bit-label>
<input id="emails" type="text" appAutoFocus bitInput formControlName="emails" />
<bit-hint>{{ "inviteMultipleEmailDesc" | i18n: "20" }}</bit-hint>
</bit-form-field>
</ng-container>
<fieldset role="radiogroup" aria-labelledby="roleGroupLabel">
<legend
id="roleGroupLabel"
class="tw-mb-2 tw-block tw-text-base tw-font-semibold tw-text-main"
>
{{ "memberRole" | i18n }}
<a
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</legend>
<div class="tw-mb-2 tw-flex tw-items-baseline">
<input
type="radio"
id="userTypeUser"
[value]="organizationUserType.User"
class="tw-relative tw-bottom-[-1px] tw-mr-2"
formControlName="type"
name="type"
/>
<label class="tw-m-0" for="userTypeUser">
{{ "user" | i18n }}
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "userDesc" | i18n }}
</div>
</label>
</div>
<div class="tw-mb-2 tw-flex tw-items-baseline">
<input
type="radio"
id="userTypeManager"
[value]="organizationUserType.Manager"
class="tw-relative tw-bottom-[-1px] tw-mr-2"
formControlName="type"
name="type"
/>
<label class="tw-m-0" for="userTypeManager">
{{ "manager" | i18n }}
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "managerDesc" | i18n }}
</div>
</label>
</div>
<div class="tw-mb-2 tw-flex tw-items-baseline">
<input
type="radio"
id="userTypeAdmin"
[value]="organizationUserType.Admin"
class="tw-relative tw-bottom-[-1px] tw-mr-2"
formControlName="type"
name="type"
/>
<label class="tw-m-0" for="userTypeAdmin">
{{ "admin" | i18n }}
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "adminDesc" | i18n }}
</div>
</label>
</div>
<div class="tw-mb-2 tw-flex tw-items-baseline">
<input
type="radio"
id="userTypeOwner"
[value]="organizationUserType.Owner"
class="tw-relative tw-bottom-[-1px] tw-mr-2"
formControlName="type"
name="type"
/>
<label class="tw-m-0" for="userTypeOwner">
{{ "owner" | i18n }}
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "ownerDesc" | i18n }}
</div>
</label>
</div>
<div class="tw-mb-2 tw-flex tw-items-baseline">
<input
type="radio"
id="userTypeCustom"
[value]="organizationUserType.Custom"
formControlName="type"
name="type"
class="tw-relative tw-bottom-[-1px] tw-mr-2"
[attr.disabled]="!canUseCustomPermissions || null"
/>
<label class="tw-m-0" for="userTypeCustom">
{{ "custom" | i18n }}
<ng-container *ngIf="!canUseCustomPermissions; else enterprise">
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "customDescNonEnterpriseStart" | i18n
}}<a href="https://bitwarden.com/contact/" target="_blank">{{
"customDescNonEnterpriseLink" | i18n
}}</a
>{{ "customDescNonEnterpriseEnd" | i18n }}
</div>
</ng-container>
<ng-template #enterprise>
<div class="text-base tw-block tw-font-normal tw-text-muted">
{{ "customDesc" | i18n }}
</div>
</ng-template>
</label>
</div>
</fieldset>
<ng-container *ngIf="customUserTypeSelected">
<h3 class="mt-4 d-flex tw-font-semibold">
{{ "permissions" | i18n }}
</h3>
<div class="row" [formGroup]="permissionsGroup">
<div class="col-6">
<div class="mb-3">
<label class="tw-font-semibold">{{ "managerPermissions" | i18n }}</label>
<hr class="tw-mt-0 tw-mb-2 tw-mr-2" />
<app-nested-checkbox
parentId="manageAssignedCollections"
[checkboxes]="permissionsGroup.controls.manageAssignedCollectionsGroup"
>
</app-nested-checkbox>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label class="tw-font-semibold">{{ "adminPermissions" | i18n }}</label>
<hr class="tw-mt-0 tw-mb-2 tw-mr-2" />
<div>
<input
type="checkbox"
name="accessEventLogs"
id="accessEventLogs"
formControlName="accessEventLogs"
/>
<label class="!tw-font-normal" for="accessEventLogs">
{{ "accessEventLogs" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="accessImportExport"
id="accessImportExport"
formControlName="accessImportExport"
/>
<label class="!tw-font-normal" for="accessImportExport">
{{ "accessImportExport" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="accessReports"
id="accessReports"
formControlName="accessReports"
/>
<label class="!tw-font-normal" for="accessReports">
{{ "accessReports" | i18n }}
</label>
</div>
<app-nested-checkbox
parentId="manageAllCollections"
[checkboxes]="permissionsGroup.controls.manageAllCollectionsGroup"
>
</app-nested-checkbox>
<div>
<input
type="checkbox"
name="manageGroups"
id="manageGroups"
formControlName="manageGroups"
/>
<label class="!tw-font-normal" for="manageGroups">
{{ "manageGroups" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="manageSso"
id="manageSso"
formControlName="manageSso"
/>
<label class="!tw-font-normal" for="manageSso">
{{ "manageSso" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="managePolicies"
id="managePolicies"
formControlName="managePolicies"
/>
<label class="!tw-font-normal" for="managePolicies">
{{ "managePolicies" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="manageUsers"
id="manageUsers"
formControlName="managePolicies"
(change)="handleDependentPermissions()"
/>
<label class="!tw-font-normal" for="manageUsers">
{{ "manageUsers" | i18n }}
</label>
</div>
<div>
<input
type="checkbox"
name="manageResetPassword"
id="manageResetPassword"
formControlName="manageResetPassword"
(change)="handleDependentPermissions()"
/>
<label class="!tw-font-normal" for="manageResetPassword">
{{ "manageResetPassword" | i18n }}
</label>
</div>
</div>
</div>
</div>
</ng-container>
</bit-tab>
<bit-tab *ngIf="organization.useGroups" [label]="'groups' | i18n">
<div class="tw-mb-6">
{{ "groupAccessUserDesc" | i18n }}
</div>
<bit-access-selector
formControlName="groups"
[items]="groupAccessItems"
[columnHeader]="'groups' | i18n"
[selectorLabelText]="'selectGroups' | i18n"
[emptySelectionText]="'noGroupsAdded' | i18n"
></bit-access-selector>
</bit-tab>
<bit-tab [label]="'collections' | i18n">
<div *ngIf="organization.useGroups" class="tw-mb-6">
{{ "userPermissionOverrideHelper" | i18n }}
</div>
<div class="tw-mb-6">
<bit-form-control>
<input type="checkbox" bitCheckbox formControlName="accessAllCollections" />
<bit-label>
{{ "accessAllCollectionsDesc" | i18n }}
<a
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
href="https://bitwarden.com/help/user-types-access-control/#access-control"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</bit-label>
<bit-hint>{{ "accessAllCollectionsHelp" | i18n }}</bit-hint>
</bit-form-control>
</div>
<bit-access-selector
*ngIf="!accessAllCollections"
[permissionMode]="PermissionMode.Edit"
formControlName="access"
[showGroupColumn]="organization.useGroups"
[items]="collectionAccessItems"
[columnHeader]="'collection' | i18n"
[selectorLabelText]="'selectCollections' | i18n"
[emptySelectionText]="'noCollectionsAdded' | i18n"
></bit-access-selector
></bit-tab>
</bit-tab-group>
</div>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
{{ "save" | i18n }}
</button>
<button
type="button"
bitButton
bitFormButton
buttonType="secondary"
(click)="cancel()"
[disabled]="loading"
>
{{ "cancel" | i18n }}
</button>
<div class="tw-ml-auto">
<button
*ngIf="editMode && isRevoked"
type="button"
bitButton
bitFormButton
buttonType="secondary"
[bitAction]="restore"
[disabled]="loading"
>
{{ "restoreAccess" | i18n }}
</button>
<button
*ngIf="editMode && !isRevoked"
type="button"
bitButton
bitFormButton
buttonType="secondary"
[bitAction]="revoke"
[disabled]="loading"
>
{{ "revokeAccess" | i18n }}
</button>
<button
*ngIf="editMode"
type="button"
bitIconButton="bwi-trash"
buttonType="danger"
bitFormButton
[appA11yTitle]="'delete' | i18n"
[bitAction]="delete"
[disabled]="loading"
></button>
</div>
</div>
</bit-dialog>
</form>

View File

@ -0,0 +1,495 @@
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { combineLatest, of, shareReplay, Subject, switchMap, takeUntil } from "rxjs";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { OrganizationUserStatusType } from "@bitwarden/common/enums/organizationUserStatusType";
import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
import { PermissionsApi } from "@bitwarden/common/models/api/permissions.api";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { DialogService } from "@bitwarden/components";
import {
CollectionAccessSelectionView,
CollectionAdminService,
GroupService,
GroupView,
OrganizationUserAdminView,
UserAdminService,
} from "../../../core";
import {
AccessItemType,
AccessItemValue,
AccessItemView,
convertToPermission,
convertToSelectionView,
PermissionMode,
} from "../../../shared/components/access-selector";
export enum MemberDialogTab {
Role = 0,
Groups = 1,
Collections = 2,
}
export interface MemberDialogParams {
name: string;
organizationId: string;
organizationUserId: string;
usesKeyConnector: boolean;
initialTab?: MemberDialogTab;
}
export enum MemberDialogResult {
Saved = "saved",
Canceled = "canceled",
Deleted = "deleted",
Revoked = "revoked",
Restored = "restored",
}
@Component({
selector: "app-member-dialog",
templateUrl: "member-dialog.component.html",
})
export class MemberDialogComponent implements OnInit, OnDestroy {
loading = true;
editMode = false;
isRevoked = false;
title: string;
access: "all" | "selected" = "selected";
collections: CollectionView[] = [];
organizationUserType = OrganizationUserType;
canUseCustomPermissions: boolean;
PermissionMode = PermissionMode;
protected organization: Organization;
protected collectionAccessItems: AccessItemView[] = [];
protected groupAccessItems: AccessItemView[] = [];
protected tabIndex: MemberDialogTab;
protected formGroup = this.formBuilder.group({
emails: ["", [Validators.required]],
type: OrganizationUserType.User,
accessAllCollections: false,
access: [[] as AccessItemValue[]],
groups: [[] as AccessItemValue[]],
});
protected permissionsGroup = this.formBuilder.group({
manageAssignedCollectionsGroup: this.formBuilder.group<Record<string, boolean>>({
manageAssignedCollections: false,
editAssignedCollections: false,
deleteAssignedCollections: false,
}),
manageAllCollectionsGroup: this.formBuilder.group<Record<string, boolean>>({
manageAllCollections: false,
createNewCollections: false,
editAnyCollection: false,
deleteAnyCollection: false,
}),
accessEventLogs: false,
accessImportExport: false,
accessReports: false,
manageGroups: false,
manageSso: false,
managePolicies: false,
manageUsers: false,
manageResetPassword: false,
});
private destroy$ = new Subject<void>();
get customUserTypeSelected(): boolean {
return this.formGroup.value.type === OrganizationUserType.Custom;
}
get accessAllCollections(): boolean {
return this.formGroup.value.accessAllCollections;
}
constructor(
@Inject(DIALOG_DATA) protected params: MemberDialogParams,
private dialogRef: DialogRef<MemberDialogResult>,
private apiService: ApiService,
private i18nService: I18nService,
private collectionService: CollectionService,
private platformUtilsService: PlatformUtilsService,
private organizationService: OrganizationService,
private formBuilder: FormBuilder,
// TODO: We should really look into consolidating naming conventions for these services
private collectionAdminService: CollectionAdminService,
private groupService: GroupService,
private userService: UserAdminService,
private organizationUserService: OrganizationUserService
) {}
async ngOnInit() {
this.editMode = this.params.organizationUserId != null;
this.tabIndex = this.params.initialTab ?? MemberDialogTab.Role;
this.title = this.i18nService.t(this.editMode ? "editMember" : "inviteMember");
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.collectionAdminService.getAll(this.params.organizationId),
userDetails: this.params.organizationUserId
? this.userService.get(this.params.organizationId, this.params.organizationUserId)
: of(null),
groups: groups$,
})
.pipe(takeUntil(this.destroy$))
.subscribe(({ organization, collections, userDetails, groups }) => {
this.organization = organization;
this.canUseCustomPermissions = organization.useCustomPermissions;
this.collectionAccessItems = [].concat(
collections.map((c) => mapCollectionToAccessItemView(c))
);
this.groupAccessItems = [].concat(
groups.map<AccessItemView>((g) => mapGroupToAccessItemView(g))
);
if (this.params.organizationUserId) {
if (!userDetails) {
throw new Error("Could not find user to edit.");
}
this.isRevoked = userDetails.status === OrganizationUserStatusType.Revoked;
const assignedCollectionsPermissions = {
manageAssignedCollections: userDetails.permissions.manageAssignedCollections,
editAssignedCollections: userDetails.permissions.editAssignedCollections,
deleteAssignedCollections: userDetails.permissions.deleteAssignedCollections,
};
const allCollectionsPermissions = {
manageAllCollections: userDetails.permissions.manageAllCollections,
createNewCollections: userDetails.permissions.createNewCollections,
editAnyCollection: userDetails.permissions.editAnyCollection,
deleteAnyCollection: userDetails.permissions.deleteAnyCollection,
};
if (userDetails.type === OrganizationUserType.Custom) {
this.permissionsGroup.patchValue({
accessEventLogs: userDetails.permissions.accessEventLogs,
accessImportExport: userDetails.permissions.accessImportExport,
accessReports: userDetails.permissions.accessReports,
manageGroups: userDetails.permissions.manageGroups,
manageSso: userDetails.permissions.manageSso,
managePolicies: userDetails.permissions.managePolicies,
manageUsers: userDetails.permissions.manageUsers,
manageResetPassword: userDetails.permissions.manageResetPassword,
manageAssignedCollectionsGroup: assignedCollectionsPermissions,
manageAllCollectionsGroup: allCollectionsPermissions,
});
}
const collectionsFromGroups = groups
.filter((group) => userDetails.groups.includes(group.id))
.flatMap((group) =>
group.collections.map((accessSelection) => {
const collection = collections.find((c) => c.id === accessSelection.id);
return { group, collection, accessSelection };
})
);
this.collectionAccessItems = this.collectionAccessItems.concat(
collectionsFromGroups.map(({ collection, accessSelection, group }) =>
mapCollectionToAccessItemView(collection, accessSelection, group)
)
);
const accessSelections = mapToAccessSelections(userDetails);
const groupAccessSelections = mapToGroupAccessSelections(userDetails.groups);
this.formGroup.removeControl("emails");
this.formGroup.patchValue({
type: userDetails.type,
accessAllCollections: userDetails.accessAll,
access: accessSelections,
groups: groupAccessSelections,
});
}
this.loading = false;
});
}
check(c: CollectionView, select?: boolean) {
(c as any).checked = select == null ? !(c as any).checked : select;
if (!(c as any).checked) {
c.readOnly = false;
}
}
selectAll(select: boolean) {
this.collections.forEach((c) => this.check(c, select));
}
setRequestPermissions(p: PermissionsApi, clearPermissions: boolean): PermissionsApi {
if (clearPermissions) {
return new PermissionsApi();
}
const partialPermissions: Partial<PermissionsApi> = {
accessEventLogs: this.permissionsGroup.value.accessEventLogs,
accessImportExport: this.permissionsGroup.value.accessImportExport,
accessReports: this.permissionsGroup.value.accessReports,
manageGroups: this.permissionsGroup.value.manageGroups,
manageSso: this.permissionsGroup.value.manageSso,
managePolicies: this.permissionsGroup.value.managePolicies,
manageUsers: this.permissionsGroup.value.manageUsers,
manageResetPassword: this.permissionsGroup.value.manageResetPassword,
manageAllCollections:
this.permissionsGroup.value.manageAllCollectionsGroup.manageAllCollections,
createNewCollections:
this.permissionsGroup.value.manageAllCollectionsGroup.createNewCollections,
editAnyCollection: this.permissionsGroup.value.manageAllCollectionsGroup.editAnyCollection,
deleteAnyCollection:
this.permissionsGroup.value.manageAllCollectionsGroup.deleteAnyCollection,
manageAssignedCollections:
this.permissionsGroup.value.manageAssignedCollectionsGroup.manageAssignedCollections,
editAssignedCollections:
this.permissionsGroup.value.manageAssignedCollectionsGroup.editAssignedCollections,
deleteAssignedCollections:
this.permissionsGroup.value.manageAssignedCollectionsGroup.deleteAssignedCollections,
};
return Object.assign(p, partialPermissions);
}
handleDependentPermissions() {
// Manage Password Reset must have Manage Users enabled
if (
this.permissionsGroup.value.manageResetPassword &&
!this.permissionsGroup.value.manageUsers
) {
this.permissionsGroup.value.manageUsers = true;
(document.getElementById("manageUsers") as HTMLInputElement).checked = true;
this.platformUtilsService.showToast(
"info",
null,
this.i18nService.t("resetPasswordManageUsers")
);
}
}
submit = async () => {
if (this.formGroup.invalid) {
return;
}
if (!this.canUseCustomPermissions && this.customUserTypeSelected) {
this.platformUtilsService.showToast(
"error",
null,
this.i18nService.t("customNonEnterpriseError")
);
return;
}
const userView = new OrganizationUserAdminView();
userView.id = this.params.organizationUserId;
userView.organizationId = this.params.organizationId;
userView.accessAll = this.accessAllCollections;
userView.type = this.formGroup.value.type;
userView.permissions = this.setRequestPermissions(
userView.permissions ?? new PermissionsApi(),
userView.type !== OrganizationUserType.Custom
);
userView.collections = this.formGroup.value.access
.filter((v) => v.type === AccessItemType.Collection)
.map(convertToSelectionView);
userView.groups = this.formGroup.value.groups.map((m) => m.id);
if (this.editMode) {
await this.userService.save(userView);
} else {
userView.id = this.params.organizationUserId;
const emails = [...new Set(this.formGroup.value.emails.trim().split(/\s*,\s*/))];
await this.userService.invite(emails, userView);
}
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.params.name)
);
this.close(MemberDialogResult.Saved);
};
delete = async () => {
if (!this.editMode) {
return;
}
const message = this.params.usesKeyConnector
? "removeUserConfirmationKeyConnector"
: "removeOrgUserConfirmation";
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t(message),
this.i18nService.t("removeUserIdAccess", this.params.name),
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning",
false,
"app-user-add-edit .modal-content"
);
if (!confirmed) {
return false;
}
await this.organizationUserService.deleteOrganizationUser(
this.params.organizationId,
this.params.organizationUserId
);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("removedUserId", this.params.name)
);
this.close(MemberDialogResult.Deleted);
};
revoke = async () => {
if (!this.editMode) {
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("revokeUserConfirmation"),
this.i18nService.t("revokeUserId", this.params.name),
this.i18nService.t("revokeAccess"),
this.i18nService.t("cancel"),
"warning",
false,
"app-user-add-edit .modal-content"
);
if (!confirmed) {
return false;
}
await this.organizationUserService.revokeOrganizationUser(
this.params.organizationId,
this.params.organizationUserId
);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("revokedUserId", this.params.name)
);
this.isRevoked = true;
this.close(MemberDialogResult.Revoked);
};
restore = async () => {
if (!this.editMode) {
return;
}
await this.organizationUserService.restoreOrganizationUser(
this.params.organizationId,
this.params.organizationUserId
);
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("restoredUserId", this.params.name)
);
this.isRevoked = false;
this.close(MemberDialogResult.Restored);
};
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
protected async cancel() {
this.close(MemberDialogResult.Canceled);
}
private close(result: MemberDialogResult) {
this.dialogRef.close(result);
}
}
function mapCollectionToAccessItemView(
collection: CollectionView,
accessSelection?: CollectionAccessSelectionView,
group?: GroupView
): AccessItemView {
return {
type: AccessItemType.Collection,
id: group ? `${collection.id}-${group.id}` : collection.id,
labelName: collection.name,
listName: collection.name,
readonly: group !== undefined,
readonlyPermission: accessSelection ? convertToPermission(accessSelection) : undefined,
viaGroupName: group?.name,
};
}
function mapGroupToAccessItemView(group: GroupView): AccessItemView {
return {
type: AccessItemType.Group,
id: group.id,
labelName: group.name,
listName: group.name,
};
}
function mapToAccessSelections(user: OrganizationUserAdminView): AccessItemValue[] {
if (user == undefined) {
return [];
}
return [].concat(
user.collections.map<AccessItemValue>((selection) => ({
id: selection.id,
type: AccessItemType.Collection,
permission: convertToPermission(selection),
}))
);
}
function mapToGroupAccessSelections(groups: string[]): AccessItemValue[] {
if (groups == undefined) {
return [];
}
return [].concat(
groups.map((groupId) => ({
id: groupId,
type: AccessItemType.Group,
}))
);
}
/**
* Strongly typed helper to open a UserDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export function openUserAddEditDialog(
dialogService: DialogService,
config: DialogConfig<MemberDialogParams>
) {
return dialogService.open<MemberDialogResult, MemberDialogParams>(MemberDialogComponent, config);
}

View File

@ -0,0 +1,15 @@
import { NgModule } from "@angular/core";
import { RadioButtonModule } from "@bitwarden/components";
import { SharedOrganizationModule } from "../../../shared";
import { MemberDialogComponent } from "./member-dialog.component";
import { NestedCheckboxComponent } from "./nested-checkbox.component";
@NgModule({
declarations: [MemberDialogComponent, NestedCheckboxComponent],
imports: [SharedOrganizationModule, RadioButtonModule],
exports: [MemberDialogComponent],
})
export class UserDialogModule {}

View File

@ -0,0 +1,29 @@
<div [formGroup]="checkboxes">
<input
type="checkbox"
[name]="pascalize(parentId)"
[id]="parentId"
[formControlName]="parentId"
[indeterminate]="parentIndeterminate"
/>
<label class="!tw-font-normal" [for]="parentId">
{{ parentId | i18n }}
</label>
<div class="tw-ml-6">
<ng-container *ngFor="let c of checkboxes.controls | keyvalue; trackBy: key">
<div class="" *ngIf="c.key != parentId">
<input
class=""
type="checkbox"
[name]="pascalize(c.key)"
[id]="c.key"
[formControl]="c.value"
(change)="onChildCheck()"
/>
<label class="!tw-font-normal" [for]="c.key">
{{ c.key | i18n }}
</label>
</div>
</ng-container>
</div>
</div>

View File

@ -0,0 +1,62 @@
import { KeyValue } from "@angular/common";
import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { Subject, takeUntil } from "rxjs";
import { Utils } from "@bitwarden/common/misc/utils";
@Component({
selector: "app-nested-checkbox",
templateUrl: "nested-checkbox.component.html",
})
export class NestedCheckboxComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
@Input() parentId: string;
@Input() checkboxes: FormGroup<Record<string, FormControl<boolean>>>;
@Output() onSavedUser = new EventEmitter();
@Output() onDeletedUser = new EventEmitter();
get parentIndeterminate() {
return (
this.children.some(([key, control]) => control.value == true) &&
!this.children.every(([key, control]) => control.value == true)
);
}
ngOnInit(): void {
this.checkboxes.controls[this.parentId].valueChanges
.pipe(takeUntil(this.destroy$))
.subscribe((value) => {
Object.values(this.checkboxes.controls).forEach((control) =>
control.setValue(value, { emitEvent: false })
);
});
}
private get parentCheckbox() {
return this.checkboxes.controls[this.parentId];
}
get children() {
return Object.entries(this.checkboxes.controls).filter(([key, value]) => key != this.parentId);
}
protected onChildCheck() {
const parentChecked = this.children.every(([key, value]) => value.value == true);
this.parentCheckbox.setValue(parentChecked, { emitEvent: false });
}
protected key(index: number, item: KeyValue<string, FormControl<boolean>>) {
return item.key;
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
pascalize(s: string) {
return Utils.camelToPascalCase(s);
}
}

View File

@ -0,0 +1 @@
export * from "./members.module";

View File

@ -0,0 +1,26 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { canAccessMembersTab } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard";
import { PeopleComponent } from "./people.component";
const routes: Routes = [
{
path: "",
component: PeopleComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "members",
organizationPermissions: canAccessMembersTab,
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MembersRoutingModule {}

View File

@ -0,0 +1,31 @@
import { NgModule } from "@angular/core";
import { LooseComponentsModule } from "../../shared";
import { SharedOrganizationModule } from "../shared";
import { BulkConfirmComponent } from "./components/bulk/bulk-confirm.component";
import { BulkRemoveComponent } from "./components/bulk/bulk-remove.component";
import { BulkRestoreRevokeComponent } from "./components/bulk/bulk-restore-revoke.component";
import { BulkStatusComponent } from "./components/bulk/bulk-status.component";
import { UserDialogModule } from "./components/member-dialog";
import { ResetPasswordComponent } from "./components/reset-password.component";
import { MembersRoutingModule } from "./members-routing.module";
import { PeopleComponent } from "./people.component";
@NgModule({
imports: [
SharedOrganizationModule,
LooseComponentsModule,
MembersRoutingModule,
UserDialogModule,
],
declarations: [
BulkConfirmComponent,
BulkRemoveComponent,
BulkRestoreRevokeComponent,
BulkStatusComponent,
PeopleComponent,
ResetPasswordComponent,
],
})
export class MembersModule {}

View File

@ -0,0 +1,321 @@
<div class="container page-content">
<div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
<h1>{{ "members" | i18n }}</h1>
<div class="tw-flex tw-items-center tw-justify-end tw-space-x-3">
<bit-toggle-group
[selected]="status"
(selectedChange)="filter($event)"
[attr.aria-label]="'memberStatusFilter' | i18n"
>
<bit-toggle [value]="null">
{{ "all" | i18n }} <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
</bit-toggle>
<bit-toggle [value]="userStatusType.Invited">
{{ "invited" | i18n }}
<span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
</bit-toggle>
<bit-toggle [value]="userStatusType.Accepted">
{{ "needsConfirmation" | i18n }}
<span bitBadge badgeType="info" *ngIf="acceptedCount">{{ acceptedCount }}</span>
</bit-toggle>
<bit-toggle [value]="userStatusType.Revoked">
{{ "revoked" | i18n }}
<span bitBadge badgeType="info" *ngIf="revokedCount">{{ revokedCount }}</span>
</bit-toggle>
</bit-toggle-group>
<app-search-input
class="tw-grow"
[(ngModel)]="searchText"
[placeholder]="'searchMembers' | i18n"
>
</app-search-input>
<button type="button" bitButton buttonType="primary" (click)="invite()">
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
{{ "inviteMember" | i18n }}
</button>
</div>
</div>
<ng-container *ngIf="loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container
*ngIf="
!loading &&
(isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
"
>
<p *ngIf="!searchedUsers.length">{{ "noMembersInList" | i18n }}</p>
<ng-container *ngIf="searchedUsers.length">
<app-callout
type="info"
title="{{ 'confirmUsers' | i18n }}"
icon="bwi bwi-check-circle"
*ngIf="showConfirmUsers"
>
{{ "usersNeedConfirmed" | i18n }}
</app-callout>
<bit-table
infinite-scroll
[infiniteScrollDistance]="1"
[infiniteScrollDisabled]="!isPaging()"
(scrolled)="loadMore()"
>
<ng-container header>
<tr>
<th bitCell class="tw-w-20">
<input
type="checkbox"
class="tw-mr-1"
(change)="selectAll($any($event.target).checked)"
id="selectAll"
/>
<label class="tw-mb-0 !tw-font-bold !tw-text-muted" for="selectAll">{{
"all" | i18n
}}</label>
</th>
<th bitCell>{{ "name" | i18n }}</th>
<th bitCell>{{ (organization.useGroups ? "groups" : "collections") | i18n }}</th>
<th bitCell>{{ "role" | i18n }}</th>
<th bitCell>{{ "policies" | i18n }}</th>
<th bitCell class="tw-w-10">
<button
[bitMenuTriggerFor]="headerMenu"
type="button"
bitIconButton="bwi-ellipsis-v"
size="small"
appA11yTitle="{{ 'options' | i18n }}"
></button>
<bit-menu #headerMenu>
<button type="button" bitMenuItem (click)="bulkReinvite()">
<i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
{{ "reinviteSelected" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="bulkConfirm()"
*ngIf="showBulkConfirmUsers"
>
<span class="tw-text-success">
<i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
{{ "confirmSelected" | i18n }}
</span>
</button>
<button type="button" bitMenuItem (click)="bulkRestore()">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
{{ "restoreAccess" | i18n }}
</button>
<button type="button" bitMenuItem (click)="bulkRevoke()">
<i class="bwi bwi-fw bwi-minus-circle" aria-hidden="true"></i>
{{ "revokeAccess" | i18n }}
</button>
<button type="button" bitMenuItem (click)="bulkRemove()">
<span class="tw-text-danger">
<i aria-hidden="true" class="bwi bwi-close"></i>
{{ "remove" | i18n }}
</span>
</button>
</bit-menu>
</th>
</tr>
</ng-container>
<ng-template body>
<tr bitRow *ngFor="let u of searchedUsers" alignContent="middle">
<td bitCell (click)="checkUser(u)">
<input type="checkbox" [(ngModel)]="$any(u).checked" />
</td>
<td bitCell (click)="edit(u)" class="tw-cursor-pointer">
<div class="tw-flex tw-items-center">
<bit-avatar
size="small"
[text]="u | userName"
[id]="u.userId"
class="tw-mr-3"
></bit-avatar>
<div class="tw-flex tw-flex-col">
<div class="tw-font-semibold tw-text-primary-500">
{{ u.name ?? u.email }}
<span
bitBadge
class="tw-text-xs"
badgeType="secondary"
*ngIf="u.status === userStatusType.Invited"
>{{ "invited" | i18n }}</span
>
<span
bitBadge
class="tw-text-xs"
badgeType="warning"
*ngIf="u.status === userStatusType.Accepted"
>{{ "needsConfirmation" | i18n }}</span
>
<span
bitBadge
class="tw-text-xs"
badgeType="secondary"
*ngIf="u.status === userStatusType.Revoked"
>{{ "revoked" | i18n }}</span
>
</div>
<div class="tw-text-sm tw-text-muted" *ngIf="u.name">
{{ u.email }}
</div>
</div>
</div>
</td>
<td
bitCell
(click)="edit(u, organization.useGroups ? memberTab.Groups : memberTab.Collections)"
class="tw-cursor-pointer"
>
<bit-badge-list
*ngIf="organization.useGroups || !u.accessAll"
[items]="organization.useGroups ? u.groupNames : u.collectionNames"
[maxItems]="3"
badgeType="secondary"
></bit-badge-list>
<span *ngIf="!organization.useGroups && u.accessAll">{{ "all" | i18n }}</span>
</td>
<td
bitCell
(click)="edit(u, memberTab.Role)"
class="tw-cursor-pointer tw-text-sm tw-text-muted"
>
{{ u.type | userType }}
</td>
<td bitCell class="tw-text-muted">
<ng-container *ngIf="u.twoFactorEnabled">
<i
class="bwi bwi-lock"
title="{{ 'userUsingTwoStep' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "userUsingTwoStep" | i18n }}</span>
</ng-container>
<ng-container *ngIf="showEnrolledStatus($any(u))">
<i
class="bwi bwi-key"
title="{{ 'enrolledPasswordReset' | i18n }}"
aria-hidden="true"
></i>
<span class="tw-sr-only">{{ "enrolledPasswordReset" | i18n }}</span>
</ng-container>
</td>
<td bitCell>
<button
[bitMenuTriggerFor]="rowMenu"
type="button"
bitIconButton="bwi-ellipsis-v"
size="small"
appA11yTitle="{{ 'options' | i18n }}"
></button>
<bit-menu #rowMenu>
<button
type="button"
bitMenuItem
(click)="reinvite(u)"
*ngIf="u.status === userStatusType.Invited"
>
<i aria-hidden="true" class="bwi bwi-envelope"></i>
{{ "resendInvitation" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="confirm(u)"
*ngIf="u.status === userStatusType.Accepted"
>
<span class="tw-text-success">
<i aria-hidden="true" class="bwi bwi-check"></i> {{ "confirm" | i18n }}
</span>
</button>
<bit-menu-divider
*ngIf="
u.status === userStatusType.Accepted || u.status === userStatusType.Invited
"
></bit-menu-divider>
<button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
<i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="edit(u, memberTab.Groups)"
*ngIf="organization.useGroups"
>
<i aria-hidden="true" class="bwi bwi-users"></i> {{ "groups" | i18n }}
</button>
<button type="button" bitMenuItem (click)="edit(u, memberTab.Collections)">
<i aria-hidden="true" class="bwi bwi-collection"></i> {{ "collections" | i18n }}
</button>
<bit-menu-divider></bit-menu-divider>
<button
type="button"
bitMenuItem
(click)="events(u)"
*ngIf="organization.useEvents && u.status === userStatusType.Confirmed"
>
<i aria-hidden="true" class="bwi bwi-file-text"></i> {{ "eventLogs" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="resetPassword(u)"
*ngIf="allowResetPassword(u)"
>
<i aria-hidden="true" class="bwi bwi-key"></i> {{ "resetPassword" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="restore(u)"
*ngIf="u.status === userStatusType.Revoked"
>
<i aria-hidden="true" class="bwi bwi-plus-circle"></i>
{{ "restoreAccess" | i18n }}
</button>
<button
type="button"
bitMenuItem
(click)="revoke(u)"
*ngIf="u.status !== userStatusType.Revoked"
>
<i aria-hidden="true" class="bwi bwi-minus-circle"></i>
{{ "revokeAccess" | i18n }}
</button>
<button type="button" bitMenuItem (click)="remove(u)">
<span class="tw-text-danger">
<i aria-hidden="true" class="bwi bwi-close"></i> {{ "remove" | i18n }}
</span>
</button>
</bit-menu>
</td>
</tr>
</ng-template>
</bit-table>
</ng-container>
</ng-container>
<ng-template #addEdit></ng-template>
<ng-template #groupsTemplate></ng-template>
<ng-template #eventsTemplate></ng-template>
<ng-template #confirmTemplate></ng-template>
<ng-template #resetPasswordTemplate></ng-template>
<ng-template #bulkStatusTemplate></ng-template>
<ng-template #bulkConfirmTemplate></ng-template>
<ng-template #bulkRemoveTemplate></ng-template>
</div>

View File

@ -1,11 +1,12 @@
import { Component, OnDestroy, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { combineLatest, concatMap, Subject, takeUntil } from "rxjs";
import { combineLatest, concatMap, lastValueFrom, Subject, takeUntil } from "rxjs";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.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";
@ -27,32 +28,39 @@ import { OrganizationUserStatusType } from "@bitwarden/common/enums/organization
import { OrganizationUserType } from "@bitwarden/common/enums/organizationUserType";
import { PolicyType } from "@bitwarden/common/enums/policyType";
import { ProductType } from "@bitwarden/common/enums/productType";
import { CollectionData } from "@bitwarden/common/models/data/collection.data";
import { Collection } from "@bitwarden/common/models/domain/collection";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { OrganizationKeysRequest } from "@bitwarden/common/models/request/organization-keys.request";
import { CollectionDetailsResponse } from "@bitwarden/common/models/response/collection.response";
import { ListResponse } from "@bitwarden/common/models/response/list.response";
import { DialogService } from "@bitwarden/components";
import { BasePeopleComponent } from "../../common/base.people.component";
import { GroupService } from "../core";
import { OrganizationUserView } from "../core/views/organization-user.view";
import { EntityEventsComponent } from "../manage/entity-events.component";
import { OrgUpgradeDialogComponent } from "../manage/org-upgrade-dialog/org-upgrade-dialog.component";
import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
import { BulkRestoreRevokeComponent } from "./bulk/bulk-restore-revoke.component";
import { BulkStatusComponent } from "./bulk/bulk-status.component";
import { EntityEventsComponent } from "./entity-events.component";
import { OrgUpgradeDialogComponent } from "./org-upgrade-dialog/org-upgrade-dialog.component";
import { ResetPasswordComponent } from "./reset-password.component";
import { UserAddEditComponent } from "./user-add-edit.component";
import { UserGroupsComponent } from "./user-groups.component";
import { BulkConfirmComponent } from "./components/bulk/bulk-confirm.component";
import { BulkRemoveComponent } from "./components/bulk/bulk-remove.component";
import { BulkRestoreRevokeComponent } from "./components/bulk/bulk-restore-revoke.component";
import { BulkStatusComponent } from "./components/bulk/bulk-status.component";
import {
MemberDialogResult,
MemberDialogTab,
openUserAddEditDialog,
} from "./components/member-dialog";
import { ResetPasswordComponent } from "./components/reset-password.component";
@Component({
selector: "app-org-people",
templateUrl: "people.component.html",
})
export class PeopleComponent
extends BasePeopleComponent<OrganizationUserUserDetailsResponse>
extends BasePeopleComponent<OrganizationUserView>
implements OnInit, OnDestroy
{
@ViewChild("addEdit", { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
@ViewChild("groupsTemplate", { read: ViewContainerRef, static: true })
groupsModalRef: ViewContainerRef;
@ViewChild("eventsTemplate", { read: ViewContainerRef, static: true })
@ -70,6 +78,7 @@ export class PeopleComponent
userType = OrganizationUserType;
userStatusType = OrganizationUserStatusType;
memberTab = MemberDialogTab;
organization: Organization;
status: OrganizationUserStatusType = null;
@ -95,7 +104,9 @@ export class PeopleComponent
private organizationService: OrganizationService,
private organizationApiService: OrganizationApiServiceAbstraction,
private organizationUserService: OrganizationUserService,
private dialogService: DialogService
private dialogService: DialogService,
private groupService: GroupService,
private collectionService: CollectionService
) {
super(
apiService,
@ -165,12 +176,68 @@ export class PeopleComponent
}
async load() {
super.load();
await super.load();
}
getUsers(): Promise<ListResponse<OrganizationUserUserDetailsResponse>> {
return this.organizationUserService.getAllUsers(this.organization.id);
async getUsers(): Promise<OrganizationUserView[]> {
let groupsPromise: Promise<Map<string, string>>;
let collectionsPromise: Promise<Map<string, string>>;
// We don't need both groups and collections for the table, so only load one
const userPromise = this.organizationUserService.getAllUsers(this.organization.id, {
includeGroups: this.organization.useGroups,
includeCollections: !this.organization.useGroups,
});
// Depending on which column is displayed, we need to load the group/collection names
if (this.organization.useGroups) {
groupsPromise = this.getGroupNameMap();
} else {
collectionsPromise = this.getCollectionNameMap();
}
const [usersResponse, groupNamesMap, collectionNamesMap] = await Promise.all([
userPromise,
groupsPromise,
collectionsPromise,
]);
return usersResponse.data?.map<OrganizationUserView>((r) => {
const userView = OrganizationUserView.fromResponse(r);
userView.groupNames = userView.groups
.map((g) => groupNamesMap.get(g))
.sort(this.i18nService.collator?.compare);
userView.collectionNames = userView.collections
.map((c) => collectionNamesMap.get(c.id))
.sort(this.i18nService.collator?.compare);
return userView;
});
}
async getGroupNameMap(): Promise<Map<string, string>> {
const groups = await this.groupService.getAll(this.organization.id);
const groupNameMap = new Map<string, string>();
groups.forEach((g) => groupNameMap.set(g.id, g.name));
return groupNameMap;
}
/**
* Retrieve a map of all collection IDs <-> names for the organization.
*/
async getCollectionNameMap() {
const collectionMap = new Map<string, string>();
const response = await this.apiService.getCollections(this.organization.id);
const collections = response.data.map(
(r) => new Collection(new CollectionData(r as CollectionDetailsResponse))
);
const decryptedCollections = await this.collectionService.decryptMany(collections);
decryptedCollections.forEach((c) => collectionMap.set(c.id, c.name));
return collectionMap;
}
deleteUser(id: string): Promise<void> {
@ -189,10 +256,7 @@ export class PeopleComponent
return this.organizationUserService.postOrganizationUserReinvite(this.organization.id, id);
}
async confirmUser(
user: OrganizationUserUserDetailsResponse,
publicKey: Uint8Array
): Promise<void> {
async confirmUser(user: OrganizationUserView, publicKey: Uint8Array): Promise<void> {
const orgKey = await this.cryptoService.getOrgKey(this.organization.id);
const key = await this.cryptoService.rsaEncrypt(orgKey.key, publicKey.buffer);
const request = new OrganizationUserConfirmRequest();
@ -204,7 +268,7 @@ export class PeopleComponent
);
}
allowResetPassword(orgUser: OrganizationUserUserDetailsResponse): boolean {
allowResetPassword(orgUser: OrganizationUserView): boolean {
// Hierarchy check
let callingUserHasPermission = false;
@ -242,7 +306,7 @@ export class PeopleComponent
);
}
async edit(user: OrganizationUserUserDetailsResponse) {
async edit(user: OrganizationUserView, initialTab: MemberDialogTab = MemberDialogTab.Role) {
// Invite User: Add Flow
// Click on user email: Edit Flow
@ -274,52 +338,27 @@ export class PeopleComponent
return;
}
const [modal] = await this.modalService.openViewRef(
UserAddEditComponent,
this.addEditModalRef,
(comp) => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organization.id;
comp.organizationUserId = user?.id || null;
comp.usesKeyConnector = user?.usesKeyConnector;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onSavedUser.subscribe(() => {
modal.close();
this.load();
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onDeletedUser.subscribe(() => {
modal.close();
this.removeUser(user);
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onRevokedUser.subscribe(() => {
modal.close();
this.load();
});
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onRestoredUser.subscribe(() => {
modal.close();
this.load();
});
}
);
}
const dialog = openUserAddEditDialog(this.dialogService, {
data: {
name: this.userNamePipe.transform(user),
organizationId: this.organization.id,
organizationUserId: user != null ? user.id : null,
usesKeyConnector: user?.usesKeyConnector,
initialTab: initialTab,
},
});
async groups(user: OrganizationUserUserDetailsResponse) {
const [modal] = await this.modalService.openViewRef(
UserGroupsComponent,
this.groupsModalRef,
(comp) => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organization.id;
comp.organizationUserId = user != null ? user.id : null;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
comp.onSavedUser.subscribe(() => {
modal.close();
});
}
);
const result = await lastValueFrom(dialog.closed);
switch (result) {
case MemberDialogResult.Deleted:
this.removeUser(user);
break;
case MemberDialogResult.Saved:
case MemberDialogResult.Revoked:
case MemberDialogResult.Restored:
this.load();
break;
}
}
async bulkRemove() {
@ -418,7 +457,7 @@ export class PeopleComponent
await this.load();
}
async events(user: OrganizationUserUserDetailsResponse) {
async events(user: OrganizationUserView) {
await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, (comp) => {
comp.name = this.userNamePipe.transform(user);
comp.organizationId = this.organization.id;
@ -428,7 +467,7 @@ export class PeopleComponent
});
}
async resetPassword(user: OrganizationUserUserDetailsResponse) {
async resetPassword(user: OrganizationUserView) {
const [modal] = await this.modalService.openViewRef(
ResetPasswordComponent,
this.resetPasswordModalRef,
@ -447,7 +486,7 @@ export class PeopleComponent
);
}
protected async removeUserConfirmationDialog(user: OrganizationUserUserDetailsResponse) {
protected async removeUserConfirmationDialog(user: OrganizationUserView) {
const warningMessage = user.usesKeyConnector
? this.i18nService.t("removeUserConfirmationKeyConnector")
: this.i18nService.t("removeOrgUserConfirmation");
@ -462,8 +501,8 @@ export class PeopleComponent
}
private async showBulkStatus(
users: OrganizationUserUserDetailsResponse[],
filteredUsers: OrganizationUserUserDetailsResponse[],
users: OrganizationUserView[],
filteredUsers: OrganizationUserView[],
request: Promise<ListResponse<OrganizationUserBulkResponse>>,
successfullMessage: string
) {

View File

@ -3,11 +3,12 @@ import { RouterModule, Routes } from "@angular/router";
import { AuthGuard } from "@bitwarden/angular/guards/auth.guard";
import {
canAccessGroupsTab,
canAccessManageTab,
canAccessMembersTab,
canAccessOrgAdmin,
canManageCollections,
canAccessGroupsTab,
canAccessMembersTab,
canAccessVaultTab,
canAccessReportingTab,
canAccessSettingsTab,
} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { Organization } from "@bitwarden/common/models/domain/organization";
@ -17,7 +18,6 @@ import { OrganizationLayoutComponent } from "./layouts/organization-layout.compo
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";
const routes: Routes = [
@ -29,7 +29,15 @@ const routes: Routes = [
organizationPermissions: canAccessOrgAdmin,
},
children: [
{ path: "", pathMatch: "full", redirectTo: "vault" },
{
path: "",
pathMatch: "full",
canActivate: [OrganizationRedirectGuard],
data: {
autoRedirectCallback: getOrganizationRoute,
},
children: [], // This is required to make the auto redirect work, },
},
{
path: "vault",
loadChildren: () => VaultModule,
@ -39,47 +47,27 @@ const routes: Routes = [
loadChildren: () => import("./settings").then((m) => m.OrganizationSettingsModule),
},
{
path: "manage",
component: ManageComponent,
path: "members",
loadChildren: () => import("./members").then((m) => m.MembersModule),
},
{
path: "groups",
component: GroupsComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
organizationPermissions: canAccessManageTab,
titleId: "groups",
organizationPermissions: canAccessGroupsTab,
},
},
{
path: "manage",
component: ManageComponent,
children: [
{
path: "",
pathMatch: "full",
canActivate: [OrganizationRedirectGuard],
data: {
autoRedirectCallback: getManageRoute,
},
children: [], // This is required to make the auto redirect work
},
{
path: "collections",
component: CollectionsComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "collections",
organizationPermissions: canManageCollections,
},
},
{
path: "groups",
component: GroupsComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "groups",
organizationPermissions: canAccessGroupsTab,
},
},
{
path: "members",
component: PeopleComponent,
canActivate: [OrganizationPermissionsGuard],
data: {
titleId: "members",
organizationPermissions: canAccessMembersTab,
},
},
],
@ -100,16 +88,22 @@ const routes: Routes = [
},
];
function getManageRoute(organization: Organization): string {
if (organization.canManageUsers) {
function getOrganizationRoute(organization: Organization): string {
if (canAccessVaultTab(organization)) {
return "vault";
}
if (canAccessMembersTab(organization)) {
return "members";
}
if (organization.canViewAssignedCollections || organization.canViewAllCollections) {
return "collections";
}
if (organization.canManageGroups) {
if (canAccessGroupsTab(organization)) {
return "groups";
}
if (canAccessReportingTab(organization)) {
return "reporting";
}
if (canAccessSettingsTab(organization)) {
return "settings";
}
return undefined;
}

View File

@ -1,12 +1,20 @@
import { NgModule } from "@angular/core";
import { AccessSelectorModule } from "./components/access-selector";
import { CoreOrganizationModule } from "./core";
import { GroupAddEditComponent } from "./manage/group-add-edit.component";
import { GroupsComponent } from "./manage/groups.component";
import { OrgUpgradeDialogComponent } from "./manage/org-upgrade-dialog/org-upgrade-dialog.component";
import { OrganizationsRoutingModule } from "./organization-routing.module";
import { SharedOrganizationModule } from "./shared";
import { AccessSelectorModule } from "./shared/components/access-selector";
@NgModule({
imports: [SharedOrganizationModule, AccessSelectorModule, OrganizationsRoutingModule],
declarations: [OrgUpgradeDialogComponent],
imports: [
SharedOrganizationModule,
AccessSelectorModule,
CoreOrganizationModule,
OrganizationsRoutingModule,
],
declarations: [GroupsComponent, GroupAddEditComponent, OrgUpgradeDialogComponent],
})
export class OrganizationModule {}

View File

@ -1,7 +1,13 @@
<div class="tw-flex">
<bit-form-field *ngIf="permissionMode == 'edit'">
<bit-label>{{ "permission" | i18n }}</bit-label>
<!--
Built-in select height differs between browsers, this fix makes sure we match bit-multi-select height.
We might want to reconsider this fix when/if we implement
[CL-78] [Improvement] Completely restyled selects (https://bitwarden.atlassian.net/browse/CL-78)
-->
<select
class="tw-h-[35px]"
bitInput
[disabled]="disabled"
[(ngModel)]="initialPermission"
@ -33,11 +39,13 @@
<tr>
<th bitCell>{{ columnHeader }}</th>
<th bitCell id="permissionColHeading" *ngIf="permissionMode != 'hidden'">
{{ "permission" | i18n }}
<div class="tw-border tw-border-solid tw-border-transparent">
{{ "permission" | i18n }}
</div>
</th>
<th bitCell id="roleColHeading" *ngIf="showMemberRoles">{{ "role" | i18n }}</th>
<th bitCell id="groupColHeading" *ngIf="showGroupColumn">{{ "group" | i18n }}</th>
<th bitCell style="width: 50px"></th>
<th bitCell class="tw-w-20"></th>
</tr>
</ng-container>
<ng-template body formArrayName="items">
@ -78,23 +86,31 @@
<label class="sr-only" [for]="'permission' + i"
>{{ item.labelName }} {{ "permission" | i18n }}</label
>
<select
bitInput
class="-tw-ml-1 tw-max-w-36 tw-overflow-ellipsis !tw-rounded tw-border-0 !tw-bg-transparent tw-pl-0 tw-font-bold"
formControlName="permission"
[id]="'permission' + i"
(blur)="handleBlur()"
>
<option *ngFor="let p of permissionList" [value]="p.perm">
{{ p.labelId | i18n }}
</option>
</select>
<div class="tw-relative tw-inline-block">
<select
bitInput
class="tw-apperance-none -tw-ml-3 tw-max-w-40 tw-appearance-none tw-overflow-ellipsis !tw-rounded tw-border-transparent !tw-bg-transparent tw-pr-6 tw-font-bold hover:tw-border-primary-700"
formControlName="permission"
[id]="'permission' + i"
(blur)="handleBlur()"
>
<option *ngFor="let p of permissionList" [value]="p.perm">
{{ p.labelId | i18n }}
</option>
</select>
<label
[for]="'permission' + i"
class="tw-absolute tw-inset-y-0 tw-right-4 tw-mb-0 tw-block tw-flex tw-items-center"
>
<i class="bwi bwi-sm bwi-angle-down tw-leading-[0]"></i>
</label>
</div>
</ng-container>
<ng-template #readOnlyPerm>
<div
*ngIf="item.accessAllItems"
class="tw-max-w-36 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-font-bold tw-text-muted"
class="tw-max-w-40 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-border tw-border-solid tw-border-transparent tw-font-bold tw-text-muted"
[appA11yTitle]="accessAllLabelId(item) | i18n"
>
{{ "canEdit" | i18n }}
@ -103,7 +119,7 @@
<div
*ngIf="item.readonly"
class="tw-max-w-36 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-font-bold tw-text-muted"
class="tw-max-w-40 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-font-bold tw-text-muted"
[title]="permissionLabelId(item.readonlyPermission) | i18n"
>
{{ permissionLabelId(item.readonlyPermission) | i18n }}
@ -119,7 +135,7 @@
{{ $any(item).viaGroupName ?? "-" }}
</td>
<td bitCell>
<td bitCell class="tw-text-right">
<button
*ngIf="!item.readonly"
type="button"

View File

@ -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";

View File

@ -229,6 +229,12 @@ export class AccessSelectorComponent implements ControlValueAccessor, OnInit, On
if (!this.notifyOnChange || this.pauseChangeNotification) {
return;
}
// Disabled form arrays emit values for disabled controls, we override this to emit an empty array to avoid
// emitting values for disabled controls that are "readonly" in the table
if (this.selectionList.formArray.disabled) {
this.notifyOnChange([]);
return;
}
this.notifyOnChange(v);
});
}

View File

@ -1,8 +1,8 @@
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";
import { SelectItemView } from "@bitwarden/components";
import { CollectionAccessSelectionView } from "../../../core";
/**
* Permission options that replace/correspond with readOnly and hidePassword server fields.
@ -75,11 +75,11 @@ export type AccessItemValue = {
};
/**
* Converts the older SelectionReadOnly interface to one of the new CollectionPermission values
* Converts the CollectionAccessSelectionView interface to one of the new CollectionPermission values
* for the dropdown in the AccessSelectorComponent
* @param value
*/
export const convertToPermission = (value: SelectionReadOnlyResponse) => {
export const convertToPermission = (value: CollectionAccessSelectionView) => {
if (value.readOnly) {
return value.hidePasswords ? CollectionPermission.ViewExceptPass : CollectionPermission.View;
} else {
@ -88,16 +88,16 @@ export const convertToPermission = (value: SelectionReadOnlyResponse) => {
};
/**
* Converts an AccessItemValue back into a SelectionReadOnly class using the CollectionPermission
* Converts an AccessItemValue back into a CollectionAccessView 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)
);
export const convertToSelectionView = (value: AccessItemValue) => {
return new CollectionAccessSelectionView({
id: value.id,
readOnly: readOnly(value.permission),
hidePasswords: hidePassword(value.permission),
});
};
const readOnly = (perm: CollectionPermission) =>

View File

@ -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";

View File

@ -16,7 +16,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";

View File

@ -0,0 +1,94 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog [disablePadding]="!loading">
<span bitDialogTitle>
<ng-container *ngIf="editMode">
{{ "editCollection" | i18n }}
<span class="tw-text-sm tw-normal-case tw-text-muted" *ngIf="!loading">{{
collection.name
}}</span>
</ng-container>
<ng-container *ngIf="!editMode">
{{ "newCollection" | i18n }}
</ng-container>
</span>
<div bitDialogContent>
<ng-container *ngIf="loading" #spinner>
<i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
</ng-container>
<bit-tab-group *ngIf="!loading" [selectedIndex]="tabIndex">
<bit-tab label="{{ 'collectionInfo' | i18n }}">
<bit-form-field>
<bit-label>{{ "name" | i18n }}</bit-label>
<input bitInput formControlName="name" required />
</bit-form-field>
<bit-form-field>
<bit-label>{{ "externalId" | i18n }}</bit-label>
<input bitInput formControlName="externalId" />
<bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>
</bit-form-field>
<bit-form-field>
<bit-label>{{ "nestCollectionUnder" | i18n }}</bit-label>
<select bitInput formControlName="parent">
<option [ngValue]="null">-</option>
<option *ngIf="deletedParentName" disabled [ngValue]="deletedParentName">
{{ deletedParentName }} ({{ "deleted" | i18n }})
</option>
<option *ngFor="let collection of nestOptions" [ngValue]="collection.name">
{{ collection.name }}
</option>
</select>
</bit-form-field>
</bit-tab>
<bit-tab label="{{ 'access' | i18n }}">
<bit-access-selector
*ngIf="organization.useGroups"
[permissionMode]="PermissionMode.Edit"
formControlName="access"
[items]="accessItems"
[columnHeader]="'groupAndMemberColumnHeader' | i18n"
[selectorLabelText]="'selectGroupsAndMembers' | i18n"
[selectorHelpText]="'userPermissionOverrideHelper' | i18n"
[emptySelectionText]="'noMembersOrGroupsAdded' | i18n"
></bit-access-selector>
<bit-access-selector
*ngIf="!organization.useGroups"
[permissionMode]="PermissionMode.Edit"
formControlName="access"
[items]="accessItems"
[columnHeader]="'memberColumnHeader' | i18n"
[selectorLabelText]="'selectMembers' | i18n"
[emptySelectionText]="'noMembersAdded' | i18n"
></bit-access-selector>
</bit-tab>
</bit-tab-group>
</div>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
{{ "save" | i18n }}
</button>
<button
type="button"
bitButton
bitFormButton
buttonType="secondary"
(click)="cancel()"
[disabled]="loading"
>
{{ "cancel" | i18n }}
</button>
<button
*ngIf="editMode && organization?.canDeleteAssignedCollections"
type="button"
bitIconButton="bwi-trash"
buttonType="danger"
class="tw-ml-auto"
bitFormButton
[appA11yTitle]="'delete' | i18n"
[bitAction]="delete"
[disabled]="loading"
></button>
</div>
</bit-dialog>
</form>

View File

@ -0,0 +1,293 @@
import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { combineLatest, of, shareReplay, Subject, switchMap, takeUntil } from "rxjs";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { OrganizationUserService } from "@bitwarden/common/abstractions/organization-user/organization-user.service";
import { OrganizationUserUserDetailsResponse } from "@bitwarden/common/abstractions/organization-user/responses";
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 { CollectionView } from "@bitwarden/common/src/models/view/collection.view";
import { BitValidators, DialogService } from "@bitwarden/components";
import {
CollectionAdminService,
CollectionAdminView,
GroupService,
GroupView,
} from "../../../core";
import {
AccessItemType,
AccessItemValue,
AccessItemView,
convertToPermission,
convertToSelectionView,
PermissionMode,
} from "../access-selector";
export enum CollectionDialogTabType {
Info = 0,
Access = 1,
}
export interface CollectionDialogParams {
collectionId?: string;
organizationId: string;
initialTab?: CollectionDialogTabType;
parentCollectionId?: 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<void>();
protected tabIndex: CollectionDialogTabType;
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[]],
});
protected PermissionMode = PermissionMode;
constructor(
@Inject(DIALOG_DATA) private params: CollectionDialogParams,
private formBuilder: FormBuilder,
private dialogRef: DialogRef<CollectionDialogResult>,
private organizationService: OrganizationService,
private groupService: GroupService,
private collectionService: CollectionAdminService,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private organizationUserService: OrganizationUserService
) {
this.tabIndex = params.initialTab ?? CollectionDialogTabType.Info;
}
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.organizationUserService.getAllUsers(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;
const parent = collections.find((c) => c.id === this.params.parentCollectionId);
this.formGroup.patchValue({ parent: parent?.name ?? null });
}
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.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(
this.editMode ? "editedCollectionId" : "createdCollectionId",
collectionView.name
)
);
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.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedCollectionId", this.collection?.name)
);
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<AccessItemValue>((selection) => ({
id: selection.id,
type: AccessItemType.Group,
permission: convertToPermission(selection),
})),
collectionDetails.users.map<AccessItemValue>((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,
config: DialogConfig<CollectionDialogParams>
) {
return dialogService.open<CollectionDialogResult, CollectionDialogParams>(
CollectionDialogComponent,
config
);
}

View File

@ -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 {}

View File

@ -0,0 +1,2 @@
export * from "./collection-dialog.component";
export * from "./collection-dialog.module";

View File

@ -1 +1,2 @@
export * from "./shared-organization.module";
export * from "./components/collection-dialog";

View File

@ -1,12 +1,14 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../../shared";
import { SharedModule } from "../../shared/shared.module";
import { AccessSelectorModule } from "./components/access-selector";
import { CollectionDialogModule } from "./components/collection-dialog";
import { SearchInputComponent } from "./components/search-input/search-input.component";
@NgModule({
imports: [SharedModule],
imports: [SharedModule, CollectionDialogModule, AccessSelectorModule],
declarations: [SearchInputComponent],
exports: [SharedModule, SearchInputComponent],
exports: [SharedModule, CollectionDialogModule, AccessSelectorModule, SearchInputComponent],
})
export class SharedOrganizationModule {}

View File

@ -0,0 +1,13 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../../../shared";
import { PipesModule } from "../../../vault/pipes/pipes.module";
import { CollectionNameBadgeComponent } from "./collection-name.badge.component";
@NgModule({
imports: [SharedModule, PipesModule],
declarations: [CollectionNameBadgeComponent],
exports: [CollectionNameBadgeComponent],
})
export class CollectionBadgeModule {}

View File

@ -0,0 +1,6 @@
<ng-container *ngFor="let c of shownCollections">
<span bitBadge badgeType="secondary">{{ c | collectionNameFromId: collections }}</span>
</ng-container>
<ng-container *ngIf="showXMore">
<span bitBadge badgeType="secondary">+ {{ xMoreCount }} more</span>
</ng-container>

View File

@ -0,0 +1,24 @@
import { Component, Input } from "@angular/core";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
@Component({
selector: "app-collection-badge",
templateUrl: "collection-name-badge.component.html",
})
export class CollectionNameBadgeComponent {
@Input() collectionIds: string[];
@Input() collections: CollectionView[];
get shownCollections(): string[] {
return this.showXMore ? this.collectionIds.slice(0, 2) : this.collectionIds;
}
get showXMore(): boolean {
return this.collectionIds.length > 3;
}
get xMoreCount(): number {
return this.collectionIds.length - 2;
}
}

View File

@ -0,0 +1,13 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../../../shared";
import { PipesModule } from "../../../vault/pipes/pipes.module";
import { GroupNameBadgeComponent } from "./group-name-badge.component";
@NgModule({
imports: [SharedModule, PipesModule],
declarations: [GroupNameBadgeComponent],
exports: [GroupNameBadgeComponent],
})
export class GroupBadgeModule {}

View File

@ -0,0 +1 @@
<bit-badge-list [items]="groupNames" [maxItems]="3" badgeType="secondary"></bit-badge-list>

View File

@ -0,0 +1,27 @@
import { Component, Input, OnChanges } from "@angular/core";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { SelectionReadOnlyRequest } from "@bitwarden/common/models/request/selection-read-only.request";
import { GroupView } from "../../core";
@Component({
selector: "app-group-badge",
templateUrl: "group-name-badge.component.html",
})
export class GroupNameBadgeComponent implements OnChanges {
@Input() selectedGroups: SelectionReadOnlyRequest[];
@Input() allGroups: GroupView[];
protected groupNames: string[] = [];
constructor(private i18nService: I18nService) {}
ngOnChanges() {
this.groupNames = this.selectedGroups
.map((g) => {
return this.allGroups.find((o) => o.id === g.id)?.name;
})
.sort(this.i18nService.collator.compare);
}
}

View File

@ -1,28 +1,77 @@
import { Component } from "@angular/core";
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
import { firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { VaultFilterComponent as BaseVaultFilterComponent } from "../../../vault/vault-filter/vault-filter.component";
import { VaultFilterComponent as BaseVaultFilterComponent } from "../../../vault/vault-filter/components/vault-filter.component";
import {
VaultFilterList,
VaultFilterType,
} from "../../../vault/vault-filter/shared/models/vault-filter-section.type";
import { CollectionFilter } from "../../../vault/vault-filter/shared/models/vault-filter.type";
@Component({
selector: "app-organization-vault-filter",
templateUrl: "../../../vault/vault-filter/vault-filter.component.html",
templateUrl: "../../../vault/vault-filter/components/vault-filter.component.html",
})
export class VaultFilterComponent extends BaseVaultFilterComponent {
hideOrganizations = true;
hideFavorites = true;
hideFolders = true;
organization: Organization;
async initCollections() {
if (this.organization.canEditAnyCollection) {
return await this.vaultFilterService.buildAdminCollections(this.organization.id);
export class VaultFilterComponent extends BaseVaultFilterComponent implements OnInit, OnDestroy {
@Input() set organization(value: Organization) {
if (value && value !== this._organization) {
this._organization = value;
this.vaultFilterService.setOrganizationFilter(this._organization);
}
return await this.vaultFilterService.buildCollections(this.organization.id);
}
_organization: Organization;
protected destroy$: Subject<void>;
async ngOnInit() {
this.filters = await this.buildAllFilters();
if (!this.activeFilter.selectedCipherTypeNode) {
this.activeFilter.resetFilter();
this.activeFilter.selectedCollectionNode =
(await this.getDefaultFilter()) as TreeNode<CollectionFilter>;
}
this.isLoaded = true;
}
async reloadCollectionsAndFolders() {
this.collections = await this.initCollections();
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
protected loadSubscriptions() {
this.vaultFilterService.filteredCollections$
.pipe(
switchMap(async (collections) => {
this.removeInvalidCollectionSelection(collections);
}),
takeUntil(this.destroy$)
)
.subscribe();
}
protected async removeInvalidCollectionSelection(collections: CollectionView[]) {
if (this.activeFilter.selectedCollectionNode) {
if (!collections.some((f) => f.id === this.activeFilter.collectionId)) {
this.activeFilter.resetFilter();
this.activeFilter.selectedCollectionNode =
(await this.getDefaultFilter()) as TreeNode<CollectionFilter>;
this.applyVaultFilter(this.activeFilter);
}
}
}
async buildAllFilters(): Promise<VaultFilterList> {
const builderFilter = {} as VaultFilterList;
builderFilter.typeFilter = await this.addTypeFilter(["favorites"]);
builderFilter.collectionFilter = await this.addCollectionFilter();
builderFilter.trashFilter = await this.addTrashFilter();
return builderFilter;
}
async getDefaultFilter(): Promise<TreeNode<VaultFilterType>> {
return await firstValueFrom(this.filters?.collectionFilter.data$);
}
}

View File

@ -1,12 +1,20 @@
import { NgModule } from "@angular/core";
import { VaultFilterService as VaultFilterServiceAbstraction } from "../../../vault/vault-filter/services/abstractions/vault-filter.service";
import { VaultFilterSharedModule } from "../../../vault/vault-filter/shared/vault-filter-shared.module";
import { VaultFilterComponent } from "./vault-filter.component";
import { VaultFilterService } from "./vault-filter.service";
@NgModule({
imports: [VaultFilterSharedModule],
declarations: [VaultFilterComponent],
exports: [VaultFilterComponent],
providers: [
{
provide: VaultFilterServiceAbstraction,
useClass: VaultFilterService,
},
],
})
export class VaultFilterModule {}

View File

@ -0,0 +1,90 @@
import { Injectable, OnDestroy } from "@angular/core";
import { filter, map, Observable, ReplaySubject, Subject, switchMap, takeUntil } from "rxjs";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import {
canAccessVaultTab,
OrganizationService,
} from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
import { StateService } from "@bitwarden/common/abstractions/state.service";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
import { VaultFilterService as BaseVaultFilterService } from "../../../vault/vault-filter/services/vault-filter.service";
import { CollectionFilter } from "../../../vault/vault-filter/shared/models/vault-filter.type";
import { CollectionAdminView } from "../../core";
import { CollectionAdminService } from "../../core/services/collection-admin.service";
@Injectable()
export class VaultFilterService extends BaseVaultFilterService implements OnDestroy {
private destroy$ = new Subject<void>();
private _collections = new ReplaySubject<CollectionAdminView[]>(1);
filteredCollections$: Observable<CollectionAdminView[]> = this._collections.asObservable();
collectionTree$: Observable<TreeNode<CollectionFilter>> = this.filteredCollections$.pipe(
map((collections) => this.buildCollectionTree(collections))
);
constructor(
stateService: StateService,
organizationService: OrganizationService,
folderService: FolderService,
cipherService: CipherService,
collectionService: CollectionService,
policyService: PolicyService,
i18nService: I18nService,
protected collectionAdminService: CollectionAdminService
) {
super(
stateService,
organizationService,
folderService,
cipherService,
collectionService,
policyService,
i18nService
);
this.loadSubscriptions();
}
protected loadSubscriptions() {
this._organizationFilter
.pipe(
filter((org) => org != null),
switchMap((org) => {
return this.loadCollections(org);
}),
takeUntil(this.destroy$)
)
.subscribe((collections) => {
this._collections.next(collections);
});
}
async reloadCollections() {
this._collections.next(await this.loadCollections(this._organizationFilter.getValue()));
}
protected async loadCollections(org: Organization): Promise<CollectionAdminView[]> {
let collections: CollectionAdminView[] = [];
if (canAccessVaultTab(org)) {
collections = await this.collectionAdminService.getAll(org.id);
const noneCollection = new CollectionAdminView();
noneCollection.name = this.i18nService.t("unassigned");
noneCollection.organizationId = org.id;
collections.push(noneCollection);
}
return collections;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}

View File

@ -1,5 +1,7 @@
import { Component, EventEmitter, Output } from "@angular/core";
import { Component, EventEmitter, Input, OnDestroy, Output } from "@angular/core";
import { lastValueFrom } from "rxjs";
import { SearchPipe } from "@bitwarden/angular/pipes/search.pipe";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@ -12,15 +14,41 @@ import { SearchService } from "@bitwarden/common/abstractions/search.service";
import { StateService } from "@bitwarden/common/abstractions/state.service";
import { TokenService } from "@bitwarden/common/abstractions/token.service";
import { TotpService } from "@bitwarden/common/abstractions/totp.service";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
import { CipherView } from "@bitwarden/common/models/view/cipher.view";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { DialogService } from "@bitwarden/components";
import { VaultItemsComponent as BaseVaultItemsComponent } from "../../vault/vault-items.component";
import {
BulkDeleteDialogResult,
openBulkDeleteDialog,
} from "../../vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component";
import { VaultFilterService } from "../../vault/vault-filter/services/abstractions/vault-filter.service";
import { CollectionFilter } from "../../vault/vault-filter/shared/models/vault-filter.type";
import {
VaultItemRow,
VaultItemsComponent as BaseVaultItemsComponent,
} from "../../vault/vault-items.component";
import { CollectionAdminView } from "../core";
import { GroupService } from "../core/services/group/group.service";
import {
CollectionDialogResult,
CollectionDialogTabType,
openCollectionDialog,
} from "../shared/components/collection-dialog/collection-dialog.component";
const MaxCheckedCount = 500;
@Component({
selector: "app-org-vault-items",
templateUrl: "../../vault/vault-items.component.html",
})
export class VaultItemsComponent extends BaseVaultItemsComponent {
export class VaultItemsComponent extends BaseVaultItemsComponent implements OnDestroy {
@Input() set initOrganization(value: Organization) {
this.organization = value;
this.changeOrganization();
}
@Output() onEventsClicked = new EventEmitter<CipherView>();
protected allCiphers: CipherView[] = [];
@ -30,53 +58,81 @@ export class VaultItemsComponent extends BaseVaultItemsComponent {
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
cipherService: CipherService,
vaultFilterService: VaultFilterService,
eventCollectionService: EventCollectionService,
totpService: TotpService,
passwordRepromptService: PasswordRepromptService,
dialogService: DialogService,
logService: LogService,
stateService: StateService,
organizationService: OrganizationService,
tokenService: TokenService,
searchPipe: SearchPipe,
protected groupService: GroupService,
private apiService: ApiService
) {
super(
searchService,
i18nService,
platformUtilsService,
vaultFilterService,
cipherService,
eventCollectionService,
totpService,
stateService,
passwordRepromptService,
dialogService,
logService,
searchPipe,
organizationService,
tokenService
);
}
async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
this.deleted = deleted || false;
if (this.organization.canEditAnyCollection) {
this.accessEvents = this.organization.useEvents;
this.allCiphers = await this.cipherService.getAllFromApiForOrganization(this.organization.id);
ngOnDestroy() {
super.ngOnDestroy();
}
async changeOrganization() {
this.groups = await this.groupService.getAll(this.organization?.id);
await this.loadCiphers();
await this.reload(this.activeFilter.buildFilter());
}
async loadCiphers() {
if (this.organization?.canEditAnyCollection) {
this.accessEvents = this.organization?.useEvents;
this.allCiphers = await this.cipherService.getAllFromApiForOrganization(
this.organization?.id
);
} else {
this.allCiphers = (await this.cipherService.getAllDecrypted()).filter(
(c) => c.organizationId === this.organization.id
(c) => c.organizationId === this.organization?.id
);
}
await this.searchService.indexCiphers(this.organization.id, this.allCiphers);
await this.searchService.indexCiphers(this.organization?.id, this.allCiphers);
}
async refreshCollections(): Promise<void> {
await this.vaultFilterService.reloadCollections();
if (this.activeFilter.selectedCollectionNode) {
this.activeFilter.selectedCollectionNode =
await this.vaultFilterService.getCollectionNodeFromTree(
this.activeFilter.selectedCollectionNode.node.id
);
}
}
async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
this.deleted = deleted ?? false;
await this.applyFilter(filter);
this.loaded = true;
}
async applyFilter(filter: (cipher: CipherView) => boolean = null) {
if (this.organization.canViewAllCollections) {
await super.applyFilter(filter);
} else {
const f = (c: CipherView) =>
c.organizationId === this.organization.id && (filter == null || filter(c));
await super.applyFilter(f);
}
async refresh() {
await this.loadCiphers();
await this.refreshCollections();
super.refresh();
}
async search(timeout: number = null) {
@ -87,16 +143,183 @@ export class VaultItemsComponent extends BaseVaultItemsComponent {
this.onEventsClicked.emit(c);
}
protected deleteCipher(id: string) {
if (!this.organization.canEditAnyCollection) {
return super.deleteCipher(id, this.deleted);
protected showFixOldAttachments(c: CipherView) {
return this.organization?.canEditAnyCollection && c.hasOldAttachments;
}
checkAll(select: boolean) {
if (select) {
this.checkAll(false);
}
return this.deleted
const items: VaultItemRow[] = [...this.collections, ...this.ciphers];
if (!items.length) {
return;
}
const selectCount = select && items.length > MaxCheckedCount ? MaxCheckedCount : items.length;
for (let i = 0; i < selectCount; i++) {
this.checkRow(items[i], select);
}
}
selectRow(item: VaultItemRow) {
this.checkRow(item);
}
checkRow(item: VaultItemRow, select?: boolean) {
if (item instanceof TreeNode && item.node.id == null) {
return;
}
// Do not allow checking a collection we cannot delete
if (item instanceof TreeNode && !this.canDeleteCollection(item.node)) {
return;
}
item.checked = select ?? !item.checked;
}
get selectedCollections(): TreeNode<CollectionFilter>[] {
if (!this.collections) {
return [];
}
return this.collections.filter((c) => !!(c as VaultItemRow).checked);
}
get selectedCollectionIds(): string[] {
return this.selectedCollections.map((c) => c.node.id);
}
canEditCollection(c: CollectionAdminView): boolean {
// Only edit collections if we're in the org vault and not editing "Unassigned"
if (this.organization === undefined || c.id === null) {
return false;
}
// Otherwise, check if we can edit the specified collection
return (
this.organization.canEditAnyCollection ||
(this.organization.canEditAssignedCollections && c.assigned)
);
}
async editCollection(c: CollectionView, tab: "info" | "access"): Promise<void> {
const tabType = tab == "info" ? CollectionDialogTabType.Info : CollectionDialogTabType.Access;
const dialog = openCollectionDialog(this.dialogService, {
data: { collectionId: c?.id, organizationId: this.organization?.id, initialTab: tabType },
});
const result = await lastValueFrom(dialog.closed);
if (result === CollectionDialogResult.Saved || result === CollectionDialogResult.Deleted) {
this.actionPromise = this.refresh();
await this.actionPromise;
this.actionPromise = null;
}
}
get showMissingCollectionPermissionMessage(): boolean {
// Not filtering by collections, so no need to show message
if (this.activeFilter.selectedCollectionNode == null) {
return false;
}
// Filtering by all collections, so no need to show message
if (this.activeFilter.selectedCollectionNode.node.id == "AllCollections") {
return false;
}
// Filtering by a collection, so show message if user is not assigned
return !this.activeFilter.selectedCollectionNode.node.assigned && !this.organization.isAdmin;
}
canDeleteCollection(c: CollectionAdminView): boolean {
// Only delete collections if we're in the org vault and not deleting "Unassigned"
if (this.organization === undefined || c.id === null) {
return false;
}
// Otherwise, check if we can delete the specified collection
return (
this.organization?.canDeleteAnyCollection ||
(this.organization?.canDeleteAssignedCollections && c.assigned)
);
}
async deleteCollection(collection: CollectionView): Promise<void> {
if (!this.organization.canDeleteAssignedCollections) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("missingPermissions")
);
return;
}
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t("deleteCollectionConfirmation"),
collection.name,
this.i18nService.t("yes"),
this.i18nService.t("no"),
"warning"
);
if (!confirmed) {
return;
}
try {
this.actionPromise = this.apiService.deleteCollection(this.organization?.id, collection.id);
await this.actionPromise;
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedCollectionId", collection.name)
);
await this.refresh();
} catch (e) {
this.logService.error(e);
}
}
async bulkDelete() {
if (!(await this.repromptCipher())) {
return;
}
const selectedCipherIds = this.selectedCipherIds;
const selectedCollectionIds = this.deleted ? null : this.selectedCollectionIds;
if (!selectedCipherIds?.length && !selectedCollectionIds?.length) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("nothingSelected")
);
return;
}
const dialog = openBulkDeleteDialog(this.dialogService, {
data: {
permanent: this.deleted,
cipherIds: selectedCipherIds,
collectionIds: selectedCollectionIds,
organization: this.organization,
},
});
const result = await lastValueFrom(dialog.closed);
if (result === BulkDeleteDialogResult.Deleted) {
this.actionPromise = this.refresh();
await this.actionPromise;
this.actionPromise = null;
}
}
protected deleteCipherWithServer(id: string, permanent: boolean) {
if (!this.organization?.canEditAnyCollection) {
return super.deleteCipherWithServer(id, this.deleted);
}
return permanent
? this.apiService.deleteCipherAdmin(id)
: this.apiService.putDeleteCipherAdmin(id);
}
protected showFixOldAttachments(c: CipherView) {
return this.organization.canEditAnyCollection && c.hasOldAttachments;
}
}

View File

@ -1,12 +1,17 @@
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { canAccessVaultTab } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard";
import { VaultComponent } from "./vault.component";
const routes: Routes = [
{
path: "",
component: VaultComponent,
data: { titleId: "vaults" },
canActivate: [OrganizationPermissionsGuard],
data: { titleId: "vaults", organizationPermissions: canAccessVaultTab },
},
];
@NgModule({

View File

@ -6,8 +6,9 @@
<div class="inner-content">
<app-organization-vault-filter
#vaultFilter
[organization]="organization"
[activeFilter]="activeFilter"
(onFilterChange)="applyVaultFilter($event)"
(activeFilterChanged)="applyVaultFilter($event)"
(onSearchTextChanged)="filterSearchText($event)"
></app-organization-vault-filter>
</div>
@ -15,7 +16,18 @@
</div>
</div>
<div class="col-9">
<div class="page-header d-flex">
<bit-breadcrumbs *ngIf="breadcrumbs.length > 0">
<bit-breadcrumb
*ngFor="let collection of breadcrumbs; let first = first"
[icon]="first ? undefined : 'bwi-collection'"
(click)="applyCollectionFilter(collection)"
>
<!-- First node in the tree contains a translation key. The rest come from user input. -->
<ng-container *ngIf="first">{{ collection.node.name | i18n }}</ng-container>
<ng-container *ngIf="!first">{{ collection.node.name }}</ng-container>
</bit-breadcrumb>
</bit-breadcrumbs>
<div class="tw-mb-4 tw-flex">
<h1>
{{ "vaultItems" | i18n }}
<small #actionSpinner [appApiAction]="vaultItemsComponent.actionPromise">
@ -29,31 +41,55 @@
</ng-container>
</small>
</h1>
<div class="ml-auto d-flex">
<app-vault-bulk-actions
[vaultItemsComponent]="vaultItemsComponent"
[deleted]="deleted"
[organization]="organization"
>
</app-vault-bulk-actions>
<div *ngIf="!activeFilter.isDeleted" class="ml-auto d-flex">
<div *ngIf="organization.canCreateNewCollections" class="dropdown mr-2" appListDropdown>
<button
bitButton
buttonType="primary"
type="button"
[bitMenuTriggerFor]="addOptions"
id="newItemDropdown"
appA11yTitle="{{ 'new' | i18n }}"
>
{{ "new" | i18n }}<i class="bwi bwi-angle-down tw-ml-2" aria-hidden="true"></i>
</button>
<bit-menu #addOptions aria-labelledby="newItemDropdown">
<button class="dropdown-item" appStopClick (click)="addCipher()">
<i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>
{{ "item" | i18n }}
</button>
<button class="dropdown-item" appStopClick (click)="addCollection()">
<i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
{{ "collection" | i18n }}
</button>
</bit-menu>
</div>
<button
*ngIf="!organization?.canCreateNewCollections"
type="button"
class="btn btn-outline-primary btn-sm ml-auto"
bitButton
buttonType="primary"
(click)="addCipher()"
*ngIf="!deleted"
>
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "newItem" | i18n }}
</button>
</div>
</div>
<app-callout type="warning" *ngIf="deleted" icon="bwi bwi-exclamation-triangle">
<app-callout
type="warning"
*ngIf="activeFilter.isDeleted"
icon="bwi bwi-exclamation-triangle"
>
{{ trashCleanupWarning }}
</app-callout>
<app-org-vault-items
[activeFilter]="activeFilter"
[initOrganization]="organization"
(activeFilterChanged)="applyVaultFilter($event)"
(onCipherClicked)="editCipher($event)"
(onAttachmentsClicked)="editCipherAttachments($event)"
(onAddCipher)="addCipher()"
(onCollectionsClicked)="editCipherCollections($event)"
(onEditCipherCollectionsClicked)="editCipherCollections($event)"
(onEventsClicked)="viewEvents($event)"
(onCloneClicked)="cloneCipher($event)"
>

View File

@ -8,10 +8,10 @@ import {
ViewContainerRef,
} from "@angular/core";
import { ActivatedRoute, Params, Router } from "@angular/router";
import { first } from "rxjs/operators";
import { combineLatest, firstValueFrom, lastValueFrom, Subject } from "rxjs";
import { first, switchMap, takeUntil } from "rxjs/operators";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -20,12 +20,19 @@ import { OrganizationService } from "@bitwarden/common/abstractions/organization
import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.abstraction";
import { CipherType } from "@bitwarden/common/enums/cipherType";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { TreeNode } from "@bitwarden/common/models/domain/tree-node";
import { CipherView } from "@bitwarden/common/models/view/cipher.view";
import { DialogService } from "@bitwarden/components";
import { VaultService } from "../../vault/shared/vault.service";
import { VaultFilterService } from "../../vault/vault-filter/services/abstractions/vault-filter.service";
import { VaultFilter } from "../../vault/vault-filter/shared/models/vault-filter.model";
import { CollectionFilter } from "../../vault/vault-filter/shared/models/vault-filter.type";
import { EntityEventsComponent } from "../manage/entity-events.component";
import {
CollectionDialogResult,
openCollectionDialog,
} from "../shared/components/collection-dialog";
import { AddEditComponent } from "./add-edit.component";
import { AttachmentsComponent } from "./attachments.component";
@ -53,133 +60,106 @@ export class VaultComponent implements OnInit, OnDestroy {
eventsModalRef: ViewContainerRef;
organization: Organization;
collectionId: string = null;
type: CipherType = null;
trashCleanupWarning: string = null;
activeFilter: VaultFilter = new VaultFilter();
// This is a hack to avoid redundant api calls that fetch OrganizationVaultFilterComponent collections
// When it makes sense to do so we should leverage some other communication method for change events that isn't directly tied to the query param for organizationId
// i.e. exposing the VaultFiltersService to the OrganizationSwitcherComponent to make relevant updates from a change event instead of just depending on the router
firstLoaded = true;
private destroy$ = new Subject<void>();
constructor(
private route: ActivatedRoute,
private organizationService: OrganizationService,
protected vaultFilterService: VaultFilterService,
private router: Router,
private changeDetectorRef: ChangeDetectorRef,
private syncService: SyncService,
private i18nService: I18nService,
private modalService: ModalService,
private dialogService: DialogService,
private messagingService: MessagingService,
private broadcasterService: BroadcasterService,
private ngZone: NgZone,
private platformUtilsService: PlatformUtilsService,
private vaultService: VaultService,
private cipherService: CipherService,
private passwordRepromptService: PasswordRepromptService
) {}
ngOnInit() {
async ngOnInit() {
this.trashCleanupWarning = this.i18nService.t(
this.platformUtilsService.isSelfHost()
? "trashCleanupWarningSelfHosted"
: "trashCleanupWarning"
);
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
this.route.parent.params.subscribe(async (params: any) => {
this.organization = await this.organizationService.get(params.organizationId);
this.vaultFilterComponent.organization = this.organization;
this.vaultItemsComponent.organization = this.organization;
/* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */
this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
this.vaultItemsComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
if (!this.organization.canViewAllCollections) {
await this.syncService.fullSync(false);
this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
this.ngZone.run(async () => {
switch (message.command) {
case "syncCompleted":
if (message.successfully) {
await Promise.all([
this.vaultFilterComponent.reloadCollectionsAndFolders(),
this.vaultItemsComponent.refresh(),
]);
this.changeDetectorRef.detectChanges();
}
break;
}
});
});
}
this.route.parent.params.pipe(takeUntil(this.destroy$)).subscribe((params) => {
this.organization = this.organizationService.get(params.organizationId);
});
if (this.firstLoaded) {
await this.vaultFilterComponent.reloadCollectionsAndFolders();
}
this.firstLoaded = true;
this.route.queryParams.pipe(first(), takeUntil(this.destroy$)).subscribe((qParams) => {
this.vaultItemsComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
});
await this.vaultItemsComponent.reload();
if (qParams.viewEvents != null) {
const cipher = this.vaultItemsComponent.ciphers.filter(
(c) => c.id === qParams.viewEvents
);
if (cipher.length > 0) {
this.viewEvents(cipher[0]);
// verifies that the organization has been set
combineLatest([this.route.queryParams, this.route.parent.params])
.pipe(
switchMap(async ([qParams, params]) => {
const cipherId = getCipherIdFromParams(qParams);
if (!cipherId) {
return;
}
}
if (
// Handle users with implicit collection access since they use the admin endpoint
this.organization.canUseAdminCollections ||
(await this.cipherService.get(cipherId)) != null
) {
this.editCipherId(cipherId);
} else {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("unknownCipher")
);
this.router.navigate([], {
queryParams: { cipherId: null, itemId: null },
queryParamsHandling: "merge",
});
}
}),
takeUntil(this.destroy$)
)
.subscribe();
/* eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe, rxjs/no-nested-subscribe */
this.route.queryParams.subscribe(async (params) => {
const cipherId = getCipherIdFromParams(params);
if (cipherId) {
if (
// Handle users with implicit collection access since they use the admin endpoint
this.organization.canEditAnyCollection ||
(await this.cipherService.get(cipherId)) != null
) {
this.editCipherId(cipherId);
} else {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("unknownCipher")
);
this.router.navigate([], {
queryParams: { cipherId: null, itemId: null },
queryParamsHandling: "merge",
});
}
if (!this.organization.canUseAdminCollections) {
this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
this.ngZone.run(async () => {
switch (message.command) {
case "syncCompleted":
if (message.successfully) {
await Promise.all([
this.vaultFilterService.reloadCollections(),
this.vaultItemsComponent.refresh(),
]);
this.changeDetectorRef.detectChanges();
}
break;
}
});
});
});
}
get deleted(): boolean {
return this.activeFilter.status === "trash";
await this.syncService.fullSync(false);
}
}
ngOnDestroy() {
this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
this.destroy$.next();
this.destroy$.complete();
}
async applyVaultFilter(vaultFilter: VaultFilter) {
this.vaultItemsComponent.showAddNew = vaultFilter.status !== "trash";
this.activeFilter = vaultFilter;
// Hack to avoid calling cipherService.getAllFromApiForOrganization every time the vault filter changes.
// Call VaultItemsComponent.applyFilter directly instead of going through VaultItemsComponent.reload, which
// reloads all the ciphers unnecessarily. Will be fixed properly by EC-14.
this.vaultItemsComponent.loaded = false;
this.vaultItemsComponent.deleted = vaultFilter.status === "trash" || false;
await this.vaultItemsComponent.applyFilter(this.activeFilter.buildFilter());
this.vaultItemsComponent.loaded = true;
// End hack
this.vaultFilterComponent.searchPlaceholder =
this.vaultService.calculateSearchBarLocalizationString(this.activeFilter);
async applyVaultFilter(filter: VaultFilter) {
this.activeFilter = filter;
this.vaultItemsComponent.showAddNew = !this.activeFilter.isDeleted;
await this.vaultItemsComponent.reload(
this.activeFilter.buildFilter(),
this.activeFilter.isDeleted
);
this.go();
}
@ -188,6 +168,21 @@ export class VaultComponent implements OnInit, OnDestroy {
this.vaultItemsComponent.search(200);
}
async addCollection() {
const dialog = openCollectionDialog(this.dialogService, {
data: {
organizationId: this.organization?.id,
parentCollectionId: this.activeFilter.collectionId,
},
});
const result = await lastValueFrom(dialog.closed);
if (result === CollectionDialogResult.Saved || result === CollectionDialogResult.Deleted) {
this.vaultItemsComponent.actionPromise = this.vaultItemsComponent.refresh();
await this.vaultItemsComponent.actionPromise;
this.vaultItemsComponent.actionPromise = null;
}
}
async editCipherAttachments(cipher: CipherView) {
if (this.organization.maxStorageGb == null || this.organization.maxStorageGb === 0) {
this.messagingService.send("upgradeOrganization", { organizationId: cipher.organizationId });
@ -219,16 +214,13 @@ export class VaultComponent implements OnInit, OnDestroy {
}
async editCipherCollections(cipher: CipherView) {
const currCollections = await firstValueFrom(this.vaultFilterService.filteredCollections$);
const [modal] = await this.modalService.openViewRef(
CollectionsComponent,
this.collectionsModalRef,
(comp) => {
if (this.organization.canEditAnyCollection) {
comp.collectionIds = cipher.collectionIds;
comp.collections = this.vaultFilterComponent.collections.fullList.filter(
(c) => !c.readOnly && c.id != null
);
}
comp.collectionIds = cipher.collectionIds;
comp.collections = currCollections.filter((c) => !c.readOnly && c.id != null);
comp.organization = this.organization;
comp.cipherId = cipher.id;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
@ -243,14 +235,12 @@ export class VaultComponent implements OnInit, OnDestroy {
async addCipher() {
const component = await this.editCipher(null);
component.organizationId = this.organization.id;
component.type = this.type;
if (this.organization.canEditAnyCollection) {
component.collections = this.vaultFilterComponent.collections.fullList.filter(
(c) => !c.readOnly && c.id != null
);
}
if (this.collectionId != null) {
component.collectionIds = [this.collectionId];
component.type = this.activeFilter.cipherType;
component.collections = (
await firstValueFrom(this.vaultFilterService.filteredCollections$)
).filter((c) => !c.readOnly && c.id != null);
if (this.activeFilter.collectionId) {
component.collectionIds = [this.activeFilter.collectionId];
}
}
@ -302,13 +292,9 @@ export class VaultComponent implements OnInit, OnDestroy {
const component = await this.editCipher(cipher);
component.cloneMode = true;
component.organizationId = this.organization.id;
if (this.organization.canEditAnyCollection) {
component.collections = this.vaultFilterComponent.collections.fullList.filter(
(c) => !c.readOnly && c.id != null
);
}
// Regardless of Admin state, the collection Ids need to passed manually as they are not assigned value
// in the add-edit componenet
component.collections = (
await firstValueFrom(this.vaultFilterService.filteredCollections$)
).filter((c) => !c.readOnly && c.id != null);
component.collectionIds = cipher.collectionIds;
}
@ -322,12 +308,32 @@ export class VaultComponent implements OnInit, OnDestroy {
});
}
get breadcrumbs(): TreeNode<CollectionFilter>[] {
if (!this.activeFilter.selectedCollectionNode) {
return [];
}
const collections = [this.activeFilter.selectedCollectionNode];
while (collections[collections.length - 1].parent != undefined) {
collections.push(collections[collections.length - 1].parent);
}
return collections.map((c) => c).reverse();
}
protected applyCollectionFilter(collection: TreeNode<CollectionFilter>) {
const filter = this.activeFilter;
filter.resetFilter();
filter.selectedCollectionNode = collection;
this.applyVaultFilter(filter);
}
private go(queryParams: any = null) {
if (queryParams == null) {
queryParams = {
type: this.activeFilter.cipherType,
collectionId: this.activeFilter.selectedCollectionId,
deleted: this.deleted ? true : null,
collectionId: this.activeFilter.collectionId,
deleted: this.activeFilter.isDeleted || null,
};
}

View File

@ -1,15 +1,31 @@
import { NgModule } from "@angular/core";
import { OrganizationBadgeModule } from "../../vault/organization-badge/organization-badge.module";
import { VaultSharedModule } from "../../vault/shared/vault-shared.module";
import { BreadcrumbsModule } from "@bitwarden/components";
import { LooseComponentsModule } from "../../shared/loose-components.module";
import { SharedModule } from "../../shared/shared.module";
import { OrganizationBadgeModule } from "../../vault/organization-badge/organization-badge.module";
import { PipesModule } from "../../vault/pipes/pipes.module";
import { CollectionBadgeModule } from "./collection-badge/collection-badge.module";
import { GroupBadgeModule } from "./group-badge/group-badge.module";
import { VaultFilterModule } from "./vault-filter/vault-filter.module";
import { VaultItemsComponent } from "./vault-items.component";
import { VaultRoutingModule } from "./vault-routing.module";
import { VaultComponent } from "./vault.component";
@NgModule({
imports: [VaultSharedModule, VaultRoutingModule, VaultFilterModule, OrganizationBadgeModule],
imports: [
VaultRoutingModule,
VaultFilterModule,
SharedModule,
LooseComponentsModule,
GroupBadgeModule,
CollectionBadgeModule,
OrganizationBadgeModule,
PipesModule,
BreadcrumbsModule,
],
declarations: [VaultComponent, VaultItemsComponent],
exports: [VaultComponent],
})

View File

@ -17,7 +17,6 @@ import { UpdateTempPasswordComponent } from "../accounts/update-temp-password.co
import { VerifyEmailTokenComponent } from "../accounts/verify-email-token.component";
import { VerifyRecoverDeleteComponent } from "../accounts/verify-recover-delete.component";
import { DynamicAvatarComponent } from "../components/dynamic-avatar.component";
import { NestedCheckboxComponent } from "../components/nested-checkbox.component";
import { OrganizationSwitcherComponent } from "../components/organization-switcher.component";
import { PasswordRepromptComponent } from "../components/password-reprompt.component";
import { PremiumBadgeComponent } from "../components/premium-badge.component";
@ -31,22 +30,11 @@ import { ProductSwitcherModule } from "../layouts/product-switcher/product-switc
import { UserLayoutComponent } from "../layouts/user-layout.component";
import { OrganizationCreateModule } from "../organizations/create/organization-create.module";
import { OrganizationLayoutComponent } from "../organizations/layouts/organization-layout.component";
import { BulkConfirmComponent as OrgBulkConfirmComponent } from "../organizations/manage/bulk/bulk-confirm.component";
import { BulkRemoveComponent as OrgBulkRemoveComponent } from "../organizations/manage/bulk/bulk-remove.component";
import { BulkRestoreRevokeComponent as OrgBulkRestoreRevokeComponent } from "../organizations/manage/bulk/bulk-restore-revoke.component";
import { BulkStatusComponent as OrgBulkStatusComponent } from "../organizations/manage/bulk/bulk-status.component";
import { CollectionAddEditComponent as OrgCollectionAddEditComponent } from "../organizations/manage/collection-add-edit.component";
import { CollectionsComponent as OrgManageCollectionsComponent } from "../organizations/manage/collections.component";
import { EntityEventsComponent as OrgEntityEventsComponent } from "../organizations/manage/entity-events.component";
import { EventsComponent as OrgEventsComponent } from "../organizations/manage/events.component";
import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizations/manage/group-add-edit.component";
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 { 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 { 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";
@ -119,28 +107,16 @@ import { ToolsComponent } from "../tools/tools.component";
import { AddEditCustomFieldsComponent } from "../vault/add-edit-custom-fields.component";
import { AddEditComponent } from "../vault/add-edit.component";
import { AttachmentsComponent } from "../vault/attachments.component";
import { BulkActionsComponent } from "../vault/bulk-actions.component";
import { BulkDeleteComponent } from "../vault/bulk-delete.component";
import { BulkMoveComponent } from "../vault/bulk-move.component";
import { BulkRestoreComponent } from "../vault/bulk-restore.component";
import { BulkShareComponent } from "../vault/bulk-share.component";
import { CollectionsComponent } from "../vault/collections.component";
import { FolderAddEditComponent } from "../vault/folder-add-edit.component";
import { ShareComponent } from "../vault/share.component";
import { VaultFilterModule } from "../vault/vault-filter/vault-filter.module";
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.
@NgModule({
imports: [
SharedModule,
VaultFilterModule,
OrganizationCreateModule,
RegisterFormModule,
ProductSwitcherModule,
],
imports: [SharedModule, OrganizationCreateModule, RegisterFormModule, ProductSwitcherModule],
declarations: [
PremiumBadgeComponent,
AcceptEmergencyComponent,
@ -157,11 +133,6 @@ import { SharedModule } from ".";
ApiKeyComponent,
AttachmentsComponent,
BillingSyncKeyComponent,
BulkActionsComponent,
BulkDeleteComponent,
BulkMoveComponent,
BulkRestoreComponent,
BulkShareComponent,
ChangeEmailComponent,
ChangeKdfComponent,
ChangePasswordComponent,
@ -185,34 +156,22 @@ import { SharedModule } from ".";
HintComponent,
LockComponent,
NavbarComponent,
NestedCheckboxComponent,
OrganizationSwitcherComponent,
OrgAddEditComponent,
OrganizationLayoutComponent,
OrganizationPlansComponent,
OrgAttachmentsComponent,
OrgBulkConfirmComponent,
OrgBulkRestoreRevokeComponent,
OrgBulkRemoveComponent,
OrgBulkStatusComponent,
OrgCollectionAddEditComponent,
OrgCollectionsComponent,
OrgEntityEventsComponent,
OrgEventsComponent,
OrgExposedPasswordsReportComponent,
OrgGroupAddEditComponent,
OrgGroupsComponent,
OrgInactiveTwoFactorReportComponent,
OrgManageCollectionsComponent,
OrgManageComponent,
OrgPeopleComponent,
OrgResetPasswordComponent,
OrgReusedPasswordsReportComponent,
OrgToolsComponent,
OrgUnsecuredWebsitesReportComponent,
OrgUserAddEditComponent,
OrgUserConfirmComponent,
OrgUserGroupsComponent,
OrgWeakPasswordsReportComponent,
GeneratorComponent,
PasswordGeneratorHistoryComponent,
@ -283,11 +242,6 @@ import { SharedModule } from ".";
AdjustStorageComponent,
ApiKeyComponent,
AttachmentsComponent,
BulkActionsComponent,
BulkDeleteComponent,
BulkMoveComponent,
BulkRestoreComponent,
BulkShareComponent,
ChangeEmailComponent,
ChangeKdfComponent,
ChangePasswordComponent,
@ -311,34 +265,22 @@ import { SharedModule } from ".";
HintComponent,
LockComponent,
NavbarComponent,
NestedCheckboxComponent,
OrganizationSwitcherComponent,
OrgAddEditComponent,
OrganizationLayoutComponent,
OrganizationPlansComponent,
OrgAttachmentsComponent,
OrgBulkConfirmComponent,
OrgBulkRestoreRevokeComponent,
OrgBulkRemoveComponent,
OrgBulkStatusComponent,
OrgCollectionAddEditComponent,
OrgCollectionsComponent,
OrgEntityEventsComponent,
OrgEventsComponent,
OrgExposedPasswordsReportComponent,
OrgGroupAddEditComponent,
OrgGroupsComponent,
OrgInactiveTwoFactorReportComponent,
OrgManageCollectionsComponent,
OrgManageComponent,
OrgPeopleComponent,
OrgResetPasswordComponent,
OrgReusedPasswordsReportComponent,
OrgToolsComponent,
OrgUnsecuredWebsitesReportComponent,
OrgUserAddEditComponent,
OrgUserConfirmComponent,
OrgUserGroupsComponent,
OrgWeakPasswordsReportComponent,
GeneratorComponent,
PasswordGeneratorHistoryComponent,

View File

@ -10,18 +10,22 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
AvatarModule,
BadgeListModule,
BadgeModule,
ButtonModule,
IconButtonModule,
CalloutModule,
CheckboxModule,
DialogModule,
FormFieldModule,
IconButtonModule,
IconModule,
LinkModule,
MenuModule,
MultiSelectModule,
NavigationModule,
TableModule,
TabsModule,
ToggleGroupModule,
ColorPasswordModule,
} from "@bitwarden/components";
@ -50,17 +54,21 @@ import "./locales";
AsyncActionsModule,
AvatarModule,
BadgeModule,
BadgeListModule,
ButtonModule,
CalloutModule,
CheckboxModule,
DialogModule,
FormFieldModule,
IconButtonModule,
IconModule,
LinkModule,
MenuModule,
MultiSelectModule,
NavigationModule,
TableModule,
TabsModule,
ToggleGroupModule,
LinkModule,
ColorPasswordModule,
@ -80,17 +88,21 @@ import "./locales";
AsyncActionsModule,
AvatarModule,
BadgeModule,
BadgeListModule,
ButtonModule,
CalloutModule,
CheckboxModule,
DialogModule,
FormFieldModule,
IconButtonModule,
IconModule,
LinkModule,
MenuModule,
MultiSelectModule,
NavigationModule,
TableModule,
TabsModule,
ToggleGroupModule,
LinkModule,
ColorPasswordModule,

View File

@ -0,0 +1,25 @@
<bit-simple-dialog>
<span bitDialogTitle>
{{ (permanent ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
</span>
<span bitDialogContent>
<ng-container *ngIf="!permanent">
<span *ngIf="cipherIds?.length">
{{ "deleteSelectedItemsDesc" | i18n: cipherIds.length }}
</span>
<span *ngIf="collectionIds?.length">
{{ "deleteSelectedCollectionsDesc" | i18n: collectionIds.length }}
</span>
{{ "deleteSelectedConfirmation" | i18n }}
</ng-container>
<ng-container *ngIf="permanent">
{{ "permanentlyDeleteSelectedItemsDesc" | i18n: cipherIds.length }}
</ng-container>
</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton type="submit" buttonType="danger" [bitAction]="submit">
{{ (permanent ? "permanentlyDelete" : "delete") | i18n }}
</button>
<button bitButton type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
</div>
</bit-simple-dialog>

View File

@ -0,0 +1,134 @@
import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { CipherBulkDeleteRequest } from "@bitwarden/common/models/request/cipher-bulk-delete.request";
import { CollectionBulkDeleteRequest } from "@bitwarden/common/models/request/collection-bulk-delete.request";
import { DialogService } from "@bitwarden/components";
export interface BulkDeleteDialogParams {
cipherIds?: string[];
collectionIds?: string[];
permanent?: boolean;
organization?: Organization;
}
export enum BulkDeleteDialogResult {
Deleted = "deleted",
Canceled = "canceled",
}
/**
* Strongly typed helper to open a BulkDeleteDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export const openBulkDeleteDialog = (
dialogService: DialogService,
config: DialogConfig<BulkDeleteDialogParams>
) => {
return dialogService.open<BulkDeleteDialogResult, BulkDeleteDialogParams>(
BulkDeleteDialogComponent,
config
);
};
@Component({
selector: "vault-bulk-delete-dialog",
templateUrl: "bulk-delete-dialog.component.html",
})
export class BulkDeleteDialogComponent {
cipherIds: string[];
collectionIds: string[];
permanent = false;
organization: Organization;
constructor(
@Inject(DIALOG_DATA) params: BulkDeleteDialogParams,
private dialogRef: DialogRef<BulkDeleteDialogResult>,
private cipherService: CipherService,
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService,
private apiService: ApiService
) {
this.cipherIds = params.cipherIds ?? [];
this.collectionIds = params.collectionIds ?? [];
this.permanent = params.permanent;
this.organization = params.organization;
}
protected async cancel() {
this.close(BulkDeleteDialogResult.Canceled);
}
protected submit = async () => {
const deletePromises: Promise<void>[] = [];
if (this.cipherIds.length) {
if (!this.organization || !this.organization.canEditAnyCollection) {
deletePromises.push(this.deleteCiphers());
} else {
deletePromises.push(this.deleteCiphersAdmin());
}
}
if (this.collectionIds.length && this.organization) {
deletePromises.push(this.deleteCollections());
}
await Promise.all(deletePromises);
if (this.cipherIds.length) {
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t(this.permanent ? "permanentlyDeletedItems" : "deletedItems")
);
}
if (this.collectionIds.length) {
this.platformUtilsService.showToast(
"success",
null,
this.i18nService.t("deletedCollections")
);
}
this.close(BulkDeleteDialogResult.Deleted);
};
private async deleteCiphers(): Promise<any> {
if (this.permanent) {
await this.cipherService.deleteManyWithServer(this.cipherIds);
} else {
await this.cipherService.softDeleteManyWithServer(this.cipherIds);
}
}
private async deleteCiphersAdmin(): Promise<any> {
const deleteRequest = new CipherBulkDeleteRequest(this.cipherIds, this.organization.id);
if (this.permanent) {
return await this.apiService.deleteManyCiphersAdmin(deleteRequest);
} else {
return await this.apiService.putDeleteManyCiphersAdmin(deleteRequest);
}
}
private async deleteCollections(): Promise<any> {
if (!this.organization.canDeleteAssignedCollections) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("missingPermissions")
);
return;
}
const deleteRequest = new CollectionBulkDeleteRequest(this.collectionIds, this.organization.id);
return await this.apiService.deleteManyCollections(deleteRequest);
}
private close(result: BulkDeleteDialogResult) {
this.dialogRef.close(result);
}
}

View File

@ -0,0 +1,25 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../../shared";
import { BulkDeleteDialogComponent } from "./bulk-delete-dialog/bulk-delete-dialog.component";
import { BulkMoveDialogComponent } from "./bulk-move-dialog/bulk-move-dialog.component";
import { BulkRestoreDialogComponent } from "./bulk-restore-dialog/bulk-restore-dialog.component";
import { BulkShareDialogComponent } from "./bulk-share-dialog/bulk-share-dialog.component";
@NgModule({
imports: [SharedModule],
declarations: [
BulkDeleteDialogComponent,
BulkMoveDialogComponent,
BulkRestoreDialogComponent,
BulkShareDialogComponent,
],
exports: [
BulkDeleteDialogComponent,
BulkMoveDialogComponent,
BulkRestoreDialogComponent,
BulkShareDialogComponent,
],
})
export class BulkDialogsModule {}

View File

@ -0,0 +1,24 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="small">
<span bitDialogTitle>
{{ "moveSelected" | i18n }}
</span>
<span bitDialogContent>
<p>{{ "moveSelectedItemsDesc" | i18n: cipherIds.length }}</p>
<bit-form-field>
<bit-label for="folder">{{ "folder" | i18n }}</bit-label>
<select bitInput formControlName="folderId">
<option *ngFor="let f of folders$ | async" [ngValue]="f.id">{{ f.name }}</option>
</select>
</bit-form-field>
</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton bitFormButton type="submit" buttonType="primary">
{{ "save" | i18n }}
</button>
<button bitButton bitFormButton type="button" buttonType="secondary" (click)="cancel()">
{{ "cancel" | i18n }}
</button>
</div>
</bit-dialog>
</form>

View File

@ -0,0 +1,85 @@
import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject, OnInit } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";
import { firstValueFrom, Observable } from "rxjs";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { FolderView } from "@bitwarden/common/models/view/folder.view";
import { DialogService } from "@bitwarden/components";
export interface BulkMoveDialogParams {
cipherIds?: string[];
}
export enum BulkMoveDialogResult {
Moved = "moved",
Canceled = "canceled",
}
/**
* Strongly typed helper to open a BulkMoveDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export const openBulkMoveDialog = (
dialogService: DialogService,
config: DialogConfig<BulkMoveDialogParams>
) => {
return dialogService.open<BulkMoveDialogResult, BulkMoveDialogParams>(
BulkMoveDialogComponent,
config
);
};
@Component({
selector: "vault-bulk-move-dialog",
templateUrl: "bulk-move-dialog.component.html",
})
export class BulkMoveDialogComponent implements OnInit {
cipherIds: string[] = [];
formGroup = this.formBuilder.group({
folderId: ["", [Validators.required]],
});
folders$: Observable<FolderView[]>;
constructor(
@Inject(DIALOG_DATA) params: BulkMoveDialogParams,
private dialogRef: DialogRef<BulkMoveDialogResult>,
private cipherService: CipherService,
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService,
private folderService: FolderService,
private formBuilder: FormBuilder
) {
this.cipherIds = params.cipherIds ?? [];
}
async ngOnInit() {
this.folders$ = this.folderService.folderViews$;
this.formGroup.patchValue({
folderId: (await firstValueFrom(this.folders$))[0].id,
});
}
protected cancel() {
this.close(BulkMoveDialogResult.Canceled);
}
protected submit = async () => {
if (this.formGroup.invalid) {
return;
}
await this.cipherService.moveManyWithServer(this.cipherIds, this.formGroup.value.folderId);
this.platformUtilsService.showToast("success", null, this.i18nService.t("movedItems"));
this.close(BulkMoveDialogResult.Moved);
};
private close(result: BulkMoveDialogResult) {
this.dialogRef.close(result);
}
}

View File

@ -0,0 +1,14 @@
<bit-simple-dialog>
<span bitDialogTitle>
{{ "restoreSelected" | i18n }}
</span>
<span bitDialogContent>
{{ "restoreSelectedItemsDesc" | i18n: cipherIds.length }}
</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton type="submit" buttonType="primary" [bitAction]="submit">
{{ "restore" | i18n }}
</button>
<button bitButton type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
</div>
</bit-simple-dialog>

View File

@ -0,0 +1,63 @@
import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { DialogService } from "@bitwarden/components";
export interface BulkRestoreDialogParams {
cipherIds: string[];
}
export enum BulkRestoreDialogResult {
Restored = "restored",
Canceled = "canceled",
}
/**
* Strongly typed helper to open a BulkRestoreDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export const openBulkRestoreDialog = (
dialogService: DialogService,
config: DialogConfig<BulkRestoreDialogParams>
) => {
return dialogService.open<BulkRestoreDialogResult, BulkRestoreDialogParams>(
BulkRestoreDialogComponent,
config
);
};
@Component({
selector: "vault-bulk-restore-dialog",
templateUrl: "bulk-restore-dialog.component.html",
})
export class BulkRestoreDialogComponent {
cipherIds: string[];
constructor(
@Inject(DIALOG_DATA) params: BulkRestoreDialogParams,
private dialogRef: DialogRef<BulkRestoreDialogResult>,
private cipherService: CipherService,
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService
) {
this.cipherIds = params.cipherIds ?? [];
}
submit = async () => {
await this.cipherService.restoreManyWithServer(this.cipherIds);
this.platformUtilsService.showToast("success", null, this.i18nService.t("restoredItems"));
this.close(BulkRestoreDialogResult.Restored);
};
protected cancel() {
this.close(BulkRestoreDialogResult.Canceled);
}
private close(result: BulkRestoreDialogResult) {
this.dialogRef.close(result);
}
}

View File

@ -0,0 +1,73 @@
<bit-dialog>
<span bitDialogTitle>
{{ "moveSelectedToOrg" | i18n }}
</span>
<span bitDialogContent>
<p>{{ "moveManyToOrgDesc" | i18n }}</p>
<p>
{{
"moveSelectedItemsCountDesc"
| i18n: this.ciphers.length:shareableCiphers.length:nonShareableCount
}}
</p>
<bit-form-field>
<bit-label for="organization">{{ "organization" | i18n }}</bit-label>
<select
bitInput
[(ngModel)]="organizationId"
id="organization"
(change)="filterCollections()"
>
<option *ngFor="let o of organizations" [ngValue]="o.id">{{ o.name }}</option>
</select>
</bit-form-field>
<div class="d-flex">
<label class="tw-mb-1 tw-block tw-font-semibold tw-text-main">{{
"collections" | i18n
}}</label>
<div class="tw-ml-auto tw-flex tw-gap-2" *ngIf="collections && collections.length">
<button bitLink type="button" (click)="selectAll(true)" class="tw-px-2">
{{ "selectAll" | i18n }}
</button>
<button bitLink type="button" (click)="selectAll(false)" class="tw-px-2">
{{ "unselectAll" | i18n }}
</button>
</div>
</div>
<div *ngIf="!collections || !collections.length">
{{ "noCollectionsInList" | i18n }}
</div>
<table
class="table table-hover table-list mb-0"
*ngIf="collections && collections.length"
id="collections"
>
<tbody>
<tr *ngFor="let c of collections; let i = index" (click)="check(c)">
<td class="table-list-checkbox">
<input
bitInput
type="checkbox"
[(ngModel)]="c.checked"
name="Collection[{{ i }}].Checked"
attr.aria-label="Check {{ c.name }}"
appStopProp
/>
</td>
<td>
{{ c.name }}
</td>
</tr>
</tbody>
</table>
</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton type="submit" buttonType="primary" [bitAction]="submit">
{{ "save" | i18n }}
</button>
<button bitButton type="button" buttonType="secondary" (click)="cancel()">
{{ "cancel" | i18n }}
</button>
</div>
</bit-dialog>

View File

@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject, OnInit } from "@angular/core";
import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
@ -10,32 +11,61 @@ import { Organization } from "@bitwarden/common/models/domain/organization";
import { CipherView } from "@bitwarden/common/models/view/cipher.view";
import { CollectionView } from "@bitwarden/common/models/view/collection.view";
import { Checkable, isChecked } from "@bitwarden/common/types/checkable";
import { DialogService } from "@bitwarden/components";
export interface BulkShareDialogParams {
ciphers: CipherView[];
organizationId?: string;
}
export enum BulkShareDialogResult {
Shared = "shared",
Canceled = "canceled",
}
/**
* Strongly typed helper to open a BulkShareDialog
* @param dialogService Instance of the dialog service that will be used to open the dialog
* @param config Configuration for the dialog
*/
export const openBulkShareDialog = (
dialogService: DialogService,
config: DialogConfig<BulkShareDialogParams>
) => {
return dialogService.open<BulkShareDialogResult, BulkShareDialogParams>(
BulkShareDialogComponent,
config
);
};
@Component({
selector: "app-vault-bulk-share",
templateUrl: "bulk-share.component.html",
selector: "vault-bulk-share-dialog",
templateUrl: "bulk-share-dialog.component.html",
})
export class BulkShareComponent implements OnInit {
@Input() ciphers: CipherView[] = [];
@Input() organizationId: string;
@Output() onShared = new EventEmitter();
export class BulkShareDialogComponent implements OnInit {
ciphers: CipherView[] = [];
organizationId: string;
nonShareableCount = 0;
collections: Checkable<CollectionView>[] = [];
organizations: Organization[] = [];
shareableCiphers: CipherView[] = [];
formPromise: Promise<void>;
private writeableCollections: CollectionView[] = [];
constructor(
@Inject(DIALOG_DATA) params: BulkShareDialogParams,
private dialogRef: DialogRef<BulkShareDialogResult>,
private cipherService: CipherService,
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService,
private collectionService: CollectionService,
private organizationService: OrganizationService,
private logService: LogService
) {}
) {
this.ciphers = params.ciphers ?? [];
this.organizationId = params.organizationId;
}
async ngOnInit() {
this.shareableCiphers = this.ciphers.filter(
@ -66,16 +96,14 @@ export class BulkShareComponent implements OnInit {
}
}
async submit() {
submit = async () => {
const checkedCollectionIds = this.collections.filter(isChecked).map((c) => c.id);
try {
this.formPromise = this.cipherService.shareManyWithServer(
await this.cipherService.shareManyWithServer(
this.shareableCiphers,
this.organizationId,
checkedCollectionIds
);
await this.formPromise;
this.onShared.emit();
const orgName =
this.organizations.find((o) => o.id === this.organizationId)?.name ??
this.i18nService.t("organization");
@ -84,10 +112,11 @@ export class BulkShareComponent implements OnInit {
null,
this.i18nService.t("movedItemsToOrg", orgName)
);
this.close(BulkShareDialogResult.Shared);
} catch (e) {
this.logService.error(e);
}
}
};
check(c: Checkable<CollectionView>, select?: boolean) {
c.checked = select == null ? !c.checked : select;
@ -112,4 +141,12 @@ export class BulkShareComponent implements OnInit {
}
return false;
}
protected cancel() {
this.close(BulkShareDialogResult.Canceled);
}
private close(result: BulkShareDialogResult) {
this.dialogRef.close(result);
}
}

View File

@ -1,55 +0,0 @@
<div class="dropdown mr-2" appListDropdown>
<button
class="btn btn-sm btn-outline-secondary dropdown-toggle"
type="button"
id="bulkActionsButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
appA11yTitle="{{ 'options' | i18n }}"
>
<i class="bwi bwi-cog" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
<button
class="dropdown-item"
appStopClick
(click)="bulkMove()"
*ngIf="!deleted && !organization"
>
<i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
{{ "moveSelected" | i18n }}
</button>
<button
class="dropdown-item"
appStopClick
(click)="bulkShare()"
*ngIf="!deleted && !organization"
>
<i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
{{ "moveSelectedToOrg" | i18n }}
</button>
<button class="dropdown-item" (click)="bulkRestore()" *ngIf="deleted && !organization">
<i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
{{ "restoreSelected" | i18n }}
</button>
<button class="dropdown-item text-danger" (click)="bulkDelete()">
<i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
{{ (deleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" appStopClick (click)="selectAll(true)">
<i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
{{ "selectAll" | i18n }}
</button>
<button class="dropdown-item" appStopClick (click)="selectAll(false)">
<i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
{{ "unselectAll" | i18n }}
</button>
</div>
</div>
<ng-template #bulkDeleteTemplate></ng-template>
<ng-template #bulkRestoreTemplate></ng-template>
<ng-template #bulkMoveTemplate></ng-template>
<ng-template #bulkShareTemplate></ng-template>

View File

@ -1,172 +0,0 @@
import { Component, Input, ViewChild, ViewContainerRef } from "@angular/core";
import { ModalService } from "@bitwarden/angular/services/modal.service";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
import { CipherRepromptType } from "@bitwarden/common/enums/cipherRepromptType";
import { Organization } from "@bitwarden/common/models/domain/organization";
import { BulkDeleteComponent } from "./bulk-delete.component";
import { BulkMoveComponent } from "./bulk-move.component";
import { BulkRestoreComponent } from "./bulk-restore.component";
import { BulkShareComponent } from "./bulk-share.component";
import { VaultItemsComponent } from "./vault-items.component";
@Component({
selector: "app-vault-bulk-actions",
templateUrl: "bulk-actions.component.html",
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class BulkActionsComponent {
@Input() vaultItemsComponent: VaultItemsComponent;
@Input() deleted: boolean;
@Input() organization: Organization;
@ViewChild("bulkDeleteTemplate", { read: ViewContainerRef, static: true })
bulkDeleteModalRef: ViewContainerRef;
@ViewChild("bulkRestoreTemplate", { read: ViewContainerRef, static: true })
bulkRestoreModalRef: ViewContainerRef;
@ViewChild("bulkMoveTemplate", { read: ViewContainerRef, static: true })
bulkMoveModalRef: ViewContainerRef;
@ViewChild("bulkShareTemplate", { read: ViewContainerRef, static: true })
bulkShareModalRef: ViewContainerRef;
constructor(
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService,
private modalService: ModalService,
private passwordRepromptService: PasswordRepromptService
) {}
async bulkDelete() {
if (!(await this.promptPassword())) {
return;
}
const selectedIds = this.vaultItemsComponent.getSelectedIds();
if (selectedIds.length === 0) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("nothingSelected")
);
return;
}
const [modal] = await this.modalService.openViewRef(
BulkDeleteComponent,
this.bulkDeleteModalRef,
(comp) => {
comp.permanent = this.deleted;
comp.cipherIds = selectedIds;
comp.organization = this.organization;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
comp.onDeleted.subscribe(async () => {
modal.close();
await this.vaultItemsComponent.refresh();
});
}
);
}
async bulkRestore() {
if (!(await this.promptPassword())) {
return;
}
const selectedIds = this.vaultItemsComponent.getSelectedIds();
if (selectedIds.length === 0) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("nothingSelected")
);
return;
}
const [modal] = await this.modalService.openViewRef(
BulkRestoreComponent,
this.bulkRestoreModalRef,
(comp) => {
comp.cipherIds = selectedIds;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
comp.onRestored.subscribe(async () => {
modal.close();
await this.vaultItemsComponent.refresh();
});
}
);
}
async bulkShare() {
if (!(await this.promptPassword())) {
return;
}
const selectedCiphers = this.vaultItemsComponent.getSelected();
if (selectedCiphers.length === 0) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("nothingSelected")
);
return;
}
const [modal] = await this.modalService.openViewRef(
BulkShareComponent,
this.bulkShareModalRef,
(comp) => {
comp.ciphers = selectedCiphers;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
comp.onShared.subscribe(async () => {
modal.close();
await this.vaultItemsComponent.refresh();
});
}
);
}
async bulkMove() {
if (!(await this.promptPassword())) {
return;
}
const selectedIds = this.vaultItemsComponent.getSelectedIds();
if (selectedIds.length === 0) {
this.platformUtilsService.showToast(
"error",
this.i18nService.t("errorOccurred"),
this.i18nService.t("nothingSelected")
);
return;
}
const [modal] = await this.modalService.openViewRef(
BulkMoveComponent,
this.bulkMoveModalRef,
(comp) => {
comp.cipherIds = selectedIds;
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
comp.onMoved.subscribe(async () => {
modal.close();
await this.vaultItemsComponent.refresh();
});
}
);
}
selectAll(select: boolean) {
this.vaultItemsComponent.selectAll(select);
}
private async promptPassword() {
const selectedCiphers = this.vaultItemsComponent.getSelected();
const notProtected = !selectedCiphers.find(
(cipher) => cipher.reprompt !== CipherRepromptType.None
);
return notProtected || (await this.passwordRepromptService.showPasswordPrompt());
}
}

Some files were not shown because too many files have changed in this diff Show More