New Crowdin updates (#646)

* New translations messages.json (Spanish)

* New translations messages.json (Catalan)

* New translations messages.json (Danish)

* New translations messages.json (German)

* New translations messages.json (Hungarian)

* New translations messages.json (Italian)

* New translations messages.json (Dutch)

* New translations messages.json (Polish)

* New translations messages.json (Portuguese)

* New translations messages.json (Russian)

* New translations messages.json (Swedish)

* New translations messages.json (Ukrainian)

* New translations messages.json (Chinese Simplified)

* New translations messages.json (Portuguese, Brazilian)

* New translations messages.json (Estonian)

* New translations messages.json (English, United Kingdom)

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.
+-->

gulpfile.js

@@ -30,17 +30,8 @@ function version(cb) {
     cb();
 }
 
-// ref: https://github.com/t4t5/sweetalert/issues/890
-function fixSweetAlert(cb) {
-    fs.writeFileSync(paths.node_modules + 'sweetalert/typings/sweetalert.d.ts',
-        'import swal, { SweetAlert } from "./core";export default swal;export as namespace swal;');
-    cb();
-}
-
 exports.clean = clean;
 exports.webfonts = gulp.series(clean, webfonts);
 exports.prebuild = gulp.series(clean, webfonts);
 exports.version = version;
-exports.postdist = version;
-exports.fixSweetAlert = fixSweetAlert;
-exports.postinstall = fixSweetAlert;
+exports.postdist = version;

package.json

@@ -1,12 +1,16 @@
 {
   "name": "bitwarden-web",
-  "version": "2.12.0",
+  "version": "2.16.0",
+  "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",
-    "postinstall": "npm run sub:init && gulp postinstall",
-    "simlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
+    "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",
@@ -24,10 +28,11 @@
     "lint:fix": "tslint src/**/*.ts --fix"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^7.2.11",
-    "@ngtools/webpack": "^7.2.2",
-    "@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",
@@ -39,60 +44,59 @@
     "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": "^4.0.0",
     "gulp-google-webfonts": "^2.0.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.11.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.0",
     "terser-webpack-plugin": "^1.2.3",
-    "ts-loader": "^5.3.3",
-    "tslint": "^5.12.1",
+    "ts-loader": "^7.0.5",
+    "tslint": "^6.1.3",
     "tslint-loader": "^3.5.4",
-    "typescript": "3.2.4",
+    "typescript": "3.8.3",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "@angular/animations": "7.2.1",
-    "@angular/cdk": "7.2.1",
-    "@angular/common": "7.2.1",
-    "@angular/compiler": "7.2.1",
-    "@angular/core": "7.2.1",
-    "@angular/forms": "7.2.1",
-    "@angular/http": "7.2.1",
-    "@angular/platform-browser": "7.2.1",
-    "@angular/platform-browser-dynamic": "7.2.1",
-    "@angular/router": "7.2.1",
-    "@angular/upgrade": "7.2.1",
-    "@aspnet/signalr": "1.1.4",
-    "@aspnet/signalr-protocol-msgpack": "1.1.0",
-    "angular2-toaster": "6.1.0",
-    "angulartics2": "6.3.0",
+    "@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.6.2",
-    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
+    "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": "7.0.1",
     "node-forge": "0.7.6",
     "papaparse": "4.6.0",
     "popper.js": "1.14.4",
     "qrious": "4.0.2",
-    "rxjs": "6.3.3",
-    "sweetalert": "2.1.2",
+    "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.28",
+    "zone.js": "0.10.3",
     "zxcvbn": "4.4.2"
   }
 }

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>

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(['/']);
             }
 

src/app/accounts/hint.component.html

@@ -14,7 +14,7 @@
                     <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}}

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">
@@ -13,9 +13,9 @@
                             <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}}"
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword()">
-                                <i class="fa fa-lg"
+                                <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
@@ -25,9 +25,11 @@
                     </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}}

src/app/accounts/lock.component.ts

@@ -1,15 +1,16 @@
 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 { LockService } from 'jslib/abstractions/lock.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';
 
@@ -23,11 +24,11 @@ export class LockComponent extends BaseLockComponent {
     constructor(router: Router, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
         userService: UserService, cryptoService: CryptoService,
-        storageService: StorageService, lockService: LockService,
+        storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
         environmentService: EnvironmentService, private routerService: RouterService,
-        stateService: StateService) {
+        stateService: StateService, apiService: ApiService) {
         super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
-            storageService, lockService, environmentService, stateService);
+            storageService, vaultTimeoutService, environmentService, stateService, apiService);
     }
 
     async ngOnInit() {

src/app/accounts/login.component.html

@@ -16,9 +16,9 @@
                             <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}}"
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword()">
-                                <i class="fa fa-lg"
+                                <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
@@ -35,13 +35,18 @@
                     <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}}
+                            <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>

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';
@@ -20,8 +23,13 @@ export class LoginComponent extends BaseLoginComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, private route: ActivatedRoute,
         storageService: StorageService, stateService: StateService,
-        platformUtilsService: PlatformUtilsService) {
-        super(authService, router, platformUtilsService, i18nService, storageService, stateService);
+        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
+        passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService) {
+        super(authService, router,
+            platformUtilsService, i18nService,
+            stateService, environmentService,
+            passwordGenerationService, cryptoFunctionService,
+            storageService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 

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

@@ -14,7 +14,7 @@
                     <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}}

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

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

src/app/accounts/register.component.html

@@ -1,84 +1,149 @@
-<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">
-                            <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" title="{{'toggleVisibility' | i18n}}"
-                                    (click)="togglePassword(false)">
-                                    <i class="fa fa-lg"
-                                        [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" 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>
+                                <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>
+                                <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>

src/app/accounts/register.component.ts

@@ -10,10 +10,17 @@ 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',
@@ -21,19 +28,44 @@ import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/compon
 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,
-        passwordGenerationService: PasswordGenerationService) {
+        passwordGenerationService: PasswordGenerationService, private policyService: PolicyService) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
             passwordGenerationService);
         this.showTerms = !platformUtilsService.isSelfHost();
     }
 
-    ngOnInit() {
+    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;
             }
@@ -41,12 +73,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();
     }
 }

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>

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

@@ -0,0 +1,31 @@
+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 { 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) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService, router, apiService, syncService);
+    }
+}

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>

src/app/accounts/sso.component.ts

@@ -0,0 +1,58 @@
+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);
+        super.submit();
+    }
+}

src/app/accounts/two-factor-options.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="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>

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

@@ -35,7 +35,9 @@
                     </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>
@@ -49,7 +51,7 @@
                         </div>
                     </ng-container>
                     <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}"
-                        *ngIf="form.loading && selectedProviderType === providerType.U2f"></i>
+                        *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">
@@ -65,9 +67,9 @@
                             *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}}

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

@@ -28,7 +28,7 @@ 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,

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>

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}}

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,6 +26,7 @@ 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';
@@ -98,6 +101,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],
@@ -264,6 +276,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' } },
                 ],
             },
             {

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>

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/src/sweetalert2.js';
 
 import {
     BodyOutputType,
@@ -36,24 +35,23 @@ 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({
@@ -80,11 +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 routerService: RouterService,
-        private stateService: StateService, private eventService: EventService) { }
+        private stateService: StateService, private eventService: EventService,
+        private policyService: PolicyService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -111,7 +110,7 @@ export class AppComponent implements OnDestroy, OnInit {
                         this.logOut(!!message.expired);
                         break;
                     case 'lockVault':
-                        await this.lockService.lock();
+                        await this.vaultTimeoutService.lock();
                         break;
                     case 'locked':
                         this.notificationsService.updateConnection(false);
@@ -149,6 +148,9 @@ export class AppComponent implements OnDestroy, OnInit {
                             properties: { label: message.label },
                         });
                         break;
+                    case 'setFullWidth':
+                        this.setFullWidth();
+                        break;
                     default:
                         break;
                 }
@@ -163,10 +165,12 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
 
                 if (document.querySelector('.swal-modal') != null) {
-                    swal.close(undefined);
+                    Swal.close(undefined);
                 }
             }
         });
+
+        this.setFullWidth();
     }
 
     ngOnDestroy() {
@@ -187,6 +191,7 @@ 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(),
         ]);
@@ -198,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(['/']);
         });
     }
@@ -262,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');
+        }
+    }
 }

src/app/app.module.ts

@@ -19,7 +19,6 @@ 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';
@@ -35,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';
@@ -51,6 +52,8 @@ 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';
@@ -106,6 +109,7 @@ 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';
@@ -114,6 +118,7 @@ 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';
@@ -142,8 +147,10 @@ import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.comp
 
 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';
@@ -152,6 +159,7 @@ 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';
@@ -176,6 +184,7 @@ 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';
@@ -200,6 +209,7 @@ 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');
@@ -227,7 +237,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         FormsModule,
         AppRoutingModule,
         ServicesModule,
-        Angulartics2Module.forRoot([Angulartics2GoogleAnalytics], {
+        Angulartics2Module.forRoot({
             pageTracking: {
                 clearQueryParams: true,
             },
@@ -240,6 +250,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         A11yTitleDirective,
         AcceptOrganizationComponent,
         AccountComponent,
+        SetPasswordComponent,
         AddCreditComponent,
         AddEditComponent,
         AdjustPaymentComponent,
@@ -253,8 +264,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
         BlurClickDirective,
         BoxRowDirective,
         BreachReportComponent,
+        BulkActionsComponent,
         BulkDeleteComponent,
         BulkMoveComponent,
+        BulkRestoreComponent,
         BulkShareComponent,
         CalloutComponent,
         ChangeEmailComponent,
@@ -283,6 +296,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ImportComponent,
         InactiveTwoFactorReportComponent,
         InputVerbatimDirective,
+        LinkSsoComponent,
         LockComponent,
         LoginComponent,
         ModalComponent,
@@ -311,6 +325,8 @@ registerLocaleData(localeZhTw, 'zh-TW');
         OrgManageCollectionsComponent,
         OrgManageComponent,
         OrgPeopleComponent,
+        OrgPolicyEditComponent,
+        OrgPoliciesComponent,
         OrgReusedPasswordsReportComponent,
         OrgRotateApiKeyComponent,
         OrgSettingComponent,
@@ -340,8 +356,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SelectCopyDirective,
         SettingsComponent,
         ShareComponent,
+        SsoComponent,
         StopClickDirective,
         StopPropDirective,
+        TaxInfoComponent,
         ToolsComponent,
         TrueFalseValueDirective,
         TwoFactorAuthenticatorComponent,
@@ -369,8 +387,10 @@ registerLocaleData(localeZhTw, 'zh-TW');
     entryComponents: [
         AddEditComponent,
         AttachmentsComponent,
+        BulkActionsComponent,
         BulkDeleteComponent,
         BulkMoveComponent,
+        BulkRestoreComponent,
         BulkShareComponent,
         CollectionsComponent,
         DeauthorizeSessionsComponent,
@@ -386,6 +406,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         OrgEntityEventsComponent,
         OrgEntityUsersComponent,
         OrgGroupAddEditComponent,
+        OrgPolicyEditComponent,
         OrgRotateApiKeyComponent,
         OrgUserAddEditComponent,
         OrgUserConfirmComponent,

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>

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';
-            }
-        }
-    }
-}

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">

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; {{year}}, 8bit Solutions LLC
+    &copy; {{year}}, Bitwarden Inc.
     <br> {{'versionNumber' | i18n : version}}
 </div>

src/app/layouts/navbar.component.html

@@ -1,7 +1,7 @@
 <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">
@@ -20,7 +20,7 @@
             <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>
+                    <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>
@@ -32,24 +32,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>

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>

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

@@ -4,10 +4,14 @@ import {
     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';
@@ -20,19 +24,28 @@ const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     organization: Organization;
-
+    enterpriseTokenPromise: Promise<any>;
     private organizationId: string;
+    private enterpriseUrl: string;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private ngZone: NgZone,
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService) { }
 
     ngOnInit() {
+        this.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) {
@@ -51,4 +64,20 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     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;
+    }
 }

src/app/organizations/manage/collection-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="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">
@@ -40,6 +41,7 @@
                             <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>
@@ -51,8 +53,15 @@
                                 </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.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"
@@ -65,18 +74,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>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'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-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}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>

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

@@ -73,6 +73,7 @@ export class CollectionAddEditComponent implements OnInit {
                         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;
                         }
                     });
                 }
@@ -97,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;
         }
     }
 
@@ -113,7 +115,7 @@ export class CollectionAddEditComponent implements OnInit {
         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) {

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

@@ -7,15 +7,20 @@
                 [(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>
@@ -24,16 +29,16 @@
                 <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>
+                            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>

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,21 +35,26 @@ 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) => {
@@ -74,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();
@@ -147,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();
         }
     }
 }

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

@@ -1,17 +1,18 @@
-<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">
@@ -27,7 +28,8 @@
                     <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>
@@ -50,10 +52,12 @@
                         <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>
@@ -61,7 +65,7 @@
                 </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>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'loadMore' | i18n}}</span>
                 </button>
             </div>

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

@@ -1,17 +1,18 @@
-<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">
@@ -46,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>
@@ -72,7 +75,11 @@
                                     <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>
@@ -80,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">
@@ -91,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>

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;

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

@@ -12,12 +12,15 @@
         </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>
+            <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>
@@ -46,7 +50,7 @@
     </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>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'loadMore' | i18n}}</span>
     </button>
 </ng-container>

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">
@@ -23,6 +24,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">
@@ -58,6 +63,7 @@
                             <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>
@@ -70,6 +76,10 @@
                                 <td (click)="check(c)">
                                     {{c.name}}
                                 </td>
+                                <td class="text-center">
+                                    <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">
@@ -81,17 +91,17 @@
             </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>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'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"
+                        <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>

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 {

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

@@ -7,15 +7,19 @@
                 [(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>
@@ -24,16 +28,16 @@
                 <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>
+                            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>

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) => {
@@ -70,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();
@@ -142,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();
         }
     }
 }

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

@@ -15,6 +15,10 @@
                         *ngIf="organization.isAdmin && accessGroups">
                         {{'groups' | i18n}}
                     </a>
+                    <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}}

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;
         });

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

@@ -5,6 +5,7 @@
             <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}"
@@ -25,19 +26,24 @@
                 [(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">
@@ -53,7 +59,10 @@
                         <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                     </td>
                     <td>
-                        <i class="fa fa-lock" *ngIf="u.twoFactorEnabled" title="{{'userUsingTwoStep' | i18n}}"></i>
+                        <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>
@@ -64,31 +73,32 @@
                     <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>
+                                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>
+                                    <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>
+                                    <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>
+                                    <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>

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

@@ -19,6 +19,7 @@ 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';
 
@@ -42,14 +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('confirmTemplate', { read: ViewContainerRef }) confirmModalRef: 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[]>();
@@ -59,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[];
 
@@ -67,7 +73,7 @@ export class PeopleComponent implements OnInit {
         private platformUtilsService: PlatformUtilsService, private analytics: Angulartics2,
         private toasterService: ToasterService, private cryptoService: CryptoService,
         private userService: UserService, private router: Router,
-        private storageService: StorageService) { }
+        private storageService: StorageService, private searchService: SearchService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
@@ -119,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() {
@@ -290,6 +317,23 @@ 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);
@@ -309,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);

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

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

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

@@ -0,0 +1,114 @@
+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 { 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[];
+
+    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) {
+        this.policies = [
+            {
+                name: i18nService.t('twoStepLogin'),
+                description: i18nService.t('twoStepLoginPolicyDesc'),
+                type: PolicyType.TwoFactorAuthentication,
+                enabled: false,
+            },
+            {
+                name: i18nService.t('masterPass'),
+                description: i18nService.t('masterPassPolicyDesc'),
+                type: PolicyType.MasterPassword,
+                enabled: false,
+            },
+            {
+                name: i18nService.t('passwordGenerator'),
+                description: i18nService.t('passwordGeneratorPolicyDesc'),
+                type: PolicyType.PasswordGenerator,
+                enabled: false,
+            },
+        ];
+    }
+
+    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;
+            }
+            await this.load();
+        });
+    }
+
+    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.onSavedPolicy.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+}

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

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

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

@@ -0,0 +1,171 @@
+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;
+    @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() {
+        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 { }
+    }
+}

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

@@ -1,17 +1,18 @@
-<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">
@@ -22,7 +23,13 @@
                         <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">
@@ -58,6 +65,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">
@@ -93,6 +104,7 @@
                             <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>
@@ -105,6 +117,10 @@
                                 <td (click)="check(c)">
                                     {{c.name}}
                                 </td>
+                                <td class="text-center">
+                                    <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">
@@ -116,18 +132,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>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'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-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}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>

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 {

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

@@ -1,12 +1,12 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<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">
+                <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" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -27,7 +27,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>{{'confirm' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"

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,7 +34,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"

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

@@ -2,24 +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">
+                    [(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">
+                    [(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">
@@ -27,7 +34,7 @@
         </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>
@@ -48,9 +55,17 @@
     <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>

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

@@ -11,6 +11,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 { SyncService } from 'jslib/abstractions/sync.service';
 
 import { OrganizationUpdateRequest } from 'jslib/models/request/organizationUpdateRequest';
@@ -18,6 +19,7 @@ import { OrganizationResponse } from 'jslib/models/response/organizationResponse
 
 import { ModalComponent } from '../../modal.component';
 import { PurgeVaultComponent } from '../../settings/purge-vault.component';
+import { TaxInfoComponent } from '../../settings/tax-info.component';
 import { ApiKeyComponent } from './api-key.component';
 import { DeleteOrganizationComponent } from './delete-organization.component';
 import { RotateApiKeyComponent } from './rotate-api-key.component';
@@ -27,15 +29,18 @@ import { RotateApiKeyComponent } from './rotate-api-key.component';
     templateUrl: 'account.component.html',
 })
 export class AccountComponent {
-    @ViewChild('deleteOrganizationTemplate', { read: ViewContainerRef }) deleteModalRef: ViewContainerRef;
-    @ViewChild('purgeOrganizationTemplate', { read: ViewContainerRef }) purgeModalRef: ViewContainerRef;
-    @ViewChild('apiKeyTemplate', { read: ViewContainerRef }) apiKeyModalRef: ViewContainerRef;
-    @ViewChild('rotateApiKeyTemplate', { read: ViewContainerRef }) rotateApiKeyModalRef: 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;
@@ -43,9 +48,11 @@ 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 {
@@ -62,6 +69,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);
             });
@@ -71,6 +79,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();

src/app/organizations/settings/adjust-seats.component.html

@@ -1,7 +1,7 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <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">
@@ -15,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()">

src/app/organizations/settings/adjust-seats.component.ts

@@ -33,7 +33,7 @@ export class AdjustSeatsComponent {
     @Output() onAdjusted = new EventEmitter<number>();
     @Output() onCanceled = new EventEmitter();
 
-    @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+    @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
 
     seatAdjustment = 0;
     formPromise: Promise<any>;

src/app/organizations/settings/api-key.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="apiKeyTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'apiKey' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="apiKeyTitle">{{'apiKey' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -38,7 +38,7 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                     *ngIf="!clientSecret">
-                    <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>{{'viewApiKey' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

src/app/organizations/settings/change-plan.component.html

@@ -1,7 +1,7 @@
 <div class="card card-org-plans">
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <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="families" [organizationId]="organizationId"

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>
@@ -16,7 +16,7 @@
             </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>

src/app/organizations/settings/download-license.component.html

@@ -1,15 +1,15 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <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" title="{{'learnMore' | i18n}}"
+                    <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"></i>
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                     </a>
                 </div>
                 <input id="installationId" class="form-control" type="text" name="InstallationId"
@@ -17,7 +17,7 @@
             </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>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">

src/app/organizations/settings/organization-billing.component.ts

@@ -9,6 +9,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 { UserBillingComponent } from '../../settings/user-billing.component';
 
@@ -19,8 +20,8 @@ import { UserBillingComponent } from '../../settings/user-billing.component';
 export class OrganizationBillingComponent extends UserBillingComponent implements OnInit {
     constructor(apiService: ApiService, i18nService: I18nService,
         analytics: Angulartics2, toasterService: ToasterService,
-        private route: ActivatedRoute) {
-        super(apiService, i18nService, analytics, toasterService);
+        private route: ActivatedRoute, platformUtilsService: PlatformUtilsService) {
+        super(apiService, i18nService, analytics, toasterService, platformUtilsService);
     }
 
     async ngOnInit() {

src/app/organizations/settings/organization-subscription.component.html

@@ -1,12 +1,16 @@
 <div class="page-header">
     <h1>
         {{'subscription' | i18n}}
-        <small>
-            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+        <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>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+<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>
@@ -14,18 +18,18 @@
         <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>
+            <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}}</dd>
+        <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"></i>
+                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                 {{'licenseIsExpired' | i18n}}
             </span>
         </dd>
@@ -35,7 +39,7 @@
         <div class="col-4">
             <dl>
                 <dt>{{'billingPlan' | i18n}}</dt>
-                <dd>{{sub.plan}}</dd>
+                <dd>{{sub.plan.name}}</dd>
                 <ng-container *ngIf="subscription">
                     <dt>{{'status' | i18n}}</dt>
                     <dd>
@@ -77,7 +81,7 @@
         </div>
         <div class="card mt-3" *ngIf="showUpdateLicense">
             <div class="card-body">
-                <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+                <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)"
@@ -97,7 +101,7 @@
             <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>
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>

src/app/organizations/settings/organization-subscription.component.ts

@@ -13,7 +13,6 @@ 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 { TokenService } from 'jslib/abstractions/token.service';
 
 import { PlanType } from 'jslib/enums/planType';
 
@@ -38,10 +37,10 @@ export class OrganizationSubscriptionComponent implements OnInit {
     cancelPromise: Promise<any>;
     reinstatePromise: Promise<any>;
 
-    constructor(private tokenService: TokenService, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private messagingService: MessagingService, private route: ActivatedRoute) {
+    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();
     }
 
@@ -192,34 +191,20 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
 
     get billingInterval() {
-        const monthly = this.sub.planType === PlanType.EnterpriseMonthly ||
-            this.sub.planType === PlanType.TeamsMonthly;
+        const monthly = !this.sub.plan.isAnnual;
         return monthly ? 'month' : 'year';
     }
 
     get storageGbPrice() {
-        return this.billingInterval === 'month' ? 0.5 : 4;
+        return this.sub.plan.additionalStoragePricePerGb;
     }
 
     get seatPrice() {
-        switch (this.sub.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;
-        }
+        return this.sub.plan.seatPrice;
     }
 
     get canAdjustSeats() {
-        return this.sub.planType === PlanType.EnterpriseMonthly ||
-            this.sub.planType === PlanType.EnterpriseAnnually ||
-            this.sub.planType === PlanType.TeamsMonthly || this.sub.planType === PlanType.TeamsAnnually;
+        return this.sub.plan.hasAdditionalSeatsOption;
     }
 
     get canDownloadLicense() {

src/app/organizations/settings/rotate-api-key.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="rotateKeyTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'rotateApiKey' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="rotateKeyTitle">{{'rotateApiKey' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -38,7 +38,7 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                     *ngIf="!clientSecret">
-                    <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>{{'rotateApiKey' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

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() {

src/app/organizations/vault/add-edit.component.ts

@@ -42,6 +42,17 @@ export class AddEditComponent extends BaseAddEditComponent {
             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() {
         if (!this.organization.isAdmin) {
             return super.loadCollections();
@@ -67,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 {
@@ -83,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);
     }
 }

src/app/organizations/vault/ciphers.component.ts

@@ -41,7 +41,7 @@ export class CiphersComponent extends BaseCiphersComponent {
 
     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;
@@ -65,30 +65,32 @@ export class CiphersComponent extends BaseCiphersComponent {
         }
         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;
+            this.ciphers = filteredCiphers.filter((c) => {
+                if (c.isDeleted !== this.deleted) {
+                    return false;
+                }
+                return this.filter == null || this.filter(c);
+            });
         } else {
-            this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText);
+            if (this.filter != null) {
+                filteredCiphers = filteredCiphers.filter(this.filter);
+            }
+            this.ciphers = this.searchService.searchCiphersBasic(filteredCiphers, this.searchText, this.deleted);
         }
         await this.resetPaging();
     }
 
-    checkCipher(c: CipherView) {
-        // do nothing
-    }
-
     events(c: CipherView) {
         this.onEventsClicked.emit(c);
     }
 
     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) {

src/app/organizations/vault/vault.component.html

@@ -1,9 +1,10 @@
 <div class="container page-content">
     <div class="row">
         <div class="col-3">
-            <app-org-vault-groupings [showFolders]="false" [showFavorites]="false"
+            <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
                 (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
-                (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)">
+                (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)"
+                (onTrashClicked)="filterDeleted()">
             </app-org-vault-groupings>
         </div>
         <div class="col-9">
@@ -11,17 +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)">
+                (onCollectionsClicked)="editCipherCollections($event)" (onEventsClicked)="viewEvents($event)"
+                (onCloneClicked)="cloneCipher($event)">
             </app-org-vault-ciphers>
         </div>
     </div>

src/app/organizations/vault/vault.component.ts

@@ -41,18 +41,19 @@ const BroadcasterSubscriptionId = 'OrgVaultComponent';
     templateUrl: 'vault.component.html',
 })
 export class VaultComponent implements OnInit, OnDestroy {
-    @ViewChild(GroupingsComponent) groupingsComponent: GroupingsComponent;
-    @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent;
-    @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
-    @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditModalRef: ViewContainerRef;
-    @ViewChild('collections', { read: ViewContainerRef }) collectionsModalRef: ViewContainerRef;
-    @ViewChild('eventsTemplate', { read: ViewContainerRef }) eventsModalRef: ViewContainerRef;
+    @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
+    @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
+    @ViewChild('attachments', { read: ViewContainerRef, static: true }) attachmentsModalRef: ViewContainerRef;
+    @ViewChild('cipherAddEdit', { read: ViewContainerRef, static: true }) cipherAddEditModalRef: ViewContainerRef;
+    @ViewChild('collections', { read: ViewContainerRef, static: true }) collectionsModalRef: ViewContainerRef;
+    @ViewChild('eventsTemplate', { read: ViewContainerRef, static: true }) eventsModalRef: ViewContainerRef;
 
     organization: Organization;
-    collectionId: string;
-    type: CipherType;
+    collectionId: string = null;
+    type: CipherType = null;
+    deleted: boolean = false;
 
-    private modal: ModalComponent = null;
+    modal: ModalComponent = null;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
@@ -61,7 +62,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
 
     ngOnInit() {
-        this.route.parent.params.subscribe(async (params) => {
+        const queryParams = this.route.parent.params.subscribe(async (params) => {
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;
@@ -92,7 +93,10 @@ export class VaultComponent implements OnInit, OnDestroy {
                     this.groupingsComponent.selectedAll = true;
                     await this.ciphersComponent.reload();
                 } else {
-                    if (qParams.type) {
+                    if (qParams.deleted) {
+                        this.groupingsComponent.selectedTrash = true;
+                        await this.filterDeleted(true);
+                    } else if (qParams.type) {
                         const t = parseInt(qParams.type, null);
                         this.groupingsComponent.selectedType = t;
                         await this.filterCipherType(t, true);
@@ -116,6 +120,10 @@ export class VaultComponent implements OnInit, OnDestroy {
                     queryParamsSub.unsubscribe();
                 }
             });
+
+            if (queryParams != null) {
+                queryParams.unsubscribe();
+            }
         });
     }
 
@@ -125,6 +133,7 @@ export class VaultComponent implements OnInit, OnDestroy {
 
     async clearGroupingFilters() {
         this.ciphersComponent.showAddNew = true;
+        this.ciphersComponent.deleted = false;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchVault');
         await this.ciphersComponent.applyFilter();
         this.clearFilters();
@@ -133,6 +142,7 @@ export class VaultComponent implements OnInit, OnDestroy {
 
     async filterCipherType(type: CipherType, load = false) {
         this.ciphersComponent.showAddNew = true;
+        this.ciphersComponent.deleted = false;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchType');
         const filter = (c: CipherView) => c.type === type;
         if (load) {
@@ -147,6 +157,7 @@ export class VaultComponent implements OnInit, OnDestroy {
 
     async filterCollection(collectionId: string, load = false) {
         this.ciphersComponent.showAddNew = true;
+        this.ciphersComponent.deleted = false;
         this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchCollection');
         const filter = (c: CipherView) => {
             if (collectionId === 'unassigned') {
@@ -165,6 +176,20 @@ export class VaultComponent implements OnInit, OnDestroy {
         this.go();
     }
 
+    async filterDeleted(load: boolean = false) {
+        this.ciphersComponent.showAddNew = false;
+        this.ciphersComponent.deleted = true;
+        this.groupingsComponent.searchPlaceholder = this.i18nService.t('searchTrash');
+        if (load) {
+            await this.ciphersComponent.reload(null, true);
+        } else {
+            await this.ciphersComponent.applyFilter(null);
+        }
+        this.clearFilters();
+        this.deleted = true;
+        this.go();
+    }
+
     filterSearchText(searchText: string) {
         this.ciphersComponent.searchText = searchText;
         this.ciphersComponent.search(200);
@@ -255,6 +280,10 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.modal.close();
             await this.ciphersComponent.refresh();
         });
+        childComponent.onRestoredCipher.subscribe(async (c: CipherView) => {
+            this.modal.close();
+            await this.ciphersComponent.refresh();
+        });
 
         this.modal.onClosed.subscribe(() => {
             this.modal = null;
@@ -263,6 +292,18 @@ export class VaultComponent implements OnInit, OnDestroy {
         return childComponent;
     }
 
+    cloneCipher(cipher: CipherView) {
+        const component = this.editCipher(cipher);
+        component.cloneMode = true;
+        component.organizationId = this.organization.id;
+        if (this.organization.isAdmin) {
+            component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
+        }
+        // Regardless of Admin state, the collection Ids need to passed manually as they are not assigned value
+        // in the add-edit componenet
+        component.collectionIds = cipher.collectionIds;
+    }
+
     async viewEvents(cipher: CipherView) {
         if (this.modal != null) {
             this.modal.close();
@@ -287,6 +328,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     private clearFilters() {
         this.collectionId = null;
         this.type = null;
+        this.deleted = false;
     }
 
     private go(queryParams: any = null) {
@@ -294,6 +336,7 @@ export class VaultComponent implements OnInit, OnDestroy {
             queryParams = {
                 type: this.type,
                 collectionId: this.collectionId,
+                deleted: this.deleted ? true : null,
             };
         }
 

src/app/services/event.service.ts

@@ -73,8 +73,14 @@ export class EventService {
                 msg = this.i18nService.t('editedItemId', this.formatCipherId(ev, options));
                 break;
             case EventType.Cipher_Deleted:
+                msg = this.i18nService.t('permanentlyDeletedItemId', this.formatCipherId(ev, options));
+                break;
+            case EventType.Cipher_SoftDeleted:
                 msg = this.i18nService.t('deletedItemId', this.formatCipherId(ev, options));
                 break;
+            case EventType.Cipher_Restored:
+                msg = this.i18nService.t('restoredItemId', this.formatCipherId(ev, options));
+                break;
             case EventType.Cipher_AttachmentCreated:
                 msg = this.i18nService.t('createdAttachmentForItem', this.formatCipherId(ev, options));
                 break;

src/app/services/services.module.ts

@@ -38,9 +38,9 @@ import { EventService as EventLoggingService } from 'jslib/services/event.servic
 import { ExportService } from 'jslib/services/export.service';
 import { FolderService } from 'jslib/services/folder.service';
 import { ImportService } from 'jslib/services/import.service';
-import { LockService } from 'jslib/services/lock.service';
 import { NotificationsService } from 'jslib/services/notifications.service';
 import { PasswordGenerationService } from 'jslib/services/passwordGeneration.service';
+import { PolicyService } from 'jslib/services/policy.service';
 import { SearchService } from 'jslib/services/search.service';
 import { SettingsService } from 'jslib/services/settings.service';
 import { StateService } from 'jslib/services/state.service';
@@ -48,6 +48,7 @@ import { SyncService } from 'jslib/services/sync.service';
 import { TokenService } from 'jslib/services/token.service';
 import { TotpService } from 'jslib/services/totp.service';
 import { UserService } from 'jslib/services/user.service';
+import { VaultTimeoutService } from 'jslib/services/vaultTimeout.service';
 import { WebCryptoFunctionService } from 'jslib/services/webCryptoFunction.service';
 
 import { ApiService as ApiServiceAbstraction } from 'jslib/abstractions/api.service';
@@ -64,7 +65,6 @@ import { ExportService as ExportServiceAbstraction } from 'jslib/abstractions/ex
 import { FolderService as FolderServiceAbstraction } from 'jslib/abstractions/folder.service';
 import { I18nService as I18nServiceAbstraction } from 'jslib/abstractions/i18n.service';
 import { ImportService as ImportServiceAbstraction } from 'jslib/abstractions/import.service';
-import { LockService as LockServiceAbstraction } from 'jslib/abstractions/lock.service';
 import { LogService as LogServiceAbstraction } from 'jslib/abstractions/log.service';
 import { MessagingService as MessagingServiceAbstraction } from 'jslib/abstractions/messaging.service';
 import { NotificationsService as NotificationsServiceAbstraction } from 'jslib/abstractions/notifications.service';
@@ -72,6 +72,7 @@ import {
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
 } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from 'jslib/abstractions/platformUtils.service';
+import { PolicyService as PolicyServiceAbstraction } from 'jslib/abstractions/policy.service';
 import { SearchService as SearchServiceAbstraction } from 'jslib/abstractions/search.service';
 import { SettingsService as SettingsServiceAbstraction } from 'jslib/abstractions/settings.service';
 import { StateService as StateServiceAbstraction } from 'jslib/abstractions/state.service';
@@ -80,6 +81,7 @@ import { SyncService as SyncServiceAbstraction } from 'jslib/abstractions/sync.s
 import { TokenService as TokenServiceAbstraction } from 'jslib/abstractions/token.service';
 import { TotpService as TotpServiceAbstraction } from 'jslib/abstractions/totp.service';
 import { UserService as UserServiceAbstraction } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib/abstractions/vaultTimeout.service';
 
 const i18nService = new I18nService(window.navigator.language, 'locales');
 const stateService = new StateService();
@@ -105,20 +107,22 @@ const folderService = new FolderService(cryptoService, userService, apiService,
     i18nService, cipherService);
 const collectionService = new CollectionService(cryptoService, userService, storageService, i18nService);
 searchService = new SearchService(cipherService, platformUtilsService);
-const lockService = new LockService(cipherService, folderService, collectionService,
-    cryptoService, platformUtilsService, storageService, messagingService, searchService, userService, null);
+const policyService = new PolicyService(userService, storageService);
+const vaultTimeoutService = new VaultTimeoutService(cipherService, folderService, collectionService,
+    cryptoService, platformUtilsService, storageService, messagingService, searchService, userService, tokenService,
+    null, async () => messagingService.send('logout', { expired: false }));
 const syncService = new SyncService(userService, apiService, settingsService,
-    folderService, cipherService, cryptoService, collectionService, storageService, messagingService,
+    folderService, cipherService, cryptoService, collectionService, storageService, messagingService, policyService,
     async (expired: boolean) => messagingService.send('logout', { expired: expired }));
-const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService);
+const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService, policyService);
 const totpService = new TotpService(storageService, cryptoFunctionService);
 const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService,
-    userService, tokenService, appIdService, i18nService, platformUtilsService, messagingService);
+    userService, tokenService, appIdService, i18nService, platformUtilsService, messagingService, vaultTimeoutService);
 const exportService = new ExportService(folderService, cipherService, apiService);
 const importService = new ImportService(cipherService, folderService, apiService, i18nService, collectionService);
 const notificationsService = new NotificationsService(userService, syncService, appIdService,
-    apiService, lockService, async () => messagingService.send('logout', { expired: true }));
+    apiService, vaultTimeoutService, async () => messagingService.send('logout', { expired: true }));
 const environmentService = new EnvironmentService(apiService, storageService, notificationsService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
@@ -136,6 +140,8 @@ export function initFactory(): Function {
         } else {
             environmentService.notificationsUrl = isDev ? 'http://localhost:61840' :
                 'https://notifications.bitwarden.com'; // window.location.origin + '/notifications';
+            environmentService.enterpriseUrl = isDev ? 'http://localhost:52313' :
+                'https://portal.bitwarden.com'; // window.location.origin + '/portal';
         }
         apiService.setUrls({
             base: isDev ? null : window.location.origin,
@@ -153,7 +159,7 @@ export function initFactory(): Function {
         });
         setTimeout(() => notificationsService.init(environmentService), 3000);
 
-        lockService.init(true);
+        vaultTimeoutService.init(true);
         const locale = await storageService.get<string>(ConstantsService.localeKey);
         await i18nService.init(locale);
         eventLoggingService.init(true);
@@ -202,7 +208,7 @@ export function initFactory(): Function {
         { provide: MessagingServiceAbstraction, useValue: messagingService },
         { provide: BroadcasterService, useValue: broadcasterService },
         { provide: SettingsServiceAbstraction, useValue: settingsService },
-        { provide: LockServiceAbstraction, useValue: lockService },
+        { provide: VaultTimeoutServiceAbstraction, useValue: vaultTimeoutService },
         { provide: StorageServiceAbstraction, useValue: storageService },
         { provide: StateServiceAbstraction, useValue: stateService },
         { provide: ExportServiceAbstraction, useValue: exportService },
@@ -211,6 +217,7 @@ export function initFactory(): Function {
         { provide: NotificationsServiceAbstraction, useValue: notificationsService },
         { provide: CryptoFunctionServiceAbstraction, useValue: cryptoFunctionService },
         { provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
+        { provide: PolicyServiceAbstraction, useValue: policyService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/services/unauth-guard.service.ts

@@ -4,18 +4,18 @@ import {
     Router,
 } from '@angular/router';
 
-import { LockService } from 'jslib/abstractions/lock.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';
 
 @Injectable()
 export class UnauthGuardService implements CanActivate {
-    constructor(private lockService: LockService, private userService: UserService,
+    constructor(private vaultTimeoutService: VaultTimeoutService, private userService: UserService,
         private router: Router) { }
 
     async canActivate() {
         const isAuthed = await this.userService.isAuthenticated();
         if (isAuthed) {
-            const locked = await this.lockService.isLocked();
+            const locked = await this.vaultTimeoutService.isLocked();
             if (locked) {
                 this.router.navigate(['lock']);
             } else {

src/app/settings/account.component.ts

@@ -15,9 +15,9 @@ import { PurgeVaultComponent } from './purge-vault.component';
     templateUrl: 'account.component.html',
 })
 export class AccountComponent {
-    @ViewChild('deauthorizeSessionsTemplate', { read: ViewContainerRef }) deauthModalRef: ViewContainerRef;
-    @ViewChild('purgeVaultTemplate', { read: ViewContainerRef }) purgeModalRef: ViewContainerRef;
-    @ViewChild('deleteAccountTemplate', { read: ViewContainerRef }) deleteModalRef: ViewContainerRef;
+    @ViewChild('deauthorizeSessionsTemplate', { read: ViewContainerRef, static: true }) deauthModalRef: ViewContainerRef;
+    @ViewChild('purgeVaultTemplate', { read: ViewContainerRef, static: true }) purgeModalRef: ViewContainerRef;
+    @ViewChild('deleteAccountTemplate', { read: ViewContainerRef, static: true }) deleteModalRef: ViewContainerRef;
 
     private modal: ModalComponent = null;
 

src/app/settings/add-credit.component.html

@@ -1,20 +1,20 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'addCredit' | i18n}}</h3>
         <div class="mb-4 text-lg" *ngIf="showOptions">
             <div class="form-check form-check-inline">
                 <input class="form-check-input" type="radio" name="Method" id="credit-method-paypal"
                     [value]="paymentMethodType.PayPal" [(ngModel)]="method">
                 <label class="form-check-label" for="credit-method-paypal">
-                    <i class="fa fa-fw fa-paypal"></i> PayPal</label>
+                    <i class="fa fa-fw fa-paypal" aria-hidden="true"></i> PayPal</label>
             </div>
             <div class="form-check form-check-inline">
                 <input class="form-check-input" type="radio" name="Method" id="credit-method-bitcoin"
                     [value]="paymentMethodType.BitPay" [(ngModel)]="method">
                 <label class="form-check-label" for="credit-method-bitcoin">
-                    <i class="fa fa-fw fa-bitcoin"></i> Bitcoin</label>
+                    <i class="fa fa-fw fa-bitcoin" aria-hidden="true"></i> Bitcoin</label>
             </div>
         </div>
         <div class="form-group">
@@ -31,7 +31,7 @@
             <small class="form-text text-muted">{{'creditDelayed' | i18n}}</small>
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading || ppLoading">
-            <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()">

src/app/settings/add-credit.component.ts

@@ -33,7 +33,7 @@ export class AddCreditComponent implements OnInit {
     @Output() onAdded = new EventEmitter();
     @Output() onCanceled = new EventEmitter();
 
-    @ViewChild('ppButtonForm', { read: ElementRef }) ppButtonFormRef: ElementRef;
+    @ViewChild('ppButtonForm', { read: ElementRef, static: true }) ppButtonFormRef: ElementRef;
 
     paymentMethodType = PaymentMethodType;
     ppButtonFormAction = WebConstants.paypal.buttonActionProduction;

src/app/settings/adjust-payment.component.html

@@ -1,11 +1,12 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(currentType != null ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}</h3>
         <app-payment [hideBank]="!organizationId" [hideCredit]="true"></app-payment>
+        <app-tax-info (onCountryChanged)="changeCountry()"></app-tax-info>
         <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()">

src/app/settings/adjust-payment.component.ts

@@ -17,13 +17,15 @@ import { PaymentRequest } from 'jslib/models/request/paymentRequest';
 import { PaymentMethodType } from 'jslib/enums/paymentMethodType';
 
 import { PaymentComponent } from './payment.component';
+import { TaxInfoComponent } from './tax-info.component';
 
 @Component({
     selector: 'app-adjust-payment',
     templateUrl: 'adjust-payment.component.html',
 })
 export class AdjustPaymentComponent {
-    @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+    @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
+    @ViewChild(TaxInfoComponent, { static: true }) taxInfoComponent: TaxInfoComponent;
 
     @Input() currentType?: PaymentMethodType;
     @Input() organizationId: string;
@@ -42,9 +44,17 @@ export class AdjustPaymentComponent {
             this.formPromise = this.paymentComponent.createPaymentToken().then((result) => {
                 request.paymentToken = result[0];
                 request.paymentMethodType = result[1];
+                request.postalCode = this.taxInfoComponent.taxInfo.postalCode;
+                request.country = this.taxInfoComponent.taxInfo.country;
                 if (this.organizationId == null) {
                     return this.apiService.postAccountPayment(request);
                 } else {
+                    request.taxId = this.taxInfoComponent.taxInfo.taxId;
+                    request.state = this.taxInfoComponent.taxInfo.state;
+                    request.line1 = this.taxInfoComponent.taxInfo.line1;
+                    request.line2 = this.taxInfoComponent.taxInfo.line2;
+                    request.city = this.taxInfoComponent.taxInfo.city;
+                    request.state = this.taxInfoComponent.taxInfo.state;
                     return this.apiService.postOrganizationPayment(this.organizationId, request);
                 }
             });
@@ -60,4 +70,16 @@ export class AdjustPaymentComponent {
     cancel() {
         this.onCanceled.emit();
     }
+
+    changeCountry() {
+        if (this.taxInfoComponent.taxInfo.country === 'US') {
+            this.paymentComponent.hideBank = !this.organizationId;
+        } else {
+            this.paymentComponent.hideBank = true;
+            if (this.paymentComponent.method === PaymentMethodType.BankAccount) {
+                this.paymentComponent.method = PaymentMethodType.Card;
+                this.paymentComponent.changeMethod();
+            }
+        }
+    }
 }

src/app/settings/adjust-storage.component.html

@@ -1,7 +1,7 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
         <div class="row">
             <div class="form-group col-6">
@@ -16,7 +16,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()">

src/app/settings/adjust-storage.component.ts

@@ -35,7 +35,7 @@ export class AdjustStorageComponent {
     @Output() onAdjusted = new EventEmitter<number>();
     @Output() onCanceled = new EventEmitter();
 
-    @ViewChild(PaymentComponent) paymentComponent: PaymentComponent;
+    @ViewChild(PaymentComponent, { static: true }) paymentComponent: PaymentComponent;
 
     storageAdjustment = 0;
     formPromise: Promise<any>;

src/app/settings/change-email.component.html

@@ -28,7 +28,7 @@
         </div>
     </ng-container>
     <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 *ngIf="!tokenSent">{{'continue' | i18n}}</span>
         <span *ngIf="tokenSent">{{'changeEmail' | i18n}}</span>
     </button>

src/app/settings/change-kdf.component.html

@@ -14,8 +14,8 @@
             <div class="form-group mb-0">
                 <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
-                    rel="noopener" title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i>
+                    rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
                 <select id="kdf" name="Kdf" [(ngModel)]="kdf" class="form-control" required>
                     <option *ngFor="let o of kdfOptions" [ngValue]="o.value">{{o.name}}</option>
@@ -26,8 +26,8 @@
             <div class="form-group mb-0">
                 <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/PBKDF2" target="_blank" rel="noopener"
-                    title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i>
+                    appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
                 <input id="kdfIterations" type="number" min="5000" max="2000000" name="KdfIterations"
                     class="form-control" [(ngModel)]="kdfIterations" required>
@@ -43,7 +43,7 @@
         </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>{{'changeKdf' | i18n}}</span>
     </button>
 </form>

src/app/settings/change-password.component.html

@@ -1,4 +1,20 @@
 <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
+<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>
+
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
         <div class="col-6">
@@ -12,18 +28,18 @@
     <div class="row">
         <div class="col-6">
             <div class="form-group">
-                <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
-                <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
-                    [(ngModel)]="newMasterPassword" (input)="updatePasswordStrength()" required appInputVerbatim
+                <label for="masterPassword">{{'newMasterPass' | i18n}}</label>
+                <input id="masterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
+                    [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required appInputVerbatim
                     autocomplete="new-password">
                 <app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
             </div>
         </div>
         <div class="col-6">
             <div class="form-group">
-                <label for="confirmNewMasterPassword">{{'confirmNewMasterPass' | i18n}}</label>
-                <input id="confirmNewMasterPassword" type="password" name="ConfirmNewMasterPasswordHash"
-                    class="form-control" [(ngModel)]="confirmNewMasterPassword" required appInputVerbatim
+                <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
+                <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
+                    class="form-control" [(ngModel)]="masterPasswordRetype" required appInputVerbatim
                     autocomplete="new-password">
             </div>
         </div>
@@ -36,13 +52,13 @@
                 {{'rotateAccountEncKey' | i18n}}
             </label>
             <a href="https://help.bitwarden.com/article/change-your-master-password/#rotating-your-accounts-encryption-key"
-                target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+                target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </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>{{'changeMasterPassword' | i18n}}</span>
     </button>
 </form>

src/app/settings/change-password.component.ts

@@ -1,10 +1,4 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
+import { Component } from '@angular/core';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
@@ -14,9 +8,14 @@ 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 {
+    ChangePasswordComponent as BaseChangePasswordComponent,
+} from 'jslib/angular/components/change-password.component';
+
 import { CipherString } from 'jslib/models/domain/cipherString';
 import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
 
@@ -29,102 +28,18 @@ import { UpdateKeyRequest } from 'jslib/models/request/updateKeyRequest';
     selector: 'app-change-password',
     templateUrl: 'change-password.component.html',
 })
-export class ChangePasswordComponent implements OnInit {
-    currentMasterPassword: string;
-    newMasterPassword: string;
-    confirmNewMasterPassword: string;
-    formPromise: Promise<any>;
-    masterPasswordScore: number;
+export class ChangePasswordComponent extends BaseChangePasswordComponent {
     rotateEncKey = false;
+    currentMasterPassword: string;
 
-    private masterPasswordStrengthTimeout: any;
-    private email: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private messagingService: MessagingService,
-        private userService: UserService, private passwordGenerationService: PasswordGenerationService,
-        private platformUtilsService: PlatformUtilsService, private folderService: FolderService,
-        private cipherService: CipherService, private syncService: SyncService) { }
-
-    async ngOnInit() {
-        this.email = await this.userService.getEmail();
-    }
-
-    async submit() {
-        const hasEncKey = await this.cryptoService.hasEncKey();
-        if (!hasEncKey) {
-            this.toasterService.popAsync('error', null, this.i18nService.t('updateKey'));
-            return;
-        }
-
-        if (this.currentMasterPassword == null || this.currentMasterPassword === '' ||
-            this.newMasterPassword == null || this.newMasterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
-        if (this.newMasterPassword.length < 8) {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassLength'));
-            return;
-        }
-        if (this.newMasterPassword !== this.confirmNewMasterPassword) {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassDoesntMatch'));
-            return;
-        }
-
-        const strengthResult = this.passwordGenerationService.passwordStrength(this.newMasterPassword,
-            this.getPasswordStrengthUserInput());
-        if (strengthResult != null && strengthResult.score < 3) {
-            const result = await this.platformUtilsService.showDialog(this.i18nService.t('weakMasterPasswordDesc'),
-                this.i18nService.t('weakMasterPassword'), this.i18nService.t('yes'), this.i18nService.t('no'),
-                'warning');
-            if (!result) {
-                return;
-            }
-        }
-
-        if (this.rotateEncKey) {
-            await this.syncService.fullSync(true);
-        }
-
-        const request = new PasswordRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.currentMasterPassword, null);
-        const email = await this.userService.getEmail();
-        const kdf = await this.userService.getKdf();
-        const kdfIterations = await this.userService.getKdfIterations();
-        const newKey = await this.cryptoService.makeKey(this.newMasterPassword, email.trim().toLowerCase(),
-            kdf, kdfIterations);
-        request.newMasterPasswordHash = await this.cryptoService.hashPassword(this.newMasterPassword, newKey);
-        const newEncKey = await this.cryptoService.remakeEncKey(newKey);
-        request.key = newEncKey[1].encryptedString;
-        try {
-            if (this.rotateEncKey) {
-                this.formPromise = this.apiService.postPassword(request).then(() => {
-                    return this.updateKey(newKey, request.newMasterPasswordHash);
-                });
-            } else {
-                this.formPromise = this.apiService.postPassword(request);
-            }
-            await this.formPromise;
-            this.analytics.eventTrack.next({ action: 'Changed Password' });
-            this.toasterService.popAsync('success', this.i18nService.t('masterPasswordChanged'),
-                this.i18nService.t('logBackIn'));
-            this.messagingService.send('logout');
-        } catch { }
-    }
-
-    updatePasswordStrength() {
-        if (this.masterPasswordStrengthTimeout != null) {
-            clearTimeout(this.masterPasswordStrengthTimeout);
-        }
-        this.masterPasswordStrengthTimeout = setTimeout(() => {
-            const strengthResult = this.passwordGenerationService.passwordStrength(this.newMasterPassword,
-                this.getPasswordStrengthUserInput());
-            this.masterPasswordScore = strengthResult == null ? null : strengthResult.score;
-        }, 300);
+    constructor(i18nService: I18nService,
+        cryptoService: CryptoService, messagingService: MessagingService,
+        userService: UserService, passwordGenerationService: PasswordGenerationService,
+        platformUtilsService: PlatformUtilsService, policyService: PolicyService,
+        private folderService: FolderService, private cipherService: CipherService,
+        private syncService: SyncService, private apiService: ApiService, ) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService);
     }
 
     async rotateEncKeyClicked() {
@@ -162,13 +77,54 @@ export class ChangePasswordComponent implements OnInit {
         }
     }
 
-    private getPasswordStrengthUserInput() {
-        let userInput: string[] = [];
-        const atPosition = this.email.indexOf('@');
-        if (atPosition > -1) {
-            userInput = userInput.concat(this.email.substr(0, atPosition).trim().toLowerCase().split(/[^A-Za-z0-9]/));
+    async submit() {
+        const hasEncKey = await this.cryptoService.hasEncKey();
+        if (!hasEncKey) {
+            this.platformUtilsService.showToast('error', null, this.i18nService.t('updateKey'));
+            return;
+        }
+
+        await super.submit();
+    }
+
+    async setupSubmitActions() {
+        if (this.currentMasterPassword == null || this.currentMasterPassword === '') {
+            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return false;
+        }
+
+        if (this.rotateEncKey) {
+            await this.syncService.fullSync(true);
+        }
+
+        return super.setupSubmitActions();
+    }
+
+    async performSubmitActions(newMasterPasswordHash: string, newKey: SymmetricCryptoKey,
+        newEncKey: [SymmetricCryptoKey, CipherString]) {
+        const request = new PasswordRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.currentMasterPassword, null);
+        request.newMasterPasswordHash = newMasterPasswordHash;
+        request.key = newEncKey[1].encryptedString;
+
+        try {
+            if (this.rotateEncKey) {
+                this.formPromise = this.apiService.postPassword(request).then(() => {
+                    return this.updateKey(newKey, request.newMasterPasswordHash);
+                });
+            } else {
+                this.formPromise = this.apiService.postPassword(request);
+            }
+
+            await this.formPromise;
+
+            this.platformUtilsService.showToast('success', this.i18nService.t('masterPasswordChanged'),
+                this.i18nService.t('logBackIn'));
+            this.messagingService.send('logout');
+        } catch {
+            this.platformUtilsService.showToast('error', null, this.i18nService.t('errorOccurred'));
         }
-        return userInput;
     }
 
     private async updateKey(key: SymmetricCryptoKey, masterPasswordHash: string) {

src/app/settings/create-organization.component.ts

@@ -12,7 +12,7 @@ import { OrganizationPlansComponent } from './organization-plans.component';
     templateUrl: 'create-organization.component.html',
 })
 export class CreateOrganizationComponent implements OnInit {
-    @ViewChild(OrganizationPlansComponent) orgPlansComponent: OrganizationPlansComponent;
+    @ViewChild(OrganizationPlansComponent, { static: true }) orgPlansComponent: OrganizationPlansComponent;
 
     constructor(private route: ActivatedRoute) { }
 

src/app/settings/deauthorize-sessions.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="deAuthTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'deauthorizeSessions' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="deAuthTitle">{{'deauthorizeSessions' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -16,7 +16,7 @@
             </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>{{'deauthorizeSessions' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

src/app/settings/delete-account.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="deleteAccountTitle">
+    <div class="modal-dialog" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{'deleteAccount' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="deleteAccountTitle">{{'deleteAccount' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -16,7 +16,7 @@
             </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>{{'deleteAccount' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

src/app/settings/domain-rules.component.html

@@ -5,7 +5,8 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <h2>{{'customEqDomains' | i18n}}</h2>
     <p *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>
     </p>
     <ng-container *ngIf="!loading">
         <div class="form-group d-flex" *ngFor="let d of custom; let i = index; trackBy: indexTrackBy">
@@ -14,22 +15,24 @@
                 <textarea class="form-control" name="CustomDomain[{{i}}]" id="customDomain_{{i}}"
                     [(ngModel)]="custom[i]" placeholder="{{'ex' | i18n}} google.com, gmail.com" required></textarea>
             </div>
-            <button type="button" class="btn btn-link text-danger ml-2" (click)="remove(i)" title="{{'remove' | i18n}}">
-                <i class="fa fa-minus-circle fa-lg"></i>
+            <button type="button" class="btn btn-link text-danger ml-2" (click)="remove(i)"
+                appA11yTitle="{{'remove' | i18n}}">
+                <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
             </button>
         </div>
         <button type="button" (click)="add()" class="btn btn-outline-secondary btn-sm mb-2">
-            <i class="fa fa-plus fa-fw"></i> {{'newCustomDomain' | i18n}}
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i> {{'newCustomDomain' | i18n}}
         </button>
         <small class="text-muted d-block mb-3">{{'newCustomDomainDesc' | i18n}}</small>
     </ng-container>
     <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>
     <h2 class="spaced-header">{{'globalEqDomains' | i18n}}</h2>
     <p *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>
     </p>
     <table class="table table-hover table-list" *ngIf="!loading && global.length > 0">
         <tbody>
@@ -38,22 +41,22 @@
                 <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>
+                            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)="toggleExcluded(d)"
                                 *ngIf="!d.excluded">
-                                <i class="fa fa-fw fa-close"></i>
+                                <i class="fa fa-fw fa-close" aria-hidden="true"></i>
                                 {{'exclude' | i18n}}
                             </a>
                             <a class="dropdown-item" href="#" appStopClick (click)="toggleExcluded(d)"
                                 *ngIf="d.excluded">
-                                <i class="fa fa-fw fa-plus"></i>
+                                <i class="fa fa-fw fa-plus" aria-hidden="true"></i>
                                 {{'include' | i18n}}
                             </a>
                             <a class="dropdown-item" href="#" appStopClick (click)="customize(d)">
-                                <i class="fa fa-fw fa-scissors"></i>
+                                <i class="fa fa-fw fa-scissors" aria-hidden="true"></i>
                                 {{'customize' | i18n}}
                             </a>
                         </div>
@@ -63,7 +66,7 @@
         </tbody>
     </table>
     <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>

src/app/settings/link-sso.component.html

@@ -0,0 +1,4 @@
+<a class="dropdown-item" href="#" appStopClick (click)="submit(returnUri, true)">
+    <i class="fa fa-fw fa-link" aria-hidden="true"></i>
+    Link SSO
+</a>

src/app/settings/link-sso.component.ts

@@ -0,0 +1,48 @@
+import {
+    AfterContentInit,
+    Component,
+    Input,
+} 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 } from 'jslib/angular/components/sso.component';
+
+import { Organization } from 'jslib/models/domain/organization';
+
+@Component({
+    selector: 'app-link-sso',
+    templateUrl: 'link-sso.component.html',
+})
+export class LinkSsoComponent extends SsoComponent implements AfterContentInit {
+    @Input() organization: Organization;
+    returnUri: string = '/settings/organizations'
+
+    constructor(platformUtilsService: PlatformUtilsService, i18nService: I18nService,
+        apiService: ApiService, authService: AuthService,
+        router: Router, route: ActivatedRoute,
+        cryptoFunctionService: CryptoFunctionService, passwordGenerationService: PasswordGenerationService,
+        storageService: StorageService, stateService: StateService) {
+        super(authService, router,
+            i18nService, route,
+            storageService, stateService,
+            platformUtilsService, apiService,
+            cryptoFunctionService, passwordGenerationService);
+
+        this.returnUri = '/settings/organizations';
+        this.redirectUri = window.location.origin + '/sso-connector.html';
+        this.clientId = 'web';
+    }
+
+    async ngAfterContentInit() {
+        this.identifier = this.organization.identifier;
+    }
+}

src/app/settings/options.component.html

@@ -6,22 +6,41 @@
     <div class="row">
         <div class="col-6">
             <div class="form-group">
-                <label for="lockOption">{{'lockOptions' | i18n}}</label>
-                <select id="lockOption" name="LockOption" [(ngModel)]="lockOption" class="form-control">
-                    <option *ngFor="let o of lockOptions" [ngValue]="o.value">{{o.name}}</option>
+                <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
+                <select id="vaultTimeout" name="VaultTimeout" [(ngModel)]="vaultTimeout" class="form-control">
+                    <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
                 </select>
-                <small class="form-text text-muted">{{'lockOptionsDesc' | i18n}}</small>
+                <small class="form-text text-muted">{{'vaultTimeoutDesc' | i18n}}</small>
             </div>
         </div>
     </div>
+    <div class="form-group">
+        <label>{{'vaultTimeoutAction' | i18n}}</label>
+        <div class="form-check form-check-block">
+            <input class="form-check-input" type="radio" name="vaultTimeoutAction" id="vaultTimeoutActionLock"
+                value="lock" [(ngModel)]="vaultTimeoutAction">
+            <label class="form-check-label" for="vaultTimeoutActionLock">
+                {{'lock' | i18n}}
+                <small>{{'vaultTimeoutActionLockDesc' | i18n}}</small>
+            </label>
+        </div>
+        <div class="form-check mt-2 form-check-block">
+            <input class="form-check-input" type="radio" name="vaultTimeoutAction" id="vaultTimeoutActionLogOut"
+                value="logOut" [(ngModel)]="vaultTimeoutAction" (ngModelChange)="vaultTimeoutActionChanged($event)">
+            <label class="form-check-label" for="vaultTimeoutActionLogOut">
+                {{'logOut' | i18n}}
+                <small>{{'vaultTimeoutActionLogOutDesc' | i18n}}</small>
+            </label>
+        </div>
+    </div>
     <div class="row">
         <div class="col-6">
             <div class="form-group">
                 <div class="d-flex">
                     <label for="locale">{{'language' | i18n}}</label>
                     <a class="ml-auto" href="https://help.bitwarden.com/article/localization/" target="_blank"
-                        rel="noopener" title="{{'learnMore' | i18n}}">
-                        <i class="fa fa-question-circle-o"></i>
+                        rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                     </a>
                 </div>
                 <select id="locale" name="Locale" [(ngModel)]="locale" class="form-control">
@@ -39,8 +58,8 @@
                 {{'disableIcons' | i18n}}
             </label>
             <a href="https://help.bitwarden.com/article/website-icons/" target="_blank" rel="noopener"
-                title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+                appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </div>
         <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
@@ -52,11 +71,21 @@
             <label class="form-check-label" for="enableGravatars">
                 {{'enableGravatars' | i18n}}
             </label>
-            <a href="https://gravatar.com/" target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+            <a href="https://gravatar.com/" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </div>
         <small class="form-text text-muted">{{'enableGravatarsDesc' | i18n}}</small>
+    </div>
+	<div class="form-group">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="enableFullWidth" name="enableFullWidth"
+                [(ngModel)]="enableFullWidth">
+            <label class="form-check-label" for="enableFullWidth">
+                {{'enableFullWidth' | i18n}}
+            </label>
+        </div>
+        <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
     </div>
     <button type="submit" class="btn btn-primary">
         {{'save' | i18n}}

src/app/settings/options.component.ts

@@ -7,10 +7,11 @@ import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
-import { LockService } from 'jslib/abstractions/lock.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 { VaultTimeoutService } from 'jslib/abstractions/vaultTimeout.service';
 
 import { ConstantsService } from 'jslib/services/constants.service';
 
@@ -21,20 +22,22 @@ import { Utils } from 'jslib/misc/utils';
     templateUrl: 'options.component.html',
 })
 export class OptionsComponent implements OnInit {
-    lockOption: number = null;
+    vaultTimeout: number = null;
+    vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
+    enableFullWidth: boolean;
     locale: string;
-    lockOptions: any[];
+    vaultTimeouts: any[];
     localeOptions: any[];
 
     private startingLocale: string;
 
     constructor(private storageService: StorageService, private stateService: StateService,
         private analytics: Angulartics2, private i18nService: I18nService,
-        private toasterService: ToasterService, private lockService: LockService,
-        private platformUtilsService: PlatformUtilsService) {
-        this.lockOptions = [
+        private toasterService: ToasterService, private vaultTimeoutService: VaultTimeoutService,
+        private platformUtilsService: PlatformUtilsService, private messagingService: MessagingService) {
+        this.vaultTimeouts = [
             { name: i18nService.t('oneMinute'), value: 1 },
             { name: i18nService.t('fiveMinutes'), value: 5 },
             { name: i18nService.t('fifteenMinutes'), value: 15 },
@@ -44,7 +47,7 @@ export class OptionsComponent implements OnInit {
             { name: i18nService.t('onRefresh'), value: -1 },
         ];
         if (this.platformUtilsService.isDev()) {
-            this.lockOptions.push({ name: i18nService.t('never'), value: null });
+            this.vaultTimeouts.push({ name: i18nService.t('never'), value: null });
         }
 
         const localeOptions: any[] = [];
@@ -61,18 +64,23 @@ export class OptionsComponent implements OnInit {
     }
 
     async ngOnInit() {
-        this.lockOption = await this.storageService.get<number>(ConstantsService.lockOptionKey);
+        this.vaultTimeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
+        this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
         this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
+        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
         this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
     async submit() {
-        await this.lockService.setLockOption(this.lockOption != null ? this.lockOption : null);
+        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout != null ? this.vaultTimeout : null,
+            this.vaultTimeoutAction);
         await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.storageService.save('enableGravatars', this.enableGravatars);
         await this.stateService.save('enableGravatars', this.enableGravatars);
+        await this.storageService.save('enableFullWidth', this.enableFullWidth);
+        this.messagingService.send('setFullWidth');
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {
@@ -81,4 +89,18 @@ export class OptionsComponent implements OnInit {
             this.toasterService.popAsync('success', null, this.i18nService.t('optionsUpdated'));
         }
     }
+
+    async vaultTimeoutActionChanged(newValue: string) {
+        if (newValue === 'logOut') {
+            const confirmed = await this.platformUtilsService.showDialog(
+                this.i18nService.t('vaultTimeoutLogOutConfirmation'),
+                this.i18nService.t('vaultTimeoutLogOutConfirmationTitle'),
+                this.i18nService.t('yes'), this.i18nService.t('cancel'), 'warning');
+            if (!confirmed) {
+                this.vaultTimeoutAction = 'lock';
+                return;
+            }
+        }
+        this.vaultTimeoutAction = newValue;
+    }
 }

src/app/settings/organization-plans.component.html

@@ -1,3 +1,7 @@
+<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="createOrganization && selfHosted">
     <p>{{'uploadLicenseFileOrg' | i18n}}</p>
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
@@ -8,12 +12,13 @@
                 class="form-text text-muted">{{'licenseFileDesc' | i18n : 'bitwarden_organization_license.json'}}</small>
         </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>
     </form>
 </ng-container>
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
+    *ngIf="!loading && !selfHosted && this.plans">
     <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
     <div class="row" *ngIf="createOrganization">
         <div class="form-group col-6">
@@ -38,69 +43,61 @@
         </div>
     </div>
     <h2 class="mt-5">{{'chooseYourPlan' | i18n}}</h2>
-    <div class="form-check form-check-block" *ngIf="!ownedBusiness && showFree">
-        <input class="form-check-input" type="radio" name="PlanType" id="planFree" value="free" [(ngModel)]="plan"
-            (change)="changedPlan()">
-        <label class="form-check-label" for="planFree">
-            {{'planNameFree' | i18n}}
-            <small class="mb-1">{{'planDescFree' | i18n : '1'}}</small>
-            <small>• {{'limitedUsers' | i18n : '2'}}</small>
-            <small>• {{'limitedCollections' | i18n : '2'}}</small>
-            <span>{{'freeForever' | i18n}}</span>
+    <div *ngFor="let selectableProduct of selectableProducts" class="form-check form-check-block">
+        <input class="form-check-input" type="radio" name="product" id="product{{selectableProduct.product}}"
+            [value]="selectableProduct.product" [(ngModel)]="product" (change)="changedProduct()">
+        <label class="form-check-label" for="product{{selectableProduct.product}}">
+            {{ selectableProduct.nameLocalizationKey | i18n}}
+            <small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n : '1'}}</small>
+            <ng-container *ngIf="selectableProduct.product === productTypes.Enterprise; else fullFeatureList">
+                <small>• {{'includeAllTeamsFeatures' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasSelfHost">• {{'onPremHostingOptional' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasSso">• {{'includeSsoAuthentication' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasPolicies">• {{'includeEnterprisePolicies' | i18n}}</small>
+            </ng-container>
+            <ng-template #fullFeatureList>
+                <small *ngIf="selectableProduct.product == productTypes.Free">•
+                    {{'limitedUsers' | i18n : selectableProduct.maxUsers }}</small>
+                <small *ngIf="selectableProduct.product != productTypes.Free && selectableProduct.maxUsers">•
+                    {{'addShareLimitedUsers' | i18n : selectableProduct.maxUsers}}</small>
+                <small *ngIf="!selectableProduct.maxUsers">•
+                    {{'addShareUnlimitedUsers' | i18n}}</small>
+                <small *ngIf="selectableProduct.maxCollections">•
+                    {{'limitedCollections' | i18n : selectableProduct.maxCollections }}</small>
+                <small *ngIf="selectableProduct.maxAdditionalSeats">•
+                    {{'addShareLimitedUsers' | i18n : selectableProduct.maxAdditionalSeats }}</small>
+                <small *ngIf="!selectableProduct.maxCollections">• {{'createUnlimitedCollections' | i18n}}</small>
+                <small *ngIf="selectableProduct.baseStorageGb">•
+                    {{'gbEncryptedFileStorage' | i18n : selectableProduct.baseStorageGb + 'GB'}}</small>
+                <small *ngIf="selectableProduct.hasGroups">• {{'controlAccessWithGroups' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasApi">• {{'trackAuditLogs' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasDirectory">• {{'syncUsersFromDirectory' | i18n}}</small>
+                <small *ngIf="selectableProduct.hasSelfHost">• {{'onPremHostingOptional' | i18n}}</small>
+                <small *ngIf="selectableProduct.usersGetPremium">• {{'usersGetPremium' | i18n}}</small>
+                <small *ngIf="selectableProduct.product != productTypes.Free">•
+                    {{'priorityCustomerSupport' | i18n}}</small>
+                <small *ngIf="selectableProduct.trialPeriodDays">•
+                    {{'xDayFreeTrial' | i18n : selectableProduct.trialPeriodDays }}
+                </small>
+            </ng-template>
+            <span *ngIf="selectableProduct.product != productTypes.Free">
+                <ng-container *ngIf="selectableProduct.basePrice">
+                    {{selectableProduct.basePrice / 12 | currency:'$'}} /{{'month' | i18n}},
+                    {{'includesXUsers' | i18n : selectableProduct.baseSeats}}
+                    <ng-container *ngIf="selectableProduct.hasAdditionalSeatsOption">
+                        {{('additionalUsers' | i18n).toLowerCase()}}
+                        {{selectableProduct.seatPrice  / 12 | currency:'$'}} /{{'month' | i18n}}
+                    </ng-container>
+                </ng-container>
+            </span>
+            <span *ngIf="!selectableProduct.basePrice && selectableProduct.hasAdditionalSeatsOption">
+                {{'costPerUser' | i18n : (selectableProduct.seatPrice / 12 | currency:'$')}} /{{'month' | i18n}}
+            </span>
+            <span *ngIf="selectableProduct.product == productTypes.Free">{{'freeForever' | i18n}}</span>
         </label>
     </div>
-    <div class="form-check form-check-block" *ngIf="!ownedBusiness">
-        <input class="form-check-input" type="radio" name="PlanType" id="planFamilies" value="families"
-            [(ngModel)]="plan" (change)="changedPlan()">
-        <label class="form-check-label" for="planFamilies">
-            {{'planNameFamilies' | i18n}}
-            <small class="mb-1">{{'planDescFamilies' | i18n}}</small>
-            <small>• {{'addShareLimitedUsers' | i18n : '5'}}</small>
-            <small>• {{'createUnlimitedCollections' | i18n}}</small>
-            <small>• {{'gbEncryptedFileStorage' | i18n : '1 GB'}}</small>
-            <small>• {{'onPremHostingOptional' | i18n}}</small>
-            <small>• {{'priorityCustomerSupport' | i18n}}</small>
-            <small>• {{'xDayFreeTrial' | i18n : '7'}}</small>
-            <span>{{1 | currency:'$'}} /{{'month' | i18n}}, {{'includesXUsers' | i18n : 5}}</span>
-        </label>
-    </div>
-    <div class="form-check form-check-block">
-        <input class="form-check-input" type="radio" name="PlanType" id="planTeams" value="teams" [(ngModel)]="plan"
-            (change)="changedPlan()">
-        <label class="form-check-label" for="planTeams">
-            {{'planNameTeams' | i18n}}
-            <small class="mb-1">{{'planDescTeams' | i18n}}</small>
-            <small>• {{'addShareUnlimitedUsers' | i18n}}</small>
-            <small>• {{'createUnlimitedCollections' | i18n}}</small>
-            <small>• {{'gbEncryptedFileStorage' | i18n : '1 GB'}}</small>
-            <small>• {{'priorityCustomerSupport' | i18n}}</small>
-            <small>• {{'xDayFreeTrial' | i18n : '7'}}</small>
-            <span>{{5 | currency:'$'}} /{{'month' | i18n}}, {{'includesXUsers' | i18n : 5}},
-                {{('additionalUsers' | i18n).toLowerCase()}}
-                {{2 | currency:'$'}} /{{'month' | i18n}}</span>
-        </label>
-    </div>
-    <div class="form-check form-check-block">
-        <input class="form-check-input" type="radio" name="PlanType" id="planEnterprise" value="enterprise"
-            [(ngModel)]="plan" (change)="changedPlan()">
-        <label class="form-check-label" for="planEnterprise">
-            {{'planNameEnterprise' | i18n}}
-            <small class="mb-1">{{'planDescEnterprise' | i18n}}</small>
-            <small>• {{'addShareUnlimitedUsers' | i18n}}</small>
-            <small>• {{'createUnlimitedCollections' | i18n}}</small>
-            <small>• {{'gbEncryptedFileStorage' | i18n : '1 GB'}}</small>
-            <small>• {{'controlAccessWithGroups' | i18n}}</small>
-            <small>• {{'trackAuditLogs' | i18n}}</small>
-            <small>• {{'syncUsersFromDirectory' | i18n}}</small>
-            <small>• {{'onPremHostingOptional' | i18n}}</small>
-            <small>• {{'usersGetPremium' | i18n}}</small>
-            <small>• {{'priorityCustomerSupport' | i18n}}</small>
-            <small>• {{'xDayFreeTrial' | i18n : '7'}}</small>
-            <span>{{'costPerUser' | i18n : (3 | currency:'$')}} /{{'month' | i18n}}</span>
-        </label>
-    </div>
-    <ng-container *ngIf="!plans[plan].noPayment">
-        <ng-container *ngIf="!plans[plan].noAdditionalSeats && !plans[plan].baseSeats">
+    <div *ngIf="product !== productTypes.Free">
+        <ng-container *ngIf="selectedPlan.hasAdditionalSeatsOption && !selectedPlan.baseSeats">
             <h2 class="mt-5">{{'users' | i18n}}</h2>
             <div class="row">
                 <div class="col-6">
@@ -113,13 +110,13 @@
             </div>
         </ng-container>
         <h2 class="mt-5">{{'addons' | i18n}}</h2>
-        <div class="row" *ngIf="!plans[plan].noAdditionalSeats && plans[plan].baseSeats">
+        <div class="row" *ngIf="selectedPlan.hasAdditionalSeatsOption && selectedPlan.baseSeats">
             <div class="form-group col-6">
                 <label for="additionalSeats">{{'additionalUserSeats' | i18n}}</label>
                 <input id="additionalSeats" class="form-control" type="number" name="AdditionalSeats"
                     [(ngModel)]="additionalSeats" min="0" max="100000" placeholder="{{'userSeatsDesc' | i18n}}">
                 <small
-                    class="text-muted form-text">{{'userSeatsAdditionalDesc' | i18n : plans[plan].baseSeats : (plans[plan].seatPrice | currency:'$')}}</small>
+                    class="text-muted form-text">{{'userSeatsAdditionalDesc' | i18n : selectedPlan.baseSeats : (seatPriceMonthly(selectedPlan) | currency:'$')}}</small>
             </div>
         </div>
         <div class="row">
@@ -129,11 +126,11 @@
                     [(ngModel)]="additionalStorage" min="0" max="99" step="1"
                     placeholder="{{'additionalStorageGbDesc' | i18n}}">
                 <small
-                    class="text-muted form-text">{{'additionalStorageIntervalDesc' | i18n : '1 GB' : (storageGb.price | currency:'$') : ('month' | i18n)}}</small>
+                    class="text-muted form-text">{{'additionalStorageIntervalDesc' | i18n : '1 GB' : (additionalStoragePriceMonthly(selectedPlan) | currency:'$') : ('month' | i18n)}}</small>
             </div>
         </div>
         <div class="row">
-            <div class="form-group col-6" *ngIf="plans[plan].canBuyPremiumAccessAddon">
+            <div class="form-group col-6" *ngIf="selectedPlan.hasPremiumAccessOption">
                 <div class="form-check">
                     <input id="premiumAccess" class="form-check-input" type="checkbox" name="PremiumAccessAddon"
                         [(ngModel)]="premiumAccessAddon">
@@ -144,74 +141,90 @@
             </div>
         </div>
         <h2 class="spaced-header">{{'summary' | i18n}}</h2>
-        <div class="form-check form-check-block">
-            <input class="form-check-input" type="radio" name="BillingInterval" id="intervalAnnually" value="year"
-                [(ngModel)]="interval">
-            <label class="form-check-label" for="intervalAnnually">
-                {{'annually' | i18n}}
-                <small *ngIf="plans[plan].annualBasePrice">
-                    {{'basePrice' | i18n}}: {{plans[plan].basePrice | currency:'$'}} &times;12 {{'monthAbbr' | i18n}} =
-                    {{baseTotal(true) | currency:'$'}}
-                    /{{'year' | i18n}}
-                </small>
-                <small *ngIf="!plans[plan].noAdditionalSeats">
-                    <span *ngIf="plans[plan].baseSeats">{{'additionalUsers' | i18n}}:</span>
-                    <span *ngIf="!plans[plan].baseSeats">{{'users' | i18n}}:</span>
-                    {{additionalSeats || 0}} &times; {{plans[plan].seatPrice | currency:'$'}} &times;12
-                    {{'monthAbbr' | i18n}} = {{seatTotal(true)
+        <div class="form-check form-check-block" *ngFor="let selectablePlan of selectablePlans">
+            <input class="form-check-input" type="radio" name="BillingInterval" id="interval{{selectablePlan.type}}"
+                [value]="selectablePlan.type" [(ngModel)]="plan">
+            <label class="form-check-label" for="interval{{selectablePlan.type}}">
+                <ng-container *ngIf="selectablePlan.isAnnual">
+                    {{'annually' | i18n}}
+                    <small *ngIf="selectablePlan.basePrice">
+                        {{'basePrice' | i18n}}: {{ selectablePlan.basePrice / 12 | currency:'$'}} &times; 12
+                        {{'monthAbbr' | i18n}}
+                        =
+                        {{selectablePlan.basePrice | currency:'$'}}
+                        /{{'year' | i18n}}
+                    </small>
+                    <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
+                        <span *ngIf="selectablePlan.baseSeats">{{'additionalUsers' | i18n}}:</span>
+                        <span *ngIf="!selectablePlan.baseSeats">{{'users' | i18n}}:</span>
+                        {{additionalSeats || 0}} &times; {{selectablePlan.seatPrice / 12 | currency:'$'}} &times; 12
+                        {{'monthAbbr' | i18n}} = {{seatTotal(selectablePlan)
                     | currency:'$'}} /{{'year' | i18n}}
-                </small>
-                <small>
-                    {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} &times;
-                    {{storageGb.price | currency:'$'}} &times;12 {{'monthAbbr'
-                    | i18n}} = {{additionalStorageTotal(true) | currency:'$'}} /{{'year' | i18n}}
-                </small>
-                <small *ngIf="plans[plan].canBuyPremiumAccessAddon && premiumAccessAddon">
-                    {{'premiumAccess' | i18n}}:
-                    {{3.33 | currency:'$'}} &times;12 {{'monthAbbr' | i18n}} = {{40 | currency:'$'}} /{{'year' | i18n}}
-                </small>
-            </label>
-        </div>
-        <div class="form-check form-check-block" *ngIf="plans[plan].monthlySeatPrice">
-            <input class="form-check-input" type="radio" name="BillingInterval" id="intervalMonthly" value="month"
-                [(ngModel)]="interval">
-            <label class="form-check-label" for="intervalMonthly">
-                {{'monthly' | i18n}}
-                <small *ngIf="plans[plan].monthlyBasePrice">
-                    {{'basePrice' | i18n}}: {{baseTotal(false) | currency:'$'}} /{{'month' | i18n}}
-                </small>
-                <small *ngIf="!plans[plan].noAdditionalSeats">
-                    <span *ngIf="plans[plan].baseSeats">{{'additionalUsers' | i18n}}:</span>
-                    <span *ngIf="!plans[plan].baseSeats">{{'users' | i18n}}:</span>
-                    {{additionalSeats || 0}} &times; {{plans[plan].monthlySeatPrice | currency:'$'}} =
-                    {{seatTotal(false) | currency:'$'}} /{{'month'
-                    | i18n}}
-                </small>
-                <small>
-                    {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} &times;
-                    {{storageGb.monthlyPrice | currency:'$'}} = {{additionalStorageTotal(false)
+                    </small>
+                    <small *ngIf="selectablePlan.hasAdditionalStorageOption">
+                        {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} &times;
+                        {{selectablePlan.additionalStoragePricePerGb / 12 | currency:'$'}} &times; 12 {{'monthAbbr'
+                        | i18n}} = {{additionalStorageTotal(selectablePlan) | currency:'$'}}
+                        /{{'year' | i18n}}
+                    </small>
+                    <small *ngIf="selectablePlan.hasPremiumAccessOption && premiumAccessAddon">
+                        {{'premiumAccess' | i18n}}:
+                        {{selectablePlan.premiumAccessOptionCost / 12 | currency:'$'}} &times; 12 {{'monthAbbr' | i18n}}
+                        =
+                        {{40 | currency:'$'}}
+                        /{{'year' | i18n}}
+                    </small>
+                </ng-container>
+                <ng-container *ngIf="!selectablePlan.isAnnual">
+                    {{'monthly' | i18n}}
+                    <small *ngIf="selectablePlan.basePrice">
+                        {{'basePrice' | i18n}}: {{selectablePlan.basePrice | currency:'$'}} {{'monthAbbr' | i18n}}
+                        =
+                        {{selectablePlan.basePrice | currency:'$'}}
+                        /{{'month' | i18n}}
+                    </small>
+                    <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
+                        <span *ngIf="selectablePlan.baseSeats">{{'additionalUsers' | i18n}}:</span>
+                        <span *ngIf="!selectablePlan.baseSeats">{{'users' | i18n}}:</span>
+                        {{additionalSeats || 0}} &times; {{selectablePlan.seatPrice | currency:'$'}}
+                        {{'monthAbbr' | i18n}} = {{seatTotal(selectablePlan)
                     | currency:'$'}} /{{'month' | i18n}}
-                </small>
+                    </small>
+                    <small *ngIf="selectablePlan.hasAdditionalStorageOption">
+                        {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} &times;
+                        {{selectablePlan.additionalStoragePricePerGb | currency:'$'}} {{'monthAbbr'
+                        | i18n}} = {{additionalStorageTotal(selectablePlan) | currency:'$'}}
+                        /{{'month' | i18n}}
+                    </small>
+                    <small *ngIf="selectablePlan.hasPremiumAccessOption && premiumAccessAddon">
+                        {{'premiumAccess' | i18n}}:
+                        {{selectablePlan.premiumAccessOptionCost | currency:'$'}} {{'monthAbbr' | i18n}} =
+                        {{40 | currency:'$'}}
+                        /{{'month' | i18n}}
+                    </small>
+                </ng-container>
             </label>
         </div>
         <hr class="my-3">
         <div class="text-lg">
-            <strong>{{'total' | i18n}}:</strong> {{total | currency:'USD $'}} /{{interval | i18n}}
+            <strong>{{'total' | i18n}}:</strong> {{subtotal | currency:'USD $'}} /{{selectedPlanInterval | i18n}}
         </div>
         <ng-container *ngIf="createOrganization">
-            <small class="text-muted font-italic">{{'paymentChargedWithTrial' | i18n : (interval | i18n) }}</small>
+            <small
+                class="text-muted font-italic">{{'paymentChargedWithTrial' | i18n : (selectedPlanInterval | i18n) }}</small>
             <h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
             <app-payment [hideCredit]="true"></app-payment>
+            <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
         </ng-container>
         <ng-container *ngIf="!createOrganization">
             <app-payment [showMethods]="false"></app-payment>
         </ng-container>
         <small class="text-muted font-italic mt-2 d-block" *ngIf="!createOrganization">
             {{'paymentCharged' | i18n : (interval | i18n) }}</small>
-    </ng-container>
-    <div [ngClass]="{'mt-4': !createOrganization || plans[plan].noPayment}">
+    </div>
+    <div class="mt-4">
         <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()" *ngIf="showCancel">