Remove old 'release' ref in workflow (#1328)

(cherry picked from commit 75984a2e37)

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,14 @@
+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/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,32 @@
+## Type of change
+- [ ] Bug fix
+- [ ] New feature development
+- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
+- [ ] Build/deploy pipeline (DevOps)
+- [ ] Other
+
+## Objective
+<!--Describe what the purpose of this PR is. For example: what bug you're fixing or what new feature you're adding-->
+
+
+
+## Code changes
+<!--Explain the changes you've made to each file or major component. This should help the reviewer understand your changes-->
+<!--Also refer to any related changes or PRs in other repositories-->
+
+* **file.ext:** Description of what was changed and why
+
+## Screenshots
+<!--Required for any UI changes. Delete if not applicable-->
+
+
+
+## Testing requirements
+<!--What functionality requires testing by QA? This includes testing new behavior and regression testing-->
+
+
+
+## Before you submit
+- [ ] I have checked for **linting** errors (`npm run lint`) (required)
+- [ ] This change requires a **documentation update** (notify the documentation team)
+- [ ] This change has particular **deployment requirements** (notify the DevOps team)

.github/workflows/build.yml

@@ -1,3 +1,4 @@
+---
 name: Build
 
 on:
@@ -14,7 +15,7 @@ on:
 jobs:
   cloc:
     name: CLOC
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
@@ -28,9 +29,27 @@ jobs:
         run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
 
 
-  build-selfhost:
-    name: Build SelfHost Docker image
-    runs-on: ubuntu-latest
+  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
@@ -43,10 +62,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 }}-${{ github.run_id }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
         run: |
@@ -58,39 +77,117 @@ jobs:
           echo "GitHub ref: $GITHUB_REF"
           echo "GitHub event: $GITHUB_EVENT"
 
-      - name: Login to Azure
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
-        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
-        with:
-          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - 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: Install dependencies
+        run: npm ci
 
-      - 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'
+      - name: Build OSS selfhost
         run: |
-          mkdir -p ~/.docker/trust/private
+          npm run dist:oss:selfhost
+          zip -r web-$_VERSION-selfhosted-open-source.zip build
 
-          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: 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:
+    name: Build SelfHost Docker image
+    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: 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
+        with:
+          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+          azure-keyvault-name: "bitwarden-prod-kv"
 
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
@@ -99,15 +196,26 @@ jobs:
         run: dotnet tool restore
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - 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 .
@@ -120,32 +228,43 @@ 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'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
         run: docker images
 
-      - name: Push rc images
+      - name: Push rc image
         if: github.ref == 'refs/heads/rc'
         run: docker push bitwarden/web:rc
-        env: 
+        env:
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
-      - name: Push dev images
+      - name: Push dev image
         if: github.ref == 'refs/heads/master'
         run: docker push bitwarden/web:dev
-        env: 
+        env:
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+          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 }}
 
       - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
         run: docker logout
 
 
   build-qa:
-    name: Build QA Docker image
-    runs-on: ubuntu-latest
+    name: Build Docker images for QA environment
+    runs-on: ubuntu-20.04
     steps:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
@@ -158,10 +277,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 }}-${{ github.run_id }}-npm-${{ hashFiles('**/package-lock.json') }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
         run: |
@@ -195,26 +314,32 @@ jobs:
           echo -e "# Building Web\n"
           echo "Building app"
           echo "npm version $(npm --version)"
-          npm run build:qa
+          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
 
           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.events.inputs.custom_tag_extension }}
+          TAG_EXTENSION=${{ github.event.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
@@ -226,7 +351,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
@@ -239,7 +364,7 @@ jobs:
 
   windows:
     name: Test code on Windows
-    runs-on: windows-latest
+    runs-on: windows-2019
     steps:
       - name: Set up NuGet
         uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
@@ -249,6 +374,13 @@ 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:
@@ -274,9 +406,117 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: npm install
-        run: npm install
+      - name: Install dependencies
+        run: npm ci
 
-      - name: npm build
-        run: npm run build:prod
+      - name: NPM install
+        run: npm ci
 
+      - name: NPM build
+        run: npm run build:bit:cloud
+
+
+  crowdin-push:
+    name: Crowdin Push
+    if: github.ref == 'refs/heads/master'
+    needs:
+      - build-oss-selfhost
+      - build-cloud
+      - build-commercial-selfhost
+      - build-qa
+    runs-on: ubuntu-20.04
+    env:
+      _CROWDIN_PROJECT_ID: "308189"
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+
+      - name: Login to Azure
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "crowdin-api-token"
+
+      - name: Upload Sources
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        env:
+          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: true
+          upload_translations: false
+
+
+  check-failures:
+    name: Check for failures
+    if: always()
+    runs-on: ubuntu-20.04
+    needs:
+      - cloc
+      - setup
+      - build-oss-selfhost
+      - build-cloud
+      - build-commercial-selfhost
+      - build-qa
+      - crowdin-push
+      - windows
+    steps:
+      - name: Check if any job failed
+        if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
+        env:
+          CLOC_STATUS: ${{ needs.cloc.result }}
+          SETUP_STATUS: ${{ needs.setup.result }}
+          BUILD_OSS_SELFHOST_STATUS: ${{ needs.build-oss-selfhost.result }}
+          BUILD_CLOUD_STATUS: ${{ needs.build-cloud.result }}
+          BUILD_COMMERCIAL_SELFHOST_STATUS: ${{ needs.build-commercial-selfhost.result }}
+          BUILD_QA_STATUS: ${{ needs.build-qa.result }}
+          CROWDIN_PUSH_STATUS: ${{ needs.crowdin-push.result }}
+          WINDOWS_STATUS: ${{ needs.windows.result }}
+        run: |
+          if [ "$CLOC_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$SETUP_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_OSS_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_CLOUD_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_COMMERCIAL_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_QA_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$CROWDIN_PUSH_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$WINDOWS_STATUS" = "failure" ]; then
+              exit 1
+          fi
+
+      - name: Login to Azure - Prod Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        if: failure()
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        if: failure()
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "devops-alerts-slack-webhook-url"
+
+      - name: Notify Slack on failure
+        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522  # v1.2.2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}
+        with:
+          status: ${{ job.status }}

.github/workflows/crowdin-pull.yml

@@ -0,0 +1,49 @@
+---
+name: Crowdin Pull
+
+on:
+  workflow_dispatch:
+    inputs: {}
+  schedule:
+    - cron: '0 0 * * 5'
+
+jobs:
+  crowdin-pull:
+    name: Pull
+    runs-on: ubuntu-20.04
+    env:
+      _CROWDIN_PROJECT_ID: "308189"
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+
+      - name: Login to Azure
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "crowdin-api-token"
+
+      - name: Download translations
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        env:
+          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"

.github/workflows/crowdin-sync.yml

@@ -1,133 +0,0 @@
-name: Crowdin Sync
-
-on:
-  workflow_dispatch:
-    inputs: {}
-  #schedule:
-  #  - cron: '0 0 * * *'
-
-jobs:
-  crowdin-sync:
-    name: Autosync
-    runs-on: ubuntu-20.04
-    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:
-          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-
-      - name: Retrieve secrets
-        id: retrieve-secrets
-        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
-        with:
-          keyvault: "bitwarden-prod-kv"
-          secrets: "crowdin-api-token"
-
-      - 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 }}
-        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

@@ -1,73 +0,0 @@
-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,6 +1,7 @@
+---
 name: QA Deploy
 
-on: 
+on:
   workflow_dispatch:
     inputs:
       image_extension:
@@ -8,18 +9,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-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
 
       - name: Setup
         run:
@@ -49,22 +50,23 @@ 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.events.inputs.image_extension }}
+          TAG_EXTENSION=${{ github.event.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 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 restart -n $_QA_K8S_NAMESPACE deployment/web
+          kubectl rollout status deployment/web -n $_QA_K8S_NAMESPACE

.github/workflows/release.yml

@@ -1,25 +1,24 @@
+---
 name: Release
 
 on:
   workflow_dispatch:
-    inputs:
-      release_tag_name_input:
-        description: "Release Tag Name <X.X.X>"
-        required: true
+    inputs: {}
 
 jobs:
   setup:
-    runs-on: ubuntu-latest
+    name: Setup
+    runs-on: ubuntu-20.04
     outputs:
-      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 }}
+      release_version: ${{ steps.version.outputs.package }}
+      tag_version: ${{ steps.version.outputs.tag }}
+      branch-name: ${{ steps.branch.outputs.branch-name }}
     steps:
       - name: Branch check
         run: |
-          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix" ]]; then
             echo "==================================="
-            echo "[!] Can only release from rc branch"
+            echo "[!] Can only release from the 'rc' or 'hotfix' branches"
             echo "==================================="
             exit 1
           fi
@@ -27,131 +26,167 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
 
-      - name: Create Release Vars
-        id: create_tags
+      - name: Check Release Version
+        id: version
         run: |
-          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 }}
+          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"
+          )
 
-      - 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
+          if [ "v$version" == "$previous_release_tag_version" ]; then
+            echo "[!] Already released v$version. Please bump version to continue"
+            exit 1
+          fi
 
-  ubuntu:
-    runs-on: ubuntu-latest
+          echo "::set-output name=package::$version"
+          echo "::set-output name=tag::v$version"
+
+      - name: Get branch name
+        id: branch
+        run: |
+          BRANCH_NAME=$(basename ${{ github.ref }})
+          echo "::set-output name=branch-name::$BRANCH_NAME"
+
+
+  self-host:
+    name: Release self-host docker
+    runs-on: ubuntu-20.04
     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: Login to Azure
-        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+      - name: Setup DCT
+        id: setup-dct
+        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
         with:
-          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 }}
+          azure-creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+          azure-keyvault-name: "bitwarden-prod-kv"
 
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Restore
-        run: dotnet tool restore
-
-      - name: 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: Pull latest selfhost Release image
+        run: docker pull bitwarden/web:latest
 
       - name: Tag version
-        run: docker tag bitwarden/web bitwarden/web:$RELEASE_VERSION
+        run: |
+          docker tag bitwarden/web:latest bitwarden/web:$_RELEASE_VERSION
 
       - name: List Docker images
         run: docker images
 
-      - 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
+      - name: Push images
+        run: |
+          docker push bitwarden/web:$_RELEASE_VERSION
         env:
           DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-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
+
+      - 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: ${{ needs.setup.outputs.branch-name }}
+          artifacts: web-*-cloud-COMMERCIAL.zip
+
+      # This should result in a build directory in the current working directory
+      - name: Unzip build asset
+        run: unzip web-*-cloud-COMMERCIAL.zip
+
+      - name: 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: ${{ needs.setup.outputs.branch-name }}
+          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 }}
+          draft: true

.gitignore

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

ISSUE_TEMPLATE.md

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

bitwarden_license/src/app/app.component.ts

@@ -0,0 +1,22 @@
+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,27 +3,41 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } 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

@@ -0,0 +1,363 @@
+<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" ngNativeValidate>
+    <p>
+        {{'ssoPolicyHelpStart' | i18n}}
+        <a routerLink="../policies">{{'ssoPolicyHelpLink' | i18n}}</a>
+        {{'ssoPolicyHelpEnd' | i18n}}
+        <br>
+        {{'ssoPolicyHelpKeyConnector' | i18n}}
+    </p>
+    
+    <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">{{'allowSso' | i18n}}</label>
+        </div>
+        <small class="form-text text-muted">{{'allowSsoDesc' | i18n}}</small>
+    </div>
+
+    <div class="form-group">
+        <label>{{'memberDecryptionOption' | i18n}}</label>
+        <div class="form-check form-check-block">
+            <input class="form-check-input" type="radio" id="memberDecryptionPass" [value]="false" formControlName="keyConnectorEnabled">
+            <label class="form-check-label" for="memberDecryptionPass">
+                {{'masterPass' | i18n}}
+                <small>{{'memberDecryptionPassDesc' | i18n}}</small>
+            </label>
+        </div>
+        <div class="form-check mt-2 form-check-block">
+            <input class="form-check-input" type="radio" id="memberDecryptionKey" [value]="true" formControlName="keyConnectorEnabled"
+                [attr.disabled]="!organization.useKeyConnector || null">
+            <label class="form-check-label" for="memberDecryptionKey">
+                {{'keyConnector' | i18n}}
+                <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                    href="https://bitwarden.com/help/article/about-key-connector/">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                </a>
+                <small>{{'memberDecryptionKeyConnectorDesc' | i18n}}</small>
+            </label>
+        </div>
+    </div>
+
+    <ng-container *ngIf="data.value.keyConnectorEnabled">
+        <app-callout type="warning" [useAlertRole]="true">
+            {{'keyConnectorWarning' | i18n}}
+        </app-callout>
+    
+        <div class="form-group">
+            <label for="keyConnectorUrl">{{'keyConnectorUrl' | i18n}}</label>
+            <div class="input-group">
+                <input class="form-control" formControlName="keyConnectorUrl" id="keyConnectorUrl" required>
+                <div class="input-group-append">
+                    <button type="button" class="btn btn-outline-secondary" (click)="validateKeyConnectorUrl()"
+                        [disabled]="!enableTestKeyConnector">
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"
+                            *ngIf="keyConnectorUrl.pending"></i>
+                        <span *ngIf="!keyConnectorUrl.pending">
+                            {{'keyConnectorTest' | i18n}}
+                        </span>
+                    </button>
+                </div>
+            </div>
+            <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
+                <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
+                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+                    {{'keyConnectorTestFail' | i18n}}
+                </div>
+                <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
+                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+                    {{'keyConnectorTestSuccess' | i18n}}
+                </div>
+            </ng-container>
+        </div>
+    </ng-container>
+
+    <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 for="authority">{{'authority' | i18n}}</label>
+                <input class="form-control" formControlName="authority" id="authority">
+            </div>
+            <div class="form-group">
+                <label for="clientId">{{'clientId' | i18n}}</label>
+                <input class="form-control" formControlName="clientId" id="clientId">
+            </div>
+            <div class="form-group">
+                <label for="clientSecret">{{'clientSecret' | i18n}}</label>
+                <input class="form-control" formControlName="clientSecret" id="clientSecret">
+            </div>
+            <div class="form-group">
+                <label for="metadataAddress">{{'metadataAddress' | i18n}}</label>
+                <input class="form-control" formControlName="metadataAddress" id="metadataAddress">
+            </div>
+            <div class="form-group">
+                <label for="redirectBehavior">{{'oidcRedirectBehavior' | i18n}}</label>
+                <select class="form-control" formControlName="redirectBehavior" id="redirectBehavior">
+                    <option 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 for="additionalScopes">{{'additionalScopes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalScopes" id="additionalScopes">
+            </div>
+            <div class="form-group">
+                <label for="additionalUserIdClaimTypes">{{'additionalUserIdClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalUserIdClaimTypes"
+                    id="additionalUserIdClaimTypes">
+            </div>
+            <div class="form-group">
+                <label for="additionalEmailClaimTypes">{{'additionalEmailClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalEmailClaimTypes"
+                    id="additionalEmailClaimTypes">
+            </div>
+            <div class="form-group">
+                <label for="additionalNameClaimTypes">{{'additionalNameClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalNameClaimTypes"
+                    id="additionalNameClaimTypes">
+            </div>
+            <div class="form-group">
+                <label for="acrValues">{{'acrValues' | i18n}}</label>
+                <input class="form-control" formControlName="acrValues" id="acrValues">
+            </div>
+            <div class="form-group">
+                <label for="expectedReturnAcrValue">{{'expectedReturnAcrValue' | i18n}}</label>
+                <input class="form-control" formControlName="expectedReturnAcrValue" id="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 for="spNameIdFormat">{{'spNameIdFormat' | i18n}}</label>
+                <select class="form-control" formControlName="spNameIdFormat" id="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 for="spOutboundSigningAlgorithm">{{'spOutboundSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="spOutboundSigningAlgorithm"
+                    id="spOutboundSigningAlgorithm">
+                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="spSigningBehavior">{{'spSigningBehavior' | i18n}}</label>
+                <select class="form-control" formControlName="spSigningBehavior" id="spSigningBehavior">
+                    <option value="0">If IdP Wants Authn Requests Signed</option>
+                    <option value="1">Always</option>
+                    <option value="3">Never</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="spMinIncomingSigningAlgorithm">{{'spMinIncomingSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="spMinIncomingSigningAlgorithm"
+                    id="spMinIncomingSigningAlgorithm">
+                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="spWantAssertionsSigned"
+                        formControlName="spWantAssertionsSigned">
+                    <label class="form-check-label" for="spWantAssertionsSigned">
+                        {{'spWantAssertionsSigned' | i18n}}
+                    </label>
+                </div>
+            </div>
+            <div class="form-group">
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="spValidateCertificates"
+                        formControlName="spValidateCertificates">
+                    <label class="form-check-label" for="spValidateCertificates">
+                        {{'spValidateCertificates' | i18n}}
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- SAML2 IDP -->
+        <div class="config-section">
+            <h2>{{'samlIdpConfig' | i18n}}</h2>
+
+            <div class="form-group">
+                <label for="idpEntityId">{{'idpEntityId' | i18n}}</label>
+                <input class="form-control" formControlName="idpEntityId" id="idpEntityId">
+            </div>
+            <div class="form-group">
+                <label for="idpBindingType">{{'idpBindingType' | i18n}}</label>
+                <select class="form-control" formControlName="idpBindingType" id="idpBindingType">
+                    <option value="1">Redirect</option>
+                    <option value="2">HTTP POST</option>
+                    <option value="4">Artifact</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="idpSingleSignOnServiceUrl">{{'idpSingleSignOnServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="idpSingleSignOnServiceUrl" id="idpSingleSignOnServiceUrl">
+            </div>
+            <div class="form-group">
+                <label for="idpSingleLogoutServiceUrl">{{'idpSingleLogoutServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="idpSingleLogoutServiceUrl" id="idpSingleLogoutServiceUrl">
+            </div>
+            <div class="form-group">
+                <label for="idpArtifactResolutionServiceUrl">{{'idpArtifactResolutionServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="idpArtifactResolutionServiceUrl"
+                    id="idpArtifactResolutionServiceUrl">
+            </div>
+            <div class="form-group">
+                <label for="idpX509PublicCert">{{'idpX509PublicCert' | i18n}}</label>
+                <textarea formControlName="idpX509PublicCert" class="form-control form-control-sm text-monospace"
+                    rows="6" id="idpX509PublicCert"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="idpOutboundSigningAlgorithm">{{'idpOutboundSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="idpOutboundSigningAlgorithm"
+                    id="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

@@ -0,0 +1,180 @@
+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 { UserService } from 'jslib-common/abstractions/user.service';
+
+import { Organization } from 'jslib-common/models/domain/organization';
+
+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;
+    organization: Organization;
+    formPromise: Promise<any>;
+
+    callbackPath: string;
+    signedOutCallbackPath: string;
+    spEntityId: string;
+    spMetadataUrl: string;
+    spAcsUrl: string;
+
+    enabled = this.fb.control(false);
+    data = this.fb.group({
+        configType: [],
+
+        keyConnectorEnabled: [],
+        keyConnectorUrl: [],
+
+        // 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,
+        private userService: UserService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async params => {
+            this.organizationId = params.organizationId;
+            await this.load();
+        });
+    }
+
+    async load() {
+        this.organization = await this.userService.getOrganization(this.organizationId);
+        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.keyConnectorUrl.markAsDirty();
+
+        this.loading = false;
+    }
+
+    copy(value: string) {
+        this.platformUtilsService.copyToClipboard(value);
+    }
+
+    launchUri(url: string) {
+        this.platformUtilsService.launchUri(url);
+    }
+
+    async submit() {
+        this.formPromise = this.postData();
+
+        try {
+            const response = await this.formPromise;
+
+            this.data.patchValue(response.data);
+            this.enabled.setValue(response.enabled);
+
+            this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
+        } catch {
+            // Logged by appApiAction, do nothing
+        }
+
+        this.formPromise = null;
+    }
+
+    async postData() {
+        if (this.data.get('keyConnectorEnabled').value) {
+            await this.validateKeyConnectorUrl();
+
+            if (this.keyConnectorUrl.hasError('invalidUrl')) {
+                throw new Error(this.i18nService.t('keyConnectorTestFail'));
+            }
+        }
+
+        const request = new OrganizationSsoRequest();
+        request.enabled = this.enabled.value;
+        request.data = this.data.value;
+
+        return this.apiService.postOrganizationSso(this.organizationId, request);
+    }
+
+    async validateKeyConnectorUrl() {
+        if (this.keyConnectorUrl.pristine) {
+            return;
+        }
+
+        this.keyConnectorUrl.markAsPending();
+
+        try {
+            await this.apiService.getKeyConnectorAlive(this.keyConnectorUrl.value);
+            this.keyConnectorUrl.updateValueAndValidity();
+        } catch {
+            this.keyConnectorUrl.setErrors({
+                invalidUrl: true,
+            });
+        }
+
+        this.keyConnectorUrl.markAsPristine();
+    }
+
+    get enableTestKeyConnector() {
+        return this.data.get('keyConnectorEnabled').value &&
+            this.keyConnectorUrl != null &&
+            this.keyConnectorUrl.value !== '';
+    }
+
+    get keyConnectorUrl() {
+        return this.data.get('keyConnectorUrl');
+    }
+}

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,70 @@
+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/add-organization.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="addTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="addTitle">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">

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

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -8,6 +7,8 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
@@ -15,17 +16,16 @@ 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 { ValidationService } from 'jslib-angular/services/validation.service';
-
+import { Organization } from 'jslib-common/models/domain/organization';
 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';
 
@@ -49,7 +49,6 @@ export class ClientsComponent implements OnInit {
 
     clients: ProviderOrganizationOrganizationDetailsResponse[];
     pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
-    modal: ModalComponent;
 
     protected didScroll = false;
     protected pageSize = 100;
@@ -60,8 +59,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 componentFactoryResolver: ComponentFactoryResolver,
-        private logService: LogService) { }
+        private providerService: ProviderService, private logService: LogService,
+        private modalService: ModalService) { }
 
     async ngOnInit() {
         this.route.parent.params.subscribe(async params => {
@@ -69,11 +68,8 @@ export class ClientsComponent implements OnInit {
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
@@ -82,13 +78,13 @@ export class ClientsComponent implements OnInit {
         const response = await this.apiService.getProviderClients(this.providerId);
         this.clients = response.data != null && response.data.length > 0 ? response.data : [];
         this.manageOrganizations = (await this.userService.getProvider(this.providerId)).type === ProviderUserType.ProviderAdmin;
-        const candidateOrgs = (await this.userService.getAllOrganizations()).filter(o => o.providerId == null);
+        const candidateOrgs = (await this.userService.getAllOrganizations()).filter(o => o.isOwner && o.providerId == null);
         const allowedOrgsIds = await Promise.all(candidateOrgs.map(o => this.apiService.getOrganization(o.id))).then(orgs =>
             orgs.filter(o => !DisallowedPlanTypes.includes(o.planType))
                 .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;
     }
 
@@ -126,24 +122,18 @@ export class ClientsComponent implements OnInit {
         this.didScroll = this.pagedClients.length > this.pageSize;
     }
 
-    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;
+    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}`);
+                }
+            });
         });
     }
 

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 src="/src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" 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,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef
@@ -8,6 +7,8 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
@@ -17,6 +18,7 @@ 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,7 +35,6 @@ 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';
@@ -59,13 +60,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
     accessEvents = false;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
+        i18nService: I18nService, modalService: ModalService,
         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, componentFactoryResolver, logService, searchPipe, userNamePipe);
+            storageService, validationService, modalService, logService, searchPipe, userNamePipe);
     }
 
     ngOnInit() {
@@ -82,7 +83,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -90,9 +91,6 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
@@ -117,51 +115,29 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
         await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
     }
 
-    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 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);
+            });
         });
     }
 
     async events(user: ProviderUserUserDetailsResponse) {
-        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;
+        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';
         });
     }
 
@@ -170,21 +146,13 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        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;
+        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
+            comp.providerId = this.providerId;
+            comp.users = this.getCheckedUsers();
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async bulkReinvite() {
@@ -216,49 +184,34 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             return;
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        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;
+        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
+            comp.providerId = this.providerId;
+            comp.users = this.getCheckedUsers();
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     private async showBulkStatus(users: ProviderUserUserDetailsResponse[], filteredUsers: ProviderUserUserDetailsResponse[],
         request: Promise<ListResponse<ProviderUserBulkResponse>>, successfullMessage: string) {
 
-        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;
+        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
+            comp.loading = true;
+        });
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        this.modal.onShown.subscribe(() => {
+        modal.onShown.subscribe(() => {
             if (close) {
-                this.modal.close();
+                modal.close();
             }
         });
 
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
         try {
             const response = await request;
 
-            if (this.modal) {
+            if (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 }), {});
 
@@ -278,9 +231,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
             }
         } catch {
             close = true;
-            if (this.modal) {
-                this.modal.close();
-            }
+            modal.close();
         }
     }
 }

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">

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

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { ProviderUserInviteRequest } from 'jslib-common/models/request/provider/providerUserInviteRequest';
@@ -43,7 +44,8 @@ export class UserAddEditComponent implements OnInit {
     userType = ProviderUserType;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService) { }
+        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.providerUserId != null;
@@ -54,7 +56,9 @@ export class UserAddEditComponent implements OnInit {
             try {
                 const user = await this.apiService.getProviderUser(this.providerId, this.providerUserId);
                 this.type = user.type;
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('inviteUser');
         }
@@ -78,7 +82,9 @@ export class UserAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
             this.onSavedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -98,7 +104,9 @@ export class UserAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.name));
             this.onDeletedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
 }

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

@@ -1,7 +1,10 @@
 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';
@@ -59,4 +62,8 @@ import { OssModule } from 'src/app/oss.module';
         ProviderTypeGuardService,
     ],
 })
-export class ProvidersModule {}
+export class ProvidersModule {
+    constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {
+        modalService.registerComponentFactoryResolver(AddOrganizationComponent, componentFactoryResolver);
+    }
+}

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 src="/src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" 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

@@ -11,6 +11,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 
@@ -41,12 +43,7 @@ export class SetupComponent implements OnInit {
 
     ngOnInit() {
         document.body.classList.remove('layout_frontend');
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             const error = qParams.providerId == null || qParams.email == null || qParams.token == null;
 
             if (error) {
@@ -58,9 +55,21 @@ export class SetupComponent implements OnInit {
                 };
                 this.toasterService.popAsync(toast);
                 this.router.navigate(['/']);
-            } else {
-                this.providerId = qParams.providerId;
-                this.token = qParams.token;
+                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(['/']);
             }
         });
     }

config.js

@@ -1,26 +1,34 @@
 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 {
-        ...baseConfig,
-        ...overrideConfig
+        ...require('./config/base.json'),
+        ...loadConfig(envName),
+        ...loadConfig('local'),
+        dev: {
+            ...require('./config/base.json').dev,
+            ...loadConfig(envName).dev,
+            ...loadConfig('local').dev,
+        },
     };
 }
 
 function log(configObj) {
-    const repeatNum = 50
-    console.log(`${"=".repeat(repeatNum)}\nenvConfig`)
-    Object.entries(configObj).map(([key, value]) => {
-        console.log(`  ${key}: ${value}`)
-    })
-    console.log(`${"=".repeat(repeatNum)}`)
+    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;
+        }
+    }
 }
 
 module.exports = {

config/base.json

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

config/cloud.json

@@ -0,0 +1,17 @@
+{
+    "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"
+    },
+    "dev": {
+        "proxyApi": "https://api.bitwarden.com",
+        "proxyIdentity": "https://identity.bitwarden.com",
+        "proxyEvents": "https://events.bitwarden.com"
+    }
+}

config/development.json

@@ -0,0 +1,11 @@
+{
+    "urls": {
+        "notifications": "http://localhost:61840"
+    },
+    "dev": {
+        "proxyApi": "http://localhost:4000",
+        "proxyIdentity": "http://localhost:33656",
+        "proxyEvents": "http://localhost:46273",
+        "proxyNotifications": "http://localhost:61840"
+    }
+}

config/production.json

@@ -1,7 +0,0 @@
-{
-    "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,7 +1,11 @@
 {
-    "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"
+    "urls": {
+        "icons": "https://icons.qa.bitwarden.pw",
+        "notifications": "https://notifications.qa.bitwarden.pw"
+    },
+    "dev": {
+        "proxyApi": "https://api.qa.bitwarden.pw",
+        "proxyIdentity": "https://identity.qa.bitwarden.pw",
+        "proxyEvents": "https://events.qa.bitwarden.pw"
+    }
 }

config/self-hosted.json

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

crowdin.yml

@@ -1,5 +1,9 @@
+project_id_env: _CROWDIN_PROJECT_ID
+api_token_env: CROWDIN_API_TOKEN
+preserve_hierarchy: true
 files:
   - source: /src/locales/en/messages.json
+    dest: /src/locales/en/%file_name%.%file_extension%
     translation: /src/locales/%two_letters_code%/%original_file_name%
     update_option: update_as_unapproved
     languages_mapping:

entrypoint.sh

@@ -31,7 +31,6 @@ 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

@@ -1,37 +0,0 @@
-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.22.1",
+  "version": "2.25.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -11,29 +11,24 @@
     "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": "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",
+    "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",
     "clean:l10n": "git push origin --delete l10n_master",
-    "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",
+    "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",
     "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' || true",
     "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix"
   },
@@ -51,9 +46,8 @@
     "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",
@@ -91,4 +85,4 @@
     "node": "~14",
     "npm": "~7"
   }
-}
+}

src/app-id.json

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

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
     <div>
-        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" 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/accept-organization.component.ts

@@ -12,6 +12,7 @@ import {
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -36,7 +37,7 @@ export class AcceptOrganizationComponent extends BaseAcceptComponent {
         i18nService: I18nService, route: ActivatedRoute,
         private apiService: ApiService, userService: UserService,
         stateService: StateService, private cryptoService: CryptoService,
-        private policyService: PolicyService) {
+        private policyService: PolicyService, private logService: LogService) {
         super(router, toasterService, i18nService, route, userService, stateService);
     }
 
@@ -101,7 +102,9 @@ export class AcceptOrganizationComponent extends BaseAcceptComponent {
             const policies = await this.apiService.getPoliciesByToken(qParams.organizationId, qParams.token,
                 qParams.email, qParams.organizationUserId);
             policyList = this.policyService.mapPoliciesFromToken(policies);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
 
         if (policyList != null) {
             const result = this.policyService.getResetPasswordPolicyOptions(policyList, qParams.organizationId);

src/app/accounts/hint.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hint.component';
@@ -13,7 +14,8 @@ import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hin
 })
 export class HintComponent extends BaseHintComponent {
     constructor(router: Router, i18nService: I18nService,
-        apiService: ApiService, platformUtilsService: PlatformUtilsService) {
-        super(router, i18nService, apiService, platformUtilsService);
+        apiService: ApiService, platformUtilsService: PlatformUtilsService,
+        logService: LogService) {
+        super(router, i18nService, apiService, platformUtilsService, logService);
     }
 }

src/app/accounts/lock.component.ts

@@ -5,6 +5,8 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -26,9 +28,11 @@ export class LockComponent extends BaseLockComponent {
         userService: UserService, cryptoService: CryptoService,
         storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
         environmentService: EnvironmentService, private routerService: RouterService,
-        stateService: StateService, apiService: ApiService) {
+        stateService: StateService, apiService: ApiService, logService: LogService,
+        keyConnectorService: KeyConnectorService) {
         super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
-            storageService, vaultTimeoutService, environmentService, stateService, apiService);
+            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService,
+            keyConnectorService);
     }
 
     async ngOnInit() {

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 src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
+            <img class="mb-2 logo logo-themed" 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/login.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
@@ -32,17 +35,17 @@ export class LoginComponent extends BaseLoginComponent {
         storageService: StorageService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
         passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService,
-        private apiService: ApiService, private policyService: PolicyService) {
+        private apiService: ApiService, private policyService: PolicyService, logService: LogService) {
         super(authService, router,
             platformUtilsService, i18nService,
             stateService, environmentService,
             passwordGenerationService, cryptoFunctionService,
-            storageService);
+            storageService, logService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
             }
@@ -52,10 +55,16 @@ export class LoginComponent extends BaseLoginComponent {
                 this.stateService.save('loginRedirect',
                     { route: '/settings/create-organization', qParams: { plan: qParams.org } });
             }
-            await super.ngOnInit();
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
+
+            // Are they coming from an email for sponsoring a families organization
+            if (qParams.sponsorshipToken != null) {
+                // After logging in redirect them to setup the families sponsorship
+                this.stateService.save('loginRedirect', {
+                    route: '/setup/families-for-enterprise',
+                    qParams: { token: qParams.sponsorshipToken },
+                });
             }
+            await super.ngOnInit();
         });
 
         const invite = await this.stateService.get<any>('orgInvitation');
@@ -65,7 +74,9 @@ export class LoginComponent extends BaseLoginComponent {
                 const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
                     invite.email, invite.organizationUserId);
                 policyList = this.policyService.mapPoliciesFromToken(policies);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
 
             if (policyList != null) {
                 const result = this.policyService.getResetPasswordPolicyOptions(policyList, invite.organizationId);

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

@@ -5,6 +5,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { DeleteRecoverRequest } from 'jslib-common/models/request/deleteRecoverRequest';
 
@@ -17,7 +18,8 @@ export class RecoverDeleteComponent {
     formPromise: Promise<any>;
 
     constructor(private router: Router, private apiService: ApiService,
-        private toasterService: ToasterService, private i18nService: I18nService) {
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private logService: LogService) {
     }
 
     async submit() {
@@ -28,6 +30,8 @@ export class RecoverDeleteComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deleteRecoverEmailSent'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -7,6 +7,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { TwoFactorRecoveryRequest } from 'jslib-common/models/request/twoFactorRecoveryRequest';
 
@@ -22,7 +23,8 @@ export class RecoverTwoFactorComponent {
 
     constructor(private router: Router, private apiService: ApiService,
         private toasterService: ToasterService, private i18nService: I18nService,
-        private cryptoService: CryptoService, private authService: AuthService) { }
+        private cryptoService: CryptoService, private authService: AuthService,
+        private logService: LogService) { }
 
     async submit() {
         try {
@@ -35,6 +37,8 @@ export class RecoverTwoFactorComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('twoStepRecoverDisabled'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/accounts/register.component.html

@@ -62,24 +62,8 @@
                                     <small class="form-text text-muted">{{'yourNameDesc' | i18n}}</small>
                                 </div>
                                 <div class="form-group">
-                                    <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 type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
+                                        *ngIf="enforcedPolicyOptions">
                                     </app-callout>
                                     <label for="masterPassword">{{'masterPass' | i18n}}</label>
                                     <div class="d-flex">

src/app/accounts/register.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
@@ -38,33 +41,13 @@ export class RegisterComponent extends BaseRegisterComponent {
         apiService: ApiService, private route: ActivatedRoute,
         stateService: StateService, platformUtilsService: PlatformUtilsService,
         passwordGenerationService: PasswordGenerationService, private policyService: PolicyService,
-        environmentService: EnvironmentService) {
+        environmentService: EnvironmentService, logService: LogService) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
-            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 + ')';
+            passwordGenerationService, environmentService, logService);
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(qParams => {
+        this.route.queryParams.pipe(first()).subscribe(qParams => {
             this.referenceData = new ReferenceEventRequest();
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
@@ -85,12 +68,17 @@ export class RegisterComponent extends BaseRegisterComponent {
             } else {
                 this.referenceData.id = ('; ' + document.cookie).split('; reference=').pop().split(';').shift();
             }
+            // Are they coming from an email for sponsoring a families organization
+            if (qParams.sponsorshipToken != null) {
+                // After logging in redirect them to setup the families sponsorship
+                this.stateService.save('loginRedirect', {
+                    route: '/setup/families-for-enterprise',
+                    qParams: { token: qParams.sponsorshipToken },
+                });
+            }
             if (this.referenceData.id === '') {
                 this.referenceData.id = null;
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
         const invite = await this.stateService.get<any>('orgInvitation');
         if (invite != null) {
@@ -101,7 +89,9 @@ export class RegisterComponent extends BaseRegisterComponent {
                     const policiesData = policies.data.map(p => new PolicyData(p));
                     this.policies = policiesData.map(p => new Policy(p));
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         }
 
         if (this.policies != null) {

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

@@ -0,0 +1,31 @@
+<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+    <div>
+        <img class="mb-4 logo logo-themed" 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>
+        </p>
+    </div>
+</div>
+<div class="container" *ngIf="!loading">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'removeMasterPassword' | i18n}}</p>
+            <hr>
+            <div class="card d-block">
+                <div class="card-body">
+                    <p>{{'convertOrganizationEncryptionDesc' | i18n : organization.name}}</p>
+
+                    <button type="button" class="btn btn-primary btn-block" (click)="convert()" [disabled]="actionPromise">
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="continuing"></i>
+                        {{'removeMasterPassword' | i18n}}
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary btn-block" (click)="leave()" [disabled]="actionPromise">
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="leaving"></i>
+                        {{'leaveOrganization' | i18n}}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from 'jslib-angular/components/remove-password.component';
+
+@Component({
+    selector: 'app-remove-password',
+    templateUrl: 'remove-password.component.html',
+})
+export class RemovePasswordComponent extends BaseRemovePasswordComponent {
+}

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

@@ -9,25 +9,13 @@
                 </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" *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 type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
+                            *ngIf="enforcedPolicyOptions">
                         </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 src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
+            <img class="logo mb-2 logo-themed" 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/sso.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -28,16 +31,16 @@ export class SsoComponent extends BaseSsoComponent {
         storageService: StorageService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, apiService: ApiService,
         cryptoFunctionService: CryptoFunctionService, environmentService: EnvironmentService,
-        passwordGenerationService: PasswordGenerationService) {
+        passwordGenerationService: PasswordGenerationService, logService: LogService) {
         super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
-            apiService, cryptoFunctionService, environmentService, passwordGenerationService);
+            apiService, cryptoFunctionService, environmentService, passwordGenerationService, logService);
         this.redirectUri = window.location.origin + '/sso-connector.html';
         this.clientId = 'web';
     }
 
     async ngOnInit() {
         super.ngOnInit();
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.identifier != null) {
                 this.identifier = qParams.identifier;
             } else {
@@ -46,9 +49,6 @@ export class SsoComponent extends BaseSsoComponent {
                     this.identifier = storedIdentifier;
                 }
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }
 

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

@@ -1,5 +1,5 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -8,21 +8,46 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div class="list-group list-group-flush">
-                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
-                        class="list-group-item list-group-item-action">
-                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                        <h3>{{p.name}}</h3>
-                        {{p.description}}
-                    </a>
-                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                        {{'recoveryCodeDesc' | i18n}}
-                    </a>
+                <div class="list-group list-group-flush-2fa">
+                    <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{p.name}}</h3>
+                                {{p.description}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-describedby]="p.name" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="choose(p)">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="list-group-item list-group-item-action" (click)="recover()">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img class="recovery-code-img" alt="rc logo">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                                {{'recoveryCodeDesc' | i18n}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-descibedby]="'recoveryCodeTitle' | i18n" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="recover()">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' |
+                    i18n}}</button>
             </div>
         </div>
     </div>

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

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
@@ -10,12 +9,6 @@ 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';
@@ -24,8 +17,15 @@ 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 { LogService } from 'jslib-common/abstractions/log.service';
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+
 @Component({
     selector: 'app-two-factor',
     templateUrl: 'two-factor.component.html',
@@ -36,26 +36,23 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, stateService: StateService,
-        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
-        storageService: StorageService, route: ActivatedRoute) {
+        environmentService: EnvironmentService, private modalService: ModalService,
+        storageService: StorageService, route: ActivatedRoute, logService: LogService) {
         super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
-            stateService, storageService, route);
+            stateService, storageService, route, logService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
-    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();
+    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();
+            });
         });
     }
 

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

@@ -7,24 +7,8 @@
                     <app-callout type="warning">{{'updateMasterPasswordWarning' | i18n}}
                     </app-callout>
                     <div class="form-group">
-                        <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 type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
+                            *ngIf="enforcedPolicyOptions">
                         </app-callout>
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <div class="d-flex">

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

@@ -3,10 +3,12 @@ import { Component } from '@angular/core';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { 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';
@@ -20,8 +22,9 @@ export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent
     constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
         cryptoService: CryptoService, userService: UserService,
-        messagingService: MessagingService, apiService: ApiService) {
+        messagingService: MessagingService, apiService: ApiService,
+        syncService: SyncService, logService: LogService) {
         super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
-            userService, messagingService, apiService);
+            userService, messagingService, apiService, syncService, logService);
     }
 }

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

@@ -1,6 +1,6 @@
 <div class="mt-5 d-flex justify-content-center">
     <div>
-        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <img class="mb-4 logo logo-themed" 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/verify-email-token.component.ts

@@ -7,10 +7,13 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailRequest';
@@ -22,15 +25,11 @@ import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailReque
 export class VerifyEmailTokenComponent implements OnInit {
     constructor(private router: Router, private toasterService: ToasterService,
         private i18nService: I18nService, private route: ActivatedRoute,
-        private apiService: ApiService, private userService: UserService) { }
+        private apiService: ApiService, private userService: UserService,
+        private logService: LogService) { }
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.userId != null && qParams.token != null) {
                 try {
                     await this.apiService.postAccountVerifyEmailToken(
@@ -42,7 +41,9 @@ export class VerifyEmailTokenComponent implements OnInit {
                     this.toasterService.popAsync('success', null, this.i18nService.t('emailVerified'));
                     this.router.navigate(['/']);
                     return;
-                } catch { }
+                } catch (e) {
+                    this.logService.error(e);
+                }
             }
             this.toasterService.popAsync('error', null, this.i18nService.t('emailVerifiedFailed'));
             this.router.navigate(['/']);

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

@@ -7,10 +7,13 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { VerifyDeleteRecoverRequest } from 'jslib-common/models/request/verifyDeleteRecoverRequest';
 
@@ -27,16 +30,11 @@ export class VerifyRecoverDeleteComponent implements OnInit {
 
     constructor(private router: Router, private apiService: ApiService,
         private toasterService: ToasterService, private i18nService: I18nService,
-        private route: ActivatedRoute) {
+        private route: ActivatedRoute, private logService: LogService) {
     }
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.userId != null && qParams.token != null && qParams.email != null) {
                 this.userId = qParams.userId;
                 this.token = qParams.token;
@@ -55,6 +53,8 @@ export class VerifyRecoverDeleteComponent implements OnInit {
             this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
                 this.i18nService.t('accountDeletedDesc'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/app.component.ts

@@ -32,6 +32,7 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EventService } from 'jslib-common/abstractions/event.service';
 import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -46,8 +47,19 @@ 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
 
@@ -56,6 +68,7 @@ const IdleTimeout = 60000 * 10; // 10 minutes
     templateUrl: 'app.component.html',
 })
 export class AppComponent implements OnDestroy, OnInit {
+
     toasterConfig: ToasterConfig = new ToasterConfig({
         showCloseButton: true,
         mouseoverTimerStop: true,
@@ -80,7 +93,8 @@ 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) { }
+        private policyService: PolicyService, protected policyListService: PolicyListService,
+        private keyConnectorService: KeyConnectorService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -151,6 +165,10 @@ export class AppComponent implements OnDestroy, OnInit {
                     case 'setFullWidth':
                         this.setFullWidth();
                         break;
+                    case 'convertAccountToKeyConnector':
+                        this.keyConnectorService.setConvertAccountRequired(true);
+                        this.router.navigate(['/remove-password']);
+                        break;
                     default:
                         break;
                 }
@@ -170,6 +188,18 @@ 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();
     }
 
@@ -194,6 +224,7 @@ export class AppComponent implements OnDestroy, OnInit {
             this.policyService.clear(userId),
             this.passwordGenerationService.clear(),
             this.stateService.purge(),
+            this.keyConnectorService.clear(),
         ]);
 
         this.searchService.clearIndex();

src/app/app.module.ts

@@ -10,6 +10,7 @@ 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: [
@@ -21,6 +22,10 @@ import { ServicesModule } from './services/services.module';
         InfiniteScrollModule,
         DragDropModule,
         OssRoutingModule,
+        WildcardRoutingModule, // Needs to be last to catch all non-existing routes
+    ],
+    declarations: [
+        AppComponent,
     ],
     bootstrap: [AppComponent],
 })

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

@@ -12,6 +12,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -35,12 +37,7 @@ export abstract class BaseAcceptComponent implements OnInit {
     abstract unauthedHandler(qParams: any): Promise<void>;
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             await this.stateService.remove('loginRedirect');
 
             let error = this.requiredParameters.some(e => qParams?.[e] == null || qParams[e] === '');

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,5 +1,4 @@
 import {
-    ComponentFactoryResolver,
     Directive,
     ViewChild,
     ViewContainerRef
@@ -17,6 +16,8 @@ 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';
 
@@ -31,7 +32,6 @@ 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,7 +86,6 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
     protected didScroll = false;
     protected pageSize = 100;
-    protected modal: ModalComponent = null;
 
     private pagedUsersCount = 0;
 
@@ -94,8 +93,8 @@ 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 componentFactoryResolver: ComponentFactoryResolver, private logService: LogService,
-        private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe) { }
+        protected modalService: ModalService, private logService: LogService,
+        private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe ) { }
 
     abstract edit(user: UserType): void;
     abstract getUsers(): Promise<ListResponse<UserType>>;
@@ -181,7 +180,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
     async remove(user: UserType) {
         const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeUserConfirmation'), this.userNamePipe.transform(user),
+            this.deleteWarningMessage(user), this.userNamePipe.transform(user),
             this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
 
         if (!confirmed) {
@@ -248,29 +247,19 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
 
             const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
             if (autoConfirm == null || !autoConfirm) {
-                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;
+                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 (e) {
+                            this.logService.error(e);
+                        }
+                    });
                 });
                 return;
             }
@@ -278,7 +267,9 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
             try {
                 const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey.buffer);
                 this.logService.info(`User's fingerprint: ${fingerprint.join('-')}`);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
             await confirmUser(publicKey);
         } catch (e) {
             this.logService.error(`Handled exception: ${e}`);
@@ -297,6 +288,10 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
         return !searching && this.users && this.users.length > this.pageSize;
     }
 
+    protected deleteWarningMessage(user: UserType): string {
+        return this.i18nService.t('removeUserConfirmation');
+    }
+
     protected getCheckedUsers() {
         return this.users.filter(u => (u as any).checked);
     }

src/app/components/avatar.component.ts

@@ -1,138 +0,0 @@
-import {
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-} from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
-
-import { Utils } from 'jslib-common/misc/utils';
-
-@Component({
-    selector: 'app-avatar',
-    template: '<img [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
-        '[ngClass]="{\'rounded-circle\': circle}">',
-})
-export class AvatarComponent implements OnChanges, OnInit {
-    @Input() data: string;
-    @Input() email: string;
-    @Input() size = 45;
-    @Input() charCount = 2;
-    @Input() textColor = '#ffffff';
-    @Input() fontSize = 20;
-    @Input() fontWeight = 300;
-    @Input() dynamic = false;
-    @Input() circle = false;
-
-    src: string;
-
-    constructor(public sanitizer: DomSanitizer, private cryptoFunctionService: CryptoFunctionService,
-        private stateService: StateService) { }
-
-    ngOnInit() {
-        if (!this.dynamic) {
-            this.generate();
-        }
-    }
-
-    ngOnChanges() {
-        if (this.dynamic) {
-            this.generate();
-        }
-    }
-
-    private async generate() {
-        const enableGravatars = await this.stateService.get<boolean>('enableGravatars');
-        if (enableGravatars && this.email != null) {
-            const hashBytes = await this.cryptoFunctionService.hash(this.email.toLowerCase().trim(), 'md5');
-            const hash = Utils.fromBufferToHex(hashBytes).toLowerCase();
-            this.src = 'https://www.gravatar.com/avatar/' + hash + '?s=' + this.size + '&r=pg&d=retro';
-        } else {
-            let chars: string = null;
-            const upperData = this.data.toUpperCase();
-
-            if (this.charCount > 1) {
-                chars = this.getFirstLetters(upperData, this.charCount);
-            }
-            if (chars == null) {
-                chars = this.unicodeSafeSubstring(upperData, this.charCount);
-            }
-
-            // If the chars contain an emoji, only show it.
-            if (chars.match(Utils.regexpEmojiPresentation)) {
-                chars = chars.match(Utils.regexpEmojiPresentation)[0];
-            }
-
-            const charObj = this.getCharText(chars);
-            const color = this.stringToColor(upperData);
-            const svg = this.getSvg(this.size, color);
-            svg.appendChild(charObj);
-            const html = window.document.createElement('div').appendChild(svg).outerHTML;
-            const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
-            this.src = 'data:image/svg+xml;base64,' + svgHtml;
-        }
-    }
-
-    private stringToColor(str: string): string {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            // tslint:disable-next-line
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        let color = '#';
-        for (let i = 0; i < 3; i++) {
-            // tslint:disable-next-line
-            const value = (hash >> (i * 8)) & 0xFF;
-            color += ('00' + value.toString(16)).substr(-2);
-        }
-        return color;
-    }
-
-    private getFirstLetters(data: string, count: number): string {
-        const parts = data.split(' ');
-        if (parts.length > 1) {
-            let text = '';
-            for (let i = 0; i < count; i++) {
-                text += this.unicodeSafeSubstring(parts[i], 1);
-            }
-            return text;
-        }
-        return null;
-    }
-
-    private getSvg(size: number, color: string): HTMLElement {
-        const svgTag = window.document.createElement('svg');
-        svgTag.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svgTag.setAttribute('pointer-events', 'none');
-        svgTag.setAttribute('width', size.toString());
-        svgTag.setAttribute('height', size.toString());
-        svgTag.style.backgroundColor = color;
-        svgTag.style.width = size + 'px';
-        svgTag.style.height = size + 'px';
-        return svgTag;
-    }
-
-    private getCharText(character: string): HTMLElement {
-        const textTag = window.document.createElement('text');
-        textTag.setAttribute('text-anchor', 'middle');
-        textTag.setAttribute('y', '50%');
-        textTag.setAttribute('x', '50%');
-        textTag.setAttribute('dy', '0.35em');
-        textTag.setAttribute('pointer-events', 'auto');
-        textTag.setAttribute('fill', this.textColor);
-        textTag.setAttribute('font-family', '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
-            'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"');
-        textTag.textContent = character;
-        textTag.style.fontWeight = this.fontWeight.toString();
-        textTag.style.fontSize = this.fontSize + 'px';
-        return textTag;
-    }
-
-    private unicodeSafeSubstring(str: string, count: number) {
-        const characters = str.match(/./ug);
-        return characters != null ? characters.slice(0, count).join('') : '';
-    }
-}

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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,39 @@
+<div class="modal fade" 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

@@ -0,0 +1,8 @@
+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 bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
+<nav class="navbar navbar-expand navbar-dark" [ngClass]="{'nav-background-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,15 +48,6 @@
                 </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,9 +9,6 @@ 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';
@@ -26,16 +23,11 @@ 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 apiService: ApiService, private platformUtilsService: PlatformUtilsService,
-        private environmentService: EnvironmentService) { }
+        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
 
     ngOnInit() {
-        this.businessUrl = this.environmentService.getEnterpriseUrl();
-
         document.body.classList.remove('layout_frontend');
         this.route.params.subscribe(async params => {
             this.organizationId = params.organizationId;
@@ -60,30 +52,14 @@ 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.canManageAssignedCollections ||
-            this.organization.canManageAllCollections ||
+            this.organization.canViewAllCollections ||
+            this.organization.canViewAssignedCollections ||
             this.organization.canManageGroups ||
             this.organization.canManagePolicies ||
             this.organization.canAccessEventLogs;
@@ -93,10 +69,6 @@ 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' :
@@ -109,7 +81,7 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
             case this.organization.canManageUsers:
                 route = 'manage/people';
                 break;
-            case this.organization.canManageAssignedCollections || this.organization.canManageAllCollections:
+            case this.organization.canViewAssignedCollections || this.organization.canViewAllCollections:
                 route = 'manage/collections';
                 break;
             case this.organization.canManageGroups:

src/app/modal.component.ts

@@ -1,76 +0,0 @@
-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/bulk/bulk-confirm.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
@@ -15,17 +15,18 @@
                 <div class="form-group">
                     <label for="name">{{'name' | i18n}}</label>
                     <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required
-                        appAutofocus>
+                        appAutofocus [disabled]="!this.canSave">
                 </div>
                 <div class="form-group">
                     <label for="externalId">{{'externalId' | i18n}}</label>
-                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId"
+                        [disabled]="!this.canSave">
                     <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">
+                        <div class="ml-auto" *ngIf="groups && groups.length && this.canSave">
                             <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
                                 {{'selectAll' | i18n}}
                             </button>
@@ -50,7 +51,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" appStopProp>
+                                        [disabled]="g.accessAll || !this.canSave" appStopProp>
                                 </td>
                                 <td (click)="check(g)">
                                     {{g.name}}
@@ -62,11 +63,11 @@
                                 </td>
                                 <td class="text-center">
                                     <input type="checkbox" [(ngModel)]="g.hidePasswords"
-                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll">
+                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll || !this.canSave">
                                 </td>
                                 <td class="text-center">
                                     <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
-                                        [disabled]="!g.checked || g.accessAll">
+                                        [disabled]="!g.checked || g.accessAll || !this.canSave">
                                 </td>
                             </tr>
                         </tbody>
@@ -74,22 +75,23 @@
                 </ng-container>
             </div>
             <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading" *ngIf="this.canSave">
                     <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">
+                <div class="ml-auto" *ngIf="this.canDelete">
                     <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

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -29,6 +30,8 @@ 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();
 
@@ -46,7 +49,8 @@ export class CollectionAddEditComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
-        private cryptoService: CryptoService, private userService: UserService) { }
+        private cryptoService: CryptoService, private userService: UserService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         const organization = await this.userService.getOrganization(this.organizationId);
@@ -75,7 +79,9 @@ export class CollectionAddEditComponent implements OnInit {
                         }
                     });
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('addCollection');
         }
@@ -125,7 +131,9 @@ export class CollectionAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedCollectionId' : 'createdCollectionId', this.name));
             this.onSavedCollection.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -145,6 +153,8 @@ export class CollectionAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', this.name));
             this.onDeletedCollection.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+        <button type="button" *ngIf="this.canCreate" 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>
+                    <div class="dropdown" appListDropdown *ngIf="this.canEdit(c) || this.canDelete(c)">
                         <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 (click)="users(c)">
+                            <a class="dropdown-item" href="#" appStopClick *ngIf="this.canEdit(c)" (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 (click)="delete(c)">
+                            <a class="dropdown-item text-danger" href="#" appStopClick *ngIf="this.canDelete(c)" (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,23 +1,27 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { 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,
@@ -25,7 +29,6 @@ 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,8 +41,11 @@ 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;
 
@@ -47,38 +53,45 @@ 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 componentFactoryResolver: ComponentFactoryResolver,
+        private collectionService: CollectionService, private modalService: ModalService,
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private searchService: SearchService) { }
+        private searchService: SearchService, private logService: LogService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
 
     async load() {
-        const organization = await this.userService.getOrganization(this.organizationId);
-        let response: ListResponse<CollectionResponse>;
-        if (organization.canManageAllCollections) {
-            response = await this.apiService.getCollections(this.organizationId);
-        } else {
-            response = await this.apiService.getUserCollections();
+        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);
         }
-        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);
+
+        if (this.organization.canViewAllCollections) {
+            const response = await this.apiService.getCollections(this.organizationId);
+            this.collections = await decryptCollections(response);
+        } else {
+            this.collections = this.assignedCollections;
+        }
+
         this.resetPaging();
         this.loading = false;
     }
@@ -100,29 +113,29 @@ export class CollectionsComponent implements OnInit {
         this.didScroll = this.pagedCollections.length > this.pageSize;
     }
 
-    edit(collection: CollectionView) {
-        if (this.modal != null) {
-            this.modal.close();
+    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;
         }
 
-        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;
+        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);
+            });
         });
     }
 
@@ -142,30 +155,23 @@ 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 { }
+        } catch (e) {
+            this.logService.error(e);
+            this.toasterService.popAsync('error', null, this.i18nService.t('missingPermissions'));
+        }
     }
 
-    users(collection: CollectionView) {
-        if (this.modal != null) {
-            this.modal.close();
-        }
+    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;
 
-        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;
+            comp.onEditedUsers.subscribe(() => {
+                this.load();
+                modal.close();
+            });
         });
     }
 
@@ -186,6 +192,28 @@ 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/entity-events.component.html

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">

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

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { EventService } from '../../services/event.service';
 
@@ -42,7 +43,7 @@ export class EntityEventsComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private eventService: EventService, private toasterService: ToasterService,
-        private userNamePipe: UserNamePipe) { }
+        private userNamePipe: UserNamePipe, private logService: LogService) { }
 
     async ngOnInit() {
         const defaultDates = this.eventService.getDefaultDateFilters();
@@ -98,7 +99,9 @@ export class EntityEventsComponent implements OnInit {
                 this.morePromise = promise;
             }
             response = await promise;
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
 
         this.continuationToken = response.continuationToken;
         const events = await Promise.all(response.data.map(async r => {

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">

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

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
 import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
@@ -41,7 +42,7 @@ export class EntityUsersComponent implements OnInit {
     private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async ngOnInit() {
         await this.loadUsers();
@@ -130,6 +131,8 @@ export class EntityUsersComponent implements OnInit {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('updatedUsers'));
             this.onEditedUsers.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -1,4 +1,4 @@
-<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
     <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">

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

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { CollectionData } from 'jslib-common/models/data/collectionData';
@@ -42,7 +43,7 @@ export class GroupAddEditComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private collectionService: CollectionService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private platformUtilsService: PlatformUtilsService, private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.groupId != null;
@@ -66,7 +67,9 @@ export class GroupAddEditComponent implements OnInit {
                         }
                     });
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('addGroup');
         }
@@ -112,7 +115,9 @@ export class GroupAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedGroupId' : 'createdGroupId', this.name));
             this.onSavedGroup.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -132,6 +137,8 @@ export class GroupAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', this.name));
             this.onDeletedGroup.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -10,19 +9,23 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { 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,13 +47,12 @@ 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 componentFactoryResolver: ComponentFactoryResolver,
+        private i18nService: I18nService, private modalService: ModalService,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
         private userService: UserService, private router: Router,
-        private searchService: SearchService) { }
+        private searchService: SearchService, private logService: LogService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
@@ -61,11 +63,8 @@ export class GroupsComponent implements OnInit {
                 return;
             }
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
@@ -95,29 +94,18 @@ export class GroupsComponent implements OnInit {
         this.didScroll = this.pagedGroups.length > this.pageSize;
     }
 
-    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;
+    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);
+            });
         });
     }
 
@@ -137,29 +125,21 @@ export class GroupsComponent implements OnInit {
             await this.apiService.deleteGroup(this.organizationId, group.id);
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', group.name));
             this.removeGroup(group);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
-    users(group: GroupResponse) {
-        if (this.modal != null) {
-            this.modal.close();
-        }
+    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;
 
-        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;
+            comp.onEditedUsers.subscribe(() => {
+                modal.close();
+            });
         });
     }
 

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.canManageAssignedCollections || organization.canManageAllCollections">
+                        *ngIf="organization.canViewAllCollections || organization.canViewAssignedCollections">
                         {{'collections' | i18n}}
                     </a>
                     <a routerLink="groups" class="list-group-item" routerLinkActive="active"
@@ -20,6 +20,10 @@
                         *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,16 +14,18 @@ import { Organization } from 'jslib-common/models/domain/organization';
 })
 export class ManageComponent implements OnInit {
     organization: Organization;
-    accessPolicies = false;
-    accessGroups = false;
-    accessEvents = false;
+    accessPolicies: boolean = false;
+    accessGroups: boolean = false;
+    accessEvents: boolean = false;
+    accessSso: boolean = 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,11 +1,12 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 
+import { first } from 'rxjs/operators';
+
 import {
     ActivatedRoute,
     Router,
@@ -26,6 +27,8 @@ 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';
@@ -37,13 +40,11 @@ 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';
@@ -66,7 +67,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
     @ViewChild('bulkConfirmTemplate', { read: ViewContainerRef, static: true }) bulkConfirmModalRef: ViewContainerRef;
     @ViewChild('bulkRemoveTemplate', { read: ViewContainerRef, static: true }) bulkRemoveModalRef: ViewContainerRef;
 
-    userType = ProviderUserType;
+    userType = OrganizationUserType;
     userStatusType = OrganizationUserStatusType;
 
     organizationId: string;
@@ -80,14 +81,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
     callingUserType: OrganizationUserType = null;
 
     constructor(apiService: ApiService, private route: ActivatedRoute,
-        i18nService: I18nService, componentFactoryResolver: ComponentFactoryResolver,
+        i18nService: I18nService, modalService: ModalService,
         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, componentFactoryResolver, logService, searchPipe, userNamePipe);
+                storageService, validationService, modalService, logService, searchPipe, userNamePipe);
         }
 
     async ngOnInit() {
@@ -121,7 +122,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -129,16 +130,14 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
 
     async load() {
-        const policies = await this.policyService.getAll(PolicyType.ResetPassword);
-        this.orgResetPasswordPolicyEnabled = policies.some(p => p.organizationId === this.organizationId && p.enabled);
+        const resetPasswordPolicy = await this.policyService.getPolicyForOrganization(PolicyType.ResetPassword,
+            this.organizationId);
+        this.orgResetPasswordPolicyEnabled = resetPasswordPolicy?.enabled;
         super.load();
     }
 
@@ -189,52 +188,31 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
         return this.orgUseResetPassword && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled;
     }
 
-    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 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.usesKeyConnector = user?.usesKeyConnector;
+            comp.onSavedUser.subscribe(() => {
+                modal.close();
+                this.load();
+            });
+            comp.onDeletedUser.subscribe(() => {
+                modal.close();
+                this.removeUser(user);
+            });
         });
     }
 
-    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;
+    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();
+            });
         });
     }
 
@@ -243,21 +221,13 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        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;
+        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
+            comp.organizationId = this.organizationId;
+            comp.users = this.getCheckedUsers();
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async bulkReinvite() {
@@ -274,7 +244,6 @@ 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);
@@ -290,95 +259,66 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             return;
         }
 
-        if (this.modal != null) {
-            this.modal.close();
-        }
-
-        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;
+        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
+            comp.organizationId = this.organizationId;
+            comp.users = this.getCheckedUsers();
         });
+
+        await modal.onClosedPromise();
+        await this.load();
     }
 
     async events(user: OrganizationUserUserDetailsResponse) {
-        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;
+        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';
         });
     }
 
     async resetPassword(user: OrganizationUserUserDetailsResponse) {
-        if (this.modal != null) {
-            this.modal.close();
+        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;
+
+            comp.onPasswordReset.subscribe(() => {
+                modal.close();
+                this.load();
+            });
+        });
+    }
+
+    protected deleteWarningMessage(user: OrganizationUserUserDetailsResponse): string {
+        if (user.usesKeyConnector) {
+            return this.i18nService.t('removeUserConfirmationKeyConnector');
         }
 
-        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;
-        });
+        return super.deleteWarningMessage(user);
     }
 
     private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
         request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {
 
-        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;
+        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
+            comp.loading = true;
+        });
 
         // Workaround to handle closing the modal shortly after it has been opened
         let close = false;
-        this.modal.onShown.subscribe(() => {
+        modal.onShown.subscribe(() => {
             if (close) {
-                this.modal.close();
+                modal.close();
             }
         });
 
-        this.modal.onClosed.subscribe(() => {
-            this.modal = null;
-        });
-
         try {
             const response = await request;
 
-            if (this.modal) {
+            if (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 }), {});
 
@@ -398,9 +338,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
             }
         } catch {
             close = true;
-            if (this.modal) {
-                this.modal.close();
-            }
+            modal.close();
         }
     }
 }

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

@@ -1,8 +1,3 @@
-<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>
@@ -13,10 +8,10 @@
 <table class="table table-hover table-list" *ngIf="!loading">
     <tbody>
         <tr *ngFor="let p of policies">
-            <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 *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>
         </tr>
     </tbody>

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

@@ -1,6 +1,5 @@
 import {
     Component,
-    ComponentFactoryResolver,
     OnInit,
     ViewChild,
     ViewContainerRef,
@@ -10,20 +9,24 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 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 { ModalComponent } from '../../modal.component';
+import { Organization } from 'jslib-common/models/domain/organization';
 
 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',
@@ -33,100 +36,31 @@ export class PoliciesComponent implements OnInit {
 
     loading = true;
     organizationId: string;
-    policies: any[];
+    policies: BasePolicy[];
+    organization: Organization;
 
-    // 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 i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
-        private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private router: Router, private environmentService: EnvironmentService) { }
+        private modalService: ModalService, private userService: UserService,
+        private policyListService: PolicyListService, private router: Router) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
-            const organization = await this.userService.getOrganization(this.organizationId);
-            if (organization == null || !organization.usePolicies) {
+            this.organization = await this.userService.getOrganization(this.organizationId);
+            if (this.organization == null || !this.organization.usePolicies) {
                 this.router.navigate(['/organizations', this.organizationId]);
                 return;
             }
-            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,
-                },
-            ];
+
+            this.policies = this.policyListService.getPolicies();
+
             await this.load();
 
             // Handle policies component launch from Event message
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 if (qParams.policyId != null) {
                     const policyIdFromEvents: string = qParams.policyId;
                     for (const orgPolicy of this.orgPolicies) {
@@ -141,15 +75,8 @@ export class PoliciesComponent implements OnInit {
                         }
                     }
                 }
-
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
-
-        // Remove when removing deprecation warning
-        this.enterpriseUrl = this.environmentService.getEnterpriseUrl();
     }
 
     async load() {
@@ -158,52 +85,19 @@ 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;
     }
 
-    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();
+    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();
+            });
         });
-
-        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;
     }
 }