disable send

bump version
New Crowdin updates (#725 )
2025-12-06 00:03:28 +00:00 · 2020-12-02 15:23:54 -05:00 · 2020-12-02 15:16:39 -05:00 · 2020-12-02 15:13:29 -05:00 · 2020-11-30 11:14:21 -06:00 · 2020-11-25 15:57:11 -06:00
278 changed files with 97290 additions and 11997 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-# EditorConfig is awesome: http://EditorConfig.org
+# EditorConfig is awesome: https://EditorConfig.org

 # top-most EditorConfig file
 root = true
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,32 @@
-Code contributions are welcome! Please commit any pull requests against the `master` branch.
+# How to Contribute
+
+Contributions of all kinds are welcome!
+
+Please visit our [Community Forums](https://community.bitwarden.com/) for general community discussion and the development roadmap.
+
+Here is how you can get involved:
+
+* **Request a new feature:** Go to the [Feature Requests category](https://community.bitwarden.com/c/feature-requests/) of the Community Forums. Please search existing feature requests before making a new one
+  
+* **Write code for a new feature:** Make a new post in the [Github Contributions category](https://community.bitwarden.com/c/github-contributions/) of the Community Forums. Include a description of your proposed contribution, screeshots, and links to any relevant feature requests. This helps get feedback from the community and Bitwarden team members before you start writing code
+  
+* **Report a bug or submit a bugfix:** Use Github issues and pull requests
+  
+* **Write documentation:** Submit a pull request to the [Bitwarden help repository](https://github.com/bitwarden/help)
+  
+* **Help other users:** Go to the [User-to-User Support category](https://community.bitwarden.com/c/support/) on the Community Forums
+  
+* **Translate:** See the localization (l10n) section below
+
+## Contributor Agreement
+
+Please sign the [Contributor Agreement](https://cla-assistant.io/bitwarden/web) if you intend on contributing to any Github repository. Pull requests cannot be accepted and merged unless the author has signed the Contributor Agreement.
+
+## Pull Request Guidelines
+
+* use `npm run lint` and fix any linting suggestions before submitting a pull request
+* commit any pull requests against the `master` branch
+* include a link to your Community Forums post

 # Localization (l10n)

--- a/3
+++ b/3
@@ -5,6 +5,7 @@ LABEL com.bitwarden.product="bitwarden"
 RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        gosu \
+        curl \
 && rm -rf /var/lib/apt/lists/*

 ENV ASPNETCORE_URLS http://+:5000
@@ -14,4 +15,6 @@ COPY ./build .
 COPY entrypoint.sh /
 RUN chmod +x /entrypoint.sh

+HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
+
 ENTRYPOINT ["/entrypoint.sh"]
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -3,3 +3,50 @@ Please do not submit feature requests. The [Community Forums][1] has a
 section for submitting, voting for, and discussing product feature requests.
 [1]: https://community.bitwarden.com
 -->
+
+## Describe the Bug
+
+<!-- Comment:
+A clear and concise description of what the bug is.
+-->
+
+## Steps To Reproduce
+
+<!-- Comment:
+How can we reproduce the behavior:
+-->
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. Click on '...'
+
+## Expected Result
+
+<!-- Comment:
+A clear and concise description of what you expected to happen.
+-->
+
+## Actual Result
+
+<!-- Comment:
+A clear and concise description of what is happening.
+-->
+
+## Screenshots or Videos
+
+<!-- Comment:
+If applicable, add screenshots and/or a short video to help explain your problem.
+-->
+
+## Environment
+
+- Operating system: [e.g. Windows 10, Mac OS Catalina]
+- Browser: [e.g. Firefox 73.0.1]
+- Build Version (Bottom of the page): [2.13.0]
+
+## Additional Context
+
+<!-- Comment:
+Add any other context about the problem here.
+-->
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -0,0 +1,83 @@
+image:
+- Visual Studio 2017
+- Ubuntu1804
+
+branches:
+  except:
+    - l10n_master
+    - gh-pages
+
+services:
+- docker
+
+stack: node 10
+
+init:
+- ps: |
+    if($isWindows) {
+      Install-Product node 10
+    }
+
+install:
+- ps: |
+    $env:PACKAGE_VERSION = (Get-Content -Raw -Path .\package.json | ConvertFrom-Json).version
+    $env:PUSH_DOCKER = "false"
+    $env:PROD_DEPLOY = "false"
+    $env:TAG_NAME = ""
+    if($env:APPVEYOR_REPO_TAG -eq "true" -and $env:APPVEYOR_RE_BUILD -eq "True") {
+      $env:PROD_DEPLOY = "true"
+      $env:TAG_NAME = $env:APPVEYOR_REPO_TAG_NAME.TrimStart("v")
+      echo "This is a production deployment for ${env:TAG_NAME}."
+    }
+    if("${env:DOCKER_USERNAME}" -ne "" -and "${env:DOCKER_PASSWORD}" -ne "") {
+      $env:PUSH_DOCKER = "true"
+    }
+    if($isWindows) {
+      choco install cloc --no-progress
+      cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
+    }
+
+before_build:
+- node --version
+- npm --version
+- sh: |
+    if [ "${PUSH_DOCKER}" == "true" ]
+    then
+      echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+    fi
+- cmd: set "GIT_PATH=C:\Program Files\Git\mingw64\libexec\git-core"
+- cmd: set "PATH=%GIT_PATH%;%PATH%"
+
+build_script:
+- sh: chmod +x ./build.sh
+- ps: |
+    if($isLinux) {
+      ./build.sh
+      ./build.sh tag dev
+
+      if($env:PROD_DEPLOY -eq "true") {
+        ./build.sh tag beta
+        ./build.sh tag $env:TAG_NAME
+      }
+
+      docker images
+      
+      if($env:PUSH_DOCKER -eq "true") {
+        ./build.sh push dev
+
+        if($env:PROD_DEPLOY -eq "true") {
+          ./build.sh push beta
+          ./build.sh push latest
+          ./build.sh push $env:TAG_NAME
+        }
+      }
+    }
+- cmd: npm install
+- cmd: npm run build:prod
+
+after_build:
+- sh: |
+    if [ "${PUSH_DOCKER}" == "true" ]
+    then
+      docker logout
+    fi
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -8,3 +8,5 @@ files:
        pt-BR: pt_BR
        zh-CN: zh_CN
        zh-TW: zh_TW
+        en-GB: en_GB
+        en-IN: en_IN
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,6 +5,7 @@ const package = require('./package.json');
 const fs = require('fs');

 const paths = {
+    node_modules: './node_modules/',
    src: './src/',
    build: './build/',
    cssDir: './src/css/',
@@ -24,12 +25,13 @@ function webfonts() {
        .pipe(gulp.dest(paths.cssDir));
 };

-function version() {
+function version(cb) {
    fs.writeFileSync(paths.build + 'version.json', '{"version":"' + package.version + '"}');
+    cb();
 }

-gulp.task('clean', clean);
-gulp.task('webfonts', ['clean'], webfonts);
-gulp.task('prebuild', ['webfonts']);
-gulp.task('version', version);
-gulp.task('postdist', ['version']);
+exports.clean = clean;
+exports.webfonts = gulp.series(clean, webfonts);
+exports.prebuild = gulp.series(clean, webfonts);
+exports.version = version;
+exports.postdist = version;
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,16 @@
 {
  "name": "bitwarden-web",
-  "version": "2.5.0",
+  "version": "2.17.1",
+  "license": "GPL-3.0",
+  "repository": "https://github.com/bitwarden/web",
  "scripts": {
    "sub:init": "git submodule update --init --recursive",
    "sub:update": "git submodule update --remote",
-    "sub:pull": "git submodule foreach git pull",
+    "sub:pull": "git submodule foreach git pull origin master",
    "postinstall": "npm run sub:init",
+    "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
+    "symlink:mac": "npm run symlink:lin",
+    "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
    "build": "gulp prebuild && webpack",
    "build:watch": "gulp prebuild && webpack-dev-server",
    "build:prod": "gulp prebuild && cross-env NODE_ENV=production webpack",
@@ -23,70 +28,75 @@
    "lint:fix": "tslint src/**/*.ts --fix"
  },
  "devDependencies": {
-    "@angular/compiler-cli": "^6.1.7",
-    "@ngtools/webpack": "^6.2.1",
-    "@types/jquery": "^3.3.6",
-    "@types/lunr": "^2.1.6",
+    "@angular/compiler-cli": "^9.1.12",
+    "@ngtools/webpack": "^9.1.12",
+    "@types/jquery": "^3.5.1",
+    "@types/lunr": "^2.3.3",
+    "@types/node": "^10.17.28",
    "@types/node-forge": "^0.7.5",
    "@types/papaparse": "^4.5.3",
    "@types/webcrypto": "^0.0.28",
    "@types/webpack": "^4.4.11",
+    "@types/zxcvbn": "^4.4.0",
    "angular2-template-loader": "^0.6.2",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "del": "^3.0.0",
-    "extract-text-webpack-plugin": "next",
    "file-loader": "^2.0.0",
    "gh-pages": "^1.2.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
    "gulp-google-webfonts": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.9.3",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
-    "ts-loader": "^5.1.0",
-    "tslint": "^5.11.0",
-    "tslint-loader": "^3.6.0",
-    "typescript": "^2.7.2",
-    "webpack": "^4.18.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
+    "terser-webpack-plugin": "^1.2.3",
+    "ts-loader": "^7.0.5",
+    "tslint": "^6.1.3",
+    "tslint-loader": "^3.5.4",
+    "typescript": "3.8.3",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
-    "@angular/animations": "6.1.7",
-    "@angular/common": "6.1.7",
-    "@angular/compiler": "6.1.7",
-    "@angular/core": "6.1.7",
-    "@angular/forms": "6.1.7",
-    "@angular/http": "6.1.7",
-    "@angular/platform-browser": "6.1.7",
-    "@angular/platform-browser-dynamic": "6.1.7",
-    "@angular/router": "6.1.7",
-    "@angular/upgrade": "6.1.7",
-    "@aspnet/signalr": "1.0.4",
-    "@aspnet/signalr-protocol-msgpack": "1.0.4",
-    "angular2-toaster": "6.1.0",
-    "angulartics2": "6.3.0",
-    "bootstrap": "4.1.3",
+    "@angular/animations": "9.1.12",
+    "@angular/cdk": "9.2.4",
+    "@angular/common": "9.1.12",
+    "@angular/compiler": "9.1.12",
+    "@angular/core": "9.1.12",
+    "@angular/forms": "9.1.12",
+    "@angular/platform-browser": "9.1.12",
+    "@angular/platform-browser-dynamic": "9.1.12",
+    "@angular/router": "9.1.12",
+    "@microsoft/signalr": "3.1.0",
+    "@microsoft/signalr-protocol-msgpack": "3.1.0",
+    "angular2-toaster": "8.0.0",
+    "angulartics2": "9.1.0",
+    "big-integer": "1.6.36",
+    "bootstrap": "4.3.1",
    "braintree-web-drop-in": "1.13.0",
-    "core-js": "2.5.7",
-    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
+    "core-js": "2.6.2",
+    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git#410a9186cc34663c4913b17d6528067cd3331f1d",
    "font-awesome": "4.7.0",
-    "jquery": "3.3.1",
+    "jquery": "3.4.1",
    "lunr": "2.3.3",
-    "ngx-infinite-scroll": "6.0.1",
+    "ngx-infinite-scroll": "7.0.1",
    "node-forge": "0.7.6",
    "papaparse": "4.6.0",
    "popper.js": "1.14.4",
    "qrious": "4.0.2",
-    "rxjs": "6.3.2",
-    "sweetalert": "2.1.0",
+    "rxjs": "6.6.2",
+    "sweetalert2": "9.8.1",
+    "tslib": "^2.0.1",
    "web-animations-js": "2.3.1",
    "webcrypto-shim": "0.1.4",
    "whatwg-fetch": "3.0.0",
-    "zone.js": "0.8.26"
+    "zone.js": "0.10.3",
+    "zxcvbn": "4.4.2"
  }
 }
--- a/src/app/accounts/accept-organization.component.html
+++ b/src/app/accounts/accept-organization.component.html
@@ -2,7 +2,8 @@
    <div>
        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <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>
@@ -22,7 +23,8 @@
                        <a routerLink="/" [queryParams]="{email: email}" class="btn btn-primary btn-block">
                            {{'logIn' | i18n}}
                        </a>
-                        <a routerLink="/register" [queryParams]="{email: email}" class="btn btn-primary btn-block ml-2 mt-0">
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-primary btn-block ml-2 mt-0">
                            {{'createAccount' | i18n}}
                        </a>
                    </div>
--- a/src/app/accounts/accept-organization.component.ts
+++ b/src/app/accounts/accept-organization.component.ts
@@ -44,6 +44,7 @@ export class AcceptOrganizationComponent implements OnInit {
            fired = true;
            await this.stateService.remove('orgInvitation');
            let error = qParams.organizationId == null || qParams.organizationUserId == null || qParams.token == null;
+            let errorMessage: string = null;
            if (!error) {
                this.authed = await this.userService.isAuthenticated();
                if (this.authed) {
@@ -61,8 +62,9 @@ export class AcceptOrganizationComponent implements OnInit {
                        };
                        this.toasterService.popAsync(toast);
                        this.router.navigate(['/vault']);
-                    } catch {
+                    } catch (e) {
                        error = true;
+                        errorMessage = e.message;
                    }
                } else {
                    await this.stateService.save('orgInvitation', qParams);
@@ -76,7 +78,14 @@ export class AcceptOrganizationComponent implements OnInit {
            }

            if (error) {
-                this.toasterService.popAsync('error', null, this.i18nService.t('inviteAcceptFailed'));
+                const toast: Toast = {
+                    type: 'error',
+                    title: null,
+                    body: errorMessage != null ? this.i18nService.t('inviteAcceptFailedShort', errorMessage) :
+                        this.i18nService.t('inviteAcceptFailed'),
+                    timeout: 10000,
+                };
+                this.toasterService.popAsync(toast);
                this.router.navigate(['/']);
            }

--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -6,15 +6,15 @@
                <div class="card-body">
                    <div class="form-group">
                        <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                        <small class="form-text text-muted">{{'enterEmailToGetHint' | i18n}}</small>
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                            <span [hidden]="form.loading">{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                            {{'cancel' | i18n}}
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -1,8 +1,8 @@
-<form (ngSubmit)="submit()" class="container" ngNativeValidate>
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
    <div class="row justify-content-md-center mt-5">
        <div class="col-5">
            <p class="text-center mb-4">
-                <i class="fa fa-lock fa-4x text-muted"></i>
+                <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
            </p>
            <p class="lead text-center mx-4 mb-4">{{'yourVaultIsLocked' | i18n}}</p>
            <div class="card d-block">
@@ -10,18 +10,26 @@
                    <div class="form-group">
                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
                        <div class="d-flex">
-                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
-                                [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appAutofocus appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                            </button>
                        </div>
+                        <small class="text-muted form-text">
+                            {{'loggedInAsEmailOn' | i18n : email : webVaultHostname}}
+                        </small>
                    </div>
                    <hr>
                    <div class="d-flex">
-                        <button type="submit" class="btn btn-primary btn-block">
-                            <i class="fa fa-unlock-alt"></i>
-                            {{'unlock' | i18n}}
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>
+                                <i class="fa fa-unlock-alt" aria-hidden="true"></i> {{'unlock' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" (click)="logOut()">
                            {{'logOut' | i18n}}
--- a/src/app/accounts/lock.component.ts
+++ b/src/app/accounts/lock.component.ts
@@ -1,14 +1,16 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';

+import { ApiService } from 'jslib/abstractions/api.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';

 import { RouterService } from '../services/router.service';

@@ -18,15 +20,19 @@ import { LockComponent as BaseLockComponent } from 'jslib/angular/components/loc
    selector: 'app-lock',
    templateUrl: 'lock.component.html',
 })
-export class LockComponent extends BaseLockComponent implements OnInit {
+export class LockComponent extends BaseLockComponent {
    constructor(router: Router, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
        userService: UserService, cryptoService: CryptoService,
-        private routerService: RouterService) {
-        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService);
+        storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
+        environmentService: EnvironmentService, private routerService: RouterService,
+        stateService: StateService, apiService: ApiService) {
+        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
+            storageService, vaultTimeoutService, environmentService, stateService, apiService);
    }

    async ngOnInit() {
+        await super.ngOnInit();
        const authed = await this.userService.isAuthenticated();
        if (!authed) {
            this.router.navigate(['/']);
@@ -34,9 +40,12 @@ export class LockComponent extends BaseLockComponent implements OnInit {
            this.router.navigate(['vault']);
        }

-        const previousUrl = this.routerService.getPreviousUrl();
-        if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
-            this.successRoute = previousUrl;
-        }
+        this.onSuccessfulSubmit = () => {
+            const previousUrl = this.routerService.getPreviousUrl();
+            if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
+                this.successRoute = previousUrl;
+            }
+            this.router.navigate([this.successRoute]);
+        };
    }
 }
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -7,15 +7,19 @@
                <div class="card-body">
                    <div class="form-group">
                        <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required inputmode="email" appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            inputmode="email" appInputVerbatim="false">
                    </div>
                    <div class="form-group">
                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
                        <div class="d-flex">
-                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
-                                [(ngModel)]="masterPassword" required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                            </button>
                        </div>
                        <small class="form-text">
@@ -23,19 +27,26 @@
                        </small>
                    </div>
                    <div class="form-check">
-                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail" [(ngModel)]="rememberEmail">
+                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail"
+                            [(ngModel)]="rememberEmail">
                        <label class="form-check-label" for="rememberEmail">{{'rememberEmail' | i18n}}</label>
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                            <span>
-                                <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}
                            </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
-                        <a routerLink="/register" [queryParams]="{email: email}" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-                            <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{'createAccount' | i18n}}
+                        </a>
+                    </div>
+                    <div class="d-flex">
+                        <a routerLink="/sso" class="btn btn-outline-secondary btn-block mt-2">
+                            <i class="fa fa-bank" aria-hidden="true"></i> {{'enterpriseSingleSignOn' | i18n}}
                        </a>
                    </div>
                </div>
--- a/src/app/accounts/login.component.ts
+++ b/src/app/accounts/login.component.ts
@@ -5,7 +5,10 @@ import {
 } from '@angular/router';

 import { AuthService } from 'jslib/abstractions/auth.service';
+import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
@@ -19,14 +22,19 @@ import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/l
 export class LoginComponent extends BaseLoginComponent {
    constructor(authService: AuthService, router: Router,
        i18nService: I18nService, private route: ActivatedRoute,
-        storageService: StorageService, private stateService: StateService,
-        platformUtilsService: PlatformUtilsService) {
-        super(authService, router, platformUtilsService, i18nService, storageService);
+        storageService: StorageService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
+        passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService) {
+        super(authService, router,
+            platformUtilsService, i18nService,
+            stateService, environmentService,
+            passwordGenerationService, cryptoFunctionService,
+            storageService);
        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
    }

    async ngOnInit() {
-        this.route.queryParams.subscribe(async (qParams) => {
+        const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                this.email = qParams.email;
            }
@@ -37,6 +45,9 @@ export class LoginComponent extends BaseLoginComponent {
                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
            }
            await super.ngOnInit();
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
        });
    }

--- a/src/app/accounts/recover-delete.component.html
+++ b/src/app/accounts/recover-delete.component.html
@@ -7,14 +7,14 @@
                    <p>{{'deleteRecoverDesc' | i18n}}</p>
                    <div class="form-group">
                        <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                            <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                            {{'cancel' | i18n}}
--- a/src/app/accounts/recover-two-factor.component.html
+++ b/src/app/accounts/recover-two-factor.component.html
@@ -5,28 +5,29 @@
            <div class="card">
                <div class="card-body">
                    <p>{{'recoverAccountTwoStepDesc' | i18n}}
-                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank" rel="noopener">{{'learnMore' | i18n}}</a>
+                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank"
+                            rel="noopener">{{'learnMore' | i18n}}</a>
                    </p>
                    <div class="form-group">
                        <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                    </div>
                    <div class="form-group">
                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control" [(ngModel)]="masterPassword" required
-                            appInputVerbatim>
+                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control"
+                            [(ngModel)]="masterPassword" required appInputVerbatim>
                    </div>
                    <div class="form-group">
                        <label for="recoveryCode">{{'recoveryCodeTitle' | i18n}}</label>
-                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode" [(ngModel)]="recoveryCode" required
-                            appInputVerbatim>
+                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode"
+                            [(ngModel)]="recoveryCode" required appInputVerbatim>
                    </div>
                    <hr>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                            <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                            {{'cancel' | i18n}}
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -1,66 +1,156 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <p class="lead text-center mb-4">{{'createAccount' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <app-callout title="{{'createOrganizationStep1' | i18n}}" type="info" icon="fa-thumb-tack" *ngIf="showCreateOrgMessage">
-                        {{'createOrganizationCreatePersonalAccount' | i18n}}
-                    </app-callout>
-                    <div class="form-group">
-                        <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required [appAutofocus]="email === ''"
-                            inputmode="email" appInputVerbatim="false">
-                        <small class="form-text text-muted">{{'emailAddressDesc' | i18n}}</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="name">{{'yourName' | i18n}}</label>
-                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" [appAutofocus]="email !== ''">
-                        <small class="form-text text-muted">{{'yourNameDesc' | i18n}}</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <div class="d-flex">
-                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
-                                [(ngModel)]="masterPassword" required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                            </button>
-                        </div>
-                        <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
-                        <div class="d-flex">
-                            <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}" name="MasterPasswordRetype" class="text-monospace form-control"
-                                [(ngModel)]="confirmMasterPassword" required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="hint">{{'masterPassHint' | i18n}}</label>
-                        <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
-                        <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
-                    </div>
-                    <hr>
-                    <div class="d-flex mb-2">
-                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
-                            <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                        </button>
-                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-                            {{'cancel' | i18n}}
-                        </a>
-                    </div>
-                    <small class="text-muted" *ngIf="showTerms">
-                        {{'submitAgreePolicies' | i18n}}
-                        <a href="https://bitwarden.com/terms/" target="_blank" rel="noopener">{{'termsOfService' | i18n}}</a>,
-                        <a href="https://bitwarden.com/privacy/" target="_blank" rel="noopener">{{'privacyPolicy' | i18n}}</a>
-                    </small>
+<div class="layout" [ngClass]="['layout', layout]">
+    <header class="header" *ngIf="layout === 'enterprise2'">
+        <div class="container">
+            <div class="row">
+                <div class="col-7">
+                    <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
                </div>
            </div>
        </div>
-    </div>
-</form>
+    </header>
+    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+        <div class="row">
+            <div class="col-7" *ngIf="layout">
+                <div class="mt-5">
+                    <div *ngIf="layout === 'enterprise2'">
+                        <h2>Companies globally trust Bitwarden for password management.</h2>
+                        <p>Start your 7-day free trial!</p>
+                        <p class="highlight">Quickly deploy your <b>organization</b></p>
+                        <p>Use Bitwarden across all platforms</p>
+                        <p>Collaborate and share securely</p>
+                        <figure>
+                            <figcaption>
+                                <cite>
+                                    <img src="../../images/register-layout/wired-logo.png" alt="Wired">
+                                </cite>
+                            </figcaption>
+                            <blockquote>
+                                "Bitwarden has become a popular choice among open-source software advocates. After using
+                                it for a few months, I can see why." - February 2020
+                            </blockquote>
+                        </figure>
+                    </div>
+                    <div *ngIf="layout === 'enterprise3'">
+                        <p>Enterprise 3 layout</p>
+                    </div>
+                    <div *ngIf="layout === 'enterprise4'">
+                        <p>Enterprise 4 layout</p>
+                    </div>
+                </div>
+            </div>
+            <div [ngClass]="{'col-5': layout, 'col-12': !layout}">
+                <div class="row justify-content-md-center mt-5">
+                    <div [ngClass]="{'col-5': !layout, 'col-12': layout}">
+                        <p class="lead text-center mb-4" *ngIf="!layout">{{'createAccount' | i18n}}</p>
+                        <div class="card d-block">
+                            <div class="card-body">
+                                <app-callout title="{{'createOrganizationStep1' | i18n}}" type="info"
+                                    icon="fa-thumb-tack" *ngIf="showCreateOrgMessage">
+                                    {{'createOrganizationCreatePersonalAccount' | i18n}}
+                                </app-callout>
+                                <div class="form-group">
+                                    <label for="email">{{'emailAddress' | i18n}}</label>
+                                    <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email"
+                                        required [appAutofocus]="email === ''" inputmode="email"
+                                        appInputVerbatim="false">
+                                    <small class="form-text text-muted">{{'emailAddressDesc' | i18n}}</small>
+                                </div>
+                                <div class="form-group">
+                                    <label for="name">{{'yourName' | i18n}}</label>
+                                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name"
+                                        [appAutofocus]="email !== ''">
+                                    <small class="form-text text-muted">{{'yourNameDesc' | i18n}}</small>
+                                </div>
+                                <div class="form-group">
+                                    <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                                        {{'masterPasswordPolicyInEffect' | i18n}}
+                                        <ul class="mb-0">
+                                            <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                                {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                            </li>
+                                            <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                                {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                            </li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                                {{'policyInEffectUppercase' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                                {{'policyInEffectLowercase' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                                {{'policyInEffectNumbers' | i18n}}</li>
+                                            <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                                {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                                        </ul>
+                                    </app-callout>
+                                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                                    <div class="d-flex">
+                                        <div class="w-100">
+                                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                                name="MasterPassword" class="text-monospace form-control mb-1"
+                                                [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required
+                                                appInputVerbatim>
+                                            <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                                            </app-password-strength>
+                                        </div>
+                                        <div>
+                                            <button type="button" class="ml-1 btn btn-link"
+                                                appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                                (click)="togglePassword(false)">
+                                                <i class="fa fa-lg" aria-hidden="true"
+                                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                            </button>
+                                            <div class="progress-bar invisible"></div>
+                                        </div>
+                                    </div>
+                                    <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
+                                </div>
+                                <div class="form-group">
+                                    <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                                    <div class="d-flex">
+                                        <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                                            name="MasterPasswordRetype" class="text-monospace form-control"
+                                            [(ngModel)]="confirmMasterPassword" required appInputVerbatim>
+                                        <button type="button" class="ml-1 btn btn-link"
+                                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                                            <i class="fa fa-lg" aria-hidden="true"
+                                                [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="hint">{{'masterPassHint' | i18n}}</label>
+                                    <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
+                                    <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
+                                </div>
+                                <div class="form-group" *ngIf="showTerms">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" id="acceptPolicies"
+                                            [(ngModel)]="acceptPolicies" name="AcceptPolicies">
+                                        <label class="form-check-label small text-muted" for="acceptPolicies">
+                                            {{'acceptPolicies' | i18n}}<br>
+                                            <a href="https://bitwarden.com/terms/" target="_blank"
+                                                rel="noopener">{{'termsOfService' | i18n}}</a>,
+                                            <a href="https://bitwarden.com/privacy/" target="_blank"
+                                                rel="noopener">{{'privacyPolicy' | i18n}}</a>
+                                        </label>
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="d-flex mb-2">
+                                    <button type="submit" class="btn btn-primary btn-block btn-submit"
+                                        [disabled]="form.loading">
+                                        <span>{{'submit' | i18n}}</span>
+                                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"
+                                            aria-hidden="true"></i>
+                                    </button>
+                                    <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                                        {{'cancel' | i18n}}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
--- a/src/app/accounts/register.component.ts
+++ b/src/app/accounts/register.component.ts
@@ -8,29 +8,62 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { AuthService } from 'jslib/abstractions/auth.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
 import { StateService } from 'jslib/abstractions/state.service';

 import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/components/register.component';

+import { MasterPasswordPolicyOptions } from 'jslib/models/domain/masterPasswordPolicyOptions';
+import { Policy } from 'jslib/models/domain/policy';
+
+import { PolicyData } from 'jslib/models/data/policyData';
+import { ReferenceEventRequest } from 'jslib/models/request/referenceEventRequest';
+
@Component({
    selector: 'app-register',
    templateUrl: 'register.component.html',
 })
 export class RegisterComponent extends BaseRegisterComponent {
    showCreateOrgMessage = false;
-    showTerms = true;
+    layout = '';
+    enforcedPolicyOptions: MasterPasswordPolicyOptions;
+
+    private policies: Policy[];

    constructor(authService: AuthService, router: Router,
        i18nService: I18nService, cryptoService: CryptoService,
        apiService: ApiService, private route: ActivatedRoute,
-        stateService: StateService, platformUtilsService: PlatformUtilsService) {
-        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService);
-        this.showTerms = !platformUtilsService.isSelfHost();
+        stateService: StateService, platformUtilsService: PlatformUtilsService,
+        passwordGenerationService: PasswordGenerationService, private policyService: PolicyService) {
+        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
+            passwordGenerationService);
    }

-    ngOnInit() {
-        this.route.queryParams.subscribe((qParams) => {
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
+    async ngOnInit() {
+        const queryParamsSub = this.route.queryParams.subscribe((qParams) => {
+            this.referenceData = new ReferenceEventRequest();
            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                this.email = qParams.email;
            }
@@ -38,9 +71,51 @@ export class RegisterComponent extends BaseRegisterComponent {
                this.stateService.save('loginRedirect', { route: '/settings/premium' });
            } else if (qParams.org != null) {
                this.showCreateOrgMessage = true;
+                this.referenceData.flow = qParams.org;
                this.stateService.save('loginRedirect',
                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
            }
+            if (qParams.layout != null) {
+                this.layout = this.referenceData.layout = qParams.layout;
+            }
+            if (qParams.reference != null) {
+                this.referenceData.id = qParams.reference;
+            } else {
+                this.referenceData.id = ('; ' + document.cookie).split('; reference=').pop().split(';').shift();
+            }
+            if (this.referenceData.id === '') {
+                this.referenceData.id = null;
+            }
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
        });
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            try {
+                const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
+                    invite.email, invite.organizationUserId);
+                if (policies.data != null) {
+                    const policiesData = policies.data.map((p) => new PolicyData(p));
+                    this.policies = policiesData.map((p) => new Policy(p));
+                }
+            } catch { }
+        }
+
+        if (this.policies != null) {
+            this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(this.policies);
+        }
+    }
+
+    async submit() {
+        if (this.enforcedPolicyOptions != null &&
+            !this.policyService.evaluateMasterPassword(this.masterPasswordScore, this.masterPassword,
+                this.enforcedPolicyOptions)) {
+            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPasswordPolicyRequirementsNotMet'));
+            return;
+        }
+
+        await super.submit();
    }
 }
--- a/src/app/accounts/set-password.component.html
+++ b/src/app/accounts/set-password.component.html
@@ -0,0 +1,85 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'setMasterPassword' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body text-center" *ngIf="syncLoading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!syncLoading">
+                    <app-callout type="info">{{'ssoCompleteRegistration' | i18n}}</app-callout>
+                    <div class="form-group">
+                        <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                            {{'masterPasswordPolicyInEffect' | i18n}}
+                            <ul class="mb-0">
+                                <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                    {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                    {{'policyInEffectUppercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                    {{'policyInEffectLowercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                    {{'policyInEffectNumbers' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                    {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                            </ul>
+                        </app-callout>
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <div class="w-100">
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPasswordHash" class="text-monospace form-control mb-1"
+                                    [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required
+                                    appInputVerbatim>
+                                <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                                </app-password-strength>
+                            </div>
+                            <div>
+                                <button type="button" class="ml-1 btn btn-link"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </button>
+                                <div class="progress-bar invisible"></div>
+                            </div>
+                        </div>
+                        <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPasswordRetype" class="text-monospace form-control"
+                                [(ngModel)]="masterPasswordRetype" required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword(true)">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="hint">{{'masterPassHint' | i18n}}</label>
+                        <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
+                        <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                            <span>{{'submit' | i18n}}</span>
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" (click)="logOut()">
+                            {{'logOut' | i18n}}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
--- a/src/app/accounts/set-password.component.ts
+++ b/src/app/accounts/set-password.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
+import { SyncService } from 'jslib/abstractions/sync.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import {
+    SetPasswordComponent as BaseSetPasswordComponent,
+} from 'jslib/angular/components/set-password.component';
+
+@Component({
+    selector: 'app-set-password',
+    templateUrl: 'set-password.component.html',
+})
+export class SetPasswordComponent extends BaseSetPasswordComponent {
+    constructor(apiService: ApiService, i18nService: I18nService,
+        cryptoService: CryptoService, messagingService: MessagingService,
+        userService: UserService, passwordGenerationService: PasswordGenerationService,
+        platformUtilsService: PlatformUtilsService, policyService: PolicyService, router: Router,
+        syncService: SyncService, route: ActivatedRoute) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService, router, apiService, syncService, route);
+    }
+}
--- a/src/app/accounts/sso.component.html
+++ b/src/app/accounts/sso.component.html
@@ -0,0 +1,33 @@
+<form #form (ngSubmit)="submit()" class="container" [appApiAction]="initiateSsoFormPromise" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
+            <div class="card d-block mt-4">
+                <div class="card-body" *ngIf="loggingIn">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!loggingIn">
+                    <p>{{'ssoLogInWithOrgIdentifier' | i18n}}</p>
+                    <div class="form-group">
+                        <label for="identifier">{{'organizationIdentifier' | i18n}}</label>
+                        <input id="identifier" class="form-control" type="text" name="Identifier"
+                            [(ngModel)]="identifier" required appAutofocus>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
--- a/src/app/accounts/sso.component.ts
+++ b/src/app/accounts/sso.component.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { SsoComponent as BaseSsoComponent } from 'jslib/angular/components/sso.component';
+
+const IdentifierStorageKey = 'ssoOrgIdentifier';
+
+@Component({
+    selector: 'app-sso',
+    templateUrl: 'sso.component.html',
+})
+export class SsoComponent extends BaseSsoComponent {
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, route: ActivatedRoute,
+        storageService: StorageService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService, apiService: ApiService,
+        cryptoFunctionService: CryptoFunctionService,
+        passwordGenerationService: PasswordGenerationService) {
+        super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
+            apiService, cryptoFunctionService, passwordGenerationService);
+        this.redirectUri = window.location.origin + '/sso-connector.html';
+        this.clientId = 'web';
+    }
+
+    async ngOnInit() {
+        super.ngOnInit();
+        const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+            if (qParams.identifier != null) {
+                this.identifier = qParams.identifier;
+            } else {
+                const storedIdentifier = await this.storageService.get<string>(IdentifierStorageKey);
+                if (storedIdentifier != null) {
+                    this.identifier = storedIdentifier;
+                }
+            }
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
+        });
+    }
+
+    async submit() {
+        await this.storageService.save(IdentifierStorageKey, this.identifier);
+        if (this.clientId === 'browser') {
+            document.cookie = `ssoHandOffMessage=${this.i18nService.t('ssoHandOff')};SameSite=strict`
+        }
+        super.submit();
+    }
+}
--- a/src/app/accounts/two-factor-options.component.html
+++ b/src/app/accounts/two-factor-options.component.html
@@ -1,14 +1,15 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
-                <h2 class="modal-title">{{'twoStepOptions' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </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">
+                <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/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -1,19 +1,24 @@
 <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-5"
+            [ngClass]="{'col-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">
-                    <ng-container *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
-                        <p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
+                    <ng-container
+                        *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
+                        <p *ngIf="selectedProviderType === providerType.Authenticator">
+                            {{'enterVerificationCodeApp' | i18n}}</p>
                        <p *ngIf="selectedProviderType === providerType.Email">
                            {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
                        </p>
                        <div class="form-group">
                            <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
-                            <input id="code" type="text" name="Code" class="form-control" [(ngModel)]="token" required appAutofocus inputmode="tel" appInputVerbatim>
+                            <input id="code" type="text" name="Code" class="form-control" [(ngModel)]="token" required
+                                appAutofocus inputmode="tel" appInputVerbatim>
                            <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
-                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise" *ngIf="selectedProviderType === providerType.Email">
+                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
+                                    *ngIf="selectedProviderType === providerType.Email">
                                    {{'sendVerificationCodeEmailAgain' | i18n}}
                                </a>
                            </small>
@@ -24,13 +29,15 @@
                        <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="">
                        <div class="form-group">
                            <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
-                            <input id="code" type="password" name="Code" class="form-control" [(ngModel)]="token" required appAutofocus appInputVerbatim
-                                autocomplete="new-password">
+                            <input id="code" type="password" name="Code" class="form-control" [(ngModel)]="token"
+                                required appAutofocus appInputVerbatim autocomplete="new-password">
                        </div>
                    </ng-container>
                    <ng-container *ngIf="selectedProviderType === providerType.U2f">
                        <p class="text-center" *ngIf="!u2fReady">
-                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
                        </p>
                        <ng-container *ngIf="u2fReady">
                            <p class="text-center">{{'insertU2f' | i18n}}</p>
@@ -43,9 +50,11 @@
                            <iframe id="duo_iframe"></iframe>
                        </div>
                    </ng-container>
-                    <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}" *ngIf="form.loading && selectedProviderType === providerType.U2f"></i>
+                    <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}"
+                        *ngIf="form.loading && selectedProviderType === providerType.U2f" aria-hidden="true"></i>
                    <div class="form-check" *ngIf="selectedProviderType != null">
-                        <input id="remember" type="checkbox" name="Remember" class="form-check-input" [(ngModel)]="remember">
+                        <input id="remember" type="checkbox" name="Remember" class="form-check-input"
+                            [(ngModel)]="remember">
                        <label for="remember" class="form-check-label">{{'rememberMe' | i18n}}</label>
                    </div>
                    <ng-container *ngIf="selectedProviderType == null">
@@ -54,12 +63,13 @@
                    </ng-container>
                    <hr>
                    <div class="d-flex mb-3">
-                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading"
+                            *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
                        selectedProviderType !== providerType.OrganizationDuo && selectedProviderType !== providerType.U2f">
                            <span>
-                                <i class="fa fa-sign-in"></i> {{'continue' | i18n}}
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'continue' | i18n}}
                            </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                            {{'cancel' | i18n}}
--- a/src/app/accounts/two-factor.component.ts
+++ b/src/app/accounts/two-factor.component.ts
@@ -5,7 +5,10 @@ import {
    ViewContainerRef,
 } from '@angular/core';

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

 import { TwoFactorOptionsComponent } from './two-factor-options.component';

@@ -19,6 +22,7 @@ import { EnvironmentService } from 'jslib/abstractions/environment.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
+import { StorageService } from 'jslib/abstractions/storage.service';

 import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';

@@ -27,13 +31,15 @@ import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/comp
    templateUrl: 'two-factor.component.html',
 })
 export class TwoFactorComponent extends BaseTwoFactorComponent {
-    @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
+    @ViewChild('twoFactorOptions', { read: ViewContainerRef, static: true }) twoFactorOptionsModal: ViewContainerRef;

    constructor(authService: AuthService, router: Router,
        i18nService: I18nService, apiService: ApiService,
-        platformUtilsService: PlatformUtilsService, private stateService: StateService,
-        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver) {
-        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService);
+        platformUtilsService: PlatformUtilsService, stateService: StateService,
+        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
+        storageService: StorageService, route: ActivatedRoute) {
+        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
+            stateService, storageService, route);
        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
    }

@@ -63,7 +69,11 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
                this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
                await this.stateService.remove('loginRedirect');
            } else {
-                this.router.navigate([this.successRoute]);
+                this.router.navigate([this.successRoute], {
+                    queryParams: {
+                        identifier: this.identifier,
+                    },
+                });
            }
        }
    }
--- a/src/app/accounts/verify-email-token.component.html
+++ b/src/app/accounts/verify-email-token.component.html
@@ -2,7 +2,8 @@
    <div>
        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <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>
--- a/src/app/accounts/verify-recover-delete.component.html
+++ b/src/app/accounts/verify-recover-delete.component.html
@@ -13,7 +13,7 @@
                    <div class="d-flex">
                        <button type="submit" class="btn btn-danger btn-block btn-submit" [disabled]="form.loading">
                            <span>{{'deleteAccount' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                        </button>
                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                            {{'cancel' | i18n}}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -15,6 +15,8 @@ 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 { SetPasswordComponent } from './accounts/set-password.component';
+import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
 import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
@@ -24,20 +26,40 @@ import { EventsComponent as OrgEventsComponent } from './organizations/manage/ev
 import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
 import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
 import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';

 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
 import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
 import {
    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
 } from './organizations/settings/two-factor-setup.component';

 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
 import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';

 import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';

+import { AccessComponent } from './send/access.component';
+import { SendComponent } from './send/send.component';
+
 import { AccountComponent } from './settings/account.component';
 import { CreateOrganizationComponent } from './settings/create-organization.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
@@ -47,12 +69,18 @@ import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';

 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
 import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
 import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';

 import { VaultComponent } from './vault/vault.component';

@@ -76,6 +104,15 @@ const routes: Routes = [
                canActivate: [UnauthGuardService],
                data: { titleId: 'createAccount' },
            },
+            {
+                path: 'sso', component: SsoComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'enterpriseSingleSignOn' },
+            },
+            {
+                path: 'set-password', component: SetPasswordComponent,
+                data: { titleId: 'setMasterPassword' },
+            },
            {
                path: 'hint', component: HintComponent,
                canActivate: [UnauthGuardService],
@@ -107,6 +144,11 @@ const routes: Routes = [
                canActivate: [UnauthGuardService],
                data: { titleId: 'deleteAccount' },
            },
+            {
+                path: 'send/:sendId/:key',
+                component: AccessComponent,
+                data: { title: 'Bitwarden Send' },
+            },
        ],
    },
    {
@@ -115,6 +157,7 @@ const routes: Routes = [
        canActivate: [AuthGuardService],
        children: [
            { path: 'vault', component: VaultComponent, data: { titleId: 'myVault' } },
+            // { path: 'sends', component: SendComponent, data: { title: 'Send' } },
            {
                path: 'settings',
                component: SettingsComponent,
@@ -125,7 +168,12 @@ const routes: Routes = [
                    { path: 'domain-rules', component: DomainRulesComponent, data: { titleId: 'domainRules' } },
                    { path: 'two-factor', component: TwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
                    { path: 'premium', component: PremiumComponent, data: { titleId: 'goPremium' } },
-                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billingAndLicensing' } },
+                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billing' } },
+                    {
+                        path: 'subscription',
+                        component: UserSubscriptionComponent,
+                        data: { titleId: 'premiumMembership' },
+                    },
                    { path: 'organizations', component: OrganizationsComponent, data: { titleId: 'organizations' } },
                    {
                        path: 'create-organization',
@@ -148,6 +196,31 @@ const routes: Routes = [
                        data: { titleId: 'passwordGenerator' },
                    },
                    { path: 'breach-report', component: BreachReportComponent, data: { titleId: 'dataBreachReport' } },
+                    {
+                        path: 'reused-passwords-report',
+                        component: ReusedPasswordsReportComponent,
+                        data: { titleId: 'reusedPasswordsReport' },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: UnsecuredWebsitesReportComponent,
+                        data: { titleId: 'unsecuredWebsitesReport' },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: WeakPasswordsReportComponent,
+                        data: { titleId: 'weakPasswordsReport' },
+                    },
+                    {
+                        path: 'exposed-passwords-report',
+                        component: ExposedPasswordsReportComponent,
+                        data: { titleId: 'exposedPasswordsReport' },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: InactiveTwoFactorReportComponent,
+                        data: { titleId: 'inactive2faReport' },
+                    },
                ],
            },
        ],
@@ -168,6 +241,31 @@ const routes: Routes = [
                    { path: '', pathMatch: 'full', redirectTo: 'import' },
                    { path: 'import', component: OrgImportComponent, data: { titleId: 'importData' } },
                    { path: 'export', component: OrgExportComponent, data: { titleId: 'exportVault' } },
+                    {
+                        path: 'exposed-passwords-report',
+                        component: OrgExposedPasswordsReportComponent,
+                        data: { titleId: 'exposedPasswordsReport' },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: OrgInactiveTwoFactorReportComponent,
+                        data: { titleId: 'inactive2faReport' },
+                    },
+                    {
+                        path: 'reused-passwords-report',
+                        component: OrgReusedPasswordsReportComponent,
+                        data: { titleId: 'reusedPasswordsReport' },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: OrgUnsecuredWebsitesReportComponent,
+                        data: { titleId: 'unsecuredWebsitesReport' },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: OrgWeakPasswordsReportComponent,
+                        data: { titleId: 'weakPasswordsReport' },
+                    },
                ],
            },
            {
@@ -187,6 +285,7 @@ const routes: Routes = [
                    { path: 'events', component: OrgEventsComponent, data: { titleId: 'eventLogs' } },
                    { path: 'groups', component: OrgGroupsComponent, data: { titleId: 'groups' } },
                    { path: 'people', component: OrgPeopleComponent, data: { titleId: 'people' } },
+                    { path: 'policies', component: OrgPoliciesComponent, data: { titleId: 'policies' } },
                ],
            },
            {
@@ -201,7 +300,12 @@ const routes: Routes = [
                    {
                        path: 'billing',
                        component: OrganizationBillingComponent,
-                        data: { titleId: 'billingAndLicensing' },
+                        data: { titleId: 'billing' },
+                    },
+                    {
+                        path: 'subscription',
+                        component: OrganizationSubscriptionComponent,
+                        data: { titleId: 'subscription' },
                    },
                ],
            },
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,2 @@
-<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
+<toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
 <router-outlet></router-outlet>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import * as jq from 'jquery';
-import * as _swal from 'sweetalert';
-import { SweetAlert } from 'sweetalert/typings/core';
+import Swal from 'sweetalert2/dist/sweetalert2.js';

 import {
    BodyOutputType,
@@ -33,25 +32,26 @@ import { AuthService } from 'jslib/abstractions/auth.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { EventService } from 'jslib/abstractions/event.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
-import { LockService } from 'jslib/abstractions/lock.service';
 import { NotificationsService } from 'jslib/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
 import { SearchService } from 'jslib/abstractions/search.service';
 import { SettingsService } from 'jslib/abstractions/settings.service';
+import { StateService } from 'jslib/abstractions/state.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';

 import { ConstantsService } from 'jslib/services/constants.service';

 import { RouterService } from './services/router.service';

 const BroadcasterSubscriptionId = 'AppComponent';
-// Hack due to Angular 5.2 bug
-const swal: SweetAlert = _swal as any;
 const IdleTimeout = 60000 * 10; // 10 minutes

@Component({
@@ -78,10 +78,12 @@ export class AppComponent implements OnDestroy, OnInit {
        private authService: AuthService, private router: Router, private analytics: Angulartics2,
        private toasterService: ToasterService, private i18nService: I18nService,
        private platformUtilsService: PlatformUtilsService, private ngZone: NgZone,
-        private lockService: LockService, private storageService: StorageService,
+        private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
        private cryptoService: CryptoService, private collectionService: CollectionService,
        private sanitizer: DomSanitizer, private searchService: SearchService,
-        private notificationsService: NotificationsService) { }
+        private notificationsService: NotificationsService, private routerService: RouterService,
+        private stateService: StateService, private eventService: EventService,
+        private policyService: PolicyService) { }

    ngOnInit() {
        this.ngZone.runOutsideAngular(() => {
@@ -101,16 +103,22 @@ export class AppComponent implements OnDestroy, OnInit {
                    case 'unlocked':
                        this.notificationsService.updateConnection(false);
                        break;
+                    case 'authBlocked':
+                        this.router.navigate(['/']);
+                        break;
                    case 'logout':
                        this.logOut(!!message.expired);
                        break;
                    case 'lockVault':
-                        await this.lockService.lock();
+                        await this.vaultTimeoutService.lock();
                        break;
                    case 'locked':
                        this.notificationsService.updateConnection(false);
                        this.router.navigate(['lock']);
                        break;
+                    case 'lockedUrl':
+                        window.setTimeout(() => this.routerService.setPreviousUrl(message.url), 500);
+                        break;
                    case 'syncStarted':
                        break;
                    case 'syncCompleted':
@@ -140,6 +148,9 @@ export class AppComponent implements OnDestroy, OnInit {
                            properties: { label: message.label },
                        });
                        break;
+                    case 'setFullWidth':
+                        this.setFullWidth();
+                        break;
                    default:
                        break;
                }
@@ -154,10 +165,12 @@ export class AppComponent implements OnDestroy, OnInit {
                }

                if (document.querySelector('.swal-modal') != null) {
-                    swal.close(undefined);
+                    Swal.close(undefined);
                }
            }
        });
+
+        this.setFullWidth();
    }

    ngOnDestroy() {
@@ -165,9 +178,11 @@ export class AppComponent implements OnDestroy, OnInit {
    }

    private async logOut(expired: boolean) {
+        await this.eventService.uploadEvents();
        const userId = await this.userService.getUserId();

        await Promise.all([
+            this.eventService.clearEvents(),
            this.syncService.setLastSync(new Date(0)),
            this.tokenService.clearToken(),
            this.cryptoService.clearKeys(),
@@ -176,7 +191,9 @@ export class AppComponent implements OnDestroy, OnInit {
            this.cipherService.clear(userId),
            this.folderService.clear(userId),
            this.collectionService.clear(userId),
+            this.policyService.clear(userId),
            this.passwordGenerationService.clear(),
+            this.stateService.purge(),
        ]);

        this.searchService.clearIndex();
@@ -186,6 +203,8 @@ export class AppComponent implements OnDestroy, OnInit {
                this.toasterService.popAsync('warning', this.i18nService.t('loggedOut'),
                    this.i18nService.t('loginExpired'));
            }
+
+            Swal.close();
            this.router.navigate(['/']);
        });
    }
@@ -250,4 +269,13 @@ export class AppComponent implements OnDestroy, OnInit {
            this.notificationsService.reconnectFromActivity();
        }
    }
+
+    private async setFullWidth() {
+        const enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
+        if (enableFullWidth) {
+            document.body.classList.add('full-width');
+        } else {
+            document.body.classList.remove('full-width');
+        }
+    }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,9 +3,11 @@ import 'core-js';
 import { ToasterModule } from 'angular2-toaster';
 import { Angulartics2Module } from 'angulartics2';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';

 import { AppRoutingModule } from './app-routing.module';

+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -17,7 +19,7 @@ import { AppComponent } from './app.component';
 import { ModalComponent } from './modal.component';

 import { AvatarComponent } from './components/avatar.component';
-import { CalloutComponent } from './components/callout.component';
+import { PasswordStrengthComponent } from './components/password-strength.component';

 import { FooterComponent } from './layouts/footer.component';
 import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
@@ -32,6 +34,8 @@ 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 { SetPasswordComponent } from './accounts/set-password.component';
+import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
@@ -48,21 +52,42 @@ import { GroupAddEditComponent as OrgGroupAddEditComponent } from './organizatio
 import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
 import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
 import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';
+import { PolicyEditComponent as OrgPolicyEditComponent } from './organizations/manage/policy-edit.component';
 import { UserAddEditComponent as OrgUserAddEditComponent } from './organizations/manage/user-add-edit.component';
+import { UserConfirmComponent as OrgUserConfirmComponent } from './organizations/manage/user-confirm.component';
 import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/manage/user-groups.component';

 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
+import { ChangePlanComponent } from './organizations/settings/change-plan.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
+import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
 import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
 import {
    TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
 } from './organizations/settings/two-factor-setup.component';

 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
 import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';

 import { AddEditComponent as OrgAddEditComponent } from './organizations/vault/add-edit.component';
 import { AttachmentsComponent as OrgAttachmentsComponent } from './organizations/vault/attachments.component';
@@ -71,9 +96,15 @@ import { CollectionsComponent as OrgCollectionsComponent } from './organizations
 import { GroupingsComponent as OrgGroupingsComponent } from './organizations/vault/groupings.component';
 import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';

+import { AccessComponent } from './send/access.component';
+import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
+import { SendComponent } from './send/send.component';
+
 import { AccountComponent } from './settings/account.component';
+import { AddCreditComponent } from './settings/add-credit.component';
 import { AdjustPaymentComponent } from './settings/adjust-payment.component';
 import { AdjustStorageComponent } from './settings/adjust-storage.component';
+import { ApiKeyComponent } from './settings/api-key.component';
 import { ChangeEmailComponent } from './settings/change-email.component';
 import { ChangeKdfComponent } from './settings/change-kdf.component';
 import { ChangePasswordComponent } from './settings/change-password.component';
@@ -81,13 +112,16 @@ import { CreateOrganizationComponent } from './settings/create-organization.comp
 import { DeauthorizeSessionsComponent } from './settings/deauthorize-sessions.component';
 import { DeleteAccountComponent } from './settings/delete-account.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
+import { LinkSsoComponent } from './settings/link-sso.component';
 import { OptionsComponent } from './settings/options.component';
+import { OrganizationPlansComponent } from './settings/organization-plans.component';
 import { OrganizationsComponent } from './settings/organizations.component';
 import { PaymentComponent } from './settings/payment.component';
 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 { TaxInfoComponent } from './settings/tax-info.component';
 import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
 import { TwoFactorEmailComponent } from './settings/two-factor-email.component';
@@ -99,19 +133,27 @@ import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.compone
 import { UpdateKeyComponent } from './settings/update-key.component';
 import { UpdateLicenseComponent } from './settings/update-license.component';
 import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';
 import { VerifyEmailComponent } from './settings/verify-email.component';

 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
 import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
 import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';

 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
+import { BulkActionsComponent } from './vault/bulk-actions.component';
 import { BulkDeleteComponent } from './vault/bulk-delete.component';
 import { BulkMoveComponent } from './vault/bulk-move.component';
+import { BulkRestoreComponent } from './vault/bulk-restore.component';
 import { BulkShareComponent } from './vault/bulk-share.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CollectionsComponent } from './vault/collections.component';
@@ -120,30 +162,45 @@ import { GroupingsComponent } from './vault/groupings.component';
 import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';

+import { CalloutComponent } from 'jslib/angular/components/callout.component';
 import { IconComponent } from 'jslib/angular/components/icon.component';

+import { A11yTitleDirective } from 'jslib/angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
 import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
 import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
 import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive';
 import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive';
 import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
+import { SelectCopyDirective } from 'jslib/angular/directives/select-copy.directive';
 import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive';
 import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
 import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';

+import { ColorPasswordPipe } from 'jslib/angular/pipes/color-password.pipe';
 import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 import { SearchPipe } from 'jslib/angular/pipes/search.pipe';

-import { registerLocaleData } from '@angular/common';
+import {
+    registerLocaleData,
+    DatePipe,
+} from '@angular/common';
+import localeCa from '@angular/common/locales/ca';
 import localeCs from '@angular/common/locales/cs';
 import localeDa from '@angular/common/locales/da';
 import localeDe from '@angular/common/locales/de';
+import localeEl from '@angular/common/locales/el';
+import localeEnGb from '@angular/common/locales/en-GB';
 import localeEs from '@angular/common/locales/es';
 import localeEt from '@angular/common/locales/et';
 import localeFr from '@angular/common/locales/fr';
+import localeHe from '@angular/common/locales/he';
 import localeIt from '@angular/common/locales/it';
+import localeJa from '@angular/common/locales/ja';
+import localeKo from '@angular/common/locales/ko';
+import localeLv from '@angular/common/locales/lv';
+import localeMl from '@angular/common/locales/ml';
 import localeNb from '@angular/common/locales/nb';
 import localeNl from '@angular/common/locales/nl';
 import localePl from '@angular/common/locales/pl';
@@ -152,15 +209,25 @@ import localePtPt from '@angular/common/locales/pt-PT';
 import localeRu from '@angular/common/locales/ru';
 import localeSk from '@angular/common/locales/sk';
 import localeSv from '@angular/common/locales/sv';
+import localeUk from '@angular/common/locales/uk';
 import localeZhCn from '@angular/common/locales/zh-Hans';
+import localeZhTw from '@angular/common/locales/zh-Hant';

+registerLocaleData(localeCa, 'ca');
 registerLocaleData(localeCs, 'cs');
 registerLocaleData(localeDa, 'da');
 registerLocaleData(localeDe, 'de');
+registerLocaleData(localeEl, 'el');
+registerLocaleData(localeEnGb, 'en-GB');
 registerLocaleData(localeEs, 'es');
 registerLocaleData(localeEt, 'et');
 registerLocaleData(localeFr, 'fr');
+registerLocaleData(localeHe, 'he');
 registerLocaleData(localeIt, 'it');
+registerLocaleData(localeJa, 'ja');
+registerLocaleData(localeKo, 'ko');
+registerLocaleData(localeLv, 'lv');
+registerLocaleData(localeMl, 'ml');
 registerLocaleData(localeNb, 'nb');
 registerLocaleData(localeNl, 'nl');
 registerLocaleData(localePl, 'pl');
@@ -169,7 +236,9 @@ registerLocaleData(localePtPt, 'pt-PT');
 registerLocaleData(localeRu, 'ru');
 registerLocaleData(localeSk, 'sk');
 registerLocaleData(localeSv, 'sv');
+registerLocaleData(localeUk, 'uk');
 registerLocaleData(localeZhCn, 'zh-CN');
+registerLocaleData(localeZhTw, 'zh-TW');

@NgModule({
    imports: [
@@ -178,21 +247,28 @@ registerLocaleData(localeZhCn, 'zh-CN');
        FormsModule,
        AppRoutingModule,
        ServicesModule,
-        Angulartics2Module.forRoot([Angulartics2GoogleAnalytics], {
+        Angulartics2Module.forRoot({
            pageTracking: {
                clearQueryParams: true,
            },
        }),
        ToasterModule.forRoot(),
+        InfiniteScrollModule,
+        DragDropModule,
    ],
    declarations: [
+        A11yTitleDirective,
+        AccessComponent,
        AcceptOrganizationComponent,
        AccountComponent,
+        SetPasswordComponent,
+        AddCreditComponent,
        AddEditComponent,
        AdjustPaymentComponent,
        AdjustSeatsComponent,
        AdjustStorageComponent,
        ApiActionDirective,
+        ApiKeyComponent,
        AppComponent,
        AttachmentsComponent,
        AutofocusDirective,
@@ -200,31 +276,39 @@ registerLocaleData(localeZhCn, 'zh-CN');
        BlurClickDirective,
        BoxRowDirective,
        BreachReportComponent,
+        BulkActionsComponent,
        BulkDeleteComponent,
        BulkMoveComponent,
+        BulkRestoreComponent,
        BulkShareComponent,
        CalloutComponent,
        ChangeEmailComponent,
        ChangeKdfComponent,
        ChangePasswordComponent,
+        ChangePlanComponent,
        CiphersComponent,
        CollectionsComponent,
+        ColorPasswordPipe,
        CreateOrganizationComponent,
        DeauthorizeSessionsComponent,
        DeleteAccountComponent,
        DeleteOrganizationComponent,
        DomainRulesComponent,
+        DownloadLicenseComponent,
        ExportComponent,
+        ExposedPasswordsReportComponent,
        FallbackSrcDirective,
        FolderAddEditComponent,
        FooterComponent,
        FrontendLayoutComponent,
        GroupingsComponent,
        HintComponent,
-        IconComponent,
        I18nPipe,
+        IconComponent,
        ImportComponent,
+        InactiveTwoFactorReportComponent,
        InputVerbatimDirective,
+        LinkSsoComponent,
        LockComponent,
        LoginComponent,
        ModalComponent,
@@ -233,6 +317,8 @@ registerLocaleData(localeZhCn, 'zh-CN');
        OrgAccountComponent,
        OrgAddEditComponent,
        OrganizationBillingComponent,
+        OrganizationPlansComponent,
+        OrganizationSubscriptionComponent,
        OrgAttachmentsComponent,
        OrgCiphersComponent,
        OrgCollectionAddEditComponent,
@@ -241,23 +327,32 @@ registerLocaleData(localeZhCn, 'zh-CN');
        OrgEntityUsersComponent,
        OrgEventsComponent,
        OrgExportComponent,
+        OrgExposedPasswordsReportComponent,
        OrgImportComponent,
+        OrgInactiveTwoFactorReportComponent,
        OrgGroupAddEditComponent,
        OrgGroupingsComponent,
        OrgGroupsComponent,
        OrgManageCollectionsComponent,
        OrgManageComponent,
        OrgPeopleComponent,
+        OrgPolicyEditComponent,
+        OrgPoliciesComponent,
+        OrgReusedPasswordsReportComponent,
        OrgSettingComponent,
        OrgToolsComponent,
        OrgTwoFactorSetupComponent,
        OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
        OrgUserGroupsComponent,
        OrganizationsComponent,
        OrganizationLayoutComponent,
+        OrgUnsecuredWebsitesReportComponent,
        OrgVaultComponent,
+        OrgWeakPasswordsReportComponent,
        PasswordGeneratorComponent,
        PasswordGeneratorHistoryComponent,
+        PasswordStrengthComponent,
        PaymentComponent,
        PremiumComponent,
        ProfileComponent,
@@ -265,12 +360,18 @@ registerLocaleData(localeZhCn, 'zh-CN');
        RecoverDeleteComponent,
        RecoverTwoFactorComponent,
        RegisterComponent,
+        ReusedPasswordsReportComponent,
        SearchCiphersPipe,
        SearchPipe,
+        SelectCopyDirective,
+        SendAddEditComponent,
+        SendComponent,
        SettingsComponent,
        ShareComponent,
+        SsoComponent,
        StopClickDirective,
        StopPropDirective,
+        TaxInfoComponent,
        ToolsComponent,
        TrueFalseValueDirective,
        TwoFactorAuthenticatorComponent,
@@ -283,20 +384,26 @@ registerLocaleData(localeZhCn, 'zh-CN');
        TwoFactorU2fComponent,
        TwoFactorVerifyComponent,
        TwoFactorYubiKeyComponent,
+        UnsecuredWebsitesReportComponent,
        UpdateKeyComponent,
        UpdateLicenseComponent,
        UserBillingComponent,
        UserLayoutComponent,
+        UserSubscriptionComponent,
        VaultComponent,
        VerifyEmailComponent,
        VerifyEmailTokenComponent,
        VerifyRecoverDeleteComponent,
+        WeakPasswordsReportComponent,
    ],
    entryComponents: [
        AddEditComponent,
+        ApiKeyComponent,
        AttachmentsComponent,
+        BulkActionsComponent,
        BulkDeleteComponent,
        BulkMoveComponent,
+        BulkRestoreComponent,
        BulkShareComponent,
        CollectionsComponent,
        DeauthorizeSessionsComponent,
@@ -311,10 +418,13 @@ registerLocaleData(localeZhCn, 'zh-CN');
        OrgEntityEventsComponent,
        OrgEntityUsersComponent,
        OrgGroupAddEditComponent,
+        OrgPolicyEditComponent,
        OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
        OrgUserGroupsComponent,
        PasswordGeneratorHistoryComponent,
        PurgeVaultComponent,
+        SendAddEditComponent,
        ShareComponent,
        TwoFactorAuthenticatorComponent,
        TwoFactorDuoComponent,
@@ -325,7 +435,7 @@ registerLocaleData(localeZhCn, 'zh-CN');
        TwoFactorYubiKeyComponent,
        UpdateKeyComponent,
    ],
-    providers: [],
+    providers: [DatePipe],
    bootstrap: [AppComponent],
 })
 export class AppModule { }
--- a/src/app/components/callout.component.html
+++ b/src/app/components/callout.component.html
@@ -1,7 +0,0 @@
-<div class="callout callout-{{calloutStyle}}" role="alert">
-    <h3 class="callout-heading" *ngIf="title">
-        <i class="fa {{icon}}" *ngIf="icon"></i>
-        {{title}}
-    </h3>
-    <ng-content></ng-content>
-</div>
--- a/src/app/components/callout.component.ts
+++ b/src/app/components/callout.component.ts
@@ -1,53 +0,0 @@
-import {
-    Component,
-    Input,
-    OnInit,
-} from '@angular/core';
-
-import { I18nService } from 'jslib/abstractions/i18n.service';
-
-@Component({
-    selector: 'app-callout',
-    templateUrl: 'callout.component.html',
-})
-export class CalloutComponent implements OnInit {
-    @Input() type = 'info';
-    @Input() icon: string;
-    @Input() title: string;
-
-    calloutStyle: string;
-
-    constructor(private i18nService: I18nService) { }
-
-    ngOnInit() {
-        this.calloutStyle = this.type;
-
-        if (this.type === 'warning' || this.type === 'danger') {
-            if (this.type === 'danger') {
-                this.calloutStyle = 'danger';
-            }
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('warning');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-warning';
-            }
-        } else if (this.type === 'error') {
-            this.calloutStyle = 'danger';
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('error');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-bolt';
-            }
-        } else if (this.type === 'tip') {
-            this.calloutStyle = 'success';
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('tip');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-lightbulb-o';
-            }
-        }
-    }
-}
--- a/src/app/components/password-strength.component.html
+++ b/src/app/components/password-strength.component.html
@@ -0,0 +1,8 @@
+<div class="progress">
+    <div class="progress-bar {{color}}" role="progressbar" [ngStyle]="{width: (scoreWidth + '%')}"
+        attr.aria-valuenow="{{scoreWidth}}" aria-valuemin="0" aria-valuemax="100">
+        <ng-container *ngIf="showText && text">
+            {{text}}
+        </ng-container>
+    </div>
+</div>
--- a/src/app/components/password-strength.component.ts
+++ b/src/app/components/password-strength.component.ts
@@ -0,0 +1,44 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-password-strength',
+    templateUrl: 'password-strength.component.html',
+})
+export class PasswordStrengthComponent implements OnChanges {
+    @Input() score?: number;
+    @Input() showText = false;
+
+    scoreWidth = 0;
+    color = 'bg-danger';
+    text: string;
+
+    constructor(private i18nService: I18nService) { }
+
+    ngOnChanges(): void {
+        this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20;
+        switch (this.score) {
+            case 4:
+                this.color = 'bg-success';
+                this.text = this.i18nService.t('strong');
+                break;
+            case 3:
+                this.color = 'bg-primary';
+                this.text = this.i18nService.t('good');
+                break;
+            case 2:
+                this.color = 'bg-warning';
+                this.text = this.i18nService.t('weak');
+                break;
+            default:
+                this.color = 'bg-danger';
+                this.text = this.score != null ? this.i18nService.t('weak') : null;
+                break;
+        }
+    }
+}
--- a/src/app/layouts/footer.component.html
+++ b/src/app/layouts/footer.component.html
@@ -1,7 +1,7 @@
 <div class="container footer text-muted">
    <div class="row">
        <div class="col">
-            &copy; {{year}}, 8bit Solutions LLC
+            &copy; {{year}}, Bitwarden Inc.
        </div>
        <div class="col text-center"></div>
        <div class="col text-right">
--- a/src/app/layouts/frontend-layout.component.html
+++ b/src/app/layouts/frontend-layout.component.html
@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-    &copy; 2018, 8bit Solutions LLC
+    &copy; {{year}}, Bitwarden Inc.
    <br> {{'versionNumber' | i18n : version}}
 </div>
--- a/src/app/layouts/frontend-layout.component.ts
+++ b/src/app/layouts/frontend-layout.component.ts
@@ -12,10 +12,12 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 })
 export class FrontendLayoutComponent implements OnInit, OnDestroy {
    version: string;
+    year: string = '2015';

    constructor(private platformUtilsService: PlatformUtilsService) { }

    ngOnInit() {
+        this.year = new Date().getFullYear().toString();
        this.version = this.platformUtilsService.getApplicationVersion();
        document.body.classList.add('layout_frontend');
    }
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -1,13 +1,18 @@
 <nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
    <div class="container">
-        <a class="navbar-brand" routerLink="/" title="{{'pageTitle' | i18n : 'Bitwarden'}}">
-            <i class="fa fa-shield"></i>
+        <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
+            <i class="fa fa-shield" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
                </li>
+                <!--
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/sends">Send</a>
+                </li>
+                -->
                <li class="nav-item" routerLinkActive="active">
                    <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
                </li>
@@ -18,8 +23,9 @@
        </div>
        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
            <li class="nav-item dropdown">
-                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fa fa-user-circle fa-lg"></i>
+                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown"
+                    aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
                    <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
@@ -31,24 +37,24 @@
                    </div>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" routerLink="/settings/account">
-                        <i class="fa fa-fw fa-user"></i>
+                        <i class="fa fa-fw fa-user" aria-hidden="true"></i>
                        {{'myAccount' | i18n}}
                    </a>
                    <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
-                        <i class="fa fa-fw fa-question-circle"></i>
+                        <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
                        {{'getHelp' | i18n}}
                    </a>
-                    <a class="dropdown-item" href="https://bitwarden.com#download" target="_blank" rel="noopener">
-                        <i class="fa fa-fw fa-download"></i>
+                    <a class="dropdown-item" href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-download" aria-hidden="true"></i>
                        {{'getApps' | i18n}}
                    </a>
                    <div class="dropdown-divider"></div>
                    <button type="button" class="dropdown-item" (click)="lock()">
-                        <i class="fa fa-fw fa-lock"></i>
+                        <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
                        {{'lockNow' | i18n}}
                    </button>
                    <button type="button" class="dropdown-item" (click)="logOut()">
-                        <i class="fa fa-fw fa-sign-out"></i>
+                        <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
                        {{'logOut' | i18n}}
                    </button>
                </div>
--- a/src/app/layouts/organization-layout.component.html
+++ b/src/app/layouts/organization-layout.component.html
@@ -1,45 +1,56 @@
 <app-navbar></app-navbar>
 <div class="org-nav" *ngIf="organization">
-    <div class="container d-flex flex-column">
-        <div class="my-auto d-flex align-items-center pl-1">
-            <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
-            <div class="org-name ml-3">
-                <span>{{organization.name}}</span>
-                <small class="text-muted">{{'organization' | i18n}}</small>
-            </div>
-            <div class="ml-auto card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
-                <div class="card-body py-2">
-                    <i class="fa fa-exclamation-triangle"></i>
-                    {{'organizationIsDisabled' | i18n}}
+    <div class="container d-flex">
+        <div class="d-flex flex-column">
+            <div class="my-auto d-flex align-items-center pl-1">
+                <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
+                <div class="org-name ml-3">
+                    <span>{{organization.name}}</span>
+                    <small class="text-muted">{{'organization' | i18n}}</small>
+                </div>
+                <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
+                    <div class="card-body py-2">
+                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                        {{'organizationIsDisabled' | i18n}}
+                    </div>
                </div>
            </div>
+            <ul class="nav nav-tabs" *ngIf="organization.isManager">
+                <li class="nav-item">
+                    <a class="nav-link" routerLink="vault" routerLinkActive="active">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        {{'vault' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" routerLink="manage" routerLinkActive="active">
+                        <i class="fa fa-sliders" aria-hidden="true"></i>
+                        {{'manage' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="organization.isAdmin">
+                    <a class="nav-link" routerLink="tools" routerLinkActive="active">
+                        <i class="fa fa-wrench" aria-hidden="true"></i>
+                        {{'tools' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="organization.isOwner">
+                    <a class="nav-link" routerLink="settings" routerLinkActive="active">
+                        <i class="fa fa-cogs" aria-hidden="true"></i>
+                        {{'settings' | i18n}}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="ml-auto d-flex align-items-center">
+            <button class="btn btn-primary" (click)="goToEnterprisePortal()" #enterpriseBtn
+                [appApiAction]="enterpriseTokenPromise" *ngIf="organization.useBusinessPortal">
+                <i class="fa fa-bank fa-fw" [hidden]="enterpriseBtn.loading" aria-hidden="true"></i>
+                <i class="fa fa-spinner fa-spin fa-fw" [hidden]="!enterpriseBtn.loading" title="{{'loading' | i18n}}"
+                    aria-hidden="true"></i>
+                {{'businessPortal' | i18n}} →
+            </button>
        </div>
-        <ul class="nav nav-tabs" *ngIf="organization.isManager">
-            <li class="nav-item">
-                <a class="nav-link" routerLink="vault" routerLinkActive="active">
-                    <i class="fa fa-lock"></i>
-                    {{'vault' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="manage" routerLinkActive="active">
-                    <i class="fa fa-sliders"></i>
-                    {{'manage' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item" *ngIf="organization.isAdmin">
-                <a class="nav-link" routerLink="tools" routerLinkActive="active">
-                    <i class="fa fa-wrench"></i>
-                    {{'tools' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item" *ngIf="organization.isOwner">
-                <a class="nav-link" routerLink="settings" routerLinkActive="active">
-                    <i class="fa fa-cogs"></i>
-                    {{'settings' | i18n}}
-                </a>
-            </li>
-        </ul>
    </div>
 </div>
 <router-outlet></router-outlet>
--- a/src/app/layouts/organization-layout.component.ts
+++ b/src/app/layouts/organization-layout.component.ts
@@ -1,33 +1,83 @@
 import {
    Component,
+    NgZone,
+    OnDestroy,
    OnInit,
 } from '@angular/core';
+
 import { ActivatedRoute } from '@angular/router';

+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';

 import { Organization } from 'jslib/models/domain/organization';

+const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
+
@Component({
    selector: 'app-organization-layout',
    templateUrl: 'organization-layout.component.html',
 })
-export class OrganizationLayoutComponent implements OnInit {
+export class OrganizationLayoutComponent implements OnInit, OnDestroy {
    organization: Organization;
-
+    enterpriseTokenPromise: Promise<any>;
    private organizationId: string;
+    private enterpriseUrl: string;

-    constructor(private route: ActivatedRoute, private userService: UserService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService,
+        private broadcasterService: BroadcasterService, private ngZone: NgZone,
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService) { }

    ngOnInit() {
+        this.enterpriseUrl = 'https://portal.bitwarden.com';
+        if (this.environmentService.enterpriseUrl != null) {
+            this.enterpriseUrl = this.environmentService.enterpriseUrl;
+        } else if (this.environmentService.baseUrl != null) {
+            this.enterpriseUrl = this.environmentService.baseUrl + '/portal';
+        }
+
        document.body.classList.remove('layout_frontend');
        this.route.params.subscribe(async (params) => {
            this.organizationId = params.organizationId;
            await this.load();
        });
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'updatedOrgLicense':
+                        await this.load();
+                        break;
+                }
+            });
+        });
+    }
+
+    ngOnDestroy() {
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
    }

    async load() {
        this.organization = await this.userService.getOrganization(this.organizationId);
    }
+
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organization.id);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
 }
--- a/src/app/modal.component.ts
+++ b/src/app/modal.component.ts
@@ -10,6 +10,8 @@ import {
 import { ModalComponent as BaseModalComponent } from 'jslib/angular/components/modal.component';
 import { Utils } from 'jslib/misc/utils';

+import { MessagingService } from 'jslib/abstractions/messaging.service';
+
@Component({
    selector: 'app-modal',
    template: `<ng-template #container></ng-template>`,
@@ -17,18 +19,22 @@ import { Utils } from 'jslib/misc/utils';
 export class ModalComponent extends BaseModalComponent {
    el: any = null;

-    constructor(componentFactoryResolver: ComponentFactoryResolver) {
-        super(componentFactoryResolver);
+    constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
+        super(componentFactoryResolver, messagingService);
    }

    ngOnDestroy() { /* Nothing */ }

-    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true): T {
+    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
+        setComponentParameters: (component: T) => void = null): T {
        this.parentContainer = parentContainer;
        this.fade = fade;

        const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
        const componentRef = this.container.createComponent<T>(factory);
+        if (setComponentParameters != null) {
+            setComponentParameters(componentRef.instance);
+        }

        const modals = Array.from(document.querySelectorAll('.modal'));
        if (modals.length > 0) {
@@ -37,18 +43,22 @@ export class ModalComponent extends BaseModalComponent {

            this.el.on('show.bs.modal', () => {
                this.onShow.emit();
+                this.messagingService.send('modalShow');
            });
            this.el.on('shown.bs.modal', () => {
                this.onShown.emit();
+                this.messagingService.send('modalShown');
                if (!Utils.isMobileBrowser) {
                    this.el.find('*[appAutoFocus]').focus();
                }
            });
            this.el.on('hide.bs.modal', () => {
                this.onClose.emit();
+                this.messagingService.send('modalClose');
            });
            this.el.on('hidden.bs.modal', () => {
                this.onClosed.emit();
+                this.messagingService.send('modalClosed');
                if (this.parentContainer != null) {
                    this.parentContainer.clear();
                }
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -1,19 +1,26 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+    <div class="modal-dialog" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <div class="form-group">
                    <label for="name">{{'name' | i18n}}</label>
-                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
+                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required
+                        appAutofocus>
+                </div>
+                <div class="form-group">
+                    <label for="externalId">{{'externalId' | i18n}}</label>
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
                </div>
                <ng-container *ngIf="accessGroups">
                    <h3 class="mt-4 d-flex mb-0">
@@ -35,20 +42,31 @@
                            <tr>
                                <th>&nbsp;</th>
                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'hidePasswords' | i18n}}</th>
                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let g of groups; let i = index">
                                <td class="table-list-checkbox" (click)="check(g)">
-                                    <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked" [disabled]="g.accessAll" appStopProp>
+                                    <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked"
+                                        [disabled]="g.accessAll" appStopProp>
                                </td>
                                <td (click)="check(g)">
                                    {{g.name}}
-                                    <i class="fa fa-th text-muted fa-fw" *ngIf="g.accessAll" title="This group can access all items"></i>
+                                    <ng-container *ngIf="g.accessAll">
+                                        <i class="fa fa-th text-muted fa-fw" title="{{'groupAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'groupAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                </td>
                                <td class="text-center">
-                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly" [disabled]="!g.checked || g.accessAll">
+                                    <input type="checkbox" [(ngModel)]="g.hidePasswords"
+                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll">
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
+                                        [disabled]="!g.checked || g.accessAll">
                                </td>
                            </tr>
                        </tbody>
@@ -57,15 +75,18 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}"
-                        *ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" title="{{'loading' | i18n}}"></i>
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
--- a/src/app/organizations/manage/collection-add-edit.component.ts
+++ b/src/app/organizations/manage/collection-add-edit.component.ts
@@ -38,6 +38,7 @@ export class CollectionAddEditComponent implements OnInit {
    accessGroups: boolean = false;
    title: string;
    name: string;
+    externalId: string;
    groups: GroupResponse[] = [];
    formPromise: Promise<any>;
    deletePromise: Promise<any>;
@@ -65,12 +66,14 @@ export class CollectionAddEditComponent implements OnInit {
            try {
                const collection = await this.apiService.getCollectionDetails(this.organizationId, this.collectionId);
                this.name = await this.cryptoService.decryptToUtf8(new CipherString(collection.name), this.orgKey);
+                this.externalId = collection.externalId;
                if (collection.groups != null && this.groups.length > 0) {
                    collection.groups.forEach((s) => {
                        const group = this.groups.filter((g) => !g.accessAll && g.id === s.id);
                        if (group != null && group.length > 0) {
                            (group[0] as any).checked = true;
                            (group[0] as any).readOnly = s.readOnly;
+                            (group[0] as any).hidePasswords = s.hidePasswords;
                        }
                    });
                }
@@ -95,6 +98,7 @@ export class CollectionAddEditComponent implements OnInit {
        (g as any).checked = select == null ? !(g as any).checked : select;
        if (!(g as any).checked) {
            (g as any).readOnly = false;
+            (g as any).hidePasswords = false;
        }
    }

@@ -109,8 +113,9 @@ export class CollectionAddEditComponent implements OnInit {

        const request = new CollectionRequest();
        request.name = (await this.cryptoService.encrypt(this.name, this.orgKey)).encryptedString;
+        request.externalId = this.externalId;
        request.groups = this.groups.filter((g) => (g as any).checked && !g.accessAll)
-            .map((g) => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly));
+            .map((g) => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly, !!(g as any).hidePasswords));

        try {
            if (this.editMode) {
--- a/src/app/organizations/manage/collections.component.html
+++ b/src/app/organizations/manage/collections.component.html
@@ -3,18 +3,24 @@
    <div class="ml-auto d-flex">
        <div>
            <label class="sr-only" for="search">{{'search' | i18n}}</label>
-            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-            <i class="fa fa-plus fa-fw"></i>
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
            {{'newCollection' | i18n}}
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading"></i>
-<ng-container *ngIf="!loading && (collections | search:searchText:'name':'id') as searchedCollections">
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container
+    *ngIf="!loading && (isPaging() ? pagedCollections : collections | search:searchText:'name':'id') as searchedCollections">
    <p *ngIf="!searchedCollections.length">{{'noCollectionsInList' | i18n}}</p>
-    <table class="table table-hover table-list" *ngIf="searchedCollections.length">
+    <table class="table table-hover table-list" *ngIf="searchedCollections.length" infiniteScroll
+        [infiniteScrollDistance]="1" [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
        <tbody>
            <tr *ngFor="let c of searchedCollections">
                <td>
@@ -22,16 +28,17 @@
                </td>
                <td class="table-list-options">
                    <div class="dropdown" appListDropdown>
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <i class="fa fa-cog fa-lg"></i>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+                            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#" appStopClick (click)="users(c)">
-                                <i class="fa fa-fw fa-users"></i>
+                                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
                                {{'users' | i18n}}
                            </a>
                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(c)">
-                                <i class="fa fa-fw fa-trash-o"></i>
+                                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
                                {{'delete' | i18n}}
                            </a>
                        </div>
--- a/src/app/organizations/manage/collections.component.ts
+++ b/src/app/organizations/manage/collections.component.ts
@@ -14,6 +14,7 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SearchService } from 'jslib/abstractions/search.service';
 import { UserService } from 'jslib/abstractions/user.service';

 import { CollectionData } from 'jslib/models/data/collectionData';
@@ -34,28 +35,36 @@ import { EntityUsersComponent } from './entity-users.component';
    templateUrl: 'collections.component.html',
 })
 export class CollectionsComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef, static: true }) usersModalRef: ViewContainerRef;

    loading = true;
    organizationId: string;
    collections: CollectionView[];
+    pagedCollections: CollectionView[];
    searchText: string;

+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedCollectionsCount = 0;
    private modal: ModalComponent = null;

    constructor(private apiService: ApiService, private route: ActivatedRoute,
        private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
        private analytics: Angulartics2, private toasterService: ToasterService,
        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
-        private userService: UserService) { }
+        private userService: UserService, private searchService: SearchService) { }

    async ngOnInit() {
        this.route.parent.parent.params.subscribe(async (params) => {
            this.organizationId = params.organizationId;
            await this.load();
-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
                this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
            });
        });
    }
@@ -71,9 +80,27 @@ export class CollectionsComponent implements OnInit {
        const collections = response.data.filter((c) => c.organizationId === this.organizationId).map((r) =>
            new Collection(new CollectionData(r as CollectionDetailsResponse)));
        this.collections = await this.collectionService.decryptMany(collections);
+        this.resetPaging();
        this.loading = false;
    }

+    loadMore() {
+        if (!this.collections || this.collections.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedCollections.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedCollectionsCount > this.pageSize) {
+            pagedSize = this.pagedCollectionsCount;
+        }
+        if (this.collections.length > pagedLength) {
+            this.pagedCollections =
+                this.pagedCollections.concat(this.collections.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedCollectionsCount = this.pagedCollections.length;
+        this.didScroll = this.pagedCollections.length > this.pageSize;
+    }
+
    edit(collection: CollectionView) {
        if (this.modal != null) {
            this.modal.close();
@@ -144,10 +171,28 @@ export class CollectionsComponent implements OnInit {
        });
    }

+    async resetPaging() {
+        this.pagedCollections = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.collections && this.collections.length > this.pageSize;
+    }
+
    private removeCollection(collection: CollectionView) {
        const index = this.collections.indexOf(collection);
        if (index > -1) {
            this.collections.splice(index, 1);
+            this.resetPaging();
        }
    }
 }
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -1,32 +1,35 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="eventLogsTitle">
                    {{'eventLogs' | i18n}}
                    <small class="text-muted" *ngIf="name">{{name}}</small>
                </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="!loaded">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="loaded">
                <div class="d-flex">
                    <div class="form-inline">
                        <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="start" placeholder="{{'startDate' | i18n}}" [(ngModel)]="start"
-                            placeholder="YYYY-MM-DDTHH:MM">
+                        <input type="datetime-local" class="form-control form-control-sm" id="start"
+                            placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM">
                        <span class="mx-2">-</span>
                        <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="end" placeholder="{{'endDate' | i18n}}" [(ngModel)]="end"
-                            placeholder="YYYY-MM-DDTHH:MM">
+                        <input type="datetime-local" class="form-control form-control-sm" id="end"
+                            placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM">
                    </div>
-                    <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
+                    <button #refreshBtn [appApiAction]="refreshPromise" type="button"
+                        class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
                        [disabled]="loaded && refreshBtn.loading">
-                        <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
+                        <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"
+                            aria-hidden="true"></i>
                        {{'refresh' | i18n}}
                    </button>
                </div>
@@ -49,18 +52,20 @@
                        <tr *ngFor="let e of events">
                            <td>{{e.date | date:'medium'}}</td>
                            <td>
-                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                            </td>
                            <td *ngIf="showUser">
-                                <span title="{{e.userEmail}}">{{e.userName}}</span>
+                                <span appA11yTitle="{{e.userEmail}}">{{e.userName}}</span>
                            </td>
                            <td [innerHTML]="e.message"></td>
                        </tr>
                    </tbody>
                </table>
-                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit" (click)="loadEvents(false)"
-                    [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+                    (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'loadMore' | i18n}}</span>
                </button>
            </div>
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -1,24 +1,26 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+    <div class="modal-dialog modal-lg" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="userAccessTitle">
                    {{'userAccess' | i18n}}
                    <small>{{entityName}}</small>
                </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="loading || !users">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
-            <div class="modal-body" *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
+            <div class="modal-body"
+                *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
                <div class="d-flex">
                    <div class="mr-3">
                        <label class="sr-only" for="search">{{'search' | i18n}}</label>
-                        <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
-                            name="SearchText" [(ngModel)]="searchText">
+                        <input type="search" class="form-control form-control-sm" id="search"
+                            placeholder="{{'search' | i18n}}" name="SearchText" [(ngModel)]="searchText">
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: !showSelected}"
@@ -45,6 +47,8 @@
                                <th>{{'name' | i18n}}</th>
                                <th *ngIf="entity === 'collection'">&nbsp;</th>
                                <th>{{'userType' | i18n}}</th>
+                                <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'hidePasswords' |
+                                    i18n}}</th>
                                <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'readOnly' |
                                    i18n}}</th>
                            </tr>
@@ -53,7 +57,8 @@
                            <tr *ngFor="let u of searchedUsers">
                                <td class="table-list-checkbox" (click)="check(u)">
                                    <input type="checkbox" [(ngModel)]="u.checked" name="{{u.id.substr(0,8)}}_Checked"
-                                        [disabled]="entity === 'collection' && u.accessAll" (change)="selectedChanged(u)" appStopProp>
+                                        [disabled]="entity === 'collection' && u.accessAll"
+                                        (change)="selectedChanged(u)" appStopProp>
                                </td>
                                <td width="30" (click)="check(u)">
                                    <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
@@ -61,14 +66,20 @@
                                </td>
                                <td>
                                    {{u.email}}
-                                    <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited'
+                                    <span class="badge badge-secondary"
+                                        *ngIf="u.status === organizationUserStatusType.Invited">{{'invited'
                                        | i18n}}</span>
-                                    <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted'
+                                    <span class="badge badge-warning"
+                                        *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted'
                                        | i18n}}</span>
                                    <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                                </td>
                                <td *ngIf="entity === 'collection'">
-                                    <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
+                                    <ng-container *ngIf="u.accessAll">
+                                        <i class="fa fa-th" title="{{'userAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'userAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                </td>
                                <td>
                                    <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
@@ -76,6 +87,11 @@
                                    <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
                                    <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
                                </td>
+                                <td class="text-center" *ngIf="entity === 'collection'">
+                                    <input type="checkbox" [(ngModel)]="u.hidePasswords"
+                                        name="{{u.id.substr(0,8)}}_HidePasswords"
+                                        [disabled]="u.accessAll || !u.checked">
+                                </td>
                                <td class="text-center" *ngIf="entity === 'collection'">
                                    <input type="checkbox" [(ngModel)]="u.readOnly" name="{{u.id.substr(0,8)}}_ReadOnly"
                                        [disabled]="u.accessAll || !u.checked">
@@ -87,7 +103,7 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/manage/entity-users.component.ts
+++ b/src/app/organizations/manage/entity-users.component.ts
@@ -78,6 +78,7 @@ export class EntityUsersComponent implements OnInit {
                    if (user != null && user.length > 0) {
                        (user[0] as any).checked = true;
                        (user[0] as any).readOnly = s.readOnly;
+                        (user[0] as any).hidePasswords = s.hidePasswords;
                    }
                });
            }
@@ -107,6 +108,7 @@ export class EntityUsersComponent implements OnInit {
        } else {
            if (this.entity === 'collection') {
                (u as any).readOnly = false;
+                (u as any).hidePasswords = false;
            }
            this.selectedCount--;
        }
@@ -123,7 +125,7 @@ export class EntityUsersComponent implements OnInit {
                this.formPromise = this.apiService.putGroupUsers(this.organizationId, this.entityId, selections);
            } else {
                const selections = this.users.filter((u) => (u as any).checked && !u.accessAll)
-                    .map((u) => new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly));
+                    .map((u) => new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly, !!(u as any).hidePasswords));
                this.formPromise = this.apiService.putCollectionUsers(this.organizationId, this.entityId, selections);
            }
            await this.formPromise;
--- a/src/app/organizations/manage/events.component.html
+++ b/src/app/organizations/manage/events.component.html
@@ -3,21 +3,24 @@
    <div class="ml-auto d-flex">
        <div class="form-inline">
            <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
-            <input type="datetime-local" class="form-control form-control-sm" id="start" placeholder="{{'startDate' | i18n}}" [(ngModel)]="start"
-                placeholder="YYYY-MM-DDTHH:MM">
+            <input type="datetime-local" class="form-control form-control-sm" id="start"
+                placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM">
            <span class="mx-2">-</span>
            <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
-            <input type="datetime-local" class="form-control form-control-sm" id="end" placeholder="{{'endDate' | i18n}}" [(ngModel)]="end"
-                placeholder="YYYY-MM-DDTHH:MM">
+            <input type="datetime-local" class="form-control form-control-sm" id="end"
+                placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM">
        </div>
-        <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
-            [disabled]="loaded && refreshBtn.loading">
-            <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
+        <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3"
+            (click)="loadEvents(true)" [disabled]="loaded && refreshBtn.loading">
+            <i class="fa fa-refresh fa-fw" aria-hidden="true" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
            {{'refresh' | i18n}}
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!loaded">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="loaded">
    <p *ngIf="!events || !events.length">{{'noEventsInList' | i18n}}</p>
    <table class="table table-hover" *ngIf="events && events.length">
@@ -35,7 +38,8 @@
            <tr *ngFor="let e of events">
                <td>{{e.date | date:'medium'}}</td>
                <td>
-                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                </td>
                <td>
                    <span title="{{e.userEmail}}">{{e.userName}}</span>
@@ -44,9 +48,9 @@
            </tr>
        </tbody>
    </table>
-    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit" (click)="loadEvents(false)"
-        [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+        (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
        <span>{{'loadMore' | i18n}}</span>
    </button>
 </ng-container>
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -1,14 +1,15 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+    <div class="modal-dialog modal-lg" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <div class="form-group">
@@ -18,11 +19,15 @@
                <div class="form-group">
                    <label for="externalId">{{'externalId' | i18n}}</label>
                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
-                    <small class="form-text text-muted">{{'externalIdGroupDesc' | i18n}}</small>
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
                </div>
                <h3 class="mt-4 d-flex">
                    <div class="mb-2">
                        {{'accessControl' | i18n}}
+                        <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                            href="https://bitwarden.com/help/article/user-types-access-control/#access-control">
+                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                        </a>
                    </div>
                    <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
                        <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
@@ -35,13 +40,15 @@
                </h3>
                <div class="form-group" [ngClass]="{'mb-0': access !== 'selected'}">
                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all"
+                            [(ngModel)]="access">
                        <label class="form-check-label" for="accessAll">
                            {{'groupAccessAllItems' | i18n}}
                        </label>
                    </div>
                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected"
+                            [(ngModel)]="access">
                        <label class="form-check-label" for="accessSelected">
                            {{'groupAccessSelectedCollections' | i18n}}
                        </label>
@@ -56,19 +63,26 @@
                            <tr>
                                <th>&nbsp;</th>
                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'hidePasswords' | i18n}}</th>
                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let c of collections; let i = index">
                                <td class="table-list-checkbox" (click)="check(c)">
-                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked" appStopProp>
+                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked"
+                                        appStopProp>
                                </td>
                                <td (click)="check(c)">
                                    {{c.name}}
                                </td>
                                <td class="text-center">
-                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly" [disabled]="!c.checked">
+                                    <input type="checkbox" [(ngModel)]="c.hidePasswords"
+                                        name="Collection[{{i}}].HidePasswords" [disabled]="!c.checked">
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly"
+                                        [disabled]="!c.checked">
                                </td>
                            </tr>
                        </tbody>
@@ -77,15 +91,18 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}" *ngIf="editMode"
-                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" title="{{'loading' | i18n}}"></i>
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"
+                            title="{{'loading' | i18n}}"></i>
                    </button>
                </div>
            </div>
--- a/src/app/organizations/manage/group-add-edit.component.ts
+++ b/src/app/organizations/manage/group-add-edit.component.ts
@@ -63,6 +63,7 @@ export class GroupAddEditComponent implements OnInit {
                        if (collection != null && collection.length > 0) {
                            (collection[0] as any).checked = true;
                            collection[0].readOnly = s.readOnly;
+                            collection[0].hidePasswords = s.hidePasswords;
                        }
                    });
                }
@@ -99,7 +100,7 @@ export class GroupAddEditComponent implements OnInit {
        request.accessAll = this.access === 'all';
        if (!request.accessAll) {
            request.collections = this.collections.filter((c) => (c as any).checked)
-                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
+                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly, !!c.hidePasswords));
        }

        try {
--- a/src/app/organizations/manage/groups.component.html
+++ b/src/app/organizations/manage/groups.component.html
@@ -3,18 +3,23 @@
    <div class="ml-auto d-flex">
        <div>
            <label class="sr-only" for="search">{{'search' | i18n}}</label>
-            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-            <i class="fa fa-plus fa-fw"></i>
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
            {{'newGroup' | i18n}}
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
-<ng-container *ngIf="!loading && (groups | search:searchText:'name':'id') as searchedGroups">
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="!loading && (isPaging() ? pagedGroups : groups | search:searchText:'name':'id') as searchedGroups">
    <p *ngIf="!searchedGroups.length">{{'noGroupsInList' | i18n}}</p>
-    <table class="table table-hover table-list" *ngIf="searchedGroups.length">
+    <table class="table table-hover table-list" *ngIf="searchedGroups.length" infiniteScroll
+        [infiniteScrollDistance]="1" [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
        <tbody>
            <tr *ngFor="let g of searchedGroups">
                <td>
@@ -22,16 +27,17 @@
                </td>
                <td class="table-list-options">
                    <div class="dropdown" appListDropdown>
-                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <i class="fa fa-cog fa-lg"></i>
+                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+                            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
-                                <i class="fa fa-fw fa-users"></i>
+                                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
                                {{'users' | i18n}}
                            </a>
                            <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
-                                <i class="fa fa-fw fa-trash-o"></i>
+                                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
                                {{'delete' | i18n}}
                            </a>
                        </div>
--- a/src/app/organizations/manage/groups.component.ts
+++ b/src/app/organizations/manage/groups.component.ts
@@ -16,6 +16,7 @@ import { Angulartics2 } from 'angulartics2';
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SearchService } from 'jslib/abstractions/search.service';
 import { UserService } from 'jslib/abstractions/user.service';

 import { GroupResponse } from 'jslib/models/response/groupResponse';
@@ -31,21 +32,26 @@ import { GroupAddEditComponent } from './group-add-edit.component';
    templateUrl: 'groups.component.html',
 })
 export class GroupsComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef, static: true }) usersModalRef: ViewContainerRef;

    loading = true;
    organizationId: string;
    groups: GroupResponse[];
+    pagedGroups: GroupResponse[];
    searchText: string;

+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedGroupsCount = 0;
    private modal: ModalComponent = null;

    constructor(private apiService: ApiService, private route: ActivatedRoute,
        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
        private analytics: Angulartics2, private toasterService: ToasterService,
        private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private router: Router) { }
+        private router: Router, private searchService: SearchService) { }

    async ngOnInit() {
        this.route.parent.parent.params.subscribe(async (params) => {
@@ -56,8 +62,11 @@ export class GroupsComponent implements OnInit {
                return;
            }
            await this.load();
-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
                this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
            });
        });
    }
@@ -67,9 +76,26 @@ export class GroupsComponent implements OnInit {
        const groups = response.data != null && response.data.length > 0 ? response.data : [];
        groups.sort(Utils.getSortFunction(this.i18nService, 'name'));
        this.groups = groups;
+        this.resetPaging();
        this.loading = false;
    }

+    loadMore() {
+        if (!this.groups || this.groups.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedGroups.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedGroupsCount > this.pageSize) {
+            pagedSize = this.pagedGroupsCount;
+        }
+        if (this.groups.length > pagedLength) {
+            this.pagedGroups = this.pagedGroups.concat(this.groups.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedGroupsCount = this.pagedGroups.length;
+        this.didScroll = this.pagedGroups.length > this.pageSize;
+    }
+
    edit(group: GroupResponse) {
        if (this.modal != null) {
            this.modal.close();
@@ -139,10 +165,28 @@ export class GroupsComponent implements OnInit {
        });
    }

+    async resetPaging() {
+        this.pagedGroups = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.groups && this.groups.length > this.pageSize;
+    }
+
    private removeGroup(group: GroupResponse) {
        const index = this.groups.indexOf(group);
        if (index > -1) {
            this.groups.splice(index, 1);
+            this.resetPaging();
        }
    }
 }
--- a/src/app/organizations/manage/manage.component.html
+++ b/src/app/organizations/manage/manage.component.html
@@ -4,16 +4,23 @@
            <div class="card" *ngIf="organization">
                <div class="card-header">{{'manage' | i18n}}</div>
                <div class="list-group list-group-flush">
-                    <a routerLink="people" class="list-group-item" routerLinkActive="active" *ngIf="organization.isAdmin">
+                    <a routerLink="people" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin">
                        {{'people' | i18n}}
                    </a>
                    <a routerLink="collections" class="list-group-item" routerLinkActive="active">
                        {{'collections' | i18n}}
                    </a>
-                    <a routerLink="groups" class="list-group-item" routerLinkActive="active" *ngIf="organization.isAdmin && accessGroups">
+                    <a routerLink="groups" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessGroups">
                        {{'groups' | i18n}}
                    </a>
-                    <a routerLink="events" class="list-group-item" routerLinkActive="active" *ngIf="organization.isAdmin && accessEvents">
+                    <a routerLink="policies" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessPolicies">
+                        {{'policies' | i18n}}
+                    </a>
+                    <a routerLink="events" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.isAdmin && accessEvents">
                        {{'eventLogs' | i18n}}
                    </a>
                </div>
--- a/src/app/organizations/manage/manage.component.ts
+++ b/src/app/organizations/manage/manage.component.ts
@@ -14,6 +14,7 @@ import { Organization } from 'jslib/models/domain/organization';
 })
 export class ManageComponent implements OnInit {
    organization: Organization;
+    accessPolicies = false;
    accessGroups = false;
    accessEvents = false;

@@ -22,6 +23,7 @@ export class ManageComponent implements OnInit {
    ngOnInit() {
        this.route.parent.params.subscribe(async (params) => {
            this.organization = await this.userService.getOrganization(params.organizationId);
+            this.accessPolicies = this.organization.usePolicies;
            this.accessEvents = this.organization.useEvents;
            this.accessGroups = this.organization.useGroups;
        });
--- a/src/app/organizations/manage/people.component.html
+++ b/src/app/organizations/manage/people.component.html
@@ -2,15 +2,19 @@
    <h1>{{'people' | i18n}}</h1>
    <div class="ml-auto d-flex">
        <div class="btn-group btn-group-sm" role="group">
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}" (click)="filter(null)">
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}"
+                (click)="filter(null)">
                {{'all' | i18n}}
+                <span class="badge badge-pill badge-info" *ngIf="allCount">{{allCount}}</span>
            </button>
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Invited}"
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Invited}"
                (click)="filter(organizationUserStatusType.Invited)">
                {{'invited' | i18n}}
                <span class="badge badge-pill badge-info" *ngIf="invitedCount">{{invitedCount}}</span>
            </button>
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Accepted}"
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Accepted}"
                (click)="filter(organizationUserStatusType.Accepted)">
                {{'accepted' | i18n}}
                <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{acceptedCount}}</span>
@@ -18,33 +22,48 @@
        </div>
        <div class="ml-3">
            <label class="sr-only" for="search">{{'search' | i18n}}</label>
-            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-            <i class="fa fa-plus fa-fw"></i>
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
            {{'inviteUser' | i18n}}
        </button>
    </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
-<ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container
+    *ngIf="!loading && (isPaging() ? pagedUsers : users | search:searchText:'name':'email':'id') as searchedUsers">
    <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
    <ng-container *ngIf="searchedUsers.length">
        <app-callout type="info" title="{{'confirmUsers' | i18n}}" icon="fa-check-circle" *ngIf="showConfirmUsers">
            {{'usersNeedConfirmed' | i18n}}
        </app-callout>
-        <table class="table table-hover table-list">
+        <table class="table table-hover table-list" infiniteScroll [infiniteScrollDistance]="1"
+            [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
            <tbody>
                <tr *ngFor="let u of searchedUsers">
                    <td width="30">
-                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                            [fontSize]="14"></app-avatar>
                    </td>
                    <td>
                        <a href="#" appStopClick (click)="edit(u)">{{u.email}}</a>
-                        <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
-                        <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
+                        <span class="badge badge-secondary"
+                            *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
+                        <span class="badge badge-warning"
+                            *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
                        <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                    </td>
+                    <td>
+                        <ng-container *ngIf="u.twoFactorEnabled">
+                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
+                        </ng-container>
+                    </td>
                    <td>
                        <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
                        <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
@@ -53,28 +72,33 @@
                    </td>
                    <td class="table-list-options">
                        <div class="dropdown" appListDropdown>
-                            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <i class="fa fa-cog fa-lg"></i>
+                            <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                                appA11yTitle="{{'options' | i18n}}">
+                                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
-                                <a class="dropdown-item" href="#" appStopClick (click)="reinvite(u)" *ngIf="u.status === organizationUserStatusType.Invited">
-                                    <i class="fa fa-fw fa-envelope-o"></i>
+                                <a class="dropdown-item" href="#" appStopClick (click)="reinvite(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Invited">
+                                    <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
                                    {{'resendInvitation' | i18n}}
                                </a>
-                                <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(u)" *ngIf="u.status === organizationUserStatusType.Accepted">
-                                    <i class="fa fa-fw fa-check"></i>
+                                <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Accepted">
+                                    <i class="fa fa-fw fa-check" aria-hidden="true"></i>
                                    {{'confirm' | i18n}}
                                </a>
                                <a class="dropdown-item" href="#" appStopClick (click)="groups(u)" *ngIf="accessGroups">
-                                    <i class="fa fa-fw fa-sitemap"></i>
+                                    <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
                                    {{'groups' | i18n}}
                                </a>
-                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)" *ngIf="accessEvents && u.status === organizationUserStatusType.Confirmed">
-                                    <i class="fa fa-fw fa-file-text-o"></i>
+                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)"
+                                    *ngIf="accessEvents && u.status === organizationUserStatusType.Confirmed">
+                                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
                                    {{'eventLogs' | i18n}}
                                </a>
                                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                                    <i class="fa fa-fw fa-remove"></i>
+                                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
                                    {{'remove' | i18n}}
                                </a>
                            </div>
@@ -88,3 +112,4 @@
 <ng-template #addEdit></ng-template>
 <ng-template #groupsTemplate></ng-template>
 <ng-template #eventsTemplate></ng-template>
+<ng-template #confirmTemplate></ng-template>
--- a/src/app/organizations/manage/people.component.ts
+++ b/src/app/organizations/manage/people.component.ts
@@ -13,10 +13,14 @@ import {
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';

+import { ConstantsService } from 'jslib/services/constants.service';
+
 import { ApiService } from 'jslib/abstractions/api.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SearchService } from 'jslib/abstractions/search.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 import { UserService } from 'jslib/abstractions/user.service';

 import { OrganizationUserConfirmRequest } from 'jslib/models/request/organizationUserConfirmRequest';
@@ -31,6 +35,7 @@ import { Utils } from 'jslib/misc/utils';
 import { ModalComponent } from '../../modal.component';
 import { EntityEventsComponent } from './entity-events.component';
 import { UserAddEditComponent } from './user-add-edit.component';
+import { UserConfirmComponent } from './user-confirm.component';
 import { UserGroupsComponent } from './user-groups.component';

@Component({
@@ -38,13 +43,15 @@ import { UserGroupsComponent } from './user-groups.component';
    templateUrl: 'people.component.html',
 })
 export class PeopleComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('groupsTemplate', { read: ViewContainerRef }) groupsModalRef: ViewContainerRef;
-    @ViewChild('eventsTemplate', { read: ViewContainerRef }) eventsModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('groupsTemplate', { read: ViewContainerRef, static: true }) groupsModalRef: ViewContainerRef;
+    @ViewChild('eventsTemplate', { read: ViewContainerRef, static: true }) eventsModalRef: ViewContainerRef;
+    @ViewChild('confirmTemplate', { read: ViewContainerRef, static: true }) confirmModalRef: ViewContainerRef;

    loading = true;
    organizationId: string;
    users: OrganizationUserUserDetailsResponse[];
+    pagedUsers: OrganizationUserUserDetailsResponse[];
    searchText: string;
    status: OrganizationUserStatusType = null;
    statusMap = new Map<OrganizationUserStatusType, OrganizationUserUserDetailsResponse[]>();
@@ -54,6 +61,10 @@ export class PeopleComponent implements OnInit {
    accessEvents = false;
    accessGroups = false;

+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedUsersCount = 0;
    private modal: ModalComponent = null;
    private allUsers: OrganizationUserUserDetailsResponse[];

@@ -61,7 +72,8 @@ export class PeopleComponent implements OnInit {
        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
        private platformUtilsService: PlatformUtilsService, private analytics: Angulartics2,
        private toasterService: ToasterService, private cryptoService: CryptoService,
-        private userService: UserService, private router: Router) { }
+        private userService: UserService, private router: Router,
+        private storageService: StorageService, private searchService: SearchService) { }

    async ngOnInit() {
        this.route.parent.parent.params.subscribe(async (params) => {
@@ -75,7 +87,7 @@ export class PeopleComponent implements OnInit {
            this.accessGroups = organization.useGroups;
            await this.load();

-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
                this.searchText = qParams.search;
                if (qParams.viewEvents != null) {
                    const user = this.users.filter((u) => u.id === qParams.viewEvents);
@@ -83,6 +95,9 @@ export class PeopleComponent implements OnInit {
                        this.events(user[0]);
                    }
                }
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
            });
        });
    }
@@ -110,6 +125,27 @@ export class PeopleComponent implements OnInit {
        } else {
            this.users = this.allUsers;
        }
+        this.resetPaging();
+    }
+
+    loadMore() {
+        if (!this.users || this.users.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedUsers.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedUsersCount > this.pageSize) {
+            pagedSize = this.pagedUsersCount;
+        }
+        if (this.users.length > pagedLength) {
+            this.pagedUsers = this.pagedUsers.concat(this.users.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedUsersCount = this.pagedUsers.length;
+        this.didScroll = this.pagedUsers.length > this.pageSize;
+    }
+
+    get allCount() {
+        return this.allUsers != null ? this.allUsers.length : 0;
    }

    get invitedCount() {
@@ -213,17 +249,48 @@ export class PeopleComponent implements OnInit {
    }

    async confirm(user: OrganizationUserUserDetailsResponse) {
+        function updateUser(self: PeopleComponent) {
+            user.status = OrganizationUserStatusType.Confirmed;
+            const mapIndex = self.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
+            if (mapIndex > -1) {
+                self.statusMap.get(OrganizationUserStatusType.Accepted).splice(mapIndex, 1);
+                self.statusMap.get(OrganizationUserStatusType.Confirmed).push(user);
+            }
+        }
+
        if (this.actionPromise != null) {
            return;
        }
+
+        const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
+        if (autoConfirm == null || !autoConfirm) {
+            if (this.modal != null) {
+                this.modal.close();
+            }
+
+            const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            this.modal = this.confirmModalRef.createComponent(factory).instance;
+            const childComponent = this.modal.show<UserConfirmComponent>(
+                UserConfirmComponent, this.confirmModalRef);
+
+            childComponent.name = user != null ? user.name || user.email : null;
+            childComponent.organizationId = this.organizationId;
+            childComponent.organizationUserId = user != null ? user.id : null;
+            childComponent.userId = user != null ? user.userId : null;
+            childComponent.onConfirmedUser.subscribe(() => {
+                this.modal.close();
+                updateUser(this);
+            });
+
+            this.modal.onClosed.subscribe(() => {
+                this.modal = null;
+            });
+            return;
+        }
+
        this.actionPromise = this.doConfirmation(user);
        await this.actionPromise;
-        user.status = OrganizationUserStatusType.Confirmed;
-        const mapIndex = this.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
-        if (mapIndex > -1) {
-            this.statusMap.get(OrganizationUserStatusType.Accepted).splice(mapIndex, 1);
-            this.statusMap.get(OrganizationUserStatusType.Confirmed).push(user);
-        }
+        updateUser(this);
        this.analytics.eventTrack.next({ action: 'Confirmed User' });
        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', user.name || user.email));
        this.actionPromise = null;
@@ -250,10 +317,32 @@ export class PeopleComponent implements OnInit {
        });
    }

+    async resetPaging() {
+        this.pagedUsers = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.users && this.users.length > this.pageSize;
+    }
+
    private async doConfirmation(user: OrganizationUserUserDetailsResponse) {
        const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
        const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
        const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+        try {
+            // tslint:disable-next-line
+            console.log('User\'s fingerprint: ' +
+                (await this.cryptoService.getFingerprint(user.userId, publicKey.buffer)).join('-'));
+        } catch { }
        const key = await this.cryptoService.rsaEncrypt(orgKey.key, publicKey.buffer);
        const request = new OrganizationUserConfirmRequest();
        request.key = key.encryptedString;
@@ -264,6 +353,7 @@ export class PeopleComponent implements OnInit {
        let index = this.users.indexOf(user);
        if (index > -1) {
            this.users.splice(index, 1);
+            this.resetPaging();
        }
        if (this.statusMap.has(OrganizationUserStatusType.Accepted)) {
            index = this.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
--- a/src/app/organizations/manage/policies.component.html
+++ b/src/app/organizations/manage/policies.component.html
@@ -0,0 +1,24 @@
+<app-callout [type]="'warning'">
+    <p>{{'webPoliciesDeprecationWarning' | i18n}}</p>
+    <button type="button" class="btn btn-outline-secondary"
+        (click)="goToEnterprisePortal()">{{'businessPortal' | i18n}}</button>
+</app-callout>
+<div class="page-header d-flex">
+    <h1>{{'policies' | i18n}}</h1>
+</div>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<table class="table table-hover table-list" *ngIf="!loading">
+    <tbody>
+        <tr *ngFor="let p of policies">
+            <td *ngIf="p.display">
+                <a href="#" appStopClick (click)="edit(p)">{{p.name}}</a>
+                <span class="badge badge-success" *ngIf="p.enabled">{{'enabled' | i18n}}</span>
+                <small class="text-muted d-block">{{p.description}}</small>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<ng-template #editTemplate></ng-template>
--- a/src/app/organizations/manage/policies.component.ts
+++ b/src/app/organizations/manage/policies.component.ts
@@ -0,0 +1,163 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { PolicyType } from 'jslib/enums/policyType';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { EnvironmentService } from 'jslib/abstractions';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { PolicyResponse } from 'jslib/models/response/policyResponse';
+
+import { ModalComponent } from '../../modal.component';
+
+import { PolicyEditComponent } from './policy-edit.component';
+
+@Component({
+    selector: 'app-org-policies',
+    templateUrl: 'policies.component.html',
+})
+export class PoliciesComponent implements OnInit {
+    @ViewChild('editTemplate', { read: ViewContainerRef, static: true }) editModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    policies: any[];
+
+    // Remove when removing deprecation warning
+    enterpriseTokenPromise: Promise<any>;
+    private enterpriseUrl: string;
+
+    private modal: ModalComponent = null;
+    private orgPolicies: PolicyResponse[];
+    private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private router: Router, private environmentService: EnvironmentService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.usePolicies) {
+                this.router.navigate(['/organizations', this.organizationId]);
+                return;
+            }
+            this.policies = [
+                {
+                    name: this.i18nService.t('twoStepLogin'),
+                    description: this.i18nService.t('twoStepLoginPolicyDesc'),
+                    type: PolicyType.TwoFactorAuthentication,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('masterPass'),
+                    description: this.i18nService.t('masterPassPolicyDesc'),
+                    type: PolicyType.MasterPassword,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('passwordGenerator'),
+                    description: this.i18nService.t('passwordGeneratorPolicyDesc'),
+                    type: PolicyType.PasswordGenerator,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('singleOrg'),
+                    description: this.i18nService.t('singleOrgDesc'),
+                    type: PolicyType.SingleOrg,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('requireSso'),
+                    description: this.i18nService.t('requireSsoPolicyDesc'),
+                    type: PolicyType.RequireSso,
+                    enabled: false,
+                    display: organization.useSso,
+                },
+            ];
+            await this.load();
+        });
+
+        // Remove when removing deprecation warning
+        this.enterpriseUrl = 'https://portal.bitwarden.com';
+        if (this.environmentService.enterpriseUrl != null) {
+            this.enterpriseUrl = this.environmentService.enterpriseUrl;
+        } else if (this.environmentService.baseUrl != null) {
+            this.enterpriseUrl = this.environmentService.baseUrl + '/portal';
+        }
+    }
+
+    async load() {
+        const response = await this.apiService.getPolicies(this.organizationId);
+        this.orgPolicies = response.data != null && response.data.length > 0 ? response.data : [];
+        this.orgPolicies.forEach((op) => {
+            this.policiesEnabledMap.set(op.type, op.enabled);
+        });
+        this.policies.forEach((p) => {
+            p.enabled = this.policiesEnabledMap.has(p.type) && this.policiesEnabledMap.get(p.type);
+        });
+        this.loading = false;
+    }
+
+    edit(p: any) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.editModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PolicyEditComponent>(
+            PolicyEditComponent, this.editModalRef);
+
+        childComponent.name = p.name;
+        childComponent.description = p.description;
+        childComponent.type = p.type;
+        childComponent.organizationId = this.organizationId;
+        childComponent.policiesEnabledMap = this.policiesEnabledMap;
+        childComponent.onSavedPolicy.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+
+    // Remove when removing deprecation warning
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organizationId);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
+}
--- a/src/app/organizations/manage/policy-edit.component.html
+++ b/src/app/organizations/manage/policy-edit.component.html
@@ -0,0 +1,155 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <p>{{description}}</p>
+                <app-callout type="warning" *ngIf="type === policyType.TwoFactorAuthentication"
+                    title="{{'warning' | i18n}}" icon="fa-warning">
+                    {{'twoStepLoginPolicyWarning' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SingleOrg" title="{{'warning' | i18n}}"
+                    icon="fa-warning">
+                    {{'singleOrgPolicyWarning' | i18n}}
+                </app-callout>
+                <ng-container *ngIf="type === policyType.RequireSso">
+                    <app-callout type="tip" title="{{'prerequisite' | i18n}}">
+                        {{'requireSsoPolicyReq' | i18n}}
+                    </app-callout>
+                    <app-callout type="warning">
+                        {{'requireSsoExemption' | i18n}}
+                    </app-callout>
+                </ng-container>
+                <div class="form-group">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="enabled" [(ngModel)]="enabled"
+                            name="Enabled">
+                        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
+                    </div>
+                </div>
+                <ng-container *ngIf="type === policyType.MasterPassword">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinComplexity">{{'minComplexityScore' | i18n}}</label>
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
+                                [(ngModel)]="masterPassMinComplexity" class="form-control">
+                                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinLength">{{'minLength' | i18n}}</label>
+                            <input id="masterPassMinLength" class="form-control" type="number" min="8"
+                                name="MasterPassMinLength" [(ngModel)]="masterPassMinLength">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireUpper"
+                            [(ngModel)]="masterPassRequireUpper" name="MasterPassRequireUpper">
+                        <label class="form-check-label" for="masterPassRequireUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireLower"
+                            [(ngModel)]="masterPassRequireLower" name="MasterPassRequireLower">
+                        <label class="form-check-label" for="masterPassRequireLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireNumbers"
+                            [(ngModel)]="masterPassRequireNumbers" name="MasterPassRequireNumbers">
+                        <label class="form-check-label" for="masterPassRequireNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireSpecial"
+                            [(ngModel)]="masterPassRequireSpecial" name="MasterPassRequireSpecial">
+                        <label class="form-check-label" for="masterPassRequireSpecial">!@#$%^&amp;*</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.PasswordGenerator">
+                    <div class="row">
+                        <div class="col-6 form-group  mb-0">
+                            <label for="passGenDefaultType">{{'defaultType' | i18n}}</label>
+                            <select id="passGenDefaultType" name="PassGenDefaultType" [(ngModel)]="passGenDefaultType"
+                                class="form-control">
+                                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <h3 class="mt-4">{{'password' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinLength">{{'minLength' | i18n}}</label>
+                            <input id="passGenMinLength" class="form-control" type="number" name="PassGenMinLength"
+                                min="5" max="128" [(ngModel)]="passGenMinLength">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumbers">{{'minNumbers' | i18n}}</label>
+                            <input id="passGenMinNumbers" class="form-control" type="number" name="PassGenMinNumbers"
+                                min="0" max="9" [(ngModel)]="passGenMinNumbers">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="passGenMinSpecial">{{'minSpecial' | i18n}}</label>
+                            <input id="passGenMinSpecial" class="form-control" type="number" name="PassGenMinSpecial"
+                                min="0" max="9" [(ngModel)]="passGenMinSpecial">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseUpper"
+                            [(ngModel)]="passGenUseUpper" name="PassGenUseUpper">
+                        <label class="form-check-label" for="passGenUseUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseLower"
+                            [(ngModel)]="passGenUseLower" name="PassGenUseLower">
+                        <label class="form-check-label" for="passGenUseLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseNumbers"
+                            [(ngModel)]="passGenUseNumbers" name="PassGenUseNumbers">
+                        <label class="form-check-label" for="passGenUseNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseSpecial"
+                            [(ngModel)]="passGenUseSpecial" name="PassGenUseSpecial">
+                        <label class="form-check-label" for="passGenUseSpecial">!@#$%^&amp;*</label>
+                    </div>
+                    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
+                            <input id="passGenMinNumberWords" class="form-control" type="number"
+                                name="PassGenMinNumberWords" min="3" max="20" [(ngModel)]="passGenMinNumberWords">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenCapitalize"
+                            [(ngModel)]="passGenCapitalize" name="PassGenCapitalize">
+                        <label class="form-check-label" for="passGenCapitalize">{{'capitalize' | i18n}}</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenIncludeNumber"
+                            [(ngModel)]="passGenIncludeNumber" name="PassGenIncludeNumber">
+                        <label class="form-check-label" for="passGenIncludeNumber">{{'includeNumber' | i18n}}</label>
+                    </div>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>
--- a/src/app/organizations/manage/policy-edit.component.ts
+++ b/src/app/organizations/manage/policy-edit.component.ts
@@ -0,0 +1,193 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { PolicyType } from 'jslib/enums/policyType';
+
+import { PolicyRequest } from 'jslib/models/request/policyRequest';
+
+import { PolicyResponse } from 'jslib/models/response/policyResponse';
+
+@Component({
+    selector: 'app-policy-edit',
+    templateUrl: 'policy-edit.component.html',
+})
+export class PolicyEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() description: string;
+    @Input() type: PolicyType;
+    @Input() organizationId: string;
+    @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+    @Output() onSavedPolicy = new EventEmitter();
+
+    policyType = PolicyType;
+    loading = true;
+    enabled = false;
+    formPromise: Promise<any>;
+    passwordScores: any[];
+    defaultTypes: any[];
+
+    // Master password
+
+    masterPassMinComplexity?: number = null;
+    masterPassMinLength?: number;
+    masterPassRequireUpper?: number;
+    masterPassRequireLower?: number;
+    masterPassRequireNumbers?: number;
+    masterPassRequireSpecial?: number;
+
+    // Password generator
+
+    passGenDefaultType?: string;
+    passGenMinLength?: number;
+    passGenUseUpper?: boolean;
+    passGenUseLower?: boolean;
+    passGenUseNumbers?: boolean;
+    passGenUseSpecial?: boolean;
+    passGenMinNumbers?: number;
+    passGenMinSpecial?: number;
+    passGenMinNumberWords?: number;
+    passGenCapitalize?: boolean;
+    passGenIncludeNumber?: boolean;
+
+    private policy: PolicyResponse;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService) {
+        this.passwordScores = [
+            { name: '-- ' + i18nService.t('select') + ' --', value: null },
+            { name: i18nService.t('weak') + ' (0)', value: 0 },
+            { name: i18nService.t('weak') + ' (1)', value: 1 },
+            { name: i18nService.t('weak') + ' (2)', value: 2 },
+            { name: i18nService.t('good') + ' (3)', value: 3 },
+            { name: i18nService.t('strong') + ' (4)', value: 4 },
+        ];
+        this.defaultTypes = [
+            { name: i18nService.t('userPreference'), value: null },
+            { name: i18nService.t('password'), value: 'password' },
+            { name: i18nService.t('passphrase'), value: 'passphrase' },
+        ];
+    }
+
+    async ngOnInit() {
+        await this.load();
+        this.loading = false;
+    }
+
+    async load() {
+        try {
+            this.policy = await this.apiService.getPolicy(this.organizationId, this.type);
+
+            if (this.policy != null) {
+                this.enabled = this.policy.enabled;
+                if (this.policy.data != null) {
+                    switch (this.type) {
+                        case PolicyType.PasswordGenerator:
+                            this.passGenDefaultType = this.policy.data.defaultType;
+                            this.passGenMinLength = this.policy.data.minLength;
+                            this.passGenUseUpper = this.policy.data.useUpper;
+                            this.passGenUseLower = this.policy.data.useLower;
+                            this.passGenUseNumbers = this.policy.data.useNumbers;
+                            this.passGenUseSpecial = this.policy.data.useSpecial;
+                            this.passGenMinNumbers = this.policy.data.minNumbers;
+                            this.passGenMinSpecial = this.policy.data.minSpecial;
+                            this.passGenMinNumberWords = this.policy.data.minNumberWords;
+                            this.passGenCapitalize = this.policy.data.capitalize;
+                            this.passGenIncludeNumber = this.policy.data.includeNumber;
+                            break;
+                        case PolicyType.MasterPassword:
+                            this.masterPassMinComplexity = this.policy.data.minComplexity;
+                            this.masterPassMinLength = this.policy.data.minLength;
+                            this.masterPassRequireUpper = this.policy.data.requireUpper;
+                            this.masterPassRequireLower = this.policy.data.requireLower;
+                            this.masterPassRequireNumbers = this.policy.data.requireNumbers;
+                            this.masterPassRequireSpecial = this.policy.data.requireSpecial;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+        } catch (e) {
+            if (e.statusCode === 404) {
+                this.enabled = false;
+            } else {
+                throw e;
+            }
+        }
+    }
+
+    async submit() {
+        if (this.preValidate()) {
+            const request = new PolicyRequest();
+            request.enabled = this.enabled;
+            request.type = this.type;
+            request.data = null;
+            switch (this.type) {
+                case PolicyType.PasswordGenerator:
+                    request.data = {
+                        defaultType: this.passGenDefaultType,
+                        minLength: this.passGenMinLength || null,
+                        useUpper: this.passGenUseUpper,
+                        useLower: this.passGenUseLower,
+                        useNumbers: this.passGenUseNumbers,
+                        useSpecial: this.passGenUseSpecial,
+                        minNumbers: this.passGenMinNumbers || null,
+                        minSpecial: this.passGenMinSpecial || null,
+                        minNumberWords: this.passGenMinNumberWords || null,
+                        capitalize: this.passGenCapitalize,
+                        includeNumber: this.passGenIncludeNumber,
+                    };
+                    break;
+                case PolicyType.MasterPassword:
+                    request.data = {
+                        minComplexity: this.masterPassMinComplexity || null,
+                        minLength: this.masterPassMinLength || null,
+                        requireUpper: this.masterPassRequireUpper,
+                        requireLower: this.masterPassRequireLower,
+                        requireNumbers: this.masterPassRequireNumbers,
+                        requireSpecial: this.masterPassRequireSpecial,
+                    };
+                    break;
+                default:
+                    break;
+            }
+            try {
+                this.formPromise = this.apiService.putPolicy(this.organizationId, this.type, request);
+                await this.formPromise;
+                this.analytics.eventTrack.next({ action: 'Edited Policy' });
+                this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.name));
+                this.onSavedPolicy.emit();
+            } catch { }
+        }
+    }
+
+    private preValidate(): boolean {
+        switch (this.type) {
+            case PolicyType.RequireSso:
+                if (!this.enabled) { // Don't need prevalidation checks if submitting to disable
+                    return true;
+                }
+                // Have SingleOrg policy enabled?
+                if (!(this.policiesEnabledMap.has(PolicyType.SingleOrg)
+                    && this.policiesEnabledMap.get(PolicyType.SingleOrg))) {
+                    this.toasterService.popAsync('error', null, this.i18nService.t('requireSsoPolicyReqError'));
+                    return false;
+                }
+                return true;
+
+            default:
+                return true;
+        }
+    }
+}
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -1,51 +1,63 @@
-<div class="modal fade">
-    <div class="modal-dialog" [ngClass]="{'modal-lg': !editMode}">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
+    <div class="modal-dialog modal-lg" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="userAddEditTitle">
                    {{title}}
                    <small class="text-muted" *ngIf="name">{{name}}</small>
                </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <ng-container *ngIf="!editMode">
                    <p>{{'inviteUserDesc' | i18n}}</p>
                    <div class="form-group mb-4">
                        <label for="emails">{{'email' | i18n}}</label>
-                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required>
+                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required
+                            appAutoFocus>
                        <small class="text-muted">{{'inviteMultipleEmailDesc' | i18n : '20'}}</small>
                    </div>
                </ng-container>
-                <h3>{{'userType' | i18n}}</h3>
+                <h3>
+                    {{'userType' | i18n}}
+                    <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                        href="https://bitwarden.com/help/article/user-types-access-control/#user-types">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                    </a>
+                </h3>
                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeUser" [value]="organizationUserType.User" [(ngModel)]="type">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeUser"
+                        [value]="organizationUserType.User" [(ngModel)]="type">
                    <label class="form-check-label" for="userTypeUser">
                        {{'user' | i18n}}
                        <small>{{'userDesc' | i18n}}</small>
                    </label>
                </div>
                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeManager" [value]="organizationUserType.Manager" [(ngModel)]="type">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeManager"
+                        [value]="organizationUserType.Manager" [(ngModel)]="type">
                    <label class="form-check-label" for="userTypeManager">
                        {{'manager' | i18n}}
                        <small>{{'managerDesc' | i18n}}</small>
                    </label>
                </div>
                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeAdmin" [value]="organizationUserType.Admin" [(ngModel)]="type">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeAdmin"
+                        [value]="organizationUserType.Admin" [(ngModel)]="type">
                    <label class="form-check-label" for="userTypeAdmin">
                        {{'admin' | i18n}}
                        <small>{{'adminDesc' | i18n}}</small>
                    </label>
                </div>
                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeOwner" [value]="organizationUserType.Owner" [(ngModel)]="type">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeOwner"
+                        [value]="organizationUserType.Owner" [(ngModel)]="type">
                    <label class="form-check-label" for="userTypeOwner">
                        {{'owner' | i18n}}
                        <small>{{'ownerDesc' | i18n}}</small>
@@ -54,6 +66,10 @@
                <h3 class="mt-4 d-flex">
                    <div class="mb-2">
                        {{'accessControl' | i18n}}
+                        <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                            href="https://bitwarden.com/help/article/user-types-access-control/#access-control">
+                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                        </a>
                    </div>
                    <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
                        <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
@@ -66,13 +82,15 @@
                </h3>
                <div class="form-group" [ngClass]="{'mb-0': access !== 'selected'}">
                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all"
+                            [(ngModel)]="access">
                        <label class="form-check-label" for="accessAll">
                            {{'userAccessAllItems' | i18n}}
                        </label>
                    </div>
                    <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected"
+                            [(ngModel)]="access">
                        <label class="form-check-label" for="accessSelected">
                            {{'userAccessSelectedCollections' | i18n}}
                        </label>
@@ -87,19 +105,26 @@
                            <tr>
                                <th>&nbsp;</th>
                                <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'hidePasswords' | i18n}}</th>
                                <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let c of collections; let i = index">
                                <td class="table-list-checkbox" (click)="check(c)">
-                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked" appStopProp>
+                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked"
+                                        appStopProp>
                                </td>
                                <td (click)="check(c)">
                                    {{c.name}}
                                </td>
                                <td class="text-center">
-                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly" [disabled]="!c.checked">
+                                    <input type="checkbox" [(ngModel)]="c.hidePasswords"
+                                        name="Collection[{{i}}].HidePasswords" [disabled]="!c.checked">
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly"
+                                        [disabled]="!c.checked">
                                </td>
                            </tr>
                        </tbody>
@@ -108,15 +133,18 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}" *ngIf="editMode"
-                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" title="{{'loading' | i18n}}"></i>
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
--- a/src/app/organizations/manage/user-add-edit.component.ts
+++ b/src/app/organizations/manage/user-add-edit.component.ts
@@ -67,6 +67,7 @@ export class UserAddEditComponent implements OnInit {
                        if (collection != null && collection.length > 0) {
                            (collection[0] as any).checked = true;
                            collection[0].readOnly = s.readOnly;
+                            collection[0].hidePasswords = s.hidePasswords;
                        }
                    });
                }
@@ -100,7 +101,7 @@ export class UserAddEditComponent implements OnInit {
        let collections: SelectionReadOnlyRequest[] = null;
        if (this.access !== 'all') {
            collections = this.collections.filter((c) => (c as any).checked)
-                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
+                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly, !!c.hidePasswords));
        }

        try {
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -0,0 +1,38 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title" id="confirmUserTitle">
+                    {{'confirmUser' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    {{'fingerprintEnsureIntegrityVerify' | i18n}}
+                    <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener">
+                        {{'learnMore' | i18n}}</a>
+                </p>
+                <p><code>{{fingerprint}}</code></p>
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="dontAskAgain" name="DontAskAgain"
+                        [(ngModel)]="dontAskAgain">
+                    <label class="form-check-label" for="dontAskAgain">
+                        {{'dontAskFingerprintAgain' | i18n}}
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'confirm' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>
--- a/src/app/organizations/manage/user-confirm.component.ts
+++ b/src/app/organizations/manage/user-confirm.component.ts
@@ -0,0 +1,84 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { OrganizationUserConfirmRequest } from 'jslib/models/request/organizationUserConfirmRequest';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'app-user-confirm',
+    templateUrl: 'user-confirm.component.html',
+})
+export class UserConfirmComponent implements OnInit {
+    @Input() name: string;
+    @Input() userId: string;
+    @Input() organizationUserId: string;
+    @Input() organizationId: string;
+    @Output() onConfirmedUser = new EventEmitter();
+
+    dontAskAgain = false;
+    loading = true;
+    fingerprint: string;
+    formPromise: Promise<any>;
+
+    private publicKey: Uint8Array = null;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private storageService: StorageService) { }
+
+    async ngOnInit() {
+        try {
+            const publicKeyResponse = await this.apiService.getUserPublicKey(this.userId);
+            if (publicKeyResponse != null) {
+                this.publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+                const fingerprint = await this.cryptoService.getFingerprint(this.userId, this.publicKey.buffer);
+                if (fingerprint != null) {
+                    this.fingerprint = fingerprint.join('-');
+                }
+            }
+        } catch { }
+        this.loading = false;
+    }
+
+    async submit() {
+        if (this.loading) {
+            return;
+        }
+
+        if (this.dontAskAgain) {
+            await this.storageService.save(ConstantsService.autoConfirmFingerprints, true);
+        }
+
+        try {
+            this.formPromise = this.doConfirmation();
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Confirmed User' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', this.name));
+            this.onConfirmedUser.emit();
+        } catch { }
+    }
+
+    private async doConfirmation() {
+        const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
+        const key = await this.cryptoService.rsaEncrypt(orgKey.key, this.publicKey.buffer);
+        const request = new OrganizationUserConfirmRequest();
+        request.key = key.encryptedString;
+        await this.apiService.postOrganizationUserConfirm(this.organizationId, this.organizationUserId, request);
+    }
+}
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -1,17 +1,18 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAccessTitle">
+    <div class="modal-dialog" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
            <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="groupAccessTitle">
                    {{'groupAccess' | i18n}}
                    <small class="text-muted" *ngIf="name">{{name}}</small>
                </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
            </div>
            <div class="modal-body" *ngIf="!loading">
                <p>{{'groupAccessUserDesc' | i18n}}</p>
@@ -33,10 +34,11 @@
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'save' | i18n}}</span>
                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
            </div>
        </form>
    </div>
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -2,22 +2,31 @@
    <h1>{{'myOrganization' | i18n}}</h1>
 </div>
 <div *ngIf="loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="row">
        <div class="col-6">
            <div class="form-group">
                <label for="name">{{'organizationName' | i18n}}</label>
-                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name">
+                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name"
+                    [disabled]="selfHosted">
            </div>
            <div class="form-group">
                <label for="billingEmail">{{'billingEmail' | i18n}}</label>
-                <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="org.billingEmail">
+                <input id="billingEmail" class="form-control" type="text" name="BillingEmail"
+                    [(ngModel)]="org.billingEmail" [disabled]="selfHosted">
            </div>
            <div class="form-group">
                <label for="businessName">{{'businessName' | i18n}}</label>
-                <input id="businessName" class="form-control" type="text" name="BusinessName" [(ngModel)]="org.businessName">
+                <input id="businessName" class="form-control" type="text" name="BusinessName"
+                    [(ngModel)]="org.businessName" [disabled]="selfHosted">
+            </div>
+            <div class="form-group">
+                <label for="identifier">{{'identifier' | i18n}}</label>
+                <input id="identifier" class="form-control" type="text" name="Identifier"
+                    [(ngModel)]="org.identifier">
            </div>
        </div>
        <div class="col-6">
@@ -25,26 +34,50 @@
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
        <span>{{'save' | i18n}}</span>
    </button>
 </form>
+<ng-container *ngIf="canUseApi">
+    <div class="secondary-header border-0 mb-0">
+        <h1>{{'apiKey' | i18n}}</h1>
+    </div>
+    <p>
+        {{'apiKeyDesc' | i18n}}
+        <a href="https://docs.bitwarden.com" target="_blank" rel="noopener">
+            {{'learnMore' | i18n}}
+        </a>
+    </p>
+    <button type="button" class="btn btn-outline-secondary" (click)="viewApiKey()">{{'viewApiKey' | i18n}}</button>
+    <button type="button" class="btn btn-outline-secondary" (click)="rotateApiKey()">{{'rotateApiKey' | i18n}}</button>
+</ng-container>
 <div class="secondary-header border-0 mb-0">
    <h1>{{'taxInformation' | i18n}}</h1>
 </div>
 <p>{{'taxInformationDesc' | i18n}}</p>
-<a href="https://bitwarden.com/contact/" target="_blank" rel="noopener" class="btn btn-outline-secondary">
-    {{'contactSupport' | i18n}}
-</a>
+<div *ngIf="!org || loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</div>
+<form *ngIf="org && !loading" #formTax (ngSubmit)="submitTaxInfo()" [appApiAction]="taxFormPromise" ngNativeValidate>
+    <app-tax-info></app-tax-info>
+    <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span>{{'save' | i18n}}</span>
+    </button>
+</form>
 <div class="secondary-header text-danger border-0 mb-0">
    <h1>{{'dangerZone' | i18n}}</h1>
 </div>
 <div class="card border-danger">
    <div class="card-body">
        <p>{{'dangerZoneDesc' | i18n}}</p>
-        <button type="button" class="btn btn-outline-danger" (click)="deleteOrganization()">{{'deleteOrganization' | i18n}}</button>
+        <button type="button" class="btn btn-outline-danger"
+            (click)="deleteOrganization()">{{'deleteOrganization' | i18n}}</button>
        <button type="button" class="btn btn-outline-danger" (click)="purgeVault()">{{'purgeVault' | i18n}}</button>
    </div>
 </div>
 <ng-template #deleteOrganizationTemplate></ng-template>
 <ng-template #purgeOrganizationTemplate></ng-template>
+<ng-template #apiKeyTemplate></ng-template>
+<ng-template #rotateApiKeyTemplate></ng-template>
--- a/src/app/organizations/settings/account.component.ts
+++ b/src/app/organizations/settings/account.component.ts
@@ -11,13 +11,16 @@ import { Angulartics2 } from 'angulartics2';

 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';

 import { OrganizationUpdateRequest } from 'jslib/models/request/organizationUpdateRequest';
 import { OrganizationResponse } from 'jslib/models/response/organizationResponse';

 import { ModalComponent } from '../../modal.component';
+import { ApiKeyComponent } from '../../settings/api-key.component';
 import { PurgeVaultComponent } from '../../settings/purge-vault.component';
+import { TaxInfoComponent } from '../../settings/tax-info.component';
 import { DeleteOrganizationComponent } from './delete-organization.component';

@Component({
@@ -25,12 +28,18 @@ import { DeleteOrganizationComponent } from './delete-organization.component';
    templateUrl: 'account.component.html',
 })
 export class AccountComponent {
-    @ViewChild('deleteOrganizationTemplate', { read: ViewContainerRef }) deleteModalRef: ViewContainerRef;
-    @ViewChild('purgeOrganizationTemplate', { read: ViewContainerRef }) purgeModalRef: ViewContainerRef;
+    @ViewChild('deleteOrganizationTemplate', { read: ViewContainerRef, static: true }) deleteModalRef: ViewContainerRef;
+    @ViewChild('purgeOrganizationTemplate', { read: ViewContainerRef, static: true }) purgeModalRef: ViewContainerRef;
+    @ViewChild('apiKeyTemplate', { read: ViewContainerRef, static: true }) apiKeyModalRef: ViewContainerRef;
+    @ViewChild('rotateApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateApiKeyModalRef: ViewContainerRef;
+    @ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent;

+    selfHosted = false;
    loading = true;
+    canUseApi = false;
    org: OrganizationResponse;
    formPromise: Promise<any>;
+    taxFormPromise: Promise<any>;

    private organizationId: string;
    private modal: ModalComponent = null;
@@ -38,13 +47,16 @@ export class AccountComponent {
    constructor(private componentFactoryResolver: ComponentFactoryResolver,
        private apiService: ApiService, private i18nService: I18nService,
        private analytics: Angulartics2, private toasterService: ToasterService,
-        private route: ActivatedRoute, private syncService: SyncService) { }
+        private route: ActivatedRoute, private syncService: SyncService,
+        private platformUtilsService: PlatformUtilsService) { }

    async ngOnInit() {
+        this.selfHosted = this.platformUtilsService.isSelfHost();
        this.route.parent.parent.params.subscribe(async (params) => {
            this.organizationId = params.organizationId;
            try {
                this.org = await this.apiService.getOrganization(this.organizationId);
+                this.canUseApi = this.org.useApi;
            } catch { }
        });
        this.loading = false;
@@ -56,6 +68,7 @@ export class AccountComponent {
            request.name = this.org.name;
            request.businessName = this.org.businessName;
            request.billingEmail = this.org.billingEmail;
+            request.identifier = this.org.identifier;
            this.formPromise = this.apiService.putOrganization(this.organizationId, request).then(() => {
                return this.syncService.fullSync(true);
            });
@@ -65,6 +78,13 @@ export class AccountComponent {
        } catch { }
    }

+    async submitTaxInfo() {
+        this.taxFormPromise = this.taxInfo.submitTaxInfo();
+        await this.taxFormPromise;
+        this.analytics.eventTrack.next({ action: 'Updated Organization Tax Info' });
+        this.toasterService.popAsync('success', null, this.i18nService.t('taxInfoUpdated'));
+    }
+
    deleteOrganization() {
        if (this.modal != null) {
            this.modal.close();
@@ -95,4 +115,49 @@ export class AccountComponent {
            this.modal = null;
        });
    }
+
+    viewApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.apiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
+        childComponent.keyType = 'organization';
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
+    rotateApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateApiKeyModalRef);
+        childComponent.keyType = 'organization';
+        childComponent.isRotation = true;
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
 }
--- a/src/app/organizations/settings/adjust-seats.component.html
+++ b/src/app/organizations/settings/adjust-seats.component.html
@@ -1,11 +1,13 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
    <div class="card-body">
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
        <h3 class="card-body-header">{{(add ? 'addSeats' : 'removeSeats') | i18n}}</h3>
        <div class="row">
            <div class="form-group col-6">
                <label for="seatAdjustment">{{(add ? 'seatsToAdd' : 'seatsToRemove') | i18n}}</label>
-                <input id="seatAdjustment" class="form-control" type="number" name="SeatAdjustment" [(ngModel)]="seatAdjustment" min="0"
-                    step="1" required>
+                <input id="seatAdjustment" class="form-control" type="number" name="SeatAdjustment"
+                    [(ngModel)]="seatAdjustment" min="0" step="1" required>
            </div>
        </div>
        <div *ngIf="add" class="mb-3">
@@ -13,7 +15,7 @@
            | currency:'$'}} /{{interval | i18n}}
        </div>
        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
            <span>{{'submit' | i18n}}</span>
        </button>
        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
@@ -24,3 +26,4 @@
        </small>
    </div>
 </form>
+<app-payment [showMethods]="false"></app-payment>
--- a/src/app/organizations/settings/adjust-seats.component.ts
+++ b/src/app/organizations/settings/adjust-seats.component.ts
@@ -3,8 +3,14 @@ import {
    EventEmitter,
    Input,
    Output,
+    ViewChild,
 } from '@angular/core';

+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';

@@ -13,6 +19,8 @@ import { I18nService } from 'jslib/abstractions/i18n.service';

 import { SeatRequest } from 'jslib/models/request/seatRequest';

+import { PaymentComponent } from '../../settings/payment.component';
+
@Component({
    selector: 'app-adjust-seats',
    templateUrl: 'adjust-seats.component.html',
@@ -25,11 +33,14 @@ export class AdjustSeatsComponent {
    @Output() onAdjusted = new EventEmitter<number>();
    @Output() onCanceled = new EventEmitter();

+    @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
+
    seatAdjustment = 0;
    formPromise: Promise<any>;

    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService) { }
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private router: Router, private activatedRoute: ActivatedRoute) { }

    async submit() {
        try {
@@ -39,12 +50,32 @@ export class AdjustSeatsComponent {
                request.seatAdjustment *= -1;
            }

-            this.formPromise = this.apiService.postOrganizationSeat(this.organizationId, request);
+            let paymentFailed = false;
+            const action = async () => {
+                const result = await this.apiService.postOrganizationSeat(this.organizationId, request);
+                if (result != null && result.paymentIntentClientSecret != null) {
+                    try {
+                        await this.paymentComponent.handleStripeCardPayment(result.paymentIntentClientSecret, null);
+                    } catch {
+                        paymentFailed = true;
+                    }
+                }
+            };
+            this.formPromise = action();
            await this.formPromise;
            this.analytics.eventTrack.next({ action: this.add ? 'Added Seats' : 'Removed Seats' });
-            this.toasterService.popAsync('success', null,
-                this.i18nService.t('adjustedSeats', request.seatAdjustment.toString()));
            this.onAdjusted.emit(this.seatAdjustment);
+            if (paymentFailed) {
+                this.toasterService.popAsync({
+                    body: this.i18nService.t('couldNotChargeCardPayInvoice'),
+                    type: 'warning',
+                    timeout: 10000,
+                });
+                this.router.navigate(['../billing'], { relativeTo: this.activatedRoute });
+            } else {
+                this.toasterService.popAsync('success', null,
+                    this.i18nService.t('adjustedSeats', request.seatAdjustment.toString()));
+            }
        } catch { }
    }

--- a/src/app/organizations/settings/change-plan.component.html
+++ b/src/app/organizations/settings/change-plan.component.html
@@ -0,0 +1,11 @@
+<div class="card card-org-plans">
+    <div class="card-body">
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
+        <h2 class="card-body-header">{{'changeBillingPlan' | i18n}}</h2>
+        <p class="mb-0">{{'changeBillingPlanUpgrade' | i18n}}</p>
+        <app-organization-plans [showFree]="false" [showCancel]="true" [plan]="defaultUpgradePlan"
+            [product]="defaultUpgradeProduct" [organizationId]="organizationId" (onCanceled)="cancel()">
+        </app-organization-plans>
+    </div>
+</div>
--- a/src/app/organizations/settings/change-plan.component.ts
+++ b/src/app/organizations/settings/change-plan.component.ts
@@ -0,0 +1,39 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { PlanType } from 'jslib/enums/planType';
+import { ProductType } from 'jslib/enums/productType';
+
+@Component({
+    selector: 'app-change-plan',
+    templateUrl: 'change-plan.component.html',
+})
+export class ChangePlanComponent {
+    @Input() organizationId: string;
+    @Output() onChanged = new EventEmitter();
+    @Output() onCanceled = new EventEmitter();
+
+    formPromise: Promise<any>;
+    defaultUpgradePlan: PlanType = PlanType.FamiliesAnnually;
+    defaultUpgradeProduct: ProductType = ProductType.Families;
+
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+
+    async submit() {
+        try {
+            this.platformUtilsService.eventTrack('Changed Plan');
+            this.onChanged.emit();
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+}
--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -1,9 +1,9 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="deleteOrganizationTitle">
+    <div class="modal-dialog" role="document">
        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
            <div class="modal-header">
-                <h2 class="modal-title">{{'deleteOrganization' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="deleteOrganizationTitle">{{'deleteOrganization' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
@@ -11,12 +11,12 @@
                <p>{{'deleteOrganizationDesc' | i18n}}</p>
                <app-callout type="warning">{{'deleteOrganizationWarning' | i18n}}</app-callout>
                <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
-                    appAutofocus appInputVerbatim>
+                <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">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                    <span>{{'deleteOrganization' | i18n}}</span>
                </button>
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -0,0 +1,27 @@
+<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="card-body">
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                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="d-flex">
+                    <label for="installationId">{{'enterInstallationId' | i18n}}</label>
+                    <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                        href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                    </a>
+                </div>
+                <input id="installationId" class="form-control" type="text" name="InstallationId"
+                    [(ngModel)]="installationId" required>
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span>{{'submit' | i18n}}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
+            {{'cancel' | i18n}}
+        </button>
+    </div>
+</form>
--- a/src/app/organizations/settings/download-license.component.ts
+++ b/src/app/organizations/settings/download-license.component.ts
@@ -0,0 +1,43 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+@Component({
+    selector: 'app-download-license',
+    templateUrl: 'download-license.component.html',
+})
+export class DownloadLicenseComponent {
+    @Input() organizationId: string;
+    @Output() onDownloaded = new EventEmitter();
+    @Output() onCanceled = new EventEmitter();
+
+    installationId: string;
+    formPromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+
+    async submit() {
+        if (this.installationId == null || this.installationId === '') {
+            return;
+        }
+
+        try {
+            this.formPromise = this.apiService.getOrganizationLicense(this.organizationId, this.installationId);
+            const license = await this.formPromise;
+            const licenseString = JSON.stringify(license, null, 2);
+            this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
+            this.platformUtilsService.eventTrack('Downloaded License');
+            this.onDownloaded.emit();
+        } catch { }
+    }
+
+    cancel() {
+        this.onCanceled.emit();
+    }
+}
--- a/src/app/organizations/settings/organization-billing.component.html
+++ b/src/app/organizations/settings/organization-billing.component.html
@@ -1,195 +0,0 @@
-<div class="page-header">
-    <h1>
-        {{'billingAndLicensing' | i18n}}
-        <small>
-            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
-        </small>
-    </h1>
-</div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
-<ng-container *ngIf="billing">
-    <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">{{'subscriptionCanceled' | i18n}}</app-callout>
-    <app-callout type="warning" title="{{'pendingCancellation' | i18n}}" *ngIf="subscriptionMarkedForCancel">
-        <p>{{'subscriptionPendingCanceled' | i18n}}</p>
-        <button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()" [appApiAction]="reinstatePromise"
-            [disabled]="reinstateBtn.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-            <span>{{'reinstateSubscription' | i18n}}</span>
-        </button>
-    </app-callout>
-    <dl *ngIf="selfHosted">
-        <dt>{{'billingPlan' | i18n}}</dt>
-        <dd>{{billing.plan}}</dd>
-        <dt>{{'expiration' | i18n}}</dt>
-        <dd *ngIf="billing.expiration">
-            {{billing.expiration | date:'mediumDate'}}
-            <span *ngIf="isExpired" class="text-danger ml-2">
-                <i class="fa fa-exclamation-triangle"></i>
-                {{'licenseIsExpired' | i18n}}
-            </span>
-        </dd>
-        <dd *ngIf="!billing.expiration">{{'neverExpires' | i18n}}</dd>
-    </dl>
-    <div class="row" *ngIf="!selfHosted">
-        <div class="col-4">
-            <dl>
-                <dt>{{'billingPlan' | i18n}}</dt>
-                <dd>{{billing.plan}}</dd>
-                <ng-container *ngIf="subscription">
-                    <dt>{{'status' | i18n}}</dt>
-                    <dd>
-                        <span class="text-capitalize">{{subscription.status || '-'}}</span>
-                        <span class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{'pendingCancellation' | i18n}}</span>
-                    </dd>
-                    <dt>{{'nextCharge' | i18n}}</dt>
-                    <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$'))
-                        : '-'}}
-                    </dd>
-                </ng-container>
-            </dl>
-        </div>
-        <div class="col-8" *ngIf="subscription">
-            <strong class="d-block mb-1">{{'details' | i18n}}</strong>
-            <table class="table">
-                <tbody>
-                    <tr *ngFor="let i of subscription.items">
-                        <td>
-                            {{i.name}} {{i.quantity > 1 ? '&times;' + i.quantity : ''}} @ {{i.amount | currency:'$'}}
-                        </td>
-                        <td>
-                            {{(i.quantity * i.amount) | currency:'$'}} /{{i.interval | i18n}}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-    <ng-container *ngIf="selfHosted">
-        <div>
-            <button type="button" class="btn btn-outline-secondary" (click)="updateLicense()">
-                {{'updateLicense' | i18n}}
-            </button>
-            <a href="https://vault.bitwarden.com" target="_blank" rel="noopener" class="btn btn-outline-secondary">
-                {{'manageSubscription' | i18n}}
-            </a>
-        </div>
-        <div class="card mt-3" *ngIf="showUpdateLicense">
-            <div class="card-body">
-                <h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
-                <app-update-license [organizationId]="organizationId" (onUpdated)="closeUpdateLicense(true)" (onCanceled)="closeUpdateLicense(false)"></app-update-license>
-            </div>
-        </div>
-    </ng-container>
-    <ng-container *ngIf="!selfHosted">
-        <div class="d-flex">
-            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()">
-                {{'changeBillingPlan' | i18n}}
-            </button>
-            <button type="button" class="btn btn-outline-secondary btn-submit ml-1" #licenseBtn [appApiAction]="licensePromise" [disabled]="licenseBtn.loading"
-                (click)="downloadLicense()" *ngIf="canDownloadLicense">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                <span>{{'downloadLicense' | i18n}}</span>
-            </button>
-            <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()" [appApiAction]="cancelPromise"
-                [disabled]="cancelBtn.loading" *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                <span>{{'cancelSubscription' | i18n}}</span>
-            </button>
-        </div>
-        <h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
-        <p>{{'subscriptionUserSeats' | i18n : billing.seats}}</p>
-        <ng-container *ngIf="subscription && canAdjustSeats">
-            <div class="mt-3">
-                <div class="d-flex" *ngIf="!showAdjustSeats">
-                    <button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
-                        {{'addSeats' | i18n}}
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustSeats(false)">
-                        {{'removeSeats' | i18n}}
-                    </button>
-                </div>
-                <app-adjust-seats [seatPrice]="seatPrice" [add]="adjustSeatsAdd" [organizationId]="organizationId" [interval]="billingInterval"
-                    (onAdjusted)="closeSeats(true)" (onCanceled)="closeSeats(false)" *ngIf="showAdjustSeats"></app-adjust-seats>
-            </div>
-        </ng-container>
-        <h2 class="spaced-header">{{'storage' | i18n}}</h2>
-        <p>{{'subscriptionStorage' | i18n : billing.maxStorageGb || 0 : billing.storageName || '0 MB'}}</p>
-        <div class="progress">
-            <div class="progress-bar bg-success" role="progressbar" [ngStyle]="{width: storageProgressWidth + '%' }" [attr.aria-valuenow]="storagePercentage"
-                aria-valuemin="0" aria-valuemax="100">{{(storagePercentage / 100) | percent}}</div>
-        </div>
-        <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel && paymentSource">
-            <div class="mt-3">
-                <div class="d-flex" *ngIf="!showAdjustStorage">
-                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
-                        {{'addStorage' | i18n}}
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustStorage(false)">
-                        {{'removeStorage' | i18n}}
-                    </button>
-                </div>
-                <app-adjust-storage [storageGbPrice]="storageGbPrice" [add]="adjustStorageAdd" [organizationId]="organizationId" [interval]="billingInterval"
-                    (onAdjusted)="closeStorage(true)" (onCanceled)="closeStorage(false)" *ngIf="showAdjustStorage"></app-adjust-storage>
-            </div>
-        </ng-container>
-        <h2 class="spaced-header">{{'paymentMethod' | i18n}}</h2>
-        <p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
-        <ng-container *ngIf="paymentSource">
-            <app-callout type="warning" title="{{'verifyBankAccount' | i18n}}" *ngIf="paymentSource.type === paymentMethodType.BankAccount && paymentSource.needsVerification">
-                <p>{{'verifyBankAccountDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}</p>
-                <form #verifyForm class="form-inline" (ngSubmit)="verifyBank()" [appApiAction]="verifyBankPromise" ngNativeValidate>
-                    <label class="sr-only" for="verifyAmount1">{{'amount' | i18n : '1'}}</label>
-                    <div class="input-group mr-2">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text">$0.</div>
-                        </div>
-                        <input type="number" class="form-control" id="verifyAmount1" placeholder="xx" name="Amount1" [(ngModel)]="verifyAmount1"
-                            min="1" max="99" step="1" required>
-                    </div>
-                    <label class="sr-only" for="verifyAmount2">{{'amount' | i18n : '2'}}</label>
-                    <div class="input-group mr-2">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text">$0.</div>
-                        </div>
-                        <input type="number" class="form-control" id="verifyAmount2" placeholder="xx" name="Amount2" [(ngModel)]="verifyAmount2"
-                            min="1" max="99" step="1" required>
-                    </div>
-                    <button type="submit" class="btn btn-outline-primary btn-submit" [disabled]="verifyForm.loading">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                        <span>{{'verifyBankAccount' | i18n}}</span>
-                    </button>
-                </form>
-            </app-callout>
-            <p>
-                <i class="fa fa-fw" [ngClass]="{'fa-credit-card': paymentSource.type === paymentMethodType.Card,
-                'fa-university': paymentSource.type === paymentMethodType.BankAccount, 
-                'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"></i>
-                {{paymentSource.description}}
-            </p>
-        </ng-container>
-        <button type="button" class="btn btn-outline-secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
-            {{(paymentSource ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}
-        </button>
-        <app-adjust-payment [currentType]="paymentSource != null ? paymentSource.type : null" [organizationId]="organizationId" (onAdjusted)="closePayment(true)"
-            (onCanceled)="closePayment(false)" *ngIf="showAdjustPayment">
-        </app-adjust-payment>
-        <h2 class="spaced-header">{{'charges' | i18n}}</h2>
-        <p *ngIf="!charges || !charges.length">{{'noCharges' | i18n}}</p>
-        <table class="table mb-2" *ngIf="charges && charges.length">
-            <tbody>
-                <tr *ngFor="let c of charges">
-                    <td>
-                        <a href="#" appStopClick (click)="viewInvoice(c)" title="{{'invoice' | i18n}}">
-                            <i class="fa fa-file-pdf-o"></i>
-                        </a>
-                    </td>
-                    <td>{{c.createdDate | date:'mediumDate'}}</td>
-                    <td>{{c.paymentSource ? c.paymentSource.description : '-'}}</td>
-                    <td class="text-capitalize">{{c.status}}</td>
-                    <td [ngClass]="{'text-strike':c.refunded}" title="{{(c.refunded ? 'refunded' : '') | i18n}}">{{c.amount | currency:'$'}}</td>
-                </tr>
-            </tbody>
-        </table>
-        <small class="text-muted">* {{'chargesStatement' | i18n : 'BITWARDEN'}}</small>
-    </ng-container>
-</ng-container>
--- a/src/app/organizations/settings/organization-billing.component.ts
+++ b/src/app/organizations/settings/organization-billing.component.ts
@@ -7,49 +7,21 @@ import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';

-import { VerifyBankRequest } from 'jslib/models/request/verifyBankRequest';
-
-import { BillingChargeResponse } from 'jslib/models/response/billingResponse';
-import { OrganizationBillingResponse } from 'jslib/models/response/organizationBillingResponse';
-
 import { ApiService } from 'jslib/abstractions/api.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { TokenService } from 'jslib/abstractions/token.service';

-import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
-import { PlanType } from 'jslib/enums/planType';
+import { UserBillingComponent } from '../../settings/user-billing.component';

@Component({
    selector: 'app-org-billing',
-    templateUrl: 'organization-billing.component.html',
+    templateUrl: '../../settings/user-billing.component.html',
 })
-export class OrganizationBillingComponent implements OnInit {
-    loading = false;
-    firstLoaded = false;
-    organizationId: string;
-    adjustSeatsAdd = true;
-    showAdjustSeats = false;
-    adjustStorageAdd = true;
-    showAdjustStorage = false;
-    showAdjustPayment = false;
-    showUpdateLicense = false;
-    billing: OrganizationBillingResponse;
-    paymentMethodType = PaymentMethodType;
-    selfHosted = false;
-    verifyAmount1: number;
-    verifyAmount2: number;
-
-    cancelPromise: Promise<any>;
-    reinstatePromise: Promise<any>;
-    licensePromise: Promise<any>;
-    verifyBankPromise: Promise<any>;
-
-    constructor(private tokenService: TokenService, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private route: ActivatedRoute) {
-        this.selfHosted = platformUtilsService.isSelfHost();
+export class OrganizationBillingComponent extends UserBillingComponent implements OnInit {
+    constructor(apiService: ApiService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        private route: ActivatedRoute, platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
    }

    async ngOnInit() {
@@ -59,222 +31,4 @@ export class OrganizationBillingComponent implements OnInit {
            this.firstLoaded = true;
        });
    }
-
-    async load() {
-        if (this.loading) {
-            return;
-        }
-        this.loading = true;
-        this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
-        this.loading = false;
-    }
-
-    async reinstate() {
-        if (this.loading) {
-            return;
-        }
-
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('reinstateConfirmation'),
-            this.i18nService.t('reinstateSubscription'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            this.reinstatePromise = this.apiService.postOrganizationReinstate(this.organizationId);
-            await this.reinstatePromise;
-            this.analytics.eventTrack.next({ action: 'Reinstated Plan' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('reinstated'));
-            this.load();
-        } catch { }
-    }
-
-    async cancel() {
-        if (this.loading) {
-            return;
-        }
-
-        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('cancelConfirmation'),
-            this.i18nService.t('cancelSubscription'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return;
-        }
-
-        try {
-            this.cancelPromise = this.apiService.postOrganizationCancel(this.organizationId);
-            await this.cancelPromise;
-            this.analytics.eventTrack.next({ action: 'Canceled Plan' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
-            this.load();
-        } catch { }
-    }
-
-    async changePlan() {
-        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');
-        }
-    }
-
-    async downloadLicense() {
-        if (this.loading) {
-            return;
-        }
-
-        const installationId = window.prompt(this.i18nService.t('enterInstallationId'));
-        if (installationId == null || installationId === '') {
-            return;
-        }
-
-        try {
-            this.licensePromise = this.apiService.getOrganizationLicense(this.organizationId, installationId);
-            const license = await this.licensePromise;
-            const licenseString = JSON.stringify(license, null, 2);
-            this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
-        } catch { }
-    }
-
-    updateLicense() {
-        if (this.loading) {
-            return;
-        }
-        this.showUpdateLicense = true;
-    }
-
-    async verifyBank() {
-        if (this.loading) {
-            return;
-        }
-
-        try {
-            const request = new VerifyBankRequest();
-            request.amount1 = this.verifyAmount1;
-            request.amount2 = this.verifyAmount2;
-            this.verifyBankPromise = this.apiService.postOrganizationVerifyBank(this.organizationId, request);
-            await this.verifyBankPromise;
-            this.analytics.eventTrack.next({ action: 'Verified Bank Account' });
-            this.toasterService.popAsync('success', null, this.i18nService.t('verifiedBankAccount'));
-            this.load();
-        } catch { }
-    }
-
-    closeUpdateLicense(load: boolean) {
-        this.showUpdateLicense = false;
-        if (load) {
-            this.load();
-        }
-    }
-
-    adjustSeats(add: boolean) {
-        this.adjustSeatsAdd = add;
-        this.showAdjustSeats = true;
-    }
-
-    closeSeats(load: boolean) {
-        this.showAdjustSeats = false;
-        if (load) {
-            this.load();
-        }
-    }
-
-    adjustStorage(add: boolean) {
-        this.adjustStorageAdd = add;
-        this.showAdjustStorage = true;
-    }
-
-    closeStorage(load: boolean) {
-        this.showAdjustStorage = false;
-        if (load) {
-            this.load();
-        }
-    }
-
-    changePayment() {
-        this.showAdjustPayment = true;
-    }
-
-    closePayment(load: boolean) {
-        this.showAdjustPayment = false;
-        if (load) {
-            this.load();
-        }
-    }
-
-    async viewInvoice(charge: BillingChargeResponse) {
-        const token = await this.tokenService.getToken();
-        const url = this.apiService.apiBaseUrl + '/organizations/' + this.organizationId +
-            '/billing-invoice/' + charge.invoiceId + '?access_token=' + token;
-        this.platformUtilsService.launchUri(url);
-    }
-
-    get isExpired() {
-        return this.billing != null && this.billing.expiration != null &&
-            new Date(this.billing.expiration) < new Date();
-    }
-
-    get subscriptionMarkedForCancel() {
-        return this.subscription != null && !this.subscription.cancelled && this.subscription.cancelAtEndDate;
-    }
-
-    get subscription() {
-        return this.billing != null ? this.billing.subscription : null;
-    }
-
-    get nextInvoice() {
-        return this.billing != null ? this.billing.upcomingInvoice : null;
-    }
-
-    get paymentSource() {
-        return this.billing != null ? this.billing.paymentSource : null;
-    }
-
-    get charges() {
-        return this.billing != null ? this.billing.charges : null;
-    }
-
-    get storagePercentage() {
-        return this.billing != null && this.billing.maxStorageGb ?
-            +(100 * (this.billing.storageGb / this.billing.maxStorageGb)).toFixed(2) : 0;
-    }
-
-    get storageProgressWidth() {
-        return this.storagePercentage < 5 ? 5 : 0;
-    }
-
-    get billingInterval() {
-        const monthly = this.billing.planType === PlanType.EnterpriseMonthly ||
-            this.billing.planType === PlanType.TeamsMonthly;
-        return monthly ? 'month' : 'year';
-    }
-
-    get storageGbPrice() {
-        return this.billingInterval === 'month' ? 0.5 : 4;
-    }
-
-    get seatPrice() {
-        switch (this.billing.planType) {
-            case PlanType.EnterpriseMonthly:
-                return 4;
-            case PlanType.EnterpriseAnnually:
-                return 36;
-            case PlanType.TeamsMonthly:
-                return 2.5;
-            case PlanType.TeamsAnnually:
-                return 24;
-            default:
-                return 0;
-        }
-    }
-
-    get canAdjustSeats() {
-        return this.billing.planType === PlanType.EnterpriseMonthly ||
-            this.billing.planType === PlanType.EnterpriseAnnually ||
-            this.billing.planType === PlanType.TeamsMonthly || this.billing.planType === PlanType.TeamsAnnually;
-    }
-
-    get canDownloadLicense() {
-        return (this.billing.planType !== PlanType.Free && this.subscription == null) ||
-            (this.subscription != null && !this.subscription.cancelled);
-    }
 }
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/src/app/organizations/settings/organization-subscription.component.html
@@ -0,0 +1,154 @@
+<div class="page-header">
+    <h1>
+        {{'subscription' | i18n}}
+        <small *ngIf="firstLoaded && loading">
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </small>
+    </h1>
+</div>
+<ng-container *ngIf="!firstLoaded && loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container *ngIf="sub">
+    <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">
+        {{'subscriptionCanceled' | i18n}}</app-callout>
+    <app-callout type="warning" title="{{'pendingCancellation' | i18n}}" *ngIf="subscriptionMarkedForCancel">
+        <p>{{'subscriptionPendingCanceled' | i18n}}</p>
+        <button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()"
+            [appApiAction]="reinstatePromise" [disabled]="reinstateBtn.loading">
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span>{{'reinstateSubscription' | i18n}}</span>
+        </button>
+    </app-callout>
+    <dl *ngIf="selfHosted">
+        <dt>{{'billingPlan' | i18n}}</dt>
+        <dd>{{sub.plan.name}}</dd>
+        <dt>{{'expiration' | i18n}}</dt>
+        <dd *ngIf="sub.expiration">
+            {{sub.expiration | date:'mediumDate'}}
+            <span *ngIf="isExpired" class="text-danger ml-2">
+                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                {{'licenseIsExpired' | i18n}}
+            </span>
+        </dd>
+        <dd *ngIf="!sub.expiration">{{'neverExpires' | i18n}}</dd>
+    </dl>
+    <div class="row" *ngIf="!selfHosted">
+        <div class="col-4">
+            <dl>
+                <dt>{{'billingPlan' | i18n}}</dt>
+                <dd>{{sub.plan.name}}</dd>
+                <ng-container *ngIf="subscription">
+                    <dt>{{'status' | i18n}}</dt>
+                    <dd>
+                        <span class="text-capitalize">{{subscription.status || '-'}}</span>
+                        <span class="badge badge-warning"
+                            *ngIf="subscriptionMarkedForCancel">{{'pendingCancellation' | i18n}}</span>
+                    </dd>
+                    <dt>{{'nextCharge' | i18n}}</dt>
+                    <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$'))
+                        : '-'}}
+                    </dd>
+                </ng-container>
+            </dl>
+        </div>
+        <div class="col-8" *ngIf="subscription">
+            <strong class="d-block mb-1">{{'details' | i18n}}</strong>
+            <table class="table">
+                <tbody>
+                    <tr *ngFor="let i of subscription.items">
+                        <td>
+                            {{i.name}} {{i.quantity > 1 ? '&times;' + i.quantity : ''}} @ {{i.amount | currency:'$'}}
+                        </td>
+                        <td>
+                            {{(i.quantity * i.amount) | currency:'$'}} /{{i.interval | i18n}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <ng-container *ngIf="selfHosted">
+        <div>
+            <button type="button" class="btn btn-outline-secondary" (click)="updateLicense()">
+                {{'updateLicense' | i18n}}
+            </button>
+            <a href="https://vault.bitwarden.com" target="_blank" rel="noopener" class="btn btn-outline-secondary">
+                {{'manageSubscription' | i18n}}
+            </a>
+        </div>
+        <div class="card mt-3" *ngIf="showUpdateLicense">
+            <div class="card-body">
+                <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}"
+                    (click)="closeUpdateLicense(false)"><span aria-hidden="true">&times;</span></button>
+                <h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
+                <app-update-license [organizationId]="organizationId" (onUpdated)="closeUpdateLicense(true)"
+                    (onCanceled)="closeUpdateLicense(false)"></app-update-license>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="!selfHosted">
+        <div class="d-flex">
+            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="!showChangePlan">
+                {{'changeBillingPlan' | i18n}}
+            </button>
+            <button type="button" class="btn btn-outline-secondary ml-1" (click)="downloadLicense()"
+                *ngIf="canDownloadLicense" [disabled]="showDownloadLicense">
+                {{'downloadLicense' | i18n}}
+            </button>
+            <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()"
+                [appApiAction]="cancelPromise" [disabled]="cancelBtn.loading"
+                *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <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>
+        </div>
+        <h2 class="spaced-header">{{'userSeats' | i18n}}</h2>
+        <p>{{'subscriptionUserSeats' | i18n : sub.seats}}</p>
+        <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
+            <div class="mt-3">
+                <div class="d-flex" *ngIf="!showAdjustSeats">
+                    <button type="button" class="btn btn-outline-secondary" (click)="adjustSeats(true)">
+                        {{'addSeats' | i18n}}
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustSeats(false)">
+                        {{'removeSeats' | i18n}}
+                    </button>
+                </div>
+                <app-adjust-seats [seatPrice]="seatPrice" [add]="adjustSeatsAdd" [organizationId]="organizationId"
+                    [interval]="billingInterval" (onAdjusted)="closeSeats(true)" (onCanceled)="closeSeats(false)"
+                    *ngIf="showAdjustSeats"></app-adjust-seats>
+            </div>
+        </ng-container>
+        <h2 class="spaced-header">{{'storage' | i18n}}</h2>
+        <p>{{'subscriptionStorage' | i18n : sub.maxStorageGb || 0 : sub.storageName || '0 MB'}}</p>
+        <div class="progress">
+            <div class="progress-bar bg-success" role="progressbar" [ngStyle]="{width: storageProgressWidth + '%' }"
+                [attr.aria-valuenow]="storagePercentage" aria-valuemin="0" aria-valuemax="100">
+                {{(storagePercentage / 100) | percent}}</div>
+        </div>
+        <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
+            <div class="mt-3">
+                <div class="d-flex" *ngIf="!showAdjustStorage">
+                    <button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
+                        {{'addStorage' | i18n}}
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary ml-1" (click)="adjustStorage(false)">
+                        {{'removeStorage' | i18n}}
+                    </button>
+                </div>
+                <app-adjust-storage [storageGbPrice]="storageGbPrice" [add]="adjustStorageAdd"
+                    [organizationId]="organizationId" [interval]="billingInterval" (onAdjusted)="closeStorage(true)"
+                    (onCanceled)="closeStorage(false)" *ngIf="showAdjustStorage"></app-adjust-storage>
+            </div>
+        </ng-container>
+    </ng-container>
+</ng-container>
--- a/src/app/organizations/settings/organization-subscription.component.ts
+++ b/src/app/organizations/settings/organization-subscription.component.ts
@@ -0,0 +1,214 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { OrganizationSubscriptionResponse } from 'jslib/models/response/organizationSubscriptionResponse';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { PlanType } from 'jslib/enums/planType';
+
+@Component({
+    selector: 'app-org-subscription',
+    templateUrl: 'organization-subscription.component.html',
+})
+export class OrganizationSubscriptionComponent implements OnInit {
+    loading = false;
+    firstLoaded = false;
+    organizationId: string;
+    adjustSeatsAdd = true;
+    showAdjustSeats = false;
+    adjustStorageAdd = true;
+    showAdjustStorage = false;
+    showUpdateLicense = false;
+    showDownloadLicense = false;
+    showChangePlan = false;
+    sub: OrganizationSubscriptionResponse;
+    selfHosted = false;
+
+    cancelPromise: Promise<any>;
+    reinstatePromise: Promise<any>;
+
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private i18nService: I18nService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private messagingService: MessagingService,
+        private route: ActivatedRoute) {
+        this.selfHosted = platformUtilsService.isSelfHost();
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            await this.load();
+            this.firstLoaded = true;
+        });
+    }
+
+    async load() {
+        if (this.loading) {
+            return;
+        }
+        this.loading = true;
+        this.sub = await this.apiService.getOrganizationSubscription(this.organizationId);
+        this.loading = false;
+    }
+
+    async reinstate() {
+        if (this.loading) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('reinstateConfirmation'),
+            this.i18nService.t('reinstateSubscription'), this.i18nService.t('yes'), this.i18nService.t('cancel'));
+        if (!confirmed) {
+            return;
+        }
+
+        try {
+            this.reinstatePromise = this.apiService.postOrganizationReinstate(this.organizationId);
+            await this.reinstatePromise;
+            this.analytics.eventTrack.next({ action: 'Reinstated Plan' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('reinstated'));
+            this.load();
+        } catch { }
+    }
+
+    async cancel() {
+        if (this.loading) {
+            return;
+        }
+
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('cancelConfirmation'),
+            this.i18nService.t('cancelSubscription'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return;
+        }
+
+        try {
+            this.cancelPromise = this.apiService.postOrganizationCancel(this.organizationId);
+            await this.cancelPromise;
+            this.analytics.eventTrack.next({ action: 'Canceled Plan' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
+            this.load();
+        } catch { }
+    }
+
+    async changePlan() {
+        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) {
+        this.showChangePlan = false;
+    }
+
+    downloadLicense() {
+        this.showDownloadLicense = !this.showDownloadLicense;
+    }
+
+    closeDownloadLicense() {
+        this.showDownloadLicense = false;
+    }
+
+    updateLicense() {
+        if (this.loading) {
+            return;
+        }
+        this.showUpdateLicense = true;
+    }
+
+    closeUpdateLicense(updated: boolean) {
+        this.showUpdateLicense = false;
+        if (updated) {
+            this.load();
+            this.messagingService.send('updatedOrgLicense');
+        }
+    }
+
+    adjustSeats(add: boolean) {
+        this.adjustSeatsAdd = add;
+        this.showAdjustSeats = true;
+    }
+
+    closeSeats(load: boolean) {
+        this.showAdjustSeats = false;
+        if (load) {
+            this.load();
+        }
+    }
+
+    adjustStorage(add: boolean) {
+        this.adjustStorageAdd = add;
+        this.showAdjustStorage = true;
+    }
+
+    closeStorage(load: boolean) {
+        this.showAdjustStorage = false;
+        if (load) {
+            this.load();
+        }
+    }
+
+    get isExpired() {
+        return this.sub != null && this.sub.expiration != null &&
+            new Date(this.sub.expiration) < new Date();
+    }
+
+    get subscriptionMarkedForCancel() {
+        return this.subscription != null && !this.subscription.cancelled && this.subscription.cancelAtEndDate;
+    }
+
+    get subscription() {
+        return this.sub != null ? this.sub.subscription : null;
+    }
+
+    get nextInvoice() {
+        return this.sub != null ? this.sub.upcomingInvoice : null;
+    }
+
+    get storagePercentage() {
+        return this.sub != null && this.sub.maxStorageGb ?
+            +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2) : 0;
+    }
+
+    get storageProgressWidth() {
+        return this.storagePercentage < 5 ? 5 : 0;
+    }
+
+    get billingInterval() {
+        const monthly = !this.sub.plan.isAnnual;
+        return monthly ? 'month' : 'year';
+    }
+
+    get storageGbPrice() {
+        return this.sub.plan.additionalStoragePricePerGb;
+    }
+
+    get seatPrice() {
+        return this.sub.plan.seatPrice;
+    }
+
+    get canAdjustSeats() {
+        return this.sub.plan.hasAdditionalSeatsOption;
+    }
+
+    get canDownloadLicense() {
+        return (this.sub.planType !== PlanType.Free && this.subscription == null) ||
+            (this.subscription != null && !this.subscription.cancelled);
+    }
+}
--- a/src/app/organizations/settings/settings.component.html
+++ b/src/app/organizations/settings/settings.component.html
@@ -7,8 +7,11 @@
                    <a routerLink="account" class="list-group-item" routerLinkActive="active">
                        {{'myOrganization' | i18n}}
                    </a>
-                    <a routerLink="billing" class="list-group-item" routerLinkActive="active">
-                        {{'billingAndLicensing' | i18n}}
+                    <a routerLink="subscription" class="list-group-item" routerLinkActive="active">
+                        {{'subscription' | i18n}}
+                    </a>
+                    <a routerLink="billing" class="list-group-item" routerLinkActive="active" *ngIf="!selfHosted">
+                        {{'billing' | i18n}}
                    </a>
                    <a routerLink="two-factor" class="list-group-item" routerLinkActive="active" *ngIf="access2fa">
                        {{'twoStepLogin' | i18n}}
--- a/src/app/organizations/settings/settings.component.ts
+++ b/src/app/organizations/settings/settings.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';

@Component({
@@ -9,11 +10,14 @@ import { UserService } from 'jslib/abstractions/user.service';
 })
 export class SettingsComponent {
    access2fa = false;
+    selfHosted: boolean;

-    constructor(private route: ActivatedRoute, private userService: UserService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService,
+        private platformUtilsService: PlatformUtilsService) { }

    ngOnInit() {
        this.route.parent.params.subscribe(async (params) => {
+            this.selfHosted = await this.platformUtilsService.isSelfHost();
            const organization = await this.userService.getOrganization(params.organizationId);
            this.access2fa = organization.use2fa;
        });
--- a/src/app/organizations/settings/two-factor-setup.component.ts
+++ b/src/app/organizations/settings/two-factor-setup.component.ts
@@ -6,6 +6,7 @@ import { ActivatedRoute } from '@angular/router';

 import { ApiService } from 'jslib/abstractions/api.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
 import { UserService } from 'jslib/abstractions/user.service';

 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
@@ -20,8 +21,8 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from '../../se
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
    constructor(apiService: ApiService, userService: UserService,
        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
-        private route: ActivatedRoute) {
-        super(apiService, userService, componentFactoryResolver, messagingService);
+        policyService: PolicyService, private route: ActivatedRoute) {
+        super(apiService, userService, componentFactoryResolver, messagingService, policyService);
    }

    async ngOnInit() {
--- a/src/app/organizations/tools/export.component.ts
+++ b/src/app/organizations/tools/export.component.ts
@@ -2,12 +2,15 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

 import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { EventService } from 'jslib/abstractions/event.service';
 import { ExportService } from 'jslib/abstractions/export.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';

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

+import { EventType } from 'jslib/enums/eventType';
+
@Component({
    selector: 'app-org-export',
    templateUrl: '../../tools/export.component.html',
@@ -17,8 +20,8 @@ export class ExportComponent extends BaseExportComponent {

    constructor(cryptoService: CryptoService, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, exportService: ExportService,
-        private route: ActivatedRoute) {
-        super(cryptoService, i18nService, platformUtilsService, exportService);
+        eventService: EventService, private route: ActivatedRoute) {
+        super(cryptoService, i18nService, platformUtilsService, exportService, eventService);
    }

    ngOnInit() {
@@ -28,10 +31,15 @@ export class ExportComponent extends BaseExportComponent {
    }

    getExportData() {
-        return this.exportService.getOrganizationExport(this.organizationId, 'csv');
+        return this.exportService.getOrganizationExport(this.organizationId, this.format);
    }

    getFileName() {
        return super.getFileName('org');
    }
+
+    async collectEvent(): Promise<any> {
+        // TODO
+        // await this.eventService.collect(EventType.Organization_ClientExportedVault);
+    }
 }
--- a/src/app/organizations/tools/exposed-passwords-report.component.ts
+++ b/src/app/organizations/tools/exposed-passwords-report.component.ts
@@ -0,0 +1,39 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { AuditService } from 'jslib/abstractions/audit.service';
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import {
+    ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent,
+} from '../../tools/exposed-passwords-report.component';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Component({
+    selector: 'app-exposed-passwords-report',
+    templateUrl: '../../tools/exposed-passwords-report.component.html',
+})
+export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportComponent {
+    constructor(cipherService: CipherService, auditService: AuditService,
+        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        userService: UserService, private route: ActivatedRoute) {
+        super(cipherService, auditService, componentFactoryResolver, messagingService, userService);
+    }
+
+    ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            super.ngOnInit();
+        });
+    }
+
+    getAllCiphers(): Promise<CipherView[]> {
+        return this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    }
+}
--- a/src/app/organizations/tools/inactive-two-factor-report.component.ts
+++ b/src/app/organizations/tools/inactive-two-factor-report.component.ts
@@ -0,0 +1,38 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import {
+    InactiveTwoFactorReportComponent as BaseInactiveTwoFactorReportComponent,
+} from '../../tools/inactive-two-factor-report.component';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Component({
+    selector: 'app-inactive-two-factor-report',
+    templateUrl: '../../tools/inactive-two-factor-report.component.html',
+})
+export class InactiveTwoFactorReportComponent extends BaseInactiveTwoFactorReportComponent {
+    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+        messagingService: MessagingService, userService: UserService,
+        private route: ActivatedRoute) {
+        super(cipherService, componentFactoryResolver, messagingService, userService);
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            await super.ngOnInit();
+        });
+    }
+
+    getAllCiphers(): Promise<CipherView[]> {
+        return this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    }
+}
--- a/src/app/organizations/tools/reused-passwords-report.component.ts
+++ b/src/app/organizations/tools/reused-passwords-report.component.ts
@@ -0,0 +1,38 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import {
+    ReusedPasswordsReportComponent as BaseReusedPasswordsReportComponent,
+} from '../../tools/reused-passwords-report.component';
+
+@Component({
+    selector: 'app-reused-passwords-report',
+    templateUrl: '../../tools/reused-passwords-report.component.html',
+})
+export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportComponent {
+    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+        messagingService: MessagingService, userService: UserService,
+        private route: ActivatedRoute) {
+        super(cipherService, componentFactoryResolver, messagingService, userService);
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            await super.ngOnInit();
+        });
+    }
+
+    getAllCiphers(): Promise<CipherView[]> {
+        return this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    }
+}
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -1,7 +1,7 @@
 <div class="container page-content">
    <div class="row">
        <div class="col-3">
-            <div class="card">
+            <div class="card mb-4">
                <div class="card-header">{{'tools' | i18n}}</div>
                <div class="list-group list-group-flush">
                    <a routerLink="import" class="list-group-item" routerLinkActive="active">
@@ -12,6 +12,34 @@
                    </a>
                </div>
            </div>
+            <div class="card">
+                <div class="card-header d-flex">
+                    {{'reports' | i18n}}
+                    <div class="ml-auto">
+                        <a href="#" appStopClick class="badge badge-primary" *ngIf="!accessReports"
+                            (click)="upgradeOrganization()">
+                            {{'upgrade' | i18n}}
+                        </a>
+                    </div>
+                </div>
+                <div class="list-group list-group-flush">
+                    <a routerLink="exposed-passwords-report" class="list-group-item" routerLinkActive="active">
+                        {{'exposedPasswordsReport' | i18n}}
+                    </a>
+                    <a routerLink="reused-passwords-report" class="list-group-item" routerLinkActive="active">
+                        {{'reusedPasswordsReport' | i18n}}
+                    </a>
+                    <a routerLink="weak-passwords-report" class="list-group-item" routerLinkActive="active">
+                        {{'weakPasswordsReport' | i18n}}
+                    </a>
+                    <a routerLink="unsecured-websites-report" class="list-group-item" routerLinkActive="active">
+                        {{'unsecuredWebsitesReport' | i18n}}
+                    </a>
+                    <a routerLink="inactive-two-factor-report" class="list-group-item" routerLinkActive="active">
+                        {{'inactive2faReport' | i18n}}
+                    </a>
+                </div>
+            </div>
        </div>
        <div class="col-9">
            <router-outlet></router-outlet>
--- a/src/app/organizations/tools/tools.component.ts
+++ b/src/app/organizations/tools/tools.component.ts
@@ -1,7 +1,32 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Organization } from 'jslib/models/domain/organization';
+
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';

@Component({
    selector: 'app-org-tools',
    templateUrl: 'tools.component.html',
 })
-export class ToolsComponent { }
+export class ToolsComponent {
+    organization: Organization;
+    accessReports = false;
+
+    constructor(private route: ActivatedRoute, private userService: UserService,
+        private messagingService: MessagingService) { }
+
+    ngOnInit() {
+        this.route.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            // TODO: Maybe we want to just make sure they are not on a free plan? Just compare useTotp for now
+            // since all paid plans include useTotp
+            this.accessReports = this.organization.useTotp;
+        });
+    }
+
+    upgradeOrganization() {
+        this.messagingService.send('upgradeOrganization', { organizationId: this.organization.id });
+    }
+}
--- a/src/app/organizations/tools/unsecured-websites-report.component.ts
+++ b/src/app/organizations/tools/unsecured-websites-report.component.ts
@@ -0,0 +1,38 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import {
+    UnsecuredWebsitesReportComponent as BaseUnsecuredWebsitesReportComponent,
+} from '../../tools/unsecured-websites-report.component';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Component({
+    selector: 'app-unsecured-websites-report',
+    templateUrl: '../../tools/unsecured-websites-report.component.html',
+})
+export class UnsecuredWebsitesReportComponent extends BaseUnsecuredWebsitesReportComponent {
+    constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
+        messagingService: MessagingService, userService: UserService,
+        private route: ActivatedRoute) {
+        super(cipherService, componentFactoryResolver, messagingService, userService);
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            await super.ngOnInit();
+        });
+    }
+
+    getAllCiphers(): Promise<CipherView[]> {
+        return this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    }
+}
--- a/src/app/organizations/tools/weak-passwords-report.component.ts
+++ b/src/app/organizations/tools/weak-passwords-report.component.ts
@@ -0,0 +1,39 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import {
+    WeakPasswordsReportComponent as BaseWeakPasswordsReportComponent,
+} from '../../tools/weak-passwords-report.component';
+
+@Component({
+    selector: 'app-weak-passwords-report',
+    templateUrl: '../../tools/weak-passwords-report.component.html',
+})
+export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportComponent {
+    constructor(cipherService: CipherService, passwordGenerationService: PasswordGenerationService,
+        componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
+        userService: UserService, private route: ActivatedRoute) {
+        super(cipherService, passwordGenerationService, componentFactoryResolver, messagingService, userService);
+    }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async (params) => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            await super.ngOnInit();
+        });
+    }
+
+    getAllCiphers(): Promise<CipherView[]> {
+        return this.cipherService.getAllFromApiForOrganization(this.organization.id);
+    }
+}
--- a/src/app/organizations/vault/add-edit.component.ts
+++ b/src/app/organizations/vault/add-edit.component.ts
@@ -4,6 +4,7 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { AuditService } from 'jslib/abstractions/audit.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
+import { EventService } from 'jslib/abstractions/event.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
@@ -34,10 +35,22 @@ export class AddEditComponent extends BaseAddEditComponent {
        auditService: AuditService, stateService: StateService,
        userService: UserService, collectionService: CollectionService,
        totpService: TotpService, passwordGenerationService: PasswordGenerationService,
-        private apiService: ApiService,
-        messagingService: MessagingService) {
+        private apiService: ApiService, messagingService: MessagingService,
+        eventService: EventService) {
        super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
-            userService, collectionService, totpService, passwordGenerationService, messagingService);
+            userService, collectionService, totpService, passwordGenerationService, messagingService,
+            eventService);
+    }
+
+    protected allowOwnershipAssignment() {
+        if (this.ownershipOptions != null && this.ownershipOptions.length > 1) {
+            if (this.organization != null) {
+                return this.cloneMode && this.organization.isAdmin;
+            } else {
+                return !this.editMode || this.cloneMode;
+            }
+        }
+        return false;
    }

    protected loadCollections() {
@@ -65,10 +78,10 @@ export class AddEditComponent extends BaseAddEditComponent {
    }

    protected async saveCipher(cipher: Cipher) {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.isAdmin || cipher.organizationId == null) {
            return super.saveCipher(cipher);
        }
-        if (this.editMode) {
+        if (this.editMode && !this.cloneMode) {
            const request = new CipherRequest(cipher);
            return this.apiService.putCipherAdmin(this.cipherId, request);
        } else {
@@ -81,6 +94,7 @@ export class AddEditComponent extends BaseAddEditComponent {
        if (!this.organization.isAdmin) {
            return super.deleteCipher();
        }
-        return this.apiService.deleteCipherAdmin(this.cipherId);
+        return this.cipher.isDeleted ? this.apiService.deleteCipherAdmin(this.cipherId)
+            : this.apiService.putDeleteCipherAdmin(this.cipherId);
    }
 }
--- a/src/app/organizations/vault/attachments.component.ts
+++ b/src/app/organizations/vault/attachments.component.ts
@@ -11,6 +11,8 @@ import { CipherData } from 'jslib/models/data/cipherData';
 import { Cipher } from 'jslib/models/domain/cipher';
 import { Organization } from 'jslib/models/domain/organization';

+import { AttachmentView } from 'jslib/models/view/attachmentView';
+
 import { AttachmentsComponent as BaseAttachmentsComponent } from '../../vault/attachments.component';

@Component({
@@ -26,6 +28,12 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
        super(cipherService, i18nService, cryptoService, userService, platformUtilsService);
    }

+    protected async reupload(attachment: AttachmentView) {
+        if (this.organization.isAdmin && this.showFixOldAttachments(attachment)) {
+            await super.reuploadCipherAttachment(attachment, true);
+        }
+    }
+
    protected async loadCipher() {
        if (!this.organization.isAdmin) {
            return await super.loadCipher();
@@ -44,4 +52,8 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
        }
        return this.apiService.deleteCipherAttachmentAdmin(this.cipherId, attachmentId);
    }
+
+    protected showFixOldAttachments(attachment: AttachmentView) {
+        return attachment.key == null && this.organization.isAdmin;
+    }
 }
--- a/src/app/organizations/vault/ciphers.component.ts
+++ b/src/app/organizations/vault/ciphers.component.ts
@@ -9,12 +9,11 @@ import { Angulartics2 } from 'angulartics2';

 import { ApiService } from 'jslib/abstractions/api.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
+import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';

-import { CipherData } from 'jslib/models/data/cipherData';
-import { Cipher } from 'jslib/models/domain/cipher';
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';

@@ -35,31 +34,18 @@ export class CiphersComponent extends BaseCiphersComponent {
    constructor(searchService: SearchService, analytics: Angulartics2,
        toasterService: ToasterService, i18nService: I18nService,
        platformUtilsService: PlatformUtilsService, cipherService: CipherService,
-        private apiService: ApiService) {
-        super(searchService, analytics, toasterService, i18nService, platformUtilsService, cipherService);
+        private apiService: ApiService, eventService: EventService) {
+        super(searchService, analytics, toasterService, i18nService, platformUtilsService,
+            cipherService, eventService);
    }

    async load(filter: (cipher: CipherView) => boolean = null) {
        if (!this.organization.isAdmin) {
-            await super.load(filter);
+            await super.load(filter, this.deleted);
            return;
        }
        this.accessEvents = this.organization.useEvents;
-        const ciphers = await this.apiService.getCiphersOrganization(this.organization.id);
-        if (ciphers != null && ciphers.data != null && ciphers.data.length) {
-            const decCiphers: CipherView[] = [];
-            const promises: any[] = [];
-            ciphers.data.forEach((r) => {
-                const data = new CipherData(r);
-                const cipher = new Cipher(data);
-                promises.push(cipher.decrypt().then((c) => decCiphers.push(c)));
-            });
-            await Promise.all(promises);
-            decCiphers.sort(this.cipherService.getLocaleSortingFunction());
-            this.allCiphers = decCiphers;
-        } else {
-            this.allCiphers = [];
-        }
+        this.allCiphers = await this.cipherService.getAllFromApiForOrganization(this.organization.id);
        this.applyFilter(filter);
        this.loaded = true;
    }
@@ -73,24 +59,27 @@ export class CiphersComponent extends BaseCiphersComponent {
        }
    }

-    search(timeout: number = null) {
+    async search(timeout: number = null) {
        if (!this.organization.isAdmin) {
            return super.search(timeout);
        }
        this.searchPending = false;
        let filteredCiphers = this.allCiphers;
-        if (this.filter != null) {
-            filteredCiphers = filteredCiphers.filter(this.filter);
-        }
-        if (this.searchText == null || this.searchText.trim().length < 2) {
-            this.ciphers = filteredCiphers;
-        } else {
-            this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText);
-        }
-    }

-    checkCipher(c: CipherView) {
-        // do nothing
+        if (this.searchText == null || this.searchText.trim().length < 2) {
+            this.ciphers = filteredCiphers.filter((c) => {
+                if (c.isDeleted !== this.deleted) {
+                    return false;
+                }
+                return this.filter == null || this.filter(c);
+            });
+        } else {
+            if (this.filter != null) {
+                filteredCiphers = filteredCiphers.filter(this.filter);
+            }
+            this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText, this.deleted);
+        }
+        await this.resetPaging();
    }

    events(c: CipherView) {
@@ -99,8 +88,12 @@ export class CiphersComponent extends BaseCiphersComponent {

    protected deleteCipher(id: string) {
        if (!this.organization.isAdmin) {
-            return super.deleteCipher(id);
+            return super.deleteCipher(id, this.deleted);
        }
-        return this.apiService.deleteCipherAdmin(id);
+        return this.deleted ? this.apiService.deleteCipherAdmin(id) : this.apiService.putDeleteCipherAdmin(id);
+    }
+
+    protected showFixOldAttachments(c: CipherView) {
+        return this.organization.isAdmin && c.hasOldAttachments;
    }
 }
--- a/src/app/organizations/vault/collections.component.ts
+++ b/src/app/organizations/vault/collections.component.ts
@@ -24,6 +24,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
        i18nService: I18nService, cipherService: CipherService,
        private apiService: ApiService) {
        super(collectionService, platformUtilsService, i18nService, cipherService);
+        this.allowSelectNone = true;
    }

    protected async loadCipher() {
--- a/src/app/organizations/vault/groupings.component.ts
+++ b/src/app/organizations/vault/groupings.component.ts
@@ -4,6 +4,8 @@ import { ApiService } from 'jslib/abstractions/api.service';
 import { CollectionService } from 'jslib/abstractions/collection.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';

 import { CollectionData } from 'jslib/models/data/collectionData';
 import { Collection } from 'jslib/models/domain/collection';
@@ -21,8 +23,9 @@ export class GroupingsComponent extends BaseGroupingsComponent {
    organization: Organization;

    constructor(collectionService: CollectionService, folderService: FolderService,
+        storageService: StorageService, userService: UserService,
        private apiService: ApiService, private i18nService: I18nService) {
-        super(collectionService, folderService);
+        super(collectionService, folderService, storageService, userService);
    }

    async loadCollections() {
@@ -48,4 +51,12 @@ export class GroupingsComponent extends BaseGroupingsComponent {
        this.collections.push(unassignedCollection);
        this.nestedCollections = await this.collectionService.getAllNested(this.collections);
    }
+
+    collapse(grouping: CollectionView) {
+        super.collapse(grouping, 'org_');
+    }
+
+    isCollapsed(grouping: CollectionView) {
+        return super.isCollapsed(grouping, 'org_');
+    }
 }
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -1,8 +1,10 @@
 <div class="container page-content">
    <div class="row">
        <div class="col-3">
-            <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
-                (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)">
+            <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">
@@ -10,15 +12,27 @@
                <h1>
                    {{'vault' | i18n}}
                    <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
-                        <i *ngIf="actionSpinner.loading" class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                        <ng-container *ngIf="actionSpinner.loading">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </ng-container>
                    </small>
                </h1>
-                <button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()">
-                    <i class="fa fa-plus fa-fw"></i>{{'addItem' | i18n}}
-                </button>
+                <div class="ml-auto d-flex">
+                    <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [modal]="modal" [deleted]="deleted"
+                        [organization]="organization">
+                    </app-vault-bulk-actions>
+                    <button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()"
+                        *ngIf="!deleted">
+                        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'addItem' | i18n}}
+                    </button>
+                </div>
            </div>
-            <app-org-vault-ciphers (onCipherClicked)="editCipher($event)" (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
-                (onCollectionsClicked)="editCipherCollections($event)" (onEventsClicked)="viewEvents($event)">
+            <app-org-vault-ciphers (onCipherClicked)="editCipher($event)"
+                (onAttachmentsClicked)="editCipherAttachments($event)" (onAddCipher)="addCipher()"
+                (onCollectionsClicked)="editCipherCollections($event)" (onEventsClicked)="viewEvents($event)"
+                (onCloneClicked)="cloneCipher($event)">
            </app-org-vault-ciphers>
        </div>
    </div>
--- a/Show More
+++ b/Show More