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,9 +11,11 @@ on:
     branches-ignore:
       - "l10n_master"
       - "gh-pages"
+      - "deploy"
     paths-ignore:
       - '.github/workflows/**'
 
+
 jobs:
   cloc:
     name: CLOC
@@ -30,6 +32,7 @@ jobs:
       - name: Print lines of code
         run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
 
+
   lint:
     name: Lint
     runs-on: ubuntu-20.04
@@ -50,6 +53,7 @@ jobs:
       - name: Run linter
         run: npm run lint
 
+
   setup:
     name: Setup
     runs-on: ubuntu-20.04
@@ -63,6 +67,7 @@ jobs:
         id: version
         run: echo "::set-output name=value::${GITHUB_SHA:0:7}"
 
+
   build-oss-selfhost:
     name: Build OSS zip
     runs-on: ubuntu-20.04
@@ -72,17 +77,15 @@ jobs:
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+      - name: Set up Node
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -94,9 +97,6 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -112,6 +112,7 @@ jobs:
           path: ./web-${{ env._VERSION }}-selfhosted-open-source.zip
           if-no-files-found: error
 
+
   build-cloud:
     name: Build Cloud zip
     runs-on: ubuntu-20.04
@@ -121,17 +122,15 @@ jobs:
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+      - name: Set up Node
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -143,9 +142,6 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -161,6 +157,7 @@ jobs:
           path: ./web-${{ env._VERSION }}-cloud-COMMERCIAL.zip
           if-no-files-found: error
 
+
   build-commercial-selfhost:
     name: Build SelfHost Docker image
     runs-on: ubuntu-20.04
@@ -170,17 +167,15 @@ jobs:
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+      - name: Set up Node
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -193,16 +188,13 @@ jobs:
           echo "GitHub event: $GITHUB_EVENT"
 
       - name: Setup DCT
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
         id: setup-dct
         uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
         with:
           azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
           azure-keyvault-name: "bitwarden-prod-kv"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -237,11 +229,11 @@ jobs:
         run: docker tag bitwarden/web bitwarden/web:dev
 
       - name: Tag hotfix branch
-        if: github.ref == 'refs/heads/hotfix'
-        run: docker tag bitwarden/web bitwarden/web:hotfix
+        if: github.ref == 'refs/heads/hotfix-rc'
+        run: docker tag bitwarden/web bitwarden/web:hotfix-rc
 
       - name: List Docker images
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
         run: docker images
 
       - name: Push rc image
@@ -259,16 +251,42 @@ jobs:
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
       - name: Push hotfix image
-        if: github.ref == 'refs/heads/hotfix'
-        run: docker push bitwarden/web:hotfix
+        if: github.ref == 'refs/heads/hotfix-rc'
+        run: docker push bitwarden/web:hotfix-rc
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
       - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc'
+        run: |
+          docker logout
+          echo "DOCKER_CONTENT_TRUST=0" >> $GITHUB_ENV
+
+      - name: Login to Azure - QA Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_QA_KV_CREDENTIALS }}
+
+      - name: Login to Azure ACR
+        run: az acr login -n bitwardenqa
+
+      - name: Tag and Push RC to Azure ACR QA registry
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")  # slash safe branch name
+          if [[ "$IMAGE_TAG" == "master" ]]; then
+            IMAGE_TAG=dev
+          fi
+          docker tag bitwarden/web \
+            $REGISTRY/web-sh:$IMAGE_TAG
+          docker push $REGISTRY/web-sh:$IMAGE_TAG
+
+      - name: Log out of Docker
         run: docker logout
 
+
   build-qa:
     name: Build Docker images for QA environment
     runs-on: ubuntu-20.04
@@ -276,17 +294,15 @@ jobs:
       - setup
       - lint
     steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+      - name: Set up Node
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -306,9 +322,6 @@ jobs:
       - name: Log into container registry
         run: az acr login -n bitwardenqa
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
@@ -364,34 +377,29 @@ jobs:
       - name: Log out of Docker
         run: docker logout
 
+
   windows:
     name: Test code on Windows
     runs-on: windows-2019
     steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
       - name: Set up NuGet
         uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
         with:
           nuget-version: "latest"
 
-      - name: Set up MSBuild
-        uses: microsoft/setup-msbuild@c26a08ba26249b81327e26f6ef381897b6a8754d
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-
       - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
         with:
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
           node-version: "16"
 
       - name: Print environment
         run: |
           nuget help | grep Version
-          msbuild -version
           node --version
           npm --version
           echo "GitHub ref: $GITHUB_REF"
@@ -400,15 +408,13 @@ jobs:
           GITHUB_REF: ${{ github.ref }}
           GITHUB_EVENT: ${{ github.event_name }}
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Install dependencies
         run: npm ci
 
       - name: NPM build
         run: npm run build:bit:cloud
 
+
   crowdin-push:
     name: Crowdin Push
     if: github.ref == 'refs/heads/master'
@@ -447,6 +453,7 @@ jobs:
           upload_sources: true
           upload_translations: false
 
+
   check-failures:
     name: Check for failures
     if: always()

.github/workflows/release.yml

@@ -19,16 +19,16 @@ 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
         if: ${{ github.event.inputs.release_type != 'Dry Run' }}
         run: |
-          if [[ "$GITHUB_REF" != "refs/heads/rc" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix" ]]; then
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix-rc" ]]; then
             echo "==================================="
-            echo "[!] Can only release from the 'rc' or 'hotfix' branches"
+            echo "[!] Can only release from the 'rc' or 'hotfix-rc' branches"
             echo "==================================="
             exit 1
           fi
@@ -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>

SECURITY.md

@@ -1,39 +1,11 @@
-Bitwarden believes that working with security researchers across the globe is crucial to keeping our
-users safe. If you believe you've found a security issue in our product or service, we encourage you to
-notify us. We welcome working with you to resolve the issue promptly. Thanks in advance!
+Bitwarden believes that working with security researchers across the globe is crucial to keeping our users safe. If you believe you've found a security issue in our product or service, we encourage you to please submit a report through our [HackerOne Program](https://hackerone.com/bitwarden/). We welcome working with you to resolve the issue promptly. Thanks in advance!
 
 # Disclosure Policy
 
-- Let us know as soon as possible upon discovery of a potential security issue, and we'll make every
-  effort to quickly resolve the issue.
-- Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a
-  third-party. We may publicly disclose the issue before resolving it, if appropriate.
-- Make a good faith effort to avoid privacy violations, destruction of data, and interruption or
-  degradation of our service. Only interact with accounts you own or with explicit permission of the
-  account holder.
-- If you would like to encrypt your report, please use the PGP key with long ID
-  `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
-
-# In-scope
-
-- Security issues in any current release of Bitwarden. This includes the web vault, browser extension,
-  and mobile apps (iOS and Android). Product downloads are available at https://bitwarden.com. Source
-  code is available at https://github.com/bitwarden.
-
-# Exclusions
-
-The following bug classes are out-of scope:
-
-- Bugs that are already reported on any of Bitwarden's issue trackers (https://github.com/bitwarden),
-  or that we already know of. Note that some of our issue tracking is private.
-- Issues in an upstream software dependency (ex: Xamarin, ASP.NET) which are already reported to the
-  upstream maintainer.
-- Attacks requiring physical access to a user's device.
-- Self-XSS
-- Issues related to software or protocols not under Bitwarden's control
-- Vulnerabilities in outdated versions of Bitwarden
-- Missing security best practices that do not directly lead to a vulnerability
-- Issues that do not have any impact on the general public
+- Let us know as soon as possible upon discovery of a potential security issue, and we'll make every effort to quickly resolve the issue.
+- Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a third-party. We may publicly disclose the issue before resolving it, if appropriate.
+- Make a good faith effort to avoid privacy violations, destruction of data, and interruption or degradation of our service. Only interact with accounts you own or with explicit permission of the account holder.
+- If you would like to encrypt your report, please use the PGP key with long ID `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
 
 While researching, we'd like to ask you to refrain from:
 
@@ -42,4 +14,8 @@ While researching, we'd like to ask you to refrain from:
 - Social engineering (including phishing) of Bitwarden staff or contractors
 - Any physical attempts against Bitwarden property or data centers
 
+# We want to help you!
+
+If you have something that you feel is close to exploitation, or if you'd like some information regarding the internal API, or generally have any questions regarding the app that would help in your efforts, please email us at https://bitwarden.com/contact and ask for that information. As stated above, Bitwarden wants to help you find issues, and is more than willing to help.
+
 Thank you for helping keep Bitwarden and our users safe!

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/main.ts

@@ -6,6 +6,7 @@ import "jquery";
 import "popper.js";
 
 require("src/scss/styles.scss");
+require("src/scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

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.26.2",
+  "version": "2022.05.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -43,6 +43,7 @@
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
+    "autoprefixer": "^10.4.2",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.0.0",
@@ -59,12 +60,15 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
     "prettier": "2.5.1",
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "sass": "^1.32.10",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.18",
     "terser-webpack-plugin": "^5.2.5",
     "ts-loader": "^9.2.5",
     "typescript": "4.3.5",
@@ -86,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",
@@ -94,13 +98,14 @@
     "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",
     "sweetalert2": "^10.16.6",
     "webcrypto-shim": "0.1.7",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.2",
+    "zone.js": "0.11.4"
   },
   "engines": {
     "node": "~16",

postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};

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;
@@ -197,6 +203,8 @@ export class AppComponent implements OnDestroy, OnInit {
       new SendOptionsPolicy(),
       new ResetPasswordPolicy(),
     ]);
+
+    this.setFullWidth();
   }
 
   ngOnDestroy() {

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,73 +32,62 @@
             <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>
-            <app-avatar
-              [data]="name"
-              [email]="email"
-              size="25"
-              fontSize="14"
-              [circle]="true"
-            ></app-avatar>
-            <div class="ml-2 overflow-hidden">
-              <span>{{ "loggedInAs" | i18n }}</span>
-              <small class="text-muted">{{ name }}</small>
+          <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"
+                size="25"
+                fontSize="14"
+                [circle]="true"
+              ></app-avatar>
+              <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
+                <span>{{ "loggedInAs" | i18n }}</span>
+                <small class="tw-text-muted tw-block tw-overflow-hidden tw-whitespace-nowrap">{{
+                  name
+                }}</small>
+              </div>
             </div>
+            <bit-menu-divider></bit-menu-divider>
+            <a bit-menu-item routerLink="/settings/account">
+              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+              {{ "accountSettings" | i18n }}
+            </a>
+            <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 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>
+            <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 bit-menu-item type="button" (click)="logOut()">
+              <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+              {{ "logOut" | i18n }}
+            </button>
           </div>
-          <div class="dropdown-divider"></div>
-          <a class="dropdown-item" href="#" routerLink="/settings/account">
-            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
-            {{ "myAccount" | i18n }}
-          </a>
-          <a
-            class="dropdown-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"
-          >
-            <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()">
-            <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
-            {{ "lockNow" | i18n }}
-          </button>
-          <button type="button" class="dropdown-item" (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/main.ts

@@ -6,6 +6,7 @@ import "jquery";
 import "popper.js";
 
 require("../scss/styles.scss");
+require("../scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

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,52 +29,52 @@
         ></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="d-flex">
-          <div class="mr-3">
-            <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-            <input
-              type="search"
-              class="form-control form-control-sm"
-              id="search"
-              placeholder="{{ 'search' | i18n }}"
-              name="SearchText"
-              [(ngModel)]="searchText"
-            />
+        <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>
+              <input
+                type="search"
+                class="form-control form-control-sm"
+                id="search"
+                placeholder="{{ 'search' | i18n }}"
+                name="SearchText"
+                [(ngModel)]="searchText"
+              />
+            </div>
+            <div class="btn-group btn-group-sm" role="group">
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: !showSelected }"
+                (click)="filterSelected(false)"
+              >
+                {{ "all" | i18n }}
+              </button>
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: showSelected }"
+                (click)="filterSelected(true)"
+              >
+                {{ "selected" | i18n }}
+                <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
+                  selectedCount
+                }}</span>
+              </button>
+            </div>
           </div>
-          <div class="btn-group btn-group-sm" role="group">
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: !showSelected }"
-              (click)="filterSelected(false)"
-            >
-              {{ "all" | i18n }}
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: showSelected }"
-              (click)="filterSelected(true)"
-            >
-              {{ "selected" | i18n }}
-              <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
-                selectedCount
-              }}</span>
-            </button>
-          </div>
-        </div>
-        <ng-container *ngIf="!searchedUsers.length">
-          <hr />
-          {{ "noUsersInList" | i18n }}
-        </ng-container>
-        <ng-container *ngIf="searchedUsers.length">
-          <table class="table table-hover table-list mb-0">
+          <ng-container *ngIf="!searchedUsers.length">
+            <hr />
+            {{ "noUsersInList" | i18n }}
+          </ng-container>
+          <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>
+        </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();
-    }
+    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);
-        });
-    }
-
-    try {
-      await this.actionPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
-      await this.load();
-    } catch (e) {
-      this.logService.error(e);
-    }
+    this.modalService.open(EnrollMasterPasswordReset, {
+      allowMultipleModals: true,
+      data: {
+        organization: org,
+      },
+    });
   }
 }

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)"
-        (onAddFolder)="addFolder()"
-        (onEditFolder)="editFolder($event.id)"
-        (onCollectionClicked)="filterCollection($event.id)"
-        (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-vault-groupings>
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
+              [activeFilter]="activeFilter"
+              (onFilterChange)="applyVaultFilter($event)"
+              (onAddFolder)="addFolder()"
+              (onEditFolder)="editFolder($event.id)"
+              (onSearchTextChanged)="filterSearchText($event)"
+            ></app-vault-filter>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="col-6">
+    <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
-        [showFolders]="false"
-        [showFavorites]="false"
-        [showTrash]="true"
-        (onAllClicked)="clearGroupingFilters()"
-        (onCipherTypeClicked)="filterCipherType($event)"
-        (onCollectionClicked)="filterCollection($event.id)"
-        (onSearchTextChanged)="filterSearchText($event)"
-        (onTrashClicked)="filterDeleted()"
-      >
-      </app-org-vault-groupings>
+      <div class="groupings">
+        <div class="content">
+          <div class="inner-content">
+            <app-vault-filter
+              #vaultFilter
+              [showFolders]="false"
+              [showFavorites]="false"
+              [activeFilter]="activeFilter"
+              [showOrgFilter]="false"
+              (onFilterChange)="applyVaultFilter($event)"
+              (onSearchTextChanged)="filterSearchText($event)"
+            ></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.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();
-          }
-        }
+        await this.vaultFilterComponent.reloadCollectionsAndFolders(
+          new VaultFilter({ selectedOrganizationId: this.organization.id } as Partial<VaultFilter>)
+        );
+        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);
-    }
-    this.clearFilters();
-    this.type = type;
-    this.go();
-  }
-
-  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;
+  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 != 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 {}