Remove eager loading of module

* Allow firefox relay service in generator

* Update generator.component.ts

* Update generator.component.ts

* make pretty

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,10 +21,6 @@
 
 <!--Required for any UI changes. Delete if not applicable-->
 
-## Testing requirements
-
-<!--What functionality requires testing by QA? This includes testing new behavior and regression testing-->
-
 ## Before you submit
 
 - [ ] I have checked for **linting** errors (`npm run lint`) (required)

.github/workflows/build.yml

@@ -11,6 +11,7 @@ on:
     branches-ignore:
       - "l10n_master"
       - "gh-pages"
+      - "deploy"
     paths-ignore:
       - '.github/workflows/**'
 

.github/workflows/release.yml

@@ -19,8 +19,8 @@ jobs:
     name: Setup
     runs-on: ubuntu-20.04
     outputs:
-      release_version: ${{ steps.version.outputs.package }}
-      tag_version: ${{ steps.version.outputs.tag }}
+      release_version: ${{ steps.version.outputs.version }}
+      tag_version: ${{ steps.version.outputs.version }}
       branch_name: ${{ steps.branch.outputs.branch_name }}
     steps:
       - name: Branch check
@@ -38,20 +38,11 @@ jobs:
 
       - name: Check Release Version
         id: version
-        run: |
-          version=$( jq -r ".version" package.json)
-          previous_release_tag_version=$(
-            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
-          )
-
-          if [ "v$version" == "$previous_release_tag_version" ] && \
-          [ "${{ github.event.inputs.release_type }}" == "Initial Release" ]; then
-            echo "[!] Already released v$version. Please bump version to continue"
-            exit 1
-          fi
-
-          echo "::set-output name=package::$version"
-          echo "::set-output name=tag::v$version"
+        uses: bitwarden/gh-actions/release-version-check@ea9fab01d76940267b4147cc1c4542431246b9f6
+        with:
+          release-type: ${{ github.event.inputs.release_type }}
+          project-type: ts
+          file: package.json
 
       - name: Get branch name
         id: branch
@@ -137,6 +128,9 @@ jobs:
           else
             docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web:$_RELEASE_VERSION
             docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web:latest
+
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web-sh:$_RELEASE_VERSION
+            docker tag bitwarden/web:$_BRANCH_NAME $REGISTRY/web-sh:latest
           fi
 
       - name: Push version and latest image
@@ -147,12 +141,15 @@ jobs:
           docker push $REGISTRY/web:$_RELEASE_VERSION
           docker push $REGISTRY/web:latest
 
+          docker push $REGISTRY/web-sh:$_RELEASE_VERSION
+          docker push $REGISTRY/web-sh:latest
+
       - name: Log out of Docker
         run: docker logout
 
 
   ghpages-deploy:
-    name: Deploy Web Vault
+    name: Deploy Web Vault to GitHub Pages
     runs-on: ubuntu-20.04
     needs:
       - setup
@@ -166,10 +163,10 @@ jobs:
         with:
           ref: gh-pages
 
-      - name: Create deploy branch
+      - name: Create gh-pages-deploy branch
         run: |
-          git switch -c deploy-$_TAG_VERSION
-          git push -u origin deploy-$_TAG_VERSION
+          git switch -c gh-pages-deploy-$_TAG_VERSION
+          git push -u origin gh-pages-deploy-$_TAG_VERSION
 
       - name: Checkout Repo
         uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
@@ -182,7 +179,7 @@ jobs:
           git config --global url."https://".insteadOf ssh://
 
       - name: Download latest cloud asset
-        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
+        uses: bitwarden/gh-actions/download-artifacts@c1fa8e09871a860862d6bbe36184b06d2c7e35a8
         with:
           workflow: build.yml
           workflow_conclusion: success
@@ -198,24 +195,88 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          target_branch: deploy-${{ needs.setup.outputs.tag_version }}
+          target_branch: gh-pages-deploy-${{ needs.setup.outputs.tag_version }}
           build_dir: build
           keep_history: true
           commit_message: "Staging deploy ${{ needs.setup.outputs.release_version }}"
           dry_run: ${{ github.event.inputs.release_type == 'Dry Run' }}
 
-      - name: Create Deploy PR
+      - name: Create GitHub Pages Deploy PR
         if: ${{ github.event.inputs.release_type != 'Dry Run' }}
         env:
-          PR_BRANCH: deploy-${{ env._TAG_VERSION }}
+          PR_BRANCH: gh-pages-deploy-${{ env._TAG_VERSION }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          gh pr create --title "Deploy $_RELEASE_VERSION" \
+          gh pr create --title "Deploy $_RELEASE_VERSION to GitHub Pages" \
             --body "Deploying $_RELEASE_VERSION" \
             --base gh-pages \
             --head "$PR_BRANCH"
 
 
+  cfpages-deploy:
+    name: Deploy Web Vault to CloudFlare Pages branch
+    runs-on: ubuntu-20.04
+    needs:
+      - setup
+      - self-host
+    env:
+      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+
+      - name: Download latest cloud asset
+        uses: bitwarden/gh-actions/download-artifacts@c1fa8e09871a860862d6bbe36184b06d2c7e35a8
+        with:
+          workflow: build.yml
+          workflow_conclusion: success
+          branch: ${{ needs.setup.outputs.branch_name }}
+          artifacts: web-*-cloud-COMMERCIAL.zip
+
+      # This should result in a build directory in the current working directory
+      - name: Unzip build asset
+        run: unzip web-*-cloud-COMMERCIAL.zip
+
+      - name: Checkout Repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
+        with:
+          ref: deploy
+          path: deployment
+
+      - name: Setup git config
+        run: |
+          git config --global user.name = "GitHub Action Bot"
+          git config --global user.email = "<>"
+          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
+          git config --global url."https://".insteadOf ssh://
+
+      - name: Deploy CloudFlare Pages
+        run: |
+          rm -rf ./*
+          cp -R ../build/* .
+        working-directory: deployment
+
+      - name: Create cf-pages-deploy branch
+        run: |
+          git switch -c cf-pages-deploy-$_TAG_VERSION
+          git add .
+          git commit -m "Staging deploy ${{ needs.setup.outputs.release_version }}"
+          git push -u origin cf-pages-deploy-$_TAG_VERSION
+        working-directory: deployment    
+
+      - name: Create CloudFlare Pages Deploy PR
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          PR_BRANCH: cf-pages-deploy-${{ env._TAG_VERSION }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr create --title "Deploy $_RELEASE_VERSION to CloudFlare Pages" \
+            --body "Deploying $_RELEASE_VERSION" \
+            --base deploy \
+            --head "$PR_BRANCH"
+
+
   release:
     name: Create GitHub Release
     runs-on: ubuntu-20.04
@@ -223,6 +284,7 @@ jobs:
       - setup
       - self-host
       - ghpages-deploy
+      - cfpages-deploy
     steps:
       - name: Download latest build artifacts
         uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
@@ -265,5 +327,8 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # 2.4.0
 
-      - name: Remove deploy branch
-        run: git push origin --delete deploy-$_TAG_VERSION
+      - name: Remove gh-pages-deploy branch
+        run: git push origin --delete gh-pages-deploy-$_TAG_VERSION
+
+      - name: Remove cf-pages-deploy branch
+        run: git push origin --delete cf-pages-deploy-$_TAG_VERSION

CONTRIBUTING.md

@@ -10,7 +10,7 @@ Here is how you can get involved:
 - **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
 - **Report a bug or submit a bugfix:** Use Github issues and pull requests
 - **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
-- **Help other users:** Go to the [User-to-User Support category](https://community.bitwarden.com/c/support/) on the Community Forums
+- **Help other users:** Go to the [Ask the Bitwarden Community category](https://community.bitwarden.com/c/support/) on the Community Forums
 - **Translate:** See the localization (l10n) section below
 
 ## Contributor Agreement
@@ -31,6 +31,6 @@ We use a translation tool called [Crowdin](https://crowdin.com) to help manage o
 
 If you are interested in helping translate the Bitwarden web vault into another language (or make a translation correction), please register an account at Crowdin and join our project here: https://crowdin.com/project/bitwarden-web
 
-If the language that you are interested in translating is not already listed, create a new account on Crowdin, join the project, and contact the project owner (https://crowdin.com/profile/kspearrin).
+If the language that you are interested in translating is not already listed, create a new account on Crowdin, join the project, and contact the project owner (https://crowdin.com/profile/dwbit).
 
 You can read Crowdin's getting started guide for translators here: https://support.crowdin.com/crowdin-intro/

README.md

@@ -1,3 +1,9 @@
+> **Repository Reorganization in Progress**
+>
+> We are currently migrating some projects over to a mono repository. For existing PR's we will be providing documentation on how to move/migrate them. To minimize the overhead we are actively reviewing open PRs. If possible please ensure any pending comments are resolved as soon as possible.
+>
+> New pull requests created during this transition period may not get addressed —if needed, please create a new PR after the reorganization is complete.
+
 <p align="center">
     <img src="https://raw.githubusercontent.com/bitwarden/brand/master/screenshots/web-vault-macbook.png" alt="" width="600" height="358" />
 </p>

bitwarden_license/src/app/app.module.ts

@@ -1,11 +1,12 @@
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { OverlayModule } from "@angular/cdk/overlay";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { RouterModule } from "@angular/router";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 
-import { BitwardenToastModule } from "jslib-angular/components/toastr.component";
+import { JslibModule } from "jslib-angular/jslib.module";
 
 import { OssRoutingModule } from "src/app/oss-routing.module";
 import { OssModule } from "src/app/oss.module";
@@ -20,28 +21,25 @@ import { MaximumVaultTimeoutPolicyComponent } from "./policies/maximum-vault-tim
 
 @NgModule({
   imports: [
+    OverlayModule,
     OssModule,
+    JslibModule,
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
     ServicesModule,
-    BitwardenToastModule.forRoot({
-      maxOpened: 5,
-      autoDismiss: true,
-      closeButton: true,
-    }),
     InfiniteScrollModule,
     DragDropModule,
     AppRoutingModule,
     OssRoutingModule,
-    OrganizationsModule,
+    OrganizationsModule, // Must be after OssRoutingModule for competing routes to resolve properly
     RouterModule,
     WildcardRoutingModule, // Needs to be last to catch all non-existing routes
   ],
   declarations: [
     AppComponent,
-    MaximumVaultTimeoutPolicyComponent,
     DisablePersonalVaultExportPolicyComponent,
+    MaximumVaultTimeoutPolicyComponent,
   ],
   bootstrap: [AppComponent],
 })

bitwarden_license/src/app/organizations/organizations-routing.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
-import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
+import { AuthGuard } from "jslib-angular/guards/auth.guard";
 import { Permissions } from "jslib-common/enums/permissions";
 
-import { OrganizationLayoutComponent } from "src/app/layouts/organization-layout.component";
+import { PermissionsGuard } from "src/app/organizations/guards/permissions.guard";
+import { OrganizationLayoutComponent } from "src/app/organizations/layouts/organization-layout.component";
 import { ManageComponent } from "src/app/organizations/manage/manage.component";
-import { OrganizationGuardService } from "src/app/services/organization-guard.service";
-import { OrganizationTypeGuardService } from "src/app/services/organization-type-guard.service";
+import { NavigationPermissionsService } from "src/app/organizations/services/navigation-permissions.service";
 
 import { SsoComponent } from "./manage/sso.component";
 
@@ -15,30 +15,23 @@ const routes: Routes = [
   {
     path: "organizations/:organizationId",
     component: OrganizationLayoutComponent,
-    canActivate: [AuthGuardService, OrganizationGuardService],
+    canActivate: [AuthGuard, PermissionsGuard],
     children: [
       {
         path: "manage",
         component: ManageComponent,
-        canActivate: [OrganizationTypeGuardService],
+        canActivate: [PermissionsGuard],
         data: {
-          permissions: [
-            Permissions.CreateNewCollections,
-            Permissions.EditAnyCollection,
-            Permissions.DeleteAnyCollection,
-            Permissions.EditAssignedCollections,
-            Permissions.DeleteAssignedCollections,
-            Permissions.AccessEventLogs,
-            Permissions.ManageGroups,
-            Permissions.ManageUsers,
-            Permissions.ManagePolicies,
-            Permissions.ManageSso,
-          ],
+          permissions: NavigationPermissionsService.getPermissions("manage"),
         },
         children: [
           {
             path: "sso",
             component: SsoComponent,
+            canActivate: [PermissionsGuard],
+            data: {
+              permissions: [Permissions.ManageSso],
+            },
           },
         ],
       },

bitwarden_license/src/app/organizations/organizations.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
-import { OssModule } from "src/app/oss.module";
+import { JslibModule } from "jslib-angular/jslib.module";
 
 import { InputCheckboxComponent } from "./components/input-checkbox.component";
 import { InputTextReadOnlyComponent } from "./components/input-text-readonly.component";
@@ -14,7 +14,13 @@ import { OrganizationsRoutingModule } from "./organizations-routing.module";
 // Form components are for use in the SSO Configuration Form only and should not be exported for use elsewhere.
 // They will be deprecated by the Component Library.
 @NgModule({
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, OssModule, OrganizationsRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    JslibModule,
+    OrganizationsRoutingModule,
+  ],
   declarations: [
     InputCheckboxComponent,
     InputTextComponent,

bitwarden_license/src/app/providers/guards/provider-type.guard.ts

@@ -5,7 +5,7 @@ import { ProviderService } from "jslib-common/abstractions/provider.service";
 import { Permissions } from "jslib-common/enums/permissions";
 
 @Injectable()
-export class ProviderTypeGuardService implements CanActivate {
+export class PermissionsGuard implements CanActivate {
   constructor(private providerService: ProviderService, private router: Router) {}
 
   async canActivate(route: ActivatedRouteSnapshot) {

bitwarden_license/src/app/providers/guards/provider.guard.ts

@@ -6,7 +6,7 @@ import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.se
 import { ProviderService } from "jslib-common/abstractions/provider.service";
 
 @Injectable()
-export class ProviderGuardService implements CanActivate {
+export class ProviderGuard implements CanActivate {
   constructor(
     private router: Router,
     private platformUtilsService: PlatformUtilsService,

bitwarden_license/src/app/providers/manage/accept-provider.component.html

@@ -24,7 +24,11 @@
           <p>{{ "joinProviderDesc" | i18n }}</p>
           <hr />
           <div class="d-flex">
-            <a routerLink="/" [queryParams]="{ email: email }" class="btn btn-primary btn-block">
+            <a
+              routerLink="/login"
+              [queryParams]="{ email: email }"
+              class="btn btn-primary btn-block"
+            >
               {{ "logIn" | i18n }}
             </a>
             <a

bitwarden_license/src/app/providers/providers-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
-import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
+import { AuthGuard } from "jslib-angular/guards/auth.guard";
 import { Permissions } from "jslib-common/enums/permissions";
 
 import { FrontendLayoutComponent } from "src/app/layouts/frontend-layout.component";
@@ -9,13 +9,13 @@ import { ProvidersComponent } from "src/app/providers/providers.component";
 
 import { ClientsComponent } from "./clients/clients.component";
 import { CreateOrganizationComponent } from "./clients/create-organization.component";
+import { PermissionsGuard } from "./guards/provider-type.guard";
+import { ProviderGuard } from "./guards/provider.guard";
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { EventsComponent } from "./manage/events.component";
 import { ManageComponent } from "./manage/manage.component";
 import { PeopleComponent } from "./manage/people.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
-import { ProviderGuardService } from "./services/provider-guard.service";
-import { ProviderTypeGuardService } from "./services/provider-type-guard.service";
 import { AccountComponent } from "./settings/account.component";
 import { SettingsComponent } from "./settings/settings.component";
 import { SetupProviderComponent } from "./setup/setup-provider.component";
@@ -24,7 +24,7 @@ import { SetupComponent } from "./setup/setup.component";
 const routes: Routes = [
   {
     path: "",
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
     component: ProvidersComponent,
   },
   {
@@ -45,7 +45,7 @@ const routes: Routes = [
   },
   {
     path: "",
-    canActivate: [AuthGuardService],
+    canActivate: [AuthGuard],
     children: [
       {
         path: "setup",
@@ -54,7 +54,7 @@ const routes: Routes = [
       {
         path: ":providerId",
         component: ProvidersLayoutComponent,
-        canActivate: [ProviderGuardService],
+        canActivate: [ProviderGuard],
         children: [
           { path: "", pathMatch: "full", redirectTo: "clients" },
           { path: "clients/create", component: CreateOrganizationComponent },
@@ -71,7 +71,7 @@ const routes: Routes = [
               {
                 path: "people",
                 component: PeopleComponent,
-                canActivate: [ProviderTypeGuardService],
+                canActivate: [PermissionsGuard],
                 data: {
                   titleId: "people",
                   permissions: [Permissions.ManageUsers],
@@ -80,7 +80,7 @@ const routes: Routes = [
               {
                 path: "events",
                 component: EventsComponent,
-                canActivate: [ProviderTypeGuardService],
+                canActivate: [PermissionsGuard],
                 data: {
                   titleId: "eventLogs",
                   permissions: [Permissions.AccessEventLogs],
@@ -100,7 +100,7 @@ const routes: Routes = [
               {
                 path: "account",
                 component: AccountComponent,
-                canActivate: [ProviderTypeGuardService],
+                canActivate: [PermissionsGuard],
                 data: {
                   titleId: "myProvider",
                   permissions: [Permissions.ManageProvider],

bitwarden_license/src/app/providers/providers.module.ts

@@ -1,14 +1,15 @@
-import { CommonModule } from "@angular/common";
 import { ComponentFactoryResolver, NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
 
 import { ModalService } from "jslib-angular/services/modal.service";
 
-import { OssModule } from "src/app/oss.module";
+import { LayoutsModule } from "src/app/layouts/layouts.module";
+import { SharedModule } from "src/app/modules/shared.module";
 
 import { AddOrganizationComponent } from "./clients/add-organization.component";
 import { ClientsComponent } from "./clients/clients.component";
 import { CreateOrganizationComponent } from "./clients/create-organization.component";
+import { PermissionsGuard } from "./guards/provider-type.guard";
+import { ProviderGuard } from "./guards/provider.guard";
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { BulkConfirmComponent } from "./manage/bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./manage/bulk/bulk-remove.component";
@@ -18,8 +19,6 @@ import { PeopleComponent } from "./manage/people.component";
 import { UserAddEditComponent } from "./manage/user-add-edit.component";
 import { ProvidersLayoutComponent } from "./providers-layout.component";
 import { ProvidersRoutingModule } from "./providers-routing.module";
-import { ProviderGuardService } from "./services/provider-guard.service";
-import { ProviderTypeGuardService } from "./services/provider-type-guard.service";
 import { WebProviderService } from "./services/webProvider.service";
 import { AccountComponent } from "./settings/account.component";
 import { SettingsComponent } from "./settings/settings.component";
@@ -27,7 +26,7 @@ import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, OssModule, ProvidersRoutingModule],
+  imports: [SharedModule, LayoutsModule, ProvidersRoutingModule],
   declarations: [
     AcceptProviderComponent,
     AccountComponent,
@@ -45,7 +44,7 @@ import { SetupComponent } from "./setup/setup.component";
     SetupProviderComponent,
     UserAddEditComponent,
   ],
-  providers: [WebProviderService, ProviderGuardService, ProviderTypeGuardService],
+  providers: [WebProviderService, ProviderGuard, PermissionsGuard],
 })
 export class ProvidersModule {
   constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {

bitwarden_license/src/app/providers/setup/setup-provider.component.html

@@ -20,7 +20,11 @@
           <p>{{ "setupProviderLoginDesc" | i18n }}</p>
           <hr />
           <div class="d-flex">
-            <a routerLink="/" [queryParams]="{ email: email }" class="btn btn-primary btn-block">
+            <a
+              routerLink="/login"
+              [queryParams]="{ email: email }"
+              class="btn btn-primary btn-block"
+            >
               {{ "logIn" | i18n }}
             </a>
           </div>

config/base.json

@@ -7,6 +7,7 @@
     "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
   },
   "dev": {
+    "port": 8080,
     "allowedHosts": "auto"
   }
 }

config/selfhosted.json

@@ -1 +1,9 @@
-{}
+{
+  "dev": {
+    "proxyApi": "http://localhost:4001",
+    "proxyIdentity": "http://localhost:33657",
+    "proxyEvents": "http://localhost:46274",
+    "proxyNotifications": "http://localhost:61841",
+    "port": 8081
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2.27.0",
+  "version": "2022.05.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -90,7 +90,7 @@
     "@bitwarden/jslib-angular": "file:jslib/angular",
     "@bitwarden/jslib-common": "file:jslib/common",
     "bootstrap": "4.6.0",
-    "braintree-web-drop-in": "1.30.1",
+    "braintree-web-drop-in": "1.33.1",
     "browser-hrtime": "^1.1.8",
     "core-js": "^3.11.0",
     "date-input-polyfill": "^2.14.0",
@@ -98,7 +98,7 @@
     "jszip": "^3.7.1",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-toastr": "14.1.4",
-    "node-forge": "^0.10.0",
+    "node-forge": "^1.3.1",
     "popper.js": "1.16.1",
     "qrious": "4.0.2",
     "rxjs": "^7.4.0",

src/app/accounts/accept-emergency.component.html

@@ -23,7 +23,11 @@
           <p>{{ "acceptEmergencyAccess" | i18n }}</p>
           <hr />
           <div class="d-flex">
-            <a routerLink="/" [queryParams]="{ email: email }" class="btn btn-primary btn-block">
+            <a
+              routerLink="/login"
+              [queryParams]="{ email: email }"
+              class="btn btn-primary btn-block"
+            >
               {{ "logIn" | i18n }}
             </a>
             <a

src/app/accounts/accept-organization.component.html

@@ -24,7 +24,11 @@
           <p>{{ "joinOrganizationDesc" | i18n }}</p>
           <hr />
           <div class="d-flex">
-            <a routerLink="/" [queryParams]="{ email: email }" class="btn btn-primary btn-block">
+            <a
+              routerLink="/login"
+              [queryParams]="{ email: email }"
+              class="btn btn-primary btn-block"
+            >
               {{ "logIn" | i18n }}
             </a>
             <a

src/app/accounts/hint.component.html

@@ -33,7 +33,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/accounts/lock.component.ts

@@ -55,10 +55,10 @@ export class LockComponent extends BaseLockComponent {
     await super.ngOnInit();
     this.onSuccessfulSubmit = async () => {
       const previousUrl = this.routerService.getPreviousUrl();
-      if (previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
+      if (previousUrl && previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
         this.successRoute = previousUrl;
       }
-      this.router.navigate([this.successRoute]);
+      this.router.navigateByUrl(this.successRoute);
     };
   }
 }

src/app/accounts/login.component.ts

@@ -20,6 +20,7 @@ import { ListResponse } from "jslib-common/models/response/listResponse";
 import { PolicyResponse } from "jslib-common/models/response/policyResponse";
 
 import { StateService } from "../../abstractions/state.service";
+import { RouterService } from "../services/router.service";
 
 @Component({
   selector: "app-login",
@@ -44,7 +45,8 @@ export class LoginComponent extends BaseLoginComponent {
     logService: LogService,
     ngZone: NgZone,
     protected stateService: StateService,
-    private messagingService: MessagingService
+    private messagingService: MessagingService,
+    private routerService: RouterService
   ) {
     super(
       authService,
@@ -70,21 +72,20 @@ export class LoginComponent extends BaseLoginComponent {
         this.email = qParams.email;
       }
       if (qParams.premium != null) {
-        this.stateService.setLoginRedirect({ route: "/settings/premium" });
+        this.routerService.setPreviousUrl("/settings/premium");
       } else if (qParams.org != null) {
-        this.stateService.setLoginRedirect({
-          route: "/settings/create-organization",
-          qParams: { plan: qParams.org },
+        const route = this.router.createUrlTree(["create-organization"], {
+          queryParams: { plan: qParams.org },
         });
+        this.routerService.setPreviousUrl(route.toString());
       }
 
       // Are they coming from an email for sponsoring a families organization
       if (qParams.sponsorshipToken != null) {
-        // After logging in redirect them to setup the families sponsorship
-        this.stateService.setLoginRedirect({
-          route: "/setup/families-for-enterprise",
-          qParams: { token: qParams.sponsorshipToken },
+        const route = this.router.createUrlTree(["setup/families-for-enterprise"], {
+          queryParams: { token: qParams.sponsorshipToken },
         });
+        this.routerService.setPreviousUrl(route.toString());
       }
       await super.ngOnInit();
       this.rememberEmail = await this.stateService.getRememberEmail();
@@ -145,10 +146,9 @@ export class LoginComponent extends BaseLoginComponent {
       }
     }
 
-    const loginRedirect = await this.stateService.getLoginRedirect();
-    if (loginRedirect != null) {
-      this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
-      await this.stateService.setLoginRedirect(null);
+    const previousUrl = this.routerService.getPreviousUrl();
+    if (previousUrl) {
+      this.router.navigateByUrl(previousUrl);
     } else {
       this.router.navigate([this.successRoute]);
     }

src/app/accounts/recover-delete.component.html

@@ -33,7 +33,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/accounts/recover-two-factor.component.html

@@ -65,7 +65,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/accounts/register.component.html

@@ -101,7 +101,7 @@
       <div [ngClass]="{ 'col-5': layout, 'col-12': !layout }">
         <div class="row justify-content-md-center mt-5">
           <div [ngClass]="{ 'col-5': !layout, 'col-12': layout }">
-            <p class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</p>
+            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
             <div class="card d-block">
               <div class="card-body">
                 <app-callout
@@ -258,7 +258,7 @@
                       aria-hidden="true"
                     ></i>
                   </button>
-                  <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                  <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                     {{ "cancel" | i18n }}
                   </a>
                 </div>

src/app/accounts/register.component.ts

@@ -18,6 +18,8 @@ import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPa
 import { Policy } from "jslib-common/models/domain/policy";
 import { ReferenceEventRequest } from "jslib-common/models/request/referenceEventRequest";
 
+import { RouterService } from "../services/router.service";
+
 @Component({
   selector: "app-register",
   templateUrl: "register.component.html",
@@ -41,7 +43,8 @@ export class RegisterComponent extends BaseRegisterComponent {
     passwordGenerationService: PasswordGenerationService,
     private policyService: PolicyService,
     environmentService: EnvironmentService,
-    logService: LogService
+    logService: LogService,
+    private routerService: RouterService
   ) {
     super(
       authService,
@@ -64,14 +67,14 @@ export class RegisterComponent extends BaseRegisterComponent {
         this.email = qParams.email;
       }
       if (qParams.premium != null) {
-        this.stateService.setLoginRedirect({ route: "/settings/premium" });
+        this.routerService.setPreviousUrl("/settings/premium");
       } else if (qParams.org != null) {
         this.showCreateOrgMessage = true;
         this.referenceData.flow = qParams.org;
-        this.stateService.setLoginRedirect({
-          route: "/settings/create-organization",
-          qParams: { plan: qParams.org },
+        const route = this.router.createUrlTree(["create-organization"], {
+          queryParams: { plan: qParams.org },
         });
+        this.routerService.setPreviousUrl(route.toString());
       }
       if (qParams.layout != null) {
         this.layout = this.referenceData.layout = qParams.layout;
@@ -88,10 +91,10 @@ export class RegisterComponent extends BaseRegisterComponent {
       // Are they coming from an email for sponsoring a families organization
       if (qParams.sponsorshipToken != null) {
         // After logging in redirect them to setup the families sponsorship
-        this.stateService.setLoginRedirect({
-          route: "/setup/families-for-enterprise",
-          qParams: { token: qParams.sponsorshipToken },
+        const route = this.router.createUrlTree(["setup/families-for-enterprise"], {
+          queryParams: { plan: qParams.sponsorshipToken },
         });
+        this.routerService.setPreviousUrl(route.toString());
       }
       if (this.referenceData.id === "") {
         this.referenceData.id = null;

src/app/accounts/sso.component.html

@@ -41,7 +41,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/accounts/two-factor.component.html

@@ -138,7 +138,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/accounts/two-factor.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from "@angular/router";
 import { TwoFactorComponent as BaseTwoFactorComponent } from "jslib-angular/components/two-factor.component";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
+import { AppIdService } from "jslib-common/abstractions/appId.service";
 import { AuthService } from "jslib-common/abstractions/auth.service";
 import { EnvironmentService } from "jslib-common/abstractions/environment.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -13,6 +14,8 @@ import { StateService } from "jslib-common/abstractions/state.service";
 import { TwoFactorService } from "jslib-common/abstractions/twoFactor.service";
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
 
+import { RouterService } from "../services/router.service";
+
 import { TwoFactorOptionsComponent } from "./two-factor-options.component";
 
 @Component({
@@ -34,7 +37,9 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     private modalService: ModalService,
     route: ActivatedRoute,
     logService: LogService,
-    twoFactorService: TwoFactorService
+    twoFactorService: TwoFactorService,
+    appIdService: AppIdService,
+    private routerService: RouterService
   ) {
     super(
       authService,
@@ -47,7 +52,8 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       stateService,
       route,
       logService,
-      twoFactorService
+      twoFactorService,
+      appIdService
     );
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
   }
@@ -70,10 +76,9 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
   }
 
   async goAfterLogIn() {
-    const loginRedirect = await this.stateService.getLoginRedirect();
-    if (loginRedirect != null) {
-      this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
-      await this.stateService.setLoginRedirect(null);
+    const previousUrl = this.routerService.getPreviousUrl();
+    if (previousUrl) {
+      this.router.navigateByUrl(previousUrl);
     } else {
       this.router.navigate([this.successRoute], {
         queryParams: {

src/app/accounts/verify-recover-delete.component.html

@@ -23,7 +23,7 @@
                 aria-hidden="true"
               ></i>
             </button>
-            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
               {{ "cancel" | i18n }}
             </a>
           </div>

src/app/app.component.ts

@@ -91,11 +91,17 @@ export class AppComponent implements OnDestroy, OnInit {
       this.ngZone.run(async () => {
         switch (message.command) {
           case "loggedIn":
+            this.notificationsService.updateConnection(false);
+            break;
           case "loggedOut":
+            this.routerService.setPreviousUrl(null);
+            this.notificationsService.updateConnection(false);
+            break;
           case "unlocked":
             this.notificationsService.updateConnection(false);
             break;
           case "authBlocked":
+            this.routerService.setPreviousUrl(message.url);
             this.router.navigate(["/"]);
             break;
           case "logout":
@@ -109,7 +115,7 @@ export class AppComponent implements OnDestroy, OnInit {
             this.router.navigate(["lock"]);
             break;
           case "lockedUrl":
-            window.setTimeout(() => this.routerService.setPreviousUrl(message.url), 500);
+            this.routerService.setPreviousUrl(message.url);
             break;
           case "syncStarted":
             break;

src/app/app.module.ts

@@ -4,8 +4,6 @@ import { FormsModule } from "@angular/forms";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 
-import { BitwardenToastModule } from "jslib-angular/components/toastr.component";
-
 import { AppComponent } from "./app.component";
 import { OssRoutingModule } from "./oss-routing.module";
 import { OssModule } from "./oss.module";
@@ -18,11 +16,6 @@ import { WildcardRoutingModule } from "./wildcard-routing.module";
     BrowserAnimationsModule,
     FormsModule,
     ServicesModule,
-    BitwardenToastModule.forRoot({
-      maxOpened: 5,
-      autoDismiss: true,
-      closeButton: true,
-    }),
     InfiniteScrollModule,
     DragDropModule,
     OssRoutingModule,

src/app/common/base.accept.component.ts

@@ -30,7 +30,6 @@ export abstract class BaseAcceptComponent implements OnInit {
 
   ngOnInit() {
     this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-      await this.stateService.setLoginRedirect(null);
       let error = this.requiredParameters.some((e) => qParams?.[e] == null || qParams[e] === "");
       let errorMessage: string = null;
       if (!error) {
@@ -44,11 +43,6 @@ export abstract class BaseAcceptComponent implements OnInit {
             errorMessage = e.message;
           }
         } else {
-          await this.stateService.setLoginRedirect({
-            route: this.getRedirectRoute(),
-            qParams: qParams,
-          });
-
           this.email = qParams.email;
           await this.unauthedHandler(qParams);
         }
@@ -66,10 +60,4 @@ export abstract class BaseAcceptComponent implements OnInit {
       this.loading = false;
     });
   }
-
-  getRedirectRoute() {
-    const urlTree = this.router.parseUrl(this.router.url);
-    urlTree.queryParams = {};
-    return urlTree.toString();
-  }
 }

src/app/common/base.events.component.ts

@@ -122,17 +122,20 @@ export abstract class BaseEventsComponent {
         const userId = r.actingUserId == null ? r.userId : r.actingUserId;
         const eventInfo = await this.eventService.getEventInfo(r);
         const user = this.getUserName(r, userId);
+        const userName = user != null ? user.name : this.i18nService.t("unknown");
+
         return new EventView({
           message: eventInfo.message,
           humanReadableMessage: eventInfo.humanReadableMessage,
           appIcon: eventInfo.appIcon,
           appName: eventInfo.appName,
           userId: userId,
-          userName: user != null ? user.name : this.i18nService.t("unknown"),
+          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
           userEmail: user != null ? user.email : "",
           date: r.date,
           ip: r.ipAddress,
           type: r.type,
+          installationId: r.installationId,
         });
       })
     );

src/app/components/premium-badge.component.ts

@@ -0,0 +1,19 @@
+import { Component } from "@angular/core";
+
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+
+@Component({
+  selector: "app-premium-badge",
+  template: `
+    <button *appNotPremium bit-badge badgeType="success" (click)="premiumRequired()">
+      {{ "premium" | i18n }}
+    </button>
+  `,
+})
+export class PremiumBadgeComponent {
+  constructor(private messagingService: MessagingService) {}
+
+  premiumRequired() {
+    this.messagingService.send("premiumRequired");
+  }
+}

src/app/guards/home.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
+
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { AuthenticationStatus } from "jslib-common/enums/authenticationStatus";
+
+@Injectable()
+export class HomeGuard implements CanActivate {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  async canActivate(route: ActivatedRouteSnapshot) {
+    const authStatus = await this.authService.getAuthStatus();
+
+    if (authStatus === AuthenticationStatus.LoggedOut) {
+      return this.router.createUrlTree(["/login"], { queryParams: route.queryParams });
+    }
+    if (authStatus === AuthenticationStatus.Locked) {
+      return this.router.createUrlTree(["/lock"], { queryParams: route.queryParams });
+    }
+    return this.router.createUrlTree(["/vault"], { queryParams: route.queryParams });
+  }
+}

src/app/layouts/footer.component.html

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

src/app/layouts/frontend-layout.component.html

@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  &copy; {{ year }}, Bitwarden Inc. <br />
+  &copy; {{ year }} Bitwarden Inc. <br />
   {{ "versionNumber" | i18n: version }}
 </div>

src/app/layouts/layouts.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+
+import { FooterComponent } from "../layouts/footer.component";
+import { FrontendLayoutComponent } from "../layouts/frontend-layout.component";
+import { NavbarComponent } from "../layouts/navbar.component";
+import { SharedModule } from "../modules/shared.module";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [NavbarComponent, FooterComponent, FrontendLayoutComponent],
+  exports: [NavbarComponent, FooterComponent],
+})
+export class LayoutsModule {}

src/app/layouts/navbar.component.html

@@ -6,11 +6,22 @@
     <div class="collapse navbar-collapse">
       <ul class="navbar-nav">
         <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="/vault">{{ "myVault" | i18n }}</a>
+          <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.length >= 1" class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['/organizations', organizations[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]">{{
@@ -21,28 +32,24 @@
             <a class="nav-link" routerLink="/providers">{{ "provider" | i18n }}</a>
           </li>
         </ng-container>
-        <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="/settings">{{ "settings" | i18n }}</a>
-        </li>
       </ul>
     </div>
     <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
-      <li class="nav-item dropdown">
-        <a
-          class="nav-item nav-link dropdown-toggle"
-          href="#"
-          id="nav-profile"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
+      <li>
+        <button
+          [bitMenuTriggerFor]="accountMenu"
+          class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
-        </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
-          <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
+          <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
+        </button>
+        <bit-menu class="dropdown-menu" #accountMenu>
+          <div class="tw-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col">
+            <div
+              class="tw-flex tw-items-center tw-leading-tight tw-text-info tw-py-1 tw-px-4"
+              *ngIf="name"
+              appStopProp
+            >
               <app-avatar
                 [data]="name"
                 [email]="email"
@@ -50,44 +57,37 @@
                 fontSize="14"
                 [circle]="true"
               ></app-avatar>
-            <div class="ml-2 overflow-hidden">
+              <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                 <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="text-muted">{{ name }}</small>
+                <small class="tw-text-muted tw-block tw-overflow-hidden tw-whitespace-nowrap">{{
+                  name
+                }}</small>
               </div>
             </div>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#" routerLink="/settings/account">
+            <bit-menu-divider></bit-menu-divider>
+            <a bit-menu-item routerLink="/settings/account">
               <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-            {{ "myAccount" | i18n }}
+              {{ "accountSettings" | i18n }}
             </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/help/"
-            target="_blank"
-            rel="noopener"
-          >
+            <a bit-menu-item href="https://bitwarden.com/help/" target="_blank" rel="noopener">
               <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
               {{ "getHelp" | i18n }}
             </a>
-          <a
-            class="dropdown-item"
-            href="https://bitwarden.com/download/"
-            target="_blank"
-            rel="noopener"
-          >
+            <a bit-menu-item href="https://bitwarden.com/download/" target="_blank" rel="noopener">
               <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
               {{ "getApps" | i18n }}
             </a>
-          <div class="dropdown-divider"></div>
-          <button type="button" class="dropdown-item" (click)="lock()">
+            <bit-menu-divider></bit-menu-divider>
+            <button bit-menu-item type="button" (click)="lock()">
               <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
               {{ "lockNow" | i18n }}
             </button>
-          <button type="button" class="dropdown-item" (click)="logOut()">
+            <button bit-menu-item 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>

src/app/layouts/navbar.component.ts

@@ -1,12 +1,19 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, NgZone, OnInit } from "@angular/core";
 
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { ProviderService } from "jslib-common/abstractions/provider.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { TokenService } from "jslib-common/abstractions/token.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
 import { Provider } from "jslib-common/models/domain/provider";
 
+import { NavigationPermissionsService as OrgNavigationPermissionsService } from "../organizations/services/navigation-permissions.service";
+
 @Component({
   selector: "app-navbar",
   templateUrl: "navbar.component.html",
@@ -16,13 +23,18 @@ export class NavbarComponent implements OnInit {
   name: string;
   email: string;
   providers: Provider[] = [];
+  organizations: Organization[] = [];
 
   constructor(
     private messagingService: MessagingService,
     private platformUtilsService: PlatformUtilsService,
     private tokenService: TokenService,
     private providerService: ProviderService,
-    private syncService: SyncService
+    private syncService: SyncService,
+    private organizationService: OrganizationService,
+    private i18nService: I18nService,
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone
   ) {
     this.selfHosted = this.platformUtilsService.isSelfHost();
   }
@@ -34,11 +46,32 @@ export class NavbarComponent implements OnInit {
       this.name = this.email;
     }
 
-    // Ensure provides are loaded
+    // 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 = await this.buildOrganizations();
+
+    this.broadcasterService.subscribe(this.constructor.name, async (message: any) => {
+      this.ngZone.run(async () => {
+        switch (message.command) {
+          case "organizationCreated":
+            if (this.organizations.length < 1) {
+              this.organizations = await this.buildOrganizations();
+            }
+            break;
+        }
+      });
+    });
+  }
+
+  async buildOrganizations() {
+    const allOrgs = await this.organizationService.getAll();
+    return allOrgs
+      .filter((org) => OrgNavigationPermissionsService.canAccessAdmin(org))
+      .sort(Utils.getSortFunction(this.i18nService, "name"));
   }
 
   lock() {

src/app/modules/loose-components.module.ts

@@ -0,0 +1,320 @@
+import { NgModule } from "@angular/core";
+
+import { UserVerificationComponent } from "jslib-angular/components/user-verification.component";
+
+import { AcceptEmergencyComponent } from "../accounts/accept-emergency.component";
+import { AcceptOrganizationComponent } from "../accounts/accept-organization.component";
+import { HintComponent } from "../accounts/hint.component";
+import { LockComponent } from "../accounts/lock.component";
+import { LoginComponent } from "../accounts/login.component";
+import { RecoverDeleteComponent } from "../accounts/recover-delete.component";
+import { RecoverTwoFactorComponent } from "../accounts/recover-two-factor.component";
+import { RegisterComponent } from "../accounts/register.component";
+import { RemovePasswordComponent } from "../accounts/remove-password.component";
+import { SetPasswordComponent } from "../accounts/set-password.component";
+import { SsoComponent } from "../accounts/sso.component";
+import { TwoFactorOptionsComponent } from "../accounts/two-factor-options.component";
+import { TwoFactorComponent } from "../accounts/two-factor.component";
+import { UpdatePasswordComponent } from "../accounts/update-password.component";
+import { UpdateTempPasswordComponent } from "../accounts/update-temp-password.component";
+import { VerifyEmailTokenComponent } from "../accounts/verify-email-token.component";
+import { VerifyRecoverDeleteComponent } from "../accounts/verify-recover-delete.component";
+import { NestedCheckboxComponent } from "../components/nested-checkbox.component";
+import { PasswordRepromptComponent } from "../components/password-reprompt.component";
+import { PremiumBadgeComponent } from "../components/premium-badge.component";
+import { LayoutsModule } from "../layouts/layouts.module";
+import { UserLayoutComponent } from "../layouts/user-layout.component";
+import { ProvidersComponent } from "../providers/providers.component";
+import { BreachReportComponent } from "../reports/breach-report.component";
+import { ExposedPasswordsReportComponent } from "../reports/exposed-passwords-report.component";
+import { InactiveTwoFactorReportComponent } from "../reports/inactive-two-factor-report.component";
+import { ReportCardComponent } from "../reports/report-card.component";
+import { ReportListComponent } from "../reports/report-list.component";
+import { ReportsComponent } from "../reports/reports.component";
+import { ReusedPasswordsReportComponent } from "../reports/reused-passwords-report.component";
+import { UnsecuredWebsitesReportComponent } from "../reports/unsecured-websites-report.component";
+import { WeakPasswordsReportComponent } from "../reports/weak-passwords-report.component";
+import { AccessComponent } from "../send/access.component";
+import { AddEditComponent as SendAddEditComponent } from "../send/add-edit.component";
+import { EffluxDatesComponent as SendEffluxDatesComponent } from "../send/efflux-dates.component";
+import { SendComponent } from "../send/send.component";
+import { AccountComponent } from "../settings/account.component";
+import { AddCreditComponent } from "../settings/add-credit.component";
+import { AdjustPaymentComponent } from "../settings/adjust-payment.component";
+import { AdjustStorageComponent } from "../settings/adjust-storage.component";
+import { ApiKeyComponent } from "../settings/api-key.component";
+import { BillingSyncKeyComponent } from "../settings/billing-sync-key.component";
+import { ChangeEmailComponent } from "../settings/change-email.component";
+import { ChangeKdfComponent } from "../settings/change-kdf.component";
+import { ChangePasswordComponent } from "../settings/change-password.component";
+import { CreateOrganizationComponent } from "../settings/create-organization.component";
+import { DeauthorizeSessionsComponent } from "../settings/deauthorize-sessions.component";
+import { DeleteAccountComponent } from "../settings/delete-account.component";
+import { DomainRulesComponent } from "../settings/domain-rules.component";
+import { EmergencyAccessAddEditComponent } from "../settings/emergency-access-add-edit.component";
+import { EmergencyAccessAttachmentsComponent } from "../settings/emergency-access-attachments.component";
+import { EmergencyAccessConfirmComponent } from "../settings/emergency-access-confirm.component";
+import { EmergencyAccessTakeoverComponent } from "../settings/emergency-access-takeover.component";
+import { EmergencyAccessViewComponent } from "../settings/emergency-access-view.component";
+import { EmergencyAccessComponent } from "../settings/emergency-access.component";
+import { EmergencyAddEditComponent } from "../settings/emergency-add-edit.component";
+import { PaymentMethodComponent } from "../settings/payment-method.component";
+import { PreferencesComponent } from "../settings/preferences.component";
+import { PremiumComponent } from "../settings/premium.component";
+import { ProfileComponent } from "../settings/profile.component";
+import { PurgeVaultComponent } from "../settings/purge-vault.component";
+import { SecurityKeysComponent } from "../settings/security-keys.component";
+import { SecurityComponent } from "../settings/security.component";
+import { SettingsComponent } from "../settings/settings.component";
+import { SponsoredFamiliesComponent } from "../settings/sponsored-families.component";
+import { SponsoringOrgRowComponent } from "../settings/sponsoring-org-row.component";
+import { SubscriptionComponent } from "../settings/subscription.component";
+import { TaxInfoComponent } from "../settings/tax-info.component";
+import { TwoFactorAuthenticatorComponent } from "../settings/two-factor-authenticator.component";
+import { TwoFactorDuoComponent } from "../settings/two-factor-duo.component";
+import { TwoFactorEmailComponent } from "../settings/two-factor-email.component";
+import { TwoFactorRecoveryComponent } from "../settings/two-factor-recovery.component";
+import { TwoFactorSetupComponent } from "../settings/two-factor-setup.component";
+import { TwoFactorVerifyComponent } from "../settings/two-factor-verify.component";
+import { TwoFactorWebAuthnComponent } from "../settings/two-factor-webauthn.component";
+import { TwoFactorYubiKeyComponent } from "../settings/two-factor-yubikey.component";
+import { UpdateKeyComponent } from "../settings/update-key.component";
+import { UpdateLicenseComponent } from "../settings/update-license.component";
+import { UserBillingHistoryComponent } from "../settings/user-billing-history.component";
+import { UserSubscriptionComponent } from "../settings/user-subscription.component";
+import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
+import { VerifyEmailComponent } from "../settings/verify-email.component";
+import { ExportComponent } from "../tools/export.component";
+import { GeneratorComponent } from "../tools/generator.component";
+import { ImportComponent } from "../tools/import.component";
+import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
+import { ToolsComponent } from "../tools/tools.component";
+import { AddEditCustomFieldsComponent } from "../vault/add-edit-custom-fields.component";
+import { AddEditComponent } from "../vault/add-edit.component";
+import { AttachmentsComponent } from "../vault/attachments.component";
+import { BulkActionsComponent } from "../vault/bulk-actions.component";
+import { BulkDeleteComponent } from "../vault/bulk-delete.component";
+import { BulkMoveComponent } from "../vault/bulk-move.component";
+import { BulkRestoreComponent } from "../vault/bulk-restore.component";
+import { BulkShareComponent } from "../vault/bulk-share.component";
+import { CiphersComponent } from "../vault/ciphers.component";
+import { CollectionsComponent } from "../vault/collections.component";
+import { FolderAddEditComponent } from "../vault/folder-add-edit.component";
+import { ShareComponent } from "../vault/share.component";
+
+import { PipesModule } from "./pipes/pipes.module";
+import { SharedModule } from "./shared.module";
+import { VaultFilterModule } from "./vault-filter/vault-filter.module";
+import { OrganizationBadgeModule } from "./vault/modules/organization-badge/organization-badge.module";
+
+// Please do not add to this list of declarations - we should refactor these into modules when doing so makes sense until there are none left.
+// If you are building new functionality, please create or extend a feature module instead.
+@NgModule({
+  imports: [SharedModule, VaultFilterModule, OrganizationBadgeModule, PipesModule, LayoutsModule],
+  declarations: [
+    PremiumBadgeComponent,
+    AcceptEmergencyComponent,
+    AcceptOrganizationComponent,
+    AccessComponent,
+    AccountComponent,
+    AddCreditComponent,
+    AddEditComponent,
+    AddEditCustomFieldsComponent,
+    AddEditCustomFieldsComponent,
+    AdjustPaymentComponent,
+    AdjustStorageComponent,
+    ApiKeyComponent,
+    AttachmentsComponent,
+    BillingSyncKeyComponent,
+    BreachReportComponent,
+    BulkActionsComponent,
+    BulkDeleteComponent,
+    BulkMoveComponent,
+    BulkRestoreComponent,
+    BulkShareComponent,
+    ChangeEmailComponent,
+    ChangeKdfComponent,
+    ChangePasswordComponent,
+    CiphersComponent,
+    CollectionsComponent,
+    CreateOrganizationComponent,
+    DeauthorizeSessionsComponent,
+    DeleteAccountComponent,
+    DomainRulesComponent,
+    EmergencyAccessAddEditComponent,
+    EmergencyAccessAttachmentsComponent,
+    EmergencyAccessComponent,
+    EmergencyAccessConfirmComponent,
+    EmergencyAccessTakeoverComponent,
+    EmergencyAccessViewComponent,
+    EmergencyAddEditComponent,
+    ExportComponent,
+    ExposedPasswordsReportComponent,
+    FolderAddEditComponent,
+    HintComponent,
+    ImportComponent,
+    InactiveTwoFactorReportComponent,
+    LockComponent,
+    LoginComponent,
+    NestedCheckboxComponent,
+    GeneratorComponent,
+    PasswordGeneratorHistoryComponent,
+    PasswordRepromptComponent,
+    PaymentMethodComponent,
+    PreferencesComponent,
+    PremiumBadgeComponent,
+    PremiumComponent,
+    ProfileComponent,
+    ProvidersComponent,
+    PurgeVaultComponent,
+    RecoverDeleteComponent,
+    RecoverTwoFactorComponent,
+    RegisterComponent,
+    RemovePasswordComponent,
+    ReportCardComponent,
+    ReportListComponent,
+    ReportsComponent,
+    ReusedPasswordsReportComponent,
+    SecurityComponent,
+    SecurityKeysComponent,
+    SendAddEditComponent,
+    SendComponent,
+    SendEffluxDatesComponent,
+    SetPasswordComponent,
+    SettingsComponent,
+    ShareComponent,
+    SponsoredFamiliesComponent,
+    SponsoringOrgRowComponent,
+    SsoComponent,
+    SubscriptionComponent,
+    TaxInfoComponent,
+    ToolsComponent,
+    TwoFactorAuthenticatorComponent,
+    TwoFactorComponent,
+    TwoFactorDuoComponent,
+    TwoFactorEmailComponent,
+    TwoFactorOptionsComponent,
+    TwoFactorRecoveryComponent,
+    TwoFactorSetupComponent,
+    TwoFactorVerifyComponent,
+    TwoFactorWebAuthnComponent,
+    TwoFactorYubiKeyComponent,
+    UnsecuredWebsitesReportComponent,
+    UpdateKeyComponent,
+    UpdateLicenseComponent,
+    UpdatePasswordComponent,
+    UpdateTempPasswordComponent,
+    UserBillingHistoryComponent,
+    UserLayoutComponent,
+    UserSubscriptionComponent,
+    UserVerificationComponent,
+    VaultTimeoutInputComponent,
+    VerifyEmailComponent,
+    VerifyEmailTokenComponent,
+    VerifyRecoverDeleteComponent,
+    WeakPasswordsReportComponent,
+  ],
+  exports: [
+    PremiumBadgeComponent,
+    AcceptEmergencyComponent,
+    AcceptOrganizationComponent,
+    AccessComponent,
+    AccountComponent,
+    AddCreditComponent,
+    AddEditComponent,
+    AddEditCustomFieldsComponent,
+    AddEditCustomFieldsComponent,
+    AdjustPaymentComponent,
+    AdjustStorageComponent,
+    ApiKeyComponent,
+    AttachmentsComponent,
+    BreachReportComponent,
+    BulkActionsComponent,
+    BulkDeleteComponent,
+    BulkMoveComponent,
+    BulkRestoreComponent,
+    BulkShareComponent,
+    ChangeEmailComponent,
+    ChangeKdfComponent,
+    ChangePasswordComponent,
+    CiphersComponent,
+    CollectionsComponent,
+    CreateOrganizationComponent,
+    DeauthorizeSessionsComponent,
+    DeleteAccountComponent,
+    DomainRulesComponent,
+    EmergencyAccessAddEditComponent,
+    EmergencyAccessAttachmentsComponent,
+    EmergencyAccessComponent,
+    EmergencyAccessConfirmComponent,
+    EmergencyAccessTakeoverComponent,
+    EmergencyAccessViewComponent,
+    EmergencyAddEditComponent,
+    ExportComponent,
+    ExposedPasswordsReportComponent,
+    FolderAddEditComponent,
+    HintComponent,
+    ImportComponent,
+    InactiveTwoFactorReportComponent,
+    LockComponent,
+    LoginComponent,
+    NestedCheckboxComponent,
+    GeneratorComponent,
+    PasswordGeneratorHistoryComponent,
+    PasswordRepromptComponent,
+    PaymentMethodComponent,
+    PreferencesComponent,
+    PremiumBadgeComponent,
+    PremiumComponent,
+    ProfileComponent,
+    ProvidersComponent,
+    PurgeVaultComponent,
+    RecoverDeleteComponent,
+    RecoverTwoFactorComponent,
+    RegisterComponent,
+    RemovePasswordComponent,
+    ReportCardComponent,
+    ReportListComponent,
+    ReportsComponent,
+    ReusedPasswordsReportComponent,
+    SecurityComponent,
+    SecurityKeysComponent,
+    SendAddEditComponent,
+    SendComponent,
+    SendEffluxDatesComponent,
+    SetPasswordComponent,
+    SettingsComponent,
+    ShareComponent,
+    SponsoredFamiliesComponent,
+    SponsoringOrgRowComponent,
+    SsoComponent,
+    SubscriptionComponent,
+    TaxInfoComponent,
+    ToolsComponent,
+    TwoFactorAuthenticatorComponent,
+    TwoFactorComponent,
+    TwoFactorDuoComponent,
+    TwoFactorEmailComponent,
+    TwoFactorOptionsComponent,
+    TwoFactorRecoveryComponent,
+    TwoFactorSetupComponent,
+    TwoFactorVerifyComponent,
+    TwoFactorWebAuthnComponent,
+    TwoFactorYubiKeyComponent,
+    UnsecuredWebsitesReportComponent,
+    UpdateKeyComponent,
+    UpdateLicenseComponent,
+    UpdatePasswordComponent,
+    UpdateTempPasswordComponent,
+    UserBillingHistoryComponent,
+    UserLayoutComponent,
+    UserSubscriptionComponent,
+    UserVerificationComponent,
+    VaultTimeoutInputComponent,
+    VerifyEmailComponent,
+    VerifyEmailTokenComponent,
+    VerifyRecoverDeleteComponent,
+    WeakPasswordsReportComponent,
+  ],
+})
+export class LooseComponentsModule {}

src/app/modules/organizations/manage/entity-users.component.html

@@ -29,12 +29,13 @@
         ></i>
         <span class="sr-only">{{ "loading" | i18n }}</span>
       </div>
-      <div
-        class="modal-body"
-        *ngIf="
-          !loading && users && (users | search: searchText:'name':'email':'id') as searchedUsers
-        "
+      <cdk-virtual-scroll-viewport
+        itemSize="46"
+        minBufferPx="600"
+        maxBufferPx="1200"
+        [style]="scrollViewportStyle"
       >
+        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
           <div class="d-flex">
             <div class="mr-3">
               <label class="sr-only" for="search">{{ "search" | i18n }}</label>
@@ -73,8 +74,7 @@
             <hr />
             {{ "noUsersInList" | i18n }}
           </ng-container>
-        <ng-container *ngIf="searchedUsers.length">
-          <table class="table table-hover table-list mb-0">
+          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
             <thead>
               <tr>
                 <th>&nbsp;</th>
@@ -91,7 +91,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let u of searchedUsers">
+              <tr *cdkVirtualFor="let u of searchedUsers" class="">
                 <td class="table-list-checkbox" (click)="check(u)">
                   <input
                     type="checkbox"
@@ -164,8 +164,8 @@
               </tr>
             </tbody>
           </table>
-        </ng-container>
         </div>
+      </cdk-virtual-scroll-viewport>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
           <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>

src/app/modules/organizations/manage/entity-users.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
@@ -13,6 +14,7 @@ import { OrganizationUserUserDetailsResponse } from "jslib-common/models/respons
 @Component({
   selector: "app-entity-users",
   templateUrl: "entity-users.component.html",
+  providers: [SearchPipe],
 })
 export class EntityUsersComponent implements OnInit {
   @Input() entity: "group" | "collection";
@@ -33,6 +35,7 @@ export class EntityUsersComponent implements OnInit {
   private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
   constructor(
+    private search: SearchPipe,
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -52,6 +55,14 @@ export class EntityUsersComponent implements OnInit {
     }
   }
 
+  get searchedUsers() {
+    return this.search.transform(this.users, this.searchText, "name", "email", "id");
+  }
+
+  get scrollViewportStyle() {
+    return `min-height: 120px; height: ${120 + this.searchedUsers.length * 46}px`;
+  }
+
   async loadUsers() {
     const users = await this.apiService.getOrganizationUsers(this.organizationId);
     this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, "email"));

src/app/modules/organizations/manage/organization-manage.module.ts

@@ -0,0 +1,13 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared.module";
+
+import { EntityUsersComponent } from "./entity-users.component";
+
+@NgModule({
+  imports: [SharedModule, ScrollingModule],
+  declarations: [EntityUsersComponent],
+  exports: [EntityUsersComponent],
+})
+export class OrganizationManageModule {}

src/app/modules/organizations/users/enroll-master-password-reset.component.html

@@ -0,0 +1,59 @@
+<div
+  class="modal fade"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="enrollMasterPasswordResetTitle"
+>
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form
+      class="modal-content"
+      #form
+      (ngSubmit)="submit()"
+      [appApiAction]="formPromise"
+      ngNativeValidate
+    >
+      <div class="modal-header">
+        <h2 class="modal-title" id="enrollMasterPasswordResetTitle">
+          {{ (isEnrolled ? "withdrawPasswordReset" : "enrollPasswordReset") | i18n }}
+        </h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <app-callout type="warning" *ngIf="!isEnrolled">
+          {{ "resetPasswordEnrollmentWarning" | i18n }}
+        </app-callout>
+        <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
+      </div>
+      <div class="modal-footer">
+        <button bit-button buttonType="primary" type="submit" [disabled]="form.loading">
+          <i
+            class="bwi bwi-spinner bwi-spin"
+            title="{{ 'loading' | i18n }}"
+            *ngIf="form.loading"
+          ></i>
+          <span>
+            {{ "submit" | i18n }}
+          </span>
+        </button>
+        <button
+          bit-button
+          buttonType="secondary"
+          type="button"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span>
+            {{ "cancel" | i18n }}
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/modules/organizations/users/enroll-master-password-reset.component.ts

@@ -0,0 +1,97 @@
+import { Component } from "@angular/core";
+
+import { ModalRef } from "jslib-angular/components/modal/modal.ref";
+import { ModalConfig } from "jslib-angular/services/modal.service";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+import { Verification } from "jslib-common/types/verification";
+
+@Component({
+  selector: "app-enroll-master-password-reset",
+  templateUrl: "enroll-master-password-reset.component.html",
+})
+export class EnrollMasterPasswordReset {
+  organization: Organization;
+
+  verification: Verification;
+  formPromise: Promise<any>;
+
+  constructor(
+    private userVerificationService: UserVerificationService,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private cryptoService: CryptoService,
+    private syncService: SyncService,
+    private logService: LogService,
+    private modalRef: ModalRef,
+    config: ModalConfig
+  ) {
+    this.organization = config.data.organization;
+  }
+
+  async submit() {
+    let toastStringRef = "withdrawPasswordResetSuccess";
+
+    this.formPromise = this.userVerificationService
+      .buildRequest(this.verification, OrganizationUserResetPasswordEnrollmentRequest)
+      .then(async (request) => {
+        // Set variables
+        let keyString: string = null;
+
+        // Enrolling
+        if (!this.organization.resetPasswordEnrolled) {
+          // Retrieve Public Key
+          const orgKeys = await this.apiService.getOrganizationKeys(this.organization.id);
+          if (orgKeys == null) {
+            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
+          }
+
+          const publicKey = Utils.fromB64ToArray(orgKeys.publicKey);
+
+          // RSA Encrypt user's encKey.key with organization public key
+          const encKey = await this.cryptoService.getEncKey();
+          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+          keyString = encryptedKey.encryptedString;
+          toastStringRef = "enrollPasswordResetSuccess";
+
+          // Create request and execute enrollment
+          request.resetPasswordKey = keyString;
+          await this.apiService.putOrganizationUserResetPasswordEnrollment(
+            this.organization.id,
+            this.organization.userId,
+            request
+          );
+        } else {
+          // Withdrawal
+          request.resetPasswordKey = keyString;
+          await this.apiService.putOrganizationUserResetPasswordEnrollment(
+            this.organization.id,
+            this.organization.userId,
+            request
+          );
+        }
+
+        await this.syncService.fullSync(true);
+      });
+    try {
+      await this.formPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
+      this.modalRef.close();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  get isEnrolled(): boolean {
+    return this.organization.resetPasswordEnrolled;
+  }
+}

src/app/modules/organizations/users/organization-user.module.ts

@@ -0,0 +1,14 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { NgModule } from "@angular/core";
+
+import { LooseComponentsModule } from "../../loose-components.module";
+import { SharedModule } from "../../shared.module";
+
+import { EnrollMasterPasswordReset } from "./enroll-master-password-reset.component";
+
+@NgModule({
+  imports: [SharedModule, ScrollingModule, LooseComponentsModule],
+  declarations: [EnrollMasterPasswordReset],
+  exports: [EnrollMasterPasswordReset],
+})
+export class OrganizationUserModule {}

src/app/modules/pipes/get-organization-name.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+import { Organization } from "jslib-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;
+  }
+}

src/app/modules/pipes/pipes.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+
+import { GetOrgNameFromIdPipe } from "./get-organization-name.pipe";
+
+@NgModule({
+  imports: [],
+  declarations: [GetOrgNameFromIdPipe],
+  exports: [GetOrgNameFromIdPipe],
+})
+export class PipesModule {}

src/app/modules/shared.module.ts

@@ -0,0 +1,157 @@
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { DatePipe, registerLocaleData, CommonModule } from "@angular/common";
+import localeAf from "@angular/common/locales/af";
+import localeAz from "@angular/common/locales/az";
+import localeBe from "@angular/common/locales/be";
+import localeBg from "@angular/common/locales/bg";
+import localeBn from "@angular/common/locales/bn";
+import localeBs from "@angular/common/locales/bs";
+import localeCa from "@angular/common/locales/ca";
+import localeCs from "@angular/common/locales/cs";
+import localeDa from "@angular/common/locales/da";
+import localeDe from "@angular/common/locales/de";
+import localeEl from "@angular/common/locales/el";
+import localeEnGb from "@angular/common/locales/en-GB";
+import localeEnIn from "@angular/common/locales/en-IN";
+import localeEo from "@angular/common/locales/eo";
+import localeEs from "@angular/common/locales/es";
+import localeEt from "@angular/common/locales/et";
+import localeFi from "@angular/common/locales/fi";
+import localeFil from "@angular/common/locales/fil";
+import localeFr from "@angular/common/locales/fr";
+import localeHe from "@angular/common/locales/he";
+import localeHi from "@angular/common/locales/hi";
+import localeHr from "@angular/common/locales/hr";
+import localeHu from "@angular/common/locales/hu";
+import localeId from "@angular/common/locales/id";
+import localeIt from "@angular/common/locales/it";
+import localeJa from "@angular/common/locales/ja";
+import localeKa from "@angular/common/locales/ka";
+import localeKm from "@angular/common/locales/km";
+import localeKn from "@angular/common/locales/kn";
+import localeKo from "@angular/common/locales/ko";
+import localeLv from "@angular/common/locales/lv";
+import localeMl from "@angular/common/locales/ml";
+import localeNb from "@angular/common/locales/nb";
+import localeNl from "@angular/common/locales/nl";
+import localeNn from "@angular/common/locales/nn";
+import localePl from "@angular/common/locales/pl";
+import localePtBr from "@angular/common/locales/pt";
+import localePtPt from "@angular/common/locales/pt-PT";
+import localeRo from "@angular/common/locales/ro";
+import localeRu from "@angular/common/locales/ru";
+import localeSi from "@angular/common/locales/si";
+import localeSk from "@angular/common/locales/sk";
+import localeSl from "@angular/common/locales/sl";
+import localeSr from "@angular/common/locales/sr";
+import localeSv from "@angular/common/locales/sv";
+import localeTr from "@angular/common/locales/tr";
+import localeUk from "@angular/common/locales/uk";
+import localeVi from "@angular/common/locales/vi";
+import localeZhCn from "@angular/common/locales/zh-Hans";
+import localeZhTw from "@angular/common/locales/zh-Hant";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
+import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { ToastrModule } from "ngx-toastr";
+
+import { JslibModule } from "jslib-angular/jslib.module";
+
+import { PasswordStrengthComponent } from "../components/password-strength.component";
+import { OrganizationPlansComponent } from "../settings/organization-plans.component";
+import { PaymentComponent } from "../settings/payment.component";
+
+registerLocaleData(localeAf, "af");
+registerLocaleData(localeAz, "az");
+registerLocaleData(localeBe, "be");
+registerLocaleData(localeBg, "bg");
+registerLocaleData(localeBn, "bn");
+registerLocaleData(localeBs, "bs");
+registerLocaleData(localeCa, "ca");
+registerLocaleData(localeCs, "cs");
+registerLocaleData(localeDa, "da");
+registerLocaleData(localeDe, "de");
+registerLocaleData(localeEl, "el");
+registerLocaleData(localeEnGb, "en-GB");
+registerLocaleData(localeEnIn, "en-IN");
+registerLocaleData(localeEo, "eo");
+registerLocaleData(localeEs, "es");
+registerLocaleData(localeEt, "et");
+registerLocaleData(localeFi, "fi");
+registerLocaleData(localeFil, "fil");
+registerLocaleData(localeFr, "fr");
+registerLocaleData(localeHe, "he");
+registerLocaleData(localeHi, "hi");
+registerLocaleData(localeHr, "hr");
+registerLocaleData(localeHu, "hu");
+registerLocaleData(localeId, "id");
+registerLocaleData(localeIt, "it");
+registerLocaleData(localeJa, "ja");
+registerLocaleData(localeKa, "ka");
+registerLocaleData(localeKm, "km");
+registerLocaleData(localeKn, "kn");
+registerLocaleData(localeKo, "ko");
+registerLocaleData(localeLv, "lv");
+registerLocaleData(localeMl, "ml");
+registerLocaleData(localeNb, "nb");
+registerLocaleData(localeNl, "nl");
+registerLocaleData(localeNn, "nn");
+registerLocaleData(localePl, "pl");
+registerLocaleData(localePtBr, "pt-BR");
+registerLocaleData(localePtPt, "pt-PT");
+registerLocaleData(localeRo, "ro");
+registerLocaleData(localeRu, "ru");
+registerLocaleData(localeSi, "si");
+registerLocaleData(localeSk, "sk");
+registerLocaleData(localeSl, "sl");
+registerLocaleData(localeSr, "sr");
+registerLocaleData(localeSv, "sv");
+registerLocaleData(localeTr, "tr");
+registerLocaleData(localeUk, "uk");
+registerLocaleData(localeVi, "vi");
+registerLocaleData(localeZhCn, "zh-CN");
+registerLocaleData(localeZhTw, "zh-TW");
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DragDropModule,
+    FormsModule,
+    InfiniteScrollModule,
+    JslibModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BadgeModule,
+    ButtonModule,
+    CalloutModule,
+    ToastrModule,
+    BadgeModule,
+    ButtonModule,
+    MenuModule,
+  ],
+  declarations: [PasswordStrengthComponent, OrganizationPlansComponent, PaymentComponent],
+  exports: [
+    CommonModule,
+    DragDropModule,
+    FormsModule,
+    InfiniteScrollModule,
+    JslibModule,
+    ReactiveFormsModule,
+    RouterModule,
+    BadgeModule,
+    ButtonModule,
+    CalloutModule,
+    ToastrModule,
+    BadgeModule,
+    ButtonModule,
+    MenuModule,
+    PasswordStrengthComponent,
+    OrganizationPlansComponent,
+    PaymentComponent,
+  ],
+  providers: [DatePipe],
+  bootstrap: [],
+})
+export class SharedModule {}

src/app/modules/vault-filter/components/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
+        }"
+        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>

src/app/modules/vault-filter/components/collection-filter.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { CollectionFilterComponent as BaseCollectionFilterComponent } from "jslib-angular/modules/vault-filter/components/collection-filter.component";
+
+@Component({
+  selector: "app-collection-filter",
+  templateUrl: "collection-filter.component.html",
+})
+export class CollectionFilterComponent extends BaseCollectionFilterComponent {}

src/app/modules/vault-filter/components/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>

src/app/modules/vault-filter/components/folder-filter.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { FolderFilterComponent as BaseFolderFilterComponent } from "jslib-angular/modules/vault-filter/components/folder-filter.component";
+
+@Component({
+  selector: "app-folder-filter",
+  templateUrl: "folder-filter.component.html",
+})
+export class FolderFilterComponent extends BaseFolderFilterComponent {}

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -0,0 +1,155 @@
+<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" (click)="applyOrganizationFilter(organization)">
+              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+              {{ organization.name }}
+            </button>
+            <ng-container>
+              <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" *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>

src/app/modules/vault-filter/components/organization-filter.component.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+import { OrganizationFilterComponent as BaseOrganizationFilterComponent } from "jslib-angular/modules/vault-filter/components/organization-filter.component";
+
+@Component({
+  selector: "app-organization-filter",
+  templateUrl: "organization-filter.component.html",
+})
+export class OrganizationFilterComponent extends BaseOrganizationFilterComponent {
+  displayText = "allVaults";
+}

src/app/modules/vault-filter/components/organization-options.component.html

@@ -0,0 +1,43 @@
+<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-max-w-[300px] tw-min-w-[200px] tw-flex tw-flex-col">
+  <button
+    *ngIf="allowEnrollmentChanges(organization) && !organization.resetPasswordEnrolled"
+    class="dropdown-item"
+    (click)="toggleResetPasswordEnrollment(organization)"
+  >
+    <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+    {{ "enrollPasswordReset" | i18n }}
+  </button>
+  <button
+    *ngIf="allowEnrollmentChanges(organization) && organization.resetPasswordEnrolled"
+    class="dropdown-item"
+    (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="dropdown-item"
+      (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="dropdown-item text-danger" (click)="leave(organization)">
+    <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+    {{ "leave" | i18n }}
+  </button>
+</div>

src/app/modules/vault-filter/components/organization-options.component.ts

@@ -1,53 +1,44 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
-import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
-import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { PolicyType } from "jslib-common/enums/policyType";
-import { Utils } from "jslib-common/misc/utils";
 import { Organization } from "jslib-common/models/domain/organization";
 import { Policy } from "jslib-common/models/domain/policy";
-import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+
+import { EnrollMasterPasswordReset } from "../../organizations/users/enroll-master-password-reset.component";
 
 @Component({
-  selector: "app-organizations",
-  templateUrl: "organizations.component.html",
+  selector: "app-organization-options",
+  templateUrl: "organization-options.component.html",
 })
-export class OrganizationsComponent implements OnInit {
-  @Input() vault = false;
-
-  organizations: Organization[];
+export class OrganizationOptionsComponent {
+  actionPromise: Promise<any>;
   policies: Policy[];
   loaded = false;
-  actionPromise: Promise<any>;
+
+  @Input() organization: Organization;
 
   constructor(
-    private organizationService: OrganizationService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private apiService: ApiService,
     private syncService: SyncService,
-    private cryptoService: CryptoService,
     private policyService: PolicyService,
+    private modalService: ModalService,
     private logService: LogService
   ) {}
 
   async ngOnInit() {
-    if (!this.vault) {
-      await this.syncService.fullSync(true);
     await this.load();
   }
-  }
 
   async load() {
-    const orgs = await this.organizationService.getAll();
-    orgs.sort(Utils.getSortFunction(this.i18nService, "name"));
-    this.organizations = orgs;
     this.policies = await this.policyService.getAll(PolicyType.ResetPassword);
     this.loaded = true;
   }
@@ -91,6 +82,7 @@ export class OrganizationsComponent implements OnInit {
       this.platformUtilsService.showToast("success", null, "Unlinked SSO");
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
@@ -115,74 +107,17 @@ export class OrganizationsComponent implements OnInit {
       this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
 
   async toggleResetPasswordEnrollment(org: Organization) {
-    // Set variables
-    let keyString: string = null;
-    let toastStringRef = "withdrawPasswordResetSuccess";
-
-    // Enrolling
-    if (!org.resetPasswordEnrolled) {
-      // Alert user about enrollment
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("resetPasswordEnrollmentWarning"),
-        null,
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
-      if (!confirmed) {
-        return;
-      }
-
-      // Retrieve Public Key
-      this.actionPromise = this.apiService
-        .getOrganizationKeys(org.id)
-        .then(async (response) => {
-          if (response == null) {
-            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
-          }
-
-          const publicKey = Utils.fromB64ToArray(response.publicKey);
-
-          // RSA Encrypt user's encKey.key with organization public key
-          const encKey = await this.cryptoService.getEncKey();
-          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
-          keyString = encryptedKey.encryptedString;
-          toastStringRef = "enrollPasswordResetSuccess";
-
-          // Create request and execute enrollment
-          const request = new OrganizationUserResetPasswordEnrollmentRequest();
-          request.resetPasswordKey = keyString;
-          return this.apiService.putOrganizationUserResetPasswordEnrollment(
-            org.id,
-            org.userId,
-            request
-          );
-        })
-        .then(() => {
-          return this.syncService.fullSync(true);
-        });
-    } else {
-      // Withdrawal
-      const request = new OrganizationUserResetPasswordEnrollmentRequest();
-      request.resetPasswordKey = keyString;
-      this.actionPromise = this.apiService
-        .putOrganizationUserResetPasswordEnrollment(org.id, org.userId, request)
-        .then(() => {
-          return this.syncService.fullSync(true);
+    this.modalService.open(EnrollMasterPasswordReset, {
+      allowMultipleModals: true,
+      data: {
+        organization: org,
+      },
     });
   }
-
-    try {
-      await this.actionPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
-      await this.load();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }

src/app/modules/vault-filter/components/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>

src/app/modules/vault-filter/components/status-filter.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { StatusFilterComponent as BaseStatusFilterComponent } from "jslib-angular/modules/vault-filter/components/status-filter.component";
+
+@Component({
+  selector: "app-status-filter",
+  templateUrl: "status-filter.component.html",
+})
+export class StatusFilterComponent extends BaseStatusFilterComponent {}

src/app/modules/vault-filter/components/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>

src/app/modules/vault-filter/components/type-filter.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+import { TypeFilterComponent as BaseTypeFilterComponent } from "jslib-angular/modules/vault-filter/components/type-filter.component";
+
+@Component({
+  selector: "app-type-filter",
+  templateUrl: "type-filter.component.html",
+})
+export class TypeFilterComponent extends BaseTypeFilterComponent {}

src/app/modules/vault-filter/vault-filter.component.html

@@ -0,0 +1,80 @@
+<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
+        *ngIf="showOrgFilter"
+        [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]="!showFavorites"
+          [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]="!showFolders"
+          [activeFilter]="activeFilter"
+          [collapsedFilterNodes]="collapsedFilterNodes"
+          [folderNodes]="folders"
+          (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>

src/app/modules/vault-filter/vault-filter.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { Organization } from "jslib-common/models/domain/organization";
+
+@Component({
+  selector: "app-vault-filter",
+  templateUrl: "vault-filter.component.html",
+})
+export class VaultFilterComponent extends BaseVaultFilterComponent {
+  @Input() showOrgFilter = true;
+  @Input() showFolders = true;
+  @Input() showFavorites = true;
+
+  @Output() onSearchTextChanged = new EventEmitter<string>();
+
+  searchPlaceholder: string;
+  searchText = "";
+
+  organization: Organization;
+
+  constructor(vaultFilterService: VaultFilterService) {
+    super(vaultFilterService);
+  }
+
+  searchTextChanged() {
+    this.onSearchTextChanged.emit(this.searchText);
+  }
+
+  async initCollections() {
+    return await this.vaultFilterService.buildCollections(this.organization?.id);
+  }
+}

src/app/modules/vault-filter/vault-filter.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from "@angular/core";
+
+import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
+import { CollectionService } from "jslib-common/abstractions/collection.service";
+import { FolderService } from "jslib-common/abstractions/folder.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
+import { SharedModule } from "../shared.module";
+
+import { CollectionFilterComponent } from "./components/collection-filter.component";
+import { FolderFilterComponent } from "./components/folder-filter.component";
+import { LinkSsoComponent } from "./components/link-sso.component";
+import { OrganizationFilterComponent } from "./components/organization-filter.component";
+import { OrganizationOptionsComponent } from "./components/organization-options.component";
+import { StatusFilterComponent } from "./components/status-filter.component";
+import { TypeFilterComponent } from "./components/type-filter.component";
+import { VaultFilterComponent } from "./vault-filter.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [
+    VaultFilterComponent,
+    CollectionFilterComponent,
+    FolderFilterComponent,
+    OrganizationFilterComponent,
+    OrganizationOptionsComponent,
+    StatusFilterComponent,
+    TypeFilterComponent,
+    LinkSsoComponent,
+  ],
+  exports: [VaultFilterComponent],
+  providers: [
+    {
+      provide: VaultFilterService,
+      useClass: VaultFilterService,
+      deps: [
+        StateService,
+        OrganizationService,
+        FolderService,
+        CipherService,
+        CollectionService,
+        PolicyService,
+      ],
+    },
+  ],
+})
+export class VaultFilterModule {}

src/app/modules/vault-filter/vault-filter.service.ts

@@ -0,0 +1,3 @@
+import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
+
+export class VaultFilterService extends BaseVaultFilterService {}

src/app/modules/vault/modules/individual-vault/individual-vault-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { IndividualVaultComponent } from "./individual-vault.component";
+const routes: Routes = [
+  {
+    path: "",
+    component: IndividualVaultComponent,
+    data: { titleId: "vaults" },
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IndividualVaultRoutingModule {}

src/app/modules/vault/modules/individual-vault/individual-vault.component.html

@@ -1,23 +1,25 @@
 <div class="container page-content">
   <div class="row">
     <div class="col-3">
-      <app-vault-groupings
-        (onAllClicked)="clearGroupingFilters()"
-        (onFavoritesClicked)="filterFavorites()"
-        (onCipherTypeClicked)="filterCipherType($event)"
-        (onFolderClicked)="filterFolder($event.id)"
+      <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)"
-        (onCollectionClicked)="filterCollection($event.id)"
               (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-vault-groupings>
+            ></app-vault-filter>
           </div>
-    <div class="col-6">
+        </div>
+      </div>
+    </div>
+    <div [ngClass]="{ 'col-6': isShowingCards, 'col-9': !isShowingCards }">
       <div class="page-header d-flex">
         <h1>
-          {{ "myVault" | i18n }}
+          {{ "vaultItems" | i18n }}
           <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
@@ -30,19 +32,26 @@
           </small>
         </h1>
         <div class="ml-auto d-flex">
-          <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
+          <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="!deleted"
+            *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="deleted" icon="bwi-exclamation-triangle">
+      <app-callout
+        type="warning"
+        *ngIf="activeFilter.status === 'trash'"
+        icon="bwi-exclamation-triangle"
+      >
         {{ trashCleanupWarning }}
       </app-callout>
       <app-vault-ciphers
@@ -52,6 +61,7 @@
         (onShareClicked)="shareCipher($event)"
         (onCollectionsClicked)="editCipherCollections($event)"
         (onCloneClicked)="cloneCipher($event)"
+        (onOrganzationBadgeClicked)="applyOrganizationFilter($event)"
       >
       </app-vault-ciphers>
     </div>
@@ -92,45 +102,14 @@
         </div>
         <div class="card-body">
           <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-          <a class="btn btn-block btn-outline-secondary" routerLink="/settings/premium">
+          <a
+            class="btn btn-block btn-outline-secondary"
+            routerLink="/settings/subscription/premium"
+          >
             {{ "goPremium" | i18n }}
           </a>
         </div>
       </div>
-      <div class="card mb-4">
-        <div class="card-header d-flex">
-          {{ "organizations" | i18n }}
-          <a
-            class="ml-auto"
-            href="https://bitwarden.com/help/about-organizations/"
-            target="_blank"
-            rel="noopener"
-            appA11yTitle="{{ 'learnMore' | i18n }}"
-          >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-          </a>
-        </div>
-        <div class="card-body">
-          <app-organizations [vault]="true"></app-organizations>
-        </div>
-      </div>
-      <div class="card mt-4" *ngIf="showProviders">
-        <div class="card-header d-flex">
-          {{ "providers" | i18n }}
-          <a
-            class="ml-auto"
-            href="https://bitwarden.com/help/providers/"
-            target="_blank"
-            rel="noopener"
-            appA11yTitle="{{ 'learnMore' | i18n }}"
-          >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-          </a>
-        </div>
-        <div class="card-body">
-          <app-providers vault="true"></app-providers>
-        </div>
-      </div>
     </div>
   </div>
 </div>

src/app/modules/vault/modules/individual-vault/individual-vault.component.ts

@@ -10,42 +10,41 @@ import {
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
-import { ProviderService } from "jslib-common/abstractions/provider.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { TokenService } from "jslib-common/abstractions/token.service";
 import { CipherType } from "jslib-common/enums/cipherType";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { OrganizationsComponent } from "../settings/organizations.component";
-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 { GroupingsComponent } from "./groupings.component";
-import { ShareComponent } from "./share.component";
+import { UpdateKeyComponent } from "../../../../settings/update-key.component";
+import { AddEditComponent } from "../../../../vault/add-edit.component";
+import { AttachmentsComponent } from "../../../../vault/attachments.component";
+import { CiphersComponent } from "../../../../vault/ciphers.component";
+import { CollectionsComponent } from "../../../../vault/collections.component";
+import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
+import { ShareComponent } from "../../../../vault/share.component";
+import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "VaultComponent";
 
 @Component({
   selector: "app-vault",
-  templateUrl: "vault.component.html",
+  templateUrl: "individual-vault.component.html",
 })
-export class VaultComponent implements OnInit, OnDestroy {
-  @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
+export class IndividualVaultComponent implements OnInit, OnDestroy {
+  @ViewChild("vaultFilter", { static: true }) filterComponent: VaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
-  @ViewChild(OrganizationsComponent, { static: true })
-  organizationsComponent: OrganizationsComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
   @ViewChild("folderAddEdit", { read: ViewContainerRef, static: true })
@@ -59,16 +58,17 @@ export class VaultComponent implements OnInit, OnDestroy {
   updateKeyModalRef: ViewContainerRef;
 
   favorites = false;
-  type: CipherType = null;
   folderId: string = null;
   collectionId: string = null;
+  organizationId: string = null;
+  myVaultOnly = false;
   showVerifyEmail = false;
   showBrowserOutdated = false;
   showUpdateKey = false;
   showPremiumCallout = false;
-  showProviders = false;
   deleted = false;
   trashCleanupWarning: string = null;
+  activeFilter: VaultFilter = new VaultFilter();
 
   constructor(
     private syncService: SyncService,
@@ -85,7 +85,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     private ngZone: NgZone,
     private stateService: StateService,
     private organizationService: OrganizationService,
-    private providerService: ProviderService
+    private vaultService: VaultService,
+    private cipherService: CipherService,
+    private passwordRepromptService: PasswordRepromptService
   ) {}
 
   async ngOnInit() {
@@ -99,42 +101,42 @@ export class VaultComponent implements OnInit, OnDestroy {
 
     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.showProviders = (await this.providerService.getAll()).length > 0;
-
-      await Promise.all([this.groupingsComponent.load(), this.organizationsComponent.load()]);
+      this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
+      this.filterComponent.reloadOrganizations();
       this.showUpdateKey = !(await this.cryptoService.hasEncKey());
 
-      if (params == null) {
-        this.groupingsComponent.selectedAll = true;
-        await this.ciphersComponent.reload();
-      } else {
-        if (params.deleted) {
-          this.groupingsComponent.selectedTrash = true;
-          await this.filterDeleted();
-        } else if (params.favorites) {
-          this.groupingsComponent.selectedFavorites = true;
-          await this.filterFavorites();
-        } else if (params.type) {
-          const t = parseInt(params.type, null);
-          this.groupingsComponent.selectedType = t;
-          await this.filterCipherType(t);
-        } else if (params.folderId) {
-          this.groupingsComponent.selectedFolder = true;
-          this.groupingsComponent.selectedFolderId = params.folderId;
-          await this.filterFolder(params.folderId);
-        } else if (params.collectionId) {
-          this.groupingsComponent.selectedCollectionId = params.collectionId;
-          await this.filterCollection(params.collectionId);
-        } else {
-          this.groupingsComponent.selectedAll = true;
-          await this.ciphersComponent.reload();
+      if (params.cipherId) {
+        const cipherView = new CipherView();
+        cipherView.id = params.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) => {
+        if (params.cipherId) {
+          if ((await this.cipherService.get(params.cipherId)) != null) {
+            this.editCipherId(params.cipherId);
+          } else {
+            this.platformUtilsService.showToast(
+              "error",
+              this.i18nService.t("errorOccurred"),
+              this.i18nService.t("unknownCipher")
+            );
+            this.router.navigate([], {
+              queryParams: { cipherId: null },
+              queryParamsHandling: "merge",
+            });
+          }
+        }
+      });
 
       this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
         this.ngZone.run(async () => {
@@ -142,8 +144,8 @@ export class VaultComponent implements OnInit, OnDestroy {
             case "syncCompleted":
               if (message.successfully) {
                 await Promise.all([
-                  this.groupingsComponent.load(),
-                  this.organizationsComponent.load(),
+                  this.filterComponent.reloadCollectionsAndFolders(this.activeFilter),
+                  this.filterComponent.reloadOrganizations(),
                   this.ciphersComponent.load(this.ciphersComponent.filter),
                 ]);
                 this.changeDetectorRef.detectChanges();
@@ -155,72 +157,78 @@ export class VaultComponent implements OnInit, OnDestroy {
     });
   }
 
+  get isShowingCards() {
+    return (
+      this.showBrowserOutdated ||
+      this.showPremiumCallout ||
+      this.showUpdateKey ||
+      this.showVerifyEmail
+    );
+  }
+
   ngOnDestroy() {
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
   }
 
-  async clearGroupingFilters() {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchVault");
-    await this.ciphersComponent.reload();
-    this.clearFilters();
-    this.go();
-  }
-
-  async filterFavorites() {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchFavorites");
-    await this.ciphersComponent.reload((c) => c.favorite);
-    this.clearFilters();
-    this.favorites = true;
-    this.go();
-  }
-
-  async filterDeleted() {
-    this.ciphersComponent.showAddNew = false;
-    this.ciphersComponent.deleted = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchTrash");
-    await this.ciphersComponent.reload(null, true);
-    this.clearFilters();
-    this.deleted = true;
-    this.go();
-  }
-
-  async filterCipherType(type: CipherType) {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchType");
-    await this.ciphersComponent.reload((c) => c.type === type);
-    this.clearFilters();
-    this.type = type;
-    this.go();
-  }
-
-  async filterFolder(folderId: string) {
-    this.ciphersComponent.showAddNew = true;
-    folderId = folderId === "none" ? null : folderId;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchFolder");
-    await this.ciphersComponent.reload((c) => c.folderId === folderId);
-    this.clearFilters();
-    this.folderId = folderId == null ? "none" : folderId;
-    this.go();
-  }
-
-  async filterCollection(collectionId: string) {
-    this.ciphersComponent.showAddNew = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchCollection");
-    await this.ciphersComponent.reload(
-      (c) => c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1
+  async applyVaultFilter(vaultFilter: VaultFilter) {
+    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.activeFilter = vaultFilter;
+    await this.ciphersComponent.reload(this.buildFilter(), vaultFilter.status === "trash");
+    this.filterComponent.searchPlaceholder = this.vaultService.calculateSearchBarLocalizationString(
+      this.activeFilter
     );
-    this.clearFilters();
-    this.collectionId = collectionId;
     this.go();
   }
 
+  async applyOrganizationFilter(orgId: string) {
+    if (orgId == null) {
+      this.activeFilter.resetOrganization();
+      this.activeFilter.myVaultOnly = true;
+    } else {
+      this.activeFilter.selectedOrganizationId = orgId;
+    }
+    await this.applyVaultFilter(this.activeFilter);
+  }
+
   filterSearchText(searchText: string) {
     this.ciphersComponent.searchText = searchText;
     this.ciphersComponent.search(200);
   }
 
+  private buildFilter(): (cipher: CipherView) => boolean {
+    return (cipher) => {
+      let cipherPassesFilter = true;
+      if (this.activeFilter.status === "favorites" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.favorite;
+      }
+      if (this.activeFilter.status === "trash" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.isDeleted;
+      }
+      if (this.activeFilter.cipherType != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
+      }
+      if (
+        this.activeFilter.selectedFolder &&
+        this.activeFilter.selectedFolderId != "none" &&
+        cipherPassesFilter
+      ) {
+        cipherPassesFilter = cipher.folderId === this.activeFilter.selectedFolderId;
+      }
+      if (this.activeFilter.selectedCollectionId != null && cipherPassesFilter) {
+        cipherPassesFilter =
+          cipher.collectionIds != null &&
+          cipher.collectionIds.indexOf(this.activeFilter.selectedCollectionId) > -1;
+      }
+      if (this.activeFilter.selectedOrganizationId != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === this.activeFilter.selectedOrganizationId;
+      }
+      if (this.activeFilter.myVaultOnly && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === null;
+      }
+      return cipherPassesFilter;
+    };
+  }
+
   async editCipherAttachments(cipher: CipherView) {
     const canAccessPremium = await this.stateService.getCanAccessPremium();
     if (cipher.organizationId == null && !canAccessPremium) {
@@ -292,7 +300,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         comp.folderId = null;
         comp.onSavedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
       }
     );
@@ -306,13 +314,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         comp.folderId = folderId;
         comp.onSavedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
         comp.onDeletedFolder.subscribe(async () => {
           modal.close();
-          await this.groupingsComponent.loadFolders();
-          await this.filterFolder("none");
-          this.groupingsComponent.selectedFolderId = null;
+          await this.filterComponent.reloadCollectionsAndFolders(this.activeFilter);
         });
       }
     );
@@ -320,25 +326,43 @@ export class VaultComponent implements OnInit, OnDestroy {
 
   async addCipher() {
     const component = await this.editCipher(null);
-    component.type = this.type;
+    component.type = this.activeFilter.cipherType;
     component.folderId = this.folderId === "none" ? null : this.folderId;
-    if (this.collectionId != null) {
-      const collection = this.groupingsComponent.collections.filter(
-        (c) => c.id === this.collectionId
+    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.collectionId];
+        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 });
+        return;
+      }
+    }
+
     const [modal, childComponent] = await this.modalService.openViewRef(
       AddEditComponent,
       this.cipherAddEditModalRef,
       (comp) => {
-        comp.cipherId = cipher == null ? null : cipher.id;
+        comp.cipherId = id;
         comp.onSavedCipher.subscribe(async () => {
           modal.close();
           await this.ciphersComponent.refresh();
@@ -354,6 +378,10 @@ export class VaultComponent implements OnInit, OnDestroy {
       }
     );
 
+    modal.onClosedPromise().then(() => {
+      this.go({ cipherId: null });
+    });
+
     return childComponent;
   }
 
@@ -366,19 +394,11 @@ export class VaultComponent implements OnInit, OnDestroy {
     await this.modalService.openViewRef(UpdateKeyComponent, this.updateKeyModalRef);
   }
 
-  private clearFilters() {
-    this.folderId = null;
-    this.collectionId = null;
-    this.favorites = false;
-    this.type = null;
-    this.deleted = false;
-  }
-
   private go(queryParams: any = null) {
     if (queryParams == null) {
       queryParams = {
         favorites: this.favorites ? true : null,
-        type: this.type,
+        type: this.activeFilter.cipherType,
         folderId: this.folderId,
         collectionId: this.collectionId,
         deleted: this.deleted ? true : null,
@@ -388,6 +408,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: queryParams,
+      queryParamsHandling: "merge",
       replaceUrl: true,
     });
   }

src/app/modules/vault/modules/individual-vault/individual-vault.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+
+import { VaultModule } from "../../vault.module";
+
+import { IndividualVaultRoutingModule } from "./individual-vault-routing.module";
+import { IndividualVaultComponent } from "./individual-vault.component";
+
+@NgModule({
+  imports: [VaultModule, IndividualVaultRoutingModule],
+  declarations: [IndividualVaultComponent],
+  exports: [IndividualVaultComponent],
+})
+export class IndividualVaultModule {}

src/app/modules/vault/modules/organization-badge/organization-badge.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../../shared.module";
+
+import { OrganizationNameBadgeComponent } from "./organization-name-badge.component";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [OrganizationNameBadgeComponent],
+  exports: [OrganizationNameBadgeComponent],
+})
+export class OrganizationBadgeModule {}

src/app/modules/vault/modules/organization-badge/organization-name-badge.component.html

@@ -0,0 +1,9 @@
+<button
+  bit-badge
+  [style.color]="textColor"
+  [style.background-color]="color"
+  appA11yTitle="{{ organizationName }}"
+  (click)="emitOnOrganizationClicked()"
+>
+  {{ organizationName | ellipsis: 13 }}
+</button>

src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts

@@ -0,0 +1,59 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+
+import { I18nService } from "jslib-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();
+  }
+}

src/app/modules/vault/modules/organization-vault/add-edit.component.ts

@@ -22,11 +22,11 @@ import { Organization } from "jslib-common/models/domain/organization";
 import { CipherCreateRequest } from "jslib-common/models/request/cipherCreateRequest";
 import { CipherRequest } from "jslib-common/models/request/cipherRequest";
 
-import { AddEditComponent as BaseAddEditComponent } from "../../vault/add-edit.component";
+import { AddEditComponent as BaseAddEditComponent } from "../../../../vault/add-edit.component";
 
 @Component({
   selector: "app-org-vault-add-edit",
-  templateUrl: "../../vault/add-edit.component.html",
+  templateUrl: "../../../../vault/add-edit.component.html",
 })
 export class AddEditComponent extends BaseAddEditComponent {
   organization: Organization;

src/app/modules/vault/modules/organization-vault/attachments.component.ts

@@ -12,11 +12,11 @@ import { Cipher } from "jslib-common/models/domain/cipher";
 import { Organization } from "jslib-common/models/domain/organization";
 import { AttachmentView } from "jslib-common/models/view/attachmentView";
 
-import { AttachmentsComponent as BaseAttachmentsComponent } from "../../vault/attachments.component";
+import { AttachmentsComponent as BaseAttachmentsComponent } from "../../../../vault/attachments.component";
 
 @Component({
   selector: "app-org-vault-attachments",
-  templateUrl: "../../vault/attachments.component.html",
+  templateUrl: "../../../../vault/attachments.component.html",
 })
 export class AttachmentsComponent extends BaseAttachmentsComponent {
   viewOnly = false;

src/app/modules/vault/modules/organization-vault/ciphers.component.ts

@@ -5,19 +5,21 @@ import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { EventService } from "jslib-common/abstractions/event.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { StateService } from "jslib-common/abstractions/state.service";
+import { TokenService } from "jslib-common/abstractions/token.service";
 import { TotpService } from "jslib-common/abstractions/totp.service";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { CiphersComponent as BaseCiphersComponent } from "../../vault/ciphers.component";
+import { CiphersComponent as BaseCiphersComponent } from "../../../../vault/ciphers.component";
 
 @Component({
   selector: "app-org-vault-ciphers",
-  templateUrl: "../../vault/ciphers.component.html",
+  templateUrl: "../../../../vault/ciphers.component.html",
 })
 export class CiphersComponent extends BaseCiphersComponent {
   @Output() onEventsClicked = new EventEmitter<CipherView>();
@@ -32,12 +34,14 @@ export class CiphersComponent extends BaseCiphersComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     cipherService: CipherService,
-    private apiService: ApiService,
     eventService: EventService,
     totpService: TotpService,
     passwordRepromptService: PasswordRepromptService,
     logService: LogService,
-    stateService: StateService
+    stateService: StateService,
+    organizationService: OrganizationService,
+    tokenService: TokenService,
+    private apiService: ApiService
   ) {
     super(
       searchService,
@@ -48,11 +52,14 @@ export class CiphersComponent extends BaseCiphersComponent {
       totpService,
       stateService,
       passwordRepromptService,
-      logService
+      logService,
+      organizationService,
+      tokenService
     );
   }
 
-  async load(filter: (cipher: CipherView) => boolean = null) {
+  async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
+    this.deleted = deleted || false;
     if (this.organization.canEditAnyCollection) {
       this.accessEvents = this.organization.useEvents;
       this.allCiphers = await this.cipherService.getAllFromApiForOrganization(this.organization.id);

src/app/modules/vault/modules/organization-vault/collections.component.ts

@@ -11,11 +11,11 @@ import { Cipher } from "jslib-common/models/domain/cipher";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherCollectionsRequest } from "jslib-common/models/request/cipherCollectionsRequest";
 
-import { CollectionsComponent as BaseCollectionsComponent } from "../../vault/collections.component";
+import { CollectionsComponent as BaseCollectionsComponent } from "../../../../vault/collections.component";
 
 @Component({
   selector: "app-org-vault-collections",
-  templateUrl: "../../vault/collections.component.html",
+  templateUrl: "../../../../vault/collections.component.html",
 })
 export class CollectionsComponent extends BaseCollectionsComponent {
   organization: Organization;

src/app/modules/vault/modules/organization-vault/organization-vault-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { OrganizationVaultComponent } from "./organization-vault.component";
+const routes: Routes = [
+  {
+    path: "",
+    component: OrganizationVaultComponent,
+    data: { titleId: "vaults" },
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationVaultRoutingModule {}

src/app/modules/vault/modules/organization-vault/organization-vault.component.html

@@ -1,22 +1,26 @@
 <div class="container page-content">
   <div class="row">
     <div class="col-3">
-      <app-org-vault-groupings
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
               [showFolders]="false"
               [showFavorites]="false"
-        [showTrash]="true"
-        (onAllClicked)="clearGroupingFilters()"
-        (onCipherTypeClicked)="filterCipherType($event)"
-        (onCollectionClicked)="filterCollection($event.id)"
+              [activeFilter]="activeFilter"
+              [showOrgFilter]="false"
+              (onFilterChange)="applyVaultFilter($event)"
               (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-org-vault-groupings>
+            ></app-vault-filter>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="col-9">
       <div class="page-header d-flex">
         <h1>
-          {{ "vault" | i18n }}
+          {{ "vaultItems" | i18n }}
           <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i

src/app/modules/vault/modules/organization-vault/organization-vault.component.ts

@@ -10,33 +10,37 @@ import {
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
+import { VaultFilter } from "jslib-angular/modules/vault-filter/models/vault-filter.model";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
+import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { CipherType } from "jslib-common/enums/cipherType";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { EntityEventsComponent } from "../manage/entity-events.component";
+import { EntityEventsComponent } from "../../../../organizations/manage/entity-events.component";
+import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultService } from "../../vault.service";
 
 import { AddEditComponent } from "./add-edit.component";
 import { AttachmentsComponent } from "./attachments.component";
 import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
-import { GroupingsComponent } from "./groupings.component";
 
 const BroadcasterSubscriptionId = "OrgVaultComponent";
 
 @Component({
   selector: "app-org-vault",
-  templateUrl: "vault.component.html",
+  templateUrl: "organization-vault.component.html",
 })
-export class VaultComponent implements OnInit, OnDestroy {
-  @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
+export class OrganizationVaultComponent implements OnInit, OnDestroy {
+  @ViewChild("vaultFilter", { static: true }) vaultFilterComponent: VaultFilterComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
@@ -52,6 +56,7 @@ export class VaultComponent implements OnInit, OnDestroy {
   type: CipherType = null;
   deleted = false;
   trashCleanupWarning: string = null;
+  activeFilter: VaultFilter = new VaultFilter();
 
   constructor(
     private route: ActivatedRoute,
@@ -64,7 +69,10 @@ export class VaultComponent implements OnInit, OnDestroy {
     private messagingService: MessagingService,
     private broadcasterService: BroadcasterService,
     private ngZone: NgZone,
-    private platformUtilsService: PlatformUtilsService
+    private platformUtilsService: PlatformUtilsService,
+    private vaultService: VaultService,
+    private cipherService: CipherService,
+    private passwordRepromptService: PasswordRepromptService
   ) {}
 
   ngOnInit() {
@@ -73,13 +81,13 @@ export class VaultComponent implements OnInit, OnDestroy {
         ? "trashCleanupWarningSelfHosted"
         : "trashCleanupWarning"
     );
-    this.route.parent.params.pipe(first()).subscribe(async (params) => {
+    this.route.parent.params.subscribe(async (params: any) => {
       this.organization = await this.organizationService.get(params.organizationId);
-      this.groupingsComponent.organization = this.organization;
+      this.vaultFilterComponent.organization = this.organization;
       this.ciphersComponent.organization = this.organization;
 
       this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-        this.ciphersComponent.searchText = this.groupingsComponent.searchText = qParams.search;
+        this.ciphersComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
         if (!this.organization.canViewAllCollections) {
           await this.syncService.fullSync(false);
           this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -88,7 +96,11 @@ export class VaultComponent implements OnInit, OnDestroy {
                 case "syncCompleted":
                   if (message.successfully) {
                     await Promise.all([
-                      this.groupingsComponent.load(),
+                      this.vaultFilterComponent.reloadCollectionsAndFolders(
+                        new VaultFilter({
+                          selectedOrganizationId: this.organization.id,
+                        } as Partial<VaultFilter>)
+                      ),
                       this.ciphersComponent.refresh(),
                     ]);
                     this.changeDetectorRef.detectChanges();
@@ -98,27 +110,10 @@ export class VaultComponent implements OnInit, OnDestroy {
             });
           });
         }
-        await this.groupingsComponent.load();
-
-        if (qParams == null) {
-          this.groupingsComponent.selectedAll = true;
+        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        );
         await this.ciphersComponent.reload();
-        } else {
-          if (qParams.deleted) {
-            this.groupingsComponent.selectedTrash = true;
-            await this.filterDeleted(true);
-          } else if (qParams.type) {
-            const t = parseInt(qParams.type, null);
-            this.groupingsComponent.selectedType = t;
-            await this.filterCipherType(t, true);
-          } else if (qParams.collectionId) {
-            this.groupingsComponent.selectedCollectionId = qParams.collectionId;
-            await this.filterCollection(qParams.collectionId, true);
-          } else {
-            this.groupingsComponent.selectedAll = true;
-            await this.ciphersComponent.reload();
-          }
-        }
 
         if (qParams.viewEvents != null) {
           const cipher = this.ciphersComponent.ciphers.filter((c) => c.id === qParams.viewEvents);
@@ -126,6 +121,28 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.viewEvents(cipher[0]);
           }
         }
+
+        this.route.queryParams.subscribe(async (params) => {
+          if (params.cipherId) {
+            if (
+              // Handle users with implicit collection access since they use the admin endpoint
+              this.organization.canEditAnyCollection ||
+              (await this.cipherService.get(params.cipherId)) != null
+            ) {
+              this.editCipherId(params.cipherId);
+            } else {
+              this.platformUtilsService.showToast(
+                "error",
+                this.i18nService.t("errorOccurred"),
+                this.i18nService.t("unknownCipher")
+              );
+              this.router.navigate([], {
+                queryParams: { cipherId: null },
+                queryParamsHandling: "merge",
+              });
+            }
+          }
+        });
       });
     });
   }
@@ -134,63 +151,47 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
   }
 
-  async clearGroupingFilters() {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchVault");
-    await this.ciphersComponent.applyFilter();
-    this.clearFilters();
+  async applyVaultFilter(vaultFilter: VaultFilter) {
+    this.ciphersComponent.showAddNew = vaultFilter.status !== "trash";
+    this.activeFilter = vaultFilter;
+    await this.ciphersComponent.reload(this.buildFilter(), vaultFilter.status === "trash");
+    this.vaultFilterComponent.searchPlaceholder =
+      this.vaultService.calculateSearchBarLocalizationString(this.activeFilter);
     this.go();
   }
 
-  async filterCipherType(type: CipherType, load = false) {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchType");
-    const filter = (c: CipherView) => c.type === type;
-    if (load) {
-      await this.ciphersComponent.reload(filter);
-    } else {
-      await this.ciphersComponent.applyFilter(filter);
+  private buildFilter(): (cipher: CipherView) => boolean {
+    return (cipher) => {
+      let cipherPassesFilter = true;
+      if (this.activeFilter.status === "favorites" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.favorite;
       }
-    this.clearFilters();
-    this.type = type;
-    this.go();
+      if (this.activeFilter.status === "trash" && cipherPassesFilter) {
+        cipherPassesFilter = cipher.isDeleted;
       }
-
-  async filterCollection(collectionId: string, load = false) {
-    this.ciphersComponent.showAddNew = true;
-    this.ciphersComponent.deleted = false;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchCollection");
-    const filter = (c: CipherView) => {
-      if (collectionId === "unassigned") {
-        return c.collectionIds == null || c.collectionIds.length === 0;
-      } else {
-        return c.collectionIds != null && c.collectionIds.indexOf(collectionId) > -1;
+      if (this.activeFilter.cipherType != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
       }
+      if (
+        this.activeFilter.selectedFolder != null &&
+        this.activeFilter.selectedFolderId != "none" &&
+        cipherPassesFilter
+      ) {
+        cipherPassesFilter = cipher.folderId === this.activeFilter.selectedFolderId;
+      }
+      if (this.activeFilter.selectedCollectionId != null && cipherPassesFilter) {
+        cipherPassesFilter =
+          cipher.collectionIds != null &&
+          cipher.collectionIds.indexOf(this.activeFilter.selectedCollectionId) > -1;
+      }
+      if (this.activeFilter.selectedOrganizationId != null && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === this.activeFilter.selectedOrganizationId;
+      }
+      if (this.activeFilter.myVaultOnly && cipherPassesFilter) {
+        cipherPassesFilter = cipher.organizationId === null;
+      }
+      return cipherPassesFilter;
     };
-    if (load) {
-      await this.ciphersComponent.reload(filter);
-    } else {
-      await this.ciphersComponent.applyFilter(filter);
-    }
-    this.clearFilters();
-    this.collectionId = collectionId;
-    this.go();
-  }
-
-  async filterDeleted(load = false) {
-    this.ciphersComponent.showAddNew = false;
-    this.ciphersComponent.deleted = true;
-    this.groupingsComponent.searchPlaceholder = this.i18nService.t("searchTrash");
-    if (load) {
-      await this.ciphersComponent.reload(null, true);
-    } else {
-      await this.ciphersComponent.applyFilter(null);
-    }
-    this.clearFilters();
-    this.deleted = true;
-    this.go();
   }
 
   filterSearchText(searchText: string) {
@@ -232,7 +233,9 @@ export class VaultComponent implements OnInit, OnDestroy {
       (comp) => {
         if (this.organization.canEditAnyCollection) {
           comp.collectionIds = cipher.collectionIds;
-          comp.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+          comp.collections = this.vaultFilterComponent.collections.fullList.filter(
+            (c) => !c.readOnly
+          );
         }
         comp.organization = this.organization;
         comp.cipherId = cipher.id;
@@ -249,7 +252,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     component.organizationId = this.organization.id;
     component.type = this.type;
     if (this.organization.canEditAnyCollection) {
-      component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+      component.collections = this.vaultFilterComponent.collections.fullList.filter(
+        (c) => !c.readOnly
+      );
     }
     if (this.collectionId != null) {
       component.collectionIds = [this.collectionId];
@@ -257,12 +262,24 @@ export class VaultComponent implements OnInit, OnDestroy {
   }
 
   async editCipher(cipher: CipherView) {
+    return this.editCipherId(cipher?.id);
+  }
+
+  async editCipherId(cipherId: string) {
+    const cipher = await this.cipherService.get(cipherId);
+    if (cipher != null && cipher.reprompt != 0) {
+      if (!(await this.passwordRepromptService.showPasswordPrompt())) {
+        this.go({ cipherId: null });
+        return;
+      }
+    }
+
     const [modal, childComponent] = await this.modalService.openViewRef(
       AddEditComponent,
       this.cipherAddEditModalRef,
       (comp) => {
         comp.organization = this.organization;
-        comp.cipherId = cipher == null ? null : cipher.id;
+        comp.cipherId = cipherId;
         comp.onSavedCipher.subscribe(async () => {
           modal.close();
           await this.ciphersComponent.refresh();
@@ -278,6 +295,10 @@ export class VaultComponent implements OnInit, OnDestroy {
       }
     );
 
+    modal.onClosedPromise().then(() => {
+      this.go({ cipherId: null });
+    });
+
     return childComponent;
   }
 
@@ -286,7 +307,9 @@ export class VaultComponent implements OnInit, OnDestroy {
     component.cloneMode = true;
     component.organizationId = this.organization.id;
     if (this.organization.canEditAnyCollection) {
-      component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+      component.collections = this.vaultFilterComponent.collections.fullList.filter(
+        (c) => !c.readOnly
+      );
     }
     // Regardless of Admin state, the collection Ids need to passed manually as they are not assigned value
     // in the add-edit componenet
@@ -321,6 +344,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: queryParams,
+      queryParamsHandling: "merge",
       replaceUrl: true,
     });
   }

src/app/modules/vault/modules/organization-vault/organization-vault.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+
+import { VaultModule } from "../../vault.module";
+
+import { AddEditComponent } from "./add-edit.component";
+import { AttachmentsComponent } from "./attachments.component";
+import { CiphersComponent } from "./ciphers.component";
+import { CollectionsComponent } from "./collections.component";
+import { OrganizationVaultRoutingModule } from "./organization-vault-routing.module";
+import { OrganizationVaultComponent } from "./organization-vault.component";
+
+@NgModule({
+  imports: [VaultModule, OrganizationVaultRoutingModule],
+  declarations: [
+    OrganizationVaultComponent,
+    AddEditComponent,
+    AttachmentsComponent,
+    CiphersComponent,
+    CollectionsComponent,
+  ],
+  exports: [OrganizationVaultComponent],
+})
+export class OrganizationVaultModule {}

src/app/modules/vault/vault.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+
+import { LooseComponentsModule } from "../loose-components.module";
+import { SharedModule } from "../shared.module";
+import { VaultFilterModule } from "../vault-filter/vault-filter.module";
+
+import { VaultService } from "./vault.service";
+
+@NgModule({
+  imports: [SharedModule, VaultFilterModule, LooseComponentsModule],
+  exports: [SharedModule, VaultFilterModule, LooseComponentsModule],
+  providers: [
+    {
+      provide: VaultService,
+      useClass: VaultService,
+    },
+  ],
+})
+export class VaultModule {}

src/app/modules/vault/vault.service.ts

@@ -0,0 +1,29 @@
+import { VaultFilter } from "jslib-angular/modules/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.selectedCollectionId != null) {
+      return "searchCollection";
+    }
+    if (vaultFilter.selectedOrganizationId != null) {
+      return "searchOrganization";
+    }
+    if (vaultFilter.myVaultOnly) {
+      return "searchMyVault";
+    }
+
+    return "searchVault";
+  }
+}

src/app/organizations/guards/permissions.guard.ts

@@ -0,0 +1,58 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { Permissions } from "jslib-common/enums/permissions";
+
+@Injectable()
+export class PermissionsGuard implements CanActivate {
+  constructor(
+    private router: Router,
+    private organizationService: OrganizationService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private syncService: SyncService
+  ) {}
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    // TODO: We need to fix this issue once and for all.
+    if ((await this.syncService.getLastSync()) == null) {
+      await this.syncService.fullSync(false);
+    }
+
+    const org = await this.organizationService.get(route.params.organizationId);
+    if (org == null) {
+      return this.router.createUrlTree(["/"]);
+    }
+
+    if (!org.isOwner && !org.enabled) {
+      this.platformUtilsService.showToast(
+        "error",
+        null,
+        this.i18nService.t("organizationIsDisabled")
+      );
+      return this.router.createUrlTree(["/"]);
+    }
+
+    const permissions = route.data == null ? [] : (route.data.permissions as Permissions[]);
+    if (permissions != null && !org.hasAnyPermission(permissions)) {
+      // Handle linkable ciphers for organizations the user only has view access to
+      // https://bitwarden.atlassian.net/browse/EC-203
+      if (state.root.queryParamMap.has("cipherId")) {
+        return this.router.createUrlTree(["/vault"], {
+          queryParams: {
+            cipherId: state.root.queryParamMap.get("cipherId"),
+          },
+        });
+      }
+
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("accessDenied"));
+      return this.router.createUrlTree(["/"]);
+    }
+
+    return true;
+  }
+}

src/app/organizations/layouts/organization-layout.component.html

@@ -2,32 +2,11 @@
 <div class="org-nav" *ngIf="organization">
   <div class="container d-flex">
     <div class="d-flex flex-column">
-      <div class="my-auto d-flex align-items-center pl-1">
-        <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
-        <div class="org-name ml-3">
-          <span>{{ organization.name }}</span>
-          <small class="text-muted">{{ "organization" | i18n }}</small>
-        </div>
-        <div
-          class="ml-3 card border-danger text-danger bg-transparent"
-          *ngIf="!organization.enabled"
-        >
-          <div class="card-body py-2">
-            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-            {{ "organizationIsDisabled" | i18n }}
-          </div>
-        </div>
-        <div
-          class="ml-3 card border-info text-info bg-transparent"
-          *ngIf="organization.isProviderUser"
-        >
-          <div class="card-body py-2">
-            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-            {{ "accessingUsingProvider" | i18n: organization.providerName }}
-          </div>
-        </div>
-      </div>
-      <ul class="nav nav-tabs" *ngIf="showMenuBar">
+      <app-organization-switcher
+        class="my-auto pl-1"
+        [activeOrganization]="organization"
+      ></app-organization-switcher>
+      <ul class="nav nav-tabs">
         <li class="nav-item">
           <a class="nav-link" routerLink="vault" routerLinkActive="active">
             <i class="bwi bwi-lock" aria-hidden="true"></i>
@@ -46,7 +25,7 @@
             {{ "tools" | i18n }}
           </a>
         </li>
-        <li class="nav-item" *ngIf="organization.isOwner">
+        <li class="nav-item" *ngIf="showSettingsTab">
           <a class="nav-link" routerLink="settings" routerLinkActive="active">
             <i class="bwi bwi-cogs" aria-hidden="true"></i>
             {{ "settings" | i18n }}

src/app/organizations/layouts/organization-layout.component.ts

@@ -5,6 +5,8 @@ import { BroadcasterService } from "jslib-common/abstractions/broadcaster.servic
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { Organization } from "jslib-common/models/domain/organization";
 
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
 const BroadcasterSubscriptionId = "OrganizationLayoutComponent";
 
 @Component({
@@ -25,7 +27,7 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     document.body.classList.remove("layout_frontend");
-    this.route.params.subscribe(async (params) => {
+    this.route.params.subscribe(async (params: any) => {
       this.organizationId = params.organizationId;
       await this.load();
     });
@@ -48,23 +50,16 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     this.organization = await this.organizationService.get(this.organizationId);
   }
 
-  get showMenuBar() {
-    return this.showManageTab || this.showToolsTab || this.organization.isOwner;
-  }
-
   get showManageTab(): boolean {
-    return (
-      this.organization.canManageUsers ||
-      this.organization.canViewAllCollections ||
-      this.organization.canViewAssignedCollections ||
-      this.organization.canManageGroups ||
-      this.organization.canManagePolicies ||
-      this.organization.canAccessEventLogs
-    );
+    return NavigationPermissionsService.canAccessManage(this.organization);
   }
 
   get showToolsTab(): boolean {
-    return this.organization.canAccessImportExport || this.organization.canAccessReports;
+    return NavigationPermissionsService.canAccessTools(this.organization);
+  }
+
+  get showSettingsTab(): boolean {
+    return NavigationPermissionsService.canAccessSettings(this.organization);
   }
 
   get toolsRoute(): string {

src/app/organizations/layouts/organization-switcher.component.html

@@ -0,0 +1,68 @@
+<div *ngIf="loaded && activeOrganization != null" class="tw-flex">
+  <button
+    class="tw-flex tw-items-center tw-bg-background-alt tw-border-none"
+    type="button"
+    id="pickerButton"
+    [appA11yTitle]="'organizationPicker' | i18n"
+    [bitMenuTriggerFor]="orgPickerMenu"
+  >
+    <app-avatar
+      [data]="activeOrganization.name"
+      size="45"
+      [circle]="true"
+      [dynamic]="true"
+    ></app-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-border tw-border-solid tw-rounded tw-border-danger-500 tw-text-danger"
+      *ngIf="!activeOrganization.enabled"
+    >
+      <div class="tw-py-2 tw-px-5">
+        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
+        {{ "organizationIsDisabled" | i18n }}
+      </div>
+    </div>
+    <div
+      class="tw-ml-3 tw-border tw-border-solid tw-rounded tw-border-info-500 tw-text-info"
+      *ngIf="activeOrganization.isProviderUser"
+    >
+      <div class="tw-py-2 tw-px-5">
+        <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-p-0 tw-m-0">
+      <li *ngFor="let org of organizations" class="tw-list-none tw-flex tw-flex-col" role="none">
+        <a bit-menu-item [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 bit-menu-item routerLink="/create-organization">
+          <i class="bwi bwi-plus mr-2"></i>
+          {{ "newOrganization" | i18n }}</a
+        >
+      </li>
+    </ul>
+  </bit-menu>
+</div>

src/app/organizations/layouts/organization-switcher.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
+
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+@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: Organization[] = [];
+
+  loaded = false;
+
+  async ngOnInit() {
+    await this.load();
+  }
+
+  async load() {
+    const orgs = await this.organizationService.getAll();
+    this.organizations = orgs
+      .filter((org) => NavigationPermissionsService.canAccessAdmin(org))
+      .sort(Utils.getSortFunction(this.i18nService, "name"));
+
+    this.loaded = true;
+  }
+}

src/app/organizations/manage/collections.component.ts

@@ -20,8 +20,9 @@ import {
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { CollectionView } from "jslib-common/models/view/collectionView";
 
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { CollectionAddEditComponent } from "./collection-add-edit.component";
-import { EntityUsersComponent } from "./entity-users.component";
 
 @Component({
   selector: "app-org-manage-collections",

src/app/organizations/manage/groups.component.ts

@@ -12,7 +12,8 @@ import { SearchService } from "jslib-common/abstractions/search.service";
 import { Utils } from "jslib-common/misc/utils";
 import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
-import { EntityUsersComponent } from "./entity-users.component";
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { GroupAddEditComponent } from "./group-add-edit.component";
 
 @Component({

src/app/organizations/manage/manage-routing.module.ts

@@ -0,0 +1,89 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+import { PermissionsGuard } from "../guards/permissions.guard";
+import { PoliciesComponent } from "../policies/policies.component";
+import { NavigationPermissionsService } from "../services/navigation-permissions.service";
+
+import { CollectionsComponent } from "./collections.component";
+import { EventsComponent } from "./events.component";
+import { GroupsComponent } from "./groups.component";
+import { ManageComponent } from "./manage.component";
+import { PeopleComponent } from "./people.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: ManageComponent,
+    canActivate: [PermissionsGuard],
+    data: {
+      permissions: NavigationPermissionsService.getPermissions("manage"),
+    },
+    children: [
+      {
+        path: "",
+        pathMatch: "full",
+        redirectTo: "people",
+      },
+      {
+        path: "collections",
+        component: CollectionsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "collections",
+          permissions: [
+            Permissions.CreateNewCollections,
+            Permissions.EditAnyCollection,
+            Permissions.DeleteAnyCollection,
+            Permissions.EditAssignedCollections,
+            Permissions.DeleteAssignedCollections,
+          ],
+        },
+      },
+      {
+        path: "events",
+        component: EventsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "eventLogs",
+          permissions: [Permissions.AccessEventLogs],
+        },
+      },
+      {
+        path: "groups",
+        component: GroupsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "groups",
+          permissions: [Permissions.ManageGroups],
+        },
+      },
+      {
+        path: "people",
+        component: PeopleComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "people",
+          permissions: [Permissions.ManageUsers, Permissions.ManageUsersPassword],
+        },
+      },
+      {
+        path: "policies",
+        component: PoliciesComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          titleId: "policies",
+          permissions: [Permissions.ManagePolicies],
+        },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ManageRoutingModule {}

src/app/organizations/manage/manage.module.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../modules/shared.module";
+import { PoliciesModule } from "../policies/policies.module";
+
+import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
+import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
+import { BulkStatusComponent } from "./bulk/bulk-status.component";
+import { CollectionAddEditComponent } from "./collection-add-edit.component";
+import { CollectionsComponent as ManageCollectionsComponent } from "./collections.component";
+import { EntityEventsComponent } from "./entity-events.component";
+import { EventsComponent } from "./events.component";
+import { GroupAddEditComponent } from "./group-add-edit.component";
+import { GroupsComponent } from "./groups.component";
+import { ManageRoutingModule } from "./manage-routing.module";
+import { ManageComponent } from "./manage.component";
+import { PeopleComponent } from "./people.component";
+import { PolicyEditComponent } from "./policy-edit.component";
+import { ResetPasswordComponent } from "./reset-password.component";
+import { UserAddEditComponent } from "./user-add-edit.component";
+import { UserConfirmComponent } from "./user-confirm.component";
+import { UserGroupsComponent } from "./user-groups.component";
+
+@NgModule({
+  imports: [CommonModule, SharedModule, PoliciesModule, ManageRoutingModule],
+  declarations: [
+    BulkConfirmComponent,
+    BulkRemoveComponent,
+    BulkStatusComponent,
+    CollectionAddEditComponent,
+    EntityEventsComponent,
+    EventsComponent,
+    GroupAddEditComponent,
+    GroupsComponent,
+    ManageCollectionsComponent,
+    ManageComponent,
+    PeopleComponent,
+    PolicyEditComponent,
+    ResetPasswordComponent,
+    UserAddEditComponent,
+    UserConfirmComponent,
+    UserGroupsComponent,
+  ],
+})
+export class ManageModule {}

src/app/organizations/manage/user-add-edit.component.html

@@ -52,7 +52,7 @@
             target="_blank"
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/provider-users/"
+            href="https://bitwarden.com/help/user-types-access-control/"
           >
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>

src/app/organizations/organizations-routing.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { AuthGuard } from "jslib-angular/guards/auth.guard";
+
+import { PermissionsGuard } from "./guards/permissions.guard";
+import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
+import { NavigationPermissionsService } from "./services/navigation-permissions.service";
+
+const routes: Routes = [
+  {
+    path: ":organizationId",
+    component: OrganizationLayoutComponent,
+    canActivate: [AuthGuard, PermissionsGuard],
+    data: {
+      permissions: NavigationPermissionsService.getPermissions("admin"),
+    },
+    children: [
+      { path: "", pathMatch: "full", redirectTo: "vault" },
+      {
+        path: "vault",
+        loadChildren: async () =>
+          (await import("../modules/vault/modules/organization-vault/organization-vault.module"))
+            .OrganizationVaultModule,
+      },
+      {
+        path: "tools",
+        loadChildren: async () => (await import("./tools/tools.module")).ToolsModule,
+      },
+      {
+        path: "manage",
+        loadChildren: async () => (await import("./manage/manage.module")).ManageModule,
+      },
+      {
+        path: "settings",
+        loadChildren: async () => (await import("./settings/settings.module")).SettingsModule,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationsRoutingModule {}

src/app/organizations/organizations.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { LayoutsModule } from "../layouts/layouts.module";
+import { SharedModule } from "../modules/shared.module";
+
+import { OrganizationLayoutComponent } from "./layouts/organization-layout.component";
+import { OrganizationSwitcherComponent } from "./layouts/organization-switcher.component";
+import { OrganizationsRoutingModule } from "./organizations-routing.module";
+import { AcceptFamilySponsorshipComponent } from "./sponsorships/accept-family-sponsorship.component";
+import { FamiliesForEnterpriseSetupComponent } from "./sponsorships/families-for-enterprise-setup.component";
+
+@NgModule({
+  imports: [CommonModule, OrganizationsRoutingModule, SharedModule, LayoutsModule],
+  declarations: [
+    AcceptFamilySponsorshipComponent,
+    FamiliesForEnterpriseSetupComponent,
+    OrganizationLayoutComponent,
+    OrganizationSwitcherComponent,
+  ],
+})
+export class OrganizationsModule {}