Reapply changes to refactored templates

Fix merge errors
Reapply responsive changes to custom fields
2025-12-06 00:03:28 +00:00 · 2021-10-21 15:46:43 +10:00 · 2021-10-21 14:51:24 +10:00 · 2021-10-21 14:43:39 +10:00 · 2021-10-21 14:40:09 +10:00
219 changed files with 4453 additions and 16092 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,32 +0,0 @@
-## 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)
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -182,7 +182,7 @@ jobs:
          echo "GitHub event: $GITHUB_EVENT"

      - name: Setup DCT
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
        id: setup-dct
        uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
        with:
@@ -228,37 +228,26 @@ jobs:
        if: github.ref == 'refs/heads/master'
        run: docker tag bitwarden/web bitwarden/web:dev

-      - name: Tag release branch
-        if: github.ref == 'refs/heads/release'
-        run: docker tag bitwarden/web bitwarden/web:latest
-
      - name: List Docker images
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
        run: docker images

-      - name: Push rc image
+      - name: Push rc images
        if: github.ref == 'refs/heads/rc'
        run: docker push bitwarden/web:rc
        env:
          DOCKER_CONTENT_TRUST: 1
          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}

-      - name: Push dev image
+      - name: Push dev images
        if: github.ref == 'refs/heads/master'
        run: docker push bitwarden/web:dev
        env:
          DOCKER_CONTENT_TRUST: 1
          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}

-      - name: Push latest image
-        if: github.ref == 'refs/heads/release'
-        run: docker push bitwarden/web:latest
-        env:
-          DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
-
      - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
        run: docker logout


@@ -329,7 +318,7 @@ jobs:
      - name: Get image tag
        id: image-tag
        run: |
-          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")
+          IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
          TAG_EXTENSION=${{ github.event.inputs.custom_tag_extension }}

          if [[ $TAG_EXTENSION ]]; then
@@ -416,45 +405,6 @@ jobs:
        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()
@@ -466,7 +416,6 @@ jobs:
      - build-cloud
      - build-commercial-selfhost
      - build-qa
-      - crowdin-push
      - windows
    steps:
      - name: Check if any job failed
@@ -477,9 +426,8 @@ jobs:
          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 }}
+          BUILD_QA: ${{ needs.build-qa.result }}
+          WINDOWS: ${{ needs.windows.result }}
        run: |
          if [ "$CLOC_STATUS" = "failure" ]; then
              exit 1
@@ -491,11 +439,9 @@ jobs:
              exit 1
          elif [ "$BUILD_COMMERCIAL_SELFHOST_STATUS" = "failure" ]; then
              exit 1
-          elif [ "$BUILD_QA_STATUS" = "failure" ]; then
+          elif [ "$BUILD_QA" = "failure" ]; then
              exit 1
-          elif [ "$CROWDIN_PUSH_STATUS" = "failure" ]; then
-              exit 1
-          elif [ "$WINDOWS_STATUS" = "failure" ]; then
+          elif [ "$WINDOWS" = "failure" ]; then
              exit 1
          fi

--- a/.github/workflows/crowdin-sync.yml
+++ b/.github/workflows/crowdin-sync.yml
@@ -1,15 +1,15 @@
 ---
-name: Crowdin Pull
+name: Crowdin Sync

 on:
  workflow_dispatch:
    inputs: {}
-  schedule:
-    - cron: '0 0 * * 5'
+# schedule:
+#   - cron: '0 0 * * *'

 jobs:
-  crowdin-pull:
-    name: Pull
+  crowdin-sync:
+    name: Autosync
    runs-on: ubuntu-20.04
    env:
      _CROWDIN_PROJECT_ID: "308189"
@@ -30,7 +30,7 @@ jobs:
          secrets: "crowdin-api-token"

      - name: Download translations
-        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
--- a/.github/workflows/qa-deploy.yml
+++ b/.github/workflows/qa-deploy.yml
@@ -9,8 +9,8 @@ on:
        required: false

 env:
-  _QA_CLUSTER_RESOURCE_GROUP: "bw-env-qa"
-  _QA_CLUSTER_NAME: "bw-aks-qa"
+  _QA_CLUSTER_RESOURCE_GROUP: "bitwarden-devops"
+  _QA_CLUSTER_NAME: "dev-aks"
  _QA_K8S_NAMESPACE: "bw-qa"
  _QA_K8S_APP_NAME: "bw-web"

@@ -36,16 +36,16 @@ jobs:
        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
        with:
          keyvault: "bitwarden-qa-kv"
-          secrets: "qa-aks-kubectl-credentials"
+          secrets: "dev-aks-kubectl-credentials"

-      - name: Login with qa-aks-kubectl-credentials SP
+      - name: Login to dev-aks-kubectl SP
        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
        with:
-          creds: ${{ env.qa-aks-kubectl-credentials }}
+          creds: ${{ env.dev-aks-kubectl-credentials }}

      - name: Setup AKS access
-        #env:
-        #  USER_ID: ${{ env.qa-kubectl-managed-identity-clientId }}
+        env:
+          USER_ID: ${{ env.qa-kubectl-managed-identity-clientId }}
        run: |
          echo "---az install---"
          az aks install-cli --install-location ./kubectl --kubelogin-install-location ./kubelogin
@@ -55,7 +55,7 @@ jobs:
      - name: Get image tag
        id: image_tag
        run: |
-          IMAGE_TAG=$(echo "${GITHUB_REF:11}" | sed "s#/#-#g")
+          IMAGE_TAG=$(echo "$GITHUB_REF" | awk '{split($0, a, "/"); print a[3];}')
          TAG_EXTENSION=${{ github.event.inputs.image_extension }}

          if [[ $TAG_EXTENSION ]]; then
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,13 +12,12 @@ jobs:
    outputs:
      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" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix" ]]; then
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
            echo "==================================="
-            echo "[!] Can only release from the 'rc' or 'hotfix' branches"
+            echo "[!] Can only release from rc branch"
            echo "==================================="
            exit 1
          fi
@@ -42,15 +41,9 @@ jobs:
          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
+    name: Build self-host docker
    runs-on: ubuntu-20.04
    needs: setup
    env:
@@ -73,18 +66,20 @@ jobs:
      - name: Checkout repo
        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f

-      - name: Pull latest selfhost Release image
-        run: docker pull bitwarden/web:latest
+      - name: Pull latest selfhost rc image
+        run: docker pull bitwarden/web:rc

      - name: Tag version
        run: |
-          docker tag bitwarden/web:latest bitwarden/web:$_RELEASE_VERSION
+          docker tag bitwarden/web:rc bitwarden/web:latest
+          docker tag bitwarden/web:rc bitwarden/web:$_RELEASE_VERSION

      - name: List Docker images
        run: docker images

      - name: Push images
        run: |
+          docker push bitwarden/web:latest
          docker push bitwarden/web:$_RELEASE_VERSION
        env:
          DOCKER_CONTENT_TRUST: 1
@@ -113,9 +108,7 @@ jobs:
        run: |
          git switch -c deploy-$_TAG_VERSION
          git push -u origin deploy-$_TAG_VERSION
-
-      - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+          git switch rc

      - name: Setup git config
        run: |
@@ -129,7 +122,7 @@ jobs:
        with:
          workflow: build.yml
          workflow_conclusion: success
-          branch: ${{ needs.setup.outputs.branch-name }}
+          branch: rc
          artifacts: web-*-cloud-COMMERCIAL.zip

      # This should result in a build directory in the current working directory
@@ -170,7 +163,7 @@ jobs:
        with:
          workflow: build.yml
          workflow_conclusion: success
-          branch: ${{ needs.setup.outputs.branch-name }}
+          branch: rc
          artifacts: "web-*-selfhosted-COMMERCIAL.zip,
                      web-*-selfhosted-open-source.zip"

@@ -189,4 +182,3 @@ jobs:
          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
--- a/README.md
+++ b/README.md
@@ -41,20 +41,18 @@ If you want to point the development web vault to the production APIs, you can r

 ```
 npm install
-ENV=cloud npm run build:oss:watch
+ENV=production npm run build:oss:watch
 ```

 You can also manually adjusting your API endpoint settings by adding `config/local.json` overriding any of the following values:

 ```json
 {
-    "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"],
-    },
+    "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": {
      
    }
--- a/bitwarden_license/src/app/organizations/manage/sso.component.html
+++ b/bitwarden_license/src/app/organizations/manage/sso.component.html
@@ -7,79 +7,14 @@
    <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>
-    
+<form #form (ngSubmit)="submit()" [formGroup]="data" [appApiAction]="formPromise" *ngIf="!loading">
    <div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-            <label class="form-check-label" for="enabled">{{'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>
+            <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</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">
@@ -120,24 +55,24 @@
                </div>
            </div>
            <div class="form-group">
-                <label for="authority">{{'authority' | i18n}}</label>
-                <input class="form-control" formControlName="authority" id="authority">
+                <label>{{'authority' | i18n}}</label>
+                <input class="form-control" formControlName="authority">
            </div>
            <div class="form-group">
-                <label for="clientId">{{'clientId' | i18n}}</label>
-                <input class="form-control" formControlName="clientId" id="clientId">
+                <label>{{'clientId' | i18n}}</label>
+                <input class="form-control" formControlName="clientId">
            </div>
            <div class="form-group">
-                <label for="clientSecret">{{'clientSecret' | i18n}}</label>
-                <input class="form-control" formControlName="clientSecret" id="clientSecret">
+                <label>{{'clientSecret' | i18n}}</label>
+                <input class="form-control" formControlName="clientSecret">
            </div>
            <div class="form-group">
-                <label for="metadataAddress">{{'metadataAddress' | i18n}}</label>
-                <input class="form-control" formControlName="metadataAddress" id="metadataAddress">
+                <label>{{'metadataAddress' | i18n}}</label>
+                <input class="form-control" formControlName="metadataAddress">
            </div>
            <div class="form-group">
-                <label for="redirectBehavior">{{'oidcRedirectBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="redirectBehavior" id="redirectBehavior">
+                <label>{{'oidcRedirectBehavior' | i18n}}</label>
+                <select class="form-control" formControlName="redirectBehavior">
                    <option value="0">Redirect GET</option>
                    <option value="1">Form POST</option>
                </select>
@@ -152,31 +87,28 @@
                </div>
            </div>
            <div class="form-group">
-                <label for="additionalScopes">{{'additionalScopes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalScopes" id="additionalScopes">
+                <label>{{'additionalScopes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalScopes">
            </div>
            <div class="form-group">
-                <label for="additionalUserIdClaimTypes">{{'additionalUserIdClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalUserIdClaimTypes"
-                    id="additionalUserIdClaimTypes">
+                <label>{{'additionalUserIdClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalUserIdClaimTypes">
            </div>
            <div class="form-group">
-                <label for="additionalEmailClaimTypes">{{'additionalEmailClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalEmailClaimTypes"
-                    id="additionalEmailClaimTypes">
+                <label>{{'additionalEmailClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalEmailClaimTypes">
            </div>
            <div class="form-group">
-                <label for="additionalNameClaimTypes">{{'additionalNameClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalNameClaimTypes"
-                    id="additionalNameClaimTypes">
+                <label>{{'additionalNameClaimTypes' | i18n}}</label>
+                <input class="form-control" formControlName="additionalNameClaimTypes">
            </div>
            <div class="form-group">
-                <label for="acrValues">{{'acrValues' | i18n}}</label>
-                <input class="form-control" formControlName="acrValues" id="acrValues">
+                <label>{{'acrValues' | i18n}}</label>
+                <input class="form-control" formControlName="acrValues">
            </div>
            <div class="form-group">
-                <label for="expectedReturnAcrValue">{{'expectedReturnAcrValue' | i18n}}</label>
-                <input class="form-control" formControlName="expectedReturnAcrValue" id="expectedReturnAcrValue">
+                <label>{{'expectedReturnAcrValue' | i18n}}</label>
+                <input class="form-control" formControlName="expectedReturnAcrValue">
            </div>
        </div>
    </div>
@@ -230,8 +162,8 @@
                </div>
            </div>
            <div class="form-group">
-                <label for="spNameIdFormat">{{'spNameIdFormat' | i18n}}</label>
-                <select class="form-control" formControlName="spNameIdFormat" id="spNameIdFormat">
+                <label>{{'spNameIdFormat' | i18n}}</label>
+                <select class="form-control" formControlName="spNameIdFormat">
                    <option value="0">Not Configured</option>
                    <option value="1">Unspecified</option>
                    <option value="2">Email Address</option>
@@ -244,43 +176,35 @@
                </select>
            </div>
            <div class="form-group">
-                <label for="spOutboundSigningAlgorithm">{{'spOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="spOutboundSigningAlgorithm"
-                    id="spOutboundSigningAlgorithm">
+                <label>{{'spOutboundSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="spOutboundSigningAlgorithm">
                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
                </select>
            </div>
            <div class="form-group">
-                <label for="spSigningBehavior">{{'spSigningBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="spSigningBehavior" id="spSigningBehavior">
+                <label>{{'spSigningBehavior' | i18n}}</label>
+                <select class="form-control" formControlName="spSigningBehavior">
                    <option value="0">If IdP Wants Authn Requests Signed</option>
                    <option value="1">Always</option>
                    <option value="3">Never</option>
                </select>
            </div>
            <div class="form-group">
-                <label for="spMinIncomingSigningAlgorithm">{{'spMinIncomingSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="spMinIncomingSigningAlgorithm"
-                    id="spMinIncomingSigningAlgorithm">
+                <label>{{'spMinIncomingSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="spMinIncomingSigningAlgorithm">
                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
                </select>
            </div>
            <div class="form-group">
                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="spWantAssertionsSigned"
-                        formControlName="spWantAssertionsSigned">
-                    <label class="form-check-label" for="spWantAssertionsSigned">
-                        {{'spWantAssertionsSigned' | i18n}}
-                    </label>
+                    <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>
+                    <input class="form-check-input" type="checkbox" id="spValidateCertificates" formControlName="spValidateCertificates">
+                    <label class="form-check-label" for="spValidateCertificates">{{'spValidateCertificates' | i18n}}</label>
                </div>
            </div>
        </div>
@@ -290,39 +214,36 @@
            <h2>{{'samlIdpConfig' | i18n}}</h2>

            <div class="form-group">
-                <label for="idpEntityId">{{'idpEntityId' | i18n}}</label>
-                <input class="form-control" formControlName="idpEntityId" id="idpEntityId">
+                <label>{{'idpEntityId' | i18n}}</label>
+                <input class="form-control" formControlName="idpEntityId">
            </div>
            <div class="form-group">
-                <label for="idpBindingType">{{'idpBindingType' | i18n}}</label>
-                <select class="form-control" formControlName="idpBindingType" id="idpBindingType">
+                <label>{{'idpBindingType' | i18n}}</label>
+                <select class="form-control" formControlName="idpBindingType">
                    <option value="1">Redirect</option>
                    <option value="2">HTTP POST</option>
                    <option value="4">Artifact</option>
                </select>
            </div>
            <div class="form-group">
-                <label for="idpSingleSignOnServiceUrl">{{'idpSingleSignOnServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleSignOnServiceUrl" id="idpSingleSignOnServiceUrl">
+                <label>{{'idpSingleSignOnServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="idpSingleSignOnServiceUrl">
            </div>
            <div class="form-group">
-                <label for="idpSingleLogoutServiceUrl">{{'idpSingleLogoutServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleLogoutServiceUrl" id="idpSingleLogoutServiceUrl">
+                <label>{{'idpSingleLogoutServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="idpSingleLogoutServiceUrl">
            </div>
            <div class="form-group">
-                <label for="idpArtifactResolutionServiceUrl">{{'idpArtifactResolutionServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpArtifactResolutionServiceUrl"
-                    id="idpArtifactResolutionServiceUrl">
+                <label>{{'idpArtifactResolutionServiceUrl' | i18n}}</label>
+                <input class="form-control" formControlName="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>
+                <label>{{'idpX509PublicCert' | i18n}}</label>
+                <textarea formControlName="idpX509PublicCert" class="form-control form-control-sm text-monospace" rows="6"></textarea>
            </div>
            <div class="form-group">
-                <label for="idpOutboundSigningAlgorithm">{{'idpOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="idpOutboundSigningAlgorithm"
-                    id="idpOutboundSigningAlgorithm">
+                <label>{{'idpOutboundSigningAlgorithm' | i18n}}</label>
+                <select class="form-control" formControlName="idpOutboundSigningAlgorithm">
                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
                </select>
            </div>
--- a/bitwarden_license/src/app/organizations/manage/sso.component.ts
+++ b/bitwarden_license/src/app/organizations/manage/sso.component.ts
@@ -8,10 +8,6 @@ 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({
@@ -29,7 +25,6 @@ export class SsoComponent implements OnInit {

    loading = true;
    organizationId: string;
-    organization: Organization;
    formPromise: Promise<any>;

    callbackPath: string;
@@ -42,9 +37,6 @@ export class SsoComponent implements OnInit {
    data = this.fb.group({
        configType: [],

-        keyConnectorEnabled: [],
-        keyConnectorUrl: [],
-
        // OpenId
        authority: [],
        clientId: [],
@@ -80,8 +72,7 @@ export class SsoComponent implements OnInit {
    });

    constructor(private fb: FormBuilder, private route: ActivatedRoute, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private userService: UserService) { }
+        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService) { }

    async ngOnInit() {
        this.route.parent.parent.params.subscribe(async params => {
@@ -91,7 +82,6 @@ export class SsoComponent implements OnInit {
    }

    async load() {
-        this.organization = await this.userService.getOrganization(this.organizationId);
        const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);

        this.data.patchValue(ssoSettings.data);
@@ -103,8 +93,6 @@ export class SsoComponent implements OnInit {
        this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
        this.spAcsUrl = ssoSettings.urls.spAcsUrl;

-        this.keyConnectorUrl.markAsDirty();
-
        this.loading = false;
    }

@@ -117,64 +105,17 @@ export class SsoComponent implements OnInit {
    }

    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);
-    }
+        this.formPromise = this.apiService.postOrganizationSso(this.organizationId, request);

-    async validateKeyConnectorUrl() {
-        if (this.keyConnectorUrl.pristine) {
-            return;
-        }
+        const response = await this.formPromise;
+        this.data.patchValue(response.data);
+        this.enabled.setValue(response.enabled);

-        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');
+        this.formPromise = null;
+        this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
    }
 }
--- a/bitwarden_license/src/app/providers/clients/add-organization.component.html
+++ b/bitwarden_license/src/app/providers/clients/add-organization.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="addTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/bitwarden_license/src/app/providers/manage/manage.component.html
+++ b/bitwarden_license/src/app/providers/manage/manage.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
    <div class="row">
-        <div class="col-3">
+        <div class="col-md-3">
            <div class="card" *ngIf="provider">
                <div class="card-header">{{'manage' | i18n}}</div>
                <div class="list-group list-group-flush">
@@ -15,7 +15,7 @@
                </div>
            </div>
        </div>
-        <div class="col-9">
+        <div class="col-md-9 mt-4 mt-md-0">
            <router-outlet></router-outlet>
        </div>
    </div>
--- a/bitwarden_license/src/app/providers/manage/user-add-edit.component.html
+++ b/bitwarden_license/src/app/providers/manage/user-add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/bitwarden_license/src/app/providers/settings/account.component.html
+++ b/bitwarden_license/src/app/providers/settings/account.component.html
@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="provider && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="name">{{'providerName' | i18n}}</label>
                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="provider.name"
@@ -19,7 +19,7 @@
                    [(ngModel)]="provider.billingEmail" [disabled]="selfHosted">
            </div>
        </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
            <app-avatar data="{{provider.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
        </div>
    </div>
--- a/bitwarden_license/src/app/providers/setup/setup.component.html
+++ b/bitwarden_license/src/app/providers/setup/setup.component.html
@@ -8,11 +8,11 @@
    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
        <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
        <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                <label for="name">{{'providerName' | i18n}}</label>
                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
            </div>
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                <label for="billingEmail">{{'billingEmail' | i18n}}</label>
                <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail" required>
            </div>
--- a/config.js
+++ b/config.js
@@ -3,11 +3,6 @@ function load(envName) {
        ...require('./config/base.json'),
        ...loadConfig(envName),
        ...loadConfig('local'),
-        dev: {
-            ...require('./config/base.json').dev,
-            ...loadConfig(envName).dev,
-            ...loadConfig('local').dev,
-        },
    };
 }

--- a/config/base.json
+++ b/config/base.json
@@ -5,8 +5,5 @@
    "paypal": {
        "businessId": "AD3LAUZSNVPJY",
        "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
-    },
-    "dev": {
-        "allowedHosts": []
    }
 }
--- a/config/cloud.json
+++ b/config/cloud.json
@@ -8,10 +8,5 @@
    "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"
    }
 }
--- a/config/development.json
+++ b/config/development.json
@@ -1,11 +1,10 @@
 {
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840",
+    "allowedHosts": [],
    "urls": {
        "notifications": "http://localhost:61840"
-    },
-    "dev": {
-        "proxyApi": "http://localhost:4000",
-        "proxyIdentity": "http://localhost:33656",
-        "proxyEvents": "http://localhost:46273",
-        "proxyNotifications": "http://localhost:61840"
    }
 }
--- a/config/qa.json
+++ b/config/qa.json
@@ -2,10 +2,5 @@
    "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"
    }
 }
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -1,9 +1,7 @@
 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:
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "bitwarden-web",
-  "version": "2.25.1",
+  "version": "2.23.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "bitwarden-web",
-      "version": "2.25.1",
+      "version": "2.23.0",
      "hasInstallScript": true,
      "license": "GPL-3.0",
      "dependencies": {
@@ -20626,4 +20626,4 @@
      "integrity": "sha1-KOwXzwl0PtyrBW3dixsGJizHPDA="
    }
  }
-}
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "bitwarden-web",
-  "version": "2.25.1",
+  "version": "2.23.0",
  "license": "GPL-3.0",
  "repository": "https://github.com/bitwarden/web",
  "scripts": {
@@ -85,4 +85,4 @@
    "node": "~14",
    "npm": "~7"
  }
-}
+}
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
            <p class="text-center mb-4">
                <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
            </p>
--- a/src/app/accounts/lock.component.ts
+++ b/src/app/accounts/lock.component.ts
@@ -5,7 +5,6 @@ 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';
@@ -28,11 +27,9 @@ export class LockComponent extends BaseLockComponent {
        userService: UserService, cryptoService: CryptoService,
        storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
        environmentService: EnvironmentService, private routerService: RouterService,
-        stateService: StateService, apiService: ApiService, logService: LogService,
-        keyConnectorService: KeyConnectorService) {
+        stateService: StateService, apiService: ApiService, logService: LogService) {
        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
-            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService,
-            keyConnectorService);
+            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService);
    }

    async ngOnInit() {
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
            <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">
--- a/src/app/accounts/login.component.ts
+++ b/src/app/accounts/login.component.ts
@@ -55,15 +55,6 @@ export class LoginComponent extends BaseLoginComponent {
                this.stateService.save('loginRedirect',
                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
            }
-
-            // 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();
        });

--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -2,7 +2,7 @@
    <header class="header" *ngIf="layout === 'enterprise2'">
        <div class="container">
            <div class="row">
-                <div class="col-7">
+                <div class="col-md-7">
                    <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
                </div>
            </div>
@@ -10,7 +10,7 @@
    </header>
    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
        <div class="row">
-            <div class="col-7" *ngIf="layout">
+            <div class="col-md-7" *ngIf="layout">
                <div class="mt-5">
                    <div *ngIf="layout === 'enterprise2'">
                        <h2>Companies globally trust Bitwarden for password management.</h2>
@@ -38,9 +38,9 @@
                    </div>
                </div>
            </div>
-            <div [ngClass]="{'col-5': layout, 'col-12': !layout}">
+            <div [ngClass]="{'col-md-6': layout, 'col-12': !layout}">
                <div class="row justify-content-md-center mt-5">
-                    <div [ngClass]="{'col-5': !layout, 'col-12': layout}">
+                    <div [ngClass]="{'col-md-6': !layout, 'col-12': layout}">
                        <p class="lead text-center mb-4" *ngIf="!layout">{{'createAccount' | i18n}}</p>
                        <div class="card d-block">
                            <div class="card-body">
--- a/src/app/accounts/register.component.ts
+++ b/src/app/accounts/register.component.ts
@@ -68,14 +68,6 @@ 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;
            }
--- a/src/app/accounts/remove-password.component.html
+++ b/src/app/accounts/remove-password.component.html
@@ -1,31 +0,0 @@
-<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>
--- a/src/app/accounts/remove-password.component.ts
+++ b/src/app/accounts/remove-password.component.ts
@@ -1,10 +0,0 @@
-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 {
-}
--- a/src/app/accounts/two-factor-options.component.html
+++ b/src/app/accounts/two-factor-options.component.html
@@ -1,5 +1,5 @@
-<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 fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -8,46 +8,21 @@
                </button>
            </div>
            <div class="modal-body">
-                <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 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>
            </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>
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
    <div class="row justify-content-md-center mt-5">
-        <div class="col-5"
-            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+        <div class="col-md-5"
+            [ngClass]="{'col-md-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
            <p class="lead text-center mb-4">{{title}}</p>
            <div class="card d-block">
                <div class="card-body">
--- a/src/app/accounts/update-temp-password.component.html
+++ b/src/app/accounts/update-temp-password.component.html
@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
    <div class="row justify-content-md-center mt-5">
-        <div class="col-4">
+        <div class="col-md-4">
            <p class="lead text-center mb-4">{{'updateMasterPassword' | i18n}}</p>
            <div class="card d-block">
                <div class="card-body">
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -32,7 +32,6 @@ 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';
@@ -93,8 +92,7 @@ export class AppComponent implements OnDestroy, OnInit {
        private sanitizer: DomSanitizer, private searchService: SearchService,
        private notificationsService: NotificationsService, private routerService: RouterService,
        private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService, protected policyListService: PolicyListService,
-        private keyConnectorService: KeyConnectorService) { }
+        private policyService: PolicyService, protected policyListService: PolicyListService) { }

    ngOnInit() {
        this.ngZone.runOutsideAngular(() => {
@@ -165,10 +163,6 @@ 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;
                }
@@ -224,7 +218,6 @@ export class AppComponent implements OnDestroy, OnInit {
            this.policyService.clear(userId),
            this.passwordGenerationService.clear(),
            this.stateService.purge(),
-            this.keyConnectorService.clear(),
        ]);

        this.searchService.clearIndex();
--- a/src/app/common/base.people.component.ts
+++ b/src/app/common/base.people.component.ts
@@ -180,7 +180,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai

    async remove(user: UserType) {
        const confirmed = await this.platformUtilsService.showDialog(
-            this.deleteWarningMessage(user), this.userNamePipe.transform(user),
+            this.i18nService.t('removeUserConfirmation'), this.userNamePipe.transform(user),
            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');

        if (!confirmed) {
@@ -288,10 +288,6 @@ 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);
    }
--- a/src/app/components/password-reprompt.component.html
+++ b/src/app/components/password-reprompt.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()">
            <div class="modal-header">
--- a/src/app/organizations/manage/bulk/bulk-confirm.component.html
+++ b/src/app/organizations/manage/bulk/bulk-confirm.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/bulk/bulk-remove.component.html
+++ b/src/app/organizations/manage/bulk/bulk-remove.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/bulk/bulk-status.component.html
+++ b/src/app/organizations/manage/bulk/bulk-status.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
--- a/src/app/organizations/manage/manage.component.html
+++ b/src/app/organizations/manage/manage.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
    <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
            <div class="card" *ngIf="organization">
                <div class="card-header">{{'manage' | i18n}}</div>
                <div class="list-group list-group-flush">
@@ -31,7 +31,7 @@
                </div>
            </div>
        </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
            <router-outlet></router-outlet>
        </div>
    </div>
--- a/src/app/organizations/manage/people.component.ts
+++ b/src/app/organizations/manage/people.component.ts
@@ -193,7 +193,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
            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();
@@ -292,14 +291,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
        });
    }

-    protected deleteWarningMessage(user: OrganizationUserUserDetailsResponse): string {
-        if (user.usesKeyConnector) {
-            return this.i18nService.t('removeUserConfirmationKeyConnector');
-        }
-
-        return super.deleteWarningMessage(user);
-    }
-
    private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
        request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {

--- a/src/app/organizations/manage/policy-edit.component.html
+++ b/src/app/organizations/manage/policy-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
--- a/src/app/organizations/manage/reset-password.component.html
+++ b/src/app/organizations/manage/reset-password.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="resetPasswordTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="resetPasswordTitle">
    <div class="modal-dialog" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
            <div class="modal-header">
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
@@ -76,7 +76,7 @@
                        {{'permissions' | i18n}}
                    </h3>
                    <div class="row">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                            <div class="mb-3">
                                <label class="font-weight-bold mb-0">Manager Permissions</label>
                                <hr class="my-0 mr-2" />
@@ -85,7 +85,7 @@
                                </app-nested-checkbox>
                            </div>
                        </div>
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                            <div class="mb-3">
                                <label class="font-weight-bold mb-0">Admin Permissions</label>
                                <hr class="my-0 mr-2" />
--- a/src/app/organizations/manage/user-add-edit.component.ts
+++ b/src/app/organizations/manage/user-add-edit.component.ts
@@ -33,7 +33,6 @@ export class UserAddEditComponent implements OnInit {
    @Input() name: string;
    @Input() organizationUserId: string;
    @Input() organizationId: string;
-    @Input() usesKeyConnector: boolean = false;
    @Output() onSavedUser = new EventEmitter();
    @Output() onDeletedUser = new EventEmitter();

@@ -194,10 +193,9 @@ export class UserAddEditComponent implements OnInit {
            return;
        }

-        const message = this.usesKeyConnector ? 'removeUserConfirmationKeyConnector' : 'removeUserConfirmation';
        const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t(message), this.name, this.i18nService.t('yes'), this.i18nService.t('no'), 'warning'
-        );
+            this.i18nService.t('removeUserConfirmation'), this.name,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
        if (!confirmed) {
            return false;
        }
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
            <div class="modal-header">
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
            <div class="modal-header">
--- a/src/app/organizations/policies/master-password.component.html
+++ b/src/app/organizations/policies/master-password.component.html
@@ -1,7 +1,3 @@
-<app-callout type="info" *ngIf="showKeyConnectorInfo">
-    {{'keyConnectorPolicyRestriction' | i18n}}
-</app-callout>
-
 <div [formGroup]="data">
    <div class="form-group">
        <div class="form-check">
@@ -11,13 +7,13 @@
    </div>

    <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minComplexity">{{'minComplexityScore' | i18n}}</label>
            <select id="minComplexity" name="minComplexity" formControlName="minComplexity" class="form-control">
                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
            </select>
        </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minLength">{{'minLength' | i18n}}</label>
            <input id="minLength" class="form-control" type="number" min="8" name="minLength"
                formControlName="minLength">
--- a/src/app/organizations/policies/master-password.component.ts
+++ b/src/app/organizations/policies/master-password.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';

 import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { PolicyType } from 'jslib-common/enums/policyType';

@@ -31,9 +30,8 @@ export class MasterPasswordPolicyComponent extends BasePolicyComponent {
    });

    passwordScores: { name: string; value: number; }[];
-    showKeyConnectorInfo: boolean = false;

-    constructor(private fb: FormBuilder, i18nService: I18nService, private userService: UserService) {
+    constructor(private fb: FormBuilder, i18nService: I18nService) {
        super();

        this.passwordScores = [
@@ -45,10 +43,4 @@ export class MasterPasswordPolicyComponent extends BasePolicyComponent {
            { name: i18nService.t('strong') + ' (4)', value: 4 },
        ];
    }
-
-    async ngOnInit() {
-        super.ngOnInit();
-        const organization = await this.userService.getOrganization(this.policyResponse.organizationId);
-        this.showKeyConnectorInfo = organization.keyConnectorEnabled;
-    }
 }
--- a/src/app/organizations/policies/password-generator.component.html
+++ b/src/app/organizations/policies/password-generator.component.html
@@ -7,7 +7,7 @@
    </div>

    <div class="row">
-        <div class="col-6 form-group  mb-0">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group  mb-0">
            <label for="defaultType">{{'defaultType' | i18n}}</label>
            <select id="defaultType" name="defaultType" formControlName="defaultType" class="form-control">
                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
@@ -16,19 +16,19 @@
    </div>
    <h3 class="mt-4">{{'password' | i18n}}</h3>
    <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minLength">{{'minLength' | i18n}}</label>
            <input id="minLength" class="form-control" type="number" name="minLength" min="5" max="128"
                formControlName="minLength">
        </div>
    </div>
    <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minNumbers">{{'minNumbers' | i18n}}</label>
            <input id="minNumbers" class="form-control" type="number" name="minNumbers" min="0" max="9"
                formControlName="minNumbers">
        </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minSpecial">{{'minSpecial' | i18n}}</label>
            <input id="minSpecial" class="form-control" type="number" name="minSpecial" min="0" max="9"
                formControlName="minSpecial">
@@ -53,7 +53,7 @@
    </div>
    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
    <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
            <label for="minNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
            <input id="minNumberWords" class="form-control" type="number" name="minNumberWords" min="3" max="20"
                formControlName="minNumberWords">
--- a/src/app/organizations/policies/reset-password.component.html
+++ b/src/app/organizations/policies/reset-password.component.html
@@ -1,7 +1,3 @@
-<app-callout type="info" *ngIf="showKeyConnectorInfo">
-    {{'keyConnectorPolicyRestriction' | i18n}}
-</app-callout>
-
 <app-callout type="warning">
    {{'resetPasswordPolicyWarning' | i18n}}
 </app-callout>
--- a/src/app/organizations/policies/reset-password.component.ts
+++ b/src/app/organizations/policies/reset-password.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { UserService } from 'jslib-common/abstractions/user.service';

 import { PolicyType } from 'jslib-common/enums/policyType';

@@ -30,15 +29,8 @@ export class ResetPasswordPolicyComponent extends BasePolicyComponent {
    });

    defaultTypes: { name: string; value: string; }[];
-    showKeyConnectorInfo: boolean = false;

-    constructor(private fb: FormBuilder, private userService: UserService) {
+    constructor(private fb: FormBuilder) {
        super();
    }
-
-    async ngOnInit() {
-        super.ngOnInit();
-        const organization = await this.userService.getOrganization(this.policyResponse.organizationId);
-        this.showKeyConnectorInfo = organization.keyConnectorEnabled;
-    }
 }
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="name">{{'organizationName' | i18n}}</label>
                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name"
@@ -29,7 +29,7 @@
                    [(ngModel)]="org.identifier">
            </div>
        </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <app-avatar data="{{org.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
        </div>
    </div>
--- a/src/app/organizations/settings/account.component.ts
+++ b/src/app/organizations/settings/account.component.ts
@@ -4,10 +4,7 @@ import {
    ViewContainerRef,
 } from '@angular/core';

-import {
-    ActivatedRoute,
-    Router
-} from '@angular/router';
+import { ActivatedRoute } from '@angular/router';

 import { ToasterService } from 'angular2-toaster';
 import { ModalService } from 'jslib-angular/services/modal.service';
@@ -54,8 +51,7 @@ export class AccountComponent {
        private apiService: ApiService, private i18nService: I18nService,
        private toasterService: ToasterService, private route: ActivatedRoute,
        private syncService: SyncService, private platformUtilsService: PlatformUtilsService,
-        private cryptoService: CryptoService, private logService: LogService,
-        private router: Router) { }
+        private cryptoService: CryptoService, private logService: LogService) { }

    async ngOnInit() {
        this.selfHosted = this.platformUtilsService.isSelfHost();
@@ -105,9 +101,6 @@ export class AccountComponent {
    async deleteOrganization() {
        await this.modalService.openViewRef(DeleteOrganizationComponent, this.deleteModalRef, comp => {
            comp.organizationId = this.organizationId;
-            comp.onSuccess.subscribe(() => {
-                this.router.navigate(['/']);
-            });
        });
    }

--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
@@ -8,10 +8,11 @@
                </button>
            </div>
            <div class="modal-body">
-                <p>{{descriptionKey | i18n}}</p>
+                <p>{{'deleteOrganizationDesc' | i18n}}</p>
                <app-callout type="warning">{{'deleteOrganizationWarning' | i18n}}</app-callout>
-                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
-                </app-verify-master-password>
+                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+                    [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
--- a/src/app/organizations/settings/delete-organization.component.ts
+++ b/src/app/organizations/settings/delete-organization.component.ts
@@ -1,17 +1,14 @@
-import {
-    Component,
-    EventEmitter,
-    Output,
-} from '@angular/core';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';

 import { ToasterService } from 'angular2-toaster';

-import { Verification } from 'jslib-common/types/verification';
-
 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 { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
+
+import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';

@Component({
    selector: 'app-delete-organization',
@@ -19,24 +16,29 @@ import { UserVerificationService } from 'jslib-common/abstractions/userVerificat
 })
 export class DeleteOrganizationComponent {
    organizationId: string;
-    descriptionKey = 'deleteOrganizationDesc';
-    @Output() onSuccess: EventEmitter<any> = new EventEmitter();

-    masterPassword: Verification;
+    masterPassword: string;
    formPromise: Promise<any>;

    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
-        private logService: LogService) { }
+        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private router: Router, private logService: LogService) { }

    async submit() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
        try {
-            this.formPromise = this.userVerificationService.buildRequest(this.masterPassword)
-                .then(request => this.apiService.deleteOrganization(this.organizationId, request));
+            this.formPromise = this.apiService.deleteOrganization(this.organizationId, request);
            await this.formPromise;
            this.toasterService.popAsync('success', this.i18nService.t('organizationDeleted'),
                this.i18nService.t('organizationDeletedDesc'));
-            this.onSuccess.emit();
+            this.router.navigate(['/']);
        } catch (e) {
            this.logService.error(e);
        }
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -4,7 +4,7 @@
                aria-hidden="true">&times;</span></button>
        <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
        <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6">
                <div class="d-flex">
                    <label for="installationId">{{'enterInstallationId' | i18n}}</label>
                    <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/src/app/organizations/settings/organization-subscription.component.html
@@ -32,7 +32,7 @@
                    <ng-container *ngIf="subscription">
                        <dt>{{'status' | i18n}}</dt>
                        <dd>
-                            <span class="text-capitalize">{{isSponsoredSubscription ? 'sponsored' : subscription.status || '-'}}</span>
+                            <span class="text-capitalize">{{subscription.status || '-'}}</span>
                            <span class="badge badge-warning"
                                *ngIf="subscriptionMarkedForCancel">{{'pendingCancellation' |
                                i18n}}</span>
@@ -45,7 +45,7 @@
                    </ng-container>
                    </dl>
                    </div>
-            <div class="col-8" *ngIf="subscription">
+            <div class="col-8">
                <strong class="d-block mb-1">{{'details' | i18n}}</strong>
                <table class="table">
                    <tbody>
@@ -70,13 +70,6 @@
                </div>
            </ng-container>
        </div>
-        <ng-container>
-            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="showChangePlanButton">
-                {{'changeBillingPlan' | i18n}}
-            </button>
-            <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
-                (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
-        </ng-container>
        <h2 class="spaced-header">{{'manageSubscription' | i18n}}</h2>
        <p class="mb-4">{{subscriptionDesc}}</p>
        <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
@@ -86,12 +79,6 @@
                </app-adjust-subscription>
            </div>
        </ng-container>
-        <button #removeSponsorshipBtn type="button" class="btn btn-outline-danger btn-submit" (click)="removeSponsorship()"
-            [appApiAction]="removeSponsorshipPromise" [disabled]="removeSponsorshipBtn.loading"
-            *ngIf="isSponsoredSubscription">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span>{{'removeSponsorship' | i18n}}</span>
-        </button>
        <h2 class="spaced-header">{{'storage' | i18n}}</h2>
        <p>{{'subscriptionStorage' | i18n : sub.maxStorageGb || 0 : sub.storageName || '0 MB'}}</p>
        <div class="progress">
@@ -131,6 +118,8 @@
                <span>{{'cancelSubscription' | i18n}}</span>
            </button>
        </div>
+        <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
+            (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
        <div class="mt-3" *ngIf="showDownloadLicense">
            <app-download-license [organizationId]="organizationId" (onDownloaded)="closeDownloadLicense()"
                (onCanceled)="closeDownloadLicense()"></app-download-license>
--- a/src/app/organizations/settings/organization-subscription.component.ts
+++ b/src/app/organizations/settings/organization-subscription.component.ts
@@ -38,7 +38,6 @@ export class OrganizationSubscriptionComponent implements OnInit {

    userOrg: Organization;

-    removeSponsorshipPromise: Promise<any>;
    cancelPromise: Promise<any>;
    reinstatePromise: Promise<any>;

@@ -111,7 +110,15 @@ export class OrganizationSubscriptionComponent implements OnInit {
    }

    async changePlan() {
-        this.showChangePlan = !this.showChangePlan;
+        if (this.subscription == null && this.sub.planType === PlanType.Free) {
+            this.showChangePlan = !this.showChangePlan;
+            return;
+        }
+        const contactSupport = await this.platformUtilsService.showDialog(this.i18nService.t('changeBillingPlanDesc'),
+            this.i18nService.t('changeBillingPlan'), this.i18nService.t('contactSupport'), this.i18nService.t('close'));
+        if (contactSupport) {
+            this.platformUtilsService.launchUri('https://bitwarden.com/contact');
+        }
    }

    closeChangePlan(changed: boolean) {
@@ -157,26 +164,6 @@ export class OrganizationSubscriptionComponent implements OnInit {
        }
    }

-    async removeSponsorship() {
-        const isConfirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeSponsorshipConfirmation'),
-            this.i18nService.t('removeSponsorship'),
-            this.i18nService.t('remove'), this.i18nService.t('cancel'), 'warning');
-
-        if (!isConfirmed) {
-            return;
-        }
-
-        try {
-            this.removeSponsorshipPromise = this.apiService.deleteRemoveSponsorship(this.organizationId);
-            await this.removeSponsorshipPromise;
-            this.toasterService.popAsync('success', null, this.i18nService.t('removeSponsorshipSuccess'));
-            await this.load();
-        } catch (e) {
-            this.logService.error(e);
-        }
-    }
-
    get isExpired() {
        return this.sub != null && this.sub.expiration != null &&
            new Date(this.sub.expiration) < new Date();
@@ -228,25 +215,13 @@ export class OrganizationSubscriptionComponent implements OnInit {
        return this.sub.plan.hasAdditionalSeatsOption;
    }

-    get isSponsoredSubscription(): boolean {
-        return this.sub.subscription?.items.some(i => i.sponsoredSubscriptionItem);
-    }
-
    get canDownloadLicense() {
        return (this.sub.planType !== PlanType.Free && this.subscription == null) ||
            (this.subscription != null && !this.subscription.cancelled);
    }

    get subscriptionDesc() {
-        if (this.sub.planType === PlanType.Free) {
-            return this.i18nService.t('subscriptionFreePlan', this.sub.seats.toString());
-        } else if (this.sub.planType === PlanType.FamiliesAnnually || this.sub.planType === PlanType.FamiliesAnnually2019) {
-            if (this.isSponsoredSubscription) {
-                return this.i18nService.t('subscriptionSponsoredFamiliesPlan', this.sub.seats.toString());
-            } else {
-                return this.i18nService.t('subscriptionFamiliesPlan', this.sub.seats.toString());
-            }
-        } else if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
+        if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
            return this.i18nService.t('subscriptionMaxReached', this.sub.seats.toString());
        } else if (this.sub.maxAutoscaleSeats == null) {
            return this.i18nService.t('subscriptionUserSeatsUnlimitedAutoscale');
@@ -254,8 +229,4 @@ export class OrganizationSubscriptionComponent implements OnInit {
            return this.i18nService.t('subscriptionUserSeatsLimitedAutoscale', this.sub.maxAutoscaleSeats.toString());
        }
    }
-
-    get showChangePlanButton() {
-        return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
-    }
 }
--- a/src/app/organizations/settings/settings.component.html
+++ b/src/app/organizations/settings/settings.component.html
@@ -1,6 +1,6 @@
 <div class="container page-content">
    <div class="row">
-        <div class="col-3">
+        <div class="col-md-4 col-lg-3 mt-4 mt-md-0">
            <div class="card">
                <div class="card-header">{{'settings' | i18n}}</div>
                <div class="list-group list-group-flush">
@@ -19,7 +19,7 @@
                </div>
            </div>
        </div>
-        <div class="col-9">
+        <div class="col-md-8 col-lg-9 mt-4 mt-md-0">
            <router-outlet></router-outlet>
        </div>
    </div>
--- a/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
+++ b/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
@@ -1,36 +0,0 @@
-<div class="container page-content">
-    <div class="page-header">
-        <h1>{{'sponsoredFamiliesOffer' | i18n}}</h1>
-    </div>
-    <div *ngIf="loading" class="mt-5 d-flex justify-content-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>
-    </div>
-    <div *ngIf="!loading && badToken" class="mt-5 d-flex justify-content-center">
-        <span>{{'badToken' | i18n}}</span>
-    </div>
-    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!loading && !badToken">
-        <p>
-            <span>{{'acceptBitwardenFamiliesHelp' | i18n}}</span>
-        </p>
-        <div class="form-group col-6">
-            <label for="availableSponsorshipOrg">{{ 'sponsoredFamiliesSelectOffer' | i18n}}</label>
-            <select id="availableSponsorshipOrg" name="Available Sponsorship Organization"
-                [(ngModel)]="selectedFamilyOrganizationId" class="form-control" required>
-                <option value="" disabled>-- {{'select' | i18n}} --</option>
-                <option value="createNew">{{'newFamiliesOrganization' | i18n}}</option>
-                <option *ngFor="let o of existingFamilyOrganizations" [ngValue]="o.id">{{o.name}}</option>
-            </select>
-        </div>
-        <div *ngIf="showNewOrganization" class="col-12">
-            <app-organization-plans></app-organization-plans>
-        </div>
-        <div class="form-group col-6" *ngIf="!showNewOrganization">
-            <button class="btn btn-primary mt-2 btn-submit" [disabled]="form.loading" type="submit">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                <span>{{'acceptOffer' | i18n}}</span>
-            </button>
-        </div>
-    </form>
-</div>
-<ng-template #deleteOrganizationTemplate></ng-template>
--- a/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts
+++ b/src/app/organizations/sponsorships/families-for-enterprise-setup.component.ts
@@ -1,149 +0,0 @@
-import {
-    Component,
-    OnInit,
-    ViewChild,
-    ViewContainerRef,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
-import {
-    Toast,
-    ToasterService,
-} from 'angular2-toaster';
-
-import { first } from 'rxjs/operators';
-
-import { ModalService } from 'jslib-angular/services/modal.service';
-import { ValidationService } from 'jslib-angular/services/validation.service';
-
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
-
-import { PlanSponsorshipType } from 'jslib-common/enums/planSponsorshipType';
-import { PlanType } from 'jslib-common/enums/planType';
-import { ProductType } from 'jslib-common/enums/productType';
-
-import { Organization } from 'jslib-common/models/domain/organization';
-
-import { OrganizationSponsorshipRedeemRequest } from 'jslib-common/models/request/organization/organizationSponsorshipRedeemRequest';
-
-import { DeleteOrganizationComponent } from 'src/app/organizations/settings/delete-organization.component';
-
-import { OrganizationPlansComponent } from 'src/app/settings/organization-plans.component';
-
-@Component({
-    selector: 'families-for-enterprise-setup',
-    templateUrl: 'families-for-enterprise-setup.component.html',
-})
-export class FamiliesForEnterpriseSetupComponent implements OnInit {
-    @ViewChild(OrganizationPlansComponent, { static: false })
-    set organizationPlansComponent(value: OrganizationPlansComponent) {
-        if (!value) {
-            return;
-        }
-
-        value.plan = PlanType.FamiliesAnnually;
-        value.product = ProductType.Families;
-        value.acceptingSponsorship = true;
-        value.onSuccess.subscribe(this.onOrganizationCreateSuccess.bind(this));
-    }
-
-    @ViewChild('deleteOrganizationTemplate', { read: ViewContainerRef, static: true }) deleteModalRef: ViewContainerRef;
-
-    loading = true;
-    badToken = false;
-    formPromise: Promise<any>;
-
-    token: string;
-    existingFamilyOrganizations: Organization[];
-
-    showNewOrganization: boolean = false;
-    _organizationPlansComponent: OrganizationPlansComponent;
-    _selectedFamilyOrganizationId: string = '';
-
-    constructor(private router: Router, private toasterService: ToasterService,
-        private i18nService: I18nService, private route: ActivatedRoute,
-        private apiService: ApiService, private syncService: SyncService,
-        private validationService: ValidationService, private userService: UserService,
-        private modalService: ModalService) { }
-
-    async ngOnInit() {
-        document.body.classList.remove('layout_frontend');
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            const error = qParams.token == null;
-            if (error) {
-                const toast: Toast = {
-                    type: 'error',
-                    title: null,
-                    body: this.i18nService.t('sponsoredFamiliesAcceptFailed'),
-                    timeout: 10000,
-                };
-                this.toasterService.popAsync(toast);
-                this.router.navigate(['/']);
-                return;
-            }
-
-            this.token = qParams.token;
-
-            await this.syncService.fullSync(true);
-            this.badToken = !await this.apiService.postPreValidateSponsorshipToken(this.token);
-            this.loading = false;
-
-            this.existingFamilyOrganizations = (await this.userService.getAllOrganizations())
-                .filter(o => o.planProductType === ProductType.Families);
-
-            if (this.existingFamilyOrganizations.length === 0) {
-                this.selectedFamilyOrganizationId = 'createNew';
-            }
-        });
-    }
-
-    async submit() {
-        this.formPromise = this.doSubmit(this._selectedFamilyOrganizationId);
-        await this.formPromise;
-        this.formPromise = null;
-    }
-
-    get selectedFamilyOrganizationId() {
-        return this._selectedFamilyOrganizationId;
-    }
-
-    set selectedFamilyOrganizationId(value: string) {
-        this._selectedFamilyOrganizationId = value;
-        this.showNewOrganization = value === 'createNew';
-    }
-
-    private async doSubmit(organizationId: string) {
-        try {
-            const request = new OrganizationSponsorshipRedeemRequest();
-            request.planSponsorshipType = PlanSponsorshipType.FamiliesForEnterprise;
-            request.sponsoredOrganizationId = organizationId;
-
-            await this.apiService.postRedeemSponsorship(this.token, request);
-            this.toasterService.popAsync('success', null, this.i18nService.t('sponsoredFamiliesOfferRedeemed'));
-            await this.syncService.fullSync(true);
-
-            this.router.navigate(['/']);
-        } catch (e) {
-            if (this.showNewOrganization) {
-                await this.modalService.openViewRef(DeleteOrganizationComponent, this.deleteModalRef, comp => {
-                    comp.organizationId = organizationId;
-                    comp.descriptionKey = 'orgCreatedSponsorshipInvalid';
-                    comp.onSuccess.subscribe(() => {
-                        this.router.navigate(['/']);
-                    });
-                });
-            }
-            this.validationService.showError(this.i18nService.t('sponsorshipTokenHasExpired'));
-        }
-    }
-
-    private async onOrganizationCreateSuccess(value: any) {
-        // Use newly created organization id
-        await this.doSubmit(value.organizationId);
-    }
-}
--- a/src/app/organizations/tools/export.component.ts
+++ b/src/app/organizations/tools/export.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';

 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
@@ -9,7 +8,6 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
-import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';

 import { ExportComponent as BaseExportComponent } from '../../tools/export.component';

@@ -21,9 +19,9 @@ export class ExportComponent extends BaseExportComponent {
    constructor(cryptoService: CryptoService, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, exportService: ExportService,
        eventService: EventService, private route: ActivatedRoute, policyService: PolicyService,
-        logService: LogService, userVerificationService: UserVerificationService, fb: FormBuilder) {
+        logService: LogService) {
        super(cryptoService, i18nService, platformUtilsService, exportService, eventService, policyService,
-            logService, userVerificationService, fb);
+            logService);
    }

    async ngOnInit() {
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -5,7 +5,7 @@
    </ng-container>
    <ng-container *ngIf="!loading">
        <div class="row">
-            <div class="col-3">
+            <div class="col-12 col-md-4 col-lg-3">
                <div class="card mb-4" *ngIf="organization.canAccessImportExport">
                    <div class="card-header">{{'tools' | i18n}}</div>
                    <div class="list-group list-group-flush">
@@ -46,7 +46,7 @@
                    </div>
                </div>
            </div>
-            <div class="col-9">
+            <div class="col-12 col-md-8 col-lg-9">
                <router-outlet></router-outlet>
            </div>
        </div>
--- a/src/app/organizations/vault/add-edit.component.ts
+++ b/src/app/organizations/vault/add-edit.component.ts
@@ -10,7 +10,6 @@ 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 { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -39,11 +38,10 @@ export class AddEditComponent extends BaseAddEditComponent {
        userService: UserService, collectionService: CollectionService,
        totpService: TotpService, passwordGenerationService: PasswordGenerationService,
        private apiService: ApiService, messagingService: MessagingService,
-        eventService: EventService, policyService: PolicyService, logService: LogService,
-        passwordRepromptService: PasswordRepromptService) {
+        eventService: EventService, policyService: PolicyService, logService: LogService) {
        super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
            userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService, policyService, passwordRepromptService, logService);
+            eventService, policyService, logService);
    }

    protected allowOwnershipAssignment() {
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,13 +1,13 @@
 <div class="container page-content">
    <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
            <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
                (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
                (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)"
                (onTrashClicked)="filterDeleted()">
            </app-org-vault-groupings>
        </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9">
            <div class="page-header d-flex">
                <h1>
                    {{'vault' | i18n}}
--- a/src/app/oss-routing.module.ts
+++ b/src/app/oss-routing.module.ts
@@ -16,7 +16,6 @@ import { LoginComponent } from './accounts/login.component';
 import { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
-import { RemovePasswordComponent } from './accounts/remove-password.component';
 import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
@@ -39,7 +38,6 @@ import {
    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
 } from './organizations/settings/two-factor-setup.component';

-import { FamiliesForEnterpriseSetupComponent } from './organizations/sponsorships/families-for-enterprise-setup.component';
 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
 import {
    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
@@ -99,7 +97,6 @@ import { Permissions } from 'jslib-common/enums/permissions';

 import { EmergencyAccessViewComponent } from './settings/emergency-access-view.component';
 import { EmergencyAccessComponent } from './settings/emergency-access.component';
-import { SponsoredFamiliesComponent } from './settings/sponsored-families.component';

 const routes: Routes = [
    {
@@ -173,12 +170,6 @@ const routes: Routes = [
                canActivate: [AuthGuardService],
                data: { titleId: 'updateTempPassword' },
            },
-            {
-                path: 'remove-password',
-                component: RemovePasswordComponent,
-                canActivate: [AuthGuardService],
-                data: { titleId: 'removeMasterPassword' },
-            },
        ],
    },
    {
@@ -225,11 +216,6 @@ const routes: Routes = [
                            },
                        ],
                    },
-                    {
-                        path: 'sponsored-families',
-                        component: SponsoredFamiliesComponent,
-                        data: { titleId: 'sponsoredFamilies' },
-                    },
                ],
            },
            {
@@ -273,7 +259,6 @@ const routes: Routes = [
                    },
                ],
            },
-            { path: 'setup/families-for-enterprise', component: FamiliesForEnterpriseSetupComponent },
        ],
    },
    {
--- a/src/app/oss.module.ts
+++ b/src/app/oss.module.ts
@@ -29,7 +29,6 @@ import { LoginComponent } from './accounts/login.component';
 import { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
-import { RemovePasswordComponent } from './accounts/remove-password.component';
 import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
@@ -90,7 +89,6 @@ import {
    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
 } from './organizations/tools/weak-passwords-report.component';

-import { FamiliesForEnterpriseSetupComponent } from './organizations/sponsorships/families-for-enterprise-setup.component';
 import { AddEditComponent as OrgAddEditComponent } from './organizations/vault/add-edit.component';
 import { AttachmentsComponent as OrgAttachmentsComponent } from './organizations/vault/attachments.component';
 import { CiphersComponent as OrgCiphersComponent } from './organizations/vault/ciphers.component';
@@ -131,8 +129,6 @@ import { PremiumComponent } from './settings/premium.component';
 import { ProfileComponent } from './settings/profile.component';
 import { PurgeVaultComponent } from './settings/purge-vault.component';
 import { SettingsComponent } from './settings/settings.component';
-import { SponsoredFamiliesComponent } from './settings/sponsored-families.component';
-import { SponsoringOrgRowComponent } from './settings/sponsoring-org-row.component';
 import { TaxInfoComponent } from './settings/tax-info.component';
 import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
@@ -181,7 +177,6 @@ import { ProvidersComponent } from './providers/providers.component';
 import { AvatarComponent } from 'jslib-angular/components/avatar.component';
 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
-import { VerifyMasterPasswordComponent } from 'jslib-angular/components/verify-master-password.component';

 import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
@@ -308,7 +303,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
        SetPasswordComponent,
        AddCreditComponent,
        AddEditComponent,
-        AddEditCustomFieldsComponent,
        AdjustPaymentComponent,
        AdjustSubscription,
        AdjustStorageComponent,
@@ -349,7 +343,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
        ExportComponent,
        ExposedPasswordsReportComponent,
        FallbackSrcDirective,
-        FamiliesForEnterpriseSetupComponent,
        FolderAddEditComponent,
        FooterComponent,
        FrontendLayoutComponent,
@@ -426,8 +419,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
        SendComponent,
        SettingsComponent,
        ShareComponent,
-        SponsoredFamiliesComponent,
-        SponsoringOrgRowComponent,
        SsoComponent,
        StopClickDirective,
        StopPropDirective,
@@ -469,8 +460,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
        ResetPasswordPolicyComponent,
        VaultTimeoutInputComponent,
        AddEditCustomFieldsComponent,
-        VerifyMasterPasswordComponent,
-        RemovePasswordComponent,
    ],
    exports: [
        A11yTitleDirective,
--- a/src/app/send/access.component.html
+++ b/src/app/send/access.component.html
@@ -6,7 +6,7 @@
        <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
            <p>{{'sendCreatorIdentifier' | i18n: creatorIdentifier }}</p>
        </div>
-        <div class="col-8" *ngIf="hideEmail">
+        <div class="col-12 col-md-8" *ngIf="hideEmail">
            <app-callout type="warning" title="{{'warning' | i18n}}">
                {{'viewSendHiddenEmailWarning' | i18n }} 
                <a href="https://bitwarden.com/help/article/receive-send/" target="_blank">{{'learnMore' | i18n}}</a>.
@@ -14,7 +14,7 @@
        </div>
    </div>
    <div class="row justify-content-center">
-        <div class="col-5">
+        <div class="col-12 col-md-5">
            <div class="card d-block">
                <div class="card-body" *ngIf="loading" class="text-center">
                    <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
            autocomplete="off">
@@ -19,7 +19,7 @@
                    </ul>
                </app-callout>
                <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                        <label for="name">{{'name' | i18n}}</label>
                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
                            [readOnly]="disableSend">
@@ -27,7 +27,7 @@
                    </div>
                </div>
                <div class="row" *ngIf="!editMode">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                        <label>{{'whatTypeOfSend' | i18n}}</label>
                        <div class="form-check" *ngFor="let o of typeOptions">
                            <input class="form-check-input" type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}"
@@ -97,20 +97,20 @@
                        [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
                    </app-send-efflux-dates>
                    <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                            <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                            <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
                                [(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
                            <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
                        </div>
-                        <div class="col-6 form-group" *ngIf="editMode">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="editMode">
                            <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
                            <input id="accessCount" class="form-control" type="text" name="AccessCount" readonly
                                [(ngModel)]="send.accessCount">
                        </div>
                    </div>
                    <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                            <label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
                            <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
                            <div class="input-group">
--- a/src/app/send/efflux-dates.component.html
+++ b/src/app/send/efflux-dates.component.html
@@ -1,5 +1,5 @@
 <div class="row" [formGroup]="datesForm">
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
        <label for="deletionDate">{{'deletionDate' | i18n}}</label>
        <ng-template #deletionDateCustom>
            <ng-container [ngSwitch]="browserPath">
@@ -48,7 +48,7 @@
        </div>
        <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
    </div>
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
        <div class="d-flex">
            <label for="expirationDate">{{'expirationDate' | i18n}}</label>
            <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -3,7 +3,7 @@
        <span>{{'sendDisabledWarning' | i18n}}</span>
    </app-callout>
    <div class="row">
-        <div class="col-3 groupings">
+        <div class="col-12 col-md-3 groupings">
            <div class="card vault-filters">
                <div class="card-header d-flex">
                    {{'filters' | i18n}}
@@ -35,7 +35,7 @@
                </div>
            </div>
        </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
            <div class="page-header d-flex">
                <h1>
                    {{'send' | i18n}}
--- a/src/app/services/event.service.ts
+++ b/src/app/services/event.service.ts
@@ -74,9 +74,6 @@ export class EventService {
            case EventType.User_UpdatedTempPassword:
                msg = humanReadableMsg = this.i18nService.t('updatedMasterPassword');
                break;
-            case EventType.User_MigratedKeyToKeyConnector:
-                msg = humanReadableMsg = this.i18nService.t('migratedKeyConnector');
-                break;
            // Cipher
            case EventType.Cipher_Created:
                msg = this.i18nService.t('createdItemId', this.formatCipherId(ev, options));
@@ -213,10 +210,6 @@ export class EventService {
                msg = this.i18nService.t('eventResetSsoLink', this.formatOrgUserId(ev));
                humanReadableMsg = this.i18nService.t('eventResetSsoLink', this.getShortId(ev.organizationUserId));
                break;
-            case EventType.OrganizationUser_FirstSsoLogin:
-                msg = this.i18nService.t('firstSsoLogin', this.formatOrgUserId(ev));
-                humanReadableMsg = this.i18nService.t('firstSsoLogin', this.getShortId(ev.organizationUserId));
-                break;
            // Org
            case EventType.Organization_Updated:
                msg = humanReadableMsg = this.i18nService.t('editedOrgSettings');
@@ -232,18 +225,6 @@ export class EventService {
            case EventType.Organization_VaultAccessed:
                msg = humanReadableMsg = this.i18nService.t('vaultAccessedByProvider');
                break;
-            case EventType.Organization_EnabledSso:
-                msg = humanReadableMsg = this.i18nService.t('enabledSso');
-                break;
-            case EventType.Organization_DisabledSso:
-                msg = humanReadableMsg = this.i18nService.t('disabledSso');
-                break;
-            case EventType.Organization_EnabledKeyConnector:
-                msg = humanReadableMsg = this.i18nService.t('enabledKeyConnector');
-                break;
-            case EventType.Organization_DisabledKeyConnector:
-                msg = humanReadableMsg = this.i18nService.t('disabledKeyConnector');
-                break;
            // Policies
            case EventType.Policy_Updated:
                msg = this.i18nService.t('modifiedPolicyId', this.formatPolicyId(ev));
--- a/src/app/services/services.module.ts
+++ b/src/app/services/services.module.ts
@@ -42,7 +42,6 @@ import { ExportService } from 'jslib-common/services/export.service';
 import { FileUploadService } from 'jslib-common/services/fileUpload.service';
 import { FolderService } from 'jslib-common/services/folder.service';
 import { ImportService } from 'jslib-common/services/import.service';
-import { KeyConnectorService } from 'jslib-common/services/keyConnector.service';
 import { NotificationsService } from 'jslib-common/services/notifications.service';
 import { PasswordGenerationService } from 'jslib-common/services/passwordGeneration.service';
 import { PolicyService } from 'jslib-common/services/policy.service';
@@ -54,7 +53,6 @@ import { SyncService } from 'jslib-common/services/sync.service';
 import { TokenService } from 'jslib-common/services/token.service';
 import { TotpService } from 'jslib-common/services/totp.service';
 import { UserService } from 'jslib-common/services/user.service';
-import { UserVerificationService } from 'jslib-common/services/userVerification.service';
 import { VaultTimeoutService } from 'jslib-common/services/vaultTimeout.service';
 import { WebCryptoFunctionService } from 'jslib-common/services/webCryptoFunction.service';

@@ -72,7 +70,6 @@ import { FileUploadService as FileUploadServiceAbstraction }  from 'jslib-common
 import { FolderService as FolderServiceAbstraction } from 'jslib-common/abstractions/folder.service';
 import { I18nService as I18nServiceAbstraction } from 'jslib-common/abstractions/i18n.service';
 import { ImportService as ImportServiceAbstraction } from 'jslib-common/abstractions/import.service';
-import { KeyConnectorService as KeyConnectorServiceAbstraction } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService as MessagingServiceAbstraction } from 'jslib-common/abstractions/messaging.service';
 import { NotificationsService as NotificationsServiceAbstraction } from 'jslib-common/abstractions/notifications.service';
@@ -91,7 +88,6 @@ import { SyncService as SyncServiceAbstraction } from 'jslib-common/abstractions
 import { TokenService as TokenServiceAbstraction } from 'jslib-common/abstractions/token.service';
 import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions/totp.service';
 import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
-import { UserVerificationService as UserVerificationServiceAbstraction } from 'jslib-common/abstractions/userVerification.service';
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
 import { ModalService } from './modal.service';

@@ -128,21 +124,18 @@ searchService = new SearchService(cipherService, consoleLogService, i18nService)
 const policyService = new PolicyService(userService, storageService, apiService);
 const sendService = new SendService(cryptoService, userService, apiService, fileUploadService, storageService,
    i18nService, cryptoFunctionService);
-const keyConnectorService = new KeyConnectorService(storageService, userService, cryptoService, apiService,
-    tokenService, consoleLogService);
 const vaultTimeoutService = new VaultTimeoutService(cipherService, folderService, collectionService,
    cryptoService, platformUtilsService, storageService, messagingService, searchService, userService, tokenService,
-    policyService, keyConnectorService, null, async () => messagingService.send('logout', { expired: false }));
+    policyService, null, async () => messagingService.send('logout', { expired: false }));
 const syncService = new SyncService(userService, apiService, settingsService,
    folderService, cipherService, cryptoService, collectionService, storageService, messagingService, policyService,
-    sendService, consoleLogService, tokenService, keyConnectorService,
-    async (expired: boolean) => messagingService.send('logout', { expired: expired }));
+    sendService, consoleLogService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));
 const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService, policyService);
 const totpService = new TotpService(storageService, cryptoFunctionService, consoleLogService);
 const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService,
    userService, tokenService, appIdService, i18nService, platformUtilsService, messagingService, vaultTimeoutService,
-    consoleLogService, cryptoFunctionService, environmentService, keyConnectorService);
+    consoleLogService);
 const exportService = new ExportService(folderService, cipherService, apiService, cryptoService);
 const importService = new ImportService(cipherService, folderService, apiService, i18nService, collectionService,
    platformUtilsService, cryptoService);
@@ -150,7 +143,6 @@ const notificationsService = new NotificationsService(userService, syncService,
    environmentService, async () => messagingService.send('logout', { expired: true }), consoleLogService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService, consoleLogService);
-const userVerificationService = new UserVerificationService(cryptoService, i18nService, apiService);

 containerService.attachToWindow(window);

@@ -234,8 +226,6 @@ export function initFactory(): Function {
        { provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
        { provide: PolicyServiceAbstraction, useValue: policyService },
        { provide: SendServiceAbstraction, useValue: sendService },
-        { provide: KeyConnectorServiceAbstraction, useValue: keyConnectorService },
-        { provide: UserVerificationServiceAbstraction, useValue: userVerificationService },
        { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
        { provide: LogService, useValue: consoleLogService },
        {
--- a/src/app/settings/account.component.html
+++ b/src/app/settings/account.component.html
@@ -2,24 +2,18 @@
    <h1>{{'myAccount' | i18n}}</h1>
 </div>
 <app-profile></app-profile>
-<ng-container *ngIf="showChangeEmail">
-    <div class="secondary-header">
-        <h1>{{'changeEmail' | i18n}}</h1>
-    </div>
-    <app-change-email></app-change-email>
-</ng-container>
-<ng-container *ngIf="showChangePassword">
-    <div class="secondary-header">
-        <h1>{{'changeMasterPassword' | i18n}}</h1>
-    </div>
-    <app-change-password></app-change-password>
-</ng-container>
-<ng-container *ngIf="showChangeKdf">
-    <div class="secondary-header">
-        <h1>{{'encKeySettings' | i18n}}</h1>
-    </div>
-    <app-change-kdf></app-change-kdf>
-</ng-container>
+<div class="secondary-header">
+    <h1>{{'changeEmail' | i18n}}</h1>
+</div>
+<app-change-email></app-change-email>
+<div class="secondary-header">
+    <h1>{{'changeMasterPassword' | i18n}}</h1>
+</div>
+<app-change-password></app-change-password>
+<div class="secondary-header">
+    <h1>{{'encKeySettings' | i18n}}</h1>
+</div>
+<app-change-kdf></app-change-kdf>
 <div class="secondary-header border-0 mb-0">
    <h1>{{'apiKey' | i18n}}</h1>
 </div>
--- a/src/app/settings/account.component.ts
+++ b/src/app/settings/account.component.ts
@@ -10,7 +10,6 @@ import { DeleteAccountComponent } from './delete-account.component';
 import { PurgeVaultComponent } from './purge-vault.component';

 import { ApiService } from 'jslib-common/abstractions/api.service';
-import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { UserService } from 'jslib-common/abstractions/user.service';

 import { ModalService } from 'jslib-angular/services/modal.service';
@@ -26,17 +25,8 @@ export class AccountComponent {
    @ViewChild('viewUserApiKeyTemplate', { read: ViewContainerRef, static: true }) viewUserApiKeyModalRef: ViewContainerRef;
    @ViewChild('rotateUserApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateUserApiKeyModalRef: ViewContainerRef;

-    showChangePassword = true;
-    showChangeKdf = true;
-    showChangeEmail = true;
-
    constructor(private modalService: ModalService, private apiService: ApiService,
-        private userService: UserService, private keyConnectorService: KeyConnectorService) { }
-
-    async ngOnInit() {
-        this.showChangeEmail = this.showChangeKdf = this.showChangePassword =
-            !await this.keyConnectorService.getUsesKeyConnector();
-    }
+        private userService: UserService) { }

    async deauthorizeSessions() {
        await this.modalService.openViewRef(DeauthorizeSessionsComponent, this.deauthModalRef);
--- a/src/app/settings/add-credit.component.html
+++ b/src/app/settings/add-credit.component.html
@@ -19,7 +19,7 @@
        </div>
        <div class="form-group">
            <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-4 mt-4 mt-md-0">
                    <label for="creditAmount">{{'amount' | i18n}}</label>
                    <div class="input-group">
                        <div class="input-group-prepend"><span class="input-group-text">$USD</span></div>
--- a/src/app/settings/adjust-storage.component.html
+++ b/src/app/settings/adjust-storage.component.html
@@ -4,7 +4,7 @@
                aria-hidden="true">&times;</span></button>
        <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
        <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6">
                <label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
                <input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment"
                    [(ngModel)]="storageAdjustment" min="0" max="99" step="1" required>
--- a/src/app/settings/api-key.component.html
+++ b/src/app/settings/api-key.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="apiKeyTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
@@ -9,9 +9,11 @@
            </div>
            <div class="modal-body">
                <p>{{apiKeyDescription | i18n}}</p>
-                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret" *ngIf="!clientSecret">
-                </app-verify-master-password>
-
+                <ng-container *ngIf="!clientSecret">
+                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                    <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+                        [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
+                </ng-container>
                <app-callout type="warning" *ngIf="clientSecret">{{apiKeyWarning | i18n}}</app-callout>
                <app-callout type="info" title="{{'oauth2ClientCredentials' | i18n}}" icon="fa-key"
                    *ngIf="clientSecret">
--- a/src/app/settings/api-key.component.ts
+++ b/src/app/settings/api-key.component.ts
@@ -1,14 +1,15 @@
 import { Component } from '@angular/core';

-import { LogService } from 'jslib-common/abstractions/log.service';
-import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
+import { ToasterService } from 'angular2-toaster';

-import { SecretVerificationRequest } from 'jslib-common/models/request/secretVerificationRequest';
+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 { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';

 import { ApiKeyResponse } from 'jslib-common/models/response/apiKeyResponse';

-import { Verification } from 'jslib-common/types/verification';
-
@Component({
    selector: 'app-api-key',
    templateUrl: 'api-key.component.html',
@@ -16,7 +17,7 @@ import { Verification } from 'jslib-common/types/verification';
 export class ApiKeyComponent {
    keyType: string;
    isRotation: boolean;
-    postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
+    postKey: (entityId: string, request: PasswordVerificationRequest) => Promise<ApiKeyResponse>;
    entityId: string;
    scope: string;
    grantType: string;
@@ -24,17 +25,25 @@ export class ApiKeyComponent {
    apiKeyWarning: string;
    apiKeyDescription: string;

-    masterPassword: Verification;
+    masterPassword: string;
    formPromise: Promise<ApiKeyResponse>;
    clientId: string;
    clientSecret: string;

-    constructor(private userVerificationService: UserVerificationService, private logService: LogService) { }
+    constructor(private i18nService: I18nService, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private logService: LogService) { }

    async submit() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
        try {
-            this.formPromise = this.userVerificationService.buildRequest(this.masterPassword)
-                .then(request => this.postKey(this.entityId, request));
+            this.formPromise = this.postKey(this.entityId, request);
            const response = await this.formPromise;
            this.clientSecret = response.apiKey;
            this.clientId = `${this.keyType}.${this.entityId}`;
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -3,7 +3,7 @@
        {{'changeEmailTwoFactorWarning' | i18n}}
    </app-callout>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="masterPassword">{{'masterPass' | i18n}}</label>
                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -21,7 +21,7 @@
        <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
        <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
        <div class="row">
-            <div class="col-6">
+            <div class="col-12 col-md-6 mt-4 mt-md-0">
                <div class="form-group">
                    <label for="token">{{'code' | i18n}}</label>
                    <input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required
--- a/src/app/settings/change-kdf.component.html
+++ b/src/app/settings/change-kdf.component.html
@@ -1,7 +1,7 @@
 <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="kdfMasterPassword">{{'masterPass' | i18n}}</label>
                <input id="kdfMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -10,7 +10,7 @@
        </div>
    </div>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group mb-0">
                <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
@@ -22,7 +22,7 @@
                </select>
            </div>
        </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group mb-0">
                <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                <a class="ml-auto" href="https://bitwarden.com/help/article/what-encryption-is-used/#pbkdf2" target="_blank" rel="noopener"
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -4,7 +4,7 @@

 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
                <input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -13,7 +13,7 @@
        </div>
    </div>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
                <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
@@ -22,7 +22,7 @@
                <app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
            </div>
        </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype" class="form-control"
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deAuthTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
@@ -10,8 +10,9 @@
            <div class="modal-body">
                <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
                <app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
-                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
-                </app-verify-master-password>
+                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+                    [(ngModel)]="masterPassword" required appAutoFocus appInputVerbatim>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
--- a/src/app/settings/deauthorize-sessions.component.ts
+++ b/src/app/settings/deauthorize-sessions.component.ts
@@ -3,29 +3,36 @@ import { Component } from '@angular/core';
 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 { MessagingService } from 'jslib-common/abstractions/messaging.service';
-import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';

-import { Verification } from 'jslib-common/types/verification';
+import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';

@Component({
    selector: 'app-deauthorize-sessions',
    templateUrl: 'deauthorize-sessions.component.html',
 })
 export class DeauthorizeSessionsComponent {
-    masterPassword: Verification;
+    masterPassword: string;
    formPromise: Promise<any>;

    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
+        private toasterService: ToasterService, private cryptoService: CryptoService,
        private messagingService: MessagingService, private logService: LogService) { }

    async submit() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
        try {
-            this.formPromise = this.userVerificationService.buildRequest(this.masterPassword)
-                .then(request => this.apiService.postSecurityStamp(request));
+            this.formPromise = this.apiService.postSecurityStamp(request);
            await this.formPromise;
            this.toasterService.popAsync('success', this.i18nService.t('sessionsDeauthorized'),
                this.i18nService.t('logBackIn'));
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteAccountTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
@@ -10,8 +10,9 @@
            <div class="modal-body">
                <p>{{'deleteAccountDesc' | i18n}}</p>
                <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
-                <app-verify-master-password [(ngModel)]="masterPassword" ngDefaultControl name="secret">
-                </app-verify-master-password>
+                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
+                    [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
--- a/src/app/settings/delete-account.component.ts
+++ b/src/app/settings/delete-account.component.ts
@@ -3,29 +3,36 @@ import { Component } from '@angular/core';
 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 { MessagingService } from 'jslib-common/abstractions/messaging.service';
-import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';

-import { Verification } from 'jslib-common/types/verification';
+import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';

@Component({
    selector: 'app-delete-account',
    templateUrl: 'delete-account.component.html',
 })
 export class DeleteAccountComponent {
-    masterPassword: Verification;
+    masterPassword: string;
    formPromise: Promise<any>;

    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private userVerificationService: UserVerificationService,
+        private toasterService: ToasterService, private cryptoService: CryptoService,
        private messagingService: MessagingService, private logService: LogService) { }

    async submit() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
        try {
-            this.formPromise = this.userVerificationService.buildRequest(this.masterPassword)
-                .then(request => this.apiService.deleteAccount(request));
+            this.formPromise = this.apiService.deleteAccount(request);
            await this.formPromise;
            this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
                this.i18nService.t('accountDeletedDesc'));
--- a/src/app/settings/emergency-access-add-edit.component.html
+++ b/src/app/settings/emergency-access-add-edit.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
@@ -46,7 +46,7 @@
                        <small>{{'takeoverDesc' | i18n}}</small>
                    </label>
                </div>
-                <div class="form-group col-6 mt-4">
+                <div class="form-group col-12 col-md-6 mt-4">
                    <label for="waitTime">{{'waitTime' | i18n}}</label>
                    <select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
                        <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>
--- a/src/app/settings/emergency-access-confirm.component.html
+++ b/src/app/settings/emergency-access-confirm.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
            <div class="modal-header">
--- a/src/app/settings/emergency-access-takeover.component.html
+++ b/src/app/settings/emergency-access-takeover.component.html
@@ -1,4 +1,4 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+<div class="modal fade" tabindex="-1" 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">
@@ -15,7 +15,7 @@
                <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                </app-callout>
                <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                        <div class="form-group">
                            <label for="masterPassword">{{'newMasterPass' | i18n}}</label>
                            <input id="masterPassword" type="password" name="NewMasterPasswordHash"
@@ -26,7 +26,7 @@
                            </app-password-strength>
                        </div>
                    </div>
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                        <div class="form-group">
                            <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                            <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
--- a/src/app/settings/emergency-add-edit.component.ts
+++ b/src/app/settings/emergency-add-edit.component.ts
@@ -9,7 +9,6 @@ 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 { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -34,10 +33,10 @@ export class EmergencyAddEditComponent extends BaseAddEditComponent {
        userService: UserService, collectionService: CollectionService,
        totpService: TotpService, passwordGenerationService: PasswordGenerationService,
        messagingService: MessagingService, eventService: EventService, policyService: PolicyService,
-        logService: LogService, passwordRepromptService: PasswordRepromptService) {
+        logService: LogService) {
        super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
            userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService, policyService, passwordRepromptService, logService);
+            eventService, policyService, logService);
    }

    async load() {
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -4,7 +4,7 @@
 <p>{{'optionsDesc' | i18n}}</p>
 <form (ngSubmit)="submit()" ngNativeValidate>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl>
            </app-vault-timeout-input>
        </div>
@@ -29,7 +29,7 @@
        </div>
    </div>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <div class="d-flex">
                    <label for="locale">{{'language' | i18n}}</label>
@@ -83,7 +83,7 @@
        <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
    </div>
    <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
            <div class="form-group">
                <label for="theme">{{'theme' | i18n}}</label>
                <select id="theme" name="theme" [(ngModel)]="theme" class="form-control">
--- a/src/app/settings/organization-plans.component.html
+++ b/src/app/settings/organization-plans.component.html
@@ -21,29 +21,29 @@
    *ngIf="!loading && !selfHosted && this.plans">
    <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
    <div class="row" *ngIf="createOrganization">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="name">{{'organizationName' | i18n}}</label>
            <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
        </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="billingEmail">{{'billingEmail' | i18n}}</label>
            <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail"
                required>
        </div>
-        <div class="form-group col-6" *ngIf="!!providerId">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="!!providerId">
            <label for="email">{{'clientOwnerEmail' | i18n}}</label>
            <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="clientOwnerEmail" required>
            <small class="text-muted">{{'clientOwnerDesc' | i18n : '20'}}</small>
        </div>
    </div>
-    <div *ngIf="!providerId && !acceptingSponsorship">
+    <div *ngIf="!providerId">
        <div class="form-group form-check">
            <input id="ownedBusiness" class="form-check-input" type="checkbox" name="OwnedBusiness"
                [(ngModel)]="ownedBusiness" (change)="changedOwnedBusiness()">
            <label for="ownedBusiness" class="form-check-label">{{'accountOwnedBusiness' | i18n}}</label>
        </div>
        <div class="row" *ngIf="ownedBusiness">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                <label for="businessName">{{'businessName' | i18n}}</label>
                <input id="businessName" class="form-control" type="text" name="BusinessName"
                    [(ngModel)]="businessName">
@@ -92,7 +92,7 @@
                </small>
            </ng-template>
            <span *ngIf="selectableProduct.product != productTypes.Free">
-                <ng-container *ngIf="selectableProduct.basePrice && !acceptingSponsorship">
+                <ng-container *ngIf="selectableProduct.basePrice">
                    {{selectableProduct.basePrice / 12 | currency:'$'}} /{{'month' | i18n}},
                    {{'includesXUsers' | i18n : selectableProduct.baseSeats}}
                    <ng-container *ngIf="selectableProduct.hasAdditionalSeatsOption">
@@ -111,7 +111,7 @@
        <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
            <h2 class="mt-5">{{'users' | i18n}}</h2>
            <div class="row">
-                <div class="col-6">
+                <div class="col-12 col-md-6 mt-4 mt-md-0">
                    <label for="additionalSeats">{{'userSeats' | i18n}}</label>
                    <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                        [(ngModel)]="additionalSeats" min="1" max="100000" placeholder="{{'userSeatsDesc' | i18n}}"
@@ -122,7 +122,7 @@
        </ng-container>
        <h2 class="mt-5">{{'addons' | i18n}}</h2>
        <div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                <label for="additionalSeats">{{'additionalUserSeats' | i18n}}</label>
                <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                    [(ngModel)]="additionalSeats" min="0" max="100000" placeholder="{{'userSeatsDesc' | i18n}}">
@@ -131,7 +131,7 @@
            </div>
        </div>
        <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
                <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
                <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                    [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -141,7 +141,7 @@
            </div>
        </div>
        <div class="row">
-            <div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
+            <div class="form-group col-12 col-md-6 mt-4 mt-md-0" *ngIf="selectedPlan.hasPremiumAccessOption">
                <div class="form-check">
                    <input id="premiumAccess" class="form-check-input" type="checkbox" name="PremiumAccessAddon"
                        [(ngModel)]="premiumAccessAddon">
@@ -162,14 +162,8 @@
                        {{'basePrice' | i18n}}: {{ selectablePlan.basePrice / 12 | currency:'$'}} &times; 12
                        {{'monthAbbr' | i18n}}
                        =
-                        <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
-                            <span style="text-decoration: line-through;">{{selectablePlan.basePrice | currency:'$'}}</span>
-                            {{'freeWithSponsorship' | i18n}}
-                        </ng-container>
-                        <ng-template #notAcceptingSponsorship>
-                            {{selectablePlan.basePrice | currency:'$'}}
-                            /{{'year' | i18n}}
-                        </ng-template>
+                        {{selectablePlan.basePrice | currency:'$'}}
+                        /{{'year' | i18n}}
                    </small>
                    <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
                        <span *ngIf="selectablePlan.baseSeats">{{'additionalUsers' | i18n}}:</span>
@@ -225,9 +219,6 @@
        <hr class="my-3">
        <h2 class="spaced-header mb-4">{{ (createOrganization ? 'paymentInformation' : 'billingInformation') | i18n}}
        </h2>
-        <small class="text-muted font-italic mb-3 d-block">
-            {{paymentDesc}}
-        </small>
        <app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment>
        <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
        <div id="price" class="my-4">
@@ -238,10 +229,18 @@
                    {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
                </ng-container>
            </div>
-            <hr class="my-1 col-3 ml-0">
+            <hr class="my-1 col-6 col-md-3 ml-0">
            <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
                {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
        </div>
+        <small class="text-muted font-italic" *ngIf="freeTrial && createOrganization; else paymentChargedImmediately">
+            {{'paymentChargedWithTrial' | i18n : (selectedPlanInterval | i18n) }}
+        </small>
+        <ng-template #paymentChargedImmediately>
+            <small class="text-muted font-italic mt-2 d-block">
+                {{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}
+            </small>
+        </ng-template>
        <ng-container *ngIf="!createOrganization">
            <app-payment [showMethods]="false"></app-payment>
        </ng-container>
--- a/src/app/settings/organization-plans.component.ts
+++ b/src/app/settings/organization-plans.component.ts
@@ -48,7 +48,6 @@ export class OrganizationPlansComponent implements OnInit {
    @Input() organizationId: string;
    @Input() showFree = true;
    @Input() showCancel = false;
-    @Input() acceptingSponsorship = false;
    @Input() product: ProductType = ProductType.Free;
    @Input() plan: PlanType = PlanType.Free;
    @Input() providerId: string;
@@ -68,7 +67,7 @@ export class OrganizationPlansComponent implements OnInit {
    productTypes = ProductType;
    formPromise: Promise<any>;
    singleOrgPolicyBlock: boolean = false;
-    discount = 0;
+    freeTrial: boolean = false;

    plans: PlanResponse[];

@@ -122,17 +121,9 @@ export class OrganizationPlansComponent implements OnInit {
        }

        validPlans = validPlans
-        .filter(plan => !plan.legacyYear
-            && !plan.disabled
-            && (plan.isAnnual || plan.product === this.productTypes.Free));
-
-        if (this.acceptingSponsorship) {
-            const familyPlan = this.plans.find(plan => plan.type === PlanType.FamiliesAnnually);
-            this.discount = familyPlan.basePrice;
-            validPlans = [
-                familyPlan,
-            ];
-        }
+            .filter(plan => !plan.legacyYear
+                && !plan.disabled
+                && (plan.isAnnual || plan.product === this.productTypes.Free));

        return validPlans;
    }
@@ -182,11 +173,7 @@ export class OrganizationPlansComponent implements OnInit {
        if (this.selectedPlan.hasPremiumAccessOption && this.premiumAccessAddon) {
            subTotal += this.selectedPlan.premiumAccessOptionPrice;
        }
-        return subTotal - this.discount;
-    }
-
-    get freeTrial() {
-        return this.selectedPlan.trialPeriodDays != null;
+        return subTotal;
    }

    get taxCharges() {
@@ -199,16 +186,6 @@ export class OrganizationPlansComponent implements OnInit {
        return (this.subtotal + this.taxCharges) || 0;
    }

-    get paymentDesc() {
-        if (this.acceptingSponsorship) {
-            return this.i18nService.t('paymentSponsored');
-        } else if (this.freeTrial && this.createOrganization) {
-            return this.i18nService.t('paymentChargedWithTrial');
-        } else {
-            return this.i18nService.t('paymentCharged', this.i18nService.t(this.selectedPlanInterval));
-        }
-    }
-
    changedProduct() {
        this.plan = this.selectablePlans[0].type;
        if (!this.selectedPlan.hasPremiumAccessOption) {
@@ -223,6 +200,7 @@ export class OrganizationPlansComponent implements OnInit {
            this.selectedPlan.hasAdditionalSeatsOption) {
            this.additionalSeats = 1;
        }
+        this.freeTrial = this.selectedPlan.trialPeriodDays != null;
    }

    changedOwnedBusiness() {
@@ -255,7 +233,7 @@ export class OrganizationPlansComponent implements OnInit {
        }

        try {
-            const doSubmit = async (): Promise<string> => {
+            const doSubmit = async () => {
                let orgId: string = null;
                if (this.createOrganization) {
                    const shareKey = await this.cryptoService.makeShareKey();
@@ -279,16 +257,12 @@ export class OrganizationPlansComponent implements OnInit {

                await this.apiService.refreshIdentityToken();
                await this.syncService.fullSync(true);
-                if (!this.acceptingSponsorship) {
-                    this.router.navigate(['/organizations/' + orgId]);
-                }
-
-                return orgId;
+                this.router.navigate(['/organizations/' + orgId]);
            };

            this.formPromise = doSubmit();
-            const orgId = await this.formPromise;
-            this.onSuccess.emit({ organizationId: orgId });
+            await this.formPromise;
+            this.onSuccess.emit();
        } catch (e) {
            this.logService.error(e);
        }
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -26,19 +26,19 @@
 </div>
 <ng-container *ngIf="showMethods && method === paymentMethodType.Card">
    <div class="row">
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
            <label for="stripe-card-number-element">{{'number' | i18n}}</label>
            <div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
        </div>
-        <div class="form-group col-8 d-flex align-items-end">
+        <div class="form-group col-12 col-md-8 mt-4 mt-md-0 d-flex align-items-end">
            <img src="../../images/cards.png" alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
                width="323" height="32">
        </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
            <label for="stripe-card-expiry-element">{{'expiration' | i18n}}</label>
            <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
        </div>
-        <div class="form-group col-4">
+        <div class="form-group col-12 col-md-4 mt-4 mt-md-0">
            <div class="d-flex">
                <label for="stripe-card-cvc-element">
                    {{'securityCode' | i18n}}
@@ -57,22 +57,22 @@
        {{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
    </app-callout>
    <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="routing_number">{{'routingNumber' | i18n}}</label>
            <input id="routing_number" class="form-control" type="text" name="routing_number"
                [(ngModel)]="bank.routing_number" required appInputVerbatim>
        </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="account_number">{{'accountNumber' | i18n}}</label>
            <input id="account_number" class="form-control" type="text" name="account_number"
                [(ngModel)]="bank.account_number" required appInputVerbatim>
        </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="account_holder_name">{{'accountHolderName' | i18n}}</label>
            <input id="account_holder_name" class="form-control" type="text" name="account_holder_name"
                [(ngModel)]="bank.account_holder_name" required>
        </div>
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6 mt-4 mt-md-0">
            <label for="account_holder_type">{{'bankAccountType' | i18n}}</label>
            <select id="account_holder_type" class="form-control" name="account_holder_type"
                [(ngModel)]="bank.account_holder_type" required>
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -59,7 +59,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
    <h2 class="mt-5">{{'addons' | i18n}}</h2>
    <div class="row">
-        <div class="form-group col-6">
+        <div class="form-group col-12 col-md-6">
            <label for="additionalStorage">{{'additionalStorageGb' | i18n}}</label>
            <input id="additionalStorage" class="form-control" type="number" name="AdditionalStorageGb"
                [(ngModel)]="additionalStorage" min="0" max="99" step="1"
@@ -84,7 +84,7 @@
                {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
            </ng-container>
        </div>
-        <hr class="my-1 col-3 ml-0">
+        <hr class="my-1 col-12 col-md-3 ml-0">
        <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
            {{total | currency:'USD $'}}/{{'year' | i18n}}</p>
    </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Rittson	5ca2d19091	Reapply changes to refactored templates	2021-10-21 15:46:43 +10:00
Thomas Rittson	53e18abe4f	Fix merge errors	2021-10-21 14:51:24 +10:00
Thomas Rittson	d10afbc130	Reapply responsive changes to custom fields	2021-10-21 14:43:39 +10:00
DanHillesheim	bc8e90ecc2	Responsive Updates Initial commit for responsive and dark mode updates Further work maybe required on resolved merge conflicts	2021-10-21 14:40:09 +10:00