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 <smelton@bitwarden.com>
Co-authored-by: Will Martin <contact@willmartian.com>

.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

apps/web/src/app/admin-console/components/organization-switcher.component.html

@@ -1,67 +0,0 @@
-<div *ngIf="loaded && activeOrganization != null" class="tw-flex">
-  <button
-    class="tw-flex tw-items-center tw-border-none tw-bg-background-alt"
-    type="button"
-    id="pickerButton"
-    [appA11yTitle]="'organizationPicker' | i18n"
-    [bitMenuTriggerFor]="orgPickerMenu"
-  >
-    <bit-avatar [text]="activeOrganization.name"></bit-avatar>
-    <div class="tw-flex">
-      <div class="org-name tw-ml-3">
-        <span>{{ activeOrganization.name }}</span>
-        <small class="tw-text-muted">{{ "organization" | i18n }}</small>
-      </div>
-      <div class="tw-ml-3">
-        <i class="bwi bwi-angle-down tw-text-main" aria-hidden="true"></i>
-      </div>
-    </div>
-  </button>
-  <div>
-    <div
-      class="tw-ml-3 tw-rounded tw-border tw-border-solid tw-border-danger-500 tw-text-danger"
-      *ngIf="!activeOrganization.enabled"
-    >
-      <div class="tw-px-5 tw-py-2">
-        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-        {{ "organizationIsDisabled" | i18n }}
-      </div>
-    </div>
-    <div
-      class="tw-ml-3 tw-rounded tw-border tw-border-solid tw-border-info-500 tw-text-info"
-      *ngIf="activeOrganization.isProviderUser"
-    >
-      <div class="tw-px-5 tw-py-2">
-        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-        {{ "accessingUsingProvider" | i18n: activeOrganization.providerName }}
-      </div>
-    </div>
-  </div>
-
-  <bit-menu #orgPickerMenu>
-    <ul aria-labelledby="pickerButton" class="tw-m-0 tw-p-0">
-      <li
-        *ngFor="let org of organizations$ | async"
-        class="tw-flex tw-list-none tw-flex-col"
-        role="none"
-      >
-        <a bitMenuItem [routerLink]="['/organizations', org.id]">
-          <i
-            class="bwi bwi-check mr-2"
-            [ngClass]="org.id === activeOrganization.id ? 'visible' : 'invisible'"
-          >
-            <span class="tw-sr-only">{{ "currentOrganization" | i18n }}</span>
-          </i>
-          {{ org.name }}
-        </a>
-      </li>
-      <bit-menu-divider></bit-menu-divider>
-      <li class="tw-list-none" role="none">
-        <a bitMenuItem routerLink="/create-organization">
-          <i class="bwi bwi-plus mr-2"></i>
-          {{ "newOrganization" | i18n }}</a
-        >
-      </li>
-    </ul>
-  </bit-menu>
-</div>

apps/web/src/app/admin-console/components/organization-switcher.component.ts

@@ -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<Organization[]>;
-
-  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;
-  }
-}

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -1,41 +1,125 @@
-<app-navbar></app-navbar>
+<bit-layout variant="secondary">
-<app-payment-method-banners *ngIf="false"></app-payment-method-banners>
+  <nav slot="sidebar" *ngIf="organization$ | async as organization">
-<div class="org-nav !tw-h-32" *ngIf="organization$ | async as organization">
+    <a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
-  <div class="container d-flex">
+      <bit-icon [icon]="logo"></bit-icon>
-    <div class="d-flex flex-column">
+    </a>
-      <app-organization-switcher
+    <org-switcher [filter]="orgFilter"></org-switcher>
-        class="my-auto pl-1"
+
-        [activeOrganization]="organization"
+    <bit-nav-item
-      ></app-organization-switcher>
+      icon="bwi-collection"
-      <bit-tab-nav-bar class="-tw-mb-px">
+      [text]="organization.flexibleCollections ? 'collections' : ('vault' | i18n)"
-        <bit-tab-link
-          *ngIf="canShowVaultTab(organization) && organization.flexibleCollections; else vaultTab"
       route="vault"
-          >{{ "collections" | i18n }}</bit-tab-link
+      *ngIf="canShowVaultTab(organization)"
     >
-        <ng-template #vaultTab>
+    </bit-nav-item>
-          <bit-tab-link *ngIf="canShowVaultTab(organization)" route="vault">{{
+    <bit-nav-item
-            "vault" | i18n
+      icon="bwi-user"
-          }}</bit-tab-link>
+      [text]="'members' | i18n"
-        </ng-template>
+      route="members"
-        <bit-tab-link *ngIf="canShowMembersTab(organization)" route="members">{{
+      *ngIf="canShowMembersTab(organization)"
-          "members" | i18n
+    ></bit-nav-item>
-        }}</bit-tab-link>
+    <bit-nav-item
-        <bit-tab-link *ngIf="canShowGroupsTab(organization)" route="groups">{{
+      icon="bwi-users"
-          "groups" | i18n
+      [text]="'groups' | i18n"
-        }}</bit-tab-link>
+      route="groups"
-        <bit-tab-link *ngIf="canShowReportsTab(organization)" route="reporting">
+      *ngIf="canShowGroupsTab(organization)"
-          {{ getReportTabLabel(organization) | i18n }}
+    ></bit-nav-item>
-        </bit-tab-link>
+    <bit-nav-group
-        <bit-tab-link *ngIf="canShowBillingTab(organization)" route="billing">{{
+      icon="bwi-sliders"
-          "billing" | i18n
+      [text]="getReportTabLabel(organization) | i18n"
-        }}</bit-tab-link>
+      route="reporting"
-        <bit-tab-link *ngIf="canShowSettingsTab(organization)" route="settings">{{
+      *ngIf="canShowReportsTab(organization)"
-          "settings" | i18n
+    >
-        }}</bit-tab-link>
+      <bit-nav-item
-      </bit-tab-nav-bar>
+        [text]="'eventLogs' | i18n"
-    </div>
+        route="reporting/events"
-  </div>
+        *ngIf="organization.canAccessEventLogs"
-</div>
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'reports' | i18n"
+        route="reporting/reports"
+        *ngIf="organization.canAccessReports"
+      ></bit-nav-item>
+    </bit-nav-group>
+    <bit-nav-group
+      icon="bwi-billing"
+      [text]="'billing' | i18n"
+      route="billing"
+      *ngIf="canShowBillingTab(organization)"
+    >
+      <bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
+      <ng-container *ngIf="showPaymentAndHistory$ | async">
+        <bit-nav-item [text]="'paymentMethod' | i18n" route="billing/payment-method"></bit-nav-item>
+        <bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
+      </ng-container>
+    </bit-nav-group>
+    <bit-nav-group
+      icon="bwi-cog"
+      [text]="'settings' | i18n"
+      route="settings"
+      *ngIf="canShowSettingsTab(organization)"
+    >
+      <bit-nav-item
+        [text]="'organizationInfo' | i18n"
+        route="settings/account"
+        *ngIf="organization.isOwner"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'policies' | i18n"
+        route="settings/policies"
+        *ngIf="organization.canManagePolicies"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'twoStepLogin' | i18n"
+        route="settings/two-factor"
+        *ngIf="organization.use2fa && organization.isOwner"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'importData' | i18n"
+        route="settings/tools/import"
+        *ngIf="organization.canAccessImportExport"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'exportVault' | i18n"
+        route="settings/tools/export"
+        *ngIf="organization.canAccessImportExport"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'domainVerification' | i18n"
+        route="settings/domain-verification"
+        *ngIf="organization?.canManageDomainVerification"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'singleSignOn' | i18n"
+        route="settings/sso"
+        *ngIf="organization.canManageSso"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'deviceApprovals' | i18n"
+        route="settings/device-approvals"
+        *ngIf="organization.canManageDeviceApprovals"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'scim' | i18n"
+        route="settings/scim"
+        *ngIf="organization.canManageScim"
+      ></bit-nav-item>
+    </bit-nav-group>
+  </nav>
+
+  <ng-container *ngIf="organization$ | async as organization">
+    <bit-banner
+      *ngIf="organization.isProviderUser"
+      [showClose]="false"
+      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+    >
+      {{ "accessingUsingProvider" | i18n: organization.providerName }}
+    </bit-banner>
+    <app-payment-method-banners
+      *ngIf="false"
+      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+    ></app-payment-method-banners>
+  </ng-container>
+
   <router-outlet></router-outlet>
-<app-footer></app-footer>
+</bit-layout>

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<Organization>;
+  showPaymentAndHistory$: Observable<boolean>;
 
   private _destroy = new Subject<void>();
 
   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() {

apps/web/src/app/admin-console/organizations/manage/events.component.html

@@ -1,5 +1,6 @@
+<app-header></app-header>
+
 <div class="tw-mb-4">
-  <h1>{{ "eventLogs" | i18n }}</h1>
   <div class="tw-mt-4 tw-flex tw-items-center">
     <bit-form-field>
       <bit-label>{{ "from" | i18n }}</bit-label>

apps/web/src/app/admin-console/organizations/manage/groups.component.html

@@ -1,26 +1,15 @@
-<div class="container page-content">
+<app-header>
-  <div class="tw-mb-4 tw-flex">
+  <bit-search
-    <h1>{{ "groups" | i18n }}</h1>
+    [placeholder]="'searchGroups' | i18n"
-    <div class="tw-ml-auto tw-flex tw-items-center">
-      <div class="tw-mr-2">
-        <label class="sr-only">{{ "search" | i18n }}</label>
-        <div class="tw-flex tw-items-center">
-          <i class="bwi bwi-search bwi-fw tw-z-20 -tw-mr-7 tw-text-muted" aria-hidden="true"></i>
-          <input
-            bitInput
-            type="search"
-            placeholder="{{ 'searchGroups' | i18n }}"
-            class="tw-rounded-l tw-pl-9"
     [(ngModel)]="searchText"
-          />
+    class="tw-w-80"
-        </div>
+  ></bit-search>
-      </div>
   <button bitButton type="button" buttonType="primary" (click)="add()">
     <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
     {{ "newGroup" | i18n }}
   </button>
-    </div>
+</app-header>
-  </div>
+
 <ng-container *ngIf="loading">
   <i
     class="bwi bwi-spinner bwi-spin text-muted"
@@ -123,4 +112,3 @@
   </bit-table>
 </ng-container>
 <ng-template #addEdit></ng-template>
-</div>

apps/web/src/app/admin-console/organizations/members/people.component.html

@@ -1,7 +1,17 @@
-<div class="container page-content">
+<app-header>
+  <bit-search
+    class="tw-grow"
+    [(ngModel)]="searchText"
+    [placeholder]="'searchMembers' | i18n"
+  ></bit-search>
+
+  <button type="button" bitButton buttonType="primary" (click)="invite()">
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    {{ "inviteMember" | i18n }}
+  </button>
+</app-header>
+
 <div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
-    <h1>{{ "members" | i18n }}</h1>
-    <div class="tw-flex tw-items-center tw-justify-end tw-space-x-3">
   <bit-toggle-group
     [selected]="status"
     (selectedChange)="filter($event)"
@@ -26,18 +36,6 @@
       <span bitBadge variant="info" *ngIf="revokedCount">{{ revokedCount }}</span>
     </bit-toggle>
   </bit-toggle-group>
-
-      <bit-search
-        class="tw-grow"
-        [(ngModel)]="searchText"
-        [placeholder]="'searchMembers' | i18n"
-      ></bit-search>
-
-      <button type="button" bitButton buttonType="primary" (click)="invite()">
-        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        {{ "inviteMember" | i18n }}
-      </button>
-    </div>
 </div>
 <ng-container *ngIf="loading">
   <i
@@ -256,9 +254,7 @@
                 </span>
               </button>
               <bit-menu-divider
-                  *ngIf="
+                *ngIf="u.status === userStatusType.Accepted || u.status === userStatusType.Invited"
-                    u.status === userStatusType.Accepted || u.status === userStatusType.Invited
-                  "
               ></bit-menu-divider>
               <button type="button" bitMenuItem (click)="edit(u, memberTab.Role)">
                 <i aria-hidden="true" class="bwi bwi-user"></i> {{ "memberRole" | i18n }}
@@ -328,4 +324,3 @@
 <ng-template #bulkStatusTemplate></ng-template>
 <ng-template #bulkConfirmTemplate></ng-template>
 <ng-template #bulkRemoveTemplate></ng-template>
-</div>

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],
 })

apps/web/src/app/admin-console/organizations/policies/policies.component.html

@@ -1,6 +1,6 @@
-<div class="page-header d-flex">
+<app-header></app-header>
-  <h1>{{ "policies" | i18n }}</h1>
+
-</div>
+<bit-container>
   <ng-container *ngIf="loading">
     <i
       class="bwi bwi-spinner bwi-spin text-muted"
@@ -23,3 +23,4 @@
     </tbody>
   </table>
   <ng-template #editTemplate></ng-template>
+</bit-container>

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

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],
+  imports: [
-  declarations: [ReportsHomeComponent, ReportingComponent],
+    SharedModule,
+    ReportsSharedModule,
+    OrganizationReportingRoutingModule,
+    LooseComponentsModule,
+  ],
+  declarations: [ReportsHomeComponent],
 })
 export class OrganizationReportingModule {}

apps/web/src/app/admin-console/organizations/reporting/reporting.component.html

@@ -1,30 +0,0 @@
-<div class="container page-content">
-  <div class="row">
-    <div class="col-3" *ngIf="showLeftNav$ | async">
-      <div class="card" *ngIf="organization$ | async as org">
-        <div class="card-header">{{ "reporting" | i18n }}</div>
-        <div class="list-group list-group-flush">
-          <a
-            routerLink="events"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="org.canAccessEventLogs"
-          >
-            {{ "eventLogs" | i18n }}
-          </a>
-          <a
-            routerLink="reports"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="org.canAccessReports"
-          >
-            {{ "reports" | i18n }}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-9" [ngClass]="(showLeftNav$ | async) ? 'col-9' : 'col-12'">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>

apps/web/src/app/admin-console/organizations/reporting/reports-home.component.html

@@ -1,7 +1,5 @@
 <ng-container *ngIf="homepage$ | async">
-  <div class="page-header">
+  <app-header></app-header>
-    <h1>{{ "reports" | i18n }}</h1>
-  </div>
 
   <p>{{ "orgsReportsDesc" | i18n }}</p>
 

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -1,4 +1,6 @@
-<h1 bitTypography="h1" class="tw-pb-2.5">{{ "organizationInfo" | i18n }}</h1>
+<app-header></app-header>
+
+<bit-container>
   <div *ngIf="loading">
     <i
       class="bwi bwi-spinner bwi-spin text-muted"
@@ -114,3 +116,4 @@
   <ng-template #purgeOrganizationTemplate></ng-template>
   <ng-template #apiKeyTemplate></ng-template>
   <ng-template #rotateApiKeyTemplate></ng-template>
+</bit-container>

apps/web/src/app/admin-console/organizations/settings/org-import.component.html

@@ -0,0 +1,21 @@
+<app-header></app-header>
+
+<bit-container>
+  <tools-import
+    (formDisabled)="this.disabled = $event"
+    (formLoading)="this.loading = $event"
+    (onSuccessfulImport)="this.onSuccessfulImport($event)"
+    organizationId="{{ routeOrgId }}"
+  ></tools-import>
+  <button
+    [disabled]="disabled"
+    [loading]="loading"
+    form="import_form_importForm"
+    bitButton
+    type="submit"
+    bitFormButton
+    buttonType="primary"
+  >
+    {{ "importData" | i18n }}
+  </button>
+</bit-container>

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<void> {
+    const organization = await firstValueFrom(this.organizationService.get$(organizationId));
+    if (organization == null) {
+      return;
+    }
+
+    if (canAccessVaultTab(organization)) {
+      await this.router.navigate(["organizations", organizationId, "vault"]);
+    }
+  }
+}

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(
+              import("./org-import.component").then((mod) => mod.OrgImportComponent),
-                (mod) => mod.AdminImportComponent,
-              ),
             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",
+            },
           },
         ],
       },

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 {}

apps/web/src/app/admin-console/organizations/tools/tools.component.html

@@ -1,79 +0,0 @@
-<div class="container page-content">
-  <ng-container *ngIf="loading">
-    <i
-      class="bwi bwi-spinner bwi-spin text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
-  </ng-container>
-  <ng-container *ngIf="!loading">
-    <div class="row">
-      <div class="col-3">
-        <div class="card mb-4" *ngIf="organization.canAccessImportExport">
-          <div class="card-header">{{ "tools" | i18n }}</div>
-          <div class="list-group list-group-flush">
-            <a routerLink="import" class="list-group-item" routerLinkActive="active">
-              {{ "importData" | i18n }}
-            </a>
-            <a routerLink="export" class="list-group-item" routerLinkActive="active">
-              {{ "exportVault" | i18n }}
-            </a>
-          </div>
-        </div>
-        <div class="card" *ngIf="organization.canAccessReports">
-          <div class="card-header d-flex">
-            {{ "reports" | i18n }}
-            <div class="ml-auto">
-              <a
-                href="#"
-                appStopClick
-                bitBadge
-                *ngIf="!accessReports"
-                (click)="upgradeOrganization()"
-              >
-                {{ "upgrade" | i18n }}
-              </a>
-            </div>
-          </div>
-          <div class="list-group list-group-flush">
-            <a
-              routerLink="exposed-passwords-report"
-              class="list-group-item"
-              routerLinkActive="active"
-            >
-              {{ "exposedPasswordsReport" | i18n }}
-            </a>
-            <a
-              routerLink="reused-passwords-report"
-              class="list-group-item"
-              routerLinkActive="active"
-            >
-              {{ "reusedPasswordsReport" | i18n }}
-            </a>
-            <a routerLink="weak-passwords-report" class="list-group-item" routerLinkActive="active">
-              {{ "weakPasswordsReport" | i18n }}
-            </a>
-            <a
-              routerLink="unsecured-websites-report"
-              class="list-group-item"
-              routerLinkActive="active"
-            >
-              {{ "unsecuredWebsitesReport" | i18n }}
-            </a>
-            <a
-              routerLink="inactive-two-factor-report"
-              class="list-group-item"
-              routerLinkActive="active"
-            >
-              {{ "inactive2faReport" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-      <div class="col-9">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  </ng-container>
-</div>

apps/web/src/app/admin-console/providers/providers.component.html

@@ -1,8 +1,6 @@
-<app-navbar></app-navbar>
+<app-header></app-header>
-<div class="container page-content">
+
-  <div class="page-header d-flex">
+<bit-container>
-    <h1>{{ "providers" | i18n }}</h1>
-  </div>
   <p *ngIf="!loaded" class="text-muted">
     <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
@@ -29,5 +27,4 @@
       </tbody>
     </table>
   </ng-container>
-</div>
+</bit-container>
-<app-footer></app-footer>

apps/web/src/app/admin-console/settings/create-organization.component.html

@@ -1,11 +1,6 @@
-<div class="container page-content">
+<app-header></app-header>
-  <div class="row">
+
-    <div class="col-12">
+<bit-container>
-      <div class="page-header">
-        <h1>{{ "newOrganization" | i18n }}</h1>
-      </div>
   <p>{{ "newOrganizationDesc" | i18n }}</p>
   <app-organization-plans></app-organization-plans>
-    </div>
+</bit-container>
-  </div>
-</div>

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 {

apps/web/src/app/admin-console/settings/sponsored-families.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "sponsoredFamilies" | i18n }}</h1>
+
-</div>
+<bit-container>
   <ng-container *ngIf="loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
@@ -102,3 +102,4 @@
       <small>{{ "sponsoredFamiliesLeaveCopy" | i18n }}</small>
     </ng-container>
   </ng-container>
+</bit-container>

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");
-    }
-  }
 }

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");
   }

apps/web/src/app/auth/settings/account/account.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "myAccount" | i18n }}</h1>
+
-</div>
+<bit-container>
   <app-profile></app-profile>
 
   <div *ngIf="showChangeEmail" class="tw-mt-16">
@@ -25,3 +25,4 @@
   <ng-template #deleteAccountTemplate></ng-template>
   <ng-template #viewUserApiKeyTemplate></ng-template>
   <ng-template #rotateUserApiKeyTemplate></ng-template>
+</bit-container>

apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "emergencyAccess" | i18n }}</h1>
+
-</div>
+<bit-container>
   <p>
     {{ "emergencyAccessDesc" | i18n }}
     <a href="https://bitwarden.com/help/emergency-access/" target="_blank" rel="noreferrer">
@@ -30,7 +30,10 @@
     </div>
   </div>
 
-<table class="table table-hover table-list mb-0" *ngIf="trustedContacts && trustedContacts.length">
+  <table
+    class="table table-hover table-list mb-0"
+    *ngIf="trustedContacts && trustedContacts.length"
+  >
     <tbody>
       <tr *ngFor="let c of trustedContacts; let i = index">
         <td width="30">
@@ -43,12 +46,18 @@
         </td>
         <td>
           <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
-        <span bitBadge variant="secondary" *ngIf="c.status === emergencyAccessStatusType.Invited">{{
+          <span
-          "invited" | i18n
+            bitBadge
-        }}</span>
+            variant="secondary"
-        <span bitBadge variant="warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
+            *ngIf="c.status === emergencyAccessStatusType.Invited"
-          "accepted" | i18n
+            >{{ "invited" | i18n }}</span
-        }}</span>
+          >
+          <span
+            bitBadge
+            variant="warning"
+            *ngIf="c.status === emergencyAccessStatusType.Accepted"
+            >{{ "accepted" | i18n }}</span
+          >
           <span
             bitBadge
             variant="warning"
@@ -141,7 +150,10 @@
     <h2>{{ "designatedEmergencyContacts" | i18n }}</h2>
   </div>
 
-<table class="table table-hover table-list mb-0" *ngIf="grantedContacts && grantedContacts.length">
+  <table
+    class="table table-hover table-list mb-0"
+    *ngIf="grantedContacts && grantedContacts.length"
+  >
     <tbody>
       <tr *ngFor="let c of grantedContacts; let i = index">
         <td width="30">
@@ -157,9 +169,12 @@
           <span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
             "invited" | i18n
           }}</span>
-        <span bitBadge variant="warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
+          <span
-          "accepted" | i18n
+            bitBadge
-        }}</span>
+            variant="warning"
+            *ngIf="c.status === emergencyAccessStatusType.Accepted"
+            >{{ "accepted" | i18n }}</span
+          >
           <span
             bitBadge
             variant="warning"
@@ -244,6 +259,7 @@
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </ng-container>
   </ng-container>
+</bit-container>
 
 <ng-template #addEdit></ng-template>
 <ng-template #takeoverTemplate></ng-template>

apps/web/src/app/auth/settings/security/security.component.html

@@ -1,22 +1,11 @@
-<div class="tabbed-nav d-flex flex-column">
+<app-header>
-  <ul class="nav nav-tabs">
+  <bit-tab-nav-bar slot="tabs">
-    <ng-container *ngIf="showChangePassword">
+    <bit-tab-link route="change-password">{{ "masterPassword" | i18n }}</bit-tab-link>
-      <li class="nav-item">
+    <bit-tab-link route="two-factor">{{ "twoStepLogin" | i18n }}</bit-tab-link>
-        <a class="nav-link" routerLink="change-password" routerLinkActive="active">
+    <bit-tab-link route="security-keys">{{ "keys" | i18n }}</bit-tab-link>
-          {{ "masterPassword" | i18n }}
+  </bit-tab-nav-bar>
-        </a>
+</app-header>
-      </li>
+
-    </ng-container>
+<bit-container>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="two-factor" routerLinkActive="active">
-        {{ "twoStepLogin" | i18n }}
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="security-keys" routerLinkActive="active">
-        {{ "keys" | i18n }}
-      </a>
-    </li>
-  </ul>
-</div>
   <router-outlet></router-outlet>
+</bit-container>

apps/web/src/app/auth/settings/two-factor-setup.component.html

@@ -1,7 +1,11 @@
-<div [ngClass]="tabbedHeader ? 'tabbed-header' : 'page-header'">
+<app-header *ngIf="organizationId != null"></app-header>
+
+<bit-container>
+  <div class="tabbed-header" *ngIf="organizationId == null">
     <h1 *ngIf="!organizationId || !isEnterpriseOrg">{{ "twoStepLogin" | i18n }}</h1>
     <h1 *ngIf="organizationId && isEnterpriseOrg">{{ "twoStepLoginEnforcement" | i18n }}</h1>
   </div>
+
   <p *ngIf="!organizationId">{{ "twoStepLoginDesc" | i18n }}</p>
   <ng-container *ngIf="organizationId">
     <p>
@@ -74,6 +78,7 @@
       </div>
     </li>
   </ul>
+</bit-container>
 
 <ng-template #authenticatorTemplate></ng-template>
 <ng-template #recoveryTemplate></ng-template>

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 },
           {

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,

apps/web/src/app/billing/individual/subscription.component.html

@@ -1,20 +1,11 @@
-<div class="tabbed-nav d-flex flex-column" *ngIf="!selfHosted">
+<app-header>
-  <ul class="nav nav-tabs">
+  <bit-tab-nav-bar slot="tabs" *ngIf="!selfHosted">
-    <li class="nav-item">
+    <bit-tab-link [route]="subscriptionRoute">{{ "subscription" | i18n }}</bit-tab-link>
-      <a class="nav-link" [routerLink]="subscriptionRoute" routerLinkActive="active">
+    <bit-tab-link route="payment-method">{{ "paymentMethod" | i18n }}</bit-tab-link>
-        {{ "subscription" | i18n }}
+    <bit-tab-link route="billing-history">{{ "billingHistory" | i18n }}</bit-tab-link>
-      </a>
+  </bit-tab-nav-bar>
-    </li>
+</app-header>
-    <li class="nav-item">
+
-      <a class="nav-link" routerLink="payment-method" routerLinkActive="active">
+<bit-container>
-        {{ "paymentMethod" | i18n }}
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="billing-history" routerLinkActive="active">
-        {{ "billingHistory" | i18n }}
-      </a>
-    </li>
-  </ul>
-</div>
   <router-outlet></router-outlet>
+</bit-container>

apps/web/src/app/billing/organizations/organization-billing-history-view.component.html

@@ -1,7 +1,4 @@
-<div class="d-flex page-header">
+<app-header>
-  <h1>
-    {{ "billingHistory" | i18n }}
-  </h1>
   <button
     type="button"
     bitButton
@@ -14,7 +11,9 @@
     <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
     {{ "refresh" | i18n }}
   </button>
-</div>
+</app-header>
+
+<bit-container>
   <ng-container *ngIf="!firstLoaded && loading">
     <i
       class="bwi bwi-spinner bwi-spin text-muted"
@@ -26,3 +25,4 @@
   <ng-container *ngIf="billing">
     <app-billing-history [billing]="billing"></app-billing-history>
   </ng-container>
+</bit-container>

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

apps/web/src/app/billing/organizations/organization-billing-tab.component.html

@@ -1,33 +0,0 @@
-<div class="container page-content">
-  <div class="row">
-    <div class="col-3">
-      <div class="card">
-        <div class="card-header">{{ "billing" | i18n }}</div>
-        <div class="list-group list-group-flush">
-          <a routerLink="subscription" class="list-group-item" routerLinkActive="active">
-            {{ "subscription" | i18n }}
-          </a>
-          <a
-            *ngIf="showPaymentAndHistory$ | async"
-            routerLink="payment-method"
-            class="list-group-item"
-            routerLinkActive="active"
-          >
-            {{ "paymentMethod" | i18n }}
-          </a>
-          <a
-            *ngIf="showPaymentAndHistory$ | async"
-            routerLink="history"
-            class="list-group-item"
-            routerLinkActive="active"
-          >
-            {{ "billingHistory" | i18n }}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-9">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>

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,

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html

@@ -1,16 +1,6 @@
-<div class="tw-mb-2">
+<app-header></app-header>
-  <h1 bitTypography="h1">
+
-    {{ "subscription" | i18n }}
+<bit-container>
-    <small *ngIf="firstLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
   <ng-container *ngIf="!firstLoaded && loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
@@ -270,3 +260,4 @@
       </div>
     </ng-container>
   </ng-container>
+</bit-container>

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html

@@ -1,17 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>
-    {{ "subscription" | i18n }}
-    <small *ngIf="firstLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
 
+<bit-container>
   <ng-container *ngIf="!firstLoaded && loading">
     <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
@@ -118,7 +107,11 @@
           </button>
         </ng-container>
 
-      <bit-radio-button id="manual-upload" [value]="licenseOptions.UPLOAD" class="tw-mt-6 tw-block">
+        <bit-radio-button
+          id="manual-upload"
+          [value]="licenseOptions.UPLOAD"
+          class="tw-mt-6 tw-block"
+        >
           <bit-label>{{ "manualUpload" | i18n }}</bit-label>
           <bit-hint>
             {{ "manualUploadDesc" | i18n }}
@@ -135,3 +128,4 @@
       </bit-radio-group>
     </form>
   </ng-container>
+</bit-container>

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,

apps/web/src/app/billing/shared/payment-method.component.html

@@ -1,7 +1,4 @@
-<div class="d-flex" [ngClass]="headerClass">
+<app-header *ngIf="organizationId">
-  <h1>
-    {{ "paymentMethod" | i18n }}
-  </h1>
   <button
     type="button"
     bitButton
@@ -14,7 +11,14 @@
     <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
     {{ "refresh" | i18n }}
   </button>
+</app-header>
+
+<bit-container>
+  <div class="tabbed-header" *ngIf="!organizationId">
+    <!-- TODO: Organization and individual should use different "page" components -->
+    <h1>{{ "paymentMethod" | i18n }}</h1>
   </div>
+
   <ng-container *ngIf="!firstLoaded && loading">
     <i
       class="bwi bwi-spinner bwi-spin text-muted"
@@ -84,7 +88,11 @@
             class="btn-submit"
             [disabled]="verifyForm.loading"
           >
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span>{{ "verifyBankAccount" | i18n }}</span>
           </button>
         </form>
@@ -144,3 +152,4 @@
       </form>
     </ng-container>
   </ng-container>
+</bit-container>

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";

apps/web/src/app/layouts/footer.component.html

@@ -1,9 +0,0 @@
-<div class="container footer text-muted">
-  <div class="row">
-    <div class="col">&copy; {{ year }} Bitwarden Inc.</div>
-    <div class="col text-center"></div>
-    <div class="col text-right">
-      {{ "versionNumber" | i18n: version }}
-    </div>
-  </div>
-</div>

apps/web/src/app/layouts/footer.component.ts

@@ -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();
-  }
-}

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],
 })

apps/web/src/app/layouts/header/web-header.component.html

@@ -1,3 +1,18 @@
+<bit-banner
+  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+  (onClose)="webLayoutMigrationBannerService.hideBanner()"
+  *ngIf="webLayoutMigrationBannerService.showBanner$ | async"
+>
+  {{ "newWebApp" | i18n }}
+  <a
+    href="https://bitwarden.com/blog/bitwarden-design-updating-the-navigation-in-the-web-app"
+    bitLink
+    linkType="contrast"
+    target="_blank"
+    rel="noreferrer"
+    >{{ "releaseBlog" | i18n }}</a
+  >
+</bit-banner>
 <header
   *ngIf="routeData$ | async as routeData"
   class="-tw-m-6 tw-mb-3 tw-flex tw-flex-col tw-p-6"

apps/web/src/app/layouts/header/web-header.component.ts

@@ -9,6 +9,8 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
 
+import { WebLayoutMigrationBannerService } from "./web-layout-migration-banner.service";
+
 @Component({
   selector: "app-header",
   templateUrl: "./web-header.component.html",
@@ -36,6 +38,7 @@ export class WebHeaderComponent {
     private platformUtilsService: PlatformUtilsService,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private messagingService: MessagingService,
+    protected webLayoutMigrationBannerService: WebLayoutMigrationBannerService,
   ) {
     this.routeData$ = this.route.data.pipe(
       map((params) => {

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<DynamicAvatarComponent> {
   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<WebLayoutMigrationBannerService>,
+        },
         { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
         { provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService },
         {

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<boolean>(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);
+  }
+}

apps/web/src/app/layouts/navbar.component.html

@@ -1,100 +0,0 @@
-<nav class="navbar navbar-expand navbar-dark" [ngClass]="{ 'nav-background-alt': selfHosted }">
-  <div class="container">
-    <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'bitWebVault' | i18n }}">
-      <i class="bwi bwi-shield" aria-hidden="true"></i>
-    </a>
-    <div class="collapse navbar-collapse">
-      <ul class="navbar-nav">
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/vault">{{ "vaults" | i18n }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/sends">{{ "send" | i18n }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/tools">{{ "tools" | i18n }}</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/reports">{{ "reports" | i18n }}</a>
-        </li>
-        <li
-          *ngIf="(organizations$ | async)?.length >= 1"
-          class="nav-item"
-          routerLinkActive="active"
-        >
-          <a class="nav-link" [routerLink]="['/organizations', (organizations$ | async)[0].id]">{{
-            "organizations" | i18n
-          }}</a>
-        </li>
-        <ng-container *ngIf="providers.length >= 1">
-          <li class="nav-item" routerLinkActive="active" *ngIf="providers.length == 1">
-            <a class="nav-link" [routerLink]="['/providers', providers[0].id]">{{
-              "provider" | i18n
-            }}</a>
-          </li>
-          <li class="nav-item" routerLinkActive="active" *ngIf="providers.length > 1">
-            <a class="nav-link" routerLink="/providers">{{ "provider" | i18n }}</a>
-          </li>
-        </ng-container>
-      </ul>
-    </div>
-    <product-switcher buttonType="light"></product-switcher>
-    <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
-      <li>
-        <button
-          type="button"
-          [bitMenuTriggerFor]="accountMenu"
-          class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
-          attr.aria-label="{{ 'accountLoggedInAsName' | i18n: name }}"
-        >
-          <dynamic-avatar
-            [text]="name"
-            [id]="userId"
-            size="xsmall"
-            aria-hidden="true"
-          ></dynamic-avatar>
-          <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
-        </button>
-        <bit-menu class="dropdown-menu" #accountMenu>
-          <div class="tw-flex tw-min-w-[200px] tw-max-w-[300px] tw-flex-col">
-            <div
-              class="tw-flex tw-items-center tw-px-4 tw-py-1 tw-leading-tight tw-text-info"
-              *ngIf="name"
-              appStopProp
-            >
-              <dynamic-avatar [text]="name" [id]="userId" size="small"></dynamic-avatar>
-              <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
-                <span>{{ "loggedInAs" | i18n }}</span>
-                <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{
-                  name
-                }}</small>
-              </div>
-            </div>
-            <bit-menu-divider></bit-menu-divider>
-            <a bitMenuItem routerLink="/settings/account">
-              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-              {{ "accountSettings" | i18n }}
-            </a>
-            <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
-              <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
-              {{ "getHelp" | i18n }}
-            </a>
-            <a bitMenuItem href="https://bitwarden.com/download/" target="_blank" rel="noreferrer">
-              <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
-              {{ "getApps" | i18n }}
-            </a>
-            <bit-menu-divider></bit-menu-divider>
-            <button *ngIf="canLock$ | async" bitMenuItem type="button" (click)="lock()">
-              <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
-              {{ "lockNow" | i18n }}
-            </button>
-            <button bitMenuItem type="button" (click)="logOut()">
-              <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
-              {{ "logOut" | i18n }}
-            </button>
-          </div>
-        </bit-menu>
-      </li>
-    </ul>
-  </div>
-</nav>

apps/web/src/app/layouts/navbar.component.ts

@@ -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<Organization[]>;
-  canLock$: Observable<boolean>;
-
-  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");
-  }
-}

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<Organization[]> =

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,
   ) {}

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 { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular";
-import { BehaviorSubject } from "rxjs";
+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<OrganizationService> {
   }
 }
 
+@Directive({
+  selector: "[mockProviders]",
+})
+class MockProviderService implements Partial<ProviderService> {
+  private static _providers = new BehaviorSubject<Provider[]>([]);
+
+  async getAll() {
+    return await firstValueFrom(MockProviderService._providers);
+  }
+
+  @Input()
+  set mockProviders(providers: Provider[]) {
+    MockProviderService._providers.next(providers);
+  }
+}
+
 @Component({
   selector: "story-layout",
   template: `<ng-content></ng-content>`,
@@ -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: `
-    <router-outlet [mockOrgs]="mockOrgs"></router-outlet>
+    <router-outlet [mockOrgs]="mockOrgs" [mockProviders]="mockProviders"></router-outlet>
     <div class="tw-flex tw-gap-[200px]">
       <div>
         <h1 class="tw-text-main tw-text-base tw-underline">Closed</h1>
@@ -119,17 +144,26 @@ const Template: Story = (args) => ({
   `,
 });
 
-export const NoOrgs = Template.bind({});
+export const OnlyPM = Template.bind({});
-NoOrgs.args = {
+OnlyPM.args = {
   mockOrgs: [],
+  mockProviders: [],
 };
 
-export const OrgWithoutSecretsManager = Template.bind({});
+export const WithSM = Template.bind({});
-OrgWithoutSecretsManager.args = {
+WithSM.args = {
-  mockOrgs: [{ id: "a" }],
+  mockOrgs: [{ id: "org-a", canManageUsers: false, canAccessSecretsManager: true, enabled: true }],
+  mockProviders: [],
 };
 
-export const OrgWithSecretsManager = Template.bind({});
+export const WithSMAndAC = Template.bind({});
-OrgWithSecretsManager.args = {
+WithSMAndAC.args = {
-  mockOrgs: [{ id: "b", canAccessSecretsManager: true, enabled: true }],
+  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" }],
 };

apps/web/src/app/layouts/user-layout.component.html

@@ -1,4 +1,41 @@
-<app-navbar></app-navbar>
+<bit-layout>
-<app-payment-method-banners *ngIf="false"></app-payment-method-banners>
+  <nav slot="sidebar">
+    <a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
+      <bit-icon [icon]="logo"></bit-icon>
+    </a>
+
+    <bit-nav-item icon="bwi-collection" [text]="'vaults' | i18n" route="vault"></bit-nav-item>
+    <bit-nav-item icon="bwi-send" [text]="'send' | i18n" route="sends"></bit-nav-item>
+    <bit-nav-group icon="bwi-wrench" [text]="'tools' | i18n" route="tools">
+      <bit-nav-item [text]="'generator' | i18n" route="tools/generator"></bit-nav-item>
+      <bit-nav-item [text]="'importData' | i18n" route="tools/import"></bit-nav-item>
+      <bit-nav-item [text]="'exportVault' | i18n" route="tools/export"></bit-nav-item>
+    </bit-nav-group>
+    <bit-nav-item icon="bwi-sliders" [text]="'reports' | i18n" route="reports"></bit-nav-item>
+    <bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" route="settings">
+      <bit-nav-item [text]="'myAccount' | i18n" route="settings/account"></bit-nav-item>
+      <bit-nav-item [text]="'security' | i18n" route="settings/security"></bit-nav-item>
+      <bit-nav-item [text]="'preferences' | i18n" route="settings/preferences"></bit-nav-item>
+      <bit-nav-item
+        [text]="'subscription' | i18n"
+        route="settings/subscription"
+        *ngIf="!hideSubscription"
+      ></bit-nav-item>
+      <bit-nav-item [text]="'domainRules' | i18n" route="settings/domain-rules"></bit-nav-item>
+      <bit-nav-item
+        [text]="'emergencyAccess' | i18n"
+        route="settings/emergency-access"
+      ></bit-nav-item>
+      <bit-nav-item
+        [text]="'sponsoredFamilies' | i18n"
+        route="settings/sponsored-families"
+        *ngIf="hasFamilySponsorshipAvailable"
+      ></bit-nav-item>
+    </bit-nav-group>
+  </nav>
+  <app-payment-method-banners
+    *ngIf="false"
+    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+  ></app-payment-method-banners>
   <router-outlet></router-outlet>
-<app-footer></app-footer>
+</bit-layout>

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 {
+export class UserLayoutComponent implements OnInit, OnDestroy {
-  ngOnInit() {
+  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);
   }
 }

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" },

apps/web/src/app/settings/domain-rules.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "domainRules" | i18n }}</h1>
+
-</div>
+<bit-container>
   <p>{{ "domainRulesDesc" | i18n }}</p>
   <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <h2>{{ "customEqDomains" | i18n }}</h2>
@@ -106,3 +106,4 @@
       <span>{{ "save" | i18n }}</span>
     </button>
   </form>
+</bit-container>

apps/web/src/app/settings/preferences.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "preferences" | i18n }}</h1>
+
-</div>
+<bit-container>
   <p>{{ "preferencesDesc" | i18n }}</p>
   <form [formGroup]="form" (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
@@ -111,21 +111,6 @@
       </div>
       <small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
     </div>
-  <div class="form-group">
-    <div class="form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        id="enableFullWidth"
-        name="enableFullWidth"
-        formControlName="enableFullWidth"
-      />
-      <label class="form-check-label" for="enableFullWidth">
-        {{ "enableFullWidth" | i18n }}
-      </label>
-    </div>
-    <small class="form-text text-muted">{{ "enableFullWidthDesc" | i18n }}</small>
-  </div>
     <div class="row">
       <div class="col-6">
         <div class="form-group">
@@ -141,3 +126,4 @@
       {{ "save" | i18n }}
     </button>
   </form>
+</bit-container>

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;

apps/web/src/app/settings/settings.component.html

@@ -1,45 +0,0 @@
-<div class="container page-content">
-  <div class="row">
-    <div class="col-3">
-      <div class="card">
-        <div class="card-header">{{ "accountSettings" | i18n }}</div>
-        <div class="list-group list-group-flush">
-          <a routerLink="account" class="list-group-item" routerLinkActive="active">
-            {{ "myAccount" | i18n }}
-          </a>
-          <a routerLink="security" class="list-group-item" routerLinkActive="active">
-            {{ "security" | i18n }}
-          </a>
-          <a routerLink="preferences" class="list-group-item" routerLinkActive="active">
-            {{ "preferences" | i18n }}
-          </a>
-          <a
-            routerLink="subscription"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="!hideSubscription"
-          >
-            {{ "subscription" | i18n }}
-          </a>
-          <a routerLink="domain-rules" class="list-group-item" routerLinkActive="active">
-            {{ "domainRules" | i18n }}
-          </a>
-          <a routerLink="emergency-access" class="list-group-item" routerLinkActive="active">
-            {{ "emergencyAccess" | i18n }}
-          </a>
-          <a
-            routerLink="sponsored-families"
-            class="list-group-item"
-            routerLinkActive="active"
-            *ngIf="hasFamilySponsorshipAvailable"
-          >
-            {{ "sponsoredFamilies" | i18n }}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-9">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>

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,
   ],
 })

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,

apps/web/src/app/tools/generator.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "generator" | i18n }}</h1>
+
-</div>
+<bit-container>
   <app-callout type="info" *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'">
     {{ "passwordGeneratorPolicyInEffect" | i18n }}
   </app-callout>
@@ -442,7 +442,9 @@
               (change)="saveUsernameOptions()"
               [(ngModel)]="usernameOptions.wordCapitalize"
             />
-          <label for="capitalizeUsername" class="form-check-label">{{ "capitalize" | i18n }}</label>
+            <label for="capitalizeUsername" class="form-check-label">{{
+              "capitalize" | i18n
+            }}</label>
           </div>
           <div class="form-check">
             <input
@@ -474,3 +476,4 @@
     </div>
   </ng-container>
   <ng-template #historyTemplate></ng-template>
+</bit-container>

apps/web/src/app/tools/import/admin-import.component.ts

@@ -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 {}

apps/web/src/app/tools/import/import-web.component.html

@@ -1,9 +1,10 @@
-<h1 bitTypography="h1">{{ "importData" | i18n }}</h1>
+<app-header></app-header>
+
+<bit-container>
   <tools-import
     (formDisabled)="this.disabled = $event"
     (formLoading)="this.loading = $event"
     (onSuccessfulImport)="this.onSuccessfulImport($event)"
-  organizationId="{{ routeOrgId }}"
   ></tools-import>
   <button
     [disabled]="disabled"
@@ -16,3 +17,4 @@
   >
     {{ "importData" | i18n }}
   </button>
+</bit-container>

apps/web/src/app/tools/import/import-web.component.ts

@@ -1,51 +1,26 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { Router } from "@angular/router";
-import { firstValueFrom } from "rxjs";
 
-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 {
+export class ImportWebComponent {
-  protected routeOrgId: string = null;
   protected loading = false;
   protected disabled = false;
 
-  constructor(
+  constructor(private router: Router) {}
-    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<void> {
-    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"]);
-    }
   }
 }

apps/web/src/app/tools/reports/pages/breach-report.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "dataBreachReport" | i18n }}</h1>
+
-</div>
+<bit-container>
   <p>{{ "breachDesc" | i18n }}</p>
   <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
@@ -61,3 +61,4 @@
       </ul>
     </ng-container>
   </div>
+</bit-container>

apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html

@@ -1,6 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "exposedPasswordsReport" | i18n }}</h1>
+
-</div>
+<bit-container>
   <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
   <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
     {{ "checkExposedPasswords" | i18n }}
@@ -21,9 +21,13 @@
             </td>
             <td class="reduced-lh wrap">
               <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
-              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+                <a
-                c.name
+                  href="#"
-              }}</a>
+                  appStopClick
+                  (click)="selectCipher(c)"
+                  title="{{ 'editItem' | i18n }}"
+                  >{{ c.name }}</a
+                >
               </ng-container>
               <ng-template #cantManage>
                 <span>{{ c.name }}</span>
@@ -70,3 +74,4 @@
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
+</bit-container>

apps/web/src/app/tools/reports/pages/inactive-two-factor-report.component.html

@@ -1,16 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>
+
-    {{ "inactive2faReport" | i18n }}
+<bit-container>
-    <small *ngIf="hasLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
   <p>{{ "inactive2faReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
@@ -86,3 +76,4 @@
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
+</bit-container>

apps/web/src/app/tools/reports/pages/reports-home.component.html

@@ -1,7 +1,7 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>{{ "reports" | i18n }}</h1>
-</div>
 
+<bit-container>
   <p>{{ "reportsDesc" | i18n }}</p>
 
   <app-report-list [reports]="reports"></app-report-list>
+</bit-container>

apps/web/src/app/tools/reports/pages/reused-passwords-report.component.html

@@ -1,16 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>
+
-    {{ "reusedPasswordsReport" | i18n }}
+<bit-container>
-    <small *ngIf="hasLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
   <p>{{ "reusedPasswordsReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
@@ -36,9 +26,13 @@
             </td>
             <td class="reduced-lh wrap">
               <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
-              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+                <a
-                c.name
+                  href="#"
-              }}</a>
+                  appStopClick
+                  (click)="selectCipher(c)"
+                  title="{{ 'editItem' | i18n }}"
+                  >{{ c.name }}</a
+                >
               </ng-container>
               <ng-template #cantManage>
                 <span>{{ c.name }}</span>
@@ -85,3 +79,4 @@
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
+</bit-container>

apps/web/src/app/tools/reports/pages/unsecured-websites-report.component.html

@@ -1,16 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>
+
-    {{ "unsecuredWebsitesReport" | i18n }}
+<bit-container>
-    <small *ngIf="hasLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
   <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
@@ -75,3 +65,4 @@
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
+</bit-container>

apps/web/src/app/tools/reports/pages/weak-passwords-report.component.html

@@ -1,16 +1,6 @@
-<div class="page-header">
+<app-header></app-header>
-  <h1>
+
-    {{ "weakPasswordsReport" | i18n }}
+<bit-container>
-    <small *ngIf="hasLoaded && loading">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
-    </small>
-  </h1>
-</div>
   <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
   <div *ngIf="!hasLoaded && loading">
     <i
@@ -36,9 +26,13 @@
             </td>
             <td class="reduced-lh wrap">
               <ng-container *ngIf="!organization || canManageCipher(c); else cantManage">
-              <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
+                <a
-                c.name
+                  href="#"
-              }}</a>
+                  appStopClick
+                  (click)="selectCipher(c)"
+                  title="{{ 'editItem' | i18n }}"
+                  >{{ c.name }}</a
+                >
               </ng-container>
               <ng-template #cantManage>
                 <span>{{ c.name }}</span>
@@ -85,3 +79,4 @@
     </ng-container>
   </div>
   <ng-template #cipherAddEdit></ng-template>
+</bit-container>

apps/web/src/app/tools/reports/reports-layout.component.html

@@ -1,4 +1,3 @@
-<div class="container page-content">
 <router-outlet></router-outlet>
 
 <div class="row mt-4">
@@ -9,4 +8,3 @@
     </a>
   </div>
 </div>
-</div>

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,

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,

apps/web/src/app/tools/send/send.component.html

@@ -1,4 +1,23 @@
-<div class="container page-content">
+<app-header>
+  <ng-container slot="title-suffix">
+    <small #actionSpinner [appApiAction]="actionPromise">
+      <ng-container *ngIf="$any(actionSpinner).loading">
+        <i
+          class="bwi bwi-spinner bwi-spin text-muted"
+          title="{{ 'loading' | i18n }}"
+          aria-hidden="true"
+        ></i>
+        <span class="sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
+    </small>
+  </ng-container>
+
+  <button type="button" bitButton buttonType="primary" (click)="addSend()" [disabled]="disableSend">
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    {{ "createSend" | i18n }}
+  </button>
+</app-header>
+
 <bit-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
   {{ "sendDisabledWarning" | i18n }}
 </bit-callout>
@@ -63,33 +82,6 @@
     </div>
   </div>
   <div class="tw-col-span-9">
-      <div class="tw-flex">
-        <h1 bitTypography="h1">
-          {{ "send" | i18n }}
-          <small #actionSpinner [appApiAction]="actionPromise">
-            <ng-container *ngIf="$any(actionSpinner).loading">
-              <i
-                class="bwi bwi-spinner bwi-spin text-muted"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="sr-only">{{ "loading" | i18n }}</span>
-            </ng-container>
-          </small>
-        </h1>
-        <div class="tw-ml-auto">
-          <button
-            type="button"
-            bitButton
-            buttonType="primary"
-            (click)="addSend()"
-            [disabled]="disableSend"
-          >
-            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-            {{ "createSend" | i18n }}
-          </button>
-        </div>
-      </div>
     <!--Listing Table-->
     <bit-table [dataSource]="dataSource" *ngIf="filteredSends && filteredSends.length">
       <ng-container header>
@@ -203,13 +195,7 @@
         <bit-no-items [icon]="noItemIcon" class="tw-text-main">
           <ng-container slot="title">{{ "sendsNoItemsTitle" | i18n }}</ng-container>
           <ng-container slot="description">{{ "sendsNoItemsMessage" | i18n }}</ng-container>
-            <button
+          <button slot="button" type="button" bitButton buttonType="secondary" (click)="addSend()">
-              slot="button"
-              type="button"
-              bitButton
-              buttonType="secondary"
-              (click)="addSend()"
-            >
             <i class="bwi bwi-plus" aria-hidden="true"></i>
             {{ "createSend" | i18n }}
           </button>
@@ -218,5 +204,4 @@
     </div>
   </div>
 </div>
-</div>
 <ng-template #sendAddEdit></ng-template>

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 {

apps/web/src/app/tools/tools.component.html

@@ -1,23 +0,0 @@
-<div class="container page-content">
-  <div class="row">
-    <div class="col-3">
-      <div class="card mb-4">
-        <div class="card-header">{{ "tools" | i18n }}</div>
-        <div class="list-group list-group-flush">
-          <a routerLink="generator" class="list-group-item" routerLinkActive="active">
-            {{ "generator" | i18n }}
-          </a>
-          <a routerLink="import" class="list-group-item" routerLinkActive="active">
-            {{ "importData" | i18n }}
-          </a>
-          <a routerLink="export" class="list-group-item" routerLinkActive="active">
-            {{ "exportVault" | i18n }}
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="col-9">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-</div>

apps/web/src/app/tools/vault-export/export.component.html

@@ -1,3 +1,6 @@
+<app-header></app-header>
+
+<bit-container>
   <form
     #form
     (ngSubmit)="submit()"
@@ -5,8 +8,6 @@
     [formGroup]="exportForm"
     *ngIf="exportForm"
   >
-  <h1 bitTypography="h1">{{ "exportVault" | i18n }}</h1>
-
     <bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
       {{ "personalVaultExportPolicyInEffect" | i18n }}
     </bit-callout>
@@ -84,7 +85,8 @@
             ></button>
             <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
           </bit-form-field>
-        <app-password-strength [password]="filePassword" [showText]="true"> </app-password-strength>
+          <app-password-strength [password]="filePassword" [showText]="true">
+          </app-password-strength>
         </div>
         <bit-form-field>
           <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
@@ -116,3 +118,4 @@
       {{ "confirmFormat" | i18n }}
     </button>
   </form>
+</bit-container>

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

apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html

@@ -1,6 +1,5 @@
-<div class="tw-mb-4 tw-flex tw-items-start tw-justify-between">
+<app-header [title]="title" [icon]="icon">
-  <div>
+  <bit-breadcrumbs *ngIf="showBreadcrumbs" slot="breadcrumbs">
-    <bit-breadcrumbs *ngIf="showBreadcrumbs">
     <bit-breadcrumb
       *ngIf="activeOrganizationId"
       [route]="[]"
@@ -21,20 +20,15 @@
       </bit-breadcrumb>
     </ng-container>
   </bit-breadcrumbs>
-    <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
+
-      <i
+  <ng-container slot="title-suffix">
-        *ngIf="filter.collectionId && filter.collectionId !== All"
-        class="bwi bwi-collection"
-        aria-hidden="true"
-      ></i>
-      <span>{{ title }}</span>
     <ng-container *ngIf="collection != null && (canEditCollection || canDeleteCollection)">
       <button
         bitIconButton="bwi-angle-down"
         [bitMenuTriggerFor]="editCollectionMenu"
         size="small"
         type="button"
-          aria-haspopup
+        aria-haspopup="true"
       ></button>
       <bit-menu #editCollectionMenu>
         <button
@@ -55,12 +49,7 @@
           <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
           {{ "access" | i18n }}
         </button>
-          <button
+        <button type="button" *ngIf="canDeleteCollection" bitMenuItem (click)="deleteCollection()">
-            type="button"
-            *ngIf="canDeleteCollection"
-            bitMenuItem
-            (click)="deleteCollection()"
-          >
           <span class="tw-text-danger">
             <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
             {{ "delete" | i18n }}
@@ -76,8 +65,7 @@
       ></i>
       <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </small>
-    </h1>
+  </ng-container>
-  </div>
 
   <div *ngIf="filter.type !== 'trash'" class="tw-shrink-0">
     <div appListDropdown>
@@ -107,4 +95,4 @@
       </bit-menu>
     </div>
   </div>
-</div>
+</app-header>

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.

apps/web/src/app/vault/individual-vault/vault.component.html

@@ -1,4 +1,16 @@
-<div class="container page-content">
+<app-vault-header
+  [filter]="filter"
+  [loading]="refreshing && !performingInitialLoad"
+  [organizations]="allOrganizations"
+  [canCreateCollections]="canCreateCollections"
+  [collection]="selectedCollection"
+  (onAddCipher)="addCipher()"
+  (onAddCollection)="addCollection()"
+  (onAddFolder)="addFolder()"
+  (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
+  (onDeleteCollection)="deleteCollection(selectedCollection.node)"
+></app-vault-header>
+
 <app-vault-onboarding [ciphers]="ciphers" (onAddCipher)="addCipher()"> </app-vault-onboarding>
 
 <div class="row">
@@ -18,18 +30,6 @@
     </div>
   </div>
   <div [ngClass]="{ 'col-6': isShowingCards, 'col-9': !isShowingCards }">
-      <app-vault-header
-        [filter]="filter"
-        [loading]="refreshing && !performingInitialLoad"
-        [organizations]="allOrganizations"
-        [canCreateCollections]="canCreateCollections"
-        [collection]="selectedCollection"
-        (onAddCipher)="addCipher()"
-        (onAddCollection)="addCollection()"
-        (onAddFolder)="addFolder()"
-        (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
-        (onDeleteCollection)="deleteCollection(selectedCollection.node)"
-      ></app-vault-header>
     <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi-exclamation-triangle">
       {{ trashCleanupWarning }}
     </app-callout>
@@ -113,17 +113,14 @@
       </div>
       <div class="card-body">
         <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-          <a
+        <a class="btn btn-block btn-outline-secondary" routerLink="/settings/subscription/premium">
-            class="btn btn-block btn-outline-secondary"
-            routerLink="/settings/subscription/premium"
-          >
           {{ "goPremium" | i18n }}
         </a>
       </div>
     </div>
   </div>
 </div>
-</div>
+
 <ng-template #attachments></ng-template>
 <ng-template #folderAddEdit></ng-template>
 <ng-template #cipherAddEdit></ng-template>

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

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html

@@ -1,6 +1,5 @@
-<div class="tw-mb-4 tw-flex tw-items-start tw-justify-between">
+<app-header [title]="title" [icon]="icon">
-  <div>
+  <bit-breadcrumbs *ngIf="showBreadcrumbs" slot="breadcrumbs">
-    <bit-breadcrumbs *ngIf="showBreadcrumbs">
     <bit-breadcrumb
       [route]="[]"
       [queryParams]="{ organizationId: organization.id, collectionId: null }"
@@ -14,6 +13,7 @@
         {{ "collections" | i18n | lowercase }}
       </span>
     </bit-breadcrumb>
+
     <ng-container>
       <bit-breadcrumb
         *ngFor="let collection of collections"
@@ -26,20 +26,15 @@
       </bit-breadcrumb>
     </ng-container>
   </bit-breadcrumbs>
-    <h1 class="tw-mb-0 tw-mt-1 tw-flex tw-items-center tw-space-x-2">
+
-      <i
+  <ng-container slot="title-suffix">
-        *ngIf="filter.collectionId !== undefined"
-        class="bwi bwi-collection"
-        aria-hidden="true"
-      ></i>
-      <span>{{ title }}</span>
     <ng-container *ngIf="collection != null && (canEditCollection || canDeleteCollection)">
       <button
         bitIconButton="bwi-angle-down"
         [bitMenuTriggerFor]="editCollectionMenu"
         size="small"
         type="button"
-          aria-haspopup
+        aria-haspopup="true"
       ></button>
       <bit-menu #editCollectionMenu>
         <button
@@ -60,12 +55,7 @@
           <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
           {{ "access" | i18n }}
         </button>
-          <button
+        <button type="button" *ngIf="canDeleteCollection" bitMenuItem (click)="deleteCollection()">
-            type="button"
-            *ngIf="canDeleteCollection"
-            bitMenuItem
-            (click)="deleteCollection()"
-          >
           <span class="tw-text-danger">
             <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
             {{ "delete" | i18n }}
@@ -81,8 +71,7 @@
       ></i>
       <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </small>
-    </h1>
+  </ng-container>
-  </div>
 
   <div *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned" class="tw-shrink-0">
     <div *ngIf="organization?.canCreateNewCollections" appListDropdown>
@@ -118,4 +107,4 @@
       {{ "newItem" | i18n }}
     </button>
   </div>
-</div>
+</app-header>

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;
   }

apps/web/src/app/vault/org-vault/vault.component.html

@@ -1,4 +1,14 @@
-<div class="container page-content">
+<app-org-vault-header
+  [filter]="filter"
+  [loading]="refreshing"
+  [organization]="organization"
+  [collection]="selectedCollection"
+  (onAddCipher)="addCipher()"
+  (onAddCollection)="addCollection()"
+  (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
+  (onDeleteCollection)="deleteCollection(selectedCollection.node)"
+></app-org-vault-header>
+
 <div class="row">
   <div class="col-3">
     <div class="groupings">
@@ -16,21 +26,7 @@
     </div>
   </div>
   <div class="col-9">
-      <app-org-vault-header
+    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi bwi-exclamation-triangle">
-        [filter]="filter"
-        [loading]="refreshing"
-        [organization]="organization"
-        [collection]="selectedCollection"
-        (onAddCipher)="addCipher()"
-        (onAddCollection)="addCollection()"
-        (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
-        (onDeleteCollection)="deleteCollection(selectedCollection.node)"
-      ></app-org-vault-header>
-      <app-callout
-        type="warning"
-        *ngIf="activeFilter.isDeleted"
-        icon="bwi bwi-exclamation-triangle"
-      >
       {{ trashCleanupWarning }}
     </app-callout>
     <app-vault-items
@@ -58,7 +54,6 @@
       [showBulkEditCollectionAccess]="
         (showBulkEditCollectionAccess$ | async) && organization?.flexibleCollections
       "
-        [viewingOrgVault]="true"
     >
     </app-vault-items>
     <ng-container *ngIf="!flexibleCollectionsV1Enabled">
@@ -85,8 +80,8 @@
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
           {{ "newItem" | i18n }}
         </button>
-        </div>
+      </div></ng-container
-      </ng-container>
+    >
     <ng-container *ngIf="flexibleCollectionsV1Enabled && !performingInitialLoad && isEmpty">
       <bit-no-items *ngIf="!showCollectionAccessRestricted">
         <span slot="title" class="tw-mt-4 tw-block">{{ "noItemsInList" | i18n }}</span>
@@ -124,4 +119,3 @@
 <ng-template #attachments></ng-template>
 <ng-template #cipherAddEdit></ng-template>
 <ng-template #collectionsModal></ng-template>
-</div>

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"
   }
 }

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) {

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;
-}

apps/web/src/scss/navigation.scss

@@ -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");
-        }
-      }
-    }
-  }
-}

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";

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%);
+}

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,