Bump version to 2.22.3 (#1170)

(cherry picked from commit 7fd9427801)

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,93 +0,0 @@
-name: Bug Report
-description: File a bug report
-labels: [bug]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-        
-        Please do not submit feature requests. The [Community Forums](https://community.bitwarden.com) has a section for submitting, voting for, and discussing product feature requests.
-  - type: textarea
-    id: reproduce
-    attributes:
-      label: Steps To Reproduce
-      description: How can we reproduce the behavior.
-      value: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. Click on '...'
-    validations:
-      required: true
-  - type: textarea
-    id: expected
-    attributes:
-      label: Expected Result
-      description: A clear and concise description of what you expected to happen.
-    validations:
-      required: true
-  - type: textarea
-    id: actual
-    attributes:
-      label: Actual Result
-      description: A clear and concise description of what is happening.
-    validations:
-      required: true
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: Screenshots or Videos
-      description: If applicable, add screenshots and/or a short video to help explain your problem.
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: Add any other context about the problem here.
-  - type: dropdown
-    id: os
-    attributes:
-      label: Operating System
-      description: What operating system are you seeing the problem on?
-      multiple: true
-      options:
-        - Windows
-        - macOS
-        - Linux
-        - Android
-        - iOS
-    validations:
-      required: true
-  - type: input
-    id: os-version
-    attributes:
-      label: Operating System Version
-      description: What version of the operating system(s) are you seeing the problem on?
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: Web Browser
-      description: What browser(s) are you seeing the problem on?
-      multiple: true
-      options:
-        - Chrome
-        - Safari
-        - Microsoft Edge
-        - Firefox
-        - Opera
-        - Brave
-        - Vivaldi
-    validations:
-      required: true
-  - type: input
-    id: browser-version
-    attributes:
-      label: Browser Version
-      description: What version of the browser(s) are you seeing the problem on?
-  - type: input
-    id: version
-    attributes:
-      label: Build Version
-      description: What version of our software are you running? (Bottom of the page)
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,14 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Requests
-    url: https://community.bitwarden.com/c/feature-requests/
-    about: Request new features using the Community Forums. Please search existing feature requests before making a new one.
-  - name: Bitwarden Community Forums
-    url: https://community.bitwarden.com
-    about: Please visit the community forums for general community discussion, support and the development roadmap.
-  - name: Customer Support
-    url: https://bitwarden.com/contact/
-    about: Please contact our customer support for account issues and general customer support.
-  - name: Security Issues
-    url: https://hackerone.com/bitwarden
-    about: We use HackerOne to manage security disclosures.

.github/workflows/build.yml

@@ -1,4 +1,3 @@
----
 name: Build
 
 on:
@@ -15,7 +14,7 @@ on:
 jobs:
   cloc:
     name: CLOC
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
@@ -29,131 +28,9 @@ jobs:
         run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
 
 
-  setup:
-    name: Setup
-    runs-on: ubuntu-20.04
-    outputs:
-      version: ${{ steps.version.outputs.value }}
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Get GitHub sha as version
-        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
-    env:
-      _VERSION: ${{ needs.setup.outputs.version }}
-    steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - 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: Print environment
-        run: |
-          whoami
-          node --version
-          npm --version
-          gulp --version
-          docker --version
-          echo "GitHub ref: $GITHUB_REF"
-          echo "GitHub event: $GITHUB_EVENT"
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build OSS selfhost
-        run: |
-          npm run dist:oss:selfhost
-          zip -r web-$_VERSION-selfhosted-open-source.zip build
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
-        with:
-          name: web-${{ env._VERSION }}-selfhosted-open-source.zip
-          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
-    env:
-      _VERSION: ${{ needs.setup.outputs.version }}
-    steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: '14'
-
-      - name: Update NPM
-        run: |
-          npm install -g npm@7
-
-      - 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: Print environment
-        run: |
-          whoami
-          node --version
-          npm --version
-          gulp --version
-          docker --version
-          echo "GitHub ref: $GITHUB_REF"
-          echo "GitHub event: $GITHUB_EVENT"
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build Cloud
-        run: |
-          npm run dist:bit:cloud
-          zip -r web-$_VERSION-cloud-COMMERCIAL.zip build
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
-        with:
-          name: web-${{ env._VERSION }}-cloud-COMMERCIAL.zip
-          path: ./web-${{ env._VERSION }}-cloud-COMMERCIAL.zip
-          if-no-files-found: error
-
-
-  build-commercial-selfhost:
+  build-selfhost:
     name: Build SelfHost Docker image
-    runs-on: ubuntu-20.04
-    needs: setup
-    env:
-      _VERSION: ${{ needs.setup.outputs.version }}
+    runs-on: ubuntu-latest
     steps:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
@@ -166,10 +43,10 @@ jobs:
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
           path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-${{ github.run_id }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
         run: |
@@ -181,13 +58,39 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Setup DCT
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
-        id: setup-dct
-        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
+      - name: Login to Azure
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
         with:
-          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-          azure-keyvault-name: "bitwarden-prod-kv"
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "docker-password, 
+                    docker-username,
+                    dct-delegate-2-repo-passphrase,
+                    dct-delegate-2-key"
+
+      - name: Log into Docker
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+        env:
+          DOCKER_USERNAME: ${{ steps.retrieve-secrets.outputs.docker-username }}
+          DOCKER_PASSWORD: ${{ steps.retrieve-secrets.outputs.docker-password }}
+
+      - name: Setup Docker Trust
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: |
+          mkdir -p ~/.docker/trust/private
+
+          echo "$DCT_DELEGATE_KEY" > ~/.docker/trust/private/$DCT_DELEGATION_KEY_ID.key
+        env:
+          DCT_DELEGATION_KEY_ID: "c9bde8ec820701516491e5e03d3a6354e7bd66d05fa3df2b0062f68b116dc59c"
+          DCT_DELEGATE_KEY: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-key }}
 
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
@@ -196,26 +99,15 @@ jobs:
         run: dotnet tool restore
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
       - name: Build
         run: |
           echo -e "# Building Web\n"
           echo "Building app"
           echo "npm version $(npm --version)"
+          npm run dist:selfhost
 
-          npm run dist:bit:selfhost
-          zip -r web-$_VERSION-selfhosted-COMMERCIAL.zip build
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
-        with:
-          name: web-${{ env._VERSION }}-selfhosted-COMMERCIAL.zip
-          path: ./web-${{ env._VERSION }}-selfhosted-COMMERCIAL.zip
-          if-no-files-found: error
-
-      - name: Build Docker image
-        run: |
           echo -e "\nBuilding Docker image"
           docker --version
           docker build -t bitwarden/web .
@@ -228,43 +120,32 @@ jobs:
         if: github.ref == 'refs/heads/master'
         run: docker tag bitwarden/web bitwarden/web:dev
 
-      - name: Tag release branch
-        if: github.ref == 'refs/heads/release'
-        run: docker tag bitwarden/web bitwarden/web:latest
-
       - name: List Docker images
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         run: docker images
 
-      - name: Push rc image
+      - name: Push rc images
         if: github.ref == 'refs/heads/rc'
         run: docker push bitwarden/web:rc
-        env:
+        env: 
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
 
-      - name: Push dev image
+      - name: Push dev images
         if: github.ref == 'refs/heads/master'
         run: docker push bitwarden/web:dev
-        env:
+        env: 
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
-
-      - name: Push latest image
-        if: github.ref == 'refs/heads/release'
-        run: docker push bitwarden/web:latest
-        env:
-          DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
 
       - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         run: docker logout
 
 
   build-qa:
-    name: Build Docker images for QA environment
-    runs-on: ubuntu-20.04
+    name: Build QA Docker image
+    runs-on: ubuntu-latest
     steps:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
@@ -277,10 +158,10 @@ jobs:
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
           path: '~/.npm'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-${{ github.run_id }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
         run: |
@@ -314,32 +195,26 @@ jobs:
           echo -e "# Building Web\n"
           echo "Building app"
           echo "npm version $(npm --version)"
-          VERSION=$( jq -r ".version" package.json)
-          jq --arg version "$VERSION - ${GITHUB_SHA:0:7}" '.version = $version' package.json > package.json.tmp
-          mv package.json.tmp package.json
-
-          npm run build:bit:qa
-
-          echo "{\"commit_hash\": \"$GITHUB_SHA\", \"ref\": \"$GITHUB_REF\"}" | jq . > build/info.json
+          npm run build:qa
 
           echo -e "\nBuilding Docker image"
           docker --version
           docker build -t bitwardenqa.azurecr.io/web .
 
       - name: Get image tag
-        id: image-tag
+        id: image_tag
         run: |
           IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
-          TAG_EXTENSION=${{ github.event.inputs.custom_tag_extension }}
+          TAG_EXTENSION=${{ github.events.inputs.custom_tag_extension }}
 
           if [[ $TAG_EXTENSION ]]; then
             IMAGE_TAG=$IMAGE_TAG-$TAG_EXTENSION
-          fi
+          fi  
           echo "::set-output name=value::$IMAGE_TAG"
 
       - name: Tag image
         env:
-          IMAGE_TAG: ${{ steps.image-tag.outputs.value }}
+          IMAGE_TAG: ${{ steps.image_tag.outputs.value }}
         run: docker tag bitwardenqa.azurecr.io/web "bitwardenqa.azurecr.io/web:$IMAGE_TAG"
 
       - name: Tag dev
@@ -351,7 +226,7 @@ jobs:
 
       - name: Push image
         env:
-          IMAGE_TAG: ${{ steps.image-tag.outputs.value }}
+          IMAGE_TAG: ${{ steps.image_tag.outputs.value }}
         run: docker push "bitwardenqa.azurecr.io/web:$IMAGE_TAG"
 
       - name: Push dev images
@@ -364,7 +239,7 @@ jobs:
 
   windows:
     name: Test code on Windows
-    runs-on: windows-2019
+    runs-on: windows-latest
     steps:
       - name: Set up NuGet
         uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
@@ -374,13 +249,6 @@ jobs:
       - 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
         with:
@@ -406,11 +274,9 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Install dependencies
-        run: npm ci
+      - name: npm install
+        run: npm install
 
-      - name: NPM install
-        run: npm ci
+      - name: npm build
+        run: npm run build:prod
 
-      - name: NPM build
-        run: npm run build:bit:cloud

.github/workflows/crowdin-sync.yml

@@ -1,22 +1,43 @@
----
 name: Crowdin Sync
 
 on:
   workflow_dispatch:
     inputs: {}
-# schedule:
-#   - cron: '0 0 * * *'
+  #schedule:
+  #  - cron: '0 0 * * *'
 
 jobs:
   crowdin-sync:
     name: Autosync
     runs-on: ubuntu-20.04
-    env:
-      _CROWDIN_PROJECT_ID: "308189"
     steps:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
 
+      - name: Setup git config
+        run: |
+          git config user.name = "GitHub Action Bot"
+          git config user.email = "<>"
+
+      - name: Get Crowndin Sync Branch
+        id: branch
+        run: |
+          BRANCH_NAME=crowdin-auto-sync
+          BRANCH_EXISTED=true
+
+          git fetch -a
+          git switch master
+          if [ $(git branch -a | egrep "remotes/origin/${BRANCH_NAME}$" | wc -l) -eq 0 ]; then
+            BRANCH_EXISTED=false
+            git switch -c $BRANCH_NAME
+          else
+            git switch $BRANCH_NAME
+          fi
+          git branch
+
+          echo "::set-output name=branch-existed::${BRANCH_EXISTED}"
+          echo "::set-output name=branch-name::${BRANCH_NAME}"
+
       - name: Login to Azure
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
         with:
@@ -29,21 +50,84 @@ jobs:
           keyvault: "bitwarden-prod-kv"
           secrets: "crowdin-api-token"
 
-      - name: Download translations
-        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea
+      - name: Get Crowdin updates
         env:
+          CROWDIN_BASE_URL="https://api.crowdin.com/api/v2/projects"
+          CROWDIN_PROJECT_ID="308189"
+        run: |
+          # Step 1: GET master branchId
+          BRANCH_ID=$(
+              curl -s -H "Authorization: Bearer $CROWDIN_API_TOKEN" \
+              $CROWDIN_BASE_URL/$CROWDIN_PROJECT_ID/branches | jq -r '.data[0].data.id'
+          )
+
+          # Step 2: POST Build the translations and get store build id
+          BUILD_ID=$(
+              curl -X POST -s \
+              -H "Authorization: Bearer $CROWDIN_API_TOKEN" \
+              -H "Content-Type: application/json" \
+              $CROWDIN_BASE_URL/$CROWDIN_PROJECT_ID/translations/builds \
+              -d "{\"branchId\": $BRANCH_ID}" | jq -r '.data.id'
+          )
+
+          MAX_TRIES=12
+          for try in {1..$MAX_TRIES}; do
+              BRANCH_STATUS=$(
+                  curl -s -H "Authorization: Bearer $CROWDIN_API_TOKEN" \
+                  $CROWDIN_BASE_URL/$CROWDIN_PROJECT_ID/translations/builds/$BUILD_ID | jq -r '.data.status'
+              )
+              echo "[*] Build status: $BRANCH_STATUS"
+              if [[ "$BRANCH_STATUS" == "finished" ]]; then
+                  break
+              fi
+
+              if [[ $try -eq $MAX_TRIES ]]; then
+                  echo "[!] Exceeded tries: $try"
+                  exit 1
+              else
+                  sleep 5
+              fi
+          done
+
+          # Step 4: when build is finished, get download url
+          DOWNLOAD_URL=$(
+              curl -s -H "Authorization: Bearer $CROWDIN_API_TOKEN" \
+              $CROWDIN_BASE_URL/$CROWDIN_PROJECT_ID/translations/builds/$BUILD_ID/download | jq -r '.data.url'
+          )
+
+          # Step 5: download the translations via the download url
+          SAVE_FILE=translations.zip
+          curl -s $DOWNLOAD_URL --output $SAVE_FILE
+          echo "[*]    Saved to: $SAVE_FILE"
+
+          # Step 6: Unzip and cleanup
+          unzip -o $SAVE_FILE
+          rm $SAVE_FILE
+
+      - name: Commit changes
+        env:
+          BRANCH_NAME: ${{ steps.branch.outputs.branch-name }}
+        run: |
+          echo "[*] Adding new translations"
+          git add .
+          echo "=====Translations Changed====="
+          git status
+          echo "=============================="
+          echo "[*] Committing"
+          git commit -m "Autosync Crowdin translations"
+          echo "[*] Pushing"
+          git push -u origin $BRANCH_NAME
+
+      - name: Create/Update PR
+        env:
+          BRANCH_NAME: ${{ steps.cherry-pick.outputs.branch-name }}
+          BRANCH_EXISTED: ${{ steps.cherry-pick.outputs.branch-existed }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
-        with:
-          config: crowdin.yml
-          crowdin_branch_name: master
-          upload_sources: false
-          upload_translations: false
-          download_translations: true
-          github_user_name: "github-actions"
-          github_user_email: "<>"
-          commit_message: "Autosync the updated translations"
-          localization_branch_name: crowdin-auto-sync
-          create_pull_request: true
-          pull_request_title: "Autosync Crowdin Translations"
-          pull_request_body: "Autosync the updated translations"
+        run: |
+          if [ "$BRANCH_EXISTED" == "false" ]; then
+            echo "[*] Creating PR"
+            gh pr create --title "Autosync Crowdin Translations" \
+            --body "Autosync the updated translations"
+          else
+            echo "[*] Existing PR updated"
+          fi

.github/workflows/deploy.yml

@@ -0,0 +1,73 @@
+name: Deploy
+
+on: 
+  workflow_dispatch:
+    inputs:
+      release_version:
+        description: "Release Tag Version <vX.X.X>"
+        required: true
+  release:
+    types:
+      - published
+
+
+jobs:
+  deploy:
+    name: Deploy Web Vault
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        with:
+          ref: gh-pages
+
+      - name: Get release version
+        id: release-version
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+              echo "::set-output name=version::${{ github.event.release.tag_name }}"
+          else
+              echo "::set-output name=version::${{ github.event.inputs.release_version }}"
+          fi
+
+      - name: Create deploy branch
+        run: |
+          git switch -c deploy-${{ steps.release-version.outputs.version }}
+          git push -u origin deploy-${{ steps.release-version.outputs.version }}
+
+      - name: Checkout Repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        with:
+          ref: rc
+
+      - name: setup git config
+        run: |
+          git config user.name = "GitHub Action Bot"
+          git config user.email = "<>"
+          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
+          git config --global url."https://".insteadOf ssh://
+
+      - name: Install and Build
+        run: |
+          npm run sub:init
+          npm ci
+          npm run dist
+
+      - name: Deploy GitHub Pages
+        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
+        with:
+          target_branch: deploy-${{ steps.release-version.outputs.version }}
+          build_dir: build
+          keep_history: true
+          commit_message: "Staging deploy ${{ steps.release-version.outputs.version }}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create Deploy PR
+        run: |
+          gh pr create --title "Deploy $VERSION" --body "Deploying $VERSION" --base gh-pages --head "$PR_BRANCH"
+        env:
+          VERSION: ${{ steps.release-version.outputs.version }}
+          PR_BRANCH: deploy-${{ steps.release-version.outputs.version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/qa-deploy.yml

@@ -1,7 +1,6 @@
----
 name: QA Deploy
 
-on:
+on: 
   workflow_dispatch:
     inputs:
       image_extension:
@@ -9,18 +8,18 @@ on:
         required: false
 
 env:
-  _QA_CLUSTER_RESOURCE_GROUP: "bitwarden-devops"
-  _QA_CLUSTER_NAME: "dev-aks"
-  _QA_K8S_NAMESPACE: "bw-qa"
-  _QA_K8S_APP_NAME: "bw-web"
+  QA_CLUSTER_RESOURCE_GROUP: "bitwarden-devops"
+  QA_CLUSTER_NAME: "dev-aks"
+  QA_K8S_NAMESPACE: "bw-qa"
+  QA_K8S_APP_NAME: "bw-web"
 
 jobs:
   deploy:
     name: Deploy QA Web
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@v2
 
       - name: Setup
         run:
@@ -50,23 +49,22 @@ jobs:
           echo "---az install---"
           az aks install-cli --install-location ./kubectl --kubelogin-install-location ./kubelogin
           echo "---az get-creds---"
-          az aks get-credentials -n $_QA_CLUSTER_NAME -g $_QA_CLUSTER_RESOURCE_GROUP
+          az aks get-credentials -n $QA_CLUSTER_NAME -g $QA_CLUSTER_RESOURCE_GROUP
 
       - name: Get image tag
         id: image_tag
         run: |
           IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
-          TAG_EXTENSION=${{ github.event.inputs.image_extension }}
+          TAG_EXTENSION=${{ github.events.inputs.image_extension }}
 
           if [[ $TAG_EXTENSION ]]; then
             IMAGE_TAG=$IMAGE_TAG-$TAG_EXTENSION
-          fi
+          fi  
           echo "::set-output name=value::$IMAGE_TAG"
 
       - name: Deploy Web image
         env:
           IMAGE_TAG: ${{ steps.image_tag.outputs.value }}
         run: |
-          kubectl set image -n $_QA_K8S_NAMESPACE deployment/web web=bitwardenqa.azurecr.io/web:$IMAGE_TAG --record
-          kubectl rollout restart -n $_QA_K8S_NAMESPACE deployment/web
-          kubectl rollout status deployment/web -n $_QA_K8S_NAMESPACE
+          kubectl set image -n $QA_K8S_NAMESPACE deployment/web web=bitwardenqa.azurecr.io/web:$IMAGE_TAG --record
+          kubectl rollout status deployment/web -n $QA_K8S_NAMESPACE

.github/workflows/release.yml

@@ -1,23 +1,25 @@
----
 name: Release
 
 on:
   workflow_dispatch:
-    inputs: {}
+    inputs:
+      release_tag_name_input:
+        description: "Release Tag Name <X.X.X>"
+        required: true
 
 jobs:
   setup:
-    name: Setup
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     outputs:
-      release_version: ${{ steps.version.outputs.package }}
-      tag_version: ${{ steps.version.outputs.tag }}
+      release_upload_url: ${{ steps.create_release.outputs.upload_url }}
+      release_version: ${{ steps.create_tags.outputs.package_version }}
+      tag_version: ${{ steps.create_tags.outputs.tag_version }}
     steps:
       - name: Branch check
         run: |
-          if [[ "$GITHUB_REF" != "refs/heads/release" ]]; then
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
             echo "==================================="
-            echo "[!] Can only release from the 'release' branch"
+            echo "[!] Can only release from rc branch"
             echo "==================================="
             exit 1
           fi
@@ -25,162 +27,131 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
 
-      - name: Check Release Version
-        id: version
+      - name: Create Release Vars
+        id: create_tags
         run: |
-          version=$( jq -r ".version" package.json)
-          previous_release_tag_version=$(
-            curl -sL https://api.github.com/repos/$GITHUB_REPOSITORY/releases/latest | jq -r ".tag_name"
-          )
+          case "${RELEASE_TAG_NAME_INPUT:0:1}" in
+            v)
+              echo "RELEASE_NAME=${RELEASE_TAG_NAME_INPUT:1}" >> $GITHUB_ENV
+              echo "RELEASE_TAG_NAME=$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "::set-output name=package_version::${RELEASE_TAG_NAME_INPUT:1}"
+              echo "::set-output name=tag_version::$RELEASE_TAG_NAME_INPUT"
+              ;;
+            [0-9])
+              echo "RELEASE_NAME=$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "RELEASE_TAG_NAME=v$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "::set-output name=package_version::$RELEASE_TAG_NAME_INPUT"
+              echo "::set-output name=tag_version::v$RELEASE_TAG_NAME_INPUT"
+              ;;
+            *)
+              exit 1
+              ;;
+          esac
+        env:
+          RELEASE_TAG_NAME_INPUT: ${{ github.event.inputs.release_tag_name_input }}
 
-          if [ "v$version" == "$previous_release_tag_version" ]; then
-            echo "[!] Already released v$version. Please bump version to continue"
-            exit 1
-          fi
+      - name: Create Draft Release
+        id: create_release
+        uses: actions/create-release@0cb9c9b65d5d1901c1f53e5e66eaf4afd303e70e  # 1.1.4 - Repo Archived
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ env.RELEASE_TAG_NAME }}
+          release_name: Version ${{ env.RELEASE_NAME }}
+          draft: true
+          prerelease: false
 
-          echo "::set-output name=package::$version"
-          echo "::set-output name=tag::v$version"
-
-
-  self-host:
-    name: Release self-host docker
-    runs-on: ubuntu-20.04
+  ubuntu:
+    runs-on: ubuntu-latest
     needs: setup
     env:
-      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+      RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
     steps:
+      - name: Set up Node
+        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        with:
+          node-version: '14'
+
+      - name: Update NPM
+        run: |
+          npm install -g npm@7
+
       - name: Print environment
         run: |
           whoami
+          node --version
+          npm --version
+          gulp --version
           docker --version
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Setup DCT
-        id: setup-dct
-        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
+      - name: Login to Azure
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
         with:
-          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-          azure-keyvault-name: "bitwarden-prod-kv"
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "docker-password, 
+                    docker-username,
+                    dct-delegate-2-repo-passphrase,
+                    dct-delegate-2-key"
+
+      - name: Log into Docker
+        run: echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+        env:
+          DOCKER_USERNAME: ${{ steps.retrieve-secrets.outputs.docker-username }}
+          DOCKER_PASSWORD: ${{ steps.retrieve-secrets.outputs.docker-password }}
+
+      - name: Setup Docker Trust
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release' || github.ref == 'refs/heads/rc'
+        run: |
+          mkdir -p ~/.docker/trust/private
+
+          echo "$DCT_DELEGATE_KEY" > ~/.docker/trust/private/$DCT_DELEGATION_KEY_ID.key
+        env:
+          DCT_DELEGATION_KEY_ID: "c9bde8ec820701516491e5e03d3a6354e7bd66d05fa3df2b0062f68b116dc59c"
+          DCT_DELEGATE_KEY: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-key }}
 
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Pull latest selfhost Release image
-        run: docker pull bitwarden/web:latest
+      - name: Restore
+        run: dotnet tool restore
+
+      - name: Build
+        run: |
+          echo -e "# Building Web\n"
+          echo "Building app"
+          echo "npm version $(npm --version)"
+          npm install
+          npm run dist:selfhost
+
+          echo -e "\nBuilding Docker image"
+          docker --version
+          docker build -t bitwarden/web .
 
       - name: Tag version
-        run: |
-          docker tag bitwarden/web:latest bitwarden/web:$_RELEASE_VERSION
+        run: docker tag bitwarden/web bitwarden/web:$RELEASE_VERSION
 
       - name: List Docker images
         run: docker images
 
-      - name: Push images
-        run: |
-          docker push bitwarden/web:$_RELEASE_VERSION
+      - name: Push latest images
+        run: docker push bitwarden/web:latest
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+
+      - name: Push version images
+        run: docker push bitwarden/web:$RELEASE_VERSION
         env:
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
 
       - name: Log out of Docker
         run: docker logout
-
-
-  ghpages-deploy:
-    name: Deploy Web Vault
-    runs-on: ubuntu-20.04
-    needs:
-      - setup
-      - self-host
-    env:
-      _RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
-      _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
-        with:
-          ref: gh-pages
-
-      - name: Create deploy branch
-        run: |
-          git switch -c deploy-$_TAG_VERSION
-          git push -u origin deploy-$_TAG_VERSION
-
-      - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
-        with:
-          ref: release
-
-      - name: Setup git config
-        run: |
-          git config user.name = "GitHub Action Bot"
-          git config user.email = "<>"
-          git config --global url."https://github.com/".insteadOf ssh://git@github.com/
-          git config --global url."https://".insteadOf ssh://
-
-      - name: Download latest cloud asset
-        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
-        with:
-          workflow: build.yml
-          workflow_conclusion: success
-          branch: release
-          artifacts: web-*-cloud-COMMERCIAL.zip
-
-      # This should result in a build directory in the current working directory
-      - name: Unzip build asset
-        run: unzip web-*-cloud-COMMERCIAL.zip
-
-      - name: Deploy GitHub Pages
-        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          target_branch: deploy-${{ needs.setup.outputs.tag_version }}
-          build_dir: build
-          keep_history: true
-          commit_message: "Staging deploy ${{ needs.setup.outputs.release_version }}"
-
-      - name: Create Deploy PR
-        env:
-          PR_BRANCH: deploy-${{ env._TAG_VERSION }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh pr create --title "Deploy $_RELEASE_VERSION" \
-            --body "Deploying $_RELEASE_VERSION" \
-            --base gh-pages \
-            --head "$PR_BRANCH"
-
-
-  release:
-    name: Create GitHub Release
-    runs-on: ubuntu-20.04
-    needs:
-      - setup
-      - self-host
-      - ghpages-deploy
-    steps:
-      - name: Download latest build artifacts
-        uses: bitwarden/gh-actions/download-artifacts@23433be15ed6fd046ce12b6889c5184a8d9c8783
-        with:
-          workflow: build.yml
-          workflow_conclusion: success
-          branch: release
-          artifacts: "web-*-selfhosted-COMMERCIAL.zip,
-                      web-*-selfhosted-open-source.zip"
-
-      - name: Rename assets
-        run: |
-          mv web-*-selfhosted-COMMERCIAL.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip
-          mv web-*-selfhosted-open-source.zip web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip
-
-      - name: Create release
-        uses: ncipollo/release-action@95215a3cb6e6a1908b3c44e00b4fdb15548b1e09
-        with:
-          name: "Version ${{ needs.setup.outputs.release_version }}"
-          commit: ${{ github.sha }}
-          tag: "${{ needs.setup.outputs.tag_version }}"
-          body: "<insert release notes here>"
-          artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
-                      web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
-          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -12,4 +12,4 @@ dist/
 *.swp
 build/
 !dev-server.shared.pem
-config/local.json
+config/development.json

ISSUE_TEMPLATE.md

@@ -0,0 +1,52 @@
+<!--
+Please do not submit feature requests. The [Community Forums][1] has a
+section for submitting, voting for, and discussing product feature requests.
+[1]: https://community.bitwarden.com
+-->
+
+## Describe the Bug
+
+<!-- Comment:
+A clear and concise description of what the bug is.
+-->
+
+## Steps To Reproduce
+
+<!-- Comment:
+How can we reproduce the behavior:
+-->
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. Click on '...'
+
+## Expected Result
+
+<!-- Comment:
+A clear and concise description of what you expected to happen.
+-->
+
+## Actual Result
+
+<!-- Comment:
+A clear and concise description of what is happening.
+-->
+
+## Screenshots or Videos
+
+<!-- Comment:
+If applicable, add screenshots and/or a short video to help explain your problem.
+-->
+
+## Environment
+
+- Operating system: [e.g. Windows 10, Mac OS Catalina]
+- Browser: [e.g. Firefox 73.0.1]
+- Build Version (Bottom of the page): [2.13.0]
+
+## Additional Context
+
+<!-- Comment:
+Add any other context about the problem here.
+-->

README.md

@@ -32,7 +32,7 @@ For local development, run the app with:
 
 ```
 npm install
-npm run build:oss:watch
+npm run build:watch
 ```
 
 You can now access the web vault in your browser at `https://localhost:8080`.
@@ -41,25 +41,27 @@ If you want to point the development web vault to the production APIs, you can r
 
 ```
 npm install
-ENV=production npm run build:oss:watch
+ENV=production npm run build:watch
 ```
 
-You can also manually adjusting your API endpoint settings by adding `config/local.json` overriding any of the following values:
+You can also manually adjusting your API endpoint settings by adding `config/development.json` overriding any of the values in `config/base.json`. For example:
 
-```json
+```typescript
 {
     "proxyApi": "http://your-api-url",
     "proxyIdentity": "http://your-identity-url",
     "proxyEvents": "http://your-events-url",
     "proxyNotifications": "http://your-notifications-url",
-    "allowedHosts": ["hostnames-to-allow-in-webpack"],
-    "urls": {
-      
-    }
+    "proxyPortal": "http://your-portal-url",
+    "allowedHosts": ["hostnames-to-allow-in-webpack"]
 }
 ```
 
-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).
+To pick up the overrides in the newly created `config/development.json` file, run the app with:
+
+```
+npm run build:dev:watch
+```
 
 ## Contribute
 

bitwarden_license/src/app/app.component.ts

@@ -1,22 +0,0 @@
-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';
-
-@Component({
-    selector: 'app-root',
-    templateUrl: '../../../src/app/app.component.html',
-})
-export class AppComponent extends BaseAppComponent {
-
-    ngOnInit() {
-        super.ngOnInit();
-
-        this.policyListService.addPolicies([
-            new MaximumVaultTimeoutPolicy(),
-            new DisablePersonalVaultExportPolicy(),
-        ]);
-    }
-
-}

bitwarden_license/src/app/app.module.ts

@@ -3,41 +3,27 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { OrganizationsModule } from './organizations/organizations.module';
-import { DisablePersonalVaultExportPolicyComponent } from './policies/disable-personal-vault-export.component';
-import { MaximumVaultTimeoutPolicyComponent } from './policies/maximum-vault-timeout.component';
 
+import { AppComponent } from 'src/app/app.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,
         BrowserAnimationsModule,
         FormsModule,
-        ReactiveFormsModule,
         ServicesModule,
         ToasterModule.forRoot(),
         InfiniteScrollModule,
         DragDropModule,
         AppRoutingModule,
         OssRoutingModule,
-        OrganizationsModule,
-        RouterModule,
-        WildcardRoutingModule, // Needs to be last to catch all non-existing routes
-    ],
-    declarations: [
-        AppComponent,
-        MaximumVaultTimeoutPolicyComponent,
-        DisablePersonalVaultExportPolicyComponent,
     ],
     bootstrap: [AppComponent],
 })

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

@@ -1,284 +0,0 @@
-<div class="page-header d-flex">
-    <h1>{{'singleSignOn' | i18n}}</h1>
-</div>
-
-<ng-container *ngIf="loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-    <span class="sr-only">{{'loading' | i18n}}</span>
-</ng-container>
-
-<form #form (ngSubmit)="submit()" [formGroup]="data" [appApiAction]="formPromise" *ngIf="!loading">
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-            <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-        </div>
-    </div>
-
-    <div class="form-group">
-        <label for="type">{{'type' | i18n}}</label>
-        <select class="form-control" id="type" formControlName="configType">
-            <option value="0" disabled>{{'selectType' | i18n}}</option>
-            <option value="1">OpenID Connect</option>
-            <option value="2">SAML 2.0</option>
-        </select>
-    </div>
-
-    <!-- OIDC -->
-    <div *ngIf="data.value.configType == 1">
-        <div class="config-section">
-            <h2>{{'openIdConnectConfig' | i18n}}</h2>
-            <div class="form-group">
-                <label>{{'callbackPath' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="callbackPath">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(callbackPath)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'signedOutCallbackPath' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="signedOutCallbackPath">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(signedOutCallbackPath)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'authority' | i18n}}</label>
-                <input class="form-control" formControlName="authority">
-            </div>
-            <div class="form-group">
-                <label>{{'clientId' | i18n}}</label>
-                <input class="form-control" formControlName="clientId">
-            </div>
-            <div class="form-group">
-                <label>{{'clientSecret' | i18n}}</label>
-                <input class="form-control" formControlName="clientSecret">
-            </div>
-            <div class="form-group">
-                <label>{{'metadataAddress' | i18n}}</label>
-                <input class="form-control" formControlName="metadataAddress">
-            </div>
-            <div class="form-group">
-                <label>{{'oidcRedirectBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="redirectBehavior">
-                    <option value="0">Redirect GET</option>
-                    <option value="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>{{'additionalScopes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalScopes">
-            </div>
-            <div class="form-group">
-                <label>{{'additionalUserIdClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalUserIdClaimTypes">
-            </div>
-            <div class="form-group">
-                <label>{{'additionalEmailClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalEmailClaimTypes">
-            </div>
-            <div class="form-group">
-                <label>{{'additionalNameClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalNameClaimTypes">
-            </div>
-            <div class="form-group">
-                <label>{{'acrValues' | i18n}}</label>
-                <input class="form-control" formControlName="acrValues">
-            </div>
-            <div class="form-group">
-                <label>{{'expectedReturnAcrValue' | i18n}}</label>
-                <input class="form-control" formControlName="expectedReturnAcrValue">
-            </div>
-        </div>
-    </div>
-
-    <div *ngIf="data.value.configType == 2">
-        <!-- SAML2 SP -->
-        <div class="config-section">
-            <h2>{{'samlSpConfig' | i18n}}</h2>
-            <div class="form-group">
-                <label>{{'spEntityId' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spEntityId" >
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spEntityId)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'spMetadataUrl' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spMetadataUrl">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'launch' | i18n}}"
-                            (click)="launchUri(spMetadataUrl)">
-                            <i class="fa fa-lg fa-external-link" aria-hidden="true"></i>
-                        </button>
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spMetadataUrl)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'spAcsUrl' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spAcsUrl">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spAcsUrl)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'spNameIdFormat' | i18n}}</label>
-                <select class="form-control" formControlName="spNameIdFormat">
-                    <option value="0">Not Configured</option>
-                    <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>{{'spOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="spOutboundSigningAlgorithm">
-                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>{{'spSigningBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="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>{{'spMinIncomingSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="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>
-
-            <div class="form-group">
-                <label>{{'idpEntityId' | i18n}}</label>
-                <input class="form-control" formControlName="idpEntityId">
-            </div>
-            <div class="form-group">
-                <label>{{'idpBindingType' | i18n}}</label>
-                <select class="form-control" formControlName="idpBindingType">
-                    <option value="1">Redirect</option>
-                    <option value="2">HTTP POST</option>
-                    <option value="4">Artifact</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>{{'idpSingleSignOnServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleSignOnServiceUrl">
-            </div>
-            <div class="form-group">
-                <label>{{'idpSingleLogoutServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleLogoutServiceUrl">
-            </div>
-            <div class="form-group">
-                <label>{{'idpArtifactResolutionServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpArtifactResolutionServiceUrl">
-            </div>
-            <div class="form-group">
-                <label>{{'idpX509PublicCert' | i18n}}</label>
-                <textarea formControlName="idpX509PublicCert" class="form-control form-control-sm text-monospace" rows="6"></textarea>
-            </div>
-            <div class="form-group">
-                <label>{{'idpOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="idpOutboundSigningAlgorithm">
-                    <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="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>
-        </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>{{'save' | i18n}}</span>
-    </button>
-</form>

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

@@ -1,121 +0,0 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
-
-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 { OrganizationSsoRequest } from 'jslib-common/models/request/organization/organizationSsoRequest';
-
-@Component({
-    selector: 'app-org-manage-sso',
-    templateUrl: 'sso.component.html',
-})
-export class SsoComponent implements OnInit {
-
-    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',
-    ];
-
-    loading = true;
-    organizationId: string;
-    formPromise: Promise<any>;
-
-    callbackPath: string;
-    signedOutCallbackPath: string;
-    spEntityId: string;
-    spMetadataUrl: string;
-    spAcsUrl: string;
-
-    enabled = this.fb.control(false);
-    data = this.fb.group({
-        configType: [],
-
-        // OpenId
-        authority: [],
-        clientId: [],
-        clientSecret: [],
-        metadataAddress: [],
-        redirectBehavior: [],
-        getClaimsFromUserInfoEndpoint: [],
-        additionalScopes: [],
-        additionalUserIdClaimTypes: [],
-        additionalEmailClaimTypes: [],
-        additionalNameClaimTypes: [],
-        acrValues: [],
-        expectedReturnAcrValue: [],
-
-        // SAML
-        spNameIdFormat: [],
-        spOutboundSigningAlgorithm: [],
-        spSigningBehavior: [],
-        spMinIncomingSigningAlgorithm: [],
-        spWantAssertionsSigned: [],
-        spValidateCertificates: [],
-
-        idpEntityId: [],
-        idpBindingType: [],
-        idpSingleSignOnServiceUrl: [],
-        idpSingleLogoutServiceUrl: [],
-        idpArtifactResolutionServiceUrl: [],
-        idpX509PublicCert: [],
-        idpOutboundSigningAlgorithm: [],
-        idpAllowUnsolicitedAuthnResponse: [],
-        idpDisableOutboundLogoutRequests: [],
-        idpWantAuthnRequestsSigned: [],
-    });
-
-    constructor(private fb: FormBuilder, private route: ActivatedRoute, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService) { }
-
-    async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async params => {
-            this.organizationId = params.organizationId;
-            await this.load();
-        });
-    }
-
-    async load() {
-        const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);
-
-        this.data.patchValue(ssoSettings.data);
-        this.enabled.setValue(ssoSettings.enabled);
-
-        this.callbackPath = ssoSettings.urls.callbackPath;
-        this.signedOutCallbackPath = ssoSettings.urls.signedOutCallbackPath;
-        this.spEntityId = ssoSettings.urls.spEntityId;
-        this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
-        this.spAcsUrl = ssoSettings.urls.spAcsUrl;
-
-        this.loading = false;
-    }
-
-    copy(value: string) {
-        this.platformUtilsService.copyToClipboard(value);
-    }
-
-    launchUri(url: string) {
-        this.platformUtilsService.launchUri(url);
-    }
-
-    async submit() {
-        const request = new OrganizationSsoRequest();
-        request.enabled = this.enabled.value;
-        request.data = this.data.value;
-
-        this.formPromise = this.apiService.postOrganizationSso(this.organizationId, request);
-
-        const response = await this.formPromise;
-        this.data.patchValue(response.data);
-        this.enabled.setValue(response.enabled);
-
-        this.formPromise = null;
-        this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
-    }
-}

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

@@ -1,54 +0,0 @@
-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';
-import { ManageComponent } from 'src/app/organizations/manage/manage.component';
-import { OrganizationGuardService } from 'src/app/services/organization-guard.service';
-import { OrganizationTypeGuardService } from 'src/app/services/organization-type-guard.service';
-
-import { SsoComponent } from './manage/sso.component';
-
-const routes: Routes = [
-    {
-        path: 'organizations/:organizationId',
-        component: OrganizationLayoutComponent,
-        canActivate: [AuthGuardService, OrganizationGuardService],
-        children: [
-            {
-                path: 'manage',
-                component: ManageComponent,
-                canActivate: [OrganizationTypeGuardService],
-                data: {
-                    permissions: [
-                        Permissions.CreateNewCollections,
-                        Permissions.EditAnyCollection,
-                        Permissions.DeleteAnyCollection,
-                        Permissions.EditAssignedCollections,
-                        Permissions.DeleteAssignedCollections,
-                        Permissions.AccessEventLogs,
-                        Permissions.ManageGroups,
-                        Permissions.ManageUsers,
-                        Permissions.ManagePolicies,
-                        Permissions.ManageSso,
-                    ],
-                },
-                children: [
-                    {
-                        path: 'sso',
-                        component: SsoComponent,
-                    },
-                ],
-            },
-        ],
-    },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class OrganizationsRoutingModule { }

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

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { OssModule } from 'src/app/oss.module';
-
-import { SsoComponent } from './manage/sso.component';
-import { OrganizationsRoutingModule } from './organizations-routing.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        OssModule,
-        OrganizationsRoutingModule,
-    ],
-    declarations: [
-        SsoComponent,
-    ],
-})
-export class OrganizationsModule {}

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

@@ -1,6 +0,0 @@
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>

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

@@ -1,24 +0,0 @@
-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 } from 'src/app/organizations/policies/base-policy.component';
-
-export class DisablePersonalVaultExportPolicy extends BasePolicy {
-    name = 'disablePersonalVaultExport';
-    description = 'disablePersonalVaultExportDesc';
-    type = PolicyType.DisablePersonalVaultExport;
-    component = DisablePersonalVaultExportPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-disable-personal-vault-export',
-    templateUrl: 'disable-personal-vault-export.component.html',
-})
-export class DisablePersonalVaultExportPolicyComponent extends BasePolicyComponent {
-}

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

@@ -1,27 +0,0 @@
-<app-callout type="tip" title="{{'prerequisite' | i18n}}">
-    {{'requireSsoPolicyReq' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>
-
-<div [formGroup]="data">
-    <div class="form-group">
-        <label for="hours">{{'maximumVaultTimeoutLabel' | i18n}}</label>
-        <div class="row">
-            <div class="col-6">
-                <input id="hours" class="form-control" type="number" min="0" name="hours" formControlName="hours">
-                <small>{{'hours' | i18n }}</small>
-            </div>
-            <div class="col-6">
-                <input id="minutes" class="form-control" type="number" min="0" max="59" name="minutes"
-                    formControlName="minutes">
-                <small>{{'minutes' | i18n }}</small>
-            </div>
-        </div>
-    </div>
-</div>

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

@@ -1,70 +0,0 @@
-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 } from 'src/app/organizations/policies/base-policy.component';
-
-export class MaximumVaultTimeoutPolicy extends BasePolicy {
-    name = 'maximumVaultTimeout';
-    description = 'maximumVaultTimeoutDesc';
-    type = PolicyType.MaximumVaultTimeout;
-    component = MaximumVaultTimeoutPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-maximum-timeout',
-    templateUrl: 'maximum-vault-timeout.component.html',
-})
-export class MaximumVaultTimeoutPolicyComponent extends BasePolicyComponent {
-
-    data = this.fb.group({
-        hours: [null],
-        minutes: [null],
-    });
-
-    constructor(private fb: FormBuilder, private i18nService: I18nService) {
-        super();
-    }
-
-    loadData() {
-        const minutes = this.policyResponse.data?.minutes;
-
-        if (minutes == null) {
-            return;
-        }
-
-        this.data.patchValue({
-            hours: Math.floor(minutes / 60),
-            minutes: minutes % 60,
-        });
-    }
-
-    buildRequestData() {
-        if (this.data.value.hours == null && this.data.value.minutes == null) {
-            return null;
-        }
-
-        return {
-            minutes: this.data.value.hours * 60 + this.data.value.minutes,
-        };
-    }
-
-    buildRequest(policiesEnabledMap: Map<PolicyType, boolean>): Promise<PolicyRequest> {
-        const singleOrgEnabled = policiesEnabledMap.get(PolicyType.SingleOrg) ?? false;
-        if (this.enabled.value && !singleOrgEnabled) {
-            throw new Error(this.i18nService.t('requireSsoPolicyReqError'));
-        }
-
-        const data = this.buildRequestData();
-        if (data?.minutes == null || data?.minutes <= 0) {
-            throw new Error(this.i18nService.t('invalidMaximumVaultTimeout'));
-        }
-
-        return super.buildRequest(policiesEnabledMap);
-    }
-}

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -14,16 +15,17 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.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 { ValidationService } from 'jslib-angular/services/validation.service';
+
 import {
     ProviderOrganizationOrganizationDetailsResponse
 } from 'jslib-common/models/response/provider/providerOrganizationResponse';
+import { Organization } from 'jslib-common/models/domain/organization';
+
+import { ModalComponent } from 'src/app/modal.component';
 
 import { ProviderService } from '../services/provider.service';
 
@@ -47,6 +49,7 @@ export class ClientsComponent implements OnInit {
 
     clients: ProviderOrganizationOrganizationDetailsResponse[];
     pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
+    modal: ModalComponent;
 
     protected didScroll = false;
     protected pageSize = 100;
@@ -57,8 +60,8 @@ export class ClientsComponent implements OnInit {
         private apiService: ApiService, private searchService: SearchService,
         private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
         private toasterService: ToasterService, private validationService: ValidationService,
-        private providerService: ProviderService, private logService: LogService,
-        private modalService: ModalService) { }
+        private providerService: ProviderService, private componentFactoryResolver: ComponentFactoryResolver,
+        private logService: LogService) { }
 
     async ngOnInit() {
         this.route.parent.params.subscribe(async params => {
@@ -85,7 +88,7 @@ export class ClientsComponent implements OnInit {
                 .map(o => o.id));
         this.addableOrganizations = candidateOrgs.filter(o => allowedOrgsIds.includes(o.id));
 
-        this.showAddExisting = this.addableOrganizations.length !== 0;
+        this.showAddExisting = this.addableOrganizations.length != 0;
         this.loading = false;
     }
 
@@ -123,18 +126,24 @@ export class ClientsComponent implements OnInit {
         this.didScroll = this.pagedClients.length > this.pageSize;
     }
 
-    async addExistingOrganization() {
-        const [modal] = await this.modalService.openViewRef(AddOrganizationComponent, this.addModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.organizations = this.addableOrganizations;
-            comp.onAddedOrganization.subscribe(async () => {
-                try {
-                    await this.load();
-                    modal.close();
-                } catch (e) {
-                    this.logService.error(`Handled exception: ${e}`);
-                }
-            });
+    addExistingOrganization() {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<AddOrganizationComponent>(AddOrganizationComponent, this.addModalRef);
+
+        childComponent.providerId = this.providerId;
+        childComponent.organizations = this.addableOrganizations;
+        childComponent.onAddedOrganization.subscribe(async () => {
+            try {
+                await this.load();
+                this.modal.close();
+            } catch (e) {
+                this.logService.error(`Handled exception: ${e}`);
+            }
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
     <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
+        <img src="/src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -16,7 +17,6 @@ import { SearchService } from 'jslib-common/abstractions/search.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { ModalService } from 'jslib-angular/services/modal.service';
 import { ValidationService } from 'jslib-angular/services/validation.service';
 
 import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
@@ -33,6 +33,7 @@ import { ProviderUserConfirmRequest } from 'jslib-common/models/request/provider
 import { ProviderUserBulkResponse } from 'jslib-common/models/response/provider/providerUserBulkResponse';
 
 import { BasePeopleComponent } from 'src/app/common/base.people.component';
+import { ModalComponent } from 'src/app/modal.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';
@@ -58,13 +59,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
     accessEvents = false;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, modalService: ModalService,
+        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
         platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
         cryptoService: CryptoService, private userService: UserService, private router: Router,
         storageService: StorageService, searchService: SearchService, validationService: ValidationService,
         logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe) {
         super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
-            storageService, validationService, modalService, logService, searchPipe, userNamePipe);
+            storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
     }
 
     ngOnInit() {
@@ -116,29 +117,51 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
         await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
     }
 
-    async edit(user: ProviderUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.providerId = this.providerId;
-            comp.providerUserId = user != null ? user.id : null;
-            comp.onSavedUser.subscribe(() => {
-                modal.close();
-                this.load();
-            });
-            comp.onDeletedUser.subscribe(() => {
-                modal.close();
-                this.removeUser(user);
-            });
+    edit(user: ProviderUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<UserAddEditComponent>(
+            UserAddEditComponent, this.addEditModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.providerId = this.providerId;
+        childComponent.providerUserId = user != null ? user.id : null;
+        childComponent.onSavedUser.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedUser.subscribe(() => {
+            this.modal.close();
+            this.removeUser(user);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
     async events(user: ProviderUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.providerId = this.providerId;
-            comp.entityId = user.id;
-            comp.showUser = false;
-            comp.entity = 'user';
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.eventsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityEventsComponent>(
+            EntityEventsComponent, this.eventsModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.providerId = this.providerId;
+        childComponent.entityId = user.id;
+        childComponent.showUser = false;
+        childComponent.entity = 'user';
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
@@ -147,13 +170,21 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.users = this.getCheckedUsers();
-        });
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-        await modal.onClosedPromise();
-        await this.load();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
+
+        childComponent.providerId = this.providerId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
     }
 
     async bulkReinvite() {
@@ -185,34 +216,49 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.users = this.getCheckedUsers();
-        });
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-        await modal.onClosedPromise();
-        await this.load();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
+
+        childComponent.providerId = this.providerId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
     }
 
     private async showBulkStatus(users: ProviderUserUserDetailsResponse[], filteredUsers: ProviderUserUserDetailsResponse[],
         request: Promise<ListResponse<ProviderUserBulkResponse>>, successfullMessage: string) {
 
-        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
-            comp.loading = true;
-        });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<BulkStatusComponent>(
+            BulkStatusComponent, this.bulkStatusModalRef);
+
+        childComponent.loading = true;
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        modal.onShown.subscribe(() => {
+        this.modal.onShown.subscribe(() => {
             if (close) {
-                modal.close();
+                this.modal.close();
             }
         });
 
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
         try {
             const response = await request;
 
-            if (modal) {
+            if (this.modal) {
                 const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
                 const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
 
@@ -232,7 +278,9 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             }
         } catch {
             close = true;
-            modal.close();
+            if (this.modal) {
+                this.modal.close();
+            }
         }
     }
 }

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

@@ -1,10 +1,7 @@
 import { CommonModule } from '@angular/common';
-import { ComponentFactoryResolver } from '@angular/core';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-
 import { ProviderGuardService } from './services/provider-guard.service';
 import { ProviderTypeGuardService } from './services/provider-type-guard.service';
 import { ProviderService } from './services/provider.service';
@@ -62,8 +59,4 @@ import { OssModule } from 'src/app/oss.module';
         ProviderTypeGuardService,
     ],
 })
-export class ProvidersModule {
-    constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {
-        modalService.registerComponentFactoryResolver(AddOrganizationComponent, componentFactoryResolver);
-    }
-}
+export class ProvidersModule {}

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
     <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
+        <img src="/src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

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

@@ -58,21 +58,9 @@ export class SetupComponent implements OnInit {
                 };
                 this.toasterService.popAsync(toast);
                 this.router.navigate(['/']);
-                return;
-            }
-
-            this.providerId = qParams.providerId;
-            this.token = qParams.token;
-
-            // Check if provider exists, redirect if it does
-            try {
-                const provider = await this.apiService.getProvider(this.providerId);
-                if (provider.name != null) {
-                    this.router.navigate(['/providers', provider.id], { replaceUrl: true });
-                }
-            } catch (e) {
-                this.validationService.showError(e);
-                this.router.navigate(['/']);
+            } else {
+                this.providerId = qParams.providerId;
+                this.token = qParams.token;
             }
         });
     }

config.js

@@ -1,29 +1,26 @@
 function load(envName) {
+    const envOverrides = {
+        'production': () => require('./config/production.json'),
+        'qa': () => require('./config/qa.json'),
+        'development': () => require('./config/development.json'),
+    };
+
+    const baseConfig = require('./config/base.json');
+    const overrideConfig = envOverrides.hasOwnProperty(envName) ? envOverrides[envName]() : {};
+
     return {
-        ...require('./config/base.json'),
-        ...loadConfig(envName),
-        ...loadConfig('local'),
+        ...baseConfig,
+        ...overrideConfig
     };
 }
 
 function log(configObj) {
-    const repeatNum = 50;
-    console.log(`${"=".repeat(repeatNum)}\nenvConfig`);
-    console.log(JSON.stringify(configObj, null, 2));
-    console.log(`${"=".repeat(repeatNum)}`);
-}
-
-function loadConfig(configName) {
-    try {
-        return require(`./config/${configName}.json`);
-    } catch (e) {
-        if (e instanceof Error && e.code === "MODULE_NOT_FOUND") {
-            return {};
-        }
-        else {
-            throw e;
-        }
-    }
+    const repeatNum = 50
+    console.log(`${"=".repeat(repeatNum)}\nenvConfig`)
+    Object.entries(configObj).map(([key, value]) => {
+        console.log(`  ${key}: ${value}`)
+    })
+    console.log(`${"=".repeat(repeatNum)}`)
 }
 
 module.exports = {

config/base.json

@@ -1,9 +1,8 @@
 {
-    "urls": {},
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
-    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
-    "paypal": {
-        "businessId": "AD3LAUZSNVPJY",
-        "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
-    }
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840",
+    "proxyPortal": "http://localhost:52313",
+    "allowedHosts": []
 }

config/cloud.json

@@ -1,12 +0,0 @@
-{
-    "urls": {
-        "icons": "https://icons.bitwarden.net",
-        "notifications": "https://notifications.bitwarden.com"
-    },
-    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
-    "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
-    "paypal": {
-        "businessId": "4ZDA7DLUUJGMN",
-        "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
-    }
-}

config/development.json

@@ -1,10 +0,0 @@
-{
-    "proxyApi": "http://localhost:4000",
-    "proxyIdentity": "http://localhost:33656",
-    "proxyEvents": "http://localhost:46273",
-    "proxyNotifications": "http://localhost:61840",
-    "allowedHosts": [],
-    "urls": {
-        "notifications": "http://localhost:61840"
-    }
-}

config/production.json

@@ -0,0 +1,7 @@
+{
+    "proxyApi": "https://api.bitwarden.com",
+    "proxyIdentity": "https://identity.bitwarden.com",
+    "proxyEvents": "https://events.bitwarden.com",
+    "proxyNotifications": "https://notifications.bitwarden.com",
+    "proxyPortal": "https://portal.bitwarden.com"
+}

config/qa.json

@@ -1,6 +1,7 @@
 {
-    "urls": {
-        "icons": "https://icons.qa.bitwarden.pw",
-        "notifications": "https://notifications.qa.bitwarden.pw"
-    }
+    "proxyApi": "https://api.qa.bitwarden.com",
+    "proxyIdentity": "https://identity.qa.bitwarden.com",
+    "proxyEvents": "https://events.qa.bitwarden.com",
+    "proxyNotifications": "https://notifications.qa.bitwarden.com",
+    "proxyPortal": "https://portal.qa.bitwarden.com"
 }

config/self-hosted.json

@@ -1 +0,0 @@
-{}

crowdin.yml

@@ -1,5 +1,3 @@
-project_id_env: _CROWDIN_PROJECT_ID
-api_token_env: CROWDIN_API_TOKEN
 files:
   - source: /src/locales/en/messages.json
     translation: /src/locales/%two_letters_code%/%original_file_name%

entrypoint.sh

@@ -31,6 +31,7 @@ mkhomedir_helper $USERNAME
 
 chown -R $USERNAME:$GROUPNAME /etc/bitwarden
 cp /etc/bitwarden/web/app-id.json /app/app-id.json
+cp /etc/bitwarden/web/assetlinks.json /app/assetlinks.json
 chown -R $USERNAME:$GROUPNAME /app
 chown -R $USERNAME:$GROUPNAME /bitwarden_server
 

gulpfile.js

@@ -0,0 +1,37 @@
+const gulp = require('gulp');
+const googleWebFonts = require('gulp-google-webfonts');
+const del = require('del');
+const package = require('./package.json');
+const fs = require('fs');
+
+const paths = {
+    node_modules: './node_modules/',
+    src: './src/',
+    build: './build/',
+    cssDir: './src/css/',
+};
+
+function clean() {
+    return del([paths.cssDir]);
+}
+
+function webfonts() {
+    return gulp.src('./webfonts.list')
+        .pipe(googleWebFonts({
+            fontsDir: 'webfonts',
+            cssFilename: 'webfonts.css',
+            format: 'woff',
+        }))
+        .pipe(gulp.dest(paths.cssDir));
+};
+
+function version(cb) {
+    fs.writeFileSync(paths.build + 'version.json', '{"version":"' + package.version + '"}');
+    cb();
+}
+
+exports.clean = clean;
+exports.webfonts = gulp.series(clean, webfonts);
+exports.prebuild = gulp.series(clean, webfonts);
+exports.version = version;
+exports.postdist = version;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden-web",
-  "version": "2.24.0",
+  "version": "2.22.3",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -11,24 +11,29 @@
     "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
     "symlink:mac": "npm run symlink:lin",
     "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
-    "build:oss": "webpack",
-    "build:bit": "webpack -c bitwarden_license/webpack.config.js",
-    "build:oss:watch": "webpack serve",
-    "build:bit:watch": "webpack serve -c bitwarden_license/webpack.config.js",
-    "build:bit:dev": "cross-env ENV=development npm run build:bit",
-    "build:bit:dev:watch": "cross-env ENV=development npm run build:bit:watch",
-    "build:bit:qa": "cross-env NODE_ENV=production ENV=qa npm run build:bit",
-    "build:bit:cloud": "cross-env NODE_ENV=production ENV=cloud npm run build:bit",
-    "build:oss:selfhost:watch": "cross-env ENV=selfhosted npm run build:oss:watch",
-    "build:bit:selfhost:watch": "cross-env ENV=selfhosted npm run build:bit:watch",
-    "build:oss:selfhost:prod": "cross-env ENV=selfhosted NODE_ENV=production npm run build:oss",
-    "build:bit:selfhost:prod": "cross-env ENV=selfhosted NODE_ENV=production npm run build:bit",
+    "build": "gulp prebuild && webpack -c bitwarden_license/webpack.config.js",
+    "build:oss": "gulp prebuild && webpack",
+    "build:watch": "gulp prebuild && webpack serve -c bitwarden_license/webpack.config.js",
+    "build:watch:oss": "gulp prebuild && webpack serve",
+    "build:dev": "cross-env ENV=development npm run build",
+    "build:dev:watch": "cross-env ENV=development npm run build:watch",
+    "build:qa": "cross-env NODE_ENV=production ENV=qa npm run build",
+    "build:qa:watch": "cross-env NODE_ENV=production ENV=qa npm run build:watch",
+    "build:prod": "cross-env NODE_ENV=production ENV=production npm run build",
+    "build:prod:oss": "cross-env NODE_ENV=production ENV=production npm run build:oss",
+    "build:prod:watch": "cross-env NODE_ENV=production ENV=production npm run build:watch",
+    "build:selfhost": "cross-env SELF_HOST=true npm run build:watch",
+    "build:selfhost:watch": "cross-env SELF_HOST=true npm run build:watch",
+    "build:selfhost:prod": "cross-env SELF_HOST=true NODE_ENV=production npm run build",
+    "build:selfhost:prod:oss": "cross-env SELF_HOST=true NODE_ENV=production npm run build:oss",
+    "build:selfhost:prod:watch": "cross-env SELF_HOST=true NODE_ENV=production npm run build:watch",
     "clean:l10n": "git push origin --delete l10n_master",
-    "dist:bit:cloud": "npm run build:bit:cloud",
-    "dist:oss:selfhost": "npm run build:oss:selfhost:prod",
-    "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",
+    "dist": "npm run build:prod && gulp postdist",
+    "dist:oss": "npm run build:prod:oss && gulp postdist",
+    "dist:selfhost": "npm run build:selfhost:prod && gulp postdist",
+    "dist:selfhost:oss": "npm run build:selfhost:prod:oss && gulp postdist",
+    "deploy": "npm run dist && gh-pages -d build",
+    "deploy:dev": "npm run dist && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
     "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' || true",
     "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix"
   },
@@ -46,8 +51,9 @@
     "del": "^6.0.0",
     "file-loader": "^6.2.0",
     "gh-pages": "^3.1.0",
+    "gulp": "^4.0.2",
+    "gulp-google-webfonts": "^4.0.0",
     "html-loader": "^1.3.2",
-    "html-webpack-injector": "1.1.4",
     "html-webpack-plugin": "^4.5.1",
     "mini-css-extract-plugin": "^1.5.0",
     "sass": "^1.32.10",

src/app-id.json

@@ -8,7 +8,8 @@
       "ids": [
         "https://vault.bitwarden.com",
         "ios:bundle-id:com.8bit.bitwarden",
-        "android:apk-key-hash:dUGFzUzf3lmHSLBDBIv+WaFyZMI"
+        "android:apk-key-hash:dUGFzUzf3lmHSLBDBIv+WaFyZMI",
+        "android:apk-key-hash:pSCbprJwYtwCZOPOpmU6YuPBs/g"
       ]
     }
   ]

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
     <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
+        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

src/app/accounts/login.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
     <div class="row justify-content-md-center mt-5">
         <div class="col-5">
-            <img class="mb-2 logo logo-themed" alt="Bitwarden">
+            <img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">

src/app/accounts/register.component.html

@@ -62,8 +62,24 @@
                                     <small class="form-text text-muted">{{'yourNameDesc' | i18n}}</small>
                                 </div>
                                 <div class="form-group">
-                                    <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                                        *ngIf="enforcedPolicyOptions">
+                                    <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                                        {{'masterPasswordPolicyInEffect' | i18n}}
+                                        <ul class="mb-0">
+                                            <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                                {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                            </li>
+                                            <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                                {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                            </li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                                {{'policyInEffectUppercase' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                                {{'policyInEffectLowercase' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                                {{'policyInEffectNumbers' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                                {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                                        </ul>
                                     </app-callout>
                                     <label for="masterPassword">{{'masterPass' | i18n}}</label>
                                     <div class="d-flex">

src/app/accounts/register.component.ts

@@ -43,6 +43,26 @@ export class RegisterComponent extends BaseRegisterComponent {
             passwordGenerationService, environmentService);
     }
 
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
     async ngOnInit() {
         const queryParamsSub = this.route.queryParams.subscribe(qParams => {
             this.referenceData = new ReferenceEventRequest();

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

@@ -9,13 +9,25 @@
                 </div>
                 <div class="card-body" *ngIf="!syncLoading">
                     <app-callout type="info">{{'ssoCompleteRegistration' | i18n}}</app-callout>
-                    <app-callout type="warning" title="{{'resetPasswordPolicyAutoEnroll' | i18n}}"
-                        *ngIf="resetPasswordAutoEnroll">
-                        {{'resetPasswordAutoEnrollInviteWarning' | i18n}}
-                    </app-callout>
                     <div class="form-group">
-                        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                            *ngIf="enforcedPolicyOptions">
+                        <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                            {{'masterPasswordPolicyInEffect' | i18n}}
+                            <ul class="mb-0">
+                                <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                    {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                    {{'policyInEffectUppercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                    {{'policyInEffectLowercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                    {{'policyInEffectNumbers' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                    {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                            </ul>
                         </app-callout>
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <div class="d-flex">

src/app/accounts/sso.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" class="container" [appApiAction]="initiateSsoFormPromise" ngNativeValidate>
     <div class="row justify-content-md-center mt-5">
         <div class="col-5">
-            <img class="logo mb-2 logo-themed" alt="Bitwarden">
+            <img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
             <div class="card d-block mt-4">
                 <div class="card-body" *ngIf="loggingIn">
                     <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -9,6 +10,12 @@ import {
     Router,
 } from '@angular/router';
 
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+
+import { ModalComponent } from '../modal.component';
+
+import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
@@ -17,14 +24,8 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { StorageService } from 'jslib-common/abstractions/storage.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({
     selector: 'app-two-factor',
     templateUrl: 'two-factor.component.html',
@@ -35,23 +36,26 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, stateService: StateService,
-        environmentService: EnvironmentService, private modalService: ModalService,
+        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
         storageService: StorageService, route: ActivatedRoute) {
         super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
             stateService, storageService, route);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
-    async anotherMethod() {
-        const [modal] = await this.modalService.openViewRef(TwoFactorOptionsComponent, this.twoFactorOptionsModal, comp => {
-            comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
-                modal.close();
-                this.selectedProviderType = provider;
-                await this.init();
-            });
-            comp.onRecoverSelected.subscribe(() => {
-                modal.close();
-            });
+    anotherMethod() {
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
+        const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
+            this.twoFactorOptionsModal);
+
+        childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+            modal.close();
+            this.selectedProviderType = provider;
+            await this.init();
+        });
+        childComponent.onRecoverSelected.subscribe(() => {
+            modal.close();
         });
     }
 

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

@@ -7,8 +7,24 @@
                     <app-callout type="warning">{{'updateMasterPasswordWarning' | i18n}}
                     </app-callout>
                     <div class="form-group">
-                        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                            *ngIf="enforcedPolicyOptions">
+                        <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                            {{'masterPasswordPolicyInEffect' | i18n}}
+                            <ul class="mb-0">
+                                <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                    {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                    {{'policyInEffectUppercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                    {{'policyInEffectLowercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                    {{'policyInEffectNumbers' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                    {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                            </ul>
                         </app-callout>
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <div class="d-flex">

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

@@ -7,7 +7,6 @@ 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 { UserService } from 'jslib-common/abstractions/user.service';
 
 import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from 'jslib-angular/components/update-temp-password.component';
@@ -21,9 +20,8 @@ export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent
     constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
         cryptoService: CryptoService, userService: UserService,
-        messagingService: MessagingService, apiService: ApiService,
-        syncService: SyncService) {
+        messagingService: MessagingService, apiService: ApiService) {
         super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
-            userService, messagingService, apiService, syncService);
+            userService, messagingService, apiService);
     }
 }

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center">
     <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
+        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
             <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span class="sr-only">{{'loading' | i18n}}</span>

src/app/app.component.ts

@@ -46,19 +46,8 @@ import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.serv
 
 import { ConstantsService } from 'jslib-common/services/constants.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';
-import { PersonalOwnershipPolicy } from './organizations/policies/personal-ownership.component';
-import { RequireSsoPolicy } from './organizations/policies/require-sso.component';
-import { ResetPasswordPolicy } from './organizations/policies/reset-password.component';
-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';
-
 const BroadcasterSubscriptionId = 'AppComponent';
 const IdleTimeout = 60000 * 10; // 10 minutes
 
@@ -67,7 +56,6 @@ const IdleTimeout = 60000 * 10; // 10 minutes
     templateUrl: 'app.component.html',
 })
 export class AppComponent implements OnDestroy, OnInit {
-
     toasterConfig: ToasterConfig = new ToasterConfig({
         showCloseButton: true,
         mouseoverTimerStop: true,
@@ -92,7 +80,7 @@ export class AppComponent implements OnDestroy, OnInit {
         private sanitizer: DomSanitizer, private searchService: SearchService,
         private notificationsService: NotificationsService, private routerService: RouterService,
         private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService, protected policyListService: PolicyListService) { }
+        private policyService: PolicyService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -182,18 +170,6 @@ export class AppComponent implements OnDestroy, OnInit {
             }
         });
 
-        this.policyListService.addPolicies([
-            new TwoFactorAuthenticationPolicy(),
-            new MasterPasswordPolicy(),
-            new PasswordGeneratorPolicy(),
-            new SingleOrgPolicy(),
-            new RequireSsoPolicy(),
-            new PersonalOwnershipPolicy(),
-            new DisableSendPolicy(),
-            new SendOptionsPolicy(),
-            new ResetPasswordPolicy(),
-        ]);
-
         this.setFullWidth();
     }
 

src/app/app.module.ts

@@ -10,7 +10,6 @@ import { AppComponent } from './app.component';
 import { OssRoutingModule } from './oss-routing.module';
 import { OssModule } from './oss.module';
 import { ServicesModule } from './services/services.module';
-import { WildcardRoutingModule } from './wildcard-routing.module';
 
 @NgModule({
     imports: [
@@ -22,10 +21,6 @@ import { WildcardRoutingModule } from './wildcard-routing.module';
         InfiniteScrollModule,
         DragDropModule,
         OssRoutingModule,
-        WildcardRoutingModule, // Needs to be last to catch all non-existing routes
-    ],
-    declarations: [
-        AppComponent,
     ],
     bootstrap: [AppComponent],
 })

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

@@ -3,14 +3,14 @@ import { ToasterService } from 'angular2-toaster';
 
 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 { ListResponse } from 'jslib-common/models/response';
 import { EventResponse } from 'jslib-common/models/response/eventResponse';
-import { ListResponse } from 'jslib-common/models/response/listResponse';
 
+import { LogService } from 'jslib-common/abstractions';
 import { EventService } from 'src/app/services/event.service';
 
 @Directive()

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

@@ -1,4 +1,5 @@
 import {
+    ComponentFactoryResolver,
     Directive,
     ViewChild,
     ViewContainerRef
@@ -16,8 +17,6 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
 
 import { ConstantsService } from 'jslib-common/services/constants.service';
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-
 import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
 import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
 
@@ -32,6 +31,7 @@ import { ProviderUserUserDetailsResponse } from 'jslib-common/models/response/pr
 
 import { Utils } from 'jslib-common/misc/utils';
 
+import { ModalComponent } from '../modal.component';
 import { UserConfirmComponent } from '../organizations/manage/user-confirm.component';
 
 type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
@@ -86,6 +86,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
     protected didScroll = false;
     protected pageSize = 100;
+    protected modal: ModalComponent = null;
 
     private pagedUsersCount = 0;
 
@@ -93,7 +94,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
         protected i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
         protected toasterService: ToasterService, protected cryptoService: CryptoService,
         private storageService: StorageService, protected validationService: ValidationService,
-        protected modalService: ModalService, private logService: LogService,
+        protected componentFactoryResolver: ComponentFactoryResolver, private logService: LogService,
         private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe) { }
 
     abstract edit(user: UserType): void;
@@ -247,17 +248,29 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
             const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
             if (autoConfirm == null || !autoConfirm) {
-                const [modal] = await this.modalService.openViewRef(UserConfirmComponent, this.confirmModalRef, comp => {
-                    comp.name = this.userNamePipe.transform(user);
-                    comp.userId = user != null ? user.userId : null;
-                    comp.publicKey = publicKey;
-                    comp.onConfirmedUser.subscribe(async () => {
-                        try {
-                            comp.formPromise = confirmUser(publicKey);
-                            await comp.formPromise;
-                            modal.close();
-                        } catch { }
-                    });
+                if (this.modal != null) {
+                    this.modal.close();
+                }
+
+                const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+                this.modal = this.confirmModalRef.createComponent(factory).instance;
+                const childComponent = this.modal.show<UserConfirmComponent>(
+                    UserConfirmComponent, this.confirmModalRef);
+
+                childComponent.name = this.userNamePipe.transform(user);
+                childComponent.userId = user != null ? user.userId : null;
+                childComponent.publicKey = publicKey;
+                childComponent.onConfirmedUser.subscribe(async () => {
+                    try {
+                        await confirmUser(publicKey);
+                        this.modal.close();
+                    } catch (e) {
+                        this.logService.error(`Handled exception: ${e}`);
+                    }
+                });
+
+                this.modal.onClosed.subscribe(() => {
+                    this.modal = null;
                 });
                 return;
             }

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

@@ -1,18 +0,0 @@
-<div class="form-group mb-0">
-    <div class="form-check mt-1 form-check-block">
-        <input class="form-check-input" type="checkbox" [name]="pascalize(parentId)" [id]="parentId"
-            [(ngModel)]="parentChecked" [indeterminate]="parentIndeterminate">
-        <label class="form-check-label font-weight-normal" [for]="parentId">
-            {{parentId | i18n}}
-        </label>
-    </div>
-    <div class="form-group form-group-child-check mb-0">
-        <div class="form-check mt-1" *ngFor="let c of checkboxes">
-            <input class="form-check-input" type="checkbox" [name]="pascalize(c.id)" [id]="c.id" [ngModel]="c.get()"
-                (ngModelChange)="c.set($event)">
-            <label class="form-check-label font-weight-normal" [for]="c.id">
-                {{c.id | i18n}}
-            </label>
-        </div>
-    </div>
-</div>

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

@@ -1,37 +0,0 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
-import { Utils } from 'jslib-common/misc/utils';
-
-@Component({
-    selector: 'app-nested-checkbox',
-    templateUrl: 'nested-checkbox.component.html',
-})
-export class NestedCheckboxComponent {
-    @Input() parentId: string;
-    @Input() checkboxes: { id: string, get: () => boolean, set: (v: boolean) => void; }[];
-    @Output() onSavedUser = new EventEmitter();
-    @Output() onDeletedUser = new EventEmitter();
-
-    get parentIndeterminate() {
-        return !this.parentChecked &&
-            this.checkboxes.some(c => c.get());
-    }
-
-    get parentChecked() {
-        return this.checkboxes.every(c => c.get());
-    }
-
-    set parentChecked(value: boolean) {
-        this.checkboxes.forEach(c => {
-            c.set(value);
-        });
-    }
-
-    pascalize(s: string) {
-        return Utils.camelToPascalCase(s);
-    }
-}

src/app/components/password-reprompt.component.html

@@ -1,39 +0,0 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()">
-            <div class="modal-header">
-                <h2 class="modal-title" id="confirmUserTitle">
-                    {{'passwordConfirmation' | i18n}}
-                </h2>
-                <button type="button" class="close" data-dismiss="modal">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                {{'passwordConfirmationDesc' | i18n}}
-
-                <div class="form-group">
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <div class="d-flex">
-                        <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
-                            name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
-                            required appAutofocus appInputVerbatim>
-                        <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
-                            (click)="togglePassword()">
-                            <i class="fa fa-lg" aria-hidden="true"
-                                [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
-                    <span>{{'ok' | i18n}}</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-                    {{'cancel' | i18n}}
-                </button>
-            </div>
-        </form>
-    </div>
-</div>

src/app/components/password-reprompt.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
-
-@Component({
-    templateUrl: 'password-reprompt.component.html',
-})
-export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

src/app/layouts/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand navbar-dark" [ngClass]="{'nav-background-alt': selfHosted}">
+<nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
     <div class="container">
         <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
             <i class="fa fa-shield" aria-hidden="true"></i>

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

@@ -48,6 +48,15 @@
                 </li>
             </ul>
         </div>
+        <div class="ml-auto d-flex align-items-center">
+            <button class="btn btn-primary" (click)="goToBusinessPortal()" #businessBtn
+                [appApiAction]="businessTokenPromise" *ngIf="showBusinessPortalButton">
+                <i class="fa fa-bank fa-fw" [hidden]="businessBtn.loading" aria-hidden="true"></i>
+                <i class="fa fa-spinner fa-spin fa-fw" [hidden]="!businessBtn.loading" title="{{'loading' | i18n}}"
+                    aria-hidden="true"></i>
+                {{'businessPortal' | i18n}} →
+            </button>
+        </div>
     </div>
 </div>
 <router-outlet></router-outlet>

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

@@ -9,6 +9,9 @@ import { ActivatedRoute } from '@angular/router';
 
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
 
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { Organization } from 'jslib-common/models/domain/organization';
@@ -23,11 +26,16 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     organization: Organization;
     businessTokenPromise: Promise<any>;
     private organizationId: string;
+    private businessUrl: string;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private ngZone: NgZone,
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService) { }
 
     ngOnInit() {
+        this.businessUrl = this.environmentService.getEnterpriseUrl();
+
         document.body.classList.remove('layout_frontend');
         this.route.params.subscribe(async params => {
             this.organizationId = params.organizationId;
@@ -52,14 +60,30 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
         this.organization = await this.userService.getOrganization(this.organizationId);
     }
 
+    async goToBusinessPortal() {
+        if (this.businessTokenPromise != null) {
+            return;
+        }
+        try {
+            this.businessTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.businessTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.businessUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organization.id);
+            }
+        } catch { }
+        this.businessTokenPromise = null;
+    }
+
     get showMenuBar() {
         return this.showManageTab || this.showToolsTab || this.organization.isOwner;
     }
 
     get showManageTab(): boolean {
         return this.organization.canManageUsers ||
-            this.organization.canViewAllCollections ||
-            this.organization.canViewAssignedCollections ||
+            this.organization.canManageAssignedCollections ||
+            this.organization.canManageAllCollections ||
             this.organization.canManageGroups ||
             this.organization.canManagePolicies ||
             this.organization.canAccessEventLogs;
@@ -69,6 +93,10 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
         return this.organization.canAccessImportExport || this.organization.canAccessReports;
     }
 
+    get showBusinessPortalButton(): boolean {
+        return this.organization.useBusinessPortal && this.organization.canAccessBusinessPortal;
+    }
+
     get toolsRoute(): string {
         return this.organization.canAccessImportExport ?
             'tools/import' :
@@ -81,7 +109,7 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
             case this.organization.canManageUsers:
                 route = 'manage/people';
                 break;
-            case this.organization.canViewAssignedCollections || this.organization.canViewAllCollections:
+            case this.organization.canManageAssignedCollections || this.organization.canManageAllCollections:
                 route = 'manage/collections';
                 break;
             case this.organization.canManageGroups:

src/app/modal.component.ts

@@ -0,0 +1,76 @@
+import * as jq from 'jquery';
+
+import {
+    Component,
+    ComponentFactoryResolver,
+    Type,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { ModalComponent as BaseModalComponent } from 'jslib-angular/components/modal.component';
+import { Utils } from 'jslib-common/misc/utils';
+
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+
+@Component({
+    selector: 'app-modal',
+    template: `<ng-template #container></ng-template>`,
+})
+export class ModalComponent extends BaseModalComponent {
+    el: any = null;
+
+    constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
+        super(componentFactoryResolver, messagingService);
+    }
+
+    ngOnDestroy() { /* Nothing */ }
+
+    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
+        setComponentParameters: (component: T) => void = null): T {
+        this.parentContainer = parentContainer;
+        this.fade = fade;
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
+        const componentRef = this.container.createComponent<T>(factory);
+        if (setComponentParameters != null) {
+            setComponentParameters(componentRef.instance);
+        }
+
+        const modals = Array.from(document.querySelectorAll('.modal'));
+        if (modals.length > 0) {
+            this.el = jq(modals[0]);
+            this.el.modal('show');
+
+            this.el.on('show.bs.modal', () => {
+                this.onShow.emit();
+                this.messagingService.send('modalShow');
+            });
+            this.el.on('shown.bs.modal', () => {
+                this.onShown.emit();
+                this.messagingService.send('modalShown');
+                if (!Utils.isMobileBrowser) {
+                    this.el.find('*[appAutoFocus]').focus();
+                }
+            });
+            this.el.on('hide.bs.modal', () => {
+                this.onClose.emit();
+                this.messagingService.send('modalClose');
+            });
+            this.el.on('hidden.bs.modal', () => {
+                this.onClosed.emit();
+                this.messagingService.send('modalClosed');
+                if (this.parentContainer != null) {
+                    this.parentContainer.clear();
+                }
+            });
+        }
+
+        return componentRef.instance;
+    }
+
+    close() {
+        if (this.el != null) {
+            this.el.modal('hide');
+        }
+    }
+}

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

@@ -15,18 +15,17 @@
                 <div class="form-group">
                     <label for="name">{{'name' | i18n}}</label>
                     <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required
-                        appAutofocus [disabled]="!this.canSave">
+                        appAutofocus>
                 </div>
                 <div class="form-group">
                     <label for="externalId">{{'externalId' | i18n}}</label>
-                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId"
-                        [disabled]="!this.canSave">
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
                     <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
                 </div>
                 <ng-container *ngIf="accessGroups">
                     <h3 class="mt-4 d-flex mb-0">
                         {{'groupAccess' | i18n}}
-                        <div class="ml-auto" *ngIf="groups && groups.length && this.canSave">
+                        <div class="ml-auto" *ngIf="groups && groups.length">
                             <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
                                 {{'selectAll' | i18n}}
                             </button>
@@ -51,7 +50,7 @@
                             <tr *ngFor="let g of groups; let i = index">
                                 <td class="table-list-checkbox" (click)="check(g)">
                                     <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked"
-                                        [disabled]="g.accessAll || !this.canSave" appStopProp>
+                                        [disabled]="g.accessAll" appStopProp>
                                 </td>
                                 <td (click)="check(g)">
                                     {{g.name}}
@@ -63,11 +62,11 @@
                                 </td>
                                 <td class="text-center">
                                     <input type="checkbox" [(ngModel)]="g.hidePasswords"
-                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll || !this.canSave">
+                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll">
                                 </td>
                                 <td class="text-center">
                                     <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
-                                        [disabled]="!g.checked || g.accessAll || !this.canSave">
+                                        [disabled]="!g.checked || g.accessAll">
                                 </td>
                             </tr>
                         </tbody>
@@ -75,23 +74,22 @@
                 </ng-container>
             </div>
             <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading" *ngIf="this.canSave">
+                <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>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
                     data-dismiss="modal">{{'cancel' | i18n}}</button>
-                <div class="ml-auto" *ngIf="this.canDelete">
+                <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" 
-                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
                         <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
                             title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
-
         </form>
     </div>
 </div>

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

@@ -29,8 +29,6 @@ import { Utils } from 'jslib-common/misc/utils';
 export class CollectionAddEditComponent implements OnInit {
     @Input() collectionId: string;
     @Input() organizationId: string;
-    @Input() canSave: boolean;
-    @Input() canDelete: boolean;
     @Output() onSavedCollection = new EventEmitter();
     @Output() onDeletedCollection = new EventEmitter();
 

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

@@ -6,7 +6,7 @@
             <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
                 [(ngModel)]="searchText">
         </div>
-        <button type="button" *ngIf="this.canCreate" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
             <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
             {{'newCollection' | i18n}}
         </button>
@@ -27,17 +27,17 @@
                     <a href="#" appStopClick (click)="edit(c)">{{c.name}}</a>
                 </td>
                 <td class="table-list-options">
-                    <div class="dropdown" appListDropdown *ngIf="this.canEdit(c) || this.canDelete(c)">
+                    <div class="dropdown" appListDropdown>
                         <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
                             <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
                         </button>
                         <div class="dropdown-menu dropdown-menu-right">
-                            <a class="dropdown-item" href="#" appStopClick *ngIf="this.canEdit(c)" (click)="users(c)">
+                            <a class="dropdown-item" href="#" appStopClick (click)="users(c)">
                                 <i class="fa fa-fw fa-users" aria-hidden="true"></i>
                                 {{'users' | i18n}}
                             </a>
-                            <a class="dropdown-item text-danger" href="#" appStopClick *ngIf="this.canDelete(c)" (click)="delete(c)">
+                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(c)">
                                 <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
                                 {{'delete' | i18n}}
                             </a>

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

@@ -1,10 +1,12 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -14,11 +16,8 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.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';
 import {
     CollectionDetailsResponse,
     CollectionResponse,
@@ -26,6 +25,7 @@ import {
 import { ListResponse } from 'jslib-common/models/response/listResponse';
 import { CollectionView } from 'jslib-common/models/view/collectionView';
 
+import { ModalComponent } from '../../modal.component';
 import { CollectionAddEditComponent } from './collection-add-edit.component';
 import { EntityUsersComponent } from './entity-users.component';
 
@@ -38,11 +38,8 @@ export class CollectionsComponent implements OnInit {
     @ViewChild('usersTemplate', { read: ViewContainerRef, static: true }) usersModalRef: ViewContainerRef;
 
     loading = true;
-    organization: Organization;
-    canCreate: boolean = false;
     organizationId: string;
     collections: CollectionView[];
-    assignedCollections: CollectionView[];
     pagedCollections: CollectionView[];
     searchText: string;
 
@@ -50,9 +47,10 @@ export class CollectionsComponent implements OnInit {
     protected pageSize = 100;
 
     private pagedCollectionsCount = 0;
+    private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private collectionService: CollectionService, private modalService: ModalService,
+        private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private userService: UserService,
         private searchService: SearchService) { }
@@ -71,27 +69,16 @@ export class CollectionsComponent implements OnInit {
     }
 
     async load() {
-        this.organization = await this.userService.getOrganization(this.organizationId);
-        this.canCreate = this.organization.canCreateNewCollections;
-
-        const decryptCollections = async (r: ListResponse<CollectionResponse>) => {
-            const collections = r.data.filter(c => c.organizationId === this.organizationId).map(d =>
-                new Collection(new CollectionData(d as CollectionDetailsResponse)));
-            return await this.collectionService.decryptMany(collections);
-        };
-
-        if (this.organization.canViewAssignedCollections) {
-            const response = await this.apiService.getUserCollections();
-            this.assignedCollections = await decryptCollections(response);
-        }
-
-        if (this.organization.canViewAllCollections) {
-            const response = await this.apiService.getCollections(this.organizationId);
-            this.collections = await decryptCollections(response);
+        const organization = await this.userService.getOrganization(this.organizationId);
+        let response: ListResponse<CollectionResponse>;
+        if (organization.canManageAllCollections) {
+            response = await this.apiService.getCollections(this.organizationId);
         } else {
-            this.collections = this.assignedCollections;
+            response = await this.apiService.getUserCollections();
         }
-
+        const collections = response.data.filter(c => c.organizationId === this.organizationId).map(r =>
+            new Collection(new CollectionData(r as CollectionDetailsResponse)));
+        this.collections = await this.collectionService.decryptMany(collections);
         this.resetPaging();
         this.loading = false;
     }
@@ -113,29 +100,29 @@ export class CollectionsComponent implements OnInit {
         this.didScroll = this.pagedCollections.length > this.pageSize;
     }
 
-    async edit(collection: CollectionView) {
-        const canCreate = collection == null && this.canCreate;
-        const canEdit = collection != null && this.canEdit(collection);
-        const canDelete = collection != null && this.canDelete(collection);
-
-        if (!(canCreate || canEdit || canDelete)) {
-            this.toasterService.popAsync('error', null, this.i18nService.t('missingPermissions'));
-            return;
+    edit(collection: CollectionView) {
+        if (this.modal != null) {
+            this.modal.close();
         }
 
-        const [modal] = await this.modalService.openViewRef(CollectionAddEditComponent, this.addEditModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.collectionId = collection != null ? collection.id : null;
-            comp.canSave = canCreate || canEdit;
-            comp.canDelete = canDelete;
-            comp.onSavedCollection.subscribe(() => {
-                modal.close();
-                this.load();
-            });
-            comp.onDeletedCollection.subscribe(() => {
-                modal.close();
-                this.removeCollection(collection);
-            });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<CollectionAddEditComponent>(
+            CollectionAddEditComponent, this.addEditModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.collectionId = collection != null ? collection.id : null;
+        childComponent.onSavedCollection.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedCollection.subscribe(() => {
+            this.modal.close();
+            this.removeCollection(collection);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
@@ -155,22 +142,30 @@ export class CollectionsComponent implements OnInit {
             await this.apiService.deleteCollection(this.organizationId, collection.id);
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', collection.name));
             this.removeCollection(collection);
-        } catch {
-            this.toasterService.popAsync('error', null, this.i18nService.t('missingPermissions'));
-        }
+        } catch { }
     }
 
-    async users(collection: CollectionView) {
-        const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.entity = 'collection';
-            comp.entityId = collection.id;
-            comp.entityName = collection.name;
+    users(collection: CollectionView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-            comp.onEditedUsers.subscribe(() => {
-                this.load();
-                modal.close();
-            });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'collection';
+        childComponent.entityId = collection.id;
+        childComponent.entityName = collection.name;
+
+        childComponent.onEditedUsers.subscribe(() => {
+            this.load();
+            this.modal.close();
+        });
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
@@ -191,28 +186,6 @@ export class CollectionsComponent implements OnInit {
         return !searching && this.collections && this.collections.length > this.pageSize;
     }
 
-    canEdit(collection: CollectionView) {
-        if (this.organization.canEditAnyCollection) {
-            return true;
-        }
-
-        if (this.organization.canEditAssignedCollections && this.assignedCollections.some(c => c.id === collection.id)) {
-            return true;
-        }
-        return false;
-    }
-
-    canDelete(collection: CollectionView) {
-        if (this.organization.canDeleteAnyCollection) {
-            return true;
-        }
-
-        if (this.organization.canDeleteAssignedCollections && this.assignedCollections.some(c => c.id === collection.id)) {
-            return true;
-        }
-        return false;
-    }
-
     private removeCollection(collection: CollectionView) {
         const index = this.collections.indexOf(collection);
         if (index > -1) {

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -17,12 +18,11 @@ import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.se
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.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 { ModalComponent } from '../../modal.component';
 import { EntityUsersComponent } from './entity-users.component';
 import { GroupAddEditComponent } from './group-add-edit.component';
 
@@ -44,9 +44,10 @@ export class GroupsComponent implements OnInit {
     protected pageSize = 100;
 
     private pagedGroupsCount = 0;
+    private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private i18nService: I18nService, private modalService: ModalService,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
         private userService: UserService, private router: Router,
         private searchService: SearchService) { }
@@ -94,18 +95,29 @@ export class GroupsComponent implements OnInit {
         this.didScroll = this.pagedGroups.length > this.pageSize;
     }
 
-    async edit(group: GroupResponse) {
-        const [modal] = await this.modalService.openViewRef(GroupAddEditComponent, this.addEditModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.groupId = group != null ? group.id : null;
-            comp.onSavedGroup.subscribe(() => {
-                modal.close();
-                this.load();
-            });
-            comp.onDeletedGroup.subscribe(() => {
-                modal.close();
-                this.removeGroup(group);
-            });
+    edit(group: GroupResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<GroupAddEditComponent>(
+            GroupAddEditComponent, this.addEditModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.groupId = group != null ? group.id : null;
+        childComponent.onSavedGroup.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedGroup.subscribe(() => {
+            this.modal.close();
+            this.removeGroup(group);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
@@ -128,16 +140,26 @@ export class GroupsComponent implements OnInit {
         } catch { }
     }
 
-    async users(group: GroupResponse) {
-        const [modal] = await this.modalService.openViewRef(EntityUsersComponent, this.usersModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.entity = 'group';
-            comp.entityId = group.id;
-            comp.entityName = group.name;
+    users(group: GroupResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-            comp.onEditedUsers.subscribe(() => {
-                modal.close();
-            });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.usersModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityUsersComponent>(
+            EntityUsersComponent, this.usersModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.entity = 'group';
+        childComponent.entityId = group.id;
+        childComponent.entityName = group.name;
+
+        childComponent.onEditedUsers.subscribe(() => {
+            this.modal.close();
+        });
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 

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

@@ -9,7 +9,7 @@
                         {{'people' | i18n}}
                     </a>
                     <a routerLink="collections" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.canViewAllCollections || organization.canViewAssignedCollections">
+                        *ngIf="organization.canManageAssignedCollections || organization.canManageAllCollections">
                         {{'collections' | i18n}}
                     </a>
                     <a routerLink="groups" class="list-group-item" routerLinkActive="active"
@@ -20,10 +20,6 @@
                         *ngIf="organization.canManagePolicies && accessPolicies">
                         {{'policies' | i18n}}
                     </a>
-                    <a routerLink="sso" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.canManageSso && accessSso">
-                        {{'singleSignOn' | i18n}}
-                    </a>
                     <a routerLink="events" class="list-group-item" routerLinkActive="active"
                         *ngIf="organization.canAccessEventLogs && accessEvents">
                         {{'eventLogs' | i18n}}

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

@@ -14,18 +14,16 @@ import { Organization } from 'jslib-common/models/domain/organization';
 })
 export class ManageComponent implements OnInit {
     organization: Organization;
-    accessPolicies: boolean = false;
-    accessGroups: boolean = false;
-    accessEvents: boolean = false;
-    accessSso: boolean = false;
+    accessPolicies = false;
+    accessGroups = false;
+    accessEvents = false;
 
-    constructor(private route: ActivatedRoute, private userService: UserService) {}
+    constructor(private route: ActivatedRoute, private userService: UserService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async params => {
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.accessPolicies = this.organization.usePolicies;
-            this.accessSso = this.organization.useSso;
             this.accessEvents = this.organization.useEvents;
             this.accessGroups = this.organization.useGroups;
         });

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -25,8 +26,6 @@ import { StorageService } from 'jslib-common/abstractions/storage.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-
 import { OrganizationKeysRequest } from 'jslib-common/models/request/organizationKeysRequest';
 import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
 import { OrganizationUserConfirmRequest } from 'jslib-common/models/request/organizationUserConfirmRequest';
@@ -38,11 +37,13 @@ import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/respons
 import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
 import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
 import { PolicyType } from 'jslib-common/enums/policyType';
+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 { BasePeopleComponent } from '../../common/base.people.component';
+import { ModalComponent } from '../../modal.component';
 import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
 import { BulkRemoveComponent } from './bulk/bulk-remove.component';
 import { BulkStatusComponent } from './bulk/bulk-status.component';
@@ -79,14 +80,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
     callingUserType: OrganizationUserType = null;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, modalService: ModalService,
+        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
         platformUtilsService: PlatformUtilsService, toasterService: ToasterService,
         cryptoService: CryptoService, private userService: UserService, private router: Router,
         storageService: StorageService, searchService: SearchService,
         validationService: ValidationService, private policyService: PolicyService,
         logService: LogService, searchPipe: SearchPipe, userNamePipe: UserNamePipe, private syncService: SyncService) {
             super(apiService, searchService, i18nService, platformUtilsService, toasterService, cryptoService,
-                storageService, validationService, modalService, logService, searchPipe, userNamePipe);
+                storageService, validationService, componentFactoryResolver, logService, searchPipe, userNamePipe);
         }
 
     async ngOnInit() {
@@ -136,9 +137,8 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
     }
 
     async load() {
-        const resetPasswordPolicy = await this.policyService.getPolicyForOrganization(PolicyType.ResetPassword,
-            this.organizationId);
-        this.orgResetPasswordPolicyEnabled = resetPasswordPolicy?.enabled;
+        const policies = await this.policyService.getAll(PolicyType.ResetPassword);
+        this.orgResetPasswordPolicyEnabled = policies.some(p => p.organizationId === this.organizationId && p.enabled);
         super.load();
     }
 
@@ -189,30 +189,52 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
         return this.orgUseResetPassword && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled;
     }
 
-    async edit(user: OrganizationUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.organizationId = this.organizationId;
-            comp.organizationUserId = user != null ? user.id : null;
-            comp.onSavedUser.subscribe(() => {
-                modal.close();
-                this.load();
-            });
-            comp.onDeletedUser.subscribe(() => {
-                modal.close();
-                this.removeUser(user);
-            });
+    edit(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<UserAddEditComponent>(
+            UserAddEditComponent, this.addEditModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.organizationId = this.organizationId;
+        childComponent.organizationUserId = user != null ? user.id : null;
+        childComponent.onSavedUser.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeletedUser.subscribe(() => {
+            this.modal.close();
+            this.removeUser(user);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
-    async groups(user: OrganizationUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(UserGroupsComponent, this.groupsModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.organizationId = this.organizationId;
-            comp.organizationUserId = user != null ? user.id : null;
-            comp.onSavedUser.subscribe(() => {
-                modal.close();
-            });
+    groups(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.groupsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<UserGroupsComponent>(
+            UserGroupsComponent, this.groupsModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.organizationId = this.organizationId;
+        childComponent.organizationUserId = user != null ? user.id : null;
+        childComponent.onSavedUser.subscribe(() => {
+            this.modal.close();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
@@ -221,13 +243,21 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.users = this.getCheckedUsers();
-        });
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-        await modal.onClosedPromise();
-        await this.load();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
     }
 
     async bulkReinvite() {
@@ -244,6 +274,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
+
         try {
             const request = new OrganizationUserBulkRequest(filteredUsers.map(user => user.id));
             const response = this.apiService.postManyOrganizationUserReinvite(this.organizationId, request);
@@ -259,58 +290,95 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
-            comp.organizationId = this.organizationId;
-            comp.users = this.getCheckedUsers();
-        });
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-        await modal.onClosedPromise();
-        await this.load();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
     }
 
     async events(user: OrganizationUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.organizationId = this.organizationId;
-            comp.entityId = user.id;
-            comp.showUser = false;
-            comp.entity = 'user';
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.eventsModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EntityEventsComponent>(
+            EntityEventsComponent, this.eventsModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.organizationId = this.organizationId;
+        childComponent.entityId = user.id;
+        childComponent.showUser = false;
+        childComponent.entity = 'user';
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
     async resetPassword(user: OrganizationUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(ResetPasswordComponent, this.resetPasswordModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.email = user != null ? user.email : null;
-            comp.organizationId = this.organizationId;
-            comp.id = user != null ? user.id : null;
+        if (this.modal != null) {
+            this.modal.close();
+        }
 
-            comp.onPasswordReset.subscribe(() => {
-                modal.close();
-                this.load();
-            });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.resetPasswordModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ResetPasswordComponent>(
+            ResetPasswordComponent, this.resetPasswordModalRef);
+
+        childComponent.name = this.userNamePipe.transform(user);
+        childComponent.email = user != null ? user.email : null;
+        childComponent.organizationId = this.organizationId;
+        childComponent.id = user != null ? user.id : null;
+
+        childComponent.onPasswordReset.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
 
     private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
         request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {
 
-        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
-            comp.loading = true;
-        });
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<BulkStatusComponent>(
+            BulkStatusComponent, this.bulkStatusModalRef);
+
+        childComponent.loading = true;
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        modal.onShown.subscribe(() => {
+        this.modal.onShown.subscribe(() => {
             if (close) {
-                modal.close();
+                this.modal.close();
             }
         });
 
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
         try {
             const response = await request;
 
-            if (modal) {
+            if (this.modal) {
                 const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
                 const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
 
@@ -330,7 +398,9 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             }
         } catch {
             close = true;
-            modal.close();
+            if (this.modal) {
+                this.modal.close();
+            }
         }
     }
 }

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

@@ -1,3 +1,8 @@
+<app-callout *ngIf="userCanAccessBusinessPortal" [type]="'warning'">
+    <p>{{'webPoliciesDeprecationWarning' | i18n}}</p>
+    <button type="button" class="btn btn-outline-secondary"
+        (click)="goToEnterprisePortal()">{{'businessPortal' | i18n}}</button>
+</app-callout>
 <div class="page-header d-flex">
     <h1>{{'policies' | i18n}}</h1>
 </div>
@@ -8,10 +13,10 @@
 <table class="table table-hover table-list" *ngIf="!loading">
     <tbody>
         <tr *ngFor="let p of policies">
-            <td *ngIf="p.display(organization)">
-                <a href="#" appStopClick (click)="edit(p)">{{p.name | i18n}}</a>
-                <span class="badge badge-success" *ngIf="policiesEnabledMap.get(p.type)">{{'enabled' | i18n}}</span>
-                <small class="text-muted d-block">{{p.description | i18n}}</small>
+            <td *ngIf="p.display">
+                <a href="#" appStopClick (click)="edit(p)">{{p.name}}</a>
+                <span class="badge badge-success" *ngIf="p.enabled">{{'enabled' | i18n}}</span>
+                <small class="text-muted d-block">{{p.description}}</small>
             </td>
         </tr>
     </tbody>

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

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -11,20 +12,18 @@ import {
 
 import { PolicyType } from 'jslib-common/enums/policyType';
 
+import { EnvironmentService } from 'jslib-common/abstractions';
 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 { UserService } from 'jslib-common/abstractions/user.service';
 
-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 { ModalComponent } from '../../modal.component';
 
 import { PolicyEditComponent } from './policy-edit.component';
 
-import { PolicyListService } from '../../services/policy-list.service';
-import { BasePolicy } from '../policies/base-policy.component';
-
 @Component({
     selector: 'app-org-policies',
     templateUrl: 'policies.component.html',
@@ -34,27 +33,96 @@ export class PoliciesComponent implements OnInit {
 
     loading = true;
     organizationId: string;
-    policies: BasePolicy[];
-    organization: Organization;
+    policies: any[];
 
+    // Remove when removing deprecation warning
+    enterpriseTokenPromise: Promise<any>;
+    userCanAccessBusinessPortal = false;
+
+    private enterpriseUrl: string;
+
+    private modal: ModalComponent = null;
     private orgPolicies: PolicyResponse[];
     private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private modalService: ModalService, private userService: UserService,
-        private policyListService: PolicyListService, private router: Router) { }
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private router: Router, private environmentService: EnvironmentService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
-            this.organization = await this.userService.getOrganization(this.organizationId);
-            if (this.organization == null || !this.organization.usePolicies) {
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.usePolicies) {
                 this.router.navigate(['/organizations', this.organizationId]);
                 return;
             }
-
-            this.policies = this.policyListService.getPolicies();
-
+            this.userCanAccessBusinessPortal = organization.canAccessBusinessPortal;
+            this.policies = [
+                {
+                    name: this.i18nService.t('twoStepLogin'),
+                    description: this.i18nService.t('twoStepLoginPolicyDesc'),
+                    type: PolicyType.TwoFactorAuthentication,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('masterPass'),
+                    description: this.i18nService.t('masterPassPolicyDesc'),
+                    type: PolicyType.MasterPassword,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('passwordGenerator'),
+                    description: this.i18nService.t('passwordGeneratorPolicyDesc'),
+                    type: PolicyType.PasswordGenerator,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('singleOrg'),
+                    description: this.i18nService.t('singleOrgDesc'),
+                    type: PolicyType.SingleOrg,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('requireSso'),
+                    description: this.i18nService.t('requireSsoPolicyDesc'),
+                    type: PolicyType.RequireSso,
+                    enabled: false,
+                    display: organization.useSso,
+                },
+                {
+                    name: this.i18nService.t('personalOwnership'),
+                    description: this.i18nService.t('personalOwnershipPolicyDesc'),
+                    type: PolicyType.PersonalOwnership,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('disableSend'),
+                    description: this.i18nService.t('disableSendPolicyDesc'),
+                    type: PolicyType.DisableSend,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('sendOptions'),
+                    description: this.i18nService.t('sendOptionsPolicyDesc'),
+                    type: PolicyType.SendOptions,
+                    enabled: false,
+                    display: true,
+                }, {
+                    name: this.i18nService.t('resetPasswordPolicy'),
+                    description: this.i18nService.t('resetPasswordPolicyDescription'),
+                    type: PolicyType.ResetPassword,
+                    enabled: false,
+                    display: organization.useResetPassword,
+                },
+            ];
             await this.load();
 
             // Handle policies component launch from Event message
@@ -79,6 +147,9 @@ export class PoliciesComponent implements OnInit {
                 }
             });
         });
+
+        // Remove when removing deprecation warning
+        this.enterpriseUrl = this.environmentService.getEnterpriseUrl();
     }
 
     async load() {
@@ -87,19 +158,52 @@ export class PoliciesComponent implements OnInit {
         this.orgPolicies.forEach(op => {
             this.policiesEnabledMap.set(op.type, op.enabled);
         });
-
+        this.policies.forEach(p => {
+            p.enabled = this.policiesEnabledMap.has(p.type) && this.policiesEnabledMap.get(p.type);
+        });
         this.loading = false;
     }
 
-    async edit(policy: BasePolicy) {
-        const [modal] = await this.modalService.openViewRef(PolicyEditComponent, this.editModalRef, comp => {
-            comp.policy = policy;
-            comp.organizationId = this.organizationId;
-            comp.policiesEnabledMap = this.policiesEnabledMap;
-            comp.onSavedPolicy.subscribe(() => {
-                modal.close();
-                this.load();
-            });
+    edit(p: any) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.editModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PolicyEditComponent>(
+            PolicyEditComponent, this.editModalRef);
+
+        childComponent.name = p.name;
+        childComponent.description = p.description;
+        childComponent.type = p.type;
+        childComponent.organizationId = this.organizationId;
+        childComponent.policiesEnabledMap = this.policiesEnabledMap;
+        childComponent.onSavedPolicy.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
         });
     }
+
+
+    // Remove when removing deprecation warning
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organizationId);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
 }

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

@@ -2,21 +2,178 @@
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{policy.name | i18n}}</h2>
+                <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            
-            <div class="modal-body">
-                <div class="modal-body" *ngIf="loading">
-                    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'loading' | i18n}}</span>
-                </div>
-                <div [hidden]="loading">
-                    <p>{{policy.description | i18n}}</p>
-                    <ng-template #policyForm></ng-template>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <p>{{description}}</p>
+                <app-callout type="warning" *ngIf="type === policyType.TwoFactorAuthentication"
+                    title="{{'warning' | i18n}}" icon="fa-warning">
+                    {{'twoStepLoginPolicyWarning' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SingleOrg" title="{{'warning' | i18n}}"
+                    icon="fa-warning">
+                    {{'singleOrgPolicyWarning' | i18n}}
+                </app-callout>
+                <ng-container *ngIf="type === policyType.RequireSso">
+                    <app-callout type="tip" title="{{'prerequisite' | i18n}}">
+                        {{'requireSsoPolicyReq' | i18n}}
+                    </app-callout>
+                    <app-callout type="warning">
+                        {{'requireSsoExemption' | i18n}}
+                    </app-callout>
+                </ng-container>
+                <app-callout type="warning" *ngIf="type === policyType.PersonalOwnership">
+                    {{'personalOwnershipExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.DisableSend">
+                    {{'disableSendExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SendOptions">
+                    {{'sendOptionsExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.ResetPassword">
+                    {{'resetPasswordPolicyWarning' | i18n}}
+                </app-callout>
+                <div class="form-group">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="enabled" [(ngModel)]="enabled"
+                            name="Enabled">
+                        <label class="form-check-label" for="enabled">{{checkboxDesc}}</label>
+                    </div>
                 </div>
+                <ng-container *ngIf="type === policyType.MasterPassword">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinComplexity">{{'minComplexityScore' | i18n}}</label>
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
+                                [(ngModel)]="masterPassMinComplexity" class="form-control">
+                                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinLength">{{'minLength' | i18n}}</label>
+                            <input id="masterPassMinLength" class="form-control" type="number" min="8"
+                                name="MasterPassMinLength" [(ngModel)]="masterPassMinLength">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireUpper"
+                            [(ngModel)]="masterPassRequireUpper" name="MasterPassRequireUpper">
+                        <label class="form-check-label" for="masterPassRequireUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireLower"
+                            [(ngModel)]="masterPassRequireLower" name="MasterPassRequireLower">
+                        <label class="form-check-label" for="masterPassRequireLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireNumbers"
+                            [(ngModel)]="masterPassRequireNumbers" name="MasterPassRequireNumbers">
+                        <label class="form-check-label" for="masterPassRequireNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireSpecial"
+                            [(ngModel)]="masterPassRequireSpecial" name="MasterPassRequireSpecial">
+                        <label class="form-check-label" for="masterPassRequireSpecial">!@#$%^&amp;*</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.PasswordGenerator">
+                    <div class="row">
+                        <div class="col-6 form-group  mb-0">
+                            <label for="passGenDefaultType">{{'defaultType' | i18n}}</label>
+                            <select id="passGenDefaultType" name="PassGenDefaultType" [(ngModel)]="passGenDefaultType"
+                                class="form-control">
+                                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <h3 class="mt-4">{{'password' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinLength">{{'minLength' | i18n}}</label>
+                            <input id="passGenMinLength" class="form-control" type="number" name="PassGenMinLength"
+                                min="5" max="128" [(ngModel)]="passGenMinLength">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumbers">{{'minNumbers' | i18n}}</label>
+                            <input id="passGenMinNumbers" class="form-control" type="number" name="PassGenMinNumbers"
+                                min="0" max="9" [(ngModel)]="passGenMinNumbers">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="passGenMinSpecial">{{'minSpecial' | i18n}}</label>
+                            <input id="passGenMinSpecial" class="form-control" type="number" name="PassGenMinSpecial"
+                                min="0" max="9" [(ngModel)]="passGenMinSpecial">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseUpper"
+                            [(ngModel)]="passGenUseUpper" name="PassGenUseUpper">
+                        <label class="form-check-label" for="passGenUseUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseLower"
+                            [(ngModel)]="passGenUseLower" name="PassGenUseLower">
+                        <label class="form-check-label" for="passGenUseLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseNumbers"
+                            [(ngModel)]="passGenUseNumbers" name="PassGenUseNumbers">
+                        <label class="form-check-label" for="passGenUseNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseSpecial"
+                            [(ngModel)]="passGenUseSpecial" name="PassGenUseSpecial">
+                        <label class="form-check-label" for="passGenUseSpecial">!@#$%^&amp;*</label>
+                    </div>
+                    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
+                            <input id="passGenMinNumberWords" class="form-control" type="number"
+                                name="PassGenMinNumberWords" min="3" max="20" [(ngModel)]="passGenMinNumberWords">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenCapitalize"
+                            [(ngModel)]="passGenCapitalize" name="PassGenCapitalize">
+                        <label class="form-check-label" for="passGenCapitalize">{{'capitalize' | i18n}}</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenIncludeNumber"
+                            [(ngModel)]="passGenIncludeNumber" name="PassGenIncludeNumber">
+                        <label class="form-check-label" for="passGenIncludeNumber">{{'includeNumber' | i18n}}</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.SendOptions">
+                    <h3 class="mt-4">{{'options' | i18n}}</h3>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="sendDisableHideEmail"
+                            [(ngModel)]="sendDisableHideEmail" name="SendDisableHideEmail">
+                        <label class="form-check-label" for="sendDisableHideEmail">{{'disableHideEmail' | i18n}}</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.ResetPassword">
+                    <h3 class="mt-4">{{'resetPasswordPolicyAutoEnroll' | i18n}}</h3>
+                    <p>{{'resetPasswordPolicyAutoEnrollDescription' | i18n}}</p>
+                    <app-callout type="warning">
+                        {{'resetPasswordPolicyAutoEnrollWarning' | i18n}}
+                    </app-callout>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="autoEnrollEnabled"
+                            [(ngModel)]="resetPasswordAutoEnroll" name="AutoEnrollEnabled">
+                        <label class="form-check-label"
+                            for="autoEnrollEnabled">{{'resetPasswordPolicyAutoEnrollCheckbox' | i18n }}</label>
+                    </div>
+                </ng-container>
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">

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

@@ -1,12 +1,9 @@
 import {
-    ChangeDetectorRef,
     Component,
-    ComponentFactoryResolver,
     EventEmitter,
     Input,
+    OnInit,
     Output,
-    ViewChild,
-    ViewContainerRef,
 } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
@@ -20,52 +17,119 @@ import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
 
 import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
 
-import { BasePolicy, BasePolicyComponent } from '../policies/base-policy.component';
-
 @Component({
     selector: 'app-policy-edit',
     templateUrl: 'policy-edit.component.html',
 })
-export class PolicyEditComponent {
-    @Input() policy: BasePolicy;
+export class PolicyEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() description: string;
+    @Input() type: PolicyType;
     @Input() organizationId: string;
     @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
     @Output() onSavedPolicy = new EventEmitter();
 
-    @ViewChild('policyForm', { read: ViewContainerRef, static: true }) policyFormRef: ViewContainerRef;
-
     policyType = PolicyType;
     loading = true;
     enabled = false;
     formPromise: Promise<any>;
+    passwordScores: any[];
     defaultTypes: any[];
-    policyComponent: BasePolicyComponent;
 
-    private policyResponse: PolicyResponse;
+    // Master password
+    masterPassMinComplexity?: number = null;
+    masterPassMinLength?: number;
+    masterPassRequireUpper?: number;
+    masterPassRequireLower?: number;
+    masterPassRequireNumbers?: number;
+    masterPassRequireSpecial?: number;
+
+    // Password generator
+    passGenDefaultType?: string;
+    passGenMinLength?: number;
+    passGenUseUpper?: boolean;
+    passGenUseLower?: boolean;
+    passGenUseNumbers?: boolean;
+    passGenUseSpecial?: boolean;
+    passGenMinNumbers?: number;
+    passGenMinSpecial?: number;
+    passGenMinNumberWords?: number;
+    passGenCapitalize?: boolean;
+    passGenIncludeNumber?: boolean;
+
+    // Send options
+    sendDisableHideEmail?: boolean;
+
+    // Reset Password
+    resetPasswordAutoEnroll?: boolean;
+
+    private policy: PolicyResponse;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private componentFactoryResolver: ComponentFactoryResolver,
-        private cdr: ChangeDetectorRef) {
+        private toasterService: ToasterService) {
+        this.passwordScores = [
+            { name: '-- ' + i18nService.t('select') + ' --', value: null },
+            { name: i18nService.t('weak') + ' (0)', value: 0 },
+            { name: i18nService.t('weak') + ' (1)', value: 1 },
+            { name: i18nService.t('weak') + ' (2)', value: 2 },
+            { name: i18nService.t('good') + ' (3)', value: 3 },
+            { name: i18nService.t('strong') + ' (4)', value: 4 },
+        ];
+        this.defaultTypes = [
+            { name: i18nService.t('userPreference'), value: null },
+            { name: i18nService.t('password'), value: 'password' },
+            { name: i18nService.t('passphrase'), value: 'passphrase' },
+        ];
     }
 
-    async ngAfterViewInit() {
+    async ngOnInit() {
         await this.load();
         this.loading = false;
-
-        const factory = this.componentFactoryResolver.resolveComponentFactory(this.policy.component);
-        this.policyComponent = this.policyFormRef.createComponent(factory).instance as BasePolicyComponent;
-        this.policyComponent.policy = this.policy;
-        this.policyComponent.policyResponse = this.policyResponse;
-
-        this.cdr.detectChanges();
     }
 
     async load() {
         try {
-            this.policyResponse = await this.apiService.getPolicy(this.organizationId, this.policy.type);
+            this.policy = await this.apiService.getPolicy(this.organizationId, this.type);
+
+            if (this.policy != null) {
+                this.enabled = this.policy.enabled;
+                if (this.policy.data != null) {
+                    switch (this.type) {
+                        case PolicyType.PasswordGenerator:
+                            this.passGenDefaultType = this.policy.data.defaultType;
+                            this.passGenMinLength = this.policy.data.minLength;
+                            this.passGenUseUpper = this.policy.data.useUpper;
+                            this.passGenUseLower = this.policy.data.useLower;
+                            this.passGenUseNumbers = this.policy.data.useNumbers;
+                            this.passGenUseSpecial = this.policy.data.useSpecial;
+                            this.passGenMinNumbers = this.policy.data.minNumbers;
+                            this.passGenMinSpecial = this.policy.data.minSpecial;
+                            this.passGenMinNumberWords = this.policy.data.minNumberWords;
+                            this.passGenCapitalize = this.policy.data.capitalize;
+                            this.passGenIncludeNumber = this.policy.data.includeNumber;
+                            break;
+                        case PolicyType.MasterPassword:
+                            this.masterPassMinComplexity = this.policy.data.minComplexity;
+                            this.masterPassMinLength = this.policy.data.minLength;
+                            this.masterPassRequireUpper = this.policy.data.requireUpper;
+                            this.masterPassRequireLower = this.policy.data.requireLower;
+                            this.masterPassRequireNumbers = this.policy.data.requireNumbers;
+                            this.masterPassRequireSpecial = this.policy.data.requireSpecial;
+                            break;
+                        case PolicyType.SendOptions:
+                            this.sendDisableHideEmail = this.policy.data.disableHideEmail;
+                            break;
+                        case PolicyType.ResetPassword:
+                            this.resetPasswordAutoEnroll = this.policy.data.autoEnrollEnabled;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
         } catch (e) {
             if (e.statusCode === 404) {
-                this.policyResponse = new PolicyResponse({Enabled: false});
+                this.enabled = false;
             } else {
                 throw e;
             }
@@ -73,19 +137,94 @@ export class PolicyEditComponent {
     }
 
     async submit() {
-        let request: PolicyRequest;
-        try {
-            request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
-        } catch (e) {
-            this.toasterService.pop('error', null, e);
-            return;
+        if (this.preValidate()) {
+            const request = new PolicyRequest();
+            request.enabled = this.enabled;
+            request.type = this.type;
+            request.data = null;
+            switch (this.type) {
+                case PolicyType.PasswordGenerator:
+                    request.data = {
+                        defaultType: this.passGenDefaultType,
+                        minLength: this.passGenMinLength || null,
+                        useUpper: this.passGenUseUpper,
+                        useLower: this.passGenUseLower,
+                        useNumbers: this.passGenUseNumbers,
+                        useSpecial: this.passGenUseSpecial,
+                        minNumbers: this.passGenMinNumbers || null,
+                        minSpecial: this.passGenMinSpecial || null,
+                        minNumberWords: this.passGenMinNumberWords || null,
+                        capitalize: this.passGenCapitalize,
+                        includeNumber: this.passGenIncludeNumber,
+                    };
+                    break;
+                case PolicyType.MasterPassword:
+                    request.data = {
+                        minComplexity: this.masterPassMinComplexity || null,
+                        minLength: this.masterPassMinLength || null,
+                        requireUpper: this.masterPassRequireUpper,
+                        requireLower: this.masterPassRequireLower,
+                        requireNumbers: this.masterPassRequireNumbers,
+                        requireSpecial: this.masterPassRequireSpecial,
+                    };
+                    break;
+                case PolicyType.SendOptions:
+                    request.data = {
+                        disableHideEmail: this.sendDisableHideEmail,
+                    };
+                    break;
+                case PolicyType.ResetPassword:
+                    request.data = {
+                        autoEnrollEnabled: this.resetPasswordAutoEnroll,
+                    };
+                    break;
+                default:
+                    break;
+            }
+            try {
+                this.formPromise = this.apiService.putPolicy(this.organizationId, this.type, request);
+                await this.formPromise;
+                this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.name));
+                this.onSavedPolicy.emit();
+            } catch { }
         }
+    }
 
-        try {
-            this.formPromise = this.apiService.putPolicy(this.organizationId, this.policy.type, request);
-            await this.formPromise;
-            this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.i18nService.t(this.policy.name)));
-            this.onSavedPolicy.emit();
-        } catch {}
+    get checkboxDesc(): string {
+        return this.type === PolicyType.PersonalOwnership ? this.i18nService.t('personalOwnershipCheckboxDesc') :
+            this.i18nService.t('enabled');
+    }
+
+    private preValidate(): boolean {
+        switch (this.type) {
+            case PolicyType.RequireSso:
+                // Don't need prevalidation checks if submitting to disable
+                if (!this.enabled) {
+                    return true;
+                }
+                // Have SingleOrg policy enabled?
+                if (!(this.policiesEnabledMap.has(PolicyType.SingleOrg)
+                    && this.policiesEnabledMap.get(PolicyType.SingleOrg))) {
+                    this.toasterService.popAsync('error', null, this.i18nService.t('requireSsoPolicyReqError'));
+                    return false;
+                }
+                return true;
+
+            case PolicyType.SingleOrg:
+                // Don't need prevalidation checks if submitting to enable
+                if (this.enabled) {
+                    return true;
+                }
+                // If RequireSso Policy is enabled prevent submittal
+                if (this.policiesEnabledMap.has(PolicyType.RequireSso)
+                    && this.policiesEnabledMap.get(PolicyType.RequireSso)) {
+                    this.toasterService.popAsync('error', null, this.i18nService.t('disableRequireSsoError'));
+                    return false;
+                }
+                return true;
+
+            default:
+                return true;
+        }
     }
 }

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

@@ -13,9 +13,24 @@
             <div class="modal-body">
                 <app-callout type="warning">{{'resetPasswordLoggedOutWarning' | i18n: loggedOutWarningName}}
                 </app-callout>
-                <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                    enforcedPolicyMessage="{{'resetPasswordMasterPasswordPolicyInEffect' | i18n}}"
-                    *ngIf="enforcedPolicyOptions">
+                <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                    {{'resetPasswordMasterPasswordPolicyInEffect' | i18n}}
+                    <ul class="mb-0">
+                        <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                            {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                        </li>
+                        <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                            {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                        </li>
+                        <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                            {{'policyInEffectUppercase' | i18n}}</li>
+                        <li *ngIf="enforcedPolicyOptions?.requireLower">
+                            {{'policyInEffectLowercase' | i18n}}</li>
+                        <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                            {{'policyInEffectNumbers' | i18n}}</li>
+                        <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                            {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                    </ul>
                 </app-callout>
                 <div class="row">
                     <div class="col form-group">

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

@@ -1,4 +1,5 @@
 import {
+    AfterViewInit,
     Component,
     EventEmitter,
     Input,
@@ -16,7 +17,6 @@ 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({
@@ -50,6 +50,26 @@ export class ResetPasswordComponent implements OnInit {
         return this.name != null ? this.name : this.i18nService.t('thisUser');
     }
 
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
     async generatePassword() {
         const options = (await this.passwordGenerationService.getOptions())[0];
         this.newPassword = await this.passwordGenerationService.generatePassword(options);

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

@@ -80,15 +80,32 @@
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Manager Permissions</label>
                                 <hr class="my-0 mr-2" />
-                                <app-nested-checkbox parentId="manageAssignedCollections"
-                                    [checkboxes]="manageAssignedCollectionsCheckboxes">
-                                </app-nested-checkbox>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageAssignedCollections"
+                                            id="manageAssignedCollections"
+                                            [(ngModel)]="permissions.manageAssignedCollections">
+                                        <label class="form-check-label font-weight-normal"
+                                            for="manageAssignedCollections">
+                                            {{'manageAssignedCollections' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="col-6">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Admin Permissions</label>
                                 <hr class="my-0 mr-2" />
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="accessBusinessPortal"
+                                            id="accessBusinessPortal" [(ngModel)]="permissions.accessBusinessPortal">
+                                        <label class="form-check-label font-weight-normal" for="accessBusinessPortal">
+                                            {{'accessBusinessPortal' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
                                 <div class="form-group mb-0">
                                     <div class="form-check mt-1 form-check-block">
                                         <input class="form-check-input" type="checkbox" name="accessEventLogs"
@@ -116,9 +133,15 @@
                                         </label>
                                     </div>
                                 </div>
-                                <app-nested-checkbox parentId="manageAllCollections"
-                                    [checkboxes]="manageAllCollectionsCheckboxes">
-                                </app-nested-checkbox>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageAllCollections"
+                                            id="manageAllCollections" [(ngModel)]="permissions.manageAllCollections">
+                                        <label class="form-check-label font-weight-normal" for="manageAllCollections">
+                                            {{'manageAllCollections' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
                                 <div class="form-group mb-0">
                                     <div class="form-check mt-1 form-check-block">
                                         <input class="form-check-input" type="checkbox" name="manageGroups"

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

@@ -48,37 +48,6 @@ export class UserAddEditComponent implements OnInit {
     deletePromise: Promise<any>;
     organizationUserType = OrganizationUserType;
 
-    manageAllCollectionsCheckboxes = [
-        {
-            id: 'createNewCollections',
-            get: () => this.permissions.createNewCollections,
-            set: (v: boolean) => this.permissions.createNewCollections = v,
-        },
-        {
-            id: 'editAnyCollection',
-            get: () => this.permissions.editAnyCollection,
-            set: (v: boolean) => this.permissions.editAnyCollection = v,
-        },
-        {
-            id: 'deleteAnyCollection',
-            get: () => this.permissions.deleteAnyCollection,
-            set: (v: boolean) => this.permissions.deleteAnyCollection = v,
-        },
-    ];
-
-    manageAssignedCollectionsCheckboxes = [
-        {
-            id: 'editAssignedCollections',
-            get: () => this.permissions.editAssignedCollections,
-            set: (v: boolean) => this.permissions.editAssignedCollections = v,
-        },
-        {
-            id: 'deleteAssignedCollections',
-            get: () => this.permissions.deleteAssignedCollections,
-            set: (v: boolean) => this.permissions.deleteAssignedCollections = v,
-        },
-    ];
-
     get customUserTypeSelected(): boolean {
         return this.type === OrganizationUserType.Custom;
     }
@@ -138,7 +107,39 @@ export class UserAddEditComponent implements OnInit {
     }
 
     setRequestPermissions(p: PermissionsApi, clearPermissions: boolean) {
-        Object.assign(p, clearPermissions ? new PermissionsApi() : this.permissions);
+        p.accessBusinessPortal = clearPermissions ?
+            false :
+            this.permissions.accessBusinessPortal;
+        p.accessEventLogs = this.permissions.accessEventLogs = clearPermissions ?
+            false :
+            this.permissions.accessEventLogs;
+        p.accessImportExport = clearPermissions ?
+            false :
+            this.permissions.accessImportExport;
+        p.accessReports = clearPermissions ?
+            false :
+            this.permissions.accessReports;
+        p.manageAllCollections = clearPermissions ?
+            false :
+            this.permissions.manageAllCollections;
+        p.manageAssignedCollections = clearPermissions ?
+            false :
+            this.permissions.manageAssignedCollections;
+        p.manageGroups = clearPermissions ?
+            false :
+            this.permissions.manageGroups;
+        p.manageSso = clearPermissions ?
+            false :
+            this.permissions.manageSso;
+        p.managePolicies = clearPermissions ?
+            false :
+            this.permissions.managePolicies;
+        p.manageUsers = clearPermissions ?
+            false :
+            this.permissions.manageUsers;
+        p.manageResetPassword = clearPermissions ?
+            false :
+            this.permissions.manageResetPassword;
         return p;
     }
 
@@ -202,4 +203,5 @@ export class UserAddEditComponent implements OnInit {
             this.onDeletedUser.emit();
         } catch { }
     }
+
 }

src/app/organizations/manage/user-confirm.component.html

@@ -1,6 +1,6 @@
 <div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+        <form class="modal-content" #form (ngSubmit)="submit()">
             <div class="modal-header">
                 <h2 class="modal-title" id="confirmUserTitle">
                     {{'confirmUser' | i18n}}

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

@@ -24,7 +24,6 @@ export class UserConfirmComponent implements OnInit {
     dontAskAgain = false;
     loading = true;
     fingerprint: string;
-    formPromise: Promise<any>;
 
     constructor(private cryptoService: CryptoService, private storageService: StorageService) { }
 

src/app/organizations/policies/base-policy.component.ts

@@ -1,63 +0,0 @@
-import {
-    Directive,
-    Input,
-    OnInit,
-} from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-
-import { Organization } from 'jslib-common/models/domain/organization';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
-
-import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
-
-export abstract class BasePolicy {
-    abstract name: string;
-    abstract description: string;
-    abstract type: PolicyType;
-    abstract component: any;
-
-    display(organization: Organization) {
-        return true;
-    }
-}
-
-@Directive()
-export abstract class BasePolicyComponent implements OnInit {
-    @Input() policyResponse: PolicyResponse;
-    @Input() policy: BasePolicy;
-
-    enabled = new FormControl(false);
-    data: FormGroup = null;
-
-    ngOnInit(): void {
-        this.enabled.setValue(this.policyResponse.enabled);
-
-        if (this.policyResponse.data != null) {
-            this.loadData();
-        }
-    }
-
-    loadData() {
-        this.data.patchValue(this.policyResponse.data ?? {});
-    }
-
-    buildRequestData() {
-        if (this.data != null) {
-            return this.data.value;
-        }
-
-        return null;
-    }
-
-    buildRequest(policiesEnabledMap: Map<PolicyType, boolean>) {
-        const request = new PolicyRequest();
-        request.enabled = this.enabled.value;
-        request.type = this.policy.type;
-        request.data = this.buildRequestData();
-
-        return Promise.resolve(request);
-    }
-}

src/app/organizations/policies/disable-send.component.html

@@ -1,10 +0,0 @@
-<app-callout type="warning">
-    {{'disableSendExemption' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/disable-send.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class DisableSendPolicy extends BasePolicy {
-    name = 'disableSend';
-    description = 'disableSendPolicyDesc';
-    type = PolicyType.DisableSend;
-    component = DisableSendPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-disable-send',
-    templateUrl: 'disable-send.component.html',
-})
-export class DisableSendPolicyComponent extends BasePolicyComponent {
-}

src/app/organizations/policies/master-password.component.html

@@ -1,42 +0,0 @@
-<div [formGroup]="data">
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-            <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-6 form-group">
-            <label for="minComplexity">{{'minComplexityScore' | i18n}}</label>
-            <select id="minComplexity" name="minComplexity" formControlName="minComplexity" class="form-control">
-                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
-            </select>
-        </div>
-        <div class="col-6 form-group">
-            <label for="minLength">{{'minLength' | i18n}}</label>
-            <input id="minLength" class="form-control" type="number" min="8" name="minLength"
-                formControlName="minLength">
-        </div>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="requireUpper" name="requireUpper"
-            formControlName="requireUpper">
-        <label class="form-check-label" for="requireUpper">A-Z</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="requireLower" name="requireLower"
-            formControlName="requireLower">
-        <label class="form-check-label" for="requireLower">a-z</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="requireNumbers" name="requireNumbers"
-            formControlName="requireNumbers">
-        <label class="form-check-label" for="requireNumbers">0-9</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="requireSpecial" name="requireSpecial"
-            formControlName="requireSpecial">
-        <label class="form-check-label" for="requireSpecial">!@#$%^&amp;*</label>
-    </div>
-</div>

src/app/organizations/policies/master-password.component.ts

@@ -1,46 +0,0 @@
-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 { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class MasterPasswordPolicy extends BasePolicy {
-    name = 'masterPass';
-    description = 'masterPassPolicyDesc';
-    type = PolicyType.MasterPassword;
-    component = MasterPasswordPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-master-password',
-    templateUrl: 'master-password.component.html',
-})
-export class MasterPasswordPolicyComponent extends BasePolicyComponent {
-
-    data = this.fb.group({
-        minComplexity: [null],
-        minLength: [null],
-        requireUpper: [null],
-        requireLower: [null],
-        requireNumbers: [null],
-        requireSpecial: [null],
-    });
-
-    passwordScores: { name: string; value: number; }[];
-
-    constructor(private fb: FormBuilder, i18nService: I18nService) {
-        super();
-
-        this.passwordScores = [
-            { name: '-- ' + i18nService.t('select') + ' --', value: null },
-            { name: i18nService.t('weak') + ' (0)', value: 0 },
-            { name: i18nService.t('weak') + ' (1)', value: 1 },
-            { name: i18nService.t('weak') + ' (2)', value: 2 },
-            { name: i18nService.t('good') + ' (3)', value: 3 },
-            { name: i18nService.t('strong') + ' (4)', value: 4 },
-        ];
-    }
-}

src/app/organizations/policies/password-generator.component.html

@@ -1,72 +0,0 @@
-<div [formGroup]="data">
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-            <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-6 form-group  mb-0">
-            <label for="defaultType">{{'defaultType' | i18n}}</label>
-            <select id="defaultType" name="defaultType" formControlName="defaultType" class="form-control">
-                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
-            </select>
-        </div>
-    </div>
-    <h3 class="mt-4">{{'password' | i18n}}</h3>
-    <div class="row">
-        <div class="col-6 form-group">
-            <label for="minLength">{{'minLength' | i18n}}</label>
-            <input id="minLength" class="form-control" type="number" name="minLength" min="5" max="128"
-                formControlName="minLength">
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-6 form-group">
-            <label for="minNumbers">{{'minNumbers' | i18n}}</label>
-            <input id="minNumbers" class="form-control" type="number" name="minNumbers" min="0" max="9"
-                formControlName="minNumbers">
-        </div>
-        <div class="col-6 form-group">
-            <label for="minSpecial">{{'minSpecial' | i18n}}</label>
-            <input id="minSpecial" class="form-control" type="number" name="minSpecial" min="0" max="9"
-                formControlName="minSpecial">
-        </div>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="useUpper"
-        formControlName="useUpper" name="useUpper">
-        <label class="form-check-label" for="useUpper">A-Z</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="useLower" name="useLower" formControlName="useLower">
-        <label class="form-check-label" for="useLower">a-z</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="useNumbers" name="useNumbers" formControlName="useNumbers">
-        <label class="form-check-label" for="useNumbers">0-9</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="useSpecial" name="useSpecial" formControlName="useSpecial">
-        <label class="form-check-label" for="useSpecial">!@#$%^&amp;*</label>
-    </div>
-    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
-    <div class="row">
-        <div class="col-6 form-group">
-            <label for="minNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
-            <input id="minNumberWords" class="form-control" type="number" name="minNumberWords" min="3" max="20"
-                formControlName="minNumberWords">
-        </div>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="capitalize" name="capitalize"
-            formControlName="capitalize">
-        <label class="form-check-label" for="capitalize">{{'capitalize' | i18n}}</label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="includeNumber" name="includeNumber"
-            formControlName="includeNumber">
-        <label class="form-check-label" for="includeNumber">{{'includeNumber' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/password-generator.component.ts

@@ -1,48 +0,0 @@
-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 { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class PasswordGeneratorPolicy extends BasePolicy {
-    name = 'passwordGenerator';
-    description = 'passwordGeneratorPolicyDesc';
-    type = PolicyType.PasswordGenerator;
-    component = PasswordGeneratorPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-password-generator',
-    templateUrl: 'password-generator.component.html',
-})
-export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
-
-    data = this.fb.group({
-        defaultType: [null],
-        minLength: [null],
-        useUpper: [null],
-        useLower: [null],
-        useNumbers: [null],
-        useSpecial: [null],
-        minNumbers: [null],
-        minSpecial: [null],
-        minNumberWords: [null],
-        capitalize: [null],
-        includeNumber: [null],
-    });
-
-    defaultTypes: { name: string; value: string; }[];
-
-    constructor(private fb: FormBuilder, i18nService: I18nService) {
-        super();
-
-        this.defaultTypes = [
-            { name: i18nService.t('userPreference'), value: null },
-            { name: i18nService.t('password'), value: 'password' },
-            { name: i18nService.t('passphrase'), value: 'passphrase' },
-        ];
-    }
-}

src/app/organizations/policies/personal-ownership.component.html

@@ -1,10 +0,0 @@
-<app-callout type="warning">
-    {{'personalOwnershipExemption' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'personalOwnershipCheckboxDesc' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/personal-ownership.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class PersonalOwnershipPolicy extends BasePolicy {
-    name = 'personalOwnership';
-    description = 'personalOwnershipPolicyDesc';
-    type = PolicyType.PersonalOwnership;
-    component = PersonalOwnershipPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-personal-ownership',
-    templateUrl: 'personal-ownership.component.html',
-})
-export class PersonalOwnershipPolicyComponent extends BasePolicyComponent {
-}

src/app/organizations/policies/require-sso.component.html

@@ -1,13 +0,0 @@
-<app-callout type="tip" title="{{'prerequisite' | i18n}}">
-    {{'requireSsoPolicyReq' | i18n}}
-</app-callout>
-<app-callout type="warning">
-    {{'requireSsoExemption' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/require-sso.component.ts

@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { Organization } from 'jslib-common/models/domain/organization';
-import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class RequireSsoPolicy extends BasePolicy {
-    name = 'requireSso';
-    description = 'requireSsoPolicyDesc';
-    type = PolicyType.RequireSso;
-    component = RequireSsoPolicyComponent;
-
-    display(organization: Organization) {
-        return organization.useSso;
-    }
-}
-
-@Component({
-    selector: 'policy-require-sso',
-    templateUrl: 'require-sso.component.html',
-})
-export class RequireSsoPolicyComponent extends BasePolicyComponent {
-    constructor(private i18nService: I18nService) {
-        super();
-    }
-
-    buildRequest(policiesEnabledMap: Map<PolicyType, boolean>): Promise<PolicyRequest> {
-        const singleOrgEnabled = policiesEnabledMap.get(PolicyType.SingleOrg) ?? false;
-        if (this.enabled.value && !singleOrgEnabled) {
-            throw new Error(this.i18nService.t('requireSsoPolicyReqError'));
-        }
-
-        return super.buildRequest(policiesEnabledMap);
-    }
-}

src/app/organizations/policies/reset-password.component.html

@@ -1,25 +0,0 @@
-<app-callout type="warning">
-    {{'resetPasswordPolicyWarning' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>
-
-<div [formGroup]="data">
-    <h3 class="mt-4">{{'resetPasswordPolicyAutoEnroll' | i18n}}</h3>
-    <p>{{'resetPasswordPolicyAutoEnrollDescription' | i18n}}</p>
-    <app-callout type="warning">
-        {{'resetPasswordPolicyAutoEnrollWarning' | i18n}}
-    </app-callout>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="autoEnrollEnabled" name="AutoEnrollEnabled"
-            formControlName="autoEnrollEnabled">
-        <label class="form-check-label" for="autoEnrollEnabled">
-            {{'resetPasswordPolicyAutoEnrollCheckbox' | i18n }}
-        </label>
-    </div>
-</div>

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

@@ -1,36 +0,0 @@
-import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { Organization } from 'jslib-common/models/domain/organization';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class ResetPasswordPolicy extends BasePolicy {
-    name = 'resetPasswordPolicy';
-    description = 'resetPasswordPolicyDescription';
-    type = PolicyType.ResetPassword;
-    component = ResetPasswordPolicyComponent;
-
-    display(organization: Organization) {
-        return organization.useResetPassword;
-    }
-}
-
-@Component({
-    selector: 'policy-reset-password',
-    templateUrl: 'reset-password.component.html',
-})
-export class ResetPasswordPolicyComponent extends BasePolicyComponent {
-
-    data = this.fb.group({
-        autoEnrollEnabled: false,
-    });
-
-    defaultTypes: { name: string; value: string; }[];
-
-    constructor(private fb: FormBuilder) {
-        super();
-    }
-}

src/app/organizations/policies/send-options.component.html

@@ -1,19 +0,0 @@
-<app-callout type="warning">
-    {{'sendOptionsExemption' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>
-
-<div [formGroup]="data">
-    <h3 class="mt-4">{{'options' | i18n}}</h3>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="disableHideEmail" name="DisableHideEmail"
-            formControlName="disableHideEmail">
-        <label class="form-check-label" for="disableHideEmail">{{'disableHideEmail' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/send-options.component.ts

@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class SendOptionsPolicy extends BasePolicy {
-    name = 'sendOptions';
-    description = 'sendOptionsPolicyDesc';
-    type = PolicyType.SendOptions;
-    component = SendOptionsPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-send-options',
-    templateUrl: 'send-options.component.html',
-})
-export class SendOptionsPolicyComponent extends BasePolicyComponent {
-
-    data = this.fb.group({
-        disableHideEmail: false,
-    });
-
-    constructor(private fb: FormBuilder) {
-        super();
-    }
-}

src/app/organizations/policies/single-org.component.html

@@ -1,10 +0,0 @@
-<app-callout type="warning">
-    {{'singleOrgPolicyWarning' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/single-org.component.ts

@@ -1,41 +0,0 @@
-import { Component } from '@angular/core';
-
-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 } from './base-policy.component';
-
-export class SingleOrgPolicy extends BasePolicy {
-    name = 'singleOrg';
-    description = 'singleOrgDesc';
-    type = PolicyType.SingleOrg;
-    component = SingleOrgPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-single-org',
-    templateUrl: 'single-org.component.html',
-})
-export class SingleOrgPolicyComponent extends BasePolicyComponent {
-
-    constructor(private i18nService: I18nService) {
-        super();
-    }
-
-    buildRequest(policiesEnabledMap: Map<PolicyType, boolean>): Promise<PolicyRequest> {
-        if (!this.enabled.value) {
-            if (policiesEnabledMap.get(PolicyType.RequireSso) ?? false) {
-                throw new Error(this.i18nService.t('disableRequiredError', this.i18nService.t('requireSso')));
-            }
-
-            if (policiesEnabledMap.get(PolicyType.MaximumVaultTimeout) ?? false) {
-                throw new Error(this.i18nService.t('disableRequiredError', this.i18nService.t('maximumVaultTimeoutLabel')));
-            }
-        }
-
-        return super.buildRequest(policiesEnabledMap);
-    }
-}

src/app/organizations/policies/two-factor-authentication.component.html

@@ -1,10 +0,0 @@
-<app-callout type="warning">
-    {{'twoStepLoginPolicyWarning' | i18n}}
-</app-callout>
-
-<div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
-</div>

src/app/organizations/policies/two-factor-authentication.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { PolicyType } from 'jslib-common/enums/policyType';
-
-import { BasePolicy, BasePolicyComponent } from './base-policy.component';
-
-export class TwoFactorAuthenticationPolicy extends BasePolicy {
-    name = 'twoStepLogin';
-    description = 'twoStepLoginPolicyDesc';
-    type = PolicyType.TwoFactorAuthentication;
-    component = TwoFactorAuthenticationPolicyComponent;
-}
-
-@Component({
-    selector: 'policy-two-factor-authentication',
-    templateUrl: 'two-factor-authentication.component.html',
-})
-export class TwoFactorAuthenticationPolicyComponent extends BasePolicyComponent {
-}

src/app/organizations/settings/account.component.ts

@@ -1,5 +1,6 @@
 import {
     Component,
+    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -7,7 +8,6 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
-import { ModalService } from 'jslib-angular/services/modal.service';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@@ -20,6 +20,8 @@ import { OrganizationUpdateRequest } from 'jslib-common/models/request/organizat
 
 import { OrganizationResponse } from 'jslib-common/models/response/organizationResponse';
 
+import { ModalComponent } from '../../modal.component';
+
 import { ApiKeyComponent } from '../../settings/api-key.component';
 import { PurgeVaultComponent } from '../../settings/purge-vault.component';
 import { TaxInfoComponent } from '../../settings/tax-info.component';
@@ -45,8 +47,9 @@ export class AccountComponent {
     taxFormPromise: Promise<any>;
 
     private organizationId: string;
+    private modal: ModalComponent = null;
 
-    constructor(private modalService: ModalService,
+    constructor(private componentFactoryResolver: ComponentFactoryResolver,
         private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private route: ActivatedRoute,
         private syncService: SyncService, private platformUtilsService: PlatformUtilsService,
@@ -93,42 +96,79 @@ export class AccountComponent {
         this.toasterService.popAsync('success', null, this.i18nService.t('taxInfoUpdated'));
     }
 
-    async deleteOrganization() {
-        await this.modalService.openViewRef(DeleteOrganizationComponent, this.deleteModalRef, comp => {
-            comp.organizationId = this.organizationId;
+    deleteOrganization() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.deleteModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<DeleteOrganizationComponent>(
+            DeleteOrganizationComponent, this.deleteModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
         });
     }
 
-    async purgeVault() {
-        await this.modalService.openViewRef(PurgeVaultComponent, this.purgeModalRef, comp => {
-            comp.organizationId = this.organizationId;
+    purgeVault() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.purgeModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PurgeVaultComponent>(PurgeVaultComponent, this.purgeModalRef);
+        childComponent.organizationId = this.organizationId;
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
         });
     }
 
-    async viewApiKey() {
-        await this.modalService.openViewRef(ApiKeyComponent, this.apiKeyModalRef, comp => {
-            comp.keyType = 'organization';
-            comp.entityId = this.organizationId;
-            comp.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
-            comp.scope = 'api.organization';
-            comp.grantType = 'client_credentials';
-            comp.apiKeyTitle = 'apiKey';
-            comp.apiKeyWarning = 'apiKeyWarning';
-            comp.apiKeyDescription = 'apiKeyDesc';
+    viewApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.apiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
+        childComponent.keyType = 'organization';
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
         });
     }
 
-    async rotateApiKey() {
-        await this.modalService.openViewRef(ApiKeyComponent, this.rotateApiKeyModalRef, comp => {
-            comp.keyType = 'organization';
-            comp.isRotation = true;
-            comp.entityId = this.organizationId;
-            comp.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
-            comp.scope = 'api.organization';
-            comp.grantType = 'client_credentials';
-            comp.apiKeyTitle = 'apiKey';
-            comp.apiKeyWarning = 'apiKeyWarning';
-            comp.apiKeyDescription = 'apiKeyRotateDesc';
+    rotateApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateApiKeyModalRef);
+        childComponent.keyType = 'organization';
+        childComponent.isRotation = true;
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
         });
     }
 }