From 38d8fbdb5a7498b77d445bded30be00b9661a054 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Fri, 23 Feb 2024 18:22:45 +0100 Subject: [PATCH] Vertical Vault Navigation (#6957) * WIP admin console layout * Update icons * Migrate more things * Migrate the last pages * Move header to web * Fix story not working * Convert header component to standalone * Migrate org layout to standalone * Enable org switcher * Add AC to product switcher * Migrate provider portal to vertical nav * Migrate PM * Prettier fixes * Change AC and PP to use secondary variant layout & update logos * Remove full width setting * Remove commented code * Add header to report pages * Add provider portal banner * Fix banner for billing pages * Move vault title to header * Prevent scrollbar jumping * Move send button to header * Replace search input with bit-search * Remove unused files and css * Add banner * Tweak storage option * Fix duplicate nav item after merge * Migrate banner state to state provider framework * [AC-2078] Fix device approvals header * [PM-5861] Hide AC from product switcher for users that do not have access * [PM-5860] Fix Vault and Send page headers * [AC-2075] Fix missing link on reporting nav group * [AC-2079] Hide Payment Method and Billing History pages for self-hosted instances * [AC-2090] Hide reports/event log nav items for users that do not have permission * [AC-2092] Fix missing provider portal option in product switcher on page load * Add null check for organization in org layout component * [AC-2094] Fix missing page header for new client orgs page * [AC-2093] Update New client button styling * Fix failing test after merge * [PM-2087] Use disk-local for web layout banner * [PM-6041] Update banner copy to read "web app" * [PM-6094] Update banner link to marketing URL * [PM-6114] add CL container component to VVR pages (#7802) * create bit-container component * add container to all page components * Fix linting errors after merge with main * Fix product switcher stories * Fix web-header stories * mock org state properly in product switcher stories (#7956) * refactor: move web layout migration banner logic into a service (#7958) * make CL codeowner of web header files * move migration banner logic to service; update stories * [PM-5862] Ensure a sync has run before hiding navigation links * Remove leftover banner global state * Re-add dropped selfHosted ngIf * Add rel noreferrer * Remove comment --------- Co-authored-by: Shane Melton Co-authored-by: Will Martin --- .github/CODEOWNERS | 1 + .../organization-switcher.component.html | 67 -- .../organization-switcher.component.ts | 35 - .../admin-console/icons/admin-console-logo.ts | 5 + .../icons/provider-portal-logo.ts | 5 + .../organization-layout.component.html | 166 +++- .../layouts/organization-layout.component.ts | 37 +- .../manage/events.component.html | 3 +- .../manage/groups.component.html | 230 +++-- .../members/people.component.html | 637 +++++++------ .../organizations/organization.module.ts | 3 + .../policies/policies.component.html | 51 +- .../organization-reporting-routing.module.ts | 2 - .../organization-reporting.module.ts | 11 +- .../reporting/reporting.component.html | 30 - .../reporting/reports-home.component.html | 4 +- .../settings/account.component.html | 225 ++--- .../settings/org-import.component.html | 21 + .../settings/org-import.component.ts | 56 ++ .../organization-settings-routing.module.ts | 9 +- .../settings/organization-settings.module.ts | 3 +- .../organizations/tools/tools.component.html | 79 -- .../providers/providers.component.html | 11 +- .../create-organization.component.html | 17 +- .../settings/create-organization.component.ts | 3 +- .../sponsored-families.component.html | 207 ++-- apps/web/src/app/app.component.ts | 18 - .../web/src/app/auth/login/login.component.ts | 3 - .../settings/account/account.component.html | 49 +- .../emergency-access.component.html | 470 ++++----- .../settings/security/security.component.html | 33 +- .../settings/two-factor-setup.component.html | 157 +-- .../trial-initiation.component.spec.ts | 2 + .../individual/individual-billing.module.ts | 3 +- .../individual/subscription.component.html | 31 +- ...zation-billing-history-view.component.html | 32 +- .../organization-billing-routing.module.ts | 2 - .../organization-billing-tab.component.html | 33 - .../organization-billing.module.ts | 4 +- ...nization-subscription-cloud.component.html | 489 +++++----- ...ation-subscription-selfhost.component.html | 252 +++-- .../billing/shared/billing-shared.module.ts | 3 +- .../shared/payment-method.component.html | 249 ++--- .../payment-method-banners.component.ts | 2 +- .../web/src/app/layouts/footer.component.html | 9 - apps/web/src/app/layouts/footer.component.ts | 19 - .../src/app/layouts/header/header.module.ts | 4 +- .../layouts/header/web-header.component.html | 15 + .../layouts/header/web-header.component.ts | 3 + .../app/layouts/header/web-header.stories.ts | 27 +- .../web-layout-migration-banner.service.ts | 29 + .../web/src/app/layouts/navbar.component.html | 100 -- apps/web/src/app/layouts/navbar.component.ts | 75 -- .../org-switcher}/org-switcher.component.html | 0 .../org-switcher}/org-switcher.component.ts | 5 + .../src/app/layouts/password-manager-logo.ts | 5 + .../product-switcher-content.component.ts | 48 +- .../product-switcher.stories.ts | 58 +- .../app/layouts/user-layout.component.html | 45 +- .../src/app/layouts/user-layout.component.ts | 81 +- apps/web/src/app/oss-routing.module.ts | 6 +- .../app/settings/domain-rules.component.html | 207 ++-- .../app/settings/preferences.component.html | 256 +++-- .../src/app/settings/preferences.component.ts | 4 - .../src/app/settings/settings.component.html | 45 - .../src/app/shared/loose-components.module.ts | 28 +- apps/web/src/app/shared/shared.module.ts | 3 + .../src/app/tools/generator.component.html | 891 +++++++++--------- .../tools/import/admin-import.component.ts | 24 - .../tools/import/import-web.component.html | 38 +- .../app/tools/import/import-web.component.ts | 39 +- .../pages/breach-report.component.html | 123 +-- .../exposed-passwords-report.component.html | 145 +-- .../inactive-two-factor-report.component.html | 163 ++-- .../reports/pages/reports-home.component.html | 10 +- .../reused-passwords-report.component.html | 165 ++-- .../unsecured-websites-report.component.html | 141 ++- .../weak-passwords-report.component.html | 165 ++-- .../reports/reports-layout.component.html | 16 +- .../tools/reports/reports-routing.module.ts | 7 +- .../src/app/tools/reports/reports.module.ts | 2 + .../src/app/tools/send/send.component.html | 397 ++++---- apps/web/src/app/tools/send/send.component.ts | 3 +- apps/web/src/app/tools/tools.component.html | 23 - .../tools/vault-export/export.component.html | 193 ++-- .../vault-filter/vault-filter.module.ts | 4 +- .../vault-header/vault-header.component.html | 132 ++- .../vault-header/vault-header.component.ts | 4 + .../individual-vault/vault.component.html | 235 +++-- .../vault-filter/vault-filter.module.ts | 4 +- .../vault-header/vault-header.component.html | 143 ++- .../vault-header/vault-header.component.ts | 4 + .../app/vault/org-vault/vault.component.html | 238 +++-- apps/web/src/locales/en/messages.json | 16 +- apps/web/src/scss/base.scss | 8 - apps/web/src/scss/buttons.scss | 14 - apps/web/src/scss/navigation.scss | 104 -- apps/web/src/scss/styles.scss | 3 +- apps/web/src/scss/tailwind.css | 5 + apps/web/src/scss/variables.scss | 20 - .../device-approvals.component.html | 21 +- .../domain-verification.component.html | 6 +- .../organizations/manage/scim.component.html | 4 +- .../organizations-routing.module.ts | 5 +- .../organizations/organizations.module.ts | 9 +- .../providers/clients/clients.component.html | 45 +- .../create-organization.component.html | 4 +- .../providers/manage/events.component.html | 106 +-- .../providers/manage/manage.component.html | 30 - .../providers/manage/people.component.html | 145 ++- .../providers/providers-layout.component.html | 75 +- .../providers/providers-layout.component.ts | 19 +- .../providers/providers-routing.module.ts | 15 +- .../providers/providers.module.ts | 6 +- .../providers/settings/account.component.html | 5 +- .../settings/settings.component.html | 17 - .../providers/setup/setup.component.html | 2 - .../src/app/auth/sso/sso.component.html | 4 +- .../secrets-manager/layout/layout.module.ts | 6 +- .../platform/abstractions/state.service.ts | 2 - .../src/platform/models/domain/account.ts | 1 - .../src/platform/services/state.service.ts | 21 - .../src/platform/state/state-definitions.ts | 4 + .../src/vault/services/sync/sync.service.ts | 4 +- .../src/container/container.component.html | 3 + .../src/container/container.component.ts | 13 + libs/components/src/container/index.ts | 1 + libs/components/src/index.ts | 1 + 128 files changed, 4228 insertions(+), 4647 deletions(-) delete mode 100644 apps/web/src/app/admin-console/components/organization-switcher.component.html delete mode 100644 apps/web/src/app/admin-console/components/organization-switcher.component.ts create mode 100644 apps/web/src/app/admin-console/icons/admin-console-logo.ts create mode 100644 apps/web/src/app/admin-console/icons/provider-portal-logo.ts delete mode 100644 apps/web/src/app/admin-console/organizations/reporting/reporting.component.html create mode 100644 apps/web/src/app/admin-console/organizations/settings/org-import.component.html create mode 100644 apps/web/src/app/admin-console/organizations/settings/org-import.component.ts delete mode 100644 apps/web/src/app/admin-console/organizations/tools/tools.component.html delete mode 100644 apps/web/src/app/billing/organizations/organization-billing-tab.component.html delete mode 100644 apps/web/src/app/layouts/footer.component.html delete mode 100644 apps/web/src/app/layouts/footer.component.ts create mode 100644 apps/web/src/app/layouts/header/web-layout-migration-banner.service.ts delete mode 100644 apps/web/src/app/layouts/navbar.component.ts rename {bitwarden_license/bit-web/src/app/secrets-manager/layout => apps/web/src/app/layouts/org-switcher}/org-switcher.component.html (100%) rename {bitwarden_license/bit-web/src/app/secrets-manager/layout => apps/web/src/app/layouts/org-switcher}/org-switcher.component.ts (88%) create mode 100644 apps/web/src/app/layouts/password-manager-logo.ts delete mode 100644 apps/web/src/app/settings/settings.component.html delete mode 100644 apps/web/src/app/tools/import/admin-import.component.ts delete mode 100644 apps/web/src/app/tools/tools.component.html delete mode 100644 apps/web/src/scss/navigation.scss delete mode 100644 bitwarden_license/bit-web/src/app/admin-console/providers/manage/manage.component.html delete mode 100644 bitwarden_license/bit-web/src/app/admin-console/providers/settings/settings.component.html create mode 100644 libs/components/src/container/container.component.html create mode 100644 libs/components/src/container/container.component.ts create mode 100644 libs/components/src/container/index.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 4de02e2fcb0..bfce3c15477 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -88,6 +88,7 @@ libs/common/src/autofill @bitwarden/team-autofill-dev ## Component Library ## .storybook @bitwarden/team-component-library libs/components @bitwarden/team-component-library +apps/web/src/app/layouts/header ## Desktop native module ## apps/desktop/desktop_native @bitwarden/team-platform-dev diff --git a/apps/web/src/app/admin-console/components/organization-switcher.component.html b/apps/web/src/app/admin-console/components/organization-switcher.component.html deleted file mode 100644 index 53a4077db69..00000000000 --- a/apps/web/src/app/admin-console/components/organization-switcher.component.html +++ /dev/null @@ -1,67 +0,0 @@ -
- -
-
-
- - {{ "organizationIsDisabled" | i18n }} -
-
-
-
- - {{ "accessingUsingProvider" | i18n: activeOrganization.providerName }} -
-
-
- - - - -
diff --git a/apps/web/src/app/admin-console/components/organization-switcher.component.ts b/apps/web/src/app/admin-console/components/organization-switcher.component.ts deleted file mode 100644 index 97f81412665..00000000000 --- a/apps/web/src/app/admin-console/components/organization-switcher.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, Input, OnInit } from "@angular/core"; -import { map, Observable } from "rxjs"; - -import { - canAccessAdmin, - OrganizationService, -} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; -import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { Utils } from "@bitwarden/common/platform/misc/utils"; - -@Component({ - selector: "app-organization-switcher", - templateUrl: "organization-switcher.component.html", -}) -export class OrganizationSwitcherComponent implements OnInit { - constructor( - private organizationService: OrganizationService, - private i18nService: I18nService, - ) {} - - @Input() activeOrganization: Organization = null; - organizations$: Observable; - - loaded = false; - - async ngOnInit() { - this.organizations$ = this.organizationService.memberOrganizations$.pipe( - canAccessAdmin(this.i18nService), - map((orgs) => orgs.sort(Utils.getSortFunction(this.i18nService, "name"))), - ); - - this.loaded = true; - } -} diff --git a/apps/web/src/app/admin-console/icons/admin-console-logo.ts b/apps/web/src/app/admin-console/icons/admin-console-logo.ts new file mode 100644 index 00000000000..32b2b7a13a5 --- /dev/null +++ b/apps/web/src/app/admin-console/icons/admin-console-logo.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "@bitwarden/components"; + +export const AdminConsoleLogo = svgIcon` + +`; diff --git a/apps/web/src/app/admin-console/icons/provider-portal-logo.ts b/apps/web/src/app/admin-console/icons/provider-portal-logo.ts new file mode 100644 index 00000000000..16f7b05d671 --- /dev/null +++ b/apps/web/src/app/admin-console/icons/provider-portal-logo.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "@bitwarden/components"; + +export const ProviderPortalLogo = svgIcon` + +`; diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html index a2c0f9a9041..c548e528ab7 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html @@ -1,41 +1,125 @@ - - -
-
-
- - - {{ "collections" | i18n }} - - {{ - "vault" | i18n - }} - - {{ - "members" | i18n - }} - {{ - "groups" | i18n - }} - - {{ getReportTabLabel(organization) | i18n }} - - {{ - "billing" | i18n - }} - {{ - "settings" | i18n - }} - -
-
-
- - + + + + + + {{ "accessingUsingProvider" | i18n: organization.providerName }} + + + + + + diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts index f43a9edbdc5..efbcaf292dd 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts @@ -1,7 +1,9 @@ +import { CommonModule } from "@angular/common"; import { Component, OnDestroy, OnInit } from "@angular/core"; -import { ActivatedRoute } from "@angular/router"; +import { ActivatedRoute, RouterModule } from "@angular/router"; import { map, mergeMap, Observable, Subject, takeUntil } from "rxjs"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; import { canAccessBillingTab, canAccessGroupsTab, @@ -13,19 +15,43 @@ import { OrganizationService, } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; + +import { PaymentMethodBannersComponent } from "../../../components/payment-method-banners/payment-method-banners.component"; +import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component"; +import { AdminConsoleLogo } from "../../icons/admin-console-logo"; @Component({ selector: "app-organization-layout", templateUrl: "organization-layout.component.html", + standalone: true, + imports: [ + CommonModule, + RouterModule, + JslibModule, + LayoutComponent, + IconModule, + NavigationModule, + OrgSwitcherComponent, + BannerModule, + PaymentMethodBannersComponent, + ], }) export class OrganizationLayoutComponent implements OnInit, OnDestroy { + protected readonly logo = AdminConsoleLogo; + + protected orgFilter = (org: Organization) => org.isAdmin; + organization$: Observable; + showPaymentAndHistory$: Observable; private _destroy = new Subject(); constructor( private route: ActivatedRoute, private organizationService: OrganizationService, + private platformUtilsService: PlatformUtilsService, ) {} async ngOnInit() { @@ -41,6 +67,15 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { .pipe(getOrganizationById(id)); }), ); + + this.showPaymentAndHistory$ = this.organization$.pipe( + map( + (org) => + !this.platformUtilsService.isSelfHost() && + org?.canViewBillingHistory && + org?.canEditPaymentMethods, + ), + ); } ngOnDestroy() { diff --git a/apps/web/src/app/admin-console/organizations/manage/events.component.html b/apps/web/src/app/admin-console/organizations/manage/events.component.html index f936cc7a863..e5a848aaccf 100644 --- a/apps/web/src/app/admin-console/organizations/manage/events.component.html +++ b/apps/web/src/app/admin-console/organizations/manage/events.component.html @@ -1,5 +1,6 @@ + +
-

{{ "eventLogs" | i18n }}

{{ "from" | i18n }} diff --git a/apps/web/src/app/admin-console/organizations/manage/groups.component.html b/apps/web/src/app/admin-console/organizations/manage/groups.component.html index 0c65c2812dd..f256c29b057 100644 --- a/apps/web/src/app/admin-console/organizations/manage/groups.component.html +++ b/apps/web/src/app/admin-console/organizations/manage/groups.component.html @@ -1,126 +1,114 @@ -
-
-

{{ "groups" | i18n }}

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

{{ "noGroupsInList" | i18n }}

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

{{ "noGroupsInList" | i18n }}

- - - - - - - - {{ "name" | i18n }} - {{ "collections" | i18n }} - - + + + {{ "name" | i18n }} + {{ "collections" | i18n }} + + - - - - - - - - - - - - - - - - - {{ "all" | i18n }} - - - + + + + + + + + + + + + + + + {{ "all" | i18n }} + + + - - - - - - - - - - - - -
+ + + + + + + + + + + + diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html index c99056dbbca..6e8410011b3 100644 --- a/apps/web/src/app/admin-console/organizations/members/people.component.html +++ b/apps/web/src/app/admin-console/organizations/members/people.component.html @@ -1,331 +1,326 @@ -
-
-

{{ "members" | i18n }}

-
- - - {{ "all" | i18n }} {{ allCount }} - + + - - {{ "invited" | i18n }} - {{ invitedCount }} - + + - - {{ "needsConfirmation" | i18n }} - {{ acceptedCount }} - - - - {{ "revoked" | i18n }} - {{ revokedCount }} - - - - - - -
-
- - - {{ "loading" | i18n }} - - + -

{{ "noMembersInList" | i18n }}

- - - {{ "usersNeedConfirmed" | i18n }} - - - - - - - - - {{ "name" | i18n }} - {{ (organization.useGroups ? "groups" : "collections") | i18n }} - {{ "role" | i18n }} - {{ "policies" | i18n }} - - + + {{ "all" | i18n }} {{ allCount }} + - - - - - - - - - - - - - - - - - - - - -
- -
-
- - {{ "invited" | i18n }} - {{ "needsConfirmation" | i18n }} - {{ "revoked" | i18n }} -
-
- {{ u.email }} -
-
-
- + + {{ "invited" | i18n }} + {{ invitedCount }} + - - - {{ "all" | i18n }} - + + {{ "needsConfirmation" | i18n }} + {{ acceptedCount }} + - - {{ u.type | userType }} - + + {{ "revoked" | i18n }} + {{ revokedCount }} + + +
+ + + {{ "loading" | i18n }} + + +

{{ "noMembersInList" | i18n }}

+ + + {{ "usersNeedConfirmed" | i18n }} + + + + + + + + + {{ "name" | i18n }} + {{ (organization.useGroups ? "groups" : "collections") | i18n }} + {{ "role" | i18n }} + {{ "policies" | i18n }} + + - - - - {{ "userUsingTwoStep" | i18n }} - - - - {{ "enrolledAccountRecovery" | i18n }} - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
+ +
+
+ + {{ "invited" | i18n }} + {{ "needsConfirmation" | i18n }} + {{ "revoked" | i18n }} +
+
+ {{ u.email }} +
+
+
+ + + + + {{ "all" | i18n }} + + + + {{ u.type | userType }} + + + + + + {{ "userUsingTwoStep" | i18n }} + + + + {{ "enrolledAccountRecovery" | i18n }} + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - -
+ + + + + + + + diff --git a/apps/web/src/app/admin-console/organizations/organization.module.ts b/apps/web/src/app/admin-console/organizations/organization.module.ts index 32b1df16609..29a7139231e 100644 --- a/apps/web/src/app/admin-console/organizations/organization.module.ts +++ b/apps/web/src/app/admin-console/organizations/organization.module.ts @@ -1,5 +1,7 @@ import { NgModule } from "@angular/core"; +import { LooseComponentsModule } from "../../shared"; + import { CoreOrganizationModule } from "./core"; import { GroupAddEditComponent } from "./manage/group-add-edit.component"; import { GroupsComponent } from "./manage/groups.component"; @@ -13,6 +15,7 @@ import { AccessSelectorModule } from "./shared/components/access-selector"; AccessSelectorModule, CoreOrganizationModule, OrganizationsRoutingModule, + LooseComponentsModule, ], declarations: [GroupsComponent, GroupAddEditComponent], }) diff --git a/apps/web/src/app/admin-console/organizations/policies/policies.component.html b/apps/web/src/app/admin-console/organizations/policies/policies.component.html index 8f2c0760bd1..d4533b59b16 100644 --- a/apps/web/src/app/admin-console/organizations/policies/policies.component.html +++ b/apps/web/src/app/admin-console/organizations/policies/policies.component.html @@ -1,25 +1,26 @@ -
-

{{ "policies" | i18n }}

-
- - - {{ "loading" | i18n }} - - - - - - - -
- {{ p.name | i18n }} - {{ - "on" | i18n - }} - {{ p.description | i18n }} -
- + + + + + + {{ "loading" | i18n }} + + + + + + + +
+ {{ p.name | i18n }} + {{ + "on" | i18n + }} + {{ p.description | i18n }} +
+ + diff --git a/apps/web/src/app/admin-console/organizations/reporting/organization-reporting-routing.module.ts b/apps/web/src/app/admin-console/organizations/reporting/organization-reporting-routing.module.ts index 1d86332a188..1ab386298c3 100644 --- a/apps/web/src/app/admin-console/organizations/reporting/organization-reporting-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/reporting/organization-reporting-routing.module.ts @@ -14,13 +14,11 @@ import { OrganizationPermissionsGuard } from "../guards/org-permissions.guard"; import { OrganizationRedirectGuard } from "../guards/org-redirect.guard"; import { EventsComponent } from "../manage/events.component"; -import { ReportingComponent } from "./reporting.component"; import { ReportsHomeComponent } from "./reports-home.component"; const routes: Routes = [ { path: "", - component: ReportingComponent, canActivate: [OrganizationPermissionsGuard], data: { organizationPermissions: canAccessReportingTab }, children: [ diff --git a/apps/web/src/app/admin-console/organizations/reporting/organization-reporting.module.ts b/apps/web/src/app/admin-console/organizations/reporting/organization-reporting.module.ts index f47cff22653..d17bb0c5995 100644 --- a/apps/web/src/app/admin-console/organizations/reporting/organization-reporting.module.ts +++ b/apps/web/src/app/admin-console/organizations/reporting/organization-reporting.module.ts @@ -1,14 +1,19 @@ import { NgModule } from "@angular/core"; +import { LooseComponentsModule } from "../../../shared"; import { SharedModule } from "../../../shared/shared.module"; import { ReportsSharedModule } from "../../../tools/reports"; import { OrganizationReportingRoutingModule } from "./organization-reporting-routing.module"; -import { ReportingComponent } from "./reporting.component"; import { ReportsHomeComponent } from "./reports-home.component"; @NgModule({ - imports: [SharedModule, ReportsSharedModule, OrganizationReportingRoutingModule], - declarations: [ReportsHomeComponent, ReportingComponent], + imports: [ + SharedModule, + ReportsSharedModule, + OrganizationReportingRoutingModule, + LooseComponentsModule, + ], + declarations: [ReportsHomeComponent], }) export class OrganizationReportingModule {} diff --git a/apps/web/src/app/admin-console/organizations/reporting/reporting.component.html b/apps/web/src/app/admin-console/organizations/reporting/reporting.component.html deleted file mode 100644 index 1e807b98dba..00000000000 --- a/apps/web/src/app/admin-console/organizations/reporting/reporting.component.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
-
-
-
{{ "reporting" | i18n }}
-
- - {{ "eventLogs" | i18n }} - - - {{ "reports" | i18n }} - -
-
-
-
- -
-
-
diff --git a/apps/web/src/app/admin-console/organizations/reporting/reports-home.component.html b/apps/web/src/app/admin-console/organizations/reporting/reports-home.component.html index 941788459f4..801106c001f 100644 --- a/apps/web/src/app/admin-console/organizations/reporting/reports-home.component.html +++ b/apps/web/src/app/admin-console/organizations/reporting/reports-home.component.html @@ -1,7 +1,5 @@ -
-

{{ "reports" | i18n }}

-
+

{{ "orgsReportsDesc" | i18n }}

diff --git a/apps/web/src/app/admin-console/organizations/settings/account.component.html b/apps/web/src/app/admin-console/organizations/settings/account.component.html index 464a7ae850a..7035b976ca8 100644 --- a/apps/web/src/app/admin-console/organizations/settings/account.component.html +++ b/apps/web/src/app/admin-console/organizations/settings/account.component.html @@ -1,116 +1,119 @@ -

{{ "organizationInfo" | i18n }}

-
- - {{ "loading" | i18n }} -
-
-
-
- - {{ "organizationName" | i18n }} - - - - {{ "billingEmail" | i18n }} - - - - {{ "businessName" | i18n }} - - -
-
- - - -
+ + + +
+ + {{ "loading" | i18n }}
- - - -

{{ "apiKey" | i18n }}

-

- {{ "apiKeyDesc" | i18n }} - - {{ "learnMore" | i18n }} - -

- - - -
-

- {{ "collectionManagement" | i18n }} -

-

- {{ "collectionEnhancementsDesc" | i18n }} - - {{ "collectionEnhancementsLearnMore" | i18n }} - -

- +
+ +

{{ "apiKey" | i18n }}

+

+ {{ "apiKeyDesc" | i18n }} + + {{ "learnMore" | i18n }} + +

+ + + +
- {{ "enable" | i18n }} - -
-
-

{{ "collectionManagement" | i18n }}

-

{{ "collectionManagementDesc" | i18n }}

- - {{ "allowAdminAccessToAllCollectionItemsDesc" | i18n }} - - - - {{ "limitCollectionCreationDeletionDesc" | i18n }} - - - +
+
- {{ "save" | i18n }} - -
+

{{ "collectionManagement" | i18n }}

+

{{ "collectionManagementDesc" | i18n }}

+ + {{ "allowAdminAccessToAllCollectionItemsDesc" | i18n }} + + + + {{ "limitCollectionCreationDeletionDesc" | i18n }} + + + + - - - - + + + + - - - + + + + diff --git a/apps/web/src/app/admin-console/organizations/settings/org-import.component.html b/apps/web/src/app/admin-console/organizations/settings/org-import.component.html new file mode 100644 index 00000000000..25efa9ec0c7 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/settings/org-import.component.html @@ -0,0 +1,21 @@ + + + + + + diff --git a/apps/web/src/app/admin-console/organizations/settings/org-import.component.ts b/apps/web/src/app/admin-console/organizations/settings/org-import.component.ts new file mode 100644 index 00000000000..36cfd4230c7 --- /dev/null +++ b/apps/web/src/app/admin-console/organizations/settings/org-import.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { firstValueFrom } from "rxjs"; + +import { + canAccessVaultTab, + OrganizationService, +} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { ImportCollectionServiceAbstraction } from "@bitwarden/importer/core"; +import { ImportComponent } from "@bitwarden/importer/ui"; + +import { LooseComponentsModule, SharedModule } from "../../../shared"; +import { ImportCollectionAdminService } from "../../../tools/import/import-collection-admin.service"; +import { CollectionAdminService } from "../../../vault/core/collection-admin.service"; + +@Component({ + templateUrl: "org-import.component.html", + standalone: true, + imports: [SharedModule, ImportComponent, LooseComponentsModule], + providers: [ + { + provide: ImportCollectionServiceAbstraction, + useClass: ImportCollectionAdminService, + deps: [CollectionAdminService], + }, + ], +}) +export class OrgImportComponent implements OnInit { + protected routeOrgId: string = null; + protected loading = false; + protected disabled = false; + + constructor( + private route: ActivatedRoute, + private organizationService: OrganizationService, + private router: Router, + ) {} + + ngOnInit(): void { + this.routeOrgId = this.route.snapshot.paramMap.get("organizationId"); + } + + /** + * Callback that is called after a successful import. + */ + protected async onSuccessfulImport(organizationId: string): Promise { + const organization = await firstValueFrom(this.organizationService.get$(organizationId)); + if (organization == null) { + return; + } + + if (canAccessVaultTab(organization)) { + await this.router.navigate(["organizations", organizationId, "vault"]); + } + } +} diff --git a/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts b/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts index e2870669658..772e70fc127 100644 --- a/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts +++ b/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts @@ -9,13 +9,11 @@ import { OrganizationRedirectGuard } from "../../organizations/guards/org-redire import { PoliciesComponent } from "../../organizations/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: [ @@ -49,9 +47,7 @@ const routes: Routes = [ { path: "import", loadComponent: () => - import("../../../tools/import/admin-import.component").then( - (mod) => mod.AdminImportComponent, - ), + import("./org-import.component").then((mod) => mod.OrgImportComponent), canActivate: [OrganizationPermissionsGuard], data: { titleId: "importData", @@ -64,6 +60,9 @@ const routes: Routes = [ import("../tools/vault-export/org-vault-export.module").then( (m) => m.OrganizationVaultExportModule, ), + data: { + titleId: "exportVault", + }, }, ], }, diff --git a/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts b/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts index 9eaec0a068e..2a2068d581f 100644 --- a/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts +++ b/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts @@ -6,7 +6,6 @@ import { PoliciesModule } from "../../organizations/policies"; import { AccountComponent } from "./account.component"; import { OrganizationSettingsRoutingModule } from "./organization-settings-routing.module"; -import { SettingsComponent } from "./settings.component"; import { TwoFactorSetupComponent } from "./two-factor-setup.component"; @NgModule({ @@ -17,6 +16,6 @@ import { TwoFactorSetupComponent } from "./two-factor-setup.component"; OrganizationSettingsRoutingModule, AccountFingerprintComponent, ], - declarations: [SettingsComponent, AccountComponent, TwoFactorSetupComponent], + declarations: [AccountComponent, TwoFactorSetupComponent], }) export class OrganizationSettingsModule {} diff --git a/apps/web/src/app/admin-console/organizations/tools/tools.component.html b/apps/web/src/app/admin-console/organizations/tools/tools.component.html deleted file mode 100644 index de83652b463..00000000000 --- a/apps/web/src/app/admin-console/organizations/tools/tools.component.html +++ /dev/null @@ -1,79 +0,0 @@ -
- - - {{ "loading" | i18n }} - - -
-
-
-
{{ "tools" | i18n }}
-
- - {{ "importData" | i18n }} - - - {{ "exportVault" | i18n }} - -
-
-
-
- {{ "reports" | i18n }} -
- - {{ "upgrade" | i18n }} - -
-
-
- - {{ "exposedPasswordsReport" | i18n }} - - - {{ "reusedPasswordsReport" | i18n }} - - - {{ "weakPasswordsReport" | i18n }} - - - {{ "unsecuredWebsitesReport" | i18n }} - - - {{ "inactive2faReport" | i18n }} - -
-
-
-
- -
-
- -
diff --git a/apps/web/src/app/admin-console/providers/providers.component.html b/apps/web/src/app/admin-console/providers/providers.component.html index 967ef54ce84..d07342c85c2 100644 --- a/apps/web/src/app/admin-console/providers/providers.component.html +++ b/apps/web/src/app/admin-console/providers/providers.component.html @@ -1,8 +1,6 @@ - -
-
-

{{ "providers" | i18n }}

-
+ + +

{{ "loading" | i18n }} @@ -29,5 +27,4 @@ -

- + diff --git a/apps/web/src/app/admin-console/settings/create-organization.component.html b/apps/web/src/app/admin-console/settings/create-organization.component.html index f5b4219aa61..105a3e6a251 100644 --- a/apps/web/src/app/admin-console/settings/create-organization.component.html +++ b/apps/web/src/app/admin-console/settings/create-organization.component.html @@ -1,11 +1,6 @@ -
-
-
-
-

{{ "newOrganization" | i18n }}

-
-

{{ "newOrganizationDesc" | i18n }}

- -
-
-
+ + + +

{{ "newOrganizationDesc" | i18n }}

+ + diff --git a/apps/web/src/app/admin-console/settings/create-organization.component.ts b/apps/web/src/app/admin-console/settings/create-organization.component.ts index 5e8aaf8684e..2a060d6d565 100644 --- a/apps/web/src/app/admin-console/settings/create-organization.component.ts +++ b/apps/web/src/app/admin-console/settings/create-organization.component.ts @@ -6,12 +6,13 @@ import { PlanType } from "@bitwarden/common/billing/enums"; import { ProductType } from "@bitwarden/common/enums"; import { OrganizationPlansComponent } from "../../billing"; +import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; @Component({ templateUrl: "create-organization.component.html", standalone: true, - imports: [SharedModule, OrganizationPlansComponent], + imports: [SharedModule, OrganizationPlansComponent, HeaderModule], }) // eslint-disable-next-line rxjs-angular/prefer-takeuntil export class CreateOrganizationComponent implements OnInit { diff --git a/apps/web/src/app/admin-console/settings/sponsored-families.component.html b/apps/web/src/app/admin-console/settings/sponsored-families.component.html index f0151dfddd0..63fa370797a 100644 --- a/apps/web/src/app/admin-console/settings/sponsored-families.component.html +++ b/apps/web/src/app/admin-console/settings/sponsored-families.component.html @@ -1,104 +1,105 @@ -
-

{{ "sponsoredFamilies" | i18n }}

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

- {{ "sponsoredFamiliesEligible" | i18n }} -

-
- {{ "sponsoredFamiliesInclude" | i18n }}: -
    -
  • {{ "sponsoredFamiliesPremiumAccess" | i18n }}
    • -
  • {{ "sponsoredFamiliesSharedCollections" | i18n }}
    • -
-
-
-
- - -
-
- - - - - {{ "cannotSponsorSelf" | i18n }} - - - - {{ "invalidEmail" | i18n }} - -
-
- -
-
- -
- - - - - - - - - - - - - - -
{{ "recipient" | i18n }}{{ "sponsoringOrg" | i18n }}{{ "status" | i18n }}
-
- {{ "sponsoredFamiliesLeaveCopy" | i18n }} + + + + + + {{ "loading" | i18n }} - + +

+ {{ "sponsoredFamiliesEligible" | i18n }} +

+
+ {{ "sponsoredFamiliesInclude" | i18n }}: +
    +
  • {{ "sponsoredFamiliesPremiumAccess" | i18n }}
    • +
  • {{ "sponsoredFamiliesSharedCollections" | i18n }}
    • +
+
+
+
+ + +
+
+ + + + + {{ "cannotSponsorSelf" | i18n }} + + + + {{ "invalidEmail" | i18n }} + +
+
+ +
+
+ +
+ + + + + + + + + + + + + + +
{{ "recipient" | i18n }}{{ "sponsoringOrg" | i18n }}{{ "status" | i18n }}
+
+ {{ "sponsoredFamiliesLeaveCopy" | i18n }} + + + diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index 1a81ce555b7..f9479a92ce3 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -207,11 +207,6 @@ export class AppComponent implements OnDestroy, OnInit { case "showToast": this.showToast(message); break; - case "setFullWidth": - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.setFullWidth(); - break; case "convertAccountToKeyConnector": // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. // eslint-disable-next-line @typescript-eslint/no-floating-promises @@ -243,10 +238,6 @@ export class AppComponent implements OnDestroy, OnInit { new DisableSendPolicy(), new SendOptionsPolicy(), ]); - - // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.setFullWidth(); } ngOnDestroy() { @@ -356,13 +347,4 @@ export class AppComponent implements OnDestroy, OnInit { this.notificationsService.reconnectFromActivity(); } } - - private async setFullWidth() { - const enableFullWidth = await this.stateService.getEnableFullWidth(); - if (enableFullWidth) { - document.body.classList.add("full-width"); - } else { - document.body.classList.remove("full-width"); - } - } } diff --git a/apps/web/src/app/auth/login/login.component.ts b/apps/web/src/app/auth/login/login.component.ts index bdf9f20032f..4440575cd66 100644 --- a/apps/web/src/app/auth/login/login.component.ts +++ b/apps/web/src/app/auth/login/login.component.ts @@ -88,9 +88,6 @@ export class LoginComponent extends BaseLoginComponent implements OnInit { ssoLoginService, webAuthnLoginService, ); - this.onSuccessfulLogin = async () => { - this.messagingService.send("setFullWidth"); - }; this.onSuccessfulLoginNavigate = this.goAfterLogIn; this.showPasswordless = flagEnabled("showPasswordless"); } diff --git a/apps/web/src/app/auth/settings/account/account.component.html b/apps/web/src/app/auth/settings/account/account.component.html index 84c0507e1ad..deb2f0ef301 100644 --- a/apps/web/src/app/auth/settings/account/account.component.html +++ b/apps/web/src/app/auth/settings/account/account.component.html @@ -1,27 +1,28 @@ -
-

{{ "myAccount" | i18n }}

-
- + -
-

{{ "changeEmail" | i18n }}

- -
+ + - - - - - +
+

{{ "changeEmail" | i18n }}

+ +
- - - - - + + + + + + + + + + + + diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html index 48360621043..27bfc673ec4 100644 --- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html +++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html @@ -1,249 +1,265 @@ -
-

{{ "emergencyAccess" | i18n }}

-
-

- {{ "emergencyAccessDesc" | i18n }} - - {{ "learnMore" | i18n }}. - -

+ -

- {{ "warning" | i18n }}: {{ "emergencyAccessOwnerWarning" | i18n }} -

+ +

+ {{ "emergencyAccessDesc" | i18n }} + + {{ "learnMore" | i18n }}. + +

-
-

- {{ "trustedEmergencyContacts" | i18n }} - -

-
- +

+ {{ "warning" | i18n }}: {{ "emergencyAccessOwnerWarning" | i18n }} +

+ +
+

+ {{ "trustedEmergencyContacts" | i18n }} + +

+
+ +
-
- - - - - - + + + - - -
- - - {{ c.email }} - {{ - "invited" | i18n - }} - {{ - "accepted" | i18n - }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} - {{ - "emergencyAccessRecoveryApproved" | i18n - }} - - {{ "view" | i18n }} - {{ - "takeover" | i18n - }} - - {{ c.name }} - - - -
+ + + {{ c.email }} + {{ "invited" | i18n }} - - {{ "resendInvitation" | i18n }} - - - - - - -
+ {{ + "emergencyAccessRecoveryApproved" | i18n + }} - -

{{ "noTrustedContacts" | i18n }}

- - - {{ "loading" | i18n }} + {{ "view" | i18n }} + {{ + "takeover" | i18n + }} + + {{ c.name }} + + + + + + + + + + + + + + + + +

{{ "noTrustedContacts" | i18n }}

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

{{ "designatedEmergencyContacts" | i18n }}

-
+
+

{{ "designatedEmergencyContacts" | i18n }}

+
- - - - - - + + + - - -
- - - {{ c.email }} - {{ - "invited" | i18n - }} - {{ - "accepted" | i18n - }} - {{ "emergencyAccessRecoveryInitiated" | i18n }} - {{ "emergencyAccessRecoveryApproved" | i18n }} - - {{ "view" | i18n }} - {{ - "takeover" | i18n - }} - - {{ c.name }} - - - -
+ + + {{ c.email }} + {{ + "invited" | i18n + }} + {{ "accepted" | i18n }} - - {{ "requestAccess" | i18n }} - - - - - -
- -

{{ "noGrantedAccess" | i18n }}

- - - {{ "loading" | i18n }} + {{ "view" | i18n }} + {{ + "takeover" | i18n + }} + + {{ c.name }} + + + + + + + + + + + + + + + +

{{ "noGrantedAccess" | i18n }}

+ + + {{ "loading" | i18n }} + - + diff --git a/apps/web/src/app/auth/settings/security/security.component.html b/apps/web/src/app/auth/settings/security/security.component.html index 6e6b76fbab9..843a1d23124 100644 --- a/apps/web/src/app/auth/settings/security/security.component.html +++ b/apps/web/src/app/auth/settings/security/security.component.html @@ -1,22 +1,11 @@ -
- -
- + + + {{ "masterPassword" | i18n }} + {{ "twoStepLogin" | i18n }} + {{ "keys" | i18n }} + + + + + + diff --git a/apps/web/src/app/auth/settings/two-factor-setup.component.html b/apps/web/src/app/auth/settings/two-factor-setup.component.html index b7d002c0821..8ffe626be6e 100644 --- a/apps/web/src/app/auth/settings/two-factor-setup.component.html +++ b/apps/web/src/app/auth/settings/two-factor-setup.component.html @@ -1,79 +1,84 @@ -
-

{{ "twoStepLogin" | i18n }}

-

{{ "twoStepLoginEnforcement" | i18n }}

-
-

{{ "twoStepLoginDesc" | i18n }}

- -

- - {{ "twoStepLoginEnterpriseDescStart" | i18n }} - {{ "twoStepLoginPolicy" | i18n }}. -
- {{ "twoStepLoginOrganizationDuoDesc" | i18n }} -
-
-

{{ "twoStepLoginOrganizationSsoDesc" | i18n }}

- - - {{ "twoStepLoginTeamsDesc" | i18n }} -
- {{ "twoStepLoginOrganizationDuoDesc" | i18n }} - -

- - -

{{ "twoStepLoginRecoveryWarning" | i18n }}

- - -

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

- - {{ "twoStepLoginPolicyUserWarning" | i18n }} - -
    -
  • -
    - -
    -
    -

    - {{ p.name }} - - - {{ "enabled" | i18n }} - - -

    - {{ p.description }} -
    -
    - -
    -
    • -
+ + + +
+

{{ "twoStepLogin" | i18n }}

+

{{ "twoStepLoginEnforcement" | i18n }}

+
+ +

{{ "twoStepLoginDesc" | i18n }}

+ +

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

{{ "twoStepLoginOrganizationSsoDesc" | i18n }}

+ + + {{ "twoStepLoginTeamsDesc" | i18n }} +
+ {{ "twoStepLoginOrganizationDuoDesc" | i18n }} + +

+ + +

{{ "twoStepLoginRecoveryWarning" | i18n }}

+ + +

+ {{ "providers" | i18n }} + + + {{ "loading" | i18n }} + +

+ + {{ "twoStepLoginPolicyUserWarning" | i18n }} + +
    +
  • +
    + +
    +
    +

    + {{ p.name }} + + + {{ "enabled" | i18n }} + + +

    + {{ p.description }} +
    +
    + +
    +
    • +
+ diff --git a/apps/web/src/app/auth/trial-initiation/trial-initiation.component.spec.ts b/apps/web/src/app/auth/trial-initiation/trial-initiation.component.spec.ts index 0b8b0221dd7..9879743a589 100644 --- a/apps/web/src/app/auth/trial-initiation/trial-initiation.component.spec.ts +++ b/apps/web/src/app/auth/trial-initiation/trial-initiation.component.spec.ts @@ -20,6 +20,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service" import { StateService } from "@bitwarden/common/platform/abstractions/state.service"; import { RouterService } from "../../core"; +import { SharedModule } from "../../shared"; import { TrialInitiationComponent } from "./trial-initiation.component"; import { VerticalStepperComponent } from "./vertical-stepper/vertical-stepper.component"; @@ -46,6 +47,7 @@ describe("TrialInitiationComponent", () => { // eslint-disable-next-line @typescript-eslint/no-floating-promises TestBed.configureTestingModule({ imports: [ + SharedModule, RouterTestingModule.withRoutes([ { path: "trial", component: TrialInitiationComponent }, { diff --git a/apps/web/src/app/billing/individual/individual-billing.module.ts b/apps/web/src/app/billing/individual/individual-billing.module.ts index 15837d03829..dbae28858f8 100644 --- a/apps/web/src/app/billing/individual/individual-billing.module.ts +++ b/apps/web/src/app/billing/individual/individual-billing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from "@angular/core"; +import { HeaderModule } from "../../layouts/header/header.module"; import { BillingSharedModule } from "../shared"; import { BillingHistoryViewComponent } from "./billing-history-view.component"; @@ -9,7 +10,7 @@ import { SubscriptionComponent } from "./subscription.component"; import { UserSubscriptionComponent } from "./user-subscription.component"; @NgModule({ - imports: [IndividualBillingRoutingModule, BillingSharedModule], + imports: [IndividualBillingRoutingModule, BillingSharedModule, HeaderModule], declarations: [ SubscriptionComponent, BillingHistoryViewComponent, diff --git a/apps/web/src/app/billing/individual/subscription.component.html b/apps/web/src/app/billing/individual/subscription.component.html index 6d19d0929aa..59326cb70ae 100644 --- a/apps/web/src/app/billing/individual/subscription.component.html +++ b/apps/web/src/app/billing/individual/subscription.component.html @@ -1,20 +1,11 @@ -
- -
- + + + {{ "subscription" | i18n }} + {{ "paymentMethod" | i18n }} + {{ "billingHistory" | i18n }} + + + + + + diff --git a/apps/web/src/app/billing/organizations/organization-billing-history-view.component.html b/apps/web/src/app/billing/organizations/organization-billing-history-view.component.html index cf4b938bd6a..9df05d02edd 100644 --- a/apps/web/src/app/billing/organizations/organization-billing-history-view.component.html +++ b/apps/web/src/app/billing/organizations/organization-billing-history-view.component.html @@ -1,7 +1,4 @@ -
-

- {{ "billingHistory" | i18n }} -

+ -
- - - {{ "loading" | i18n }} - - - - + + + + + + {{ "loading" | i18n }} + + + + + diff --git a/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts b/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts index 9b158eb610e..8ca7226b97d 100644 --- a/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts +++ b/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts @@ -9,14 +9,12 @@ import { WebPlatformUtilsService } from "../../core/web-platform-utils.service"; import { PaymentMethodComponent } from "../shared"; import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component"; -import { OrganizationBillingTabComponent } from "./organization-billing-tab.component"; import { OrganizationSubscriptionCloudComponent } from "./organization-subscription-cloud.component"; import { OrganizationSubscriptionSelfhostComponent } from "./organization-subscription-selfhost.component"; const routes: Routes = [ { path: "", - component: OrganizationBillingTabComponent, canActivate: [OrganizationPermissionsGuard], data: { organizationPermissions: canAccessBillingTab }, children: [ diff --git a/apps/web/src/app/billing/organizations/organization-billing-tab.component.html b/apps/web/src/app/billing/organizations/organization-billing-tab.component.html deleted file mode 100644 index 0c1e4303905..00000000000 --- a/apps/web/src/app/billing/organizations/organization-billing-tab.component.html +++ /dev/null @@ -1,33 +0,0 @@ -
-
-
-
-
{{ "billing" | i18n }}
-
- - {{ "subscription" | i18n }} - - - {{ "paymentMethod" | i18n }} - - - {{ "billingHistory" | i18n }} - -
-
-
-
- -
-
-
diff --git a/apps/web/src/app/billing/organizations/organization-billing.module.ts b/apps/web/src/app/billing/organizations/organization-billing.module.ts index 9fdc3165148..141233aef36 100644 --- a/apps/web/src/app/billing/organizations/organization-billing.module.ts +++ b/apps/web/src/app/billing/organizations/organization-billing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from "@angular/core"; import { UserVerificationModule } from "../../auth/shared/components/user-verification"; +import { LooseComponentsModule } from "../../shared"; import { BillingSharedModule } from "../shared"; import { AdjustSubscription } from "./adjust-subscription.component"; @@ -10,7 +11,6 @@ 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 { OrganizationPlansComponent } from "./organization-plans.component"; import { OrganizationSubscriptionCloudComponent } from "./organization-subscription-cloud.component"; import { OrganizationSubscriptionSelfhostComponent } from "./organization-subscription-selfhost.component"; @@ -24,6 +24,7 @@ import { SubscriptionHiddenComponent } from "./subscription-hidden.component"; UserVerificationModule, BillingSharedModule, OrganizationPlansComponent, + LooseComponentsModule, ], declarations: [ AdjustSubscription, @@ -31,7 +32,6 @@ import { SubscriptionHiddenComponent } from "./subscription-hidden.component"; BillingSyncKeyComponent, ChangePlanComponent, DownloadLicenseComponent, - OrganizationBillingTabComponent, OrganizationSubscriptionCloudComponent, OrganizationSubscriptionSelfhostComponent, OrgBillingHistoryViewComponent, diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html index 87035c6d01a..484be34ce62 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html +++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html @@ -1,272 +1,263 @@ -
-

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

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

{{ "subscriptionPendingCanceled" | i18n }}

- - - -
-
{{ "billingPlan" | i18n }}
-
{{ sub.plan.name }}
- -
{{ "status" | i18n }}
-
- {{ - isSponsoredSubscription ? "sponsored" : subscription.status || "-" - }} - {{ - "pendingCancellation" | i18n - }} -
-
- {{ "subscriptionExpiration" | i18n }} -
-
- {{ nextInvoice ? (nextInvoice.date | date: "mediumDate") : "-" }} -
- -
- -
- {{ - "details" | i18n - }} - - - - - - {{ i.productName | i18n }} - - {{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @ - {{ i.amount | currency: "$" }} - - - - {{ "freeForOneYear" | i18n }} - - - {{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }} - - - - - - - {{ "passwordManager" | i18n }} - {{ "freeOrganization" | i18n }} - {{ "free" | i18n }} - - - {{ "secretsManager" | i18n }} - {{ "freeOrganization" | i18n }} - {{ "free" | i18n }} - - - - -
+ + + + {{ "loading" | i18n }} - -
- - -
- + - -
- -
- - - -

{{ "manageSubscription" | i18n }}

-

{{ subscriptionDesc }}

- -

{{ "passwordManager" | i18n }}

- - - - -

{{ "storage" | i18n }}

-

- {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }} -

- - -
-
- - -
- +
+
{{ "billingPlan" | i18n }}
+
{{ sub.plan.name }}
+ +
{{ "status" | i18n }}
+
+ {{ + isSponsoredSubscription ? "sponsored" : subscription.status || "-" + }} + {{ + "pendingCancellation" | i18n + }} +
+
+ {{ "subscriptionExpiration" | i18n }} +
+
+ {{ nextInvoice ? (nextInvoice.date | date: "mediumDate") : "-" }} +
+ +
+ +
+ {{ + "details" | i18n + }} + + + + + + {{ i.productName | i18n }} - + {{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @ + {{ i.amount | currency: "$" }} + + + + {{ "freeForOneYear" | i18n }} + + + {{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }} + + + + + + + {{ "passwordManager" | i18n }} - {{ "freeOrganization" | i18n }} + {{ "free" | i18n }} + + + {{ "secretsManager" | i18n }} - {{ "freeOrganization" | i18n }} + {{ "free" | i18n }} + + + +
- -

{{ "secretsManager" | i18n }}

- - - -

{{ "selfHostingTitle" | i18n }}

-

- {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }} -

-
- - -
-
- -
- -

{{ "additionalOptions" | i18n }}

+ +
+ + +
+ + + +
+ +
+ + + +

{{ "manageSubscription" | i18n }}

+

{{ subscriptionDesc }}

+ +

{{ "passwordManager" | i18n }}

+ + + + +

{{ "storage" | i18n }}

+

+ {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }} +

+ + +
+
+ + +
+ +
+ + +

{{ "secretsManager" | i18n }}

+ + + + +

{{ "selfHostingTitle" | i18n }}

- {{ "additionalOptionsDesc" | i18n }} + {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}

+
+ +
+ +

{{ "additionalOptions" | i18n }}

+

+ {{ "additionalOptionsDesc" | i18n }} +

+
+ + +
+ - + diff --git a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html index 4395748aacf..6d6691f336b 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html +++ b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html @@ -1,137 +1,131 @@ -
-

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

-
+ - - - {{ "loading" | i18n }} - + + + + {{ "loading" | i18n }} + - + - -
-
{{ "billingPlan" | i18n }}
-
{{ subscription.planName }}
- -
{{ "lastLicenseSync" | i18n }}
-
- {{ lastLicenseSync != null ? (lastLicenseSync | date: "medium") : ("never" | i18n) }} -
- -
- {{ - "subscriptionExpiration" | i18n - }} - - - {{ "licensePaidFeaturesHelp" | i18n }} - -
-
- {{ - (subscription.hasSeparateGracePeriod - ? subscription.expirationWithoutGracePeriod - : subscription.expirationWithGracePeriod - ) | date: "mediumDate" - }} -
+ +
+
{{ "billingPlan" | i18n }}
+
{{ subscription.planName }}
+ +
{{ "lastLicenseSync" | i18n }}
+
+ {{ lastLicenseSync != null ? (lastLicenseSync | date: "medium") : ("never" | i18n) }} +
+ +
+ {{ + "subscriptionExpiration" | i18n + }} + + + {{ "licensePaidFeaturesHelp" | i18n }} + +
+
{{ - "selfHostGracePeriodHelp" - | i18n: (subscription.expirationWithGracePeriod | date: "mediumDate") + (subscription.hasSeparateGracePeriod + ? subscription.expirationWithoutGracePeriod + : subscription.expirationWithGracePeriod + ) | date: "mediumDate" }} -
-
-
{{ "neverExpires" | i18n }}
-
+
+ {{ + "selfHostGracePeriodHelp" + | i18n: (subscription.expirationWithGracePeriod | date: "mediumDate") + }} +
+ +
{{ "neverExpires" | i18n }}
+ - - {{ "launchCloudSubscription" | i18n }} - -
- -

- {{ "licenseAndBillingManagement" | i18n }} -

- - {{ "automaticSync" | i18n }} - + {{ "launchCloudSubscription" | i18n }} + + + +

+ {{ "licenseAndBillingManagement" | i18n }} +

+ + {{ "automaticSync" | i18n }} + + + {{ "billingSyncHelp" | i18n }} + + + + {{ "billingSyncDesc" | i18n }} + + + + - - + {{ "manageBillingSync" | i18n }} + + + - - {{ "manualUpload" | i18n }} - - {{ "manualUploadDesc" | i18n }} - - - -

{{ "uploadLicense" | i18n }}

- - - - -
 + + {{ "manualUpload" | i18n }} + + {{ "manualUploadDesc" | i18n }} + + + +

{{ "uploadLicense" | i18n }}

+ + + + + + diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts index 303df189ab9..2f773870aad 100644 --- a/apps/web/src/app/billing/shared/billing-shared.module.ts +++ b/apps/web/src/app/billing/shared/billing-shared.module.ts @@ -1,5 +1,6 @@ import { NgModule } from "@angular/core"; +import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; import { AddCreditComponent } from "./add-credit.component"; @@ -14,7 +15,7 @@ import { TaxInfoComponent } from "./tax-info.component"; import { UpdateLicenseComponent } from "./update-license.component"; @NgModule({ - imports: [SharedModule, PaymentComponent, TaxInfoComponent], + imports: [SharedModule, PaymentComponent, TaxInfoComponent, HeaderModule], declarations: [ AddCreditComponent, AdjustPaymentComponent, diff --git a/apps/web/src/app/billing/shared/payment-method.component.html b/apps/web/src/app/billing/shared/payment-method.component.html index 112f343aab8..cfe98178b06 100644 --- a/apps/web/src/app/billing/shared/payment-method.component.html +++ b/apps/web/src/app/billing/shared/payment-method.component.html @@ -1,7 +1,4 @@ -
-

- {{ "paymentMethod" | i18n }} -

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

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

-

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

-

{{ "creditAppliedDesc" | i18n }}

- - - -

{{ "paymentMethod" | i18n }}

-

{{ "noPaymentMethod" | i18n }}

- - + + +
+ +

{{ "paymentMethod" | i18n }}

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

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

+

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

+

{{ "creditAppliedDesc" | i18n }}

+ + + +

{{ "paymentMethod" | i18n }}

+

{{ "noPaymentMethod" | i18n }}

+ + +

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

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

+ + {{ paymentSource.description }} +

+ + + + +

{{ "paymentChargedWithUnpaidSubscription" | i18n }}

+ +

{{ "taxInformation" | i18n }}

+

{{ "taxInformationDesc" | i18n }}

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

- - {{ paymentSource.description }} -

+ - - - -

{{ "paymentChargedWithUnpaidSubscription" | i18n }}

- -

{{ "taxInformation" | i18n }}

-

{{ "taxInformationDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - -
- - + diff --git a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts b/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts index 69f3d6c2e79..1a7e3730dbd 100644 --- a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts +++ b/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts @@ -3,8 +3,8 @@ import { combineLatest, Observable, switchMap } from "rxjs"; import { OrganizationApiServiceAbstraction as OrganizationApiService } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction"; import { - OrganizationService, canAccessAdmin, + OrganizationService, } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { BillingBannerServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-banner.service.abstraction"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; diff --git a/apps/web/src/app/layouts/footer.component.html b/apps/web/src/app/layouts/footer.component.html deleted file mode 100644 index 98836bfd5d4..00000000000 --- a/apps/web/src/app/layouts/footer.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-
© {{ year }} Bitwarden Inc.
-
-
- {{ "versionNumber" | i18n: version }} -
-
-
diff --git a/apps/web/src/app/layouts/footer.component.ts b/apps/web/src/app/layouts/footer.component.ts deleted file mode 100644 index d4557aa28b2..00000000000 --- a/apps/web/src/app/layouts/footer.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, OnInit } from "@angular/core"; - -import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; - -@Component({ - selector: "app-footer", - templateUrl: "footer.component.html", -}) -export class FooterComponent implements OnInit { - version: string; - year = "2015"; - - constructor(private platformUtilsService: PlatformUtilsService) {} - - async ngOnInit() { - this.year = new Date().getFullYear().toString(); - this.version = await this.platformUtilsService.getApplicationVersion(); - } -} diff --git a/apps/web/src/app/layouts/header/header.module.ts b/apps/web/src/app/layouts/header/header.module.ts index 2730888a248..7518c83a885 100644 --- a/apps/web/src/app/layouts/header/header.module.ts +++ b/apps/web/src/app/layouts/header/header.module.ts @@ -1,5 +1,7 @@ import { NgModule } from "@angular/core"; +import { BannerModule } from "@bitwarden/components"; + import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component"; import { SharedModule } from "../../shared"; import { ProductSwitcherModule } from "../product-switcher/product-switcher.module"; @@ -7,7 +9,7 @@ import { ProductSwitcherModule } from "../product-switcher/product-switcher.modu import { WebHeaderComponent } from "./web-header.component"; @NgModule({ - imports: [SharedModule, DynamicAvatarComponent, ProductSwitcherModule], + imports: [SharedModule, DynamicAvatarComponent, ProductSwitcherModule, BannerModule], declarations: [WebHeaderComponent], exports: [WebHeaderComponent], }) diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html index ff2a870bef8..514e5deebd9 100644 --- a/apps/web/src/app/layouts/header/web-header.component.html +++ b/apps/web/src/app/layouts/header/web-header.component.html @@ -1,3 +1,18 @@ + + {{ "newWebApp" | i18n }} + {{ "releaseBlog" | i18n }} +
{ diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts index 3351a81bff4..0d2251ee448 100644 --- a/apps/web/src/app/layouts/header/web-header.stories.ts +++ b/apps/web/src/app/layouts/header/web-header.stories.ts @@ -1,14 +1,14 @@ import { CommonModule } from "@angular/common"; -import { Component, Injectable, importProvidersFrom } from "@angular/core"; +import { Component, importProvidersFrom, Injectable, Input } from "@angular/core"; import { RouterModule } from "@angular/router"; import { - Meta, - Story, - moduleMetadata, applicationConfig, componentWrapperDecorator, + Meta, + moduleMetadata, + Story, } from "@storybook/angular"; -import { BehaviorSubject, combineLatest, map } from "rxjs"; +import { BehaviorSubject, combineLatest, map, of } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service"; @@ -22,16 +22,19 @@ import { ButtonModule, IconButtonModule, IconModule, + InputModule, MenuModule, NavigationModule, TabsModule, TypographyModule, - InputModule, } from "@bitwarden/components"; +import { DynamicAvatarComponent } from "../../components/dynamic-avatar.component"; import { PreloadedEnglishI18nModule } from "../../core/tests"; import { WebHeaderComponent } from "../header/web-header.component"; +import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service"; + @Injectable({ providedIn: "root", }) @@ -70,7 +73,7 @@ class MockProductSwitcher {} standalone: true, imports: [CommonModule, AvatarModule], }) -class MockDynamicAvatar { +class MockDynamicAvatar implements Partial { protected name$ = combineLatest([ this.stateService.accounts$, this.stateService.activeAccount$, @@ -79,6 +82,10 @@ class MockDynamicAvatar { ([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name, ), ); + + @Input() + text: string; + constructor(private stateService: MockStateService) {} } @@ -107,6 +114,12 @@ export default { declarations: [WebHeaderComponent, MockProductSwitcher], providers: [ { provide: StateService, useClass: MockStateService }, + { + provide: WebLayoutMigrationBannerService, + useValue: { + showBanner$: of(false), + } as Partial, + }, { provide: PlatformUtilsService, useClass: MockPlatformUtilsService }, { provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService }, { diff --git a/apps/web/src/app/layouts/header/web-layout-migration-banner.service.ts b/apps/web/src/app/layouts/header/web-layout-migration-banner.service.ts new file mode 100644 index 00000000000..1d24d749ac8 --- /dev/null +++ b/apps/web/src/app/layouts/header/web-layout-migration-banner.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from "@angular/core"; + +import { + GlobalStateProvider, + KeyDefinition, + NEW_WEB_LAYOUT_BANNER_DISK, +} from "@bitwarden/common/platform/state"; + +const SHOW_BANNER_KEY = new KeyDefinition(NEW_WEB_LAYOUT_BANNER_DISK, "showBanner", { + deserializer: (b) => { + if (b === null) { + return true; + } + return b; + }, +}); + +/** Displays a banner that introduces users to the new web vault layout. */ +@Injectable({ providedIn: "root" }) +export class WebLayoutMigrationBannerService { + private _showBannerState = this.globalStateProvider.get(SHOW_BANNER_KEY); + showBanner$ = this._showBannerState.state$; + + constructor(private globalStateProvider: GlobalStateProvider) {} + + async hideBanner() { + await this._showBannerState.update(() => false); + } +} diff --git a/apps/web/src/app/layouts/navbar.component.html b/apps/web/src/app/layouts/navbar.component.html index 264818a98e1..e69de29bb2d 100644 --- a/apps/web/src/app/layouts/navbar.component.html +++ b/apps/web/src/app/layouts/navbar.component.html @@ -1,100 +0,0 @@ - diff --git a/apps/web/src/app/layouts/navbar.component.ts b/apps/web/src/app/layouts/navbar.component.ts deleted file mode 100644 index b68e1137d9a..00000000000 --- a/apps/web/src/app/layouts/navbar.component.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { Component, OnInit } from "@angular/core"; -import { map, Observable } from "rxjs"; - -import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service"; -import { - canAccessAdmin, - OrganizationService, -} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; -import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service"; -import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; -import { Provider } from "@bitwarden/common/admin-console/models/domain/provider"; -import { TokenService } from "@bitwarden/common/auth/abstractions/token.service"; -import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; -import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; -import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction"; - -@Component({ - selector: "app-navbar", - templateUrl: "navbar.component.html", -}) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class NavbarComponent implements OnInit { - selfHosted = false; - name: string; - email: string; - providers: Provider[] = []; - userId: string; - organizations$: Observable; - canLock$: Observable; - - constructor( - private messagingService: MessagingService, - private platformUtilsService: PlatformUtilsService, - private tokenService: TokenService, - private providerService: ProviderService, - private syncService: SyncService, - private organizationService: OrganizationService, - private vaultTimeoutSettingsService: VaultTimeoutSettingsService, - private i18nService: I18nService, - ) { - this.selfHosted = this.platformUtilsService.isSelfHost(); - } - - async ngOnInit() { - this.name = await this.tokenService.getName(); - this.email = await this.tokenService.getEmail(); - this.userId = await this.tokenService.getUserId(); - if (this.name == null || this.name.trim() === "") { - this.name = this.email; - } - - // Ensure providers and organizations are loaded - if ((await this.syncService.getLastSync()) == null) { - await this.syncService.fullSync(false); - } - this.providers = await this.providerService.getAll(); - - this.organizations$ = this.organizationService.memberOrganizations$.pipe( - canAccessAdmin(this.i18nService), - ); - this.canLock$ = this.vaultTimeoutSettingsService - .availableVaultTimeoutActions$() - .pipe(map((actions) => actions.includes(VaultTimeoutAction.Lock))); - } - - lock() { - this.messagingService.send("lockVault"); - } - - logOut() { - this.messagingService.send("logout"); - } -} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html b/apps/web/src/app/layouts/org-switcher/org-switcher.component.html similarity index 100% rename from bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html rename to apps/web/src/app/layouts/org-switcher/org-switcher.component.html diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.ts b/apps/web/src/app/layouts/org-switcher/org-switcher.component.ts similarity index 88% rename from bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.ts rename to apps/web/src/app/layouts/org-switcher/org-switcher.component.ts index 59e69c15a8e..2c44a045c70 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.ts +++ b/apps/web/src/app/layouts/org-switcher/org-switcher.component.ts @@ -1,13 +1,18 @@ +import { CommonModule } from "@angular/common"; import { Component, EventEmitter, Input, Output } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; import { combineLatest, map, Observable } from "rxjs"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import type { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { NavigationModule } from "@bitwarden/components"; @Component({ selector: "org-switcher", templateUrl: "org-switcher.component.html", + standalone: true, + imports: [CommonModule, JslibModule, NavigationModule], }) export class OrgSwitcherComponent { protected organizations$: Observable = diff --git a/apps/web/src/app/layouts/password-manager-logo.ts b/apps/web/src/app/layouts/password-manager-logo.ts new file mode 100644 index 00000000000..d93e2d5bb30 --- /dev/null +++ b/apps/web/src/app/layouts/password-manager-logo.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "@bitwarden/components"; + +export const PasswordManagerLogo = svgIcon` + +`; diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts index 4362024be13..ec6efb0ba9e 100644 --- a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts +++ b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts @@ -1,8 +1,12 @@ import { Component, ViewChild } from "@angular/core"; import { ActivatedRoute, Router } from "@angular/router"; -import { combineLatest, map } from "rxjs"; +import { combineLatest, concatMap } from "rxjs"; -import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { + canAccessOrgAdmin, + OrganizationService, +} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service"; import { MenuComponent } from "@bitwarden/components"; type ProductSwitcherItem = { @@ -44,7 +48,7 @@ export class ProductSwitcherContentComponent { this.organizationService.organizations$, this.route.paramMap, ]).pipe( - map(([orgs, paramMap]) => { + concatMap(async ([orgs, paramMap]) => { const routeOrg = orgs.find((o) => o.id === paramMap.get("organizationId")); // If the active route org doesn't have access to SM, find the first org that does. const smOrg = @@ -52,17 +56,29 @@ export class ProductSwitcherContentComponent { ? routeOrg : orgs.find((o) => o.canAccessSecretsManager && o.enabled == true); + // If the active route org doesn't have access to AC, find the first org that does. + const acOrg = + routeOrg != null && canAccessOrgAdmin(routeOrg) && routeOrg.enabled + ? routeOrg + : orgs.find((o) => canAccessOrgAdmin(o) && o.enabled); + + // TODO: This should be migrated to an Observable provided by the provider service and moved to the combineLatest above. See AC-2092. + const providers = await this.providerService.getAll(); + /** * We can update this to the "satisfies" type upon upgrading to TypeScript 4.9 * https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#satisfies */ - const products: Record<"pm" | "sm" | "orgs", ProductSwitcherItem> = { + const products: Record<"pm" | "sm" | "ac" | "provider" | "orgs", ProductSwitcherItem> = { pm: { name: "Password Manager", icon: "bwi-lock", appRoute: "/vault", marketingRoute: "https://bitwarden.com/products/personal/", - isActive: !this.router.url.includes("/sm/"), + isActive: + !this.router.url.includes("/sm/") && + !this.router.url.includes("/organizations/") && + !this.router.url.includes("/providers/"), }, sm: { name: "Secrets Manager", @@ -71,6 +87,19 @@ export class ProductSwitcherContentComponent { marketingRoute: "https://bitwarden.com/products/secrets-manager/", isActive: this.router.url.includes("/sm/"), }, + ac: { + name: "Admin Console", + icon: "bwi-business", + appRoute: ["/organizations", acOrg?.id], + marketingRoute: "https://bitwarden.com/products/business/", + isActive: this.router.url.includes("/organizations/"), + }, + provider: { + name: "Provider Portal", + icon: "bwi-provider", + appRoute: ["/providers", providers[0]?.id], + isActive: this.router.url.includes("/providers/"), + }, orgs: { name: "Organizations", icon: "bwi-business", @@ -81,7 +110,9 @@ export class ProductSwitcherContentComponent { const bento: ProductSwitcherItem[] = [products.pm]; const other: ProductSwitcherItem[] = []; - if (orgs.length === 0) { + if (acOrg) { + bento.push(products.ac); + } else { other.push(products.orgs); } @@ -91,6 +122,10 @@ export class ProductSwitcherContentComponent { other.push(products.sm); } + if (providers.length > 0) { + bento.push(products.provider); + } + return { bento, other, @@ -100,6 +135,7 @@ export class ProductSwitcherContentComponent { constructor( private organizationService: OrganizationService, + private providerService: ProviderService, private route: ActivatedRoute, private router: Router, ) {} diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts b/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts index afd79c89c48..c1773a5be36 100644 --- a/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts +++ b/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts @@ -1,11 +1,13 @@ -import { Component, Directive, Input, importProvidersFrom } from "@angular/core"; +import { Component, Directive, importProvidersFrom, Input } from "@angular/core"; import { RouterModule } from "@angular/router"; -import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular"; -import { BehaviorSubject } from "rxjs"; +import { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular"; +import { BehaviorSubject, firstValueFrom } from "rxjs"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { Provider } from "@bitwarden/common/admin-console/models/domain/provider"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { IconButtonModule, LinkModule, MenuModule } from "@bitwarden/components"; import { I18nMockService } from "@bitwarden/components/src/utils/i18n-mock.service"; @@ -26,6 +28,22 @@ class MockOrganizationService implements Partial { } } +@Directive({ + selector: "[mockProviders]", +}) +class MockProviderService implements Partial { + private static _providers = new BehaviorSubject([]); + + async getAll() { + return await firstValueFrom(MockProviderService._providers); + } + + @Input() + set mockProviders(providers: Provider[]) { + MockProviderService._providers.next(providers); + } +} + @Component({ selector: "story-layout", template: ``, @@ -46,6 +64,7 @@ export default { ProductSwitcherContentComponent, ProductSwitcherComponent, MockOrganizationService, + MockProviderService, StoryLayoutComponent, StoryContentComponent, ], @@ -53,6 +72,8 @@ export default { providers: [ { provide: OrganizationService, useClass: MockOrganizationService }, MockOrganizationService, + { provide: ProviderService, useClass: MockProviderService }, + MockProviderService, { provide: I18nService, useFactory: () => { @@ -82,6 +103,10 @@ export default { path: "sm/:organizationId", component: StoryContentComponent, }, + { + path: "providers/:providerId", + component: StoryContentComponent, + }, { path: "vault", component: StoryContentComponent, @@ -100,7 +125,7 @@ export default { const Template: Story = (args) => ({ props: args, template: ` - +

Closed

@@ -119,17 +144,26 @@ const Template: Story = (args) => ({ `, }); -export const NoOrgs = Template.bind({}); -NoOrgs.args = { +export const OnlyPM = Template.bind({}); +OnlyPM.args = { mockOrgs: [], + mockProviders: [], }; -export const OrgWithoutSecretsManager = Template.bind({}); -OrgWithoutSecretsManager.args = { - mockOrgs: [{ id: "a" }], +export const WithSM = Template.bind({}); +WithSM.args = { + mockOrgs: [{ id: "org-a", canManageUsers: false, canAccessSecretsManager: true, enabled: true }], + mockProviders: [], }; -export const OrgWithSecretsManager = Template.bind({}); -OrgWithSecretsManager.args = { - mockOrgs: [{ id: "b", canAccessSecretsManager: true, enabled: true }], +export const WithSMAndAC = Template.bind({}); +WithSMAndAC.args = { + mockOrgs: [{ id: "org-a", canManageUsers: true, canAccessSecretsManager: true, enabled: true }], + mockProviders: [], +}; + +export const WithAllOptions = Template.bind({}); +WithAllOptions.args = { + mockOrgs: [{ id: "org-a", canManageUsers: true, canAccessSecretsManager: true, enabled: true }], + mockProviders: [{ id: "provider-a" }], }; diff --git a/apps/web/src/app/layouts/user-layout.component.html b/apps/web/src/app/layouts/user-layout.component.html index 35798f66387..cadc0c7f888 100644 --- a/apps/web/src/app/layouts/user-layout.component.html +++ b/apps/web/src/app/layouts/user-layout.component.html @@ -1,4 +1,41 @@ - - - - + + + + + diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts index c35f952ead1..886069c5802 100644 --- a/apps/web/src/app/layouts/user-layout.component.ts +++ b/apps/web/src/app/layouts/user-layout.component.ts @@ -1,11 +1,86 @@ -import { Component, OnInit } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { Component, NgZone, OnDestroy, OnInit } from "@angular/core"; +import { RouterModule } from "@angular/router"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; +import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { StateService } from "@bitwarden/common/platform/abstractions/state.service"; +import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction"; +import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; + +import { PaymentMethodBannersComponent } from "../components/payment-method-banners/payment-method-banners.component"; + +import { PasswordManagerLogo } from "./password-manager-logo"; + +const BroadcasterSubscriptionId = "UserLayoutComponent"; @Component({ selector: "app-user-layout", templateUrl: "user-layout.component.html", + standalone: true, + imports: [ + CommonModule, + RouterModule, + JslibModule, + LayoutComponent, + IconModule, + NavigationModule, + PaymentMethodBannersComponent, + ], }) -export class UserLayoutComponent implements OnInit { - ngOnInit() { +export class UserLayoutComponent implements OnInit, OnDestroy { + protected readonly logo = PasswordManagerLogo; + hasFamilySponsorshipAvailable: boolean; + hideSubscription: boolean; + + constructor( + private broadcasterService: BroadcasterService, + private ngZone: NgZone, + private platformUtilsService: PlatformUtilsService, + private organizationService: OrganizationService, + private stateService: StateService, + private apiService: ApiService, + private syncService: SyncService, + ) {} + + async ngOnInit() { document.body.classList.remove("layout_frontend"); + + this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => { + // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.ngZone.run(async () => { + switch (message.command) { + case "purchasedPremium": + await this.load(); + break; + default: + } + }); + }); + + await this.syncService.fullSync(false); + await this.load(); + } + + ngOnDestroy() { + this.broadcasterService.unsubscribe(BroadcasterSubscriptionId); + } + + async load() { + const premium = await this.stateService.getHasPremiumPersonally(); + const selfHosted = this.platformUtilsService.isSelfHost(); + + this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships(); + const hasPremiumFromOrg = await this.stateService.getHasPremiumFromOrganization(); + let billing = null; + if (!selfHosted) { + // TODO: We should remove the need to call this! + billing = await this.apiService.getUserBillingHistory(); + } + this.hideSubscription = !premium && hasPremiumFromOrg && (selfHosted || billing?.hasNoHistory); } } diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index aa4df5de14a..e5c2f353c0f 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -42,12 +42,10 @@ import { FrontendLayoutComponent } from "./layouts/frontend-layout.component"; import { UserLayoutComponent } from "./layouts/user-layout.component"; import { DomainRulesComponent } from "./settings/domain-rules.component"; import { PreferencesComponent } from "./settings/preferences.component"; -import { SettingsComponent } from "./settings/settings.component"; import { GeneratorComponent } from "./tools/generator.component"; import { ReportsModule } from "./tools/reports"; import { AccessComponent } from "./tools/send/access.component"; import { SendComponent } from "./tools/send/send.component"; -import { ToolsComponent } from "./tools/tools.component"; import { VaultModule } from "./vault/individual-vault/vault.module"; const routes: Routes = [ @@ -199,7 +197,7 @@ const routes: Routes = [ path: "vault", loadChildren: () => VaultModule, }, - { path: "sends", component: SendComponent, data: { title: "Send" } }, + { path: "sends", component: SendComponent, data: { titleId: "send" } }, { path: "create-organization", component: CreateOrganizationComponent, @@ -207,7 +205,6 @@ const routes: Routes = [ }, { path: "settings", - component: SettingsComponent, children: [ { path: "", pathMatch: "full", redirectTo: "account" }, { path: "account", component: AccountComponent, data: { titleId: "myAccount" } }, @@ -256,7 +253,6 @@ const routes: Routes = [ }, { path: "tools", - component: ToolsComponent, canActivate: [AuthGuard], children: [ { path: "", pathMatch: "full", redirectTo: "generator" }, diff --git a/apps/web/src/app/settings/domain-rules.component.html b/apps/web/src/app/settings/domain-rules.component.html index ce9b103d20b..be6ac851c44 100644 --- a/apps/web/src/app/settings/domain-rules.component.html +++ b/apps/web/src/app/settings/domain-rules.component.html @@ -1,108 +1,109 @@ -
-

{{ "domainRules" | i18n }}

-
-

{{ "domainRulesDesc" | i18n }}

-
-

{{ "customEqDomains" | i18n }}

-

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

- -
-
- - + + + +

{{ "domainRulesDesc" | i18n }}

+ +

{{ "customEqDomains" | i18n }}

+

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

+ +
+
+ + +
+
- -
- - {{ "newCustomDomainDesc" | i18n }} - - -

{{ "globalEqDomains" | i18n }}

-

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

- - - - - + + +
{{ d.domains }} -
- -
- {{ "globalEqDomains" | i18n }} +

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

+ + + + + - - -
{{ d.domains }} +
+ +
+ + + {{ "exclude" | i18n }} + + + + {{ "include" | i18n }} + + + + {{ "customize" | i18n }} + +
- -
- - +
+ + + diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html index 7789785f9b6..828c251989f 100644 --- a/apps/web/src/app/settings/preferences.component.html +++ b/apps/web/src/app/settings/preferences.component.html @@ -1,143 +1,129 @@ -
-

{{ "preferences" | i18n }}

-
-

{{ "preferencesDesc" | i18n }}

-
-
-
- - - {{ - "vaultTimeoutPolicyWithActionInEffect" - | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n) - }} - - - {{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }} - - - {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }} - - - - -
-
- -
- -
- - -
-
- - + + + +

{{ "preferencesDesc" | i18n }}

+ +
+
+ + + {{ + "vaultTimeoutPolicyWithActionInEffect" + | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n) + }} + + + {{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }} + + + {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }} + + + +
- -
-
-
-
- - - - + +
+ +
+ + +
+
+ + +
+
+ +
+
+
+
+ + + + +
+ + {{ "languageDesc" | i18n }}
- - {{ "languageDesc" | i18n }}
-
-
-
- - - - - +
+
+ + + + + +
+ {{ "faviconDesc" | i18n }}
- {{ "faviconDesc" | i18n }} -
-
-
- - -
- {{ "enableFullWidthDesc" | i18n }} -
-
-
-
- - - {{ "themeDesc" | i18n }} +
+
+
+ + + {{ "themeDesc" | i18n }} +
-
- - + + + diff --git a/apps/web/src/app/settings/preferences.component.ts b/apps/web/src/app/settings/preferences.component.ts index 17bfd1ab5c9..bf9a1421f42 100644 --- a/apps/web/src/app/settings/preferences.component.ts +++ b/apps/web/src/app/settings/preferences.component.ts @@ -42,7 +42,6 @@ export class PreferencesComponent implements OnInit { vaultTimeout: [null as number | null], vaultTimeoutAction: [VaultTimeoutAction.Lock], enableFavicons: true, - enableFullWidth: false, theme: [ThemeType.Light], locale: [null as string | null], }); @@ -142,7 +141,6 @@ export class PreferencesComponent implements OnInit { this.vaultTimeoutSettingsService.vaultTimeoutAction$(), ), enableFavicons: !(await this.settingsService.getDisableFavicon()), - enableFullWidth: await this.stateService.getEnableFullWidth(), theme: await this.stateService.getTheme(), locale: (await this.stateService.getLocale()) ?? null, }; @@ -167,8 +165,6 @@ export class PreferencesComponent implements OnInit { values.vaultTimeoutAction, ); await this.settingsService.setDisableFavicon(!values.enableFavicons); - await this.stateService.setEnableFullWidth(values.enableFullWidth); - this.messagingService.send("setFullWidth"); if (values.theme !== this.startingTheme) { await this.themingService.updateConfiguredTheme(values.theme); this.startingTheme = values.theme; diff --git a/apps/web/src/app/settings/settings.component.html b/apps/web/src/app/settings/settings.component.html deleted file mode 100644 index d5236fa63d0..00000000000 --- a/apps/web/src/app/settings/settings.component.html +++ /dev/null @@ -1,45 +0,0 @@ -
-
-
-
-
{{ "accountSettings" | i18n }}
-
- - {{ "myAccount" | i18n }} - - - {{ "security" | i18n }} - - - {{ "preferences" | i18n }} - - - {{ "subscription" | i18n }} - - - {{ "domainRules" | i18n }} - - - {{ "emergencyAccess" | i18n }} - - - {{ "sponsoredFamilies" | i18n }} - -
-
-
-
- -
-
-
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index bb83b0972bd..770a862eab4 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -1,8 +1,8 @@ import { NgModule } from "@angular/core"; import { PasswordCalloutComponent } from "@bitwarden/auth/angular"; +import { LayoutComponent, NavigationModule } from "@bitwarden/components"; -import { OrganizationSwitcherComponent } from "../admin-console/components/organization-switcher.component"; import { OrganizationLayoutComponent } from "../admin-console/organizations/layouts/organization-layout.component"; import { EventsComponent as OrgEventsComponent } from "../admin-console/organizations/manage/events.component"; import { UserConfirmComponent as OrgUserConfirmComponent } from "../admin-console/organizations/manage/user-confirm.component"; @@ -10,7 +10,6 @@ import { AcceptFamilySponsorshipComponent } from "../admin-console/organizations import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../admin-console/organizations/tools/exposed-passwords-report.component"; import { InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent } from "../admin-console/organizations/tools/inactive-two-factor-report.component"; import { ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent } from "../admin-console/organizations/tools/reused-passwords-report.component"; -import { ToolsComponent as OrgToolsComponent } from "../admin-console/organizations/tools/tools.component"; import { UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent } from "../admin-console/organizations/tools/unsecured-websites-report.component"; import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from "../admin-console/organizations/tools/weak-passwords-report.component"; import { ProvidersComponent } from "../admin-console/providers/providers.component"; @@ -62,20 +61,17 @@ import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.comp import { DynamicAvatarComponent } from "../components/dynamic-avatar.component"; import { PaymentMethodBannersComponent } from "../components/payment-method-banners/payment-method-banners.component"; import { SelectableAvatarComponent } from "../components/selectable-avatar.component"; -import { FooterComponent } from "../layouts/footer.component"; import { FrontendLayoutComponent } from "../layouts/frontend-layout.component"; -import { NavbarComponent } from "../layouts/navbar.component"; +import { HeaderModule } from "../layouts/header/header.module"; import { ProductSwitcherModule } from "../layouts/product-switcher/product-switcher.module"; import { UserLayoutComponent } from "../layouts/user-layout.component"; import { DomainRulesComponent } from "../settings/domain-rules.component"; import { LowKdfComponent } from "../settings/low-kdf.component"; import { PreferencesComponent } from "../settings/preferences.component"; -import { SettingsComponent } from "../settings/settings.component"; import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component"; import { GeneratorComponent } from "../tools/generator.component"; import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component"; import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component"; -import { ToolsComponent } from "../tools/tools.component"; import { PremiumBadgeComponent } from "../vault/components/premium-badge.component"; import { AddEditCustomFieldsComponent } from "../vault/individual-vault/add-edit-custom-fields.component"; import { AddEditComponent } from "../vault/individual-vault/add-edit.component"; @@ -111,6 +107,11 @@ import { SharedModule } from "./shared.module"; PasswordCalloutComponent, DangerZoneComponent, PaymentMethodBannersComponent, + LayoutComponent, + NavigationModule, + HeaderModule, + OrganizationLayoutComponent, + UserLayoutComponent, ], declarations: [ AcceptFamilySponsorshipComponent, @@ -134,21 +135,16 @@ import { SharedModule } from "./shared.module"; EmergencyAccessViewComponent, EmergencyAddEditCipherComponent, FolderAddEditComponent, - FooterComponent, FrontendLayoutComponent, HintComponent, LockComponent, - NavbarComponent, - OrganizationSwitcherComponent, OrgAddEditComponent, - OrganizationLayoutComponent, OrgAttachmentsComponent, OrgCollectionsComponent, OrgEventsComponent, OrgExposedPasswordsReportComponent, OrgInactiveTwoFactorReportComponent, OrgReusedPasswordsReportComponent, - OrgToolsComponent, OrgUnsecuredWebsitesReportComponent, OrgUserConfirmComponent, OrgWeakPasswordsReportComponent, @@ -168,12 +164,10 @@ import { SharedModule } from "./shared.module"; SelectableAvatarComponent, SendAddEditComponent, SetPasswordComponent, - SettingsComponent, ShareComponent, SponsoredFamiliesComponent, SponsoringOrgRowComponent, SsoComponent, - ToolsComponent, TwoFactorAuthenticatorComponent, TwoFactorComponent, TwoFactorDuoComponent, @@ -186,7 +180,6 @@ import { SharedModule } from "./shared.module"; TwoFactorYubiKeyComponent, UpdatePasswordComponent, UpdateTempPasswordComponent, - UserLayoutComponent, VaultTimeoutInputComponent, VerifyEmailComponent, VerifyEmailTokenComponent, @@ -217,12 +210,9 @@ import { SharedModule } from "./shared.module"; EmergencyAccessViewComponent, EmergencyAddEditCipherComponent, FolderAddEditComponent, - FooterComponent, FrontendLayoutComponent, HintComponent, LockComponent, - NavbarComponent, - OrganizationSwitcherComponent, OrgAddEditComponent, OrganizationLayoutComponent, OrgAttachmentsComponent, @@ -231,7 +221,6 @@ import { SharedModule } from "./shared.module"; OrgExposedPasswordsReportComponent, OrgInactiveTwoFactorReportComponent, OrgReusedPasswordsReportComponent, - OrgToolsComponent, OrgUnsecuredWebsitesReportComponent, OrgUserConfirmComponent, OrgWeakPasswordsReportComponent, @@ -251,12 +240,10 @@ import { SharedModule } from "./shared.module"; SelectableAvatarComponent, SendAddEditComponent, SetPasswordComponent, - SettingsComponent, ShareComponent, SponsoredFamiliesComponent, SponsoringOrgRowComponent, SsoComponent, - ToolsComponent, TwoFactorAuthenticatorComponent, TwoFactorComponent, TwoFactorDuoComponent, @@ -275,6 +262,7 @@ import { SharedModule } from "./shared.module"; VerifyEmailTokenComponent, VerifyRecoverDeleteComponent, LowKdfComponent, + HeaderModule, DangerZoneComponent, ], }) diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 350ecce8dad..9d373389999 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -16,6 +16,7 @@ import { CalloutModule, CheckboxModule, ColorPasswordModule, + ContainerComponent, DialogModule, FormFieldModule, IconButtonModule, @@ -63,6 +64,7 @@ import "./locales"; CalloutModule, CheckboxModule, ColorPasswordModule, + ContainerComponent, DialogModule, FormFieldModule, IconButtonModule, @@ -98,6 +100,7 @@ import "./locales"; CalloutModule, CheckboxModule, ColorPasswordModule, + ContainerComponent, DialogModule, FormFieldModule, IconButtonModule, diff --git a/apps/web/src/app/tools/generator.component.html b/apps/web/src/app/tools/generator.component.html index 7dd4bd09f5c..4be83c3edb5 100644 --- a/apps/web/src/app/tools/generator.component.html +++ b/apps/web/src/app/tools/generator.component.html @@ -1,476 +1,479 @@ -
-

{{ "generator" | i18n }}

-
- - {{ "passwordGeneratorPolicyInEffect" | i18n }} - -
-
- + + + + + {{ "passwordGeneratorPolicyInEffect" | i18n }} + +
+
+ +
-
-
- -
- - -
-
- -
- -
+
+ +
-
- -
-
- + +
+ +
-
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - - {{ passwordOptionsMinLengthForReader$ | async }} - -
-
- - -
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- - - - -
-
- - -
-
- -
- - -
-
-
- - -
-
- - +
-
-
- - + +
+
+ + +
+
+ + +
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
- - -
-
- -
-
- - -
-
-
-
- - -
-
- - -
+
- +
- +
+ + +
+
+ + +
+
+ + + + {{ passwordOptionsMinLengthForReader$ | async }} + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ +
-
- - -
- - + +
+
+ + + + +
+
+ + +
+
+ +
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ +
+ + +
+ + + diff --git a/apps/web/src/app/tools/import/admin-import.component.ts b/apps/web/src/app/tools/import/admin-import.component.ts deleted file mode 100644 index 8577f1e2d35..00000000000 --- a/apps/web/src/app/tools/import/admin-import.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component } from "@angular/core"; - -import { ImportCollectionServiceAbstraction } from "@bitwarden/importer/core"; -import { ImportComponent } from "@bitwarden/importer/ui"; - -import { SharedModule } from "../../shared"; -import { CollectionAdminService } from "../../vault/core/collection-admin.service"; - -import { ImportCollectionAdminService } from "./import-collection-admin.service"; -import { ImportWebComponent } from "./import-web.component"; - -@Component({ - templateUrl: "import-web.component.html", - standalone: true, - imports: [SharedModule, ImportComponent], - providers: [ - { - provide: ImportCollectionServiceAbstraction, - useClass: ImportCollectionAdminService, - deps: [CollectionAdminService], - }, - ], -}) -export class AdminImportComponent extends ImportWebComponent {} diff --git a/apps/web/src/app/tools/import/import-web.component.html b/apps/web/src/app/tools/import/import-web.component.html index c83cf5607c4..2db158a14e2 100644 --- a/apps/web/src/app/tools/import/import-web.component.html +++ b/apps/web/src/app/tools/import/import-web.component.html @@ -1,18 +1,20 @@ -

{{ "importData" | i18n }}

- - + + + + + + diff --git a/apps/web/src/app/tools/import/import-web.component.ts b/apps/web/src/app/tools/import/import-web.component.ts index a4c64728aa2..3f1d5155039 100644 --- a/apps/web/src/app/tools/import/import-web.component.ts +++ b/apps/web/src/app/tools/import/import-web.component.ts @@ -1,51 +1,26 @@ -import { Component, OnInit } from "@angular/core"; -import { ActivatedRoute, Router } from "@angular/router"; -import { firstValueFrom } from "rxjs"; +import { Component } from "@angular/core"; +import { Router } from "@angular/router"; -import { - OrganizationService, - canAccessVaultTab, -} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { ImportComponent } from "@bitwarden/importer/ui"; +import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; @Component({ templateUrl: "import-web.component.html", standalone: true, - imports: [SharedModule, ImportComponent], + imports: [SharedModule, ImportComponent, HeaderModule], }) -export class ImportWebComponent implements OnInit { - protected routeOrgId: string = null; +export class ImportWebComponent { protected loading = false; protected disabled = false; - constructor( - private route: ActivatedRoute, - private organizationService: OrganizationService, - private router: Router, - ) {} - - ngOnInit(): void { - this.routeOrgId = this.route.snapshot.paramMap.get("organizationId"); - } + constructor(private router: Router) {} /** * Callback that is called after a successful import. */ protected async onSuccessfulImport(organizationId: string): Promise { - if (!this.routeOrgId) { - await this.router.navigate(["vault"]); - return; - } - - const organization = await firstValueFrom(this.organizationService.get$(organizationId)); - if (organization == null) { - return; - } - - if (canAccessVaultTab(organization)) { - await this.router.navigate(["organizations", organizationId, "vault"]); - } + await this.router.navigate(["vault"]); } } diff --git a/apps/web/src/app/tools/reports/pages/breach-report.component.html b/apps/web/src/app/tools/reports/pages/breach-report.component.html index 40d0161901a..51191ddf2d0 100644 --- a/apps/web/src/app/tools/reports/pages/breach-report.component.html +++ b/apps/web/src/app/tools/reports/pages/breach-report.component.html @@ -1,63 +1,64 @@ -
-

{{ "dataBreachReport" | i18n }}

-
-

{{ "breachDesc" | i18n }}

-
-
-
- - - {{ "breachCheckUsernameEmail" | i18n }} + + + +

{{ "breachDesc" | i18n }}

+ +
+
+ + + {{ "breachCheckUsernameEmail" | i18n }} +
+ + +
+

{{ "reportError" | i18n }}...

+ + + {{ "breachUsernameNotFound" | i18n: checkedUsername }} + + + {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }} + +
    +
  • +
    +
    + +
    +
    +

    {{ a.title }}

    +

    +

    {{ "compromisedData" | i18n }}:

    +
      +
    • {{ d }}
      • +
    +
    +
    +
    +
    {{ "website" | i18n }}
    +
    {{ a.domain }}
    +
    {{ "affectedUsers" | i18n }}
    +
    {{ a.pwnCount | number }}
    +
    {{ "breachOccurred" | i18n }}
    +
    {{ a.breachDate | date: "mediumDate" }}
    +
    {{ "breachReported" | i18n }}
    +
    {{ a.addedDate | date: "mediumDate" }}
    +
    +
    +
    +
    • +
+
- - -
-

{{ "reportError" | i18n }}...

- - - {{ "breachUsernameNotFound" | i18n: checkedUsername }} - - - {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }} - -
    -
  • -
    -
    - -
    -
    -

    {{ a.title }}

    -

    -

    {{ "compromisedData" | i18n }}:

    -
      -
    • {{ d }}
      • -
    -
    -
    -
    -
    {{ "website" | i18n }}
    -
    {{ a.domain }}
    -
    {{ "affectedUsers" | i18n }}
    -
    {{ a.pwnCount | number }}
    -
    {{ "breachOccurred" | i18n }}
    -
    {{ a.breachDate | date: "mediumDate" }}
    -
    {{ "breachReported" | i18n }}
    -
    {{ a.addedDate | date: "mediumDate" }}
    -
    -
    -
    -
    • -
- -
+ diff --git a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html index 39642d0b10f..af80e2e62b1 100644 --- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html +++ b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html @@ -1,72 +1,77 @@ -
-

{{ "exposedPasswordsReport" | i18n }}

-
-

{{ "exposedPasswordsReportDesc" | i18n }}

- -
- - {{ "noExposedPasswords" | i18n }} - - - - {{ "exposedPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + +

{{ "exposedPasswordsReportDesc" | i18n }}

+ +
+ + {{ "noExposedPasswords" | i18n }} - - - - - + + + +
- - - - {{ - c.name - }} - - - {{ c.name }} - - - + + {{ "exposedPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + + + + + - - - - -
+ + + + {{ c.name }} + + + {{ c.name }} + + + + {{ "shared" | i18n }} + + + + {{ "attachments" | i18n }} + +
+ {{ c.subTitle }} + 		+ - - - - - {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }} - -
- - - + > + + 		+ + {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }} + +
+ +
+ + diff --git a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html index 6b175b1b9c9..d81fc2d4136 100644 --- a/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html +++ b/apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html @@ -1,88 +1,79 @@ -
-

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

-
-

{{ "inactive2faReportDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - {{ "noInactive2fa" | i18n }} - - - - {{ "inactive2faFoundDesc" | i18n: (ciphers.length | number) }} + + + +

{{ "inactive2faReportDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + {{ "noInactive2fa" | i18n }} - - - - - + + + +
- - - {{ - c.name - }} - - + + {{ "inactive2faFoundDesc" | i18n: (ciphers.length | number) }} + + + + + + + - - - - -
+ + + {{ + c.name + }} + + + {{ "shared" | i18n }} + + + + {{ "attachments" | i18n }} + +
+ {{ c.subTitle }} + 		+ - - - - - {{ "instructions" | i18n }} -
- - - + > + + 		+ + {{ "instructions" | i18n }} +
+ +
+ + diff --git a/apps/web/src/app/tools/reports/pages/reports-home.component.html b/apps/web/src/app/tools/reports/pages/reports-home.component.html index 31b9d03dea3..9101933bc40 100644 --- a/apps/web/src/app/tools/reports/pages/reports-home.component.html +++ b/apps/web/src/app/tools/reports/pages/reports-home.component.html @@ -1,7 +1,7 @@ -
-

{{ "reports" | i18n }}

-
+ -

{{ "reportsDesc" | i18n }}

+ +

{{ "reportsDesc" | i18n }}

- + + diff --git a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html index b03907b1f68..cde2e59ea84 100644 --- a/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html +++ b/apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html @@ -1,87 +1,82 @@ -
-

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

-
-

{{ "reusedPasswordsReportDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - {{ "noReusedPasswords" | i18n }} - - - - {{ "reusedPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + +

{{ "reusedPasswordsReportDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + {{ "noReusedPasswords" | i18n }} - - - - - + + + +
- - - - {{ - c.name - }} - - - {{ c.name }} - - - + + {{ "reusedPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + + + + + - - - - -
+ + + + {{ c.name }} + + + {{ c.name }} + + + + {{ "shared" | i18n }} + + + + {{ "attachments" | i18n }} + +
+ {{ c.subTitle }} + 		+ - - - - - {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }} - -
- - - + > + + 		+ + {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }} + +
+ +
+ + diff --git a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html b/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html index bf4a1cdda06..616bdbba0b2 100644 --- a/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html +++ b/apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html @@ -1,77 +1,68 @@ -
-

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

-
-

{{ "unsecuredWebsitesReportDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - {{ "noUnsecuredWebsites" | i18n }} - - - - {{ "unsecuredWebsitesFoundDesc" | i18n: (ciphers.length | number) }} + + + +

{{ "unsecuredWebsitesReportDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + {{ "noUnsecuredWebsites" | i18n }} - - - - - + + +
- - - {{ - c.name - }} - - + + {{ "unsecuredWebsitesFoundDesc" | i18n: (ciphers.length | number) }} + + + + + + + - - - -
+ + + {{ + c.name + }} + + + {{ "shared" | i18n }} + + + + {{ "attachments" | i18n }} + +
+ {{ c.subTitle }} + 		+ - - -
- - - + > + +
+ +
+ + diff --git a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html index dd41c462401..b4c77b2fa15 100644 --- a/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html +++ b/apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html @@ -1,87 +1,82 @@ -
-

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

-
-

{{ "weakPasswordsReportDesc" | i18n }}

-
- - {{ "loading" | i18n }} -
-
- - {{ "noWeakPasswords" | i18n }} - - - - {{ "weakPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + +

{{ "weakPasswordsReportDesc" | i18n }}

+
+ + {{ "loading" | i18n }} +
+
+ + {{ "noWeakPasswords" | i18n }} - - - - - + + + +
- - - - {{ - c.name - }} - - - {{ c.name }} - - - + + {{ "weakPasswordsFoundDesc" | i18n: (ciphers.length | number) }} + + + + + + + - - - - -
+ + + + {{ c.name }} + + + {{ c.name }} + + + + {{ "shared" | i18n }} + + + + {{ "attachments" | i18n }} + +
+ {{ c.subTitle }} + 		+ - - - - - {{ passwordStrengthMap.get(c.id)[0] | i18n }} - -
- - - + > + + 		+ + {{ passwordStrengthMap.get(c.id)[0] | i18n }} + +
+ +
+ + diff --git a/apps/web/src/app/tools/reports/reports-layout.component.html b/apps/web/src/app/tools/reports/reports-layout.component.html index 3c6bd313c4f..7d8988c8287 100644 --- a/apps/web/src/app/tools/reports/reports-layout.component.html +++ b/apps/web/src/app/tools/reports/reports-layout.component.html @@ -1,12 +1,10 @@ -
- + -
-
- - - {{ "backToReports" | i18n }} - -
+
+
+ + + {{ "backToReports" | i18n }} +
diff --git a/apps/web/src/app/tools/reports/reports-routing.module.ts b/apps/web/src/app/tools/reports/reports-routing.module.ts index b361837168a..0733a57564b 100644 --- a/apps/web/src/app/tools/reports/reports-routing.module.ts +++ b/apps/web/src/app/tools/reports/reports-routing.module.ts @@ -20,7 +20,12 @@ const routes: Routes = [ component: ReportsLayoutComponent, canActivate: [AuthGuard], children: [ - { path: "", pathMatch: "full", component: ReportsHomeComponent, data: { homepage: true } }, + { + path: "", + pathMatch: "full", + component: ReportsHomeComponent, + data: { titleId: "reports", homepage: true }, + }, { path: "breach-report", component: BreachReportComponent, diff --git a/apps/web/src/app/tools/reports/reports.module.ts b/apps/web/src/app/tools/reports/reports.module.ts index 7b05d19d036..10849d56d9c 100644 --- a/apps/web/src/app/tools/reports/reports.module.ts +++ b/apps/web/src/app/tools/reports/reports.module.ts @@ -1,6 +1,7 @@ import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; +import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; import { OrganizationBadgeModule } from "../../vault/individual-vault/organization-badge/organization-badge.module"; import { PipesModule } from "../../vault/individual-vault/pipes/pipes.module"; @@ -24,6 +25,7 @@ import { ReportsSharedModule } from "./shared"; ReportsRoutingModule, OrganizationBadgeModule, PipesModule, + HeaderModule, ], declarations: [ BreachReportComponent, diff --git a/apps/web/src/app/tools/send/send.component.html b/apps/web/src/app/tools/send/send.component.html index 50bc83a5296..9a66c85c78f 100644 --- a/apps/web/src/app/tools/send/send.component.html +++ b/apps/web/src/app/tools/send/send.component.html @@ -1,221 +1,206 @@ -
- - {{ "sendDisabledWarning" | i18n }} - -
-
-
-
- {{ "filters" | i18n }} + + + + + + {{ "loading" | i18n }} + + + + + + + + + {{ "sendDisabledWarning" | i18n }} + +
+
+
+
+ {{ "filters" | i18n }} +
+
+
+
-
-
- -
-
-
    -
  • - - - -
    • -
-
-
-
-

{{ "types" | i18n }}

-
-
    -
  • - - - -
    • -
  • - - - -
    • -
+
+
    +
  • + + + +
    • +
+
+
+
+

{{ "types" | i18n }}

+
    +
  • + + + +
    • +
  • + + + +
    • +
-
-
-

- {{ "send" | i18n }} - - +

+
+ + + + + {{ "name" | i18n }} + {{ "deletionDate" | i18n }} + {{ "options" | i18n }} + + + + + + + + - {{ "loading" | i18n }} + {{ "disabled" | i18n }} - - -
- -
-
- - - - - {{ "name" | i18n }} - {{ "deletionDate" | i18n }} - {{ "options" | i18n }} - - - - - - - + + - - - {{ "disabled" | i18n }} - - - - {{ "password" | i18n }} - - - - {{ "maxAccessCountReached" | i18n }} - - - - {{ "expired" | i18n }} - - - - {{ "pendingDeletion" | i18n }} - - - - {{ s.deletionDate | date: "medium" }} - - - - - - - - - - - -
- - - {{ "loading" | i18n }} - - - - {{ "sendsNoItemsTitle" | i18n }} - {{ "sendsNoItemsMessage" | i18n }} - - - -
+ bitMenuItem + (click)="removePassword(s)" + *ngIf="s.password && !disableSend" + > + + {{ "removePassword" | i18n }} + + + + + + + +
+ + + {{ "loading" | i18n }} + + + + {{ "sendsNoItemsTitle" | i18n }} + {{ "sendsNoItemsMessage" | i18n }} + + +
diff --git a/apps/web/src/app/tools/send/send.component.ts b/apps/web/src/app/tools/send/send.component.ts index 265571db591..b5edd1433e8 100644 --- a/apps/web/src/app/tools/send/send.component.ts +++ b/apps/web/src/app/tools/send/send.component.ts @@ -14,6 +14,7 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction"; import { DialogService, NoItemsModule, SearchModule, TableDataSource } from "@bitwarden/components"; +import { HeaderModule } from "../../layouts/header/header.module"; import { SharedModule } from "../../shared"; import { AddEditComponent } from "./add-edit.component"; @@ -24,7 +25,7 @@ const BroadcasterSubscriptionId = "SendComponent"; @Component({ selector: "app-send", standalone: true, - imports: [SharedModule, SearchModule, NoItemsModule], + imports: [SharedModule, SearchModule, NoItemsModule, HeaderModule], templateUrl: "send.component.html", }) export class SendComponent extends BaseSendComponent { diff --git a/apps/web/src/app/tools/tools.component.html b/apps/web/src/app/tools/tools.component.html deleted file mode 100644 index 667a4025b60..00000000000 --- a/apps/web/src/app/tools/tools.component.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-
-
{{ "tools" | i18n }}
-
- - {{ "generator" | i18n }} - - - {{ "importData" | i18n }} - - - {{ "exportVault" | i18n }} - -
-
-
-
- -
-
-
diff --git a/apps/web/src/app/tools/vault-export/export.component.html b/apps/web/src/app/tools/vault-export/export.component.html index 36288b26cb3..9d615d329d7 100644 --- a/apps/web/src/app/tools/vault-export/export.component.html +++ b/apps/web/src/app/tools/vault-export/export.component.html @@ -1,79 +1,101 @@ -
-

{{ "exportVault" | i18n }}

+ - - {{ "personalVaultExportPolicyInEffect" | i18n }} - - + + + + {{ "personalVaultExportPolicyInEffect" | i18n }} + + - - - {{ "exportFrom" | i18n }} - - - + + + {{ "exportFrom" | i18n }} + + + + + + + + + {{ "fileFormat" | i18n }} + + - - - {{ "fileFormat" | i18n }} - - - - + + + {{ "exportTypeHeading" | i18n }} - - - {{ "exportTypeHeading" | i18n }} + + {{ "accountRestricted" | i18n }} + {{ "accountRestrictedOptionDescription" | i18n }} + - - {{ "accountRestricted" | i18n }} - {{ "accountRestrictedOptionDescription" | i18n }} - + + {{ "passwordProtected" | i18n }} + {{ "passwordProtectedOptionDescription" | i18n }} + + - - {{ "passwordProtected" | i18n }} - {{ "passwordProtectedOptionDescription" | i18n }} - - - - -
+ +
+ + {{ "filePassword" | i18n }} + + + {{ "exportPasswordDescription" | i18n }} + + + +
- {{ "filePassword" | i18n }} + {{ "confirmFilePassword" | i18n }} - {{ "exportPasswordDescription" | i18n }} - -
- - {{ "confirmFilePassword" | i18n }} - - - + - - - + + +
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/vault-filter.module.ts b/apps/web/src/app/vault/individual-vault/vault-filter/vault-filter.module.ts index 2acab17e383..641e4352696 100644 --- a/apps/web/src/app/vault/individual-vault/vault-filter/vault-filter.module.ts +++ b/apps/web/src/app/vault/individual-vault/vault-filter/vault-filter.module.ts @@ -1,5 +1,7 @@ import { NgModule } from "@angular/core"; +import { SearchModule } from "@bitwarden/components"; + import { VaultFilterSharedModule } from "../../individual-vault/vault-filter/shared/vault-filter-shared.module"; import { LinkSsoDirective } from "./components/link-sso.directive"; @@ -9,7 +11,7 @@ import { VaultFilterService as VaultFilterServiceAbstraction } from "./services/ import { VaultFilterService } from "./services/vault-filter.service"; @NgModule({ - imports: [VaultFilterSharedModule], + imports: [VaultFilterSharedModule, SearchModule], declarations: [VaultFilterComponent, OrganizationOptionsComponent, LinkSsoDirective], exports: [VaultFilterComponent], providers: [ diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html index ca8c71cf5df..b0ae308ea86 100644 --- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html +++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html @@ -1,83 +1,71 @@ -
-
- + + + + {{ activeOrganizationId | orgNameFromId: organizations }} {{ "vault" | i18n | lowercase }} + + - {{ activeOrganizationId | orgNameFromId: organizations }} {{ "vault" | i18n | lowercase }} + {{ collection.name }} - - + + + + + + + + + + + + - {{ title }} - - - - - - - - - - - {{ "loading" | i18n }} - - -
+ {{ "loading" | i18n }} + +
@@ -107,4 +95,4 @@
-
+ diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts index 0416971e0d0..b88b3af7872 100644 --- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts +++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts @@ -103,6 +103,10 @@ export class VaultHeaderComponent { return this.i18nService.t("allVaults"); } + protected get icon() { + return this.filter.collectionId && this.filter.collectionId !== All ? "bwi-collection" : ""; + } + /** * A list of collection filters that form a chain from the organization root to currently selected collection. * Begins from the organization root and excludes the currently selected collection. diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html index df00979f71d..b0592c58360 100644 --- a/apps/web/src/app/vault/individual-vault/vault.component.html +++ b/apps/web/src/app/vault/individual-vault/vault.component.html @@ -1,129 +1,126 @@ -
- + -
-
-
-
-
- -
-
-
-
-
- - - {{ trashCleanupWarning }} - - - -
- - {{ "loading" | i18n }} -
-
- -

{{ "noItemsInList" | i18n }}

- -
-
-
- + - - -
-
- - {{ "updateBrowser" | i18n }} -
-
-

{{ "updateBrowserDesc" | i18n }}

- - {{ "updateBrowser" | i18n }} - -
-
-
-
- {{ "goPremium" | i18n }} -
-
-

{{ "premiumUpgradeUnlockFeatures" | i18n }}

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

{{ "noItemsInList" | i18n }}

+ +
+
+
+ + + + +
+
+ + {{ "updateBrowser" | i18n }} +
+
+

{{ "updateBrowserDesc" | i18n }}

+ + {{ "updateBrowser" | i18n }} + +
+
+
+
+ {{ "goPremium" | i18n }} +
+
+

{{ "premiumUpgradeUnlockFeatures" | i18n }}

+ + {{ "goPremium" | i18n }} + +
+
+
+ diff --git a/apps/web/src/app/vault/org-vault/vault-filter/vault-filter.module.ts b/apps/web/src/app/vault/org-vault/vault-filter/vault-filter.module.ts index c276f79fba9..13a69796441 100644 --- a/apps/web/src/app/vault/org-vault/vault-filter/vault-filter.module.ts +++ b/apps/web/src/app/vault/org-vault/vault-filter/vault-filter.module.ts @@ -1,5 +1,7 @@ import { NgModule } from "@angular/core"; +import { SearchModule } from "@bitwarden/components"; + import { VaultFilterService as VaultFilterServiceAbstraction } from "../../individual-vault/vault-filter/services/abstractions/vault-filter.service"; import { VaultFilterSharedModule } from "../../individual-vault/vault-filter/shared/vault-filter-shared.module"; @@ -7,7 +9,7 @@ import { VaultFilterComponent } from "./vault-filter.component"; import { VaultFilterService } from "./vault-filter.service"; @NgModule({ - imports: [VaultFilterSharedModule], + imports: [VaultFilterSharedModule, SearchModule], declarations: [VaultFilterComponent], exports: [VaultFilterComponent], providers: [ diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html index 01c8e2f1beb..97d99d5821f 100644 --- a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html +++ b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html @@ -1,88 +1,77 @@ -
-
- + + + + {{ organization.name }} + + {{ "vault" | i18n | lowercase }} + + + {{ "collections" | i18n | lowercase }} + + + + - {{ organization.name }} - - {{ "vault" | i18n | lowercase }} - - - {{ "collections" | i18n | lowercase }} - + {{ collection.name }} - - + + + + + + + + + + + + - {{ title }} - - - - - - - - - - - {{ "loading" | i18n }} - - -
+ {{ "loading" | i18n }} + +
@@ -118,4 +107,4 @@ {{ "newItem" | i18n }}
-
+ diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts index 877c9022a74..45e56d062cf 100644 --- a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts +++ b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts @@ -80,6 +80,10 @@ export class VaultHeaderComponent { return `${this.organization?.name} ${headerType}`; } + get icon() { + return this.filter.collectionId !== undefined ? "bwi-collection" : ""; + } + protected get showBreadcrumbs() { return this.filter.collectionId !== undefined && this.filter.collectionId !== All; } diff --git a/apps/web/src/app/vault/org-vault/vault.component.html b/apps/web/src/app/vault/org-vault/vault.component.html index ba45b865be1..29b465025da 100644 --- a/apps/web/src/app/vault/org-vault/vault.component.html +++ b/apps/web/src/app/vault/org-vault/vault.component.html @@ -1,127 +1,121 @@ -
-
-
-
-
-
- -
+ + +
+
+
+
+
+
-
- - - {{ trashCleanupWarning }} - - - - -
- -

{{ "noPermissionToViewAllCollectionItems" | i18n }}

-
-
- -

{{ "noItemsInList" | i18n }}

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

{{ "noPermissionToViewAllCollectionItems" | i18n }}

+
+
+ +

{{ "noItemsInList" | i18n }}

+ +
+ + + {{ "noItemsInList" | i18n }} + + + + + +
+ + {{ "loading" | i18n }} +
+
+ + + diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 80033157a5d..4350b5de8c7 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -1472,13 +1472,6 @@ "faviconDesc": { "message": "Show a recognizable image next to each login." }, - "enableFullWidth": { - "message": "Display full width layout", - "description": "Allows scaling the web vault UI's width" - }, - "enableFullWidthDesc": { - "message": "Allow the web vault to expand the full width of the browser window." - }, "default": { "message": "Default" }, @@ -4950,6 +4943,9 @@ "newClientOrganizationDesc": { "message": "Create a new client organization that will be associated with you as the Provider. You will be able to access and manage this organization." }, + "newClient": { + "message": "New client" + }, "addExistingOrganization": { "message": "Add existing organization" }, @@ -7587,5 +7583,11 @@ }, "freeForOneYear": { "message": "Free for 1 year" + }, + "newWebApp": { + "message": "Welcome to the new and improved web app. Learn more about what’s changed." + }, + "releaseBlog": { + "message": "Read release blog" } } diff --git a/apps/web/src/scss/base.scss b/apps/web/src/scss/base.scss index 4600620be87..b02d4135958 100644 --- a/apps/web/src/scss/base.scss +++ b/apps/web/src/scss/base.scss @@ -90,14 +90,6 @@ img.logo-themed { margin-top: 20px; } -.footer { - margin-top: 40px; - padding: 40px 0 40px 0; - @include themify($themes) { - border-top: 1px solid themed("separator"); - } -} - hr, .dropdown-divider { @include themify($themes) { diff --git a/apps/web/src/scss/buttons.scss b/apps/web/src/scss/buttons.scss index c803439fe4d..881f853e76f 100644 --- a/apps/web/src/scss/buttons.scss +++ b/apps/web/src/scss/buttons.scss @@ -199,17 +199,3 @@ button.no-btn { color: inherit; } } - -button.header-expandable { - background: transparent; - border: none; - padding: 0; - color: inherit; - margin-bottom: 5px; - text-transform: uppercase; -} - -/* special case for Send options */ -h3 button.header-expandable .bwi { - line-height: 1.5; -} diff --git a/apps/web/src/scss/navigation.scss b/apps/web/src/scss/navigation.scss deleted file mode 100644 index f57936d49ed..00000000000 --- a/apps/web/src/scss/navigation.scss +++ /dev/null @@ -1,104 +0,0 @@ -.navbar { - padding-left: 0; - padding-right: 0; - @include themify($themes) { - background-color: themed("navBackground"); - } - - &.nav-background-alt { - @include themify($themes) { - background-color: themed("navBackgroundAlt"); - } - } - - .nav-item { - > .nav-link { - @include themify($themes) { - font-weight: themed("navWeight"); - } - } - &.active > .nav-link { - @include themify($themes) { - font-weight: themed("navActiveWeight"); - } - } - } -} - -.navbar-brand { - margin-bottom: -20px; - margin-top: -20px; -} - -.nav-tabs .nav-link.active { - @include themify($themes) { - background: themed("navActiveBackground"); - border-color: themed("borderColor"); - } -} - -.org-nav { - height: 100px; - min-height: 100px; - @include themify($themes) { - background-color: themed("navOrgBackgroundColor"); - border-bottom: 1px solid themed("borderColor"); - color: themed("textColor"); - } - - .container { - height: 100%; - } - - .org-name { - line-height: 1; - text-align: left; - font-weight: normal; - span { - display: block; - font-size: $font-size-lg; - @include themify($themes) { - color: themed("textHeadingColor"); - } - } - } -} - -.tabbed-nav { - @include themify($themes) { - border-bottom: 1px solid themed("borderColor"); - color: themed("textColor"); - } -} - -.org-nav, -.tabbed-nav { - .nav-tabs { - border-bottom: none; - - a { - &:not(.active) { - border-color: transparent; - @include themify($themes) { - color: themed("textColor"); - } - } - - &.active { - font-weight: bold; - padding-top: calc(#{$nav-link-padding-y} - 2px); - @include themify($themes) { - border-top: 3px solid themed("primary"); - border-bottom: 1px solid themed("backgroundColor"); - color: themed("linkColor"); - } - } - - &.disabled { - @include themify($themes) { - color: themed("inputDisabledColor"); - } - } - } - } -} diff --git a/apps/web/src/scss/styles.scss b/apps/web/src/scss/styles.scss index 05cd9fef4eb..98b3512ba59 100644 --- a/apps/web/src/scss/styles.scss +++ b/apps/web/src/scss/styles.scss @@ -24,7 +24,7 @@ @import "~bootstrap/scss/_input-group"; // @import "~bootstrap/scss/_custom-forms"; @import "~bootstrap/scss/_nav"; -@import "~bootstrap/scss/_navbar"; +// @import "~bootstrap/scss/_navbar"; @import "~bootstrap/scss/_card"; // @import "~bootstrap/scss/_breadcrumb"; // @import "~bootstrap/scss/_pagination"; @@ -50,7 +50,6 @@ @import "./callouts"; @import "./cards"; @import "./forms"; -@import "./navigation"; @import "./modals"; @import "./pages"; @import "./plugins"; diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css index e58785aecb0..1e04904d9d0 100644 --- a/apps/web/src/scss/tailwind.css +++ b/apps/web/src/scss/tailwind.css @@ -3,3 +3,8 @@ @tailwind utilities; @import "../../../../libs/components/src/tw-theme.css"; + +/* Prevent page from jumping when showing scrollbar */ +html { + margin-right: calc(-100vw + 100%); +} diff --git a/apps/web/src/scss/variables.scss b/apps/web/src/scss/variables.scss index af61daff512..9d3d8d6ad49 100644 --- a/apps/web/src/scss/variables.scss +++ b/apps/web/src/scss/variables.scss @@ -34,7 +34,6 @@ $small-font-size: 90%; $font-size-lg: 1.15rem; $code-font-size: 100%; -$navbar-padding-y: 0.75rem; $grid-gutter-width: 20px; $card-spacer-y: 0.6rem; @@ -49,13 +48,6 @@ $dropdown-link-active-color: $dropdown-link-color; $dropdown-link-active-bg: rgba(#000000, 0.1); $dropdown-item-padding-x: 1rem; -$navbar-brand-font-size: 35px; -$navbar-brand-height: 35px; -$navbar-brand-padding-y: 0; -$navbar-dark-color: rgba($white, 0.7); -$navbar-dark-hover-color: rgba($white, 0.9); -$navbar-nav-link-padding-x: 0.8rem; - $input-bg: #fbfbfb; $input-focus-bg: $white; $input-disabled-bg: #e0e0e0; @@ -197,12 +189,6 @@ $themes: ( loadingSvg: url("../images/loading.svg"), logoSuffix: "dark", mfaLogoSuffix: ".png", - navActiveBackground: $white, - navActiveWeight: 600, - navBackground: $primary, - navBackgroundAlt: $secondary-alt, - navOrgBackgroundColor: #fbfbfb, - navWeight: 600, pwStrengthBackground: #e9ecef, separator: $secondary, separatorHr: rgb(0, 0, 0, 0.1), @@ -306,12 +292,6 @@ $themes: ( loadingSvg: url("../images/loading-white.svg"), logoSuffix: "white", mfaLogoSuffix: "-w.png", - navActiveBackground: $darkDarkBlue2, - navActiveWeight: 600, - navBackground: $darkDarkBlue1, - navBackgroundAlt: $darkDarkBlue1, - navOrgBackgroundColor: #161c26, - navWeight: 400, pwStrengthBackground: $darkBlue2, separator: $darkBlue1, separatorHr: $darkBlue1, diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html index f0c400a78ee..5edc1f58674 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/device-approvals/device-approvals.component.html @@ -1,13 +1,14 @@ -

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

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

{{ "deviceApprovalsDesc" | i18n }}

diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html index 84d32ade010..1d71deca122 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/manage/domain-verification/domain-verification.component.html @@ -1,10 +1,8 @@ -
-

{{ "domainVerification" | i18n }}

- + -
+ -

{{ "scim" | i18n }}

-
+

{{ "scimDescription" | i18n }}

diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations-routing.module.ts b/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations-routing.module.ts index 86e1d5d24b0..a116d2244cd 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations-routing.module.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations-routing.module.ts @@ -6,7 +6,6 @@ import { canAccessSettingsTab } from "@bitwarden/common/admin-console/abstractio import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; import { OrganizationPermissionsGuard } from "@bitwarden/web-vault/app/admin-console/organizations/guards/org-permissions.guard"; import { OrganizationLayoutComponent } from "@bitwarden/web-vault/app/admin-console/organizations/layouts/organization-layout.component"; -import { SettingsComponent } from "@bitwarden/web-vault/app/admin-console/organizations/settings/settings.component"; import { SsoComponent } from "../../auth/sso/sso.component"; @@ -22,7 +21,6 @@ const routes: Routes = [ children: [ { path: "settings", - component: SettingsComponent, canActivate: [OrganizationPermissionsGuard], data: { organizationPermissions: canAccessSettingsTab, @@ -33,6 +31,7 @@ const routes: Routes = [ component: DomainVerificationComponent, canActivate: [OrganizationPermissionsGuard], data: { + titleId: "domainVerification", organizationPermissions: (org: Organization) => org.canManageDomainVerification, }, }, @@ -41,6 +40,7 @@ const routes: Routes = [ component: SsoComponent, canActivate: [OrganizationPermissionsGuard], data: { + titleId: "singleSignOn", organizationPermissions: (org: Organization) => org.canManageSso, }, }, @@ -49,6 +49,7 @@ const routes: Routes = [ component: ScimComponent, canActivate: [OrganizationPermissionsGuard], data: { + titleId: "scim", organizationPermissions: (org: Organization) => org.canManageScim, }, }, diff --git a/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations.module.ts b/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations.module.ts index 3e939fa74f5..98982dae24a 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations.module.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/organizations/organizations.module.ts @@ -1,6 +1,7 @@ import { NgModule } from "@angular/core"; import { NoItemsModule } from "@bitwarden/components"; +import { LooseComponentsModule } from "@bitwarden/web-vault/app/shared"; import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module"; import { SsoComponent } from "../../auth/sso/sso.component"; @@ -13,7 +14,13 @@ import { ScimComponent } from "./manage/scim.component"; import { OrganizationsRoutingModule } from "./organizations-routing.module"; @NgModule({ - imports: [SharedModule, CoreOrganizationModule, OrganizationsRoutingModule, NoItemsModule], + imports: [ + SharedModule, + CoreOrganizationModule, + OrganizationsRoutingModule, + NoItemsModule, + LooseComponentsModule, + ], declarations: [ SsoComponent, ScimComponent, diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html index 4f8f4b32631..4d4c7f11076 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html @@ -1,32 +1,19 @@ -
-

{{ "clients" | i18n }}

- -
-
- - -
- - - {{ "newClientOrganization" | i18n }} - - -
-
+ + + + + {{ "newClient" | i18n }} + + + -

{{ "newClientOrganization" | i18n }}

-
+

{{ "newClientOrganizationDesc" | i18n }}

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html index c64a5722583..12182c4584c 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/events.component.html @@ -1,58 +1,58 @@ -
-

{{ "eventLogs" | i18n }}

-
-
- - - - - - -
-
- -
-
- -
+ + +
+
+ + + - + +
+
+ +
+
+ +
+