[SG-360] Remove the /modules/ folder (#3225)

* Move Web's SharedModule to /app/shared/ This commit relocates `SharedModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `SharedModule`. * Move /modules/pipes to /shared/pipes This commit relocates `PipesModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `PipesModule`. * Move LooseComponentsModule to /shared/ This commit relocates `LooseComponentsModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `LooseComponentsModule`. * Move VerticalStepperModule to /shared/ This commit relocates `VerticalStepperModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `VerticalStepperModule`. * Move TrialInitiationModule to /shared/ This commit relocates `TrialInitiationModule` & `RegisterFormModule` from `/app/modules` to `/app/shared` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference `TrialInitiationModule` or `RegisterFormModule`. * Move /modules/organization to /organization This commit relocates all modules in `/app/modules/organization` to `/app/organization` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move /modules/vault/ to /vault This commit relocates the IndividualVaultModule to `/app/modules/vault`, and the OrganizationVaultModule to `/app/organization/vault` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move VaultFiltersModule to /vault This commit relocates the `VaultFilterModule` to `/app/vault/vault-filter`, and the OrganizationVaultFilterComponent to `/app/organization/vault/vault-filter` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Remove the /modules/ folder from desktop This commit relocates the `VaultFilterModule` to `/app/vault/vault-filter`, and the OrganizationVaultFilterComponent to `/app/organization/vault/vault-filter` to align with [ADR #11](https://adr.bitwarden.com/decisions/0011-angular-folder-structure) All other changes are just to adjust imports that reference the moved modules. * Move Libs' VaultFiltersComponent to /vault/ This commit moves the lib's logic for `VaultFiltersModule` from `/modules/` to `/vault/` All other changes are just to adjust imports that reference the moved files. * Rename VaultModule -> SharedVaultModule * Rename IndividualVaultModule -> VaultModule * Rename OrganizationVaultModule -> VaultModule * Rename OrganizationVaultFilterComponent Rename OrganizationVaultFilterComponent to VaultFilterComponent * Seperate the two VaultFilterComponents This commit seperate the `OrganizationVaultFilterComponent` from the `VaultFilerModule`, which is only used by the individual vault. A `VaultFilterSharedModule` was created to declare shared components and provide shared services between the two implementations. This was done to align with best practices for NgModules. * [r] Move VerticalStepperModule to /account/ More specifically, /account/trial/ * [r] Declare PaymentComponent in LooseComponentsModule `PaymentComponent` is not reused across domains and should not be declared in `SharedModule`. I've moved it to `LooseComponentsModule` for now, but later it will need to be exported from a `SettingsModule`. * [r] Declare TaxInfoComponent in LooseComponentsModule * [r] Reloacte Pipes out of /shared/ * [r] Extract locales out of SharedModule * [r] Add documentation to shared module * [r] Cleanup imports * [r] Use an index.ts file for /shared/ * [r] Add eslint rule restricting access to /shared/ Co-authored-by: Hinton <hinton@users.noreply.github.com>
2026-01-08 11:33:28 +00:00 · 2022-08-08 15:08:35 -04:00
parent 56ce85c69c
commit 95bb429281
120 changed files with 289 additions and 293 deletions
--- a/apps/web/src/app/vault/organization-badge/organization-badge.module.ts
+++ b/apps/web/src/app/vault/organization-badge/organization-badge.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared";
+
+import { OrganizationNameBadgeComponent } from "./organization-name-badge.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [OrganizationNameBadgeComponent],
+  exports: [OrganizationNameBadgeComponent],
+})
+export class OrganizationBadgeModule {}
--- a/apps/web/src/app/vault/organization-badge/organization-name-badge.component.html
+++ b/apps/web/src/app/vault/organization-badge/organization-name-badge.component.html
@@ -0,0 +1,9 @@
+<button
+  bitBadge
+  [style.color]="textColor"
+  [style.background-color]="color"
+  appA11yTitle="{{ organizationName }}"
+  (click)="emitOnOrganizationClicked()"
+>
+  {{ organizationName | ellipsis: 13 }}
+</button>
--- a/apps/web/src/app/vault/organization-badge/organization-name-badge.component.ts
+++ b/apps/web/src/app/vault/organization-badge/organization-name-badge.component.ts
@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+@Component({
+  selector: "app-org-badge",
+  templateUrl: "organization-name-badge.component.html",
+})
+export class OrganizationNameBadgeComponent implements OnInit {
+  @Input() organizationName: string;
+  @Input() profileName: string;
+
+  @Output() onOrganizationClicked = new EventEmitter<string>();
+
+  color: string;
+  textColor: string;
+
+  constructor(private i18nService: I18nService) {}
+
+  ngOnInit(): void {
+    if (this.organizationName == null || this.organizationName === "") {
+      this.organizationName = this.i18nService.t("me");
+      this.color = this.stringToColor(this.profileName.toUpperCase());
+    }
+    if (this.color == null) {
+      this.color = this.stringToColor(this.organizationName.toUpperCase());
+    }
+    this.textColor = this.pickTextColorBasedOnBgColor();
+  }
+
+  // This value currently isn't stored anywhere, only calculated in the app-avatar component
+  // Once we are allowing org colors to be changed and saved, change this out
+  private stringToColor(str: string): string {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = "#";
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff;
+      color += ("00" + value.toString(16)).substr(-2);
+    }
+    return color;
+  }
+
+  // There are a few ways to calculate text color for contrast, this one seems to fit accessibility guidelines best.
+  // https://stackoverflow.com/a/3943023/6869691
+  private pickTextColorBasedOnBgColor() {
+    const color = this.color.charAt(0) === "#" ? this.color.substring(1, 7) : this.color;
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black !important" : "white !important";
+  }
+
+  emitOnOrganizationClicked() {
+    this.onOrganizationClicked.emit();
+  }
+}
--- a/apps/web/src/app/vault/shared/pipes/get-organization-name.pipe.ts
+++ b/apps/web/src/app/vault/shared/pipes/get-organization-name.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+import { Organization } from "@bitwarden/common/models/domain/organization";
+
+@Pipe({
+  name: "orgNameFromId",
+  pure: true,
+})
+export class GetOrgNameFromIdPipe implements PipeTransform {
+  transform(value: string, organizations: Organization[]) {
+    const orgName = organizations.find((o) => o.id === value)?.name;
+    return orgName;
+  }
+}
--- a/apps/web/src/app/vault/shared/pipes/pipes.module.ts
+++ b/apps/web/src/app/vault/shared/pipes/pipes.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from "@angular/core";
+
+import { GetOrgNameFromIdPipe } from "./get-organization-name.pipe";
+
+@NgModule({
+  declarations: [GetOrgNameFromIdPipe],
+  exports: [GetOrgNameFromIdPipe],
+})
+export class PipesModule {}
--- a/apps/web/src/app/vault/shared/vault-shared.module.ts
+++ b/apps/web/src/app/vault/shared/vault-shared.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared";
+import { LooseComponentsModule } from "../../shared/loose-components.module";
+import { VaultFilterModule } from "../vault-filter/vault-filter.module";
+
+import { PipesModule } from "./pipes/pipes.module";
+import { VaultService } from "./vault.service";
+
+@NgModule({
+  imports: [SharedModule, VaultFilterModule, LooseComponentsModule, PipesModule],
+  exports: [SharedModule, VaultFilterModule, LooseComponentsModule, PipesModule],
+  providers: [
+    {
+      provide: VaultService,
+      useClass: VaultService,
+    },
+  ],
+})
+export class VaultSharedModule {}
--- a/apps/web/src/app/vault/shared/vault.service.ts
+++ b/apps/web/src/app/vault/shared/vault.service.ts
@@ -0,0 +1,29 @@
+import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
+
+export class VaultService {
+  calculateSearchBarLocalizationString(vaultFilter: VaultFilter): string {
+    if (vaultFilter.status === "favorites") {
+      return "searchFavorites";
+    }
+    if (vaultFilter.status === "trash") {
+      return "searchTrash";
+    }
+    if (vaultFilter.cipherType != null) {
+      return "searchType";
+    }
+    if (vaultFilter.selectedFolderId != null && vaultFilter.selectedFolderId != "none") {
+      return "searchFolder";
+    }
+    if (vaultFilter.selectedCollection) {
+      return "searchCollection";
+    }
+    if (vaultFilter.selectedOrganizationId != null) {
+      return "searchOrganization";
+    }
+    if (vaultFilter.myVaultOnly) {
+      return "searchMyVault";
+    }
+
+    return "searchVault";
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/organization-filter/link-sso.component.html
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/link-sso.component.html
@@ -0,0 +1,9 @@
+<a
+  class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main tw-no-underline hover:tw-bg-secondary-100 hover:tw-no-underline focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
+  href="#"
+  appStopClick
+  (click)="submit(returnUri, true)"
+>
+  <i class="bwi bwi-fw bwi-link" aria-hidden="true"></i>
+  {{ "linkSso" | i18n }}
+</a>
--- a/apps/web/src/app/vault/vault-filter/organization-filter/link-sso.component.ts
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/link-sso.component.ts
@@ -0,0 +1,59 @@
+import { AfterContentInit, Component, Input } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { SsoComponent } from "@bitwarden/angular/components/sso.component";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AuthService } from "@bitwarden/common/abstractions/auth.service";
+import { CryptoFunctionService } from "@bitwarden/common/abstractions/cryptoFunction.service";
+import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { PasswordGenerationService } from "@bitwarden/common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { Organization } from "@bitwarden/common/models/domain/organization";
+
+@Component({
+  selector: "app-link-sso",
+  templateUrl: "link-sso.component.html",
+})
+export class LinkSsoComponent extends SsoComponent implements AfterContentInit {
+  @Input() organization: Organization;
+  returnUri = "/settings/organizations";
+
+  constructor(
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    apiService: ApiService,
+    authService: AuthService,
+    router: Router,
+    route: ActivatedRoute,
+    cryptoFunctionService: CryptoFunctionService,
+    passwordGenerationService: PasswordGenerationService,
+    stateService: StateService,
+    environmentService: EnvironmentService,
+    logService: LogService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      route,
+      stateService,
+      platformUtilsService,
+      apiService,
+      cryptoFunctionService,
+      environmentService,
+      passwordGenerationService,
+      logService
+    );
+
+    this.returnUri = "/settings/organizations";
+    this.redirectUri = window.location.origin + "/sso-connector.html";
+    this.clientId = "web";
+  }
+
+  async ngAfterContentInit() {
+    this.identifier = this.organization.identifier;
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.html
@@ -0,0 +1,165 @@
+<ng-container *ngIf="!hide">
+  <ng-container [ngSwitch]="displayMode">
+    <ng-container *ngSwitchCase="'noOrganizations'">
+      <ul class="filter-options">
+        <li class="filter-option active">
+          <span class="filter-buttons">
+            <button class="filter-button">
+              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+              {{ "myVault" | i18n }}
+            </button>
+          </span>
+        </li>
+        <li class="filter-option">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
+      </ul>
+    </ng-container>
+    <ng-container *ngSwitchCase="'personalOwnershipPolicy'">
+      <div class="filter-heading">
+        <button
+          (click)="toggleCollapse()"
+          title="{{ 'toggleCollapse' | i18n }}"
+          class="toggle-button"
+          [attr.aria-expanded]="!isCollapsed"
+          aria-controls="organization-filters"
+        >
+          <i
+            class="bwi bwi-fw"
+            aria-hidden="true"
+            [ngClass]="{
+              'bwi-angle-right': isCollapsed,
+              'bwi-angle-down': !isCollapsed
+            }"
+          ></i>
+        </button>
+        <button
+          class="filter-button"
+          (click)="clearFilter()"
+          [ngClass]="{ active: !hasActiveFilter }"
+        >
+          &nbsp;{{ organizationGrouping.name | i18n }}
+        </button>
+      </div>
+      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
+        <li
+          class="filter-option"
+          *ngFor="let organization of organizations"
+          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
+        >
+          <span class="filter-buttons">
+            <button class="filter-button" (click)="applyOrganizationFilter(organization)">
+              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+              {{ organization.name }}
+            </button>
+            <ng-container *ngIf="organization.id === activeFilter.selectedOrganizationId">
+              <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">
+                <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
+              </button>
+              <bit-menu class="filter-organization-options" #orgMenu>
+                <app-organization-options [organization]="organization"></app-organization-options>
+              </bit-menu>
+            </ng-container>
+          </span>
+        </li>
+        <li class="filter-option">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
+      </ul>
+    </ng-container>
+    <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
+      <div class="filter-heading">
+        <button class="filter-button active">
+          <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+          {{ organizations[0].name }}
+        </button>
+      </div>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+      <div class="filter-heading">
+        <button
+          class="toggle-button"
+          title="{{ 'toggleCollapse' | i18n }}"
+          (click)="toggleCollapse()"
+          [attr.aria-expanded]="!isCollapsed"
+          aria-controls="organization-filters"
+        >
+          <i
+            class="bwi bwi-fw"
+            aria-hidden="true"
+            [ngClass]="{
+              'bwi-angle-right': isCollapsed,
+              'bwi-angle-down': !isCollapsed
+            }"
+          ></i>
+        </button>
+        <button
+          class="filter-button"
+          (click)="clearFilter()"
+          [ngClass]="{ active: !hasActiveFilter }"
+        >
+          &nbsp;{{ organizationGrouping.name | i18n }}
+        </button>
+      </div>
+      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
+        <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
+          <span class="filter-buttons">
+            <button class="filter-button" (click)="applyMyVaultFilter()">
+              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+              {{ "myVault" | i18n }}
+            </button>
+          </span>
+        </li>
+        <li
+          class="filter-option"
+          *ngFor="let organization of organizations"
+          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
+        >
+          <span class="filter-buttons">
+            <button
+              class="filter-button"
+              [ngClass]="{ 'disabled-organization': !organization.enabled }"
+              (click)="applyOrganizationFilter(organization)"
+            >
+              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+              {{ organization.name }}
+            </button>
+            <span class="ml-auto">
+              <i
+                *ngIf="!organization.enabled"
+                class="org-options bwi bwi-fw bwi-exclamation-triangle text-danger"
+                aria-label="{{ 'organizationIsDisabled' | i18n }}"
+                appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
+              ></i
+              ><button [bitMenuTriggerFor]="orgMenu" class="org-options">
+                <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
+              </button>
+              <bit-menu class="filter-organization-options" #orgMenu>
+                <app-organization-options [organization]="organization"></app-organization-options>
+              </bit-menu>
+            </span>
+          </span>
+        </li>
+        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
+      </ul>
+    </ng-container>
+  </ng-container>
+  <hr />
+</ng-container>
--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/organization-filter.component.ts
@@ -0,0 +1,34 @@
+import { Component } from "@angular/core";
+
+import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/organization-filter.component";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { Organization } from "@bitwarden/common/models/domain/organization";
+
+@Component({
+  selector: "app-organization-filter",
+  templateUrl: "organization-filter.component.html",
+})
+export class OrganizationFilterComponent extends BaseOrganizationFilterComponent {
+  displayText = "allVaults";
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService
+  ) {
+    super();
+  }
+
+  async applyOrganizationFilter(organization: Organization) {
+    if (organization.enabled) {
+      //proceed with default behaviour for enabled organizations
+      super.applyOrganizationFilter(organization);
+    } else {
+      this.platformUtilsService.showToast(
+        "error",
+        null,
+        this.i18nService.t("disabledOrganizationFilterError")
+      );
+    }
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.html
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.html
@@ -0,0 +1,50 @@
+<ng-container *ngIf="!loaded">
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted tw-m-2"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+<div
+  *ngIf="loaded"
+  class="tw-flex tw-min-w-[200px] tw-max-w-[300px] tw-flex-col"
+  [appApiAction]="actionPromise"
+>
+  <button
+    *ngIf="allowEnrollmentChanges(organization) && !organization.resetPasswordEnrolled"
+    class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
+    (click)="toggleResetPasswordEnrollment(organization)"
+  >
+    <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+    {{ "enrollPasswordReset" | i18n }}
+  </button>
+  <button
+    *ngIf="allowEnrollmentChanges(organization) && organization.resetPasswordEnrolled"
+    class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
+    (click)="toggleResetPasswordEnrollment(organization)"
+  >
+    <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
+    {{ "withdrawPasswordReset" | i18n }}
+  </button>
+  <ng-container *ngIf="organization.useSso && organization.identifier">
+    <button
+      *ngIf="organization.ssoBound; else linkSso"
+      class="tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left !tw-text-main hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
+      (click)="unlinkSso(organization)"
+    >
+      <i class="bwi bwi-fw bwi-chain-broken" aria-hidden="true"></i>
+      {{ "unlinkSso" | i18n }}
+    </button>
+    <ng-template #linkSso>
+      <app-link-sso [organization]="organization"> </app-link-sso>
+    </ng-template>
+  </ng-container>
+  <button
+    class="text-danger tw-block tw-cursor-pointer tw-border-none tw-bg-background tw-px-4 tw-py-2 tw-text-left hover:tw-bg-secondary-100 focus:tw-z-50 focus:tw-bg-secondary-100 focus:tw-outline-none focus:tw-ring focus:tw-ring-primary-700 focus:tw-ring-offset-2 active:!tw-ring-0 active:!tw-ring-offset-0"
+    (click)="leave(organization)"
+  >
+    <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+    {{ "leave" | i18n }}
+  </button>
+</div>
--- a/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.ts
+++ b/apps/web/src/app/vault/vault-filter/organization-filter/organization-options.component.ts
@@ -0,0 +1,145 @@
+import { Component, Input } from "@angular/core";
+
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
+import { SyncService } from "@bitwarden/common/abstractions/sync.service";
+import { PolicyType } from "@bitwarden/common/enums/policyType";
+import { Organization } from "@bitwarden/common/models/domain/organization";
+import { Policy } from "@bitwarden/common/models/domain/policy";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "@bitwarden/common/models/request/organizationUserResetPasswordEnrollmentRequest";
+
+import { EnrollMasterPasswordReset } from "../../../organizations/users/enroll-master-password-reset.component";
+
+@Component({
+  selector: "app-organization-options",
+  templateUrl: "organization-options.component.html",
+})
+export class OrganizationOptionsComponent {
+  actionPromise: Promise<any>;
+  policies: Policy[];
+  loaded = false;
+
+  @Input() organization: Organization;
+
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private apiService: ApiService,
+    private syncService: SyncService,
+    private policyService: PolicyService,
+    private modalService: ModalService,
+    private logService: LogService
+  ) {}
+
+  async ngOnInit() {
+    await this.load();
+  }
+
+  async load() {
+    this.policies = await this.policyService.getAll(PolicyType.ResetPassword);
+    this.loaded = true;
+  }
+
+  allowEnrollmentChanges(org: Organization): boolean {
+    if (org.usePolicies && org.useResetPassword && org.hasPublicAndPrivateKeys) {
+      const policy = this.policies.find((p) => p.organizationId === org.id);
+      if (policy != null && policy.enabled) {
+        return org.resetPasswordEnrolled && policy.data.autoEnrollEnabled ? false : true;
+      }
+    }
+
+    return false;
+  }
+
+  showEnrolledStatus(org: Organization): boolean {
+    return (
+      org.useResetPassword &&
+      org.resetPasswordEnrolled &&
+      this.policies.some((p) => p.organizationId === org.id && p.enabled)
+    );
+  }
+
+  async unlinkSso(org: Organization) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("unlinkSsoConfirmation"),
+      org.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      this.actionPromise = this.apiService.deleteSsoUser(org.id).then(() => {
+        return this.syncService.fullSync(true);
+      });
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, "Unlinked SSO");
+      await this.load();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async leave(org: Organization) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("leaveOrganizationConfirmation"),
+      org.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+    if (!confirmed) {
+      return false;
+    }
+
+    try {
+      this.actionPromise = this.apiService.postLeaveOrganization(org.id).then(() => {
+        return this.syncService.fullSync(true);
+      });
+      await this.actionPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
+      await this.load();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async toggleResetPasswordEnrollment(org: Organization) {
+    if (!this.organization.resetPasswordEnrolled) {
+      this.modalService.open(EnrollMasterPasswordReset, {
+        allowMultipleModals: true,
+        data: {
+          organization: org,
+        },
+      });
+    } else {
+      // Remove reset password
+      const request = new OrganizationUserResetPasswordEnrollmentRequest();
+      request.masterPasswordHash = "ignored";
+      request.resetPasswordKey = null;
+      this.actionPromise = this.apiService.putOrganizationUserResetPasswordEnrollment(
+        this.organization.id,
+        this.organization.userId,
+        request
+      );
+      try {
+        await this.actionPromise;
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("withdrawPasswordResetSuccess")
+        );
+        this.syncService.fullSync(true);
+      } catch (e) {
+        this.logService.error(e);
+      }
+    }
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/shared/collection-filter/collection-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/shared/collection-filter/collection-filter.component.html
@@ -0,0 +1,74 @@
+<ng-container *ngIf="show">
+  <div class="filter-heading">
+    <button
+      (click)="toggleCollapse(collectionsGrouping)"
+      [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
+      aria-controls="collection-filters"
+      title="{{ 'toggleCollapse' | i18n }}"
+      class="toggle-button"
+    >
+      <i
+        class="bwi bwi-fw"
+        [ngClass]="{
+          'bwi-angle-right': isCollapsed(collectionsGrouping),
+          'bwi-angle-down': !isCollapsed(collectionsGrouping)
+        }"
+        aria-hidden="true"
+      ></i>
+    </button>
+    <h3 class="filter-title">&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
+  </div>
+  <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
+    <ng-template #recursiveCollections let-collections>
+      <li
+        *ngFor="let c of collections"
+        [ngClass]="{
+          active: c.node.id === activeFilter.selectedCollectionId && activeFilter.selectedCollection
+        }"
+        class="filter-option"
+      >
+        <span class="filter-buttons">
+          <button
+            class="toggle-button"
+            *ngIf="c.children.length"
+            (click)="toggleCollapse(c.node)"
+            title="{{ 'toggleCollapse' | i18n }}"
+            [attr.aria-expanded]="!isCollapsed(c.node)"
+            [attr.aria-controls]="c.node.name + '_children'"
+          >
+            <i
+              class="bwi bwi-fw"
+              [ngClass]="{
+                'bwi-angle-right': isCollapsed(c.node),
+                'bwi-angle-down': !isCollapsed(c.node)
+              }"
+              aria-hidden="true"
+            ></i>
+          </button>
+          <button class="filter-button" (click)="applyFilter(c.node)">
+            <i
+              *ngIf="c.children.length === 0"
+              class="bwi bwi-collection bwi-fw"
+              aria-hidden="true"
+            ></i
+            >&nbsp;{{ c.node.name }}
+          </button>
+        </span>
+        <ul
+          [id]="c.node.name + '_children'"
+          class="nested-filter-options"
+          *ngIf="c.children.length && !isCollapsed(c.node)"
+        >
+          <ng-container
+            *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
+          >
+          </ng-container>
+        </ul>
+      </li>
+    </ng-template>
+    <ng-container
+      *ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
+    >
+    </ng-container>
+  </ul>
+</ng-container>
--- a/apps/web/src/app/vault/vault-filter/shared/collection-filter/collection-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/collection-filter/collection-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { CollectionFilterComponent as BaseCollectionFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/collection-filter.component";
+
+@Component({
+  selector: "app-collection-filter",
+  templateUrl: "collection-filter.component.html",
+})
+export class CollectionFilterComponent extends BaseCollectionFilterComponent {}
--- a/apps/web/src/app/vault/vault-filter/shared/folder-filter/folder-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/shared/folder-filter/folder-filter.component.html
@@ -0,0 +1,82 @@
+<ng-container *ngIf="!hide">
+  <div class="filter-heading">
+    <button
+      class="toggle-button"
+      (click)="toggleCollapse(foldersGrouping)"
+      [attr.aria-expanded]="!isCollapsed(foldersGrouping)"
+      aria-controls="folder-filters"
+      title="{{ 'toggleCollapse' | i18n }}"
+    >
+      <i
+        class="bwi bwi-fw"
+        aria-hidden="true"
+        [ngClass]="{
+          'bwi-angle-right': isCollapsed(foldersGrouping),
+          'bwi-angle-down': !isCollapsed(foldersGrouping)
+        }"
+      ></i>
+    </button>
+    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
+    <button
+      class="text-muted ml-auto add-button"
+      (click)="addFolder()"
+      appA11yTitle="{{ 'addFolder' | i18n }}"
+    >
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    </button>
+  </div>
+  <ul id="folder-filters" *ngIf="!isCollapsed(foldersGrouping)" class="filter-options">
+    <ng-template #recursiveFolders let-folders>
+      <li
+        *ngFor="let f of folders"
+        [ngClass]="{
+          active: f.node.id === activeFilter.selectedFolderId && activeFilter.selectedFolder
+        }"
+        class="filter-option"
+      >
+        <span class="filter-buttons">
+          <button
+            *ngIf="f.children.length"
+            title="{{ 'toggleCollapse' | i18n }}"
+            (click)="toggleCollapse(f.node)"
+            [attr.aria-expanded]="!isCollapsed(f.node)"
+            [attr.aria-controls]="f.node.name + '_children'"
+            class="toggle-button"
+          >
+            <i
+              class="bwi bwi-fw"
+              [ngClass]="{
+                'bwi-angle-right': isCollapsed(f.node),
+                'bwi-angle-down': !isCollapsed(f.node)
+              }"
+              aria-hidden="true"
+            ></i>
+          </button>
+          <button class="filter-button" (click)="applyFilter(f.node)">
+            <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i
+            >&nbsp;{{ f.node.name }}
+          </button>
+          <button
+            class="edit-button"
+            (click)="editFolder(f.node)"
+            appA11yTitle="{{ 'editFolder' | i18n }}"
+            *ngIf="f.node.id"
+          >
+            <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
+          </button>
+        </span>
+        <ul
+          [id]="f.node.name + '_children'"
+          class="nested-filter-options"
+          *ngIf="f.children.length && !isCollapsed(f.node)"
+        >
+          <ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }">
+          </ng-container>
+        </ul>
+      </li>
+    </ng-template>
+    <ng-container
+      *ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
+    ></ng-container>
+  </ul>
+</ng-container>
--- a/apps/web/src/app/vault/vault-filter/shared/folder-filter/folder-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/folder-filter/folder-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { FolderFilterComponent as BaseFolderFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/folder-filter.component";
+
+@Component({
+  selector: "app-folder-filter",
+  templateUrl: "folder-filter.component.html",
+})
+export class FolderFilterComponent extends BaseFolderFilterComponent {}
--- a/apps/web/src/app/vault/vault-filter/shared/status-filter/status-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/shared/status-filter/status-filter.component.html
@@ -0,0 +1,33 @@
+<ng-container *ngIf="show">
+  <ul class="filter-options">
+    <li class="filter-option" [ngClass]="{ active: activeFilter.status === 'all' }">
+      <span class="filter-buttons">
+        <button class="filter-button" (click)="applyFilter('all')">
+          <i class="bwi bwi-fw bwi-filter" aria-hidden="true"></i>&nbsp;{{ "allItems" | i18n }}
+        </button>
+      </span>
+    </li>
+    <li
+      *ngIf="!hideFavorites"
+      class="filter-option"
+      [ngClass]="{ active: activeFilter.status === 'favorites' }"
+    >
+      <span class="filter-buttons">
+        <button class="filter-button" (click)="applyFilter('favorites')">
+          <i class="bwi bwi-fw bwi-star" aria-hidden="true"></i>&nbsp;{{ "favorites" | i18n }}
+        </button>
+      </span>
+    </li>
+    <li
+      *ngIf="!hideTrash"
+      class="filter-option"
+      [ngClass]="{ active: activeFilter.status === 'trash' }"
+    >
+      <span class="filter-buttons">
+        <button class="filter-button" (click)="applyFilter('trash')">
+          <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>&nbsp;{{ "trash" | i18n }}
+        </button>
+      </span>
+    </li>
+  </ul>
+</ng-container>
--- a/apps/web/src/app/vault/vault-filter/shared/status-filter/status-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/status-filter/status-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { StatusFilterComponent as BaseStatusFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/status-filter.component";
+
+@Component({
+  selector: "app-status-filter",
+  templateUrl: "status-filter.component.html",
+})
+export class StatusFilterComponent extends BaseStatusFilterComponent {}
--- a/apps/web/src/app/vault/vault-filter/shared/type-filter/type-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/shared/type-filter/type-filter.component.html
@@ -0,0 +1,60 @@
+<div class="filter-heading">
+  <button
+    class="toggle-button"
+    [attr.aria-expanded]="!isCollapsed"
+    aria-controls="type-filters"
+    (click)="toggleCollapse()"
+    title="{{ 'toggleCollapse' | i18n }}"
+  >
+    <i
+      class="bwi bwi-fw"
+      aria-hidden="true"
+      [ngClass]="{
+        'bwi-angle-right': isCollapsed,
+        'bwi-angle-down': !isCollapsed
+      }"
+    ></i>
+  </button>
+  <h3>&nbsp;{{ "types" | i18n }}</h3>
+</div>
+<ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
+  <li
+    class="filter-option"
+    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Login }"
+  >
+    <span class="filter-buttons">
+      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
+      </button>
+    </span>
+  </li>
+  <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
+    <span class="filter-buttons">
+      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Card)">
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
+      </button>
+    </span>
+  </li>
+  <li
+    class="filter-option"
+    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Identity }"
+  >
+    <span class="filter-buttons">
+      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Identity)">
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
+      </button>
+    </span>
+  </li>
+  <li
+    class="filter-option"
+    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SecureNote }"
+  >
+    <span class="filter-buttons">
+      <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
+          "typeSecureNote" | i18n
+        }}
+      </button>
+    </span>
+  </li>
+</ul>
--- a/apps/web/src/app/vault/vault-filter/shared/type-filter/type-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/type-filter/type-filter.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { TypeFilterComponent as BaseTypeFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/type-filter.component";
+
+@Component({
+  selector: "app-type-filter",
+  templateUrl: "type-filter.component.html",
+})
+export class TypeFilterComponent extends BaseTypeFilterComponent {}
--- a/apps/web/src/app/vault/vault-filter/shared/vault-filter-shared.module.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/vault-filter-shared.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../../shared";
+
+import { CollectionFilterComponent } from "./collection-filter/collection-filter.component";
+import { FolderFilterComponent } from "./folder-filter/folder-filter.component";
+import { StatusFilterComponent } from "./status-filter/status-filter.component";
+import { TypeFilterComponent } from "./type-filter/type-filter.component";
+import { VaultFilterService } from "./vault-filter.service";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [
+    CollectionFilterComponent,
+    FolderFilterComponent,
+    StatusFilterComponent,
+    TypeFilterComponent,
+  ],
+  exports: [
+    SharedModule,
+    CollectionFilterComponent,
+    FolderFilterComponent,
+    StatusFilterComponent,
+    TypeFilterComponent,
+  ],
+  providers: [VaultFilterService],
+})
+export class VaultFilterSharedModule {}
--- a/apps/web/src/app/vault/vault-filter/shared/vault-filter.service.ts
+++ b/apps/web/src/app/vault/vault-filter/shared/vault-filter.service.ts
@@ -0,0 +1,85 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+
+import { DynamicTreeNode } from "@bitwarden/angular/vault/vault-filter/models/dynamic-tree-node.model";
+import { VaultFilterService as BaseVaultFilterService } from "@bitwarden/angular/vault/vault-filter/services/vault-filter.service";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
+import { CollectionService } from "@bitwarden/common/abstractions/collection.service";
+import { FolderService } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { PolicyService } from "@bitwarden/common/abstractions/policy/policy.service.abstraction";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { CollectionData } from "@bitwarden/common/models/data/collectionData";
+import { Collection } from "@bitwarden/common/models/domain/collection";
+import { CollectionDetailsResponse } from "@bitwarden/common/models/response/collectionResponse";
+import { CollectionView } from "@bitwarden/common/models/view/collectionView";
+
+@Injectable()
+export class VaultFilterService extends BaseVaultFilterService {
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
+  constructor(
+    stateService: StateService,
+    organizationService: OrganizationService,
+    folderService: FolderService,
+    cipherService: CipherService,
+    collectionService: CollectionService,
+    policyService: PolicyService,
+    private i18nService: I18nService,
+    protected apiService: ApiService
+  ) {
+    super(
+      stateService,
+      organizationService,
+      folderService,
+      cipherService,
+      collectionService,
+      policyService
+    );
+  }
+
+  async buildCollapsedFilterNodes(): Promise<Set<string>> {
+    const nodes = await super.buildCollapsedFilterNodes();
+    this._collapsedFilterNodes.next(nodes);
+    return nodes;
+  }
+
+  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }
+
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
+  }
+
+  async buildAdminCollections(organizationId: string) {
+    let result: CollectionView[] = [];
+    const collectionResponse = await this.apiService.getCollections(organizationId);
+    if (collectionResponse?.data != null && collectionResponse.data.length) {
+      const collectionDomains = collectionResponse.data.map(
+        (r: CollectionDetailsResponse) => new Collection(new CollectionData(r))
+      );
+      result = await this.collectionService.decryptMany(collectionDomains);
+    }
+
+    const noneCollection = new CollectionView();
+    noneCollection.name = this.i18nService.t("unassigned");
+    noneCollection.organizationId = organizationId;
+    result.push(noneCollection);
+
+    const nestedCollections = await this.collectionService.getAllNested(result);
+    return new DynamicTreeNode<CollectionView>({
+      fullList: result,
+      nestedList: nestedCollections,
+    });
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/vault-filter.component.html
+++ b/apps/web/src/app/vault/vault-filter/vault-filter.component.html
@@ -0,0 +1,79 @@
+<div class="card vault-filters">
+  <div class="container loading-spinner" *ngIf="!isLoaded">
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  </div>
+  <div *ngIf="isLoaded">
+    <div class="card-header d-flex">
+      {{ "filters" | i18n }}
+      <a
+        class="ml-auto"
+        href="https://bitwarden.com/help/searching-vault/"
+        target="_blank"
+        rel="noopener"
+        appA11yTitle="{{ 'learnMore' | i18n }}"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      </a>
+    </div>
+    <div class="card-body">
+      <input
+        type="search"
+        placeholder="{{ (searchPlaceholder | i18n) || ('searchVault' | i18n) }}"
+        id="search"
+        class="form-control"
+        [(ngModel)]="searchText"
+        (input)="searchTextChanged()"
+        autocomplete="off"
+        appAutofocus
+      />
+      <app-organization-filter
+        [hide]="hideOrganizations"
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        [organizations]="organizations"
+        [activePersonalOwnershipPolicy]="activePersonalOwnershipPolicy"
+        [activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+      ></app-organization-filter>
+      <div class="filter">
+        <app-status-filter
+          [hideFavorites]="hideFavorites"
+          [hideTrash]="hideTrash"
+          [activeFilter]="activeFilter"
+          (onFilterChange)="applyFilter($event)"
+        ></app-status-filter>
+      </div>
+      <div class="filter">
+        <app-type-filter
+          [activeFilter]="activeFilter"
+          [collapsedFilterNodes]="collapsedFilterNodes"
+          (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+          (onFilterChange)="applyFilter($event)"
+        ></app-type-filter>
+      </div>
+      <div class="filter">
+        <app-folder-filter
+          [hide]="hideFolders"
+          [activeFilter]="activeFilter"
+          [collapsedFilterNodes]="collapsedFilterNodes"
+          [folderNodes]="folders$ | async"
+          (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+          (onFilterChange)="applyFilter($event)"
+          (onAddFolder)="addFolder()"
+          (onEditFolder)="editFolder($event)"
+        ></app-folder-filter>
+      </div>
+      <div class="filter">
+        <app-collection-filter
+          [hide]="hideCollections"
+          [activeFilter]="activeFilter"
+          [collapsedFilterNodes]="collapsedFilterNodes"
+          [collectionNodes]="collections"
+          (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+          (onFilterChange)="applyFilter($event)"
+        ></app-collection-filter>
+      </div>
+    </div>
+  </div>
+</div>
--- a/apps/web/src/app/vault/vault-filter/vault-filter.component.ts
+++ b/apps/web/src/app/vault/vault-filter/vault-filter.component.ts
@@ -0,0 +1,33 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+
+import { VaultFilterComponent as BaseVaultFilterComponent } from "@bitwarden/angular/vault/vault-filter/components/vault-filter.component";
+
+import { VaultFilterService } from "./shared/vault-filter.service";
+
+@Component({
+  selector: "./app-vault-filter",
+  templateUrl: "vault-filter.component.html",
+})
+export class VaultFilterComponent extends BaseVaultFilterComponent {
+  @Output() onSearchTextChanged = new EventEmitter<string>();
+
+  searchPlaceholder: string;
+  searchText = "";
+
+  constructor(protected vaultFilterService: VaultFilterService) {
+    // This empty constructor is required to provide the web vaultFilterService subclass to super()
+    // TODO: refactor this to use proper dependency injection
+    super(vaultFilterService);
+  }
+
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
+  searchTextChanged() {
+    this.onSearchTextChanged.emit(this.searchText);
+  }
+}
--- a/apps/web/src/app/vault/vault-filter/vault-filter.module.ts
+++ b/apps/web/src/app/vault/vault-filter/vault-filter.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+
+import { LinkSsoComponent } from "./organization-filter/link-sso.component";
+import { OrganizationFilterComponent } from "./organization-filter/organization-filter.component";
+import { OrganizationOptionsComponent } from "./organization-filter/organization-options.component";
+import { VaultFilterSharedModule } from "./shared/vault-filter-shared.module";
+import { VaultFilterComponent } from "./vault-filter.component";
+
+@NgModule({
+  imports: [VaultFilterSharedModule],
+  declarations: [
+    VaultFilterComponent,
+    OrganizationFilterComponent,
+    OrganizationOptionsComponent,
+    LinkSsoComponent,
+  ],
+  exports: [VaultFilterComponent],
+})
+export class VaultFilterModule {}
--- a/apps/web/src/app/vault/vault-routing.module.ts
+++ b/apps/web/src/app/vault/vault-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { VaultComponent } from "./vault.component";
+const routes: Routes = [
+  {
+    path: "",
+    component: VaultComponent,
+    data: { titleId: "vaults" },
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class VaultRoutingModule {}
--- a/apps/web/src/app/vault/vault.component.html
+++ b/apps/web/src/app/vault/vault.component.html
@@ -0,0 +1,121 @@
+<div class="container page-content">
+  <div class="row">
+    <div class="col-3">
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
+              [activeFilter]="activeFilter"
+              (onFilterChange)="applyVaultFilter($event)"
+              (onAddFolder)="addFolder()"
+              (onEditFolder)="editFolder($event.id)"
+              (onSearchTextChanged)="filterSearchText($event)"
+            ></app-vault-filter>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div [ngClass]="{ 'col-6': isShowingCards, 'col-9': !isShowingCards }">
+      <div class="page-header d-flex">
+        <h1>
+          {{ "vaultItems" | i18n }}
+          <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
+            <ng-container *ngIf="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="ml-auto d-flex">
+          <app-vault-bulk-actions
+            [ciphersComponent]="ciphersComponent"
+            [deleted]="activeFilter.status === 'trash'"
+          >
+          </app-vault-bulk-actions>
+          <button
+            type="button"
+            class="btn btn-outline-primary btn-sm"
+            (click)="addCipher()"
+            *ngIf="activeFilter.status !== 'trash'"
+          >
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
+          </button>
+        </div>
+      </div>
+      <app-callout
+        type="warning"
+        *ngIf="activeFilter.status === 'trash'"
+        icon="bwi-exclamation-triangle"
+      >
+        {{ trashCleanupWarning }}
+      </app-callout>
+      <app-vault-ciphers
+        (onCipherClicked)="editCipher($event)"
+        (onAttachmentsClicked)="editCipherAttachments($event)"
+        (onAddCipher)="addCipher()"
+        (onShareClicked)="shareCipher($event)"
+        (onCollectionsClicked)="editCipherCollections($event)"
+        (onCloneClicked)="cloneCipher($event)"
+        (onOrganzationBadgeClicked)="applyOrganizationFilter($event)"
+      >
+      </app-vault-ciphers>
+    </div>
+    <div class="col-3">
+      <div class="card border-warning mb-4" *ngIf="showUpdateKey">
+        <div class="card-header bg-warning text-white">
+          <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
+          {{ "updateKeyTitle" | i18n }}
+        </div>
+        <div class="card-body">
+          <p>{{ "updateEncryptionKeyShortDesc" | i18n }}</p>
+          <button class="btn btn-block btn-outline-secondary" type="button" (click)="updateKey()">
+            {{ "updateEncryptionKey" | i18n }}
+          </button>
+        </div>
+      </div>
+      <app-verify-email *ngIf="showVerifyEmail" class="d-block mb-4"></app-verify-email>
+      <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
+        <div class="card-header bg-warning text-white">
+          <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
+          {{ "updateBrowser" | i18n }}
+        </div>
+        <div class="card-body">
+          <p>{{ "updateBrowserDesc" | i18n }}</p>
+          <a
+            class="btn btn-block btn-outline-secondary"
+            target="_blank"
+            href="https://browser-update.org/update-browser.html"
+            rel="noopener"
+          >
+            {{ "updateBrowser" | i18n }}
+          </a>
+        </div>
+      </div>
+      <div class="card border-success mb-4" *ngIf="showPremiumCallout">
+        <div class="card-header bg-success text-white">
+          <i class="bwi bwi-star-f bwi-fw" aria-hidden="true"></i> {{ "goPremium" | i18n }}
+        </div>
+        <div class="card-body">
+          <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
+          <a
+            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>
+<ng-template #share></ng-template>
+<ng-template #collections></ng-template>
+<ng-template #updateKeyTemplate></ng-template>
--- a/apps/web/src/app/vault/vault.component.ts
+++ b/apps/web/src/app/vault/vault.component.ts
@@ -0,0 +1,394 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+} from "@angular/core";
+import { ActivatedRoute, Params, Router } from "@angular/router";
+import { first } from "rxjs/operators";
+
+import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { VaultFilter } from "@bitwarden/angular/vault/vault-filter/models/vault-filter.model";
+import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
+import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
+import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
+import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
+import { PasswordRepromptService } from "@bitwarden/common/abstractions/passwordReprompt.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { SyncService } from "@bitwarden/common/abstractions/sync.service";
+import { TokenService } from "@bitwarden/common/abstractions/token.service";
+import { CipherView } from "@bitwarden/common/models/view/cipherView";
+
+import { UpdateKeyComponent } from "../settings/update-key.component";
+
+import { AddEditComponent } from "./add-edit.component";
+import { AttachmentsComponent } from "./attachments.component";
+import { CiphersComponent } from "./ciphers.component";
+import { CollectionsComponent } from "./collections.component";
+import { FolderAddEditComponent } from "./folder-add-edit.component";
+import { ShareComponent } from "./share.component";
+import { VaultService } from "./shared/vault.service";
+import { VaultFilterService } from "./vault-filter/shared/vault-filter.service";
+import { VaultFilterComponent } from "./vault-filter/vault-filter.component";
+
+const BroadcasterSubscriptionId = "VaultComponent";
+
+@Component({
+  selector: "app-vault",
+  templateUrl: "vault.component.html",
+})
+export class VaultComponent implements OnInit, OnDestroy {
+  @ViewChild("vaultFilter", { static: true }) filterComponent: VaultFilterComponent;
+  @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
+  @ViewChild("attachments", { read: ViewContainerRef, static: true })
+  attachmentsModalRef: ViewContainerRef;
+  @ViewChild("folderAddEdit", { read: ViewContainerRef, static: true })
+  folderAddEditModalRef: ViewContainerRef;
+  @ViewChild("cipherAddEdit", { read: ViewContainerRef, static: true })
+  cipherAddEditModalRef: ViewContainerRef;
+  @ViewChild("share", { read: ViewContainerRef, static: true }) shareModalRef: ViewContainerRef;
+  @ViewChild("collections", { read: ViewContainerRef, static: true })
+  collectionsModalRef: ViewContainerRef;
+  @ViewChild("updateKeyTemplate", { read: ViewContainerRef, static: true })
+  updateKeyModalRef: ViewContainerRef;
+
+  folderId: string = null;
+  myVaultOnly = false;
+  showVerifyEmail = false;
+  showBrowserOutdated = false;
+  showUpdateKey = false;
+  showPremiumCallout = false;
+  trashCleanupWarning: string = null;
+  activeFilter: VaultFilter = new VaultFilter();
+
+  constructor(
+    private syncService: SyncService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private changeDetectorRef: ChangeDetectorRef,
+    private i18nService: I18nService,
+    private modalService: ModalService,
+    private tokenService: TokenService,
+    private cryptoService: CryptoService,
+    private messagingService: MessagingService,
+    private platformUtilsService: PlatformUtilsService,
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone,
+    private stateService: StateService,
+    private organizationService: OrganizationService,
+    private vaultService: VaultService,
+    private cipherService: CipherService,
+    private passwordRepromptService: PasswordRepromptService,
+    private vaultFilterService: VaultFilterService
+  ) {}
+
+  async ngOnInit() {
+    this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
+    this.showBrowserOutdated = window.navigator.userAgent.indexOf("MSIE") !== -1;
+    this.trashCleanupWarning = this.i18nService.t(
+      this.platformUtilsService.isSelfHost()
+        ? "trashCleanupWarningSelfHosted"
+        : "trashCleanupWarning"
+    );
+
+    this.route.queryParams.pipe(first()).subscribe(async (params) => {
+      await this.syncService.fullSync(false);
+      const canAccessPremium = await this.stateService.getCanAccessPremium();
+      this.showPremiumCallout =
+        !this.showVerifyEmail && !canAccessPremium && !this.platformUtilsService.isSelfHost();
+
+      this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
+      this.filterComponent.reloadOrganizations();
+      this.showUpdateKey = !(await this.cryptoService.hasEncKey());
+
+      const cipherId = getCipherIdFromParams(params);
+
+      if (cipherId) {
+        const cipherView = new CipherView();
+        cipherView.id = cipherId;
+        if (params.action === "clone") {
+          await this.cloneCipher(cipherView);
+        } else if (params.action === "edit") {
+          await this.editCipher(cipherView);
+        }
+      }
+      await this.ciphersComponent.reload();
+
+      this.route.queryParams.subscribe(async (params) => {
+        const cipherId = getCipherIdFromParams(params);
+        if (cipherId) {
+          if ((await this.cipherService.get(cipherId)) != null) {
+            this.editCipherId(cipherId);
+          } else {
+            this.platformUtilsService.showToast(
+              "error",
+              this.i18nService.t("errorOccurred"),
+              this.i18nService.t("unknownCipher")
+            );
+            this.router.navigate([], {
+              queryParams: { itemId: null, cipherId: null },
+              queryParamsHandling: "merge",
+            });
+          }
+        }
+      });
+
+      this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+        this.ngZone.run(async () => {
+          switch (message.command) {
+            case "syncCompleted":
+              if (message.successfully) {
+                await Promise.all([
+                  this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
+                  this.filterComponent.reloadOrganizations(),
+                  this.ciphersComponent.load(this.ciphersComponent.filter),
+                ]);
+                this.changeDetectorRef.detectChanges();
+              }
+              break;
+          }
+        });
+      });
+    });
+  }
+
+  get isShowingCards() {
+    return (
+      this.showBrowserOutdated ||
+      this.showPremiumCallout ||
+      this.showUpdateKey ||
+      this.showVerifyEmail
+    );
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+
+  async applyVaultFilter(vaultFilter: VaultFilter) {
+    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.activeFilter = vaultFilter;
+    await this.ciphersComponent.reload(
+      this.activeFilter.buildFilter(),
+      vaultFilter.status === "trash"
+    );
+    this.filterComponent.searchPlaceholder = this.vaultService.calculateSearchBarLocalizationString(
+      this.activeFilter
+    );
+    this.go();
+  }
+
+  async applyOrganizationFilter(orgId: string) {
+    if (orgId == null) {
+      this.activeFilter.resetOrganization();
+      this.activeFilter.myVaultOnly = true;
+    } else {
+      this.activeFilter.selectedOrganizationId = orgId;
+    }
+    await this.vaultFilterService.ensureVaultFiltersAreExpanded();
+    await this.applyVaultFilter(this.activeFilter);
+  }
+
+  filterSearchText(searchText: string) {
+    this.ciphersComponent.searchText = searchText;
+    this.ciphersComponent.search(200);
+  }
+
+  async editCipherAttachments(cipher: CipherView) {
+    const canAccessPremium = await this.stateService.getCanAccessPremium();
+    if (cipher.organizationId == null && !canAccessPremium) {
+      this.messagingService.send("premiumRequired");
+      return;
+    } else if (cipher.organizationId != null) {
+      const org = await this.organizationService.get(cipher.organizationId);
+      if (org != null && (org.maxStorageGb == null || org.maxStorageGb === 0)) {
+        this.messagingService.send("upgradeOrganization", {
+          organizationId: cipher.organizationId,
+        });
+        return;
+      }
+    }
+
+    let madeAttachmentChanges = false;
+    const [modal] = await this.modalService.openViewRef(
+      AttachmentsComponent,
+      this.attachmentsModalRef,
+      (comp) => {
+        comp.cipherId = cipher.id;
+        comp.onUploadedAttachment.subscribe(() => (madeAttachmentChanges = true));
+        comp.onDeletedAttachment.subscribe(() => (madeAttachmentChanges = true));
+        comp.onReuploadedAttachment.subscribe(() => (madeAttachmentChanges = true));
+      }
+    );
+
+    modal.onClosed.subscribe(async () => {
+      if (madeAttachmentChanges) {
+        await this.ciphersComponent.refresh();
+      }
+      madeAttachmentChanges = false;
+    });
+  }
+
+  async shareCipher(cipher: CipherView) {
+    const [modal] = await this.modalService.openViewRef(
+      ShareComponent,
+      this.shareModalRef,
+      (comp) => {
+        comp.cipherId = cipher.id;
+        comp.onSharedCipher.subscribe(async () => {
+          modal.close();
+          await this.ciphersComponent.refresh();
+        });
+      }
+    );
+  }
+
+  async editCipherCollections(cipher: CipherView) {
+    const [modal] = await this.modalService.openViewRef(
+      CollectionsComponent,
+      this.collectionsModalRef,
+      (comp) => {
+        comp.cipherId = cipher.id;
+        comp.onSavedCollections.subscribe(async () => {
+          modal.close();
+          await this.ciphersComponent.refresh();
+        });
+      }
+    );
+  }
+
+  async addFolder() {
+    const [modal] = await this.modalService.openViewRef(
+      FolderAddEditComponent,
+      this.folderAddEditModalRef,
+      (comp) => {
+        comp.folderId = null;
+        comp.onSavedFolder.subscribe(async () => {
+          modal.close();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
+        });
+      }
+    );
+  }
+
+  async editFolder(folderId: string) {
+    const [modal] = await this.modalService.openViewRef(
+      FolderAddEditComponent,
+      this.folderAddEditModalRef,
+      (comp) => {
+        comp.folderId = folderId;
+        comp.onSavedFolder.subscribe(async () => {
+          modal.close();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
+        });
+        comp.onDeletedFolder.subscribe(async () => {
+          modal.close();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
+        });
+      }
+    );
+  }
+
+  async addCipher() {
+    const component = await this.editCipher(null);
+    component.type = this.activeFilter.cipherType;
+    component.folderId = this.folderId === "none" ? null : this.folderId;
+    if (this.activeFilter.selectedCollectionId != null) {
+      const collection = this.filterComponent.collections.fullList.filter(
+        (c) => c.id === this.activeFilter.selectedCollectionId
+      );
+      if (collection.length > 0) {
+        component.organizationId = collection[0].organizationId;
+        component.collectionIds = [this.activeFilter.selectedCollectionId];
+      }
+    }
+    if (this.activeFilter.selectedFolderId && this.activeFilter.selectedFolder) {
+      component.folderId = this.activeFilter.selectedFolderId;
+    }
+    if (this.activeFilter.selectedOrganizationId) {
+      component.organizationId = this.activeFilter.selectedOrganizationId;
+    }
+  }
+
+  async editCipher(cipher: CipherView) {
+    return this.editCipherId(cipher?.id);
+  }
+
+  async editCipherId(id: string) {
+    const cipher = await this.cipherService.get(id);
+    if (cipher != null && cipher.reprompt != 0) {
+      if (!(await this.passwordRepromptService.showPasswordPrompt())) {
+        this.go({ cipherId: null, itemId: null });
+        return;
+      }
+    }
+
+    const [modal, childComponent] = await this.modalService.openViewRef(
+      AddEditComponent,
+      this.cipherAddEditModalRef,
+      (comp) => {
+        comp.cipherId = id;
+        comp.onSavedCipher.subscribe(async () => {
+          modal.close();
+          await this.ciphersComponent.refresh();
+        });
+        comp.onDeletedCipher.subscribe(async () => {
+          modal.close();
+          await this.ciphersComponent.refresh();
+        });
+        comp.onRestoredCipher.subscribe(async () => {
+          modal.close();
+          await this.ciphersComponent.refresh();
+        });
+      }
+    );
+
+    modal.onClosedPromise().then(() => {
+      this.go({ cipherId: null, itemId: null });
+    });
+
+    return childComponent;
+  }
+
+  async cloneCipher(cipher: CipherView) {
+    const component = await this.editCipher(cipher);
+    component.cloneMode = true;
+  }
+
+  async updateKey() {
+    await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
+  }
+
+  private go(queryParams: any = null) {
+    if (queryParams == null) {
+      queryParams = {
+        favorites: this.activeFilter.status === "favorites" ? true : null,
+        type: this.activeFilter.cipherType,
+        folderId: this.activeFilter.selectedFolderId,
+        collectionId: this.activeFilter.selectedCollectionId,
+        deleted: this.activeFilter.status === "trash" ? true : null,
+      };
+    }
+
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: queryParams,
+      queryParamsHandling: "merge",
+      replaceUrl: true,
+    });
+  }
+}
+
+/**
+ * Allows backwards compatibility with
+ * old links that used the original `cipherId` param
+ */
+const getCipherIdFromParams = (params: Params): string => {
+  return params["itemId"] || params["cipherId"];
+};
--- a/apps/web/src/app/vault/vault.module.ts
+++ b/apps/web/src/app/vault/vault.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+
+import { CiphersComponent } from "./ciphers.component";
+import { VaultSharedModule } from "./shared/vault-shared.module";
+import { VaultRoutingModule } from "./vault-routing.module";
+import { VaultComponent } from "./vault.component";
+
+@NgModule({
+  imports: [VaultSharedModule, VaultRoutingModule],
+  declarations: [VaultComponent, CiphersComponent],
+  exports: [VaultComponent],
+})
+export class VaultModule {}