From 09c3bc8f1b529a973d4ce3c660a92ed6c7976d65 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Wed, 2 Nov 2022 09:57:25 -0700 Subject: [PATCH] [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 eca337e89bb0be4600af4351640636aa8a498cff. * [EC-8] Create and export shared reports module * [EC-8] Use shared reports module in orgs * [EC-8] Use takeUntil pattern * [EC-8] Move org reporting module out of old modules folder * [EC-8] Move org billing module out of old modules folder * [EC-8] Fix some remaining merge conflicts * [EC-8] Move maxWidth into 'extend' key for Tailwind config * [EC-8] Remove unused module * [EC-8] Rename org report list component * Prettier Co-authored-by: Vincent Salucci * [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 helper for nested SSO form groups. * [EC-19] Attribute source of ControlsOf 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 * [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 * [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 Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Co-authored-by: Thomas Rittson * [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 4d83b81d824de467719e1cff68c0f22c1264d89d. * 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 Co-authored-by: Vincent Salucci Co-authored-by: Andreas Coroiu Co-authored-by: Jake Fink Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com> Co-authored-by: Thomas Rittson --- apps/web/.eslintrc.json | 2 + apps/web/src/app/app.component.ts | 20 +- apps/web/src/app/core/event.service.ts | 8 +- apps/web/src/app/core/policy-list.service.ts | 2 +- .../adjust-subscription.component.html | 0 .../adjust-subscription.component.ts | 0 .../billing-sync-api-key.component.html | 0 .../billing-sync-api-key.component.ts | 0 .../change-plan.component.html | 0 .../change-plan.component.ts | 0 .../download-license.component.html | 0 .../download-license.component.ts | 0 ...zation-billing-history-view.component.html | 27 + ...nization-billing-history-view.component.ts | 51 ++ .../organization-billing-routing.module.ts | 48 ++ .../organization-billing-tab.component.html | 33 ++ .../organization-billing-tab.component.ts | 14 + .../billing/organization-billing.module.ts | 26 + .../organization-subscription.component.html | 0 .../organization-subscription.component.ts | 47 +- .../subscription-hidden.icon.ts | 0 .../access-selector.component.html | 136 +++++ .../access-selector.component.spec.ts | 250 ++++++++ .../access-selector.component.ts | 290 ++++++++++ .../access-selector/access-selector.models.ts | 107 ++++ .../access-selector/access-selector.module.ts | 13 + .../access-selector.stories.ts | 302 ++++++++++ .../components/access-selector/index.ts | 3 + .../access-selector/user-type.pipe.ts | 29 + .../organization-layout.component.html | 71 +-- .../layouts/organization-layout.component.ts | 60 +- .../manage/events.component.html | 100 ++-- .../organizations/manage/events.component.ts | 37 +- .../organizations/manage/groups.component.ts | 2 +- .../manage/manage.component.html | 36 +- .../manage/people.component.html | 6 +- .../organizations/navigation-permissions.ts | 0 .../organization-routing.module.ts | 161 +----- .../app/organizations/organization.module.ts | 11 + .../src/app/organizations/policies/index.ts | 12 + .../policies.component.html | 0 .../policies.component.ts | 2 +- .../organizations/policies/policies.module.ts | 46 ++ .../policy-edit.component.html | 0 .../policy-edit.component.ts | 2 +- .../organization-reporting-routing.module.ts | 87 +++ .../organization-reporting.module.ts | 14 + .../reporting/reporting.component.html | 30 + .../reporting/reporting.component.ts | 36 ++ .../reporting/reports-home.component.html | 20 + .../reporting/reports-home.component.ts | 65 +++ .../settings/account.component.html | 37 +- .../settings/account.component.ts | 8 - .../src/app/organizations/settings/index.ts | 2 + .../organization-billing.component.html | 212 ------- .../organization-billing.component.ts | 153 ----- .../organization-settings-routing.module.ts | 52 ++ .../settings/organization-settings.module.ts | 21 + .../settings/settings.component.html | 45 +- .../settings/settings.component.ts | 38 +- ...families-for-enterprise-setup.component.ts | 2 +- apps/web/src/app/oss-routing.module.ts | 4 +- apps/web/src/app/reports/index.ts | 4 +- .../reports/pages/reports-home.component.ts | 3 +- apps/web/src/app/reports/reports.module.ts | 7 +- apps/web/src/app/reports/reports.ts | 2 +- apps/web/src/app/reports/shared/index.ts | 3 + .../{ => shared}/models/report-entry.ts | 0 .../{ => shared}/models/report-variant.ts | 0 .../report-card/report-card.component.html | 2 +- .../report-card/report-card.component.ts | 0 .../report-card/report-card.stories.ts | 4 +- .../report-list/report-list.component.html | 0 .../report-list/report-list.component.ts | 0 .../report-list/report-list.stories.ts | 6 +- .../reports/shared/reports-shared.module.ts | 14 + .../billing-history-view.component.html | 27 + ...t.ts => billing-history-view.component.ts} | 25 +- .../settings/billing-history.component.html | 65 +++ .../app/settings/billing-history.component.ts | 41 ++ .../settings/payment-method.component.html | 85 ++- .../app/settings/payment-method.component.ts | 124 +++- .../settings/subscription-routing.module.ts | 4 +- .../settings/two-factor-setup.component.html | 13 +- .../user-billing-history.component.html | 98 ---- .../src/app/shared/loose-components.module.ts | 71 +-- apps/web/src/app/shared/shared.module.ts | 11 +- .../tools/import-export/import.component.html | 2 +- .../organization-filter.component.html | 8 - apps/web/src/locales/en/messages.json | 120 +++- .../components/base-cva.component.ts | 7 +- .../input-text-readonly.component.html | 26 - .../input-text-readonly.component.ts | 25 - .../components/input-text.component.html | 33 -- .../components/input-text.component.ts | 48 -- .../components/select.component.html | 19 - .../components/select.component.ts | 14 - .../organizations/manage/sso.component.html | 533 ++++++++++-------- .../app/organizations/manage/sso.component.ts | 157 +++--- .../organizations-routing.module.ts | 10 +- .../app/organizations/organizations.module.ts | 14 +- .../src/directives/copy-click.directive.ts | 16 + .../src/directives/launch-click.directive.ts | 19 + libs/angular/src/jslib.module.ts | 6 + libs/angular/src/types/controls-of.ts | 20 + .../src/utils/form-selection-list.spec.ts | 253 +++++++++ libs/angular/src/utils/form-selection-list.ts | 201 +++++++ .../angular/src/validators/dirty.validator.ts | 9 - .../organization.service.abstraction.ts | 44 +- libs/common/src/models/api/sso-config.api.ts | 2 +- .../request/organization-update.request.ts | 4 + .../organization/organization-sso.request.ts | 1 + .../src/models/response/billing.response.ts | 4 + .../organization/organization-sso.response.ts | 2 + .../common/src/models/view/sso-config.view.ts | 2 +- .../src/form-field/error-summary.component.ts | 4 + .../src/form-field/error.component.ts | 2 + libs/components/src/index.ts | 1 + .../multi-select/models/select-item-view.ts | 4 +- libs/components/src/table/row.directive.ts | 18 +- libs/components/src/table/table.stories.ts | 19 +- .../tabs/shared/tab-list-item.directive.ts | 29 +- libs/components/tailwind.config.base.js | 5 +- 123 files changed, 3493 insertions(+), 1577 deletions(-) rename apps/web/src/app/organizations/{settings => billing}/adjust-subscription.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/adjust-subscription.component.ts (100%) rename apps/web/src/app/organizations/{settings => billing}/billing-sync-api-key.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/billing-sync-api-key.component.ts (100%) rename apps/web/src/app/organizations/{settings => billing}/change-plan.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/change-plan.component.ts (100%) rename apps/web/src/app/organizations/{settings => billing}/download-license.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/download-license.component.ts (100%) create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history-view.component.html create mode 100644 apps/web/src/app/organizations/billing/organization-billing-history-view.component.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing-routing.module.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing-tab.component.html create mode 100644 apps/web/src/app/organizations/billing/organization-billing-tab.component.ts create mode 100644 apps/web/src/app/organizations/billing/organization-billing.module.ts rename apps/web/src/app/organizations/{settings => billing}/organization-subscription.component.html (100%) rename apps/web/src/app/organizations/{settings => billing}/organization-subscription.component.ts (93%) rename apps/web/src/app/organizations/{settings => billing}/subscription-hidden.icon.ts (100%) create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.component.html create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.component.spec.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.component.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.models.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.module.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/access-selector.stories.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/index.ts create mode 100644 apps/web/src/app/organizations/components/access-selector/user-type.pipe.ts create mode 100644 apps/web/src/app/organizations/navigation-permissions.ts create mode 100644 apps/web/src/app/organizations/organization.module.ts create mode 100644 apps/web/src/app/organizations/policies/index.ts rename apps/web/src/app/organizations/{manage => policies}/policies.component.html (100%) rename apps/web/src/app/organizations/{manage => policies}/policies.component.ts (98%) create mode 100644 apps/web/src/app/organizations/policies/policies.module.ts rename apps/web/src/app/organizations/{manage => policies}/policy-edit.component.html (100%) rename apps/web/src/app/organizations/{manage => policies}/policy-edit.component.ts (97%) create mode 100644 apps/web/src/app/organizations/reporting/organization-reporting-routing.module.ts create mode 100644 apps/web/src/app/organizations/reporting/organization-reporting.module.ts create mode 100644 apps/web/src/app/organizations/reporting/reporting.component.html create mode 100644 apps/web/src/app/organizations/reporting/reporting.component.ts create mode 100644 apps/web/src/app/organizations/reporting/reports-home.component.html create mode 100644 apps/web/src/app/organizations/reporting/reports-home.component.ts create mode 100644 apps/web/src/app/organizations/settings/index.ts delete mode 100644 apps/web/src/app/organizations/settings/organization-billing.component.html create mode 100644 apps/web/src/app/organizations/settings/organization-settings-routing.module.ts create mode 100644 apps/web/src/app/organizations/settings/organization-settings.module.ts create mode 100644 apps/web/src/app/reports/shared/index.ts rename apps/web/src/app/reports/{ => shared}/models/report-entry.ts (100%) rename apps/web/src/app/reports/{ => shared}/models/report-variant.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.component.html (74%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.component.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-card/report-card.stories.ts (88%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.component.html (100%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.component.ts (100%) rename apps/web/src/app/reports/{ => shared}/report-list/report-list.stories.ts (84%) create mode 100644 apps/web/src/app/reports/shared/reports-shared.module.ts create mode 100644 apps/web/src/app/settings/billing-history-view.component.html rename apps/web/src/app/settings/{user-billing-history.component.ts => billing-history-view.component.ts} (53%) create mode 100644 apps/web/src/app/settings/billing-history.component.html create mode 100644 apps/web/src/app/settings/billing-history.component.ts delete mode 100644 apps/web/src/app/settings/user-billing-history.component.html delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.html delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/input-text-readonly.component.ts delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/input-text.component.html delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/input-text.component.ts delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/select.component.html delete mode 100644 bitwarden_license/bit-web/src/app/organizations/components/select.component.ts create mode 100644 libs/angular/src/directives/copy-click.directive.ts create mode 100644 libs/angular/src/directives/launch-click.directive.ts create mode 100644 libs/angular/src/types/controls-of.ts create mode 100644 libs/angular/src/utils/form-selection-list.spec.ts create mode 100644 libs/angular/src/utils/form-selection-list.ts delete mode 100644 libs/angular/src/validators/dirty.validator.ts diff --git a/apps/web/.eslintrc.json b/apps/web/.eslintrc.json index 6c519d70ae..69dae5e732 100644 --- a/apps/web/.eslintrc.json +++ b/apps/web/.eslintrc.json @@ -10,6 +10,8 @@ "**/app/core/*", "**/reports/*", "**/app/shared/*", + "**/organizations/settings/*", + "**/organizations/policies/*", "@bitwarden/web-vault/*", "src/**/*" ], diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index b1700a8551..9bd0fda6fc 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -27,15 +27,17 @@ import { SyncService } from "@bitwarden/common/abstractions/sync/sync.service.ab import { VaultTimeoutService } from "@bitwarden/common/abstractions/vaultTimeout/vaultTimeout.service"; import { PolicyListService, RouterService } from "./core"; -import { DisableSendPolicy } from "./organizations/policies/disable-send.component"; -import { MasterPasswordPolicy } from "./organizations/policies/master-password.component"; -import { PasswordGeneratorPolicy } from "./organizations/policies/password-generator.component"; -import { PersonalOwnershipPolicy } from "./organizations/policies/personal-ownership.component"; -import { RequireSsoPolicy } from "./organizations/policies/require-sso.component"; -import { ResetPasswordPolicy } from "./organizations/policies/reset-password.component"; -import { SendOptionsPolicy } from "./organizations/policies/send-options.component"; -import { SingleOrgPolicy } from "./organizations/policies/single-org.component"; -import { TwoFactorAuthenticationPolicy } from "./organizations/policies/two-factor-authentication.component"; +import { + DisableSendPolicy, + MasterPasswordPolicy, + PasswordGeneratorPolicy, + PersonalOwnershipPolicy, + RequireSsoPolicy, + ResetPasswordPolicy, + SendOptionsPolicy, + SingleOrgPolicy, + TwoFactorAuthenticationPolicy, +} from "./organizations/policies"; const BroadcasterSubscriptionId = "AppComponent"; const IdleTimeout = 60000 * 10; // 10 minutes diff --git a/apps/web/src/app/core/event.service.ts b/apps/web/src/app/core/event.service.ts index 6205418810..4c4e488ff0 100644 --- a/apps/web/src/app/core/event.service.ts +++ b/apps/web/src/app/core/event.service.ts @@ -479,16 +479,14 @@ export class EventService implements OnInit, OnDestroy { private formatGroupId(ev: EventResponse) { const shortId = this.getShortId(ev.groupId); const a = this.makeAnchor(shortId); - a.setAttribute( - "href", - "#/organizations/" + ev.organizationId + "/manage/groups?search=" + shortId - ); + a.setAttribute("href", "#/organizations/" + ev.organizationId + "/groups?search=" + shortId); return a.outerHTML; } private formatCollectionId(ev: EventResponse) { const shortId = this.getShortId(ev.collectionId); const a = this.makeAnchor(shortId); + // TODO: Update view/edit collection link after EC-14 is completed a.setAttribute( "href", "#/organizations/" + ev.organizationId + "/manage/collections?search=" + shortId @@ -503,7 +501,7 @@ export class EventService implements OnInit, OnDestroy { "href", "#/organizations/" + ev.organizationId + - "/manage/people?search=" + + "/members?search=" + shortId + "&viewEvents=" + ev.organizationUserId diff --git a/apps/web/src/app/core/policy-list.service.ts b/apps/web/src/app/core/policy-list.service.ts index 70857ef819..bb20700690 100644 --- a/apps/web/src/app/core/policy-list.service.ts +++ b/apps/web/src/app/core/policy-list.service.ts @@ -1,4 +1,4 @@ -import { BasePolicy } from "../organizations/policies/base-policy.component"; +import { BasePolicy } from "../organizations/policies"; export class PolicyListService { private policies: BasePolicy[] = []; diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.html b/apps/web/src/app/organizations/billing/adjust-subscription.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.html rename to apps/web/src/app/organizations/billing/adjust-subscription.component.html diff --git a/apps/web/src/app/organizations/settings/adjust-subscription.component.ts b/apps/web/src/app/organizations/billing/adjust-subscription.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/adjust-subscription.component.ts rename to apps/web/src/app/organizations/billing/adjust-subscription.component.ts diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.html b/apps/web/src/app/organizations/billing/billing-sync-api-key.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/billing-sync-api-key.component.html rename to apps/web/src/app/organizations/billing/billing-sync-api-key.component.html diff --git a/apps/web/src/app/organizations/settings/billing-sync-api-key.component.ts b/apps/web/src/app/organizations/billing/billing-sync-api-key.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/billing-sync-api-key.component.ts rename to apps/web/src/app/organizations/billing/billing-sync-api-key.component.ts diff --git a/apps/web/src/app/organizations/settings/change-plan.component.html b/apps/web/src/app/organizations/billing/change-plan.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.html rename to apps/web/src/app/organizations/billing/change-plan.component.html diff --git a/apps/web/src/app/organizations/settings/change-plan.component.ts b/apps/web/src/app/organizations/billing/change-plan.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/change-plan.component.ts rename to apps/web/src/app/organizations/billing/change-plan.component.ts diff --git a/apps/web/src/app/organizations/settings/download-license.component.html b/apps/web/src/app/organizations/billing/download-license.component.html similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.html rename to apps/web/src/app/organizations/billing/download-license.component.html diff --git a/apps/web/src/app/organizations/settings/download-license.component.ts b/apps/web/src/app/organizations/billing/download-license.component.ts similarity index 100% rename from apps/web/src/app/organizations/settings/download-license.component.ts rename to apps/web/src/app/organizations/billing/download-license.component.ts diff --git a/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html new file mode 100644 index 0000000000..6622245ad1 --- /dev/null +++ b/apps/web/src/app/organizations/billing/organization-billing-history-view.component.html @@ -0,0 +1,27 @@ +
+

+ {{ "billingHistory" | i18n }} +

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

{{ "eventLogs" | i18n }}

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

{{ "noEventsInList" | i18n }}

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

{{ "people" | i18n }}

-
+
+

{{ "members" | i18n }}

+
@@ -87,31 +77,6 @@ {{ "rotateApiKey" | i18n }} -
-

{{ "taxInformation" | i18n }}

-
-

{{ "taxInformationDesc" | i18n }}

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

{{ "dangerZone" | i18n }}

diff --git a/apps/web/src/app/organizations/settings/account.component.ts b/apps/web/src/app/organizations/settings/account.component.ts index ca3cb55991..7e685ea9c8 100644 --- a/apps/web/src/app/organizations/settings/account.component.ts +++ b/apps/web/src/app/organizations/settings/account.component.ts @@ -14,7 +14,6 @@ import { OrganizationResponse } from "@bitwarden/common/models/response/organiza import { ApiKeyComponent } from "../../settings/api-key.component"; import { PurgeVaultComponent } from "../../settings/purge-vault.component"; -import { TaxInfoComponent } from "../../settings/tax-info.component"; import { DeleteOrganizationComponent } from "./delete-organization.component"; @@ -32,7 +31,6 @@ export class AccountComponent { apiKeyModalRef: ViewContainerRef; @ViewChild("rotateApiKeyTemplate", { read: ViewContainerRef, static: true }) rotateApiKeyModalRef: ViewContainerRef; - @ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent; selfHosted = false; canManageBilling = true; @@ -100,12 +98,6 @@ export class AccountComponent { } } - async submitTaxInfo() { - this.taxFormPromise = this.taxInfo.submitTaxInfo(); - await this.taxFormPromise; - this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated")); - } - async deleteOrganization() { await this.modalService.openViewRef( DeleteOrganizationComponent, diff --git a/apps/web/src/app/organizations/settings/index.ts b/apps/web/src/app/organizations/settings/index.ts new file mode 100644 index 0000000000..289bf3d632 --- /dev/null +++ b/apps/web/src/app/organizations/settings/index.ts @@ -0,0 +1,2 @@ +export * from "./organization-settings.module"; +export { DeleteOrganizationComponent } from "./delete-organization.component"; diff --git a/apps/web/src/app/organizations/settings/organization-billing.component.html b/apps/web/src/app/organizations/settings/organization-billing.component.html deleted file mode 100644 index ce13772296..0000000000 --- a/apps/web/src/app/organizations/settings/organization-billing.component.html +++ /dev/null @@ -1,212 +0,0 @@ -
-

- {{ "billing" | i18n }} -

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

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

-

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

-

{{ "creditAppliedDesc" | i18n }}

- - - -

{{ "paymentMethod" | i18n }}

-

{{ "noPaymentMethod" | i18n }}

- - -

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

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

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

- - - - -

{{ "invoices" | i18n }}

-

{{ "noInvoices" | i18n }}

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

{{ "transactions" | i18n }}

-

{{ "noTransactions" | i18n }}

- - - - - - - - - -
{{ t.createdDate | date: "mediumDate" }} - - {{ "chargeNoun" | i18n }} - - {{ "refundNoun" | i18n }} - - - {{ t.details }} - - {{ t.amount | currency: "$" }} -
- * {{ "chargesStatement" | i18n: "BITWARDEN" }} - diff --git a/apps/web/src/app/organizations/settings/organization-billing.component.ts b/apps/web/src/app/organizations/settings/organization-billing.component.ts index 99121482ff..e69de29bb2 100644 --- a/apps/web/src/app/organizations/settings/organization-billing.component.ts +++ b/apps/web/src/app/organizations/settings/organization-billing.component.ts @@ -1,153 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { ActivatedRoute } from "@angular/router"; - -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; -import { LogService } from "@bitwarden/common/abstractions/log.service"; -import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction"; -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; -import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; -import { TransactionType } from "@bitwarden/common/enums/transactionType"; -import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.request"; -import { BillingResponse } from "@bitwarden/common/models/response/billing.response"; - -@Component({ - selector: "app-org-billing", - templateUrl: "./organization-billing.component.html", -}) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class OrganizationBillingComponent implements OnInit { - loading = false; - firstLoaded = false; - showAdjustPayment = false; - showAddCredit = false; - billing: BillingResponse; - paymentMethodType = PaymentMethodType; - transactionType = TransactionType; - organizationId: string; - verifyAmount1: number; - verifyAmount2: number; - - verifyBankPromise: Promise; - - // TODO - Make sure to properly split out the billing/invoice and payment method/account during org admin refresh - - constructor( - private i18nService: I18nService, - private route: ActivatedRoute, - private platformUtilsService: PlatformUtilsService, - private logService: LogService, - private organizationApiService: OrganizationApiServiceAbstraction - ) {} - - async ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.parent.params.subscribe(async (params) => { - this.organizationId = params.organizationId; - await this.load(); - this.firstLoaded = true; - }); - } - - async load() { - if (this.loading) { - return; - } - this.loading = true; - if (this.organizationId != null) { - this.billing = await this.organizationApiService.getBilling(this.organizationId); - } - this.loading = false; - } - - async verifyBank() { - if (this.loading) { - return; - } - - try { - const request = new VerifyBankRequest(); - request.amount1 = this.verifyAmount1; - request.amount2 = this.verifyAmount2; - this.verifyBankPromise = this.organizationApiService.verifyBank(this.organizationId, request); - await this.verifyBankPromise; - this.platformUtilsService.showToast( - "success", - null, - this.i18nService.t("verifiedBankAccount") - ); - this.load(); - } catch (e) { - this.logService.error(e); - } - } - - addCredit() { - if (this.paymentSourceInApp) { - this.platformUtilsService.showDialog( - this.i18nService.t("cannotPerformInAppPurchase"), - this.i18nService.t("addCredit"), - null, - null, - "warning" - ); - return; - } - this.showAddCredit = true; - } - - closeAddCredit(load: boolean) { - this.showAddCredit = false; - if (load) { - this.load(); - } - } - - changePayment() { - if (this.paymentSourceInApp) { - this.platformUtilsService.showDialog( - this.i18nService.t("cannotPerformInAppPurchase"), - this.i18nService.t("changePaymentMethod"), - null, - null, - "warning" - ); - return; - } - this.showAdjustPayment = true; - } - - closePayment(load: boolean) { - this.showAdjustPayment = false; - if (load) { - this.load(); - } - } - - get isCreditBalance() { - return this.billing == null || this.billing.balance <= 0; - } - - get creditOrBalance() { - return Math.abs(this.billing != null ? this.billing.balance : 0); - } - - get paymentSource() { - return this.billing != null ? this.billing.paymentSource : null; - } - - get paymentSourceInApp() { - return ( - this.paymentSource != null && - (this.paymentSource.type === PaymentMethodType.AppleInApp || - this.paymentSource.type === PaymentMethodType.GoogleInApp) - ); - } - - get invoices() { - return this.billing != null ? this.billing.invoices : null; - } - - get transactions() { - return this.billing != null ? this.billing.transactions : null; - } -} diff --git a/apps/web/src/app/organizations/settings/organization-settings-routing.module.ts b/apps/web/src/app/organizations/settings/organization-settings-routing.module.ts new file mode 100644 index 0000000000..1d4a4df852 --- /dev/null +++ b/apps/web/src/app/organizations/settings/organization-settings-routing.module.ts @@ -0,0 +1,52 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; + +import { canAccessSettingsTab } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; +import { Organization } from "@bitwarden/common/models/domain/organization"; + +import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard"; +import { PoliciesComponent } from "../policies"; + +import { AccountComponent } from "./account.component"; +import { SettingsComponent } from "./settings.component"; +import { TwoFactorSetupComponent } from "./two-factor-setup.component"; + +const routes: Routes = [ + { + path: "", + component: SettingsComponent, + canActivate: [OrganizationPermissionsGuard], + data: { organizationPermissions: canAccessSettingsTab }, + children: [ + { path: "", pathMatch: "full", redirectTo: "account" }, + { path: "account", component: AccountComponent, data: { titleId: "organizationInfo" } }, + { + path: "two-factor", + component: TwoFactorSetupComponent, + data: { titleId: "twoStepLogin" }, + }, + { + path: "policies", + component: PoliciesComponent, + canActivate: [OrganizationPermissionsGuard], + data: { + organizationPermissions: (org: Organization) => org.canManagePolicies, + titleId: "policies", + }, + }, + { + path: "tools", + loadChildren: () => + import("../tools/import-export/org-import-export.module").then( + (m) => m.OrganizationImportExportModule + ), + }, + ], + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class OrganizationSettingsRoutingModule {} diff --git a/apps/web/src/app/organizations/settings/organization-settings.module.ts b/apps/web/src/app/organizations/settings/organization-settings.module.ts new file mode 100644 index 0000000000..1c5b72552c --- /dev/null +++ b/apps/web/src/app/organizations/settings/organization-settings.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; + +import { LooseComponentsModule, SharedModule } from "../../shared"; +import { PoliciesModule } from "../policies"; + +import { AccountComponent } from "./account.component"; +import { DeleteOrganizationComponent } from "./delete-organization.component"; +import { OrganizationSettingsRoutingModule } from "./organization-settings-routing.module"; +import { SettingsComponent } from "./settings.component"; +import { TwoFactorSetupComponent } from "./two-factor-setup.component"; + +@NgModule({ + imports: [SharedModule, LooseComponentsModule, PoliciesModule, OrganizationSettingsRoutingModule], + declarations: [ + SettingsComponent, + AccountComponent, + DeleteOrganizationComponent, + TwoFactorSetupComponent, + ], +}) +export class OrganizationSettingsModule {} diff --git a/apps/web/src/app/organizations/settings/settings.component.html b/apps/web/src/app/organizations/settings/settings.component.html index ad9824ef73..d81d7553dc 100644 --- a/apps/web/src/app/organizations/settings/settings.component.html +++ b/apps/web/src/app/organizations/settings/settings.component.html @@ -5,27 +5,56 @@
{{ "settings" | i18n }}
- {{ "myOrganization" | i18n }} - - - {{ "subscription" | i18n }} + {{ "organizationInfo" | i18n }} - {{ "billing" | i18n }} + {{ "policies" | i18n }} {{ "twoStepLogin" | i18n }} + + {{ "importData" | i18n }} + + + {{ "exportVault" | i18n }} + + + {{ "singleSignOn" | i18n }} + + + {{ "scim" | i18n }} +
diff --git a/apps/web/src/app/organizations/settings/settings.component.ts b/apps/web/src/app/organizations/settings/settings.component.ts index 20ba0a0316..9988e65dd7 100644 --- a/apps/web/src/app/organizations/settings/settings.component.ts +++ b/apps/web/src/app/organizations/settings/settings.component.ts @@ -1,30 +1,34 @@ -import { Component } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; +import { Subject, switchMap, takeUntil } from "rxjs"; import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction"; -import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; +import { Organization } from "@bitwarden/common/models/domain/organization"; @Component({ selector: "app-org-settings", templateUrl: "settings.component.html", }) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class SettingsComponent { - access2fa = false; - showBilling: boolean; +export class SettingsComponent implements OnInit, OnDestroy { + organization: Organization; - constructor( - private route: ActivatedRoute, - private organizationService: OrganizationService, - private platformUtilsService: PlatformUtilsService - ) {} + private destroy$ = new Subject(); + + constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {} ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.params.subscribe(async (params) => { - const organization = await this.organizationService.get(params.organizationId); - this.showBilling = !this.platformUtilsService.isSelfHost() && organization.canManageBilling; - this.access2fa = organization.use2fa; - }); + this.route.params + .pipe( + switchMap(async (params) => await this.organizationService.get(params.organizationId)), + takeUntil(this.destroy$) + ) + .subscribe((organization) => { + this.organization = organization; + }); + } + + ngOnDestroy(): void { + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts index 58286c55fc..b0db38a850 100644 --- a/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts +++ b/apps/web/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts @@ -16,8 +16,8 @@ import { ProductType } from "@bitwarden/common/enums/productType"; import { Organization } from "@bitwarden/common/models/domain/organization"; import { OrganizationSponsorshipRedeemRequest } from "@bitwarden/common/models/request/organization/organization-sponsorship-redeem.request"; +import { DeleteOrganizationComponent } from "../../organizations/settings"; import { OrganizationPlansComponent } from "../../settings/organization-plans.component"; -import { DeleteOrganizationComponent } from "../settings/delete-organization.component"; @Component({ selector: "families-for-enterprise-setup", diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 6e1c4e569e..f77043a777 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -28,7 +28,7 @@ import { VerifyRecoverDeleteComponent } from "./accounts/verify-recover-delete.c import { HomeGuard } from "./guards/home.guard"; import { FrontendLayoutComponent } from "./layouts/frontend-layout.component"; import { UserLayoutComponent } from "./layouts/user-layout.component"; -import { OrganizationsRoutingModule } from "./organizations/organization-routing.module"; +import { OrganizationModule } from "./organizations/organization.module"; import { AcceptFamilySponsorshipComponent } from "./organizations/sponsorships/accept-family-sponsorship.component"; import { FamiliesForEnterpriseSetupComponent } from "./organizations/sponsorships/families-for-enterprise-setup.component"; import { ReportsModule } from "./reports"; @@ -251,7 +251,7 @@ const routes: Routes = [ }, { path: "organizations", - loadChildren: () => OrganizationsRoutingModule, + loadChildren: () => OrganizationModule, }, ]; diff --git a/apps/web/src/app/reports/index.ts b/apps/web/src/app/reports/index.ts index 0e922232d6..474e8ba810 100644 --- a/apps/web/src/app/reports/index.ts +++ b/apps/web/src/app/reports/index.ts @@ -1,3 +1,3 @@ export * from "./reports.module"; -export * from "./models/report-entry"; -export * from "./models/report-variant"; +export * from "./shared"; +export * from "./reports"; diff --git a/apps/web/src/app/reports/pages/reports-home.component.ts b/apps/web/src/app/reports/pages/reports-home.component.ts index 422b945444..81058c6094 100644 --- a/apps/web/src/app/reports/pages/reports-home.component.ts +++ b/apps/web/src/app/reports/pages/reports-home.component.ts @@ -2,9 +2,8 @@ import { Component, OnInit } from "@angular/core"; import { StateService } from "@bitwarden/common/abstractions/state.service"; -import { ReportEntry } from "../models/report-entry"; -import { ReportVariant } from "../models/report-variant"; import { reports, ReportType } from "../reports"; +import { ReportEntry, ReportVariant } from "../shared"; @Component({ selector: "app-reports-home", diff --git a/apps/web/src/app/reports/reports.module.ts b/apps/web/src/app/reports/reports.module.ts index 77a42fa816..f4150f2382 100644 --- a/apps/web/src/app/reports/reports.module.ts +++ b/apps/web/src/app/reports/reports.module.ts @@ -10,19 +10,16 @@ import { ReportsHomeComponent } from "./pages/reports-home.component"; import { ReusedPasswordsReportComponent } from "./pages/reused-passwords-report.component"; import { UnsecuredWebsitesReportComponent } from "./pages/unsecured-websites-report.component"; import { WeakPasswordsReportComponent } from "./pages/weak-passwords-report.component"; -import { ReportCardComponent } from "./report-card/report-card.component"; -import { ReportListComponent } from "./report-list/report-list.component"; import { ReportsLayoutComponent } from "./reports-layout.component"; import { ReportsRoutingModule } from "./reports-routing.module"; +import { ReportsSharedModule } from "./shared"; @NgModule({ - imports: [CommonModule, SharedModule, ReportsRoutingModule], + imports: [CommonModule, SharedModule, ReportsSharedModule, ReportsRoutingModule], declarations: [ BreachReportComponent, ExposedPasswordsReportComponent, InactiveTwoFactorReportComponent, - ReportCardComponent, - ReportListComponent, ReportsLayoutComponent, ReportsHomeComponent, ReusedPasswordsReportComponent, diff --git a/apps/web/src/app/reports/reports.ts b/apps/web/src/app/reports/reports.ts index 43d086d418..6f802e5478 100644 --- a/apps/web/src/app/reports/reports.ts +++ b/apps/web/src/app/reports/reports.ts @@ -4,7 +4,7 @@ import { ReportInactiveTwoFactor } from "./icons/report-inactive-two-factor.icon import { ReportReusedPasswords } from "./icons/report-reused-passwords.icon"; import { ReportUnsecuredWebsites } from "./icons/report-unsecured-websites.icon"; import { ReportWeakPasswords } from "./icons/report-weak-passwords.icon"; -import { ReportEntry } from "./models/report-entry"; +import { ReportEntry } from "./shared"; export enum ReportType { ExposedPasswords = "exposedPasswords", diff --git a/apps/web/src/app/reports/shared/index.ts b/apps/web/src/app/reports/shared/index.ts new file mode 100644 index 0000000000..eeadbd423f --- /dev/null +++ b/apps/web/src/app/reports/shared/index.ts @@ -0,0 +1,3 @@ +export * from "./models/report-entry"; +export * from "./models/report-variant"; +export * from "./reports-shared.module"; diff --git a/apps/web/src/app/reports/models/report-entry.ts b/apps/web/src/app/reports/shared/models/report-entry.ts similarity index 100% rename from apps/web/src/app/reports/models/report-entry.ts rename to apps/web/src/app/reports/shared/models/report-entry.ts diff --git a/apps/web/src/app/reports/models/report-variant.ts b/apps/web/src/app/reports/shared/models/report-variant.ts similarity index 100% rename from apps/web/src/app/reports/models/report-variant.ts rename to apps/web/src/app/reports/shared/models/report-variant.ts diff --git a/apps/web/src/app/reports/report-card/report-card.component.html b/apps/web/src/app/reports/shared/report-card/report-card.component.html similarity index 74% rename from apps/web/src/app/reports/report-card/report-card.component.html rename to apps/web/src/app/reports/shared/report-card/report-card.component.html index 6fc33a46d5..229bc6a42d 100644 --- a/apps/web/src/app/reports/report-card/report-card.component.html +++ b/apps/web/src/app/reports/shared/report-card/report-card.component.html @@ -1,5 +1,5 @@
diff --git a/apps/web/src/app/reports/report-card/report-card.component.ts b/apps/web/src/app/reports/shared/report-card/report-card.component.ts similarity index 100% rename from apps/web/src/app/reports/report-card/report-card.component.ts rename to apps/web/src/app/reports/shared/report-card/report-card.component.ts diff --git a/apps/web/src/app/reports/report-card/report-card.stories.ts b/apps/web/src/app/reports/shared/report-card/report-card.stories.ts similarity index 88% rename from apps/web/src/app/reports/report-card/report-card.stories.ts rename to apps/web/src/app/reports/shared/report-card/report-card.stories.ts index 2ab9d8962e..52aa46fe28 100644 --- a/apps/web/src/app/reports/report-card/report-card.stories.ts +++ b/apps/web/src/app/reports/shared/report-card/report-card.stories.ts @@ -4,8 +4,8 @@ import { Meta, Story, moduleMetadata } from "@storybook/angular"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { BadgeModule, IconModule } from "@bitwarden/components"; -import { PremiumBadgeComponent } from "../../components/premium-badge.component"; -import { PreloadedEnglishI18nModule } from "../../tests/preloaded-english-i18n.module"; +import { PremiumBadgeComponent } from "../../../components/premium-badge.component"; +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; import { ReportVariant } from "../models/report-variant"; import { ReportCardComponent } from "./report-card.component"; diff --git a/apps/web/src/app/reports/report-list/report-list.component.html b/apps/web/src/app/reports/shared/report-list/report-list.component.html similarity index 100% rename from apps/web/src/app/reports/report-list/report-list.component.html rename to apps/web/src/app/reports/shared/report-list/report-list.component.html diff --git a/apps/web/src/app/reports/report-list/report-list.component.ts b/apps/web/src/app/reports/shared/report-list/report-list.component.ts similarity index 100% rename from apps/web/src/app/reports/report-list/report-list.component.ts rename to apps/web/src/app/reports/shared/report-list/report-list.component.ts diff --git a/apps/web/src/app/reports/report-list/report-list.stories.ts b/apps/web/src/app/reports/shared/report-list/report-list.stories.ts similarity index 84% rename from apps/web/src/app/reports/report-list/report-list.stories.ts rename to apps/web/src/app/reports/shared/report-list/report-list.stories.ts index d52621ac62..d1cadbd356 100644 --- a/apps/web/src/app/reports/report-list/report-list.stories.ts +++ b/apps/web/src/app/reports/shared/report-list/report-list.stories.ts @@ -4,11 +4,11 @@ import { Meta, Story, moduleMetadata } from "@storybook/angular"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { BadgeModule, IconModule } from "@bitwarden/components"; -import { PremiumBadgeComponent } from "../../components/premium-badge.component"; -import { PreloadedEnglishI18nModule } from "../../tests/preloaded-english-i18n.module"; +import { PremiumBadgeComponent } from "../../../components/premium-badge.component"; +import { PreloadedEnglishI18nModule } from "../../../tests/preloaded-english-i18n.module"; +import { reports } from "../../reports"; import { ReportVariant } from "../models/report-variant"; import { ReportCardComponent } from "../report-card/report-card.component"; -import { reports } from "../reports"; import { ReportListComponent } from "./report-list.component"; diff --git a/apps/web/src/app/reports/shared/reports-shared.module.ts b/apps/web/src/app/reports/shared/reports-shared.module.ts new file mode 100644 index 0000000000..1cdf4a3127 --- /dev/null +++ b/apps/web/src/app/reports/shared/reports-shared.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +import { SharedModule } from "../../shared/shared.module"; + +import { ReportCardComponent } from "./report-card/report-card.component"; +import { ReportListComponent } from "./report-list/report-list.component"; + +@NgModule({ + imports: [CommonModule, SharedModule], + declarations: [ReportCardComponent, ReportListComponent], + exports: [ReportCardComponent, ReportListComponent], +}) +export class ReportsSharedModule {} diff --git a/apps/web/src/app/settings/billing-history-view.component.html b/apps/web/src/app/settings/billing-history-view.component.html new file mode 100644 index 0000000000..2f5703ed78 --- /dev/null +++ b/apps/web/src/app/settings/billing-history-view.component.html @@ -0,0 +1,27 @@ +
+

+ {{ "billingHistory" | i18n }} +

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

{{ "invoices" | i18n }}

+

{{ "noInvoices" | i18n }}

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

{{ "transactions" | i18n }}

+

{{ "noTransactions" | i18n }}

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

{{ "paymentMethod" | i18n }}

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

{{ "paymentMethod" | i18n }}

{{ "noPaymentMethod" | i18n }}

+ +

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

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

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

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

{{ "taxInformation" | i18n }}

+

{{ "taxInformationDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + +
+ diff --git a/apps/web/src/app/settings/payment-method.component.ts b/apps/web/src/app/settings/payment-method.component.ts index 4dd2018095..1d17fb78ab 100644 --- a/apps/web/src/app/settings/payment-method.component.ts +++ b/apps/web/src/app/settings/payment-method.component.ts @@ -1,37 +1,76 @@ -import { Component, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { Component, OnInit, ViewChild } from "@angular/core"; +import { FormBuilder, FormControl, Validators } from "@angular/forms"; +import { ActivatedRoute, Router } from "@angular/router"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { LogService } from "@bitwarden/common/abstractions/log.service"; +import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType"; +import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.request"; import { BillingPaymentResponse } from "@bitwarden/common/models/response/billing-payment.response"; +import { OrganizationResponse } from "@bitwarden/common/models/response/organization.response"; + +import { TaxInfoComponent } from "./tax-info.component"; @Component({ selector: "app-payment-method", templateUrl: "payment-method.component.html", }) +// eslint-disable-next-line rxjs-angular/prefer-takeuntil export class PaymentMethodComponent implements OnInit { + @ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent; + loading = false; firstLoaded = false; showAdjustPayment = false; showAddCredit = false; billing: BillingPaymentResponse; + org: OrganizationResponse; paymentMethodType = PaymentMethodType; + organizationId: string; + + verifyBankPromise: Promise; + taxFormPromise: Promise; + + verifyBankForm = this.formBuilder.group({ + amount1: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + amount2: new FormControl(null, [ + Validators.required, + Validators.max(99), + Validators.min(0), + ]), + }); constructor( protected apiService: ApiService, + protected organizationApiService: OrganizationApiServiceAbstraction, protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService, - private router: Router + private router: Router, + private logService: LogService, + private route: ActivatedRoute, + private formBuilder: FormBuilder ) {} async ngOnInit() { - if (this.platformUtilsService.isSelfHost()) { - this.router.navigate(["/settings/subscription"]); - } - await this.load(); - this.firstLoaded = true; + // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe + this.route.params.subscribe(async (params) => { + if (params.organizationId) { + this.organizationId = params.organizationId; + } else if (this.platformUtilsService.isSelfHost()) { + this.router.navigate(["/settings/subscription"]); + return; + } + + await this.load(); + this.firstLoaded = true; + }); } async load() { @@ -39,7 +78,16 @@ export class PaymentMethodComponent implements OnInit { return; } this.loading = true; - this.billing = await this.apiService.getUserBillingPayment(); + + if (this.forOrganization) { + const billingPromise = this.organizationApiService.getBilling(this.organizationId); + const orgPromise = this.organizationApiService.get(this.organizationId); + + [this.billing, this.org] = await Promise.all([billingPromise, orgPromise]); + } else { + this.billing = await this.apiService.getUserBillingPayment(); + } + this.loading = false; } @@ -85,6 +133,34 @@ export class PaymentMethodComponent implements OnInit { } } + async verifyBank() { + if (this.loading || !this.forOrganization) { + return; + } + + try { + const request = new VerifyBankRequest(); + request.amount1 = this.verifyBankForm.value.amount1; + request.amount2 = this.verifyBankForm.value.amount2; + this.verifyBankPromise = this.organizationApiService.verifyBank(this.organizationId, request); + await this.verifyBankPromise; + this.platformUtilsService.showToast( + "success", + null, + this.i18nService.t("verifiedBankAccount") + ); + this.load(); + } catch (e) { + this.logService.error(e); + } + } + + async submitTaxInfo() { + this.taxFormPromise = this.taxInfo.submitTaxInfo(); + await this.taxFormPromise; + this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated")); + } + get isCreditBalance() { return this.billing == null || this.billing.balance <= 0; } @@ -97,6 +173,36 @@ export class PaymentMethodComponent implements OnInit { return this.billing != null ? this.billing.paymentSource : null; } + get forOrganization() { + return this.organizationId != null; + } + + get headerClass() { + return this.forOrganization ? ["page-header"] : ["tabbed-header"]; + } + + get paymentSourceClasses() { + if (this.paymentSource == null) { + return []; + } + switch (this.paymentSource.type) { + case PaymentMethodType.Card: + return ["bwi-credit-card"]; + case PaymentMethodType.BankAccount: + return ["bwi-bank"]; + case PaymentMethodType.Check: + return ["bwi-money"]; + case PaymentMethodType.AppleInApp: + return ["bwi-apple text-muted"]; + case PaymentMethodType.GoogleInApp: + return ["bwi-google text-muted"]; + case PaymentMethodType.PayPal: + return ["bwi-paypal text-primary"]; + default: + return []; + } + } + get paymentSourceInApp() { return ( this.paymentSource != null && diff --git a/apps/web/src/app/settings/subscription-routing.module.ts b/apps/web/src/app/settings/subscription-routing.module.ts index ae1e58cb16..7d83026d2d 100644 --- a/apps/web/src/app/settings/subscription-routing.module.ts +++ b/apps/web/src/app/settings/subscription-routing.module.ts @@ -1,10 +1,10 @@ import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; +import { BillingHistoryViewComponent } from "./billing-history-view.component"; import { PaymentMethodComponent } from "./payment-method.component"; import { PremiumComponent } from "./premium.component"; import { SubscriptionComponent } from "./subscription.component"; -import { UserBillingHistoryComponent } from "./user-billing-history.component"; import { UserSubscriptionComponent } from "./user-subscription.component"; const routes: Routes = [ @@ -31,7 +31,7 @@ const routes: Routes = [ }, { path: "billing-history", - component: UserBillingHistoryComponent, + component: BillingHistoryViewComponent, data: { titleId: "billingHistory" }, }, ], diff --git a/apps/web/src/app/settings/two-factor-setup.component.html b/apps/web/src/app/settings/two-factor-setup.component.html index 27fc2990e6..921a465fab 100644 --- a/apps/web/src/app/settings/two-factor-setup.component.html +++ b/apps/web/src/app/settings/two-factor-setup.component.html @@ -1,8 +1,17 @@
-

{{ "twoStepLogin" | i18n }}

+

{{ "twoStepLogin" | i18n }}

+

{{ "twoStepLoginEnforcement" | i18n }}

{{ "twoStepLoginDesc" | i18n }}

-

{{ "twoStepLoginOrganizationDesc" | i18n }}

+ +

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

+

{{ "twoStepLoginOrganizationSsoDesc" | i18n }}

+

{{ "twoStepLoginRecoveryWarning" | i18n }}

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

{{ "invoices" | i18n }}

-

{{ "noInvoices" | i18n }}

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

{{ "transactions" | i18n }}

-

{{ "noTransactions" | i18n }}

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

{{ "openIdConnectConfig" | i18n }}

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

{{ "samlSpConfig" | i18n }}

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

{{ "samlIdpConfig" | i18n }}

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