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 563905548df..336285b2a45 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,5 +1,5 @@ - - + + @@ -103,12 +103,7 @@ *ngIf="organization.canManageScim" > - - - - - - + {{ "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 4383656bee1..65fefe01a3b 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 @@ -22,12 +22,10 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; -import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; +import { BannerModule, IconModule } from "@bitwarden/components"; -import { PaymentMethodWarningsModule } from "../../../billing/shared"; import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component"; -import { ProductSwitcherModule } from "../../../layouts/product-switcher/product-switcher.module"; -import { ToggleWidthComponent } from "../../../layouts/toggle-width.component"; +import { WebLayoutModule } from "../../../layouts/web-layout.module"; import { AdminConsoleLogo } from "../../icons/admin-console-logo"; @Component({ @@ -38,14 +36,10 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo"; CommonModule, RouterModule, JslibModule, - LayoutComponent, + WebLayoutModule, IconModule, - NavigationModule, OrgSwitcherComponent, BannerModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, ], }) export class OrganizationLayoutComponent implements OnInit, OnDestroy { @@ -64,10 +58,6 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { FeatureFlag.EnableConsolidatedBilling, ); - protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( - FeatureFlag.ShowPaymentMethodWarningBanners, - ); - constructor( private route: ActivatedRoute, private organizationService: OrganizationService, diff --git a/apps/web/src/app/layouts/user-layout.component.html b/apps/web/src/app/layouts/user-layout.component.html index 0d2be927ecb..4011ac84a75 100644 --- a/apps/web/src/app/layouts/user-layout.component.html +++ b/apps/web/src/app/layouts/user-layout.component.html @@ -1,5 +1,5 @@ - - + + @@ -30,15 +30,7 @@ *ngIf="hasFamilySponsorshipAvailable$ | async" > + - - - - - - - - + diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts index 757b8220f3a..bd025332335 100644 --- a/apps/web/src/app/layouts/user-layout.component.ts +++ b/apps/web/src/app/layouts/user-layout.component.ts @@ -7,49 +7,29 @@ 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 { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; -import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; -import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { SyncService } from "@bitwarden/common/platform/sync"; -import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; - -import { PaymentMethodWarningsModule } from "../billing/shared"; +import { IconModule } from "@bitwarden/components"; import { PasswordManagerLogo } from "./password-manager-logo"; -import { ProductSwitcherModule } from "./product-switcher/product-switcher.module"; -import { ToggleWidthComponent } from "./toggle-width.component"; +import { WebLayoutModule } from "./web-layout.module"; @Component({ selector: "app-user-layout", templateUrl: "user-layout.component.html", standalone: true, - imports: [ - CommonModule, - RouterModule, - JslibModule, - LayoutComponent, - IconModule, - NavigationModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, - ], + imports: [CommonModule, RouterModule, JslibModule, WebLayoutModule, IconModule], }) export class UserLayoutComponent implements OnInit { protected readonly logo = PasswordManagerLogo; protected hasFamilySponsorshipAvailable$: Observable; protected showSubscription$: Observable; - protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( - FeatureFlag.ShowPaymentMethodWarningBanners, - ); - constructor( private platformUtilsService: PlatformUtilsService, private organizationService: OrganizationService, private apiService: ApiService, private syncService: SyncService, - private configService: ConfigService, private billingAccountProfileStateService: BillingAccountProfileStateService, ) {} diff --git a/apps/web/src/app/layouts/web-layout.component.html b/apps/web/src/app/layouts/web-layout.component.html new file mode 100644 index 00000000000..31a5e826888 --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.component.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/apps/web/src/app/layouts/web-layout.component.ts b/apps/web/src/app/layouts/web-layout.component.ts new file mode 100644 index 00000000000..bb91e619aad --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.component.ts @@ -0,0 +1,31 @@ +import { CommonModule } from "@angular/common"; +import { Component } from "@angular/core"; + +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; +import { LayoutComponent } from "@bitwarden/components"; + +import { PaymentMethodWarningsModule } from "../billing/shared"; + +import { ProductSwitcherModule } from "./product-switcher/product-switcher.module"; +import { ToggleWidthComponent } from "./toggle-width.component"; + +@Component({ + selector: "app-layout", + templateUrl: "web-layout.component.html", + standalone: true, + imports: [ + CommonModule, + LayoutComponent, + ProductSwitcherModule, + ToggleWidthComponent, + PaymentMethodWarningsModule, + ], +}) +export class WebLayoutComponent { + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + ); + + constructor(private configService: ConfigService) {} +} diff --git a/apps/web/src/app/layouts/web-layout.module.ts b/apps/web/src/app/layouts/web-layout.module.ts new file mode 100644 index 00000000000..48e21322e63 --- /dev/null +++ b/apps/web/src/app/layouts/web-layout.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from "@angular/core"; + +import { NavigationModule } from "@bitwarden/components"; + +import { WebLayoutComponent } from "./web-layout.component"; +import { WebSideNavComponent } from "./web-side-nav.component"; + +@NgModule({ + imports: [WebLayoutComponent, WebSideNavComponent], + exports: [NavigationModule, WebLayoutComponent, WebSideNavComponent], + declarations: [], + providers: [], +}) +export class WebLayoutModule {} diff --git a/apps/web/src/app/layouts/web-side-nav.component.html b/apps/web/src/app/layouts/web-side-nav.component.html new file mode 100644 index 00000000000..adb526bd593 --- /dev/null +++ b/apps/web/src/app/layouts/web-side-nav.component.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/src/app/layouts/web-side-nav.component.ts b/apps/web/src/app/layouts/web-side-nav.component.ts new file mode 100644 index 00000000000..28b04e87461 --- /dev/null +++ b/apps/web/src/app/layouts/web-side-nav.component.ts @@ -0,0 +1,17 @@ +import { CommonModule } from "@angular/common"; +import { Component, Input } from "@angular/core"; + +import { SideNavVariant, NavigationModule } from "@bitwarden/components"; + +import { ProductSwitcherModule } from "./product-switcher/product-switcher.module"; +import { ToggleWidthComponent } from "./toggle-width.component"; + +@Component({ + selector: "app-side-nav", + templateUrl: "web-side-nav.component.html", + standalone: true, + imports: [CommonModule, NavigationModule, ProductSwitcherModule, ToggleWidthComponent], +}) +export class WebSideNavComponent { + @Input() variant: SideNavVariant = "primary"; +} diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html index 9ed71f157c5..9a94df877d2 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html @@ -1,5 +1,5 @@ - - + + + - - - - - . - - + diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts index 65175fb51f7..820fc820ace 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts @@ -10,17 +10,9 @@ import { Provider } from "@bitwarden/common/admin-console/models/domain/provider import { hasConsolidatedBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction"; import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; -import { - BannerModule, - IconModule, - LayoutComponent, - LinkModule, - NavigationModule, -} from "@bitwarden/components"; +import { BannerModule, IconModule, LinkModule } from "@bitwarden/components"; import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo"; -import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared"; -import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module"; -import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component"; +import { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module"; import { ProviderClientVaultPrivacyBannerService } from "./services/provider-client-vault-privacy-banner.service"; @@ -32,14 +24,10 @@ import { ProviderClientVaultPrivacyBannerService } from "./services/provider-cli CommonModule, RouterModule, JslibModule, - LayoutComponent, + WebLayoutModule, IconModule, - NavigationModule, - PaymentMethodWarningsModule, - ToggleWidthComponent, - ProductSwitcherModule, - BannerModule, LinkModule, + BannerModule, ], }) export class ProvidersLayoutComponent implements OnInit, OnDestroy { @@ -51,10 +39,6 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy { protected hasConsolidatedBilling$: Observable; protected canAccessBilling$: Observable; - protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( - FeatureFlag.ShowPaymentMethodWarningBanners, - ); - protected showProviderClientVaultPrivacyWarningBanner$ = this.configService.getFeatureFlag$( FeatureFlag.ProviderClientVaultPrivacyBanner, ); diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html index ad63d948391..63242716303 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.html @@ -1,4 +1,4 @@ - + - + diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts index 848b22864c5..cd25869e4c5 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts @@ -1,23 +1,14 @@ import { NgModule } from "@angular/core"; -import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components"; import { OrgSwitcherComponent } from "@bitwarden/web-vault/app/layouts/org-switcher/org-switcher.component"; -import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module"; -import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component"; +import { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module"; import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module"; import { LayoutComponent } from "./layout.component"; import { NavigationComponent } from "./navigation.component"; @NgModule({ - imports: [ - SharedModule, - NavigationModule, - BitLayoutComponent, - OrgSwitcherComponent, - ToggleWidthComponent, - ProductSwitcherModule, - ], + imports: [SharedModule, WebLayoutModule, OrgSwitcherComponent], declarations: [LayoutComponent, NavigationComponent], }) export class LayoutModule {} diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html index 2c7661d13be..80750dc0d88 100644 --- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html +++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html @@ -1,4 +1,4 @@ - + - - - - - - + diff --git a/libs/components/src/navigation/index.ts b/libs/components/src/navigation/index.ts index 8f182b11048..31e14a98418 100644 --- a/libs/components/src/navigation/index.ts +++ b/libs/components/src/navigation/index.ts @@ -1,2 +1,3 @@ export * from "./navigation.module"; export * from "./side-nav.service"; +export type * from "./side-nav.component"; diff --git a/libs/components/src/navigation/side-nav.component.ts b/libs/components/src/navigation/side-nav.component.ts index 0561e2e603c..95d5b9011a9 100644 --- a/libs/components/src/navigation/side-nav.component.ts +++ b/libs/components/src/navigation/side-nav.component.ts @@ -2,12 +2,14 @@ import { Component, ElementRef, Input, ViewChild } from "@angular/core"; import { SideNavService } from "./side-nav.service"; +export type SideNavVariant = "primary" | "secondary"; + @Component({ selector: "bit-side-nav", templateUrl: "side-nav.component.html", }) export class SideNavComponent { - @Input() variant: "primary" | "secondary" = "primary"; + @Input() variant: SideNavVariant = "primary"; @ViewChild("toggleButton", { read: ElementRef, static: true }) private toggleButton: ElementRef;