Bumped version to 2.28.0 (#1603)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
(cherry picked from commit 8304104a7a)

.eslintignore

@@ -0,0 +1,8 @@
+**/dist
+**/build
+jslib
+webpack.config.js
+scripts/optimize.js
+config.js
+
+**/node_modules

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "extends": ["./jslib/shared/eslintrc.json"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "jslib-*/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "src/**/*",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ]
+  }
+}

.github/workflows/build.yml

@@ -11,6 +11,9 @@ on:
     branches-ignore:
       - "l10n_master"
       - "gh-pages"
+    paths-ignore:
+      - '.github/workflows/**'
+
 
 jobs:
   cloc:
@@ -28,6 +31,28 @@ 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
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@a12a3943b4bdde767164f792f33f40b04645d846
+
+      - name: Cache npm
+        id: npm-cache
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        with:
+          path: "~/.npm"
+          key: ${{ runner.os }}-npm-lint-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+
   setup:
     name: Setup
     runs-on: ubuntu-20.04
@@ -41,24 +66,25 @@ 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
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
+      - name: Checkout repo
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-        with:
-          node-version: "16"
 
-      - name: Cache npm
+      - name: Set up Node
-        id: npm-cache
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
         with:
-          path: "~/.npm"
+          cache: 'npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -70,9 +96,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
 
@@ -88,24 +111,25 @@ 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
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
+      - name: Checkout repo
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-        with:
-          node-version: "16"
 
-      - name: Cache npm
+      - name: Set up Node
-        id: npm-cache
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
         with:
-          path: "~/.npm"
+          cache: 'npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -117,9 +141,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
 
@@ -135,24 +156,25 @@ 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
-    needs: setup
+    needs:
+      - setup
+      - lint
     env:
       _VERSION: ${{ needs.setup.outputs.version }}
     steps:
-      - name: Set up Node
+      - name: Checkout repo
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-        with:
-          node-version: "16"
 
-      - name: Cache npm
+      - name: Set up Node
-        id: npm-cache
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
         with:
-          path: "~/.npm"
+          cache: 'npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -165,19 +187,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: Restore
-        run: dotnet tool restore
-
       - name: Install dependencies
         run: npm ci
 
@@ -212,11 +228,11 @@ jobs:
         run: docker tag bitwarden/web bitwarden/web:dev
 
       - name: Tag hotfix branch
-        if: github.ref == 'refs/heads/hotfix'
+        if: github.ref == 'refs/heads/hotfix-rc'
-        run: docker tag bitwarden/web bitwarden/web:hotfix
+        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
@@ -234,31 +250,58 @@ jobs:
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
       - name: Push hotfix image
-        if: github.ref == 'refs/heads/hotfix'
+        if: github.ref == 'refs/heads/hotfix-rc'
-        run: docker push bitwarden/web:hotfix
+        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
+    needs:
+      - setup
+      - lint
     steps:
-      - name: Set up Node
+      - name: Checkout repo
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-        with:
-          node-version: "16"
 
-      - name: Cache npm
+      - name: Set up Node
-        id: npm-cache
+        uses: actions/setup-node@9ced9a43a244f3ac94f13bfd896db8c8f30da67a  # v3.0.0
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
         with:
-          path: "~/.npm"
+          cache: 'npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          cache-dependency-path: '**/package-lock.json'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -278,12 +321,6 @@ jobs:
       - name: Log into container registry
         run: az acr login -n bitwardenqa
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Restore
-        run: dotnet tool restore
-
       - name: Install dependencies
         run: npm ci
 
@@ -339,35 +376,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
-          dotnet --info
           node --version
           npm --version
           echo "GitHub ref: $GITHUB_REF"
@@ -376,18 +407,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: Run linter
-        run: npm run lint
-
       - name: NPM build
         run: npm run build:bit:cloud
 
+
   crowdin-push:
     name: Crowdin Push
     if: github.ref == 'refs/heads/master'
@@ -426,6 +452,7 @@ jobs:
           upload_sources: true
           upload_translations: false
 
+
   check-failures:
     name: Check for failures
     if: always()
@@ -433,6 +460,7 @@ jobs:
     needs:
       - cloc
       - setup
+      - lint
       - build-oss-selfhost
       - build-cloud
       - build-commercial-selfhost
@@ -444,6 +472,7 @@ jobs:
         if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
         env:
           CLOC_STATUS: ${{ needs.cloc.result }}
+          LINT_STATUS: ${{ needs.lint.result }}
           SETUP_STATUS: ${{ needs.setup.result }}
           BUILD_OSS_SELFHOST_STATUS: ${{ needs.build-oss-selfhost.result }}
           BUILD_CLOUD_STATUS: ${{ needs.build-cloud.result }}
@@ -454,6 +483,8 @@ jobs:
         run: |
           if [ "$CLOC_STATUS" = "failure" ]; then
               exit 1
+          elif [ "$LINT_STATUS" = "failure" ]; then
+              exit 1
           elif [ "$SETUP_STATUS" = "failure" ]; then
               exit 1
           elif [ "$BUILD_OSS_SELFHOST_STATUS" = "failure" ]; then

.github/workflows/enforce-labels.yml

@@ -0,0 +1,16 @@
+---
+name: Enforce PR labels
+
+on:
+  pull_request:
+    types: [labeled, unlabeled, opened, edited, synchronize]
+jobs:
+  enforce-label:
+    name: EnforceLabel
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Enforce Label
+        uses: yogevbd/enforce-label-action@8d1e1709b1011e6d90400a0e6cf7c0b77aa5efeb
+        with:
+          BANNED_LABELS: "hold"
+          BANNED_LABELS_DESCRIPTION: "PRs on hold cannot be merged"

.github/workflows/release.yml

@@ -12,6 +12,7 @@ on:
         options:
           - Initial Release
           - Redeploy
+          - Dry Run
 
 jobs:
   setup:
@@ -20,19 +21,20 @@ jobs:
     outputs:
       release_version: ${{ steps.version.outputs.package }}
       tag_version: ${{ steps.version.outputs.tag }}
-      branch-name: ${{ steps.branch.outputs.branch-name }}
+      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
 
       - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # 2.4.0
 
       - name: Check Release Version
         id: version
@@ -55,15 +57,17 @@ jobs:
         id: branch
         run: |
           BRANCH_NAME=$(basename ${{ github.ref }})
-          echo "::set-output name=branch-name::$BRANCH_NAME"
+          echo "::set-output name=branch_name::$BRANCH_NAME"
+
 
   self-host:
     name: Release self-host docker
     runs-on: ubuntu-20.04
     needs: setup
     env:
-      _BRANCH_NAME: ${{ needs.setup.outputs.branch-name }}
+      _BRANCH_NAME: ${{ needs.setup.outputs.branch_name }}
       _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      _RELEASE_OPTION: ${{ github.event.inputs.release_type }}
     steps:
       - name: Print environment
         run: |
@@ -71,7 +75,12 @@ jobs:
           docker --version
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
+          echo "Github Release Option: $_RELEASE_OPTION"
 
+      - name: Checkout repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579
+
+      ########## DockerHub ##########
       - name: Setup DCT
         id: setup-dct
         uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
@@ -79,21 +88,25 @@ jobs:
           azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
           azure-keyvault-name: "bitwarden-prod-kv"
 
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
       - name: Pull latest selfhost image
-        run: docker pull bitwarden/web:$_BRANCH_NAME
+        run: |
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
+            docker pull bitwarden/web:latest
+          else
+            docker pull bitwarden/web:$_BRANCH_NAME
+          fi
 
       - name: Tag version and latest
         run: |
-          docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:$_RELEASE_VERSION
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
-          docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:latest
+            docker tag bitwarden/web:latest bitwarden/web:dryrun
-
+          else
-      - name: List Docker images
+            docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:$_RELEASE_VERSION
-        run: docker images
+            docker tag bitwarden/web:$_BRANCH_NAME bitwarden/web:latest
+          fi
 
       - name: Push version and latest image
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
@@ -101,9 +114,49 @@ jobs:
           docker push bitwarden/web:$_RELEASE_VERSION
           docker push bitwarden/web:latest
 
+      - name: Log out of Docker and disable Docker Notary
+        run: |
+          docker logout
+          echo "DOCKER_CONTENT_TRUST=0" >> $GITHUB_ENV
+
+      ########## ACR ##########
+      - 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 version and latest
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          if [[ "${{ github.event.inputs.release_type }}" == "Dry Run" ]]; then
+            docker tag bitwarden/web:latest $REGISTRY/web:dryrun
+          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
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        env:
+          REGISTRY: bitwardenqa.azurecr.io
+        run: |
+          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
     runs-on: ubuntu-20.04
@@ -115,7 +168,7 @@ jobs:
       _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
         with:
           ref: gh-pages
 
@@ -125,7 +178,7 @@ jobs:
           git push -u origin deploy-$_TAG_VERSION
 
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # v2.4.0
 
       - name: Setup git config
         run: |
@@ -139,7 +192,7 @@ jobs:
         with:
           workflow: build.yml
           workflow_conclusion: success
-          branch: ${{ needs.setup.outputs.branch-name }}
+          branch: ${{ needs.setup.outputs.branch_name }}
           artifacts: web-*-cloud-COMMERCIAL.zip
 
       # This should result in a build directory in the current working directory
@@ -147,7 +200,7 @@ jobs:
         run: unzip web-*-cloud-COMMERCIAL.zip
 
       - name: Deploy GitHub Pages
-        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
+        uses: crazy-max/ghaction-github-pages@a117e4aa1fb4854d021546d2abdfac95be568a3a  # v2.6.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -155,8 +208,10 @@ jobs:
           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
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
         env:
           PR_BRANCH: deploy-${{ env._TAG_VERSION }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -166,6 +221,7 @@ jobs:
             --base gh-pages \
             --head "$PR_BRANCH"
 
+
   release:
     name: Create GitHub Release
     runs-on: ubuntu-20.04
@@ -179,7 +235,7 @@ jobs:
         with:
           workflow: build.yml
           workflow_conclusion: success
-          branch: ${{ needs.setup.outputs.branch-name }}
+          branch: ${{ needs.setup.outputs.branch_name }}
           artifacts: "web-*-selfhosted-COMMERCIAL.zip,
             web-*-selfhosted-open-source.zip"
 
@@ -189,7 +245,8 @@ jobs:
           mv web-*-selfhosted-open-source.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip
 
       - name: Create release
-        uses: ncipollo/release-action@95215a3cb6e6a1908b3c44e00b4fdb15548b1e09
+        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
+        uses: ncipollo/release-action@40bb172bd05f266cf9ba4ff965cb61e9ee5f6d01
         with:
           name: "Version ${{ needs.setup.outputs.release_version }}"
           commit: ${{ github.sha }}
@@ -199,3 +256,20 @@ jobs:
             web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
           token: ${{ secrets.GITHUB_TOKEN }}
           draft: true
+
+
+  dry-run:
+    name: Dry Run Cleanup
+    runs-on: ubuntu-20.04
+    if: ${{ github.event.inputs.release_type == 'Dry Run' }}
+    env:
+      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
+    needs:
+      - setup
+      - release
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@ec3a7ce113134d7a93b817d10a8272cb61118579  # 2.4.0
+
+      - name: Remove deploy branch
+        run: git push origin --delete deploy-$_TAG_VERSION

.github/workflows/workflow-linter.yml

@@ -0,0 +1,11 @@
+---
+name: Workflow Linter
+
+on:
+  pull_request:
+    paths:
+      - .github/workflows/**
+
+jobs:
+  call-workflow:
+    uses: bitwarden/gh-actions/.github/workflows/workflow-linter.yml@master

Dockerfile

@@ -1,4 +1,4 @@
-FROM bitwarden/server:dev
+FROM bitwarden/server
 
 LABEL com.bitwarden.product="bitwarden"
 

README.md

@@ -61,6 +61,10 @@ You can also manually adjusting your API endpoint settings by adding `config/loc
 
 Where the `urls` object is defined by the [Urls type in jslib](https://github.com/bitwarden/jslib/blob/master/common/src/abstractions/environment.service.ts).
 
+## We're Hiring!
+
+Interested in contributing in a big way? Consider joining our team! We're hiring for many positions. Please take a look at our [Careers page](https://bitwarden.com/careers/) to see what opportunities are currently open as well as what it's like to work at Bitwarden.
+
 ## Contribute
 
 Code contributions are welcome! Please commit any pull requests against the `master` branch. Learn more about how to contribute by reading the [`CONTRIBUTING.md`](CONTRIBUTING.md) file.

SECURITY.md

@@ -1,39 +1,11 @@
-Bitwarden believes that working with security researchers across the globe is crucial to keeping our
+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!
-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!
 
 # Disclosure Policy
 
-- Let us know as soon as possible upon discovery of a potential security issue, and we'll make every
+- 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.
-  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.
-- Provide us a reasonable amount of time to resolve the issue before any disclosure to the public or a
+- 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.
-  third-party. We may publicly disclose the issue before resolving it, if appropriate.
+- If you would like to encrypt your report, please use the PGP key with long ID `0xDE6887086F892325FEC04CC0D847525B6931381F` (available in the public keyserver pool).
-- 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
 
 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.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 
 import { AppComponent as BaseAppComponent } from "src/app/app.component";
+
 import { DisablePersonalVaultExportPolicy } from "./policies/disable-personal-vault-export.component";
 import { MaximumVaultTimeoutPolicy } from "./policies/maximum-vault-timeout.component";
 

bitwarden_license/src/app/app.module.ts

@@ -5,7 +5,11 @@ 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 { ServicesModule } from "src/app/services/services.module";
+import { WildcardRoutingModule } from "src/app/wildcard-routing.module";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -13,35 +17,25 @@ import { OrganizationsModule } from "./organizations/organizations.module";
 import { DisablePersonalVaultExportPolicyComponent } from "./policies/disable-personal-vault-export.component";
 import { MaximumVaultTimeoutPolicyComponent } from "./policies/maximum-vault-timeout.component";
 
-import { OssRoutingModule } from "src/app/oss-routing.module";
-import { OssModule } from "src/app/oss.module";
-import { ServicesModule } from "src/app/services/services.module";
-import { WildcardRoutingModule } from "src/app/wildcard-routing.module";
-
 @NgModule({
   imports: [
-    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

@@ -5,8 +5,8 @@ import "bootstrap";
 import "jquery";
 import "popper.js";
 
-// tslint:disable-next-line
 require("src/scss/styles.scss");
+require("src/scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

bitwarden_license/src/app/organizations/components/base-cva.component.ts

@@ -0,0 +1,68 @@
+import { Directive, Input, OnInit, Self } from "@angular/core";
+import { ControlValueAccessor, FormControl, NgControl, Validators } from "@angular/forms";
+
+import { dirtyRequired } from "jslib-angular/validators/dirty.validator";
+
+/** For use in the SSO Config Form only - will be deprecated by the Component Library */
+@Directive()
+export abstract class BaseCvaComponent implements ControlValueAccessor, OnInit {
+  get describedById() {
+    return this.showDescribedBy ? this.controlId + "Desc" : null;
+  }
+
+  get showDescribedBy() {
+    return this.helperText != null || this.controlDir.control.hasError("required");
+  }
+
+  get isRequired() {
+    return (
+      this.controlDir.control.hasValidator(Validators.required) ||
+      this.controlDir.control.hasValidator(dirtyRequired)
+    );
+  }
+
+  @Input() label: string;
+  @Input() controlId: string;
+  @Input() helperText: string;
+
+  internalControl = new FormControl("");
+
+  protected onChange: any;
+  protected onTouched: any;
+
+  constructor(@Self() public controlDir: NgControl) {
+    this.controlDir.valueAccessor = this;
+  }
+
+  ngOnInit() {
+    this.internalControl.valueChanges.subscribe(this.onValueChangesInternal);
+  }
+
+  onBlurInternal() {
+    this.onTouched();
+  }
+
+  // CVA interfaces
+  writeValue(value: string) {
+    this.internalControl.setValue(value);
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    if (isDisabled) {
+      this.internalControl.disable();
+    } else {
+      this.internalControl.enable();
+    }
+  }
+
+  protected onValueChangesInternal: any = (value: string) => this.onChange(value);
+  // End CVA interfaces
+}

bitwarden_license/src/app/organizations/components/input-checkbox.component.html

@@ -0,0 +1,16 @@
+<div class="form-group">
+  <div class="form-check">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [attr.id]="controlId"
+      [attr.aria-describedby]="describedById"
+      [formControl]="internalControl"
+      (blur)="onBlurInternal()"
+    />
+    <label class="form-check-label" [attr.for]="controlId">{{ label }}</label>
+  </div>
+  <small *ngIf="showDescribedBy" [attr.id]="describedById" class="form-text text-muted">{{
+    helperText
+  }}</small>
+</div>

bitwarden_license/src/app/organizations/components/input-checkbox.component.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+
+import { BaseCvaComponent } from "./base-cva.component";
+
+/** For use in the SSO Config Form only - will be deprecated by the Component Library */
+@Component({
+  selector: "app-input-checkbox",
+  templateUrl: "input-checkbox.component.html",
+})
+export class InputCheckboxComponent extends BaseCvaComponent {}

bitwarden_license/src/app/organizations/components/input-text-readonly.component.html

@@ -0,0 +1,26 @@
+<div class="form-group">
+  <label>{{ label }}</label>
+  <div class="input-group">
+    <input class="form-control" readonly [value]="controlValue" />
+    <div class="input-group-append" *ngIf="showLaunch">
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        appA11yTitle="{{ 'launch' | i18n }}"
+        (click)="launchUri(controlValue)"
+      >
+        <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="input-group-append" *ngIf="showCopy">
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        appA11yTitle="{{ 'copyValue' | i18n }}"
+        (click)="copy(controlValue)"
+      >
+        <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</div>

bitwarden_license/src/app/organizations/components/input-text-readonly.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+
+/** For use in the SSO Config Form only - will be deprecated by the Component Library */
+@Component({
+  selector: "app-input-text-readonly",
+  templateUrl: "input-text-readonly.component.html",
+})
+export class InputTextReadOnlyComponent {
+  @Input() controlValue: string;
+  @Input() label: string;
+  @Input() showCopy = true;
+  @Input() showLaunch = false;
+
+  constructor(private platformUtilsService: PlatformUtilsService) {}
+
+  copy(value: string) {
+    this.platformUtilsService.copyToClipboard(value);
+  }
+
+  launchUri(url: string) {
+    this.platformUtilsService.launchUri(url);
+  }
+}

bitwarden_license/src/app/organizations/components/input-text.component.html

@@ -0,0 +1,33 @@
+<div class="form-group">
+  <label [attr.for]="controlId">
+    {{ label }}
+    <small *ngIf="isRequired" class="text-muted form-text d-inline"
+      >({{ "required" | i18n }})</small
+    >
+  </label>
+  <input
+    [formControl]="internalControl"
+    class="form-control"
+    [attr.id]="controlId"
+    [attr.aria-describedby]="describedById"
+    [attr.aria-invalid]="controlDir.control.invalid"
+    (blur)="onBlurInternal()"
+  />
+  <div *ngIf="showDescribedBy" [attr.id]="describedById">
+    <small
+      *ngIf="helperText != null && !controlDir.control.hasError(helperTextSameAsError)"
+      class="form-text text-muted"
+    >
+      {{ helperText }}
+    </small>
+    <small class="error-inline" *ngIf="controlDir.control.hasError('required')" role="alert">
+      <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
+      <span class="sr-only">{{ "error" | i18n }}:</span>
+      {{
+        controlDir.control.hasError(helperTextSameAsError)
+          ? helperText
+          : ("fieldRequiredError" | i18n: label)
+      }}
+    </small>
+  </div>
+</div>

bitwarden_license/src/app/organizations/components/input-text.component.ts

@@ -0,0 +1,48 @@
+import { Component, Input, OnInit } from "@angular/core";
+
+import { BaseCvaComponent } from "./base-cva.component";
+
+/** For use in the SSO Config Form only - will be deprecated by the Component Library */
+@Component({
+  selector: "app-input-text[label][controlId]",
+  templateUrl: "input-text.component.html",
+})
+export class InputTextComponent extends BaseCvaComponent implements OnInit {
+  @Input() helperTextSameAsError: string;
+  @Input() requiredErrorMessage: string;
+  @Input() stripSpaces = false;
+
+  transformValue: (value: string) => string = null;
+
+  ngOnInit() {
+    super.ngOnInit();
+    if (this.stripSpaces) {
+      this.transformValue = this.doStripSpaces;
+    }
+  }
+
+  writeValue(value: string) {
+    this.internalControl.setValue(value == null ? "" : value);
+  }
+
+  protected onValueChangesInternal: any = (value: string) => {
+    let newValue = value;
+    if (this.transformValue != null) {
+      newValue = this.transformValue(value);
+      this.internalControl.setValue(newValue, { emitEvent: false });
+    }
+    this.onChange(newValue);
+  };
+
+  protected onValueChangeInternal(value: string) {
+    let newValue = value;
+    if (this.transformValue != null) {
+      newValue = this.transformValue(value);
+      this.internalControl.setValue(newValue, { emitEvent: false });
+    }
+  }
+
+  private doStripSpaces(value: string) {
+    return value.replace(/ /g, "");
+  }
+}

bitwarden_license/src/app/organizations/components/select.component.html

@@ -0,0 +1,19 @@
+<div class="form-group">
+  <label [attr.for]="controlId">
+    {{ label }}
+    <small *ngIf="isRequired" class="text-muted form-text d-inline"
+      >({{ "required" | i18n }})</small
+    >
+  </label>
+  <select
+    class="form-control"
+    [attr.id]="controlId"
+    [attr.aria-invalid]="controlDir.control.invalid"
+    [formControl]="internalControl"
+    (blur)="onBlurInternal()"
+  >
+    <option *ngFor="let o of selectOptions" [ngValue]="o.value" disabled="{{ o.disabled }}">
+      {{ o.name }}
+    </option>
+  </select>
+</div>

bitwarden_license/src/app/organizations/components/select.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from "@angular/core";
+
+import { SelectOptions } from "jslib-angular/interfaces/selectOptions";
+
+import { BaseCvaComponent } from "./base-cva.component";
+
+/** For use in the SSO Config Form only - will be deprecated by the Component Library */
+@Component({
+  selector: "app-select",
+  templateUrl: "select.component.html",
+})
+export class SelectComponent extends BaseCvaComponent {
+  @Input() selectOptions: SelectOptions[];
+}

bitwarden_license/src/app/organizations/manage/sso.component.html

@@ -14,10 +14,9 @@
 <form
   #form
   (ngSubmit)="submit()"
-  [formGroup]="data"
+  [formGroup]="ssoConfigForm"
   [appApiAction]="formPromise"
   *ngIf="!loading"
-  ngNativeValidate
 >
   <p>
     {{ "ssoPolicyHelpStart" | i18n }}
@@ -27,462 +26,407 @@
     {{ "ssoPolicyHelpKeyConnector" | i18n }}
   </p>
 
-  <div class="form-group">
+  <!-- Root form -->
-    <div class="form-check">
+  <ng-container>
-      <input
+    <app-input-checkbox
-        class="form-check-input"
+      controlId="enabled"
-        type="checkbox"
+      [formControl]="enabled"
-        id="enabled"
+      [label]="'allowSso' | i18n"
-        [formControl]="enabled"
+      [helperText]="'allowSsoDesc' | i18n"
-        name="Enabled"
+    ></app-input-checkbox>
-      />
-      <label class="form-check-label" for="enabled">{{ "allowSso" | i18n }}</label>
-    </div>
-    <small class="form-text text-muted">{{ "allowSsoDesc" | i18n }}</small>
-  </div>
-
-  <div class="form-group">
-    <label>{{ "memberDecryptionOption" | i18n }}</label>
-    <div class="form-check form-check-block">
-      <input
-        class="form-check-input"
-        type="radio"
-        id="memberDecryptionPass"
-        [value]="false"
-        formControlName="keyConnectorEnabled"
-      />
-      <label class="form-check-label" for="memberDecryptionPass">
-        {{ "masterPass" | i18n }}
-        <small>{{ "memberDecryptionPassDesc" | i18n }}</small>
-      </label>
-    </div>
-    <div class="form-check mt-2 form-check-block">
-      <input
-        class="form-check-input"
-        type="radio"
-        id="memberDecryptionKey"
-        [value]="true"
-        formControlName="keyConnectorEnabled"
-        [attr.disabled]="!organization.useKeyConnector || null"
-      />
-      <label class="form-check-label" for="memberDecryptionKey">
-        {{ "keyConnector" | i18n }}
-        <a
-          target="_blank"
-          rel="noopener"
-          appA11yTitle="{{ 'learnMore' | i18n }}"
-          href="https://bitwarden.com/help/about-key-connector/"
-        >
-          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-        </a>
-        <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
-      </label>
-    </div>
-  </div>
-
-  <ng-container *ngIf="data.value.keyConnectorEnabled">
-    <app-callout type="warning" [useAlertRole]="true">
-      {{ "keyConnectorWarning" | i18n }}
-    </app-callout>
 
     <div class="form-group">
-      <label for="keyConnectorUrl">{{ "keyConnectorUrl" | i18n }}</label>
+      <label>{{ "memberDecryptionOption" | i18n }}</label>
-      <div class="input-group">
+      <div class="form-check form-check-block">
         <input
-          class="form-control"
+          class="form-check-input"
-          formControlName="keyConnectorUrl"
+          type="radio"
-          id="keyConnectorUrl"
+          id="memberDecryptionPass"
-          required
+          [value]="false"
+          formControlName="keyConnectorEnabled"
         />
-        <div class="input-group-append">
+        <label class="form-check-label" for="memberDecryptionPass">
-          <button
+          {{ "masterPass" | i18n }}
-            type="button"
+          <small>{{ "memberDecryptionPassDesc" | i18n }}</small>
-            class="btn btn-outline-secondary"
+        </label>
-            (click)="validateKeyConnectorUrl()"
+      </div>
-            [disabled]="!enableTestKeyConnector"
+      <div class="form-check mt-2 form-check-block">
+        <input
+          class="form-check-input"
+          type="radio"
+          id="memberDecryptionKey"
+          [value]="true"
+          formControlName="keyConnectorEnabled"
+          [attr.disabled]="!organization.useKeyConnector || null"
+        />
+        <label class="form-check-label" for="memberDecryptionKey">
+          {{ "keyConnector" | i18n }}
+          <a
+            target="_blank"
+            rel="noopener"
+            appA11yTitle="{{ 'learnMore' | i18n }}"
+            href="https://bitwarden.com/help/about-key-connector/"
           >
-            <i
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-              class="bwi bwi-spinner bwi-spin"
+          </a>
-              title="{{ 'loading' | i18n }}"
+          <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
-              aria-hidden="true"
+        </label>
-              *ngIf="keyConnectorUrl.pending"
+      </div>
-            ></i>
+    </div>
-            <span *ngIf="!keyConnectorUrl.pending">
+
-              {{ "keyConnectorTest" | i18n }}
+    <!-- Key Connector -->
-            </span>
+    <ng-container *ngIf="ssoConfigForm.get('keyConnectorEnabled').value">
-          </button>
+      <app-callout type="warning" [useAlertRole]="true">
+        {{ "keyConnectorWarning" | i18n }}
+      </app-callout>
+
+      <div class="form-group">
+        <label for="keyConnectorUrl">
+          {{ "keyConnectorUrl" | i18n }}
+          <small class="text-muted form-text d-inline">({{ "required" | i18n }})</small>
+        </label>
+        <div class="input-group">
+          <input
+            class="form-control"
+            formControlName="keyConnectorUrl"
+            id="keyConnectorUrl"
+            aria-describedby="keyConnectorUrlDesc"
+            (change)="haveTestedKeyConnector = false"
+            appInputStripSpaces
+            appA11yInvalid
+          />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              (click)="validateKeyConnectorUrl()"
+              [disabled]="!enableTestKeyConnector"
+            >
+              <i
+                class="bwi bwi-spinner bwi-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+                *ngIf="keyConnectorUrl.pending"
+              ></i>
+              <span *ngIf="!keyConnectorUrl.pending">
+                {{ "keyConnectorTest" | i18n }}
+              </span>
+            </button>
+          </div>
+        </div>
+        <div *ngIf="haveTestedKeyConnector" id="keyConnectorUrlDesc" aria-live="polite">
+          <small
+            class="error-inline"
+            *ngIf="keyConnectorUrl.hasError('invalidUrl'); else keyConnectorSuccess"
+          >
+            <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
+            <span class="sr-only">{{ "error" | i18n }}:</span>
+            {{ "keyConnectorTestFail" | i18n }}
+          </small>
+          <ng-template #keyConnectorSuccess>
+            <small class="text-success">
+              <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+              {{ "keyConnectorTestSuccess" | i18n }}
+            </small>
+          </ng-template>
         </div>
       </div>
-      <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
+    </ng-container>
-        <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
+
-          <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
+    <app-select
-          {{ "keyConnectorTestFail" | i18n }}
+      controlId="type"
-        </div>
+      [label]="'type' | i18n"
-        <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
+      [selectOptions]="ssoTypeOptions"
-          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+      formControlName="configType"
-          {{ "keyConnectorTestSuccess" | i18n }}
+    >
-        </div>
+    </app-select>
-      </ng-container>
-    </div>
   </ng-container>
 
-  <div class="form-group">
-    <label for="type">{{ "type" | i18n }}</label>
-    <select class="form-control" id="type" formControlName="configType">
-      <option [ngValue]="0" disabled>{{ "selectType" | i18n }}</option>
-      <option [ngValue]="1">OpenID Connect</option>
-      <option [ngValue]="2">SAML 2.0</option>
-    </select>
-  </div>
-
   <!-- OIDC -->
-  <div *ngIf="data.value.configType == 1">
+  <div
+    *ngIf="ssoConfigForm.get('configType').value === ssoType.OpenIdConnect"
+    [formGroup]="openIdForm"
+  >
     <div class="config-section">
-      <h2>{{ "openIdConnectConfig" | i18n }}</h2>
+      <h2 class="secondary-header">{{ "openIdConnectConfig" | i18n }}</h2>
-      <div class="form-group">
+
-        <label>{{ "callbackPath" | i18n }}</label>
+      <app-input-text-readonly
-        <div class="input-group">
+        [label]="'callbackPath' | i18n"
-          <input class="form-control" readonly [value]="callbackPath" />
+        [controlValue]="callbackPath"
-          <div class="input-group-append">
+      ></app-input-text-readonly>
-            <button
+
-              type="button"
+      <app-input-text-readonly
-              class="btn btn-outline-secondary"
+        [label]="'signedOutCallbackPath' | i18n"
-              appA11yTitle="{{ 'copyValue' | i18n }}"
+        [controlValue]="signedOutCallbackPath"
-              (click)="copy(callbackPath)"
+      ></app-input-text-readonly>
-            >
+
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+      <app-input-text
-            </button>
+        [label]="'authority' | i18n"
-          </div>
+        controlId="authority"
-        </div>
+        [stripSpaces]="true"
+        formControlName="authority"
+      ></app-input-text>
+
+      <app-input-text
+        [label]="'clientId' | i18n"
+        controlId="clientId"
+        [stripSpaces]="true"
+        formControlName="clientId"
+      ></app-input-text>
+
+      <app-input-text
+        [label]="'clientSecret' | i18n"
+        controlId="clientSecret"
+        [stripSpaces]="true"
+        formControlName="clientSecret"
+      ></app-input-text>
+
+      <app-input-text
+        [label]="'metadataAddress' | i18n"
+        controlId="metadataAddress"
+        [stripSpaces]="true"
+        [helperText]="'openIdAuthorityRequired' | i18n"
+        formControlName="metadataAddress"
+      ></app-input-text>
+
+      <app-select
+        controlId="redirectBehavior"
+        [label]="'oidcRedirectBehavior' | i18n"
+        [selectOptions]="connectRedirectOptions"
+        formControlName="redirectBehavior"
+      >
+      </app-select>
+
+      <app-input-checkbox
+        controlId="getClaimsFromUserInfoEndpoint"
+        formControlName="getClaimsFromUserInfoEndpoint"
+        [label]="'getClaimsFromUserInfoEndpoint' | i18n"
+      ></app-input-checkbox>
+
+      <!-- Optional customizations -->
+      <div
+        class="section-header d-flex flex-row align-items-center mt-3 mb-3"
+        (click)="toggleOpenIdCustomizations()"
+      >
+        <h3 class="mb-0 mr-2" id="customizations-header">
+          {{ "openIdOptionalCustomizations" | i18n }}
+        </h3>
+        <button
+          class="mb-1 btn btn-link"
+          type="button"
+          appStopClick
+          role="button"
+          aria-controls="customizations"
+          [attr.aria-expanded]="showOpenIdCustomizations"
+          aria-labelledby="customizations-header"
+        >
+          <i
+            class="bwi"
+            aria-hidden="true"
+            [ngClass]="{
+              'bwi-angle-down': !showOpenIdCustomizations,
+              'bwi-chevron-up': showOpenIdCustomizations
+            }"
+          ></i>
+        </button>
       </div>
-      <div class="form-group">
+      <div id="customizations" [hidden]="!showOpenIdCustomizations">
-        <label>{{ "signedOutCallbackPath" | i18n }}</label>
+        <app-input-text
-        <div class="input-group">
+          [label]="'additionalScopes' | i18n"
-          <input class="form-control" readonly [value]="signedOutCallbackPath" />
+          controlId="additionalScopes"
-          <div class="input-group-append">
+          [helperText]="'separateMultipleWithComma' | i18n"
-            <button
+          formControlName="additionalScopes"
-              type="button"
+        ></app-input-text>
-              class="btn btn-outline-secondary"
+
-              appA11yTitle="{{ 'copyValue' | i18n }}"
+        <app-input-text
-              (click)="copy(signedOutCallbackPath)"
+          [label]="'additionalUserIdClaimTypes' | i18n"
-            >
+          controlId="additionalUserIdClaimTypes"
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+          [helperText]="'separateMultipleWithComma' | i18n"
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="authority">{{ "authority" | i18n }}</label>
-        <input class="form-control" formControlName="authority" id="authority" />
-      </div>
-      <div class="form-group">
-        <label for="clientId">{{ "clientId" | i18n }}</label>
-        <input class="form-control" formControlName="clientId" id="clientId" />
-      </div>
-      <div class="form-group">
-        <label for="clientSecret">{{ "clientSecret" | i18n }}</label>
-        <input class="form-control" formControlName="clientSecret" id="clientSecret" />
-      </div>
-      <div class="form-group">
-        <label for="metadataAddress">{{ "metadataAddress" | i18n }}</label>
-        <input class="form-control" formControlName="metadataAddress" id="metadataAddress" />
-      </div>
-      <div class="form-group">
-        <label for="redirectBehavior">{{ "oidcRedirectBehavior" | i18n }}</label>
-        <select class="form-control" formControlName="redirectBehavior" id="redirectBehavior">
-          <option [ngValue]="0">Redirect GET</option>
-          <option [ngValue]="1">Form POST</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="getClaimsFromUserInfoEndpoint"
-            formControlName="getClaimsFromUserInfoEndpoint"
-          />
-          <label class="form-check-label" for="getClaimsFromUserInfoEndpoint">
-            {{ "getClaimsFromUserInfoEndpoint" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="additionalScopes">{{ "additionalScopes" | i18n }}</label>
-        <input class="form-control" formControlName="additionalScopes" id="additionalScopes" />
-      </div>
-      <div class="form-group">
-        <label for="additionalUserIdClaimTypes">{{ "additionalUserIdClaimTypes" | i18n }}</label>
-        <input
-          class="form-control"
           formControlName="additionalUserIdClaimTypes"
-          id="additionalUserIdClaimTypes"
+        ></app-input-text>
-        />
+
-      </div>
+        <app-input-text
-      <div class="form-group">
+          [label]="'additionalEmailClaimTypes' | i18n"
-        <label for="additionalEmailClaimTypes">{{ "additionalEmailClaimTypes" | i18n }}</label>
+          controlId="additionalEmailClaimTypes"
-        <input
+          [helperText]="'separateMultipleWithComma' | i18n"
-          class="form-control"
           formControlName="additionalEmailClaimTypes"
-          id="additionalEmailClaimTypes"
+        ></app-input-text>
-        />
+
-      </div>
+        <app-input-text
-      <div class="form-group">
+          [label]="'additionalNameClaimTypes' | i18n"
-        <label for="additionalNameClaimTypes">{{ "additionalNameClaimTypes" | i18n }}</label>
+          controlId="additionalNameClaimTypes"
-        <input
+          [helperText]="'separateMultipleWithComma' | i18n"
-          class="form-control"
           formControlName="additionalNameClaimTypes"
-          id="additionalNameClaimTypes"
+        ></app-input-text>
-        />
+
-      </div>
+        <app-input-text
-      <div class="form-group">
+          [label]="'acrValues' | i18n"
-        <label for="acrValues">{{ "acrValues" | i18n }}</label>
+          controlId="acrValues"
-        <input class="form-control" formControlName="acrValues" id="acrValues" />
+          helperText="acr_values"
-      </div>
+          formControlName="acrValues"
-      <div class="form-group">
+        ></app-input-text>
-        <label for="expectedReturnAcrValue">{{ "expectedReturnAcrValue" | i18n }}</label>
+
-        <input
+        <app-input-text
-          class="form-control"
+          [label]="'expectedReturnAcrValue' | i18n"
+          controlId="expectedReturnAcrValue"
+          helperText="acr_validation"
           formControlName="expectedReturnAcrValue"
-          id="expectedReturnAcrValue"
+        ></app-input-text>
-        />
       </div>
     </div>
   </div>
 
-  <div *ngIf="data.value.configType == 2">
+  <!-- SAML2 SP -->
+  <div *ngIf="ssoConfigForm.get('configType').value === ssoType.Saml2" [formGroup]="samlForm">
     <!-- SAML2 SP -->
     <div class="config-section">
-      <h2>{{ "samlSpConfig" | i18n }}</h2>
+      <h2 class="secondary-header">{{ "samlSpConfig" | i18n }}</h2>
-      <div class="form-group">
+
-        <label>{{ "spEntityId" | i18n }}</label>
+      <app-input-text-readonly
-        <div class="input-group">
+        [label]="'spEntityId' | i18n"
-          <input class="form-control" readonly [value]="spEntityId" />
+        [controlValue]="spEntityId"
-          <div class="input-group-append">
+      ></app-input-text-readonly>
-            <button
+
-              type="button"
+      <app-input-text-readonly
-              class="btn btn-outline-secondary"
+        [label]="'spMetadataUrl' | i18n"
-              appA11yTitle="{{ 'copyValue' | i18n }}"
+        [controlValue]="spMetadataUrl"
-              (click)="copy(spEntityId)"
+        [showLaunch]="true"
-            >
+      ></app-input-text-readonly>
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+
-            </button>
+      <app-input-text-readonly
-          </div>
+        [label]="'spAcsUrl' | i18n"
-        </div>
+        [controlValue]="spAcsUrl"
-      </div>
+      ></app-input-text-readonly>
-      <div class="form-group">
+
-        <label>{{ "spMetadataUrl" | i18n }}</label>
+      <app-select
-        <div class="input-group">
+        controlId="spNameIdFormat"
-          <input class="form-control" readonly [value]="spMetadataUrl" />
+        [label]="'spNameIdFormat' | i18n"
-          <div class="input-group-append">
+        [selectOptions]="saml2NameIdFormatOptions"
-            <button
+        formControlName="spNameIdFormat"
-              type="button"
+      >
-              class="btn btn-outline-secondary"
+      </app-select>
-              appA11yTitle="{{ 'launch' | i18n }}"
+
-              (click)="launchUri(spMetadataUrl)"
+      <app-select
-            >
+        controlId="spOutboundSigningAlgorithm"
-              <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
+        [label]="'spOutboundSigningAlgorithm' | i18n"
-            </button>
+        [selectOptions]="samlSigningAlgorithmOptions"
-            <button
+        formControlName="spOutboundSigningAlgorithm"
-              type="button"
+      >
-              class="btn btn-outline-secondary"
+      </app-select>
-              appA11yTitle="{{ 'copyValue' | i18n }}"
+
-              (click)="copy(spMetadataUrl)"
+      <app-select
-            >
+        controlId="spSigningBehavior"
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+        [label]="'spSigningBehavior' | i18n"
-            </button>
+        [selectOptions]="saml2SigningBehaviourOptions"
-          </div>
+        formControlName="spSigningBehavior"
-        </div>
+      >
-      </div>
+      </app-select>
-      <div class="form-group">
+
-        <label>{{ "spAcsUrl" | i18n }}</label>
+      <app-select
-        <div class="input-group">
+        controlId="spMinIncomingSigningAlgorithm"
-          <input class="form-control" readonly [value]="spAcsUrl" />
+        [label]="'spMinIncomingSigningAlgorithm' | i18n"
-          <div class="input-group-append">
+        [selectOptions]="samlSigningAlgorithmOptions"
-            <button
+        formControlName="spMinIncomingSigningAlgorithm"
-              type="button"
+      >
-              class="btn btn-outline-secondary"
+      </app-select>
-              appA11yTitle="{{ 'copyValue' | i18n }}"
+
-              (click)="copy(spAcsUrl)"
+      <app-input-checkbox
-            >
+        controlId="spWantAssertionsSigned"
-              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+        formControlName="spWantAssertionsSigned"
-            </button>
+        [label]="'spWantAssertionsSigned' | i18n"
-          </div>
+      ></app-input-checkbox>
-        </div>
+
-      </div>
+      <app-input-checkbox
-      <div class="form-group">
+        controlId="spValidateCertificates"
-        <label for="spNameIdFormat">{{ "spNameIdFormat" | i18n }}</label>
+        formControlName="spValidateCertificates"
-        <select class="form-control" formControlName="spNameIdFormat" id="spNameIdFormat">
+        [label]="'spValidateCertificates' | i18n"
-          <option value="0">Not Configured</option>
+      ></app-input-checkbox>
-          <option value="1">Unspecified</option>
-          <option value="2">Email Address</option>
-          <option value="3">X.509 Subject Name</option>
-          <option value="4">Windows Domain Qualified Name</option>
-          <option value="5">Kerberos Principal Name</option>
-          <option value="6">Entity Identifier</option>
-          <option value="7">Persistent</option>
-          <option value="8">Transient</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="spOutboundSigningAlgorithm">{{ "spOutboundSigningAlgorithm" | i18n }}</label>
-        <select
-          class="form-control"
-          formControlName="spOutboundSigningAlgorithm"
-          id="spOutboundSigningAlgorithm"
-        >
-          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="spSigningBehavior">{{ "spSigningBehavior" | i18n }}</label>
-        <select class="form-control" formControlName="spSigningBehavior" id="spSigningBehavior">
-          <option value="0">If IdP Wants Authn Requests Signed</option>
-          <option value="1">Always</option>
-          <option value="3">Never</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="spMinIncomingSigningAlgorithm">{{
-          "spMinIncomingSigningAlgorithm" | i18n
-        }}</label>
-        <select
-          class="form-control"
-          formControlName="spMinIncomingSigningAlgorithm"
-          id="spMinIncomingSigningAlgorithm"
-        >
-          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="spWantAssertionsSigned"
-            formControlName="spWantAssertionsSigned"
-          />
-          <label class="form-check-label" for="spWantAssertionsSigned">
-            {{ "spWantAssertionsSigned" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="spValidateCertificates"
-            formControlName="spValidateCertificates"
-          />
-          <label class="form-check-label" for="spValidateCertificates">
-            {{ "spValidateCertificates" | i18n }}
-          </label>
-        </div>
-      </div>
     </div>
 
     <!-- SAML2 IDP -->
     <div class="config-section">
-      <h2>{{ "samlIdpConfig" | i18n }}</h2>
+      <h2 class="secondary-header">{{ "samlIdpConfig" | i18n }}</h2>
+
+      <app-input-text
+        [label]="'idpEntityId' | i18n"
+        controlId="idpEntityId"
+        formControlName="idpEntityId"
+      ></app-input-text>
+
+      <app-select
+        controlId="idpBindingType"
+        [label]="'idpBindingType' | i18n"
+        [selectOptions]="saml2BindingTypeOptions"
+        formControlName="idpBindingType"
+      >
+      </app-select>
+
+      <app-input-text
+        [label]="'idpSingleSignOnServiceUrl' | i18n"
+        controlId="idpSingleSignOnServiceUrl"
+        [helperText]="'idpSingleSignOnServiceUrlRequired' | i18n"
+        [stripSpaces]="true"
+        formControlName="idpSingleSignOnServiceUrl"
+      ></app-input-text>
+
+      <app-input-text
+        [label]="'idpSingleLogoutServiceUrl' | i18n"
+        controlId="idpSingleLogoutServiceUrl"
+        [stripSpaces]="true"
+        formControlName="idpSingleLogoutServiceUrl"
+      ></app-input-text>
 
       <div class="form-group">
-        <label for="idpEntityId">{{ "idpEntityId" | i18n }}</label>
+        <label for="idpX509PublicCert">
-        <input class="form-control" formControlName="idpEntityId" id="idpEntityId" />
+          {{ "idpX509PublicCert" | i18n }}
-      </div>
+          <small class="text-muted form-text d-inline">({{ "required" | i18n }})</small>
-      <div class="form-group">
+        </label>
-        <label for="idpBindingType">{{ "idpBindingType" | i18n }}</label>
-        <select class="form-control" formControlName="idpBindingType" id="idpBindingType">
-          <option value="1">Redirect</option>
-          <option value="2">HTTP POST</option>
-          <option value="4">Artifact</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="idpSingleSignOnServiceUrl">{{ "idpSingleSignOnServiceUrl" | i18n }}</label>
-        <input
-          class="form-control"
-          formControlName="idpSingleSignOnServiceUrl"
-          id="idpSingleSignOnServiceUrl"
-        />
-      </div>
-      <div class="form-group">
-        <label for="idpSingleLogoutServiceUrl">{{ "idpSingleLogoutServiceUrl" | i18n }}</label>
-        <input
-          class="form-control"
-          formControlName="idpSingleLogoutServiceUrl"
-          id="idpSingleLogoutServiceUrl"
-        />
-      </div>
-      <div class="form-group">
-        <label for="idpArtifactResolutionServiceUrl">{{
-          "idpArtifactResolutionServiceUrl" | i18n
-        }}</label>
-        <input
-          class="form-control"
-          formControlName="idpArtifactResolutionServiceUrl"
-          id="idpArtifactResolutionServiceUrl"
-        />
-      </div>
-      <div class="form-group">
-        <label for="idpX509PublicCert">{{ "idpX509PublicCert" | i18n }}</label>
         <textarea
           formControlName="idpX509PublicCert"
           class="form-control form-control-sm text-monospace"
           rows="6"
           id="idpX509PublicCert"
+          appA11yInvalid
+          aria-describedby="idpX509PublicCertDesc"
         ></textarea>
-      </div>
+        <small
-      <div class="form-group">
+          id="idpX509PublicCertDesc"
-        <label for="idpOutboundSigningAlgorithm">{{ "idpOutboundSigningAlgorithm" | i18n }}</label>
+          class="error-inline"
-        <select
+          role="alert"
-          class="form-control"
+          *ngIf="samlForm.get('idpX509PublicCert').hasError('required')"
-          formControlName="idpOutboundSigningAlgorithm"
-          id="idpOutboundSigningAlgorithm"
         >
-          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
+          <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
-        </select>
+          <span class="sr-only">{{ "error" | i18n }}:</span>
-      </div>
+          {{ "fieldRequiredError" | i18n: ("idpX509PublicCert" | i18n) }}
-      <div class="form-group" [hidden]="true">
+        </small>
-        <!--TODO: Unhide once Unsolicited IdP Response is supported-->
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="idpAllowUnsolicitedAuthnResponse"
-            formControlName="idpAllowUnsolicitedAuthnResponse"
-          />
-          <label class="form-check-label" for="idpAllowUnsolicitedAuthnResponse">
-            {{ "idpAllowUnsolicitedAuthnResponse" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="idpDisableOutboundLogoutRequests"
-            formControlName="idpDisableOutboundLogoutRequests"
-          />
-          <label class="form-check-label" for="idpDisableOutboundLogoutRequests">
-            {{ "idpDisableOutboundLogoutRequests" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="idpWantAuthnRequestsSigned"
-            formControlName="idpWantAuthnRequestsSigned"
-          />
-          <label class="form-check-label" for="idpWantAuthnRequestsSigned">
-            {{ "idpWantAuthnRequestsSigned" | i18n }}
-          </label>
-        </div>
       </div>
+
+      <app-select
+        controlId="idpOutboundSigningAlgorithm"
+        [label]="'idpOutboundSigningAlgorithm' | i18n"
+        [selectOptions]="samlSigningAlgorithmOptions"
+        formControlName="idpOutboundSigningAlgorithm"
+      >
+      </app-select>
+
+      <!--TODO: Uncomment once Unsolicited IdP Response is supported-->
+      <!-- <app-input-checkbox
+        controlId="idpAllowUnsolicitedAuthnResponse"
+        formControlName="idpAllowUnsolicitedAuthnResponse"
+        [label]="'idpAllowUnsolicitedAuthnResponse' | i18n"
+      ></app-input-checkbox> -->
+
+      <app-input-checkbox
+        controlId="idpAllowOutboundLogoutRequests"
+        formControlName="idpAllowOutboundLogoutRequests"
+        [label]="'idpAllowOutboundLogoutRequests' | i18n"
+      ></app-input-checkbox>
+
+      <app-input-checkbox
+        controlId="idpWantAuthnRequestsSigned"
+        formControlName="idpWantAuthnRequestsSigned"
+        [label]="'idpSignAuthenticationRequests' | i18n"
+      ></app-input-checkbox>
     </div>
   </div>
 
@@ -490,4 +434,15 @@
     <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
+  <div
+    id="errorSummary"
+    class="error-summary text-danger"
+    *ngIf="this.getErrorCount(ssoConfigForm) as errorCount"
+  >
+    <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
+    <span class="sr-only">{{ "error" | i18n }}:</span>
+    {{
+      (errorCount === 1 ? "formErrorSummarySingle" : "formErrorSummaryPlural") | i18n: errorCount
+    }}
+  </div>
 </form>

bitwarden_license/src/app/organizations/manage/sso.component.ts

@@ -1,29 +1,82 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { AbstractControl, FormBuilder, FormGroup } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
+import { SelectOptions } from "jslib-angular/interfaces/selectOptions";
+import { dirtyRequired } from "jslib-angular/validators/dirty.validator";
 import { ApiService } from "jslib-common/abstractions/api.service";
 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 {
+  OpenIdConnectRedirectBehavior,
+  Saml2BindingType,
+  Saml2NameIdFormat,
+  Saml2SigningBehavior,
+  SsoType,
+} from "jslib-common/enums/ssoEnums";
+import { Utils } from "jslib-common/misc/utils";
+import { SsoConfigApi } from "jslib-common/models/api/ssoConfigApi";
 import { Organization } from "jslib-common/models/domain/organization";
-
 import { OrganizationSsoRequest } from "jslib-common/models/request/organization/organizationSsoRequest";
+import { OrganizationSsoResponse } from "jslib-common/models/response/organization/organizationSsoResponse";
+import { SsoConfigView } from "jslib-common/models/view/ssoConfigView";
+
+const defaultSigningAlgorithm = "http://www.w3.org/2001/04/xmldsig-more#rsa-sha256";
 
 @Component({
   selector: "app-org-manage-sso",
   templateUrl: "sso.component.html",
 })
 export class SsoComponent implements OnInit {
-  samlSigningAlgorithms = [
+  readonly ssoType = SsoType;
+
+  readonly ssoTypeOptions: SelectOptions[] = [
+    { name: this.i18nService.t("selectType"), value: SsoType.None, disabled: true },
+    { name: "OpenID Connect", value: SsoType.OpenIdConnect },
+    { name: "SAML 2.0", value: SsoType.Saml2 },
+  ];
+
+  readonly samlSigningAlgorithms = [
     "http://www.w3.org/2001/04/xmldsig-more#rsa-sha256",
     "http://www.w3.org/2000/09/xmldsig#rsa-sha384",
     "http://www.w3.org/2000/09/xmldsig#rsa-sha512",
     "http://www.w3.org/2000/09/xmldsig#rsa-sha1",
   ];
 
+  readonly saml2SigningBehaviourOptions: SelectOptions[] = [
+    {
+      name: "If IdP Wants Authn Requests Signed",
+      value: Saml2SigningBehavior.IfIdpWantAuthnRequestsSigned,
+    },
+    { name: "Always", value: Saml2SigningBehavior.Always },
+    { name: "Never", value: Saml2SigningBehavior.Never },
+  ];
+  readonly saml2BindingTypeOptions: SelectOptions[] = [
+    { name: "Redirect", value: Saml2BindingType.HttpRedirect },
+    { name: "HTTP POST", value: Saml2BindingType.HttpPost },
+  ];
+  readonly saml2NameIdFormatOptions: SelectOptions[] = [
+    { name: "Not Configured", value: Saml2NameIdFormat.NotConfigured },
+    { name: "Unspecified", value: Saml2NameIdFormat.Unspecified },
+    { name: "Email Address", value: Saml2NameIdFormat.EmailAddress },
+    { name: "X.509 Subject Name", value: Saml2NameIdFormat.X509SubjectName },
+    { name: "Windows Domain Qualified Name", value: Saml2NameIdFormat.WindowsDomainQualifiedName },
+    { name: "Kerberos Principal Name", value: Saml2NameIdFormat.KerberosPrincipalName },
+    { name: "Entity Identifier", value: Saml2NameIdFormat.EntityIdentifier },
+    { name: "Persistent", value: Saml2NameIdFormat.Persistent },
+    { name: "Transient", value: Saml2NameIdFormat.Transient },
+  ];
+
+  readonly connectRedirectOptions: SelectOptions[] = [
+    { name: "Redirect GET", value: OpenIdConnectRedirectBehavior.RedirectGet },
+    { name: "Form POST", value: OpenIdConnectRedirectBehavior.FormPost },
+  ];
+
+  showOpenIdCustomizations = false;
+
   loading = true;
+  haveTestedKeyConnector = false;
   organizationId: string;
   organization: Organization;
   formPromise: Promise<any>;
@@ -35,44 +88,57 @@ export class SsoComponent implements OnInit {
   spAcsUrl: string;
 
   enabled = this.formBuilder.control(false);
-  data = this.formBuilder.group({
-    configType: [],
 
-    keyConnectorEnabled: [],
+  openIdForm = this.formBuilder.group(
-    keyConnectorUrl: [],
+    {
+      authority: ["", dirtyRequired],
+      clientId: ["", dirtyRequired],
+      clientSecret: ["", dirtyRequired],
+      metadataAddress: [],
+      redirectBehavior: [OpenIdConnectRedirectBehavior.RedirectGet, dirtyRequired],
+      getClaimsFromUserInfoEndpoint: [],
+      additionalScopes: [],
+      additionalUserIdClaimTypes: [],
+      additionalEmailClaimTypes: [],
+      additionalNameClaimTypes: [],
+      acrValues: [],
+      expectedReturnAcrValue: [],
+    },
+    {
+      updateOn: "blur",
+    }
+  );
 
-    // OpenId
+  samlForm = this.formBuilder.group(
-    authority: [],
+    {
-    clientId: [],
+      spNameIdFormat: [Saml2NameIdFormat.NotConfigured],
-    clientSecret: [],
+      spOutboundSigningAlgorithm: [defaultSigningAlgorithm],
-    metadataAddress: [],
+      spSigningBehavior: [Saml2SigningBehavior.IfIdpWantAuthnRequestsSigned],
-    redirectBehavior: [],
+      spMinIncomingSigningAlgorithm: [defaultSigningAlgorithm],
-    getClaimsFromUserInfoEndpoint: [],
+      spWantAssertionsSigned: [],
-    additionalScopes: [],
+      spValidateCertificates: [],
-    additionalUserIdClaimTypes: [],
-    additionalEmailClaimTypes: [],
-    additionalNameClaimTypes: [],
-    acrValues: [],
-    expectedReturnAcrValue: [],
 
-    // SAML
+      idpEntityId: ["", dirtyRequired],
-    spNameIdFormat: [],
+      idpBindingType: [Saml2BindingType.HttpRedirect],
-    spOutboundSigningAlgorithm: [],
+      idpSingleSignOnServiceUrl: [],
-    spSigningBehavior: [],
+      idpSingleLogoutServiceUrl: [],
-    spMinIncomingSigningAlgorithm: [],
+      idpX509PublicCert: ["", dirtyRequired],
-    spWantAssertionsSigned: [],
+      idpOutboundSigningAlgorithm: [defaultSigningAlgorithm],
-    spValidateCertificates: [],
+      idpAllowUnsolicitedAuthnResponse: [],
+      idpAllowOutboundLogoutRequests: [true],
+      idpWantAuthnRequestsSigned: [],
+    },
+    {
+      updateOn: "blur",
+    }
+  );
 
-    idpEntityId: [],
+  ssoConfigForm = this.formBuilder.group({
-    idpBindingType: [],
+    configType: [SsoType.None],
-    idpSingleSignOnServiceUrl: [],
+    keyConnectorEnabled: [false],
-    idpSingleLogoutServiceUrl: [],
+    keyConnectorUrl: [""],
-    idpArtifactResolutionServiceUrl: [],
+    openId: this.openIdForm,
-    idpX509PublicCert: [],
+    saml: this.samlForm,
-    idpOutboundSigningAlgorithm: [],
-    idpAllowUnsolicitedAuthnResponse: [],
-    idpDisableOutboundLogoutRequests: [],
-    idpWantAuthnRequestsSigned: [],
   });
 
   constructor(
@@ -85,6 +151,25 @@ export class SsoComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
+    this.ssoConfigForm.get("configType").valueChanges.subscribe((newType: SsoType) => {
+      if (newType === SsoType.OpenIdConnect) {
+        this.openIdForm.enable();
+        this.samlForm.disable();
+      } else if (newType === SsoType.Saml2) {
+        this.openIdForm.disable();
+        this.samlForm.enable();
+      } else {
+        this.openIdForm.disable();
+        this.samlForm.disable();
+      }
+    });
+
+    this.samlForm
+      .get("spSigningBehavior")
+      .valueChanges.subscribe(() =>
+        this.samlForm.get("idpX509PublicCert").updateValueAndValidity()
+      );
+
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organizationId = params.organizationId;
       await this.load();
@@ -94,9 +179,7 @@ export class SsoComponent implements OnInit {
   async load() {
     this.organization = await this.organizationService.get(this.organizationId);
     const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);
-
+    this.populateForm(ssoSettings);
-    this.data.patchValue(ssoSettings.data);
-    this.enabled.setValue(ssoSettings.enabled);
 
     this.callbackPath = ssoSettings.urls.callbackPath;
     this.signedOutCallbackPath = ssoSettings.urls.signedOutCallbackPath;
@@ -104,28 +187,30 @@ export class SsoComponent implements OnInit {
     this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
     this.spAcsUrl = ssoSettings.urls.spAcsUrl;
 
-    this.keyConnectorUrl.markAsDirty();
-
     this.loading = false;
   }
 
-  copy(value: string) {
-    this.platformUtilsService.copyToClipboard(value);
-  }
-
-  launchUri(url: string) {
-    this.platformUtilsService.launchUri(url);
-  }
-
   async submit() {
-    this.formPromise = this.postData();
+    this.validateForm(this.ssoConfigForm);
+
+    if (this.ssoConfigForm.get("keyConnectorEnabled").value) {
+      await this.validateKeyConnectorUrl();
+    }
+
+    if (!this.ssoConfigForm.valid) {
+      this.readOutErrors();
+      return;
+    }
+
+    const request = new OrganizationSsoRequest();
+    request.enabled = this.enabled.value;
+    request.data = SsoConfigApi.fromView(this.ssoConfigForm.value as SsoConfigView);
+
+    this.formPromise = this.apiService.postOrganizationSso(this.organizationId, request);
 
     try {
       const response = await this.formPromise;
-
+      this.populateForm(response);
-      this.data.patchValue(response.data);
-      this.enabled.setValue(response.enabled);
-
       this.platformUtilsService.showToast("success", null, this.i18nService.t("ssoSettingsSaved"));
     } catch {
       // Logged by appApiAction, do nothing
@@ -134,24 +219,8 @@ export class SsoComponent implements OnInit {
     this.formPromise = null;
   }
 
-  async postData() {
-    if (this.data.get("keyConnectorEnabled").value) {
-      await this.validateKeyConnectorUrl();
-
-      if (this.keyConnectorUrl.hasError("invalidUrl")) {
-        throw new Error(this.i18nService.t("keyConnectorTestFail"));
-      }
-    }
-
-    const request = new OrganizationSsoRequest();
-    request.enabled = this.enabled.value;
-    request.data = this.data.value;
-
-    return this.apiService.postOrganizationSso(this.organizationId, request);
-  }
-
   async validateKeyConnectorUrl() {
-    if (this.keyConnectorUrl.pristine) {
+    if (this.haveTestedKeyConnector) {
       return;
     }
 
@@ -166,18 +235,84 @@ export class SsoComponent implements OnInit {
       });
     }
 
-    this.keyConnectorUrl.markAsPristine();
+    this.haveTestedKeyConnector = true;
+  }
+
+  toggleOpenIdCustomizations() {
+    this.showOpenIdCustomizations = !this.showOpenIdCustomizations;
+  }
+
+  getErrorCount(form: FormGroup): number {
+    return Object.values(form.controls).reduce((acc: number, control: AbstractControl) => {
+      if (control instanceof FormGroup) {
+        return acc + this.getErrorCount(control);
+      }
+
+      if (control.errors == null) {
+        return acc;
+      }
+      return acc + Object.keys(control.errors).length;
+    }, 0);
   }
 
   get enableTestKeyConnector() {
     return (
-      this.data.get("keyConnectorEnabled").value &&
+      this.ssoConfigForm.get("keyConnectorEnabled").value &&
-      this.keyConnectorUrl != null &&
+      !Utils.isNullOrWhitespace(this.keyConnectorUrl?.value)
-      this.keyConnectorUrl.value !== ""
     );
   }
 
   get keyConnectorUrl() {
-    return this.data.get("keyConnectorUrl");
+    return this.ssoConfigForm.get("keyConnectorUrl");
+  }
+
+  get samlSigningAlgorithmOptions(): SelectOptions[] {
+    return this.samlSigningAlgorithms.map((algorithm) => ({ name: algorithm, value: algorithm }));
+  }
+
+  private validateForm(form: FormGroup) {
+    Object.values(form.controls).forEach((control: AbstractControl) => {
+      if (control.disabled) {
+        return;
+      }
+
+      if (control instanceof FormGroup) {
+        this.validateForm(control);
+      } else {
+        control.markAsDirty();
+        control.markAsTouched();
+        control.updateValueAndValidity();
+      }
+    });
+  }
+
+  private populateForm(ssoSettings: OrganizationSsoResponse) {
+    this.enabled.setValue(ssoSettings.enabled);
+    if (ssoSettings.data != null) {
+      const ssoConfigView = new SsoConfigView(ssoSettings.data);
+      this.ssoConfigForm.patchValue(ssoConfigView);
+    }
+  }
+
+  private readOutErrors() {
+    const errorText = this.i18nService.t("error");
+    const errorCount = this.getErrorCount(this.ssoConfigForm);
+    const errorCountText = this.i18nService.t(
+      errorCount === 1 ? "formErrorSummarySingle" : "formErrorSummaryPlural",
+      errorCount.toString()
+    );
+
+    const div = document.createElement("div");
+    div.className = "sr-only";
+    div.id = "srErrorCount";
+    div.setAttribute("aria-live", "polite");
+    div.innerText = errorText + ": " + errorCountText;
+
+    const existing = document.getElementById("srErrorCount");
+    if (existing != null) {
+      existing.remove();
+    }
+
+    document.body.append(div);
   }
 }

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

@@ -2,7 +2,6 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
-
 import { Permissions } from "jslib-common/enums/permissions";
 
 import { OrganizationLayoutComponent } from "src/app/layouts/organization-layout.component";

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

@@ -2,13 +2,31 @@ 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";
+import { InputTextComponent } from "./components/input-text.component";
+import { SelectComponent } from "./components/select.component";
 import { SsoComponent } from "./manage/sso.component";
 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: [
-  declarations: [SsoComponent],
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    JslibModule,
+    OrganizationsRoutingModule,
+  ],
+  declarations: [
+    InputCheckboxComponent,
+    InputTextComponent,
+    InputTextReadOnlyComponent,
+    SelectComponent,
+    SsoComponent,
+  ],
 })
 export class OrganizationsModule {}

bitwarden_license/src/app/policies/disable-personal-vault-export.component.ts

@@ -1,12 +1,7 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
-
-import { I18nService } from "jslib-common/abstractions/i18n.service";
 
 import { PolicyType } from "jslib-common/enums/policyType";
 
-import { PolicyRequest } from "jslib-common/models/request/policyRequest";
-
 import {
   BasePolicy,
   BasePolicyComponent,

bitwarden_license/src/app/policies/maximum-vault-timeout.component.ts

@@ -2,9 +2,7 @@ import { Component } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";
-
 import { PolicyType } from "jslib-common/enums/policyType";
-
 import { PolicyRequest } from "jslib-common/models/request/policyRequest";
 
 import {

bitwarden_license/src/app/providers/clients/add-organization.component.ts

@@ -1,16 +1,14 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { ValidationService } from "jslib-angular/services/validation.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { ProviderService } from "jslib-common/abstractions/provider.service";
-
-import { ValidationService } from "jslib-angular/services/validation.service";
-
-import { WebProviderService } from "../services/webProvider.service";
-
 import { Organization } from "jslib-common/models/domain/organization";
 import { Provider } from "jslib-common/models/domain/provider";
 
+import { WebProviderService } from "../services/webProvider.service";
+
 @Component({
   selector: "provider-add-organization",
   templateUrl: "add-organization.component.html",

bitwarden_license/src/app/providers/clients/clients.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
@@ -10,13 +11,8 @@ import { OrganizationService } from "jslib-common/abstractions/organization.serv
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { ProviderService } from "jslib-common/abstractions/provider.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
-
-import { ModalService } from "jslib-angular/services/modal.service";
-import { ValidationService } from "jslib-angular/services/validation.service";
-
 import { PlanType } from "jslib-common/enums/planType";
 import { ProviderUserType } from "jslib-common/enums/providerUserType";
-
 import { Organization } from "jslib-common/models/domain/organization";
 import { ProviderOrganizationOrganizationDetailsResponse } from "jslib-common/models/response/provider/providerOrganizationResponse";
 

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

@@ -1,15 +1,14 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
-import { BaseAcceptComponent } from "src/app/common/base.accept.component";
-
 import { ApiService } from "jslib-common/abstractions/api.service";
-
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { ProviderUserAcceptRequest } from "jslib-common/models/request/provider/providerUserAcceptRequest";
 
+import { BaseAcceptComponent } from "src/app/common/base.accept.component";
+
 @Component({
   selector: "app-accept-provider",
   templateUrl: "accept-provider.component.html",

bitwarden_license/src/app/providers/manage/bulk/bulk-confirm.component.ts

@@ -1,10 +1,9 @@
 import { Component, Input } from "@angular/core";
 
+import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
 import { ProviderUserBulkConfirmRequest } from "jslib-common/models/request/provider/providerUserBulkConfirmRequest";
 import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
 
-import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
-
 import { BulkConfirmComponent as OrganizationBulkConfirmComponent } from "src/app/organizations/manage/bulk/bulk-confirm.component";
 import { BulkUserDetails } from "src/app/organizations/manage/bulk/bulk-status.component";
 

bitwarden_license/src/app/providers/manage/events.component.ts

@@ -1,27 +1,24 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { ExportService } from "jslib-common/abstractions/export.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 { ProviderService } from "jslib-common/abstractions/provider.service";
-
-import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
 import { EventResponse } from "jslib-common/models/response/eventResponse";
 
-import { EventService } from "src/app/services/event.service";
-
 import { BaseEventsComponent } from "src/app/common/base.events.component";
+import { EventService } from "src/app/services/event.service";
 
 @Component({
   selector: "provider-events",
   templateUrl: "events.component.html",
 })
 export class EventsComponent extends BaseEventsComponent implements OnInit {
-  exportFileName: string = "provider-events";
+  exportFileName = "provider-events";
   providerId: string;
 
   private providerUsersUserIdMap = new Map<string, any>();

bitwarden_license/src/app/providers/manage/manage.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { ProviderService } from "jslib-common/abstractions/provider.service";
-
 import { Provider } from "jslib-common/models/domain/provider";
 
 @Component({

bitwarden_license/src/app/providers/manage/people.component.html

@@ -214,7 +214,7 @@
                   {{ "eventLogs" | i18n }}
                 </a>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="bwi bwi-fw bwi-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>

bitwarden_license/src/app/providers/manage/people.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.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";
@@ -11,26 +14,18 @@ import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.se
 import { ProviderService } from "jslib-common/abstractions/provider.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { StateService } from "jslib-common/abstractions/state.service";
-
-import { ModalService } from "jslib-angular/services/modal.service";
-import { ValidationService } from "jslib-angular/services/validation.service";
-
 import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
 import { ProviderUserType } from "jslib-common/enums/providerUserType";
-
-import { SearchPipe } from "jslib-angular/pipes/search.pipe";
-import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
-import { ListResponse } from "jslib-common/models/response/listResponse";
-import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
-
 import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
 import { ProviderUserConfirmRequest } from "jslib-common/models/request/provider/providerUserConfirmRequest";
+import { ListResponse } from "jslib-common/models/response/listResponse";
 import { ProviderUserBulkResponse } from "jslib-common/models/response/provider/providerUserBulkResponse";
+import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
 
 import { BasePeopleComponent } from "src/app/common/base.people.component";
 import { BulkStatusComponent } from "src/app/organizations/manage/bulk/bulk-status.component";
 import { EntityEventsComponent } from "src/app/organizations/manage/entity-events.component";
+
 import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
 import { UserAddEditComponent } from "./user-add-edit.component";
@@ -158,17 +153,13 @@ export class PeopleComponent
   }
 
   async events(user: ProviderUserUserDetailsResponse) {
-    const [modal] = await this.modalService.openViewRef(
+    await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, (comp) => {
-      EntityEventsComponent,
+      comp.name = this.userNamePipe.transform(user);
-      this.eventsModalRef,
+      comp.providerId = this.providerId;
-      (comp) => {
+      comp.entityId = user.id;
-        comp.name = this.userNamePipe.transform(user);
+      comp.showUser = false;
-        comp.providerId = this.providerId;
+      comp.entity = "user";
-        comp.entityId = user.id;
+    });
-        comp.showUser = false;
-        comp.entity = "user";
-      }
-    );
   }
 
   async bulkRemove() {
@@ -272,13 +263,14 @@ export class PeopleComponent
 
         childComponent.users = users.map((user) => {
           let message = keyedErrors[user.id] ?? successfullMessage;
+          // eslint-disable-next-line
           if (!keyedFilteredUsers.hasOwnProperty(user.id)) {
             message = this.i18nService.t("bulkFilteredMessage");
           }
 
           return {
             user: user,
-            error: keyedErrors.hasOwnProperty(user.id),
+            error: keyedErrors.hasOwnProperty(user.id), // eslint-disable-line
             message: message,
           };
         });

bitwarden_license/src/app/providers/manage/user-add-edit.component.ts

@@ -4,12 +4,9 @@ import { ApiService } from "jslib-common/abstractions/api.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 { ProviderUserInviteRequest } from "jslib-common/models/request/provider/providerUserInviteRequest";
-
-import { PermissionsApi } from "jslib-common/models/api/permissionsApi";
-
 import { ProviderUserType } from "jslib-common/enums/providerUserType";
+import { PermissionsApi } from "jslib-common/models/api/permissionsApi";
+import { ProviderUserInviteRequest } from "jslib-common/models/request/provider/providerUserInviteRequest";
 import { ProviderUserUpdateRequest } from "jslib-common/models/request/provider/providerUserUpdateRequest";
 
 @Component({
@@ -24,7 +21,7 @@ export class UserAddEditComponent implements OnInit {
   @Output() onDeletedUser = new EventEmitter();
 
   loading = true;
-  editMode: boolean = false;
+  editMode = false;
   title: string;
   emails: string;
   type: ProviderUserType = ProviderUserType.ServiceUser;

bitwarden_license/src/app/providers/providers-layout.component.ts

@@ -2,7 +2,6 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { ProviderService } from "jslib-common/abstractions/provider.service";
-
 import { Provider } from "jslib-common/models/domain/provider";
 
 @Component({

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

@@ -4,7 +4,9 @@ import { RouterModule, Routes } from "@angular/router";
 import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
 import { Permissions } from "jslib-common/enums/permissions";
 
-import { AddOrganizationComponent } from "./clients/add-organization.component";
+import { FrontendLayoutComponent } from "src/app/layouts/frontend-layout.component";
+import { ProvidersComponent } from "src/app/providers/providers.component";
+
 import { ClientsComponent } from "./clients/clients.component";
 import { CreateOrganizationComponent } from "./clients/create-organization.component";
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
@@ -12,16 +14,12 @@ 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 { SettingsComponent } from "./settings/settings.component";
-import { SetupProviderComponent } from "./setup/setup-provider.component";
-import { SetupComponent } from "./setup/setup.component";
-
-import { FrontendLayoutComponent } from "src/app/layouts/frontend-layout.component";
-
-import { ProvidersComponent } from "src/app/providers/providers.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";
+import { SetupComponent } from "./setup/setup.component";
 
 const routes: Routes = [
   {

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

@@ -1,21 +1,15 @@
 import { CommonModule } from "@angular/common";
-import { ComponentFactoryResolver } from "@angular/core";
+import { ComponentFactoryResolver, NgModule } from "@angular/core";
-import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 
+import { JslibModule } from "jslib-angular/jslib.module";
 import { ModalService } from "jslib-angular/services/modal.service";
 
-import { ProviderGuardService } from "./services/provider-guard.service";
+import { OssModule } from "src/app/oss.module";
-import { ProviderTypeGuardService } from "./services/provider-type-guard.service";
-import { WebProviderService } from "./services/webProvider.service";
-
-import { ProvidersLayoutComponent } from "./providers-layout.component";
-import { ProvidersRoutingModule } from "./providers-routing.module";
 
 import { AddOrganizationComponent } from "./clients/add-organization.component";
 import { ClientsComponent } from "./clients/clients.component";
 import { CreateOrganizationComponent } from "./clients/create-organization.component";
-
 import { AcceptProviderComponent } from "./manage/accept-provider.component";
 import { BulkConfirmComponent } from "./manage/bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./manage/bulk/bulk-remove.component";
@@ -23,17 +17,18 @@ import { EventsComponent } from "./manage/events.component";
 import { ManageComponent } from "./manage/manage.component";
 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";
-
 import { SetupProviderComponent } from "./setup/setup-provider.component";
 import { SetupComponent } from "./setup/setup.component";
 
-import { OssModule } from "src/app/oss.module";
-
 @NgModule({
-  imports: [CommonModule, FormsModule, OssModule, ProvidersRoutingModule],
+  imports: [CommonModule, FormsModule, OssModule, JslibModule, ProvidersRoutingModule],
   declarations: [
     AcceptProviderComponent,
     AccountComponent,

bitwarden_license/src/app/providers/services/provider-type-guard.service.ts

@@ -2,7 +2,6 @@ import { Injectable } from "@angular/core";
 import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
 
 import { ProviderService } from "jslib-common/abstractions/provider.service";
-
 import { Permissions } from "jslib-common/enums/permissions";
 
 @Injectable()

bitwarden_license/src/app/providers/services/webProvider.service.ts

@@ -3,7 +3,6 @@ import { Injectable } from "@angular/core";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
-
 import { ProviderAddOrganizationRequest } from "jslib-common/models/request/provider/providerAddOrganizationRequest";
 
 @Injectable()

bitwarden_license/src/app/providers/settings/account.component.ts

@@ -6,9 +6,7 @@ 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 { ProviderUpdateRequest } from "jslib-common/models/request/provider/providerUpdateRequest";
-
 import { ProviderResponse } from "jslib-common/models/response/provider/providerResponse";
 
 @Component({

bitwarden_license/src/app/providers/settings/settings.component.ts

@@ -1,7 +1,6 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
-import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { ProviderService } from "jslib-common/abstractions/provider.service";
 
 @Component({
@@ -9,15 +8,11 @@ import { ProviderService } from "jslib-common/abstractions/provider.service";
   templateUrl: "settings.component.html",
 })
 export class SettingsComponent {
-  constructor(
+  constructor(private route: ActivatedRoute, private providerService: ProviderService) {}
-    private route: ActivatedRoute,
-    private providerService: ProviderService,
-    private platformUtilsService: PlatformUtilsService
-  ) {}
 
   ngOnInit() {
     this.route.parent.params.subscribe(async (params) => {
-      const provider = await this.providerService.get(params.providerId);
+      await this.providerService.get(params.providerId);
     });
   }
 }

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

@@ -16,6 +16,7 @@ export class SetupProviderComponent extends BaseAcceptComponent {
     this.router.navigate(["/providers/setup"], { queryParams: qParams });
   }
 
-  // tslint:disable-next-line
+  async unauthedHandler(qParams: any) {
-  async unauthedHandler(qParams: any) {}
+    // Empty
+  }
 }

bitwarden_license/src/app/providers/setup/setup.component.ts

@@ -1,12 +1,10 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { ValidationService } from "jslib-angular/services/validation.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
-
-import { ValidationService } from "jslib-angular/services/validation.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";

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.25.1",
+  "version": "2.28.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -29,8 +29,8 @@
     "dist:bit:selfhost": "npm run build:bit:selfhost:prod",
     "deploy": "npm run dist:bit && gh-pages -d build",
     "deploy:dev": "npm run dist:bit && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
-    "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' && prettier --check .",
+    "lint": "eslint . && prettier --check .",
-    "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix",
+    "lint:fix": "eslint . --fix",
     "prettier": "prettier --write .",
     "prepare": "husky install"
   },
@@ -41,11 +41,18 @@
     "@types/node": "^16.11.12",
     "@types/webcrypto": "^0.0.28",
     "@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",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
     "gh-pages": "^3.1.0",
     "html-loader": "^3.0.1",
     "html-webpack-injector": "1.1.4",
@@ -53,15 +60,17 @@
     "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",
-    "tslint": "^6.1.3",
-    "tslint-loader": "^3.5.4",
     "typescript": "4.3.5",
     "util": "^0.12.4",
     "webpack": "^5.64.4",
@@ -85,8 +94,8 @@
     "browser-hrtime": "^1.1.8",
     "core-js": "^3.11.0",
     "date-input-polyfill": "^2.14.0",
-    "font-awesome": "4.7.0",
     "jquery": "3.6.0",
+    "jszip": "^3.7.1",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-toastr": "14.1.4",
     "popper.js": "1.16.1",
@@ -94,14 +103,16 @@
     "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",
     "npm": "~8"
   },
   "lint-staged": {
-    "*": "prettier --ignore-unknown --write",
+    "./!(jslib)**": "prettier --ignore-unknown --write",
+    "*.ts": "eslint --fix",
     "*.png": "node scripts/optimize.js"
   }
 }

postcss.config.js

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

src/abstractions/state.service.ts

@@ -0,0 +1,9 @@
+import { StateService as BaseStateService } from "jslib-common/abstractions/state.service";
+import { StorageOptions } from "jslib-common/models/domain/storageOptions";
+
+import { Account } from "src/models/account";
+
+export abstract class StateService extends BaseStateService<Account> {
+  getRememberEmail: (options?: StorageOptions) => Promise<boolean>;
+  setRememberEmail: (value: boolean, options?: StorageOptions) => Promise<void>;
+}

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

@@ -6,6 +6,7 @@ import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { EmergencyAccessAcceptRequest } from "jslib-common/models/request/emergencyAccessAcceptRequest";
+
 import { BaseAcceptComponent } from "../common/base.accept.component";
 
 @Component({

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

@@ -8,12 +8,11 @@ import { LogService } from "jslib-common/abstractions/log.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
-
+import { Utils } from "jslib-common/misc/utils";
+import { Policy } from "jslib-common/models/domain/policy";
 import { OrganizationUserAcceptRequest } from "jslib-common/models/request/organizationUserAcceptRequest";
 import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
 
-import { Utils } from "jslib-common/misc/utils";
-import { Policy } from "jslib-common/models/domain/policy";
 import { BaseAcceptComponent } from "../common/base.accept.component";
 
 @Component({

src/app/accounts/hint.component.ts

@@ -1,13 +1,12 @@
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { HintComponent as BaseHintComponent } from "jslib-angular/components/hint.component";
 import { ApiService } from "jslib-common/abstractions/api.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 { HintComponent as BaseHintComponent } from "jslib-angular/components/hint.component";
-
 @Component({
   selector: "app-hint",
   templateUrl: "hint.component.html",

src/app/accounts/lock.component.ts

@@ -1,6 +1,7 @@
 import { Component, NgZone } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { LockComponent as BaseLockComponent } from "jslib-angular/components/lock.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { EnvironmentService } from "jslib-common/abstractions/environment.service";
@@ -14,8 +15,6 @@ import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.serv
 
 import { RouterService } from "../services/router.service";
 
-import { LockComponent as BaseLockComponent } from "jslib-angular/components/lock.component";
-
 @Component({
   selector: "app-lock",
   templateUrl: "lock.component.html",

src/app/accounts/login.component.html

@@ -86,7 +86,7 @@
               [queryParams]="{ email: email }"
               class="btn btn-outline-secondary btn-block ml-2 mt-0"
             >
-              <i class="bwi bwi-pencil-square-o" aria-hidden="true"></i>
+              <i class="bwi bwi-pencil-square" aria-hidden="true"></i>
               {{ "createAccount" | i18n }}
             </a>
           </div>

src/app/accounts/login.component.ts

@@ -1,22 +1,25 @@
 import { Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { LoginComponent as BaseLoginComponent } from "jslib-angular/components/login.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { AuthService } from "jslib-common/abstractions/auth.service";
 import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
 import { EnvironmentService } from "jslib-common/abstractions/environment.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
-import { StateService } from "jslib-common/abstractions/state.service";
+import { PolicyData } from "jslib-common/models/data/policyData";
-
+import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPasswordPolicyOptions";
-import { LoginComponent as BaseLoginComponent } from "jslib-angular/components/login.component";
-
 import { Policy } from "jslib-common/models/domain/policy";
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { PolicyResponse } from "jslib-common/models/response/policyResponse";
+
+import { StateService } from "../../abstractions/state.service";
 
 @Component({
   selector: "app-login",
@@ -24,13 +27,14 @@ import { Policy } from "jslib-common/models/domain/policy";
 })
 export class LoginComponent extends BaseLoginComponent {
   showResetPasswordAutoEnrollWarning = false;
+  enforcedPasswordPolicyOptions: MasterPasswordPolicyOptions;
+  policies: ListResponse<PolicyResponse>;
 
   constructor(
     authService: AuthService,
     router: Router,
     i18nService: I18nService,
     private route: ActivatedRoute,
-    stateService: StateService,
     platformUtilsService: PlatformUtilsService,
     environmentService: EnvironmentService,
     passwordGenerationService: PasswordGenerationService,
@@ -38,7 +42,9 @@ export class LoginComponent extends BaseLoginComponent {
     private apiService: ApiService,
     private policyService: PolicyService,
     logService: LogService,
-    ngZone: NgZone
+    ngZone: NgZone,
+    protected stateService: StateService,
+    private messagingService: MessagingService
   ) {
     super(
       authService,
@@ -52,6 +58,9 @@ export class LoginComponent extends BaseLoginComponent {
       logService,
       ngZone
     );
+    this.onSuccessfulLogin = async () => {
+      this.messagingService.send("setFullWidth");
+    };
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
   }
 
@@ -78,35 +87,64 @@ export class LoginComponent extends BaseLoginComponent {
         });
       }
       await super.ngOnInit();
+      this.rememberEmail = await this.stateService.getRememberEmail();
     });
 
     const invite = await this.stateService.getOrganizationInvitation();
     if (invite != null) {
       let policyList: Policy[] = null;
       try {
-        const policies = await this.apiService.getPoliciesByToken(
+        this.policies = await this.apiService.getPoliciesByToken(
           invite.organizationId,
           invite.token,
           invite.email,
           invite.organizationUserId
         );
-        policyList = this.policyService.mapPoliciesFromToken(policies);
+        policyList = this.policyService.mapPoliciesFromToken(this.policies);
       } catch (e) {
         this.logService.error(e);
       }
 
       if (policyList != null) {
-        const result = this.policyService.getResetPasswordPolicyOptions(
+        const resetPasswordPolicy = this.policyService.getResetPasswordPolicyOptions(
           policyList,
           invite.organizationId
         );
         // Set to true if policy enabled and auto-enroll enabled
-        this.showResetPasswordAutoEnrollWarning = result[1] && result[0].autoEnrollEnabled;
+        this.showResetPasswordAutoEnrollWarning =
+          resetPasswordPolicy[1] && resetPasswordPolicy[0].autoEnrollEnabled;
+
+        this.enforcedPasswordPolicyOptions =
+          await this.policyService.getMasterPasswordPolicyOptions(policyList);
       }
     }
   }
 
   async goAfterLogIn() {
+    // Check master password against policy
+    if (this.enforcedPasswordPolicyOptions != null) {
+      const strengthResult = this.passwordGenerationService.passwordStrength(
+        this.masterPassword,
+        this.getPasswordStrengthUserInput()
+      );
+      const masterPasswordScore = strengthResult == null ? null : strengthResult.score;
+
+      // If invalid, save policies and require update
+      if (
+        !this.policyService.evaluateMasterPassword(
+          masterPasswordScore,
+          this.masterPassword,
+          this.enforcedPasswordPolicyOptions
+        )
+      ) {
+        const policiesData: { [id: string]: PolicyData } = {};
+        this.policies.data.map((p) => (policiesData[p.id] = new PolicyData(p)));
+        await this.policyService.replace(policiesData);
+        this.router.navigate(["update-password"]);
+        return;
+      }
+    }
+
     const loginRedirect = await this.stateService.getLoginRedirect();
     if (loginRedirect != null) {
       this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
@@ -115,4 +153,27 @@ export class LoginComponent extends BaseLoginComponent {
       this.router.navigate([this.successRoute]);
     }
   }
+
+  async submit() {
+    await this.stateService.setRememberEmail(this.rememberEmail);
+    if (!this.rememberEmail) {
+      await this.stateService.setRememberedEmail(null);
+    }
+    await super.submit();
+  }
+
+  private getPasswordStrengthUserInput() {
+    let userInput: string[] = [];
+    const atPosition = this.email.indexOf("@");
+    if (atPosition > -1) {
+      userInput = userInput.concat(
+        this.email
+          .substr(0, atPosition)
+          .trim()
+          .toLowerCase()
+          .split(/[^A-Za-z0-9]/)
+      );
+    }
+    return userInput;
+  }
 }

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

@@ -5,7 +5,6 @@ import { ApiService } from "jslib-common/abstractions/api.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 { DeleteRecoverRequest } from "jslib-common/models/request/deleteRecoverRequest";
 
 @Component({

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

@@ -7,7 +7,6 @@ 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 { TwoFactorRecoveryRequest } from "jslib-common/models/request/twoFactorRecoveryRequest";
 
 @Component({

src/app/accounts/register.component.ts

@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { RegisterComponent as BaseRegisterComponent } from "jslib-angular/components/register.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { AuthService } from "jslib-common/abstractions/auth.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
@@ -13,13 +13,9 @@ import { PasswordGenerationService } from "jslib-common/abstractions/passwordGen
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
-
+import { PolicyData } from "jslib-common/models/data/policyData";
-import { RegisterComponent as BaseRegisterComponent } from "jslib-angular/components/register.component";
-
 import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPasswordPolicyOptions";
 import { Policy } from "jslib-common/models/domain/policy";
-
-import { PolicyData } from "jslib-common/models/data/policyData";
 import { ReferenceEventRequest } from "jslib-common/models/request/referenceEventRequest";
 
 @Component({

src/app/accounts/set-password.component.ts

@@ -1,6 +1,7 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
+import { SetPasswordComponent as BaseSetPasswordComponent } from "jslib-angular/components/set-password.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -11,8 +12,6 @@ import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 
-import { SetPasswordComponent as BaseSetPasswordComponent } from "jslib-angular/components/set-password.component";
-
 @Component({
   selector: "app-set-password",
   templateUrl: "set-password.component.html",

src/app/accounts/sso.component.ts

@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { SsoComponent as BaseSsoComponent } from "jslib-angular/components/sso.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { AuthService } from "jslib-common/abstractions/auth.service";
 import { CryptoFunctionService } from "jslib-common/abstractions/cryptoFunction.service";
@@ -13,8 +13,6 @@ import { PasswordGenerationService } from "jslib-common/abstractions/passwordGen
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 
-import { SsoComponent as BaseSsoComponent } from "jslib-angular/components/sso.component";
-
 @Component({
   selector: "app-sso",
   templateUrl: "sso.component.html",

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

@@ -1,11 +1,10 @@
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
-import { AuthService } from "jslib-common/abstractions/auth.service";
+import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "jslib-angular/components/two-factor-options.component";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
-
+import { TwoFactorService } from "jslib-common/abstractions/twoFactor.service";
-import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "jslib-angular/components/two-factor-options.component";
 
 @Component({
   selector: "app-two-factor-options",
@@ -13,11 +12,11 @@ import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "jsli
 })
 export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
   constructor(
-    authService: AuthService,
+    twoFactorService: TwoFactorService,
     router: Router,
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService
   ) {
-    super(authService, router, i18nService, platformUtilsService, window);
+    super(twoFactorService, router, i18nService, platformUtilsService, window);
   }
 }

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

@@ -114,6 +114,9 @@
             <p>{{ "noTwoStepProviders2" | i18n }}</p>
           </ng-container>
           <hr />
+          <div [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
+          </div>
           <div class="d-flex mb-3">
             <button
               type="submit"

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

@@ -1,7 +1,8 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
-
 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 { AuthService } from "jslib-common/abstractions/auth.service";
 import { EnvironmentService } from "jslib-common/abstractions/environment.service";
@@ -9,13 +10,9 @@ 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 { StateService } from "jslib-common/abstractions/state.service";
-
+import { TwoFactorService } from "jslib-common/abstractions/twoFactor.service";
-import { ModalService } from "jslib-angular/services/modal.service";
-
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
 
-import { TwoFactorComponent as BaseTwoFactorComponent } from "jslib-angular/components/two-factor.component";
-
 import { TwoFactorOptionsComponent } from "./two-factor-options.component";
 
 @Component({
@@ -36,7 +33,8 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     environmentService: EnvironmentService,
     private modalService: ModalService,
     route: ActivatedRoute,
-    logService: LogService
+    logService: LogService,
+    twoFactorService: TwoFactorService
   ) {
     super(
       authService,
@@ -48,7 +46,8 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
       environmentService,
       stateService,
       route,
-      logService
+      logService,
+      twoFactorService
     );
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
   }

src/app/accounts/update-password.component.html

@@ -0,0 +1,90 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-4">
+      <p class="lead text-center mb-4">{{ "updateMasterPassword" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <app-callout type="warning">{{ "masterPasswordInvalidWarning" | i18n }} </app-callout>
+          <app-callout
+            type="info"
+            [enforcedPolicyOptions]="enforcedPolicyOptions"
+            *ngIf="enforcedPolicyOptions"
+          ></app-callout>
+
+          <form
+            #form
+            (ngSubmit)="submit()"
+            [appApiAction]="formPromise"
+            ngNativeValidate
+            autocomplete="off"
+          >
+            <div class="row">
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="currentMasterPassword">{{ "currentMasterPass" | i18n }}</label>
+                  <input
+                    id="currentMasterPassword"
+                    type="password"
+                    name="MasterPasswordHash"
+                    class="form-control"
+                    [(ngModel)]="currentMasterPassword"
+                    required
+                    appInputVerbatim
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="newMasterPassword">{{ "newMasterPass" | i18n }}</label>
+                  <input
+                    id="newMasterPassword"
+                    type="password"
+                    name="NewMasterPasswordHash"
+                    class="form-control mb-1"
+                    [(ngModel)]="masterPassword"
+                    (input)="updatePasswordStrength()"
+                    required
+                    appInputVerbatim
+                    autocomplete="new-password"
+                  />
+                  <app-password-strength
+                    [score]="masterPasswordScore"
+                    [showText]="true"
+                  ></app-password-strength>
+                </div>
+              </div>
+              <div class="col-6">
+                <div class="form-group">
+                  <label for="masterPasswordRetype">{{ "confirmNewMasterPass" | i18n }}</label>
+                  <input
+                    id="masterPasswordRetype"
+                    type="password"
+                    name="MasterPasswordRetype"
+                    class="form-control"
+                    [(ngModel)]="masterPasswordRetype"
+                    required
+                    appInputVerbatim
+                    autocomplete="new-password"
+                  />
+                </div>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+              <i
+                class="fa fa-spinner fa-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span>{{ "changeMasterPassword" | i18n }}</span>
+            </button>
+            <button (click)="cancel()" type="button" class="btn btn-outline-secondary">
+              <span>{{ "cancel" | i18n }}</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

src/app/accounts/update-password.component.ts

@@ -0,0 +1,48 @@
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { UpdatePasswordComponent as BaseUpdatePasswordComponent } from "jslib-angular/components/update-password.component";
+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 { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+
+@Component({
+  selector: "app-update-password",
+  templateUrl: "update-password.component.html",
+})
+export class UpdatePasswordComponent extends BaseUpdatePasswordComponent {
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    passwordGenerationService: PasswordGenerationService,
+    policyService: PolicyService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    apiService: ApiService,
+    logService: LogService,
+    stateService: StateService,
+    userVerificationService: UserVerificationService
+  ) {
+    super(
+      router,
+      i18nService,
+      platformUtilsService,
+      passwordGenerationService,
+      policyService,
+      cryptoService,
+      messagingService,
+      apiService,
+      stateService,
+      userVerificationService,
+      logService
+    );
+  }
+}

src/app/accounts/update-temp-password.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 
+import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from "jslib-angular/components/update-temp-password.component";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -8,10 +9,8 @@ import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.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 { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from "jslib-angular/components/update-temp-password.component";
 import { StateService } from "jslib-common/abstractions/state.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
 
 @Component({
   selector: "app-update-temp-password",

src/app/accounts/verify-email-token.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
 import { ApiService } from "jslib-common/abstractions/api.service";
@@ -8,7 +7,6 @@ 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 { StateService } from "jslib-common/abstractions/state.service";
-
 import { VerifyEmailRequest } from "jslib-common/models/request/verifyEmailRequest";
 
 @Component({

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

@@ -1,13 +1,11 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
 import { ApiService } from "jslib-common/abstractions/api.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 { VerifyDeleteRecoverRequest } from "jslib-common/models/request/verifyDeleteRecoverRequest";
 
 @Component({

src/app/app.component.ts

@@ -21,14 +21,10 @@ import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { SettingsService } from "jslib-common/abstractions/settings.service";
 import { StateService } from "jslib-common/abstractions/state.service";
-import { StorageService } from "jslib-common/abstractions/storage.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { TokenService } from "jslib-common/abstractions/token.service";
 import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
 
-import { PolicyListService } from "./services/policy-list.service";
-import { RouterService } from "./services/router.service";
-
 import { DisableSendPolicy } from "./organizations/policies/disable-send.component";
 import { MasterPasswordPolicy } from "./organizations/policies/master-password.component";
 import { PasswordGeneratorPolicy } from "./organizations/policies/password-generator.component";
@@ -38,6 +34,8 @@ import { ResetPasswordPolicy } from "./organizations/policies/reset-password.com
 import { SendOptionsPolicy } from "./organizations/policies/send-options.component";
 import { SingleOrgPolicy } from "./organizations/policies/single-org.component";
 import { TwoFactorAuthenticationPolicy } from "./organizations/policies/two-factor-authentication.component";
+import { PolicyListService } from "./services/policy-list.service";
+import { RouterService } from "./services/router.service";
 
 const BroadcasterSubscriptionId = "AppComponent";
 const IdleTimeout = 60000 * 10; // 10 minutes
@@ -117,7 +115,7 @@ export class AppComponent implements OnDestroy, OnInit {
             break;
           case "syncCompleted":
             break;
-          case "upgradeOrganization":
+          case "upgradeOrganization": {
             const upgradeConfirmed = await this.platformUtilsService.showDialog(
               this.i18nService.t("upgradeOrganizationDesc"),
               this.i18nService.t("upgradeOrganization"),
@@ -133,7 +131,8 @@ export class AppComponent implements OnDestroy, OnInit {
               ]);
             }
             break;
-          case "premiumRequired":
+          }
+          case "premiumRequired": {
             const premiumConfirmed = await this.platformUtilsService.showDialog(
               this.i18nService.t("premiumRequiredDesc"),
               this.i18nService.t("premiumRequired"),
@@ -144,7 +143,8 @@ export class AppComponent implements OnDestroy, OnInit {
               this.router.navigate(["settings/premium"]);
             }
             break;
-          case "emailVerificationRequired":
+          }
+          case "emailVerificationRequired": {
             const emailVerificationConfirmed = await this.platformUtilsService.showDialog(
               this.i18nService.t("emailVerificationRequiredDesc"),
               this.i18nService.t("emailVerificationRequired"),
@@ -157,6 +157,7 @@ export class AppComponent implements OnDestroy, OnInit {
               );
             }
             break;
+          }
           case "showToast":
             this.showToast(message);
             break;
@@ -210,7 +211,6 @@ export class AppComponent implements OnDestroy, OnInit {
     await Promise.all([
       this.eventService.clearEvents(),
       this.syncService.setLastSync(new Date(0)),
-      this.tokenService.clearToken(),
       this.cryptoService.clearKeys(),
       this.settingsService.clear(userId),
       this.cipherService.clear(userId),

src/app/app.module.ts

@@ -1,11 +1,8 @@
-import { InfiniteScrollModule } from "ngx-infinite-scroll";
-
 import { DragDropModule } from "@angular/cdk/drag-drop";
 import { NgModule } from "@angular/core";
 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";
@@ -19,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

@@ -1,6 +1,5 @@
 import { Directive, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";

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

@@ -4,11 +4,9 @@ import { ExportService } from "jslib-common/abstractions/export.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 { EventView } from "jslib-common/models/view/eventView";
-
 import { EventResponse } from "jslib-common/models/response/eventResponse";
 import { ListResponse } from "jslib-common/models/response/listResponse";
+import { EventView } from "jslib-common/models/view/eventView";
 
 import { EventService } from "src/app/services/event.service";
 
@@ -19,7 +17,7 @@ export abstract class BaseEventsComponent {
   events: EventView[];
   start: string;
   end: string;
-  dirtyDates: boolean = true;
+  dirtyDates = true;
   continuationToken: string;
   refreshPromise: Promise<any>;
   exportPromise: Promise<any>;

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

@@ -1,5 +1,9 @@
 import { Directive, ViewChild, ViewContainerRef } from "@angular/core";
 
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.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";
@@ -7,24 +11,15 @@ import { LogService } from "jslib-common/abstractions/log.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 { ModalService } from "jslib-angular/services/modal.service";
-import { ValidationService } from "jslib-angular/services/validation.service";
-
-import { SearchPipe } from "jslib-angular/pipes/search.pipe";
-import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
 import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
 import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
 import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
 import { ProviderUserType } from "jslib-common/enums/providerUserType";
-
+import { Utils } from "jslib-common/misc/utils";
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { OrganizationUserUserDetailsResponse } from "jslib-common/models/response/organizationUserResponse";
 import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
 
-import { Utils } from "jslib-common/misc/utils";
-
 import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
 
 type StatusType = OrganizationUserStatusType | ProviderUserStatusType;

src/app/components/nested-checkbox.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+
 import { Utils } from "jslib-common/misc/utils";
 
 @Component({

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/layouts/footer.component.ts

@@ -8,7 +8,7 @@ import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.se
 })
 export class FooterComponent implements OnInit {
   version: string;
-  year: string = "2015";
+  year = "2015";
 
   constructor(private platformUtilsService: PlatformUtilsService) {}
 

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

@@ -8,7 +8,7 @@ import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.se
 })
 export class FrontendLayoutComponent implements OnInit, OnDestroy {
   version: string;
-  year: string = "2015";
+  year = "2015";
 
   constructor(private platformUtilsService: PlatformUtilsService) {}
 

src/app/layouts/navbar.component.html

@@ -24,6 +24,9 @@
         <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 class="nav-item" routerLinkActive="active">
           <a class="nav-link" routerLink="/settings">{{ "settings" | i18n }}</a>
         </li>
@@ -60,7 +63,12 @@
             <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
             {{ "myAccount" | i18n }}
           </a>
-          <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
+          <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>

src/app/layouts/navbar.component.ts

@@ -5,7 +5,6 @@ import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.se
 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 { Provider } from "jslib-common/models/domain/provider";
 
 @Component({

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

@@ -1,10 +1,8 @@
 import { Component, NgZone, OnDestroy, OnInit } from "@angular/core";
-
 import { ActivatedRoute } from "@angular/router";
 
 import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
-
 import { Organization } from "jslib-common/models/domain/organization";
 
 const BroadcasterSubscriptionId = "OrganizationLayoutComponent";

src/app/main.ts

@@ -5,8 +5,8 @@ import "bootstrap";
 import "jquery";
 import "popper.js";
 
-// tslint:disable-next-line
 require("../scss/styles.scss");
+require("../scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

src/app/organizations/manage/bulk/bulk-confirm.component.ts

@@ -3,13 +3,11 @@ import { Component, Input, OnInit } from "@angular/core";
 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 { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
+import { Utils } from "jslib-common/misc/utils";
 import { OrganizationUserBulkConfirmRequest } from "jslib-common/models/request/organizationUserBulkConfirmRequest";
 import { OrganizationUserBulkRequest } from "jslib-common/models/request/organizationUserBulkRequest";
 
-import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
-
-import { Utils } from "jslib-common/misc/utils";
 import { BulkUserDetails } from "./bulk-status.component";
 
 @Component({
@@ -26,8 +24,8 @@ export class BulkConfirmComponent implements OnInit {
   fingerprints: Map<string, string> = new Map();
   statuses: Map<string, string> = new Map();
 
-  loading: boolean = true;
+  loading = true;
-  done: boolean = false;
+  done = false;
   error: string;
 
   constructor(

src/app/organizations/manage/bulk/bulk-remove.component.ts

@@ -16,8 +16,8 @@ export class BulkRemoveComponent {
 
   statuses: Map<string, string> = new Map();
 
-  loading: boolean = false;
+  loading = false;
-  done: boolean = false;
+  done = false;
   error: string;
 
   constructor(protected apiService: ApiService, protected i18nService: I18nService) {}

src/app/organizations/manage/bulk/bulk-status.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+
 import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
 import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
 
@@ -21,5 +22,5 @@ type BulkStatusEntry = {
 })
 export class BulkStatusComponent {
   users: BulkStatusEntry[];
-  loading: boolean = false;
+  loading = false;
 }

src/app/organizations/manage/collection-add-edit.component.ts

@@ -6,15 +6,13 @@ 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 { Utils } from "jslib-common/misc/utils";
 import { EncString } from "jslib-common/models/domain/encString";
 import { SymmetricCryptoKey } from "jslib-common/models/domain/symmetricCryptoKey";
 import { CollectionRequest } from "jslib-common/models/request/collectionRequest";
 import { SelectionReadOnlyRequest } from "jslib-common/models/request/selectionReadOnlyRequest";
 import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
-import { Utils } from "jslib-common/misc/utils";
-
 @Component({
   selector: "app-collection-add-edit",
   templateUrl: "collection-add-edit.component.html",
@@ -28,8 +26,8 @@ export class CollectionAddEditComponent implements OnInit {
   @Output() onDeletedCollection = new EventEmitter();
 
   loading = true;
-  editMode: boolean = false;
+  editMode = false;
-  accessGroups: boolean = false;
+  accessGroups = false;
   title: string;
   name: string;
   externalId: string;

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

@@ -1,8 +1,8 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { CollectionService } from "jslib-common/abstractions/collection.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -10,9 +10,6 @@ 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 { SearchService } from "jslib-common/abstractions/search.service";
-
-import { ModalService } from "jslib-angular/services/modal.service";
-
 import { CollectionData } from "jslib-common/models/data/collectionData";
 import { Collection } from "jslib-common/models/domain/collection";
 import { Organization } from "jslib-common/models/domain/organization";
@@ -37,7 +34,7 @@ export class CollectionsComponent implements OnInit {
 
   loading = true;
   organization: Organization;
-  canCreate: boolean = false;
+  canCreate = false;
   organizationId: string;
   collections: CollectionView[];
   assignedCollections: CollectionView[];

src/app/organizations/manage/entity-events.component.ts

@@ -1,17 +1,15 @@
 import { Component, Input, OnInit } from "@angular/core";
 
+import { UserNamePipe } from "jslib-angular/pipes/user-name.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";
-
-import { EventService } from "../../services/event.service";
-
-import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { EventResponse } from "jslib-common/models/response/eventResponse";
 import { ListResponse } from "jslib-common/models/response/listResponse";
 
+import { EventService } from "../../services/event.service";
+
 @Component({
   selector: "app-entity-events",
   templateUrl: "entity-events.component.html",

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

@@ -3,15 +3,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { ApiService } from "jslib-common/abstractions/api.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 { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
 import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
+import { Utils } from "jslib-common/misc/utils";
 import { SelectionReadOnlyRequest } from "jslib-common/models/request/selectionReadOnlyRequest";
 import { OrganizationUserUserDetailsResponse } from "jslib-common/models/response/organizationUserResponse";
 
-import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
-import { Utils } from "jslib-common/misc/utils";
-
 @Component({
   selector: "app-entity-users",
   templateUrl: "entity-users.component.html",

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

@@ -2,7 +2,6 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { ExportService } from "jslib-common/abstractions/export.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -10,20 +9,18 @@ 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 { ProviderService } from "jslib-common/abstractions/provider.service";
-
 import { Organization } from "jslib-common/models/domain/organization";
 import { EventResponse } from "jslib-common/models/response/eventResponse";
 
-import { EventService } from "../../services/event.service";
-
 import { BaseEventsComponent } from "../../common/base.events.component";
+import { EventService } from "../../services/event.service";
 
 @Component({
   selector: "app-org-events",
   templateUrl: "events.component.html",
 })
 export class EventsComponent extends BaseEventsComponent implements OnInit {
-  exportFileName: string = "org-events";
+  exportFileName = "org-events";
   organizationId: string;
   organization: Organization;
 

src/app/organizations/manage/group-add-edit.component.ts

@@ -5,7 +5,6 @@ import { CollectionService } from "jslib-common/abstractions/collection.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 { CollectionData } from "jslib-common/models/data/collectionData";
 import { Collection } from "jslib-common/models/domain/collection";
 import { GroupRequest } from "jslib-common/models/request/groupRequest";
@@ -24,7 +23,7 @@ export class GroupAddEditComponent implements OnInit {
   @Output() onDeletedGroup = new EventEmitter();
 
   loading = true;
-  editMode: boolean = false;
+  editMode = false;
   title: string;
   name: string;
   externalId: string;

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

@@ -1,20 +1,16 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.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 { SearchService } from "jslib-common/abstractions/search.service";
-
-import { ModalService } from "jslib-angular/services/modal.service";
-
-import { GroupResponse } from "jslib-common/models/response/groupResponse";
-
 import { Utils } from "jslib-common/misc/utils";
+import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
 import { EntityUsersComponent } from "./entity-users.component";
 import { GroupAddEditComponent } from "./group-add-edit.component";

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

@@ -2,7 +2,6 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
-
 import { Organization } from "jslib-common/models/domain/organization";
 
 @Component({
@@ -11,10 +10,10 @@ import { Organization } from "jslib-common/models/domain/organization";
 })
 export class ManageComponent implements OnInit {
   organization: Organization;
-  accessPolicies: boolean = false;
+  accessPolicies = false;
-  accessGroups: boolean = false;
+  accessGroups = false;
-  accessEvents: boolean = false;
+  accessEvents = false;
-  accessSso: boolean = false;
+  accessSso = false;
 
   constructor(private route: ActivatedRoute, private organizationService: OrganizationService) {}
 

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

@@ -1,11 +1,11 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-
+import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
-import { ActivatedRoute, Router } from "@angular/router";
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
-
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ValidationService } from "jslib-angular/services/validation.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";
@@ -16,25 +16,18 @@ import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
-
+import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
-import { ModalService } from "jslib-angular/services/modal.service";
+import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
-
+import { PolicyType } from "jslib-common/enums/policyType";
 import { OrganizationKeysRequest } from "jslib-common/models/request/organizationKeysRequest";
 import { OrganizationUserBulkRequest } from "jslib-common/models/request/organizationUserBulkRequest";
 import { OrganizationUserConfirmRequest } from "jslib-common/models/request/organizationUserConfirmRequest";
-
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { OrganizationUserBulkResponse } from "jslib-common/models/response/organizationUserBulkResponse";
 import { OrganizationUserUserDetailsResponse } from "jslib-common/models/response/organizationUserResponse";
 
-import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
-import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
-import { PolicyType } from "jslib-common/enums/policyType";
-
-import { SearchPipe } from "jslib-angular/pipes/search.pipe";
-import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
-
 import { BasePeopleComponent } from "../../common/base.people.component";
+
 import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
 import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
 import { BulkStatusComponent } from "./bulk/bulk-status.component";
@@ -334,17 +327,13 @@ export class PeopleComponent
   }
 
   async events(user: OrganizationUserUserDetailsResponse) {
-    const [modal] = await this.modalService.openViewRef(
+    await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, (comp) => {
-      EntityEventsComponent,
+      comp.name = this.userNamePipe.transform(user);
-      this.eventsModalRef,
+      comp.organizationId = this.organizationId;
-      (comp) => {
+      comp.entityId = user.id;
-        comp.name = this.userNamePipe.transform(user);
+      comp.showUser = false;
-        comp.organizationId = this.organizationId;
+      comp.entity = "user";
-        comp.entityId = user.id;
+    });
-        comp.showUser = false;
-        comp.entity = "user";
-      }
-    );
   }
 
   async resetPassword(user: OrganizationUserUserDetailsResponse) {
@@ -406,13 +395,14 @@ export class PeopleComponent
 
         childComponent.users = users.map((user) => {
           let message = keyedErrors[user.id] ?? successfullMessage;
+          // eslint-disable-next-line
           if (!keyedFilteredUsers.hasOwnProperty(user.id)) {
             message = this.i18nService.t("bulkFilteredMessage");
           }
 
           return {
             user: user,
-            error: keyedErrors.hasOwnProperty(user.id),
+            error: keyedErrors.hasOwnProperty(user.id), // eslint-disable-line
             message: message,
           };
         });

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

@@ -1,24 +1,19 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-
 import { first } from "rxjs/operators";
 
-import { PolicyType } from "jslib-common/enums/policyType";
+import { ModalService } from "jslib-angular/services/modal.service";
-
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
-
+import { PolicyType } from "jslib-common/enums/policyType";
-import { ModalService } from "jslib-angular/services/modal.service";
-
-import { PolicyResponse } from "jslib-common/models/response/policyResponse";
-
 import { Organization } from "jslib-common/models/domain/organization";
-
+import { PolicyResponse } from "jslib-common/models/response/policyResponse";
-import { PolicyEditComponent } from "./policy-edit.component";
 
 import { PolicyListService } from "../../services/policy-list.service";
 import { BasePolicy } from "../policies/base-policy.component";
 
+import { PolicyEditComponent } from "./policy-edit.component";
+
 @Component({
   selector: "app-org-policies",
   templateUrl: "policies.component.html",

src/app/organizations/manage/policy-edit.component.ts

@@ -13,11 +13,8 @@ import { ApiService } from "jslib-common/abstractions/api.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 { PolicyType } from "jslib-common/enums/policyType";
-
 import { PolicyRequest } from "jslib-common/models/request/policyRequest";
-
 import { PolicyResponse } from "jslib-common/models/response/policyResponse";
 
 import { BasePolicy, BasePolicyComponent } from "../policies/base-policy.component";
@@ -83,7 +80,7 @@ export class PolicyEditComponent {
     try {
       request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
     } catch (e) {
-      this.platformUtilsService.showToast("error", null, e);
+      this.platformUtilsService.showToast("error", null, e.message);
       return;
     }
 

src/app/organizations/manage/reset-password.component.ts

@@ -7,11 +7,9 @@ import { LogService } from "jslib-common/abstractions/log.service";
 import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
-
 import { EncString } from "jslib-common/models/domain/encString";
 import { MasterPasswordPolicyOptions } from "jslib-common/models/domain/masterPasswordPolicyOptions";
 import { SymmetricCryptoKey } from "jslib-common/models/domain/symmetricCryptoKey";
-
 import { OrganizationUserResetPasswordRequest } from "jslib-common/models/request/organizationUserResetPasswordRequest";
 
 @Component({
@@ -27,7 +25,7 @@ export class ResetPasswordComponent implements OnInit {
 
   enforcedPolicyOptions: MasterPasswordPolicyOptions;
   newPassword: string = null;
-  showPassword: boolean = false;
+  showPassword = false;
   masterPasswordScore: number;
   formPromise: Promise<any>;
   private newPasswordStrengthTimeout: any;