New Crowdin updates (#786)

* New translations messages.json (Romanian)

* New translations messages.json (Indonesian)

* New translations messages.json (Swedish)

* New translations messages.json (Turkish)

* New translations messages.json (Ukrainian)

* New translations messages.json (Chinese Simplified)

* New translations messages.json (Chinese Traditional)

* New translations messages.json (Vietnamese)

* New translations messages.json (Portuguese, Brazilian)

* New translations messages.json (Croatian)

* New translations messages.json (Slovenian)

* New translations messages.json (Estonian)

* New translations messages.json (Latvian)

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

* New translations messages.json (Esperanto)

* New translations messages.json (Malayalam)

* New translations messages.json (Sinhala)

* New translations messages.json (Norwegian Bokmal)

* New translations messages.json (Serbian (Latin))

* New translations messages.json (Serbian (Cyrillic))

* New translations messages.json (Slovak)

* New translations messages.json (French)

* New translations messages.json (Greek)

* New translations messages.json (Spanish)

* New translations messages.json (Afrikaans)

* New translations messages.json (Belarusian)

* New translations messages.json (Bulgarian)

* New translations messages.json (Catalan)

* New translations messages.json (Czech)

* New translations messages.json (Danish)

* New translations messages.json (German)

* New translations messages.json (Finnish)

* New translations messages.json (Russian)

* New translations messages.json (Hebrew)

* New translations messages.json (Hungarian)

* New translations messages.json (Italian)

* New translations messages.json (Japanese)

* New translations messages.json (Korean)

* New translations messages.json (Dutch)

* New translations messages.json (Polish)

* New translations messages.json (Portuguese)

* New translations messages.json (English, India)

.editorconfig

@@ -1,4 +1,4 @@
-# EditorConfig is awesome: http://EditorConfig.org
+# EditorConfig is awesome: https://EditorConfig.org
 
 # top-most EditorConfig file
 root = true
@@ -13,3 +13,6 @@ insert_final_newline = true
 charset = utf-8
 indent_style = space
 indent_size = 4
+
+[*.{ts}]
+quote_type = single

.github/workflows/build.yml

@@ -0,0 +1,168 @@
+name: build
+
+on:
+  push:
+    branches-ignore:
+      - 'l10n_master'
+      - 'gh-pages'
+  release:
+    types:
+      - published
+
+jobs:
+  cloc:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Set up cloc
+        run: |
+          sudo apt update
+          sudo apt -y install cloc
+
+      - name: Print lines of code
+        run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
+
+  ubuntu:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+
+      - name: Print environment
+        run: |
+          whoami
+          node --version
+          npm --version
+          gulp --version
+          docker --version
+          echo "GitHub ref: $GITHUB_REF"
+          echo "GitHub event: $GITHUB_EVENT"
+        env:
+          GITHUB_REF: ${{ github.ref }}
+          GITHUB_EVENT: ${{ github.event_name }}
+
+      - name: Log into docker
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run:  echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+        env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Setup Docker Trust
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run: |
+          mkdir -p ~/.docker/trust/private
+
+          echo "${{ secrets.DOCKER_DELEGATION_KEY }}" > ~/.docker/trust/private/$DOCKER_DELEGATION_KEY_ID.key
+          echo "${{ secrets.DOCKER_REPO_WEB_KEY }}" > ~/.docker/trust/private/$DOCKER_WEB_KEY_ID.key
+        env:
+          DOCKER_DELEGATION_KEY_ID: "5702b22123e058cbd96a7a43000cb981ae98ef3f2f4aa34138ab3dc1d011e446"
+          DOCKER_WEB_KEY_ID: "0f88641697187f42a31b584897cd4edfe80360a5209122d9e7f71af17a6422e4"
+
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Restore
+        run: dotnet tool restore
+
+      - name: Build
+        run: |
+          chmod +x ./build.sh
+          ./build.sh
+
+      - name: Tag dev
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run: ./build.sh tag dev
+
+      - name: Tag beta
+        if: github.event_name == 'release'
+        run: ./build.sh tag beta
+
+      - name: Tag version
+        if: github.event_name == 'release'
+        run: ./build.sh tag $($env:RELEASE_TAG_NAME.trimStart('v'))
+        shell: pwsh
+        env:
+          RELEASE_TAG_NAME: ${{ github.event.release.tag_name }}
+
+      - name: List docker images
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run: docker images
+
+      - name: Push dev images
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run: ./build.sh push dev
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ secrets.DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE }}
+
+      - name: Push beta images
+        if: github.event_name == 'release'
+        run: ./build.sh push beta
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ secrets.DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE }}
+
+      - name: Push latest images
+        if: github.event_name == 'release'
+        run: ./build.sh push latest
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ secrets.DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE }}
+
+      - name: Push version images
+        if: github.event_name == 'release'
+        run: ./build.sh push $($env:RELEASE_TAG_NAME.trimStart('v'))
+        shell: pwsh
+        env:
+          RELEASE_TAG_NAME: ${{ github.event.release.tag_name }}
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ secrets.DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE }}
+
+      - name: Log out of docker
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release'
+        run: docker logout
+
+  windows:
+    runs-on: windows-latest
+    steps:
+      - name: Set up NuGet
+        uses: nuget/setup-nuget@v1
+        with:
+          nuget-version: 'latest'
+
+      - name: Set up MSBuild
+        uses: microsoft/setup-msbuild@v1
+
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+
+      - name: Print environment
+        run: |
+          nuget help
+          msbuild -version
+          dotnet --info
+          node --version
+          npm --version
+          Write-Output "GitHub ref: $env:GITHUB_REF"
+          Write-Output "GitHub event: $env:GITHUB_EVENT"
+        shell: pwsh
+        env:
+          GITHUB_REF: ${{ github.ref }}
+          GITHUB_EVENT: ${{ github.event_name }}
+
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: npm install
+        run: npm install
+
+      - name: npm build
+        run: npm run build:prod
+

CONTRIBUTING.md

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

README.md

@@ -27,6 +27,8 @@
 
 ### Run the app
 
+For local development, run the app with:
+
 ```
 npm install
 npm run build:watch
@@ -39,6 +41,7 @@ await apiService.setUrls({
     base: isDev ? null : window.location.origin,
     api: isDev ? 'http://mylocalapi' : null,
     identity: isDev ? 'http://mylocalidentity' : null,
+    events: isDev ? 'http://mylocalevents' : null,
 });
 ```
 
@@ -49,9 +52,31 @@ await apiService.setUrls({
     base: null,
     api: 'https://api.bitwarden.com',
     identity: 'https://identity.bitwarden.com',
+    events: 'https://events.bitwarden.com',
 });
 ```
 
+And note to run the app with:
+
+```
+npm install
+npm run build:prod:watch
+```
+
+## Common Issues:
+
+### CORS
+
+If you run the frontend and receive a notification after attempting to login that says:
+```
+An error has occurred.
+NetworkError when attempting to fetch resource.
+```
+And in the console:
+```
+Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.bitwarden.com/accounts/prelogin. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
+```
+This means that you are having a CORS header issue. This can be mitigated by using a CORS header changing extension in your browser such as [this one.](https://mybrowseraddon.com/access-control-allow-origin.html)
 
 ## Contribute
 

crowdin.yml

@@ -9,3 +9,4 @@ files:
         zh-CN: zh_CN
         zh-TW: zh_TW
         en-GB: en_GB
+        en-IN: en_IN

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden-web",
-  "version": "2.16.0",
+  "version": "2.17.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1552,6 +1552,11 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden-web",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {
@@ -80,6 +80,7 @@
     "big-integer": "1.6.36",
     "bootstrap": "4.3.1",
     "braintree-web-drop-in": "1.13.0",
+    "browser-process-hrtime": "1.0.0",
     "core-js": "2.6.2",
     "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git#410a9186cc34663c4913b17d6528067cd3331f1d",
     "font-awesome": "4.7.0",

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

@@ -0,0 +1,34 @@
+<div class="mt-5 d-flex justify-content-center" *ngIf="loading">
+    <div>
+        <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
+        <p class="text-center">
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </p>
+    </div>
+</div>
+<div class="container" *ngIf="!loading && !authed">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'emergencyAccess' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body">
+                    <p class="text-center">
+                        {{name}}
+                    </p>
+                    <p>{{'acceptEmergencyAccess' | i18n}}</p>
+                    <hr>
+                    <div class="d-flex">
+                        <a routerLink="/" [queryParams]="{email: email}" class="btn btn-primary btn-block">
+                            {{'logIn' | i18n}}
+                        </a>
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-primary btn-block ml-2 mt-0">
+                            {{'createAccount' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,93 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import {
+    Toast,
+    ToasterService,
+} from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { StateService } from 'jslib/abstractions/state.service';
+import { UserService } from 'jslib/abstractions/user.service';
+import { EmergencyAccessAcceptRequest } from 'jslib/models/request/emergencyAccessAcceptRequest';
+
+@Component({
+    selector: 'app-accept-emergency',
+    templateUrl: 'accept-emergency.component.html',
+})
+export class AcceptEmergencyComponent implements OnInit {
+    loading = true;
+    authed = false;
+    name: string;
+    email: string;
+    actionPromise: Promise<any>;
+
+    constructor(private router: Router, private toasterService: ToasterService,
+        private i18nService: I18nService, private route: ActivatedRoute,
+        private apiService: ApiService, private userService: UserService,
+        private stateService: StateService) { }
+
+    ngOnInit() {
+        let fired = false;
+        this.route.queryParams.subscribe(async (qParams) => {
+            if (fired) {
+                return;
+            }
+            fired = true;
+            await this.stateService.remove('emergencyInvitation');
+            let error = qParams.id == null || qParams.name == null || qParams.email == null || qParams.token == null;
+            let errorMessage: string = null;
+            if (!error) {
+                this.authed = await this.userService.isAuthenticated();
+                if (this.authed) {
+                    const request = new EmergencyAccessAcceptRequest();
+                    request.token = qParams.token;
+                    try {
+                        this.actionPromise = this.apiService.postEmergencyAccessAccept(qParams.id, request);
+                        await this.actionPromise;
+                        const toast: Toast = {
+                            type: 'success',
+                            title: this.i18nService.t('inviteAccepted'),
+                            body: this.i18nService.t('emergencyInviteAcceptedDesc'),
+                            timeout: 10000,
+                        };
+                        this.toasterService.popAsync(toast);
+                        this.router.navigate(['/vault']);
+                    } catch (e) {
+                        error = true;
+                        errorMessage = e.message;
+                    }
+                } else {
+                    await this.stateService.save('emergencyInvitation', qParams);
+                    this.email = qParams.email;
+                    this.name = qParams.name;
+                    if (this.name != null) {
+                        // Fix URL encoding of space issue with Angular
+                        this.name = this.name.replace(/\+/g, ' ');
+                    }
+                }
+            }
+
+            if (error) {
+                const toast: Toast = {
+                    type: 'error',
+                    title: null,
+                    body: errorMessage != null ? this.i18nService.t('emergencyInviteAcceptFailedShort', errorMessage) :
+                        this.i18nService.t('emergencyInviteAcceptFailed'),
+                    timeout: 10000,
+                };
+                this.toasterService.popAsync(toast);
+                this.router.navigate(['/']);
+            }
+
+            this.loading = false;
+        });
+    }
+}

src/app/accounts/login.component.ts

@@ -52,9 +52,12 @@ export class LoginComponent extends BaseLoginComponent {
     }
 
     async goAfterLogIn() {
-        const invite = await this.stateService.get<any>('orgInvitation');
-        if (invite != null) {
-            this.router.navigate(['accept-organization'], { queryParams: invite });
+        const orgInvite = await this.stateService.get<any>('orgInvitation');
+        const emergencyInvite = await this.stateService.get<any>('emergencyInvitation');
+        if (orgInvite != null) {
+            this.router.navigate(['accept-organization'], { queryParams: orgInvite });
+        } else if (emergencyInvite != null) {
+            this.router.navigate(['accept-emergency'], { queryParams: emergencyInvite });
         } else {
             const loginRedirect = await this.stateService.get<any>('loginRedirect');
             if (loginRedirect != null) {

src/app/accounts/register.component.html

@@ -25,8 +25,8 @@
                                 </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
+                                "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>
@@ -44,14 +44,15 @@
                         <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">
+                                <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">
+                                        required [appAutofocus]="email === ''" inputmode="email"
+                                        appInputVerbatim="false">
                                     <small class="form-text text-muted">{{'emailAddressDesc' | i18n}}</small>
                                 </div>
                                 <div class="form-group">
@@ -120,6 +121,19 @@
                                     <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
                                     <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
                                 </div>
+                                <div class="form-group" *ngIf="showTerms">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" id="acceptPolicies"
+                                            [(ngModel)]="acceptPolicies" name="AcceptPolicies">
+                                        <label class="form-check-label small text-muted" for="acceptPolicies">
+                                            {{'acceptPolicies' | i18n}}<br>
+                                            <a href="https://bitwarden.com/terms/" target="_blank"
+                                                rel="noopener">{{'termsOfService' | i18n}}</a>,
+                                            <a href="https://bitwarden.com/privacy/" target="_blank"
+                                                rel="noopener">{{'privacyPolicy' | i18n}}</a>
+                                        </label>
+                                    </div>
+                                </div>
                                 <hr>
                                 <div class="d-flex mb-2">
                                     <button type="submit" class="btn btn-primary btn-block btn-submit"
@@ -132,13 +146,6 @@
                                         {{'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>

src/app/accounts/register.component.ts

@@ -27,7 +27,6 @@ import { ReferenceEventRequest } from 'jslib/models/request/referenceEventReques
 })
 export class RegisterComponent extends BaseRegisterComponent {
     showCreateOrgMessage = false;
-    showTerms = true;
     layout = '';
     enforcedPolicyOptions: MasterPasswordPolicyOptions;
 
@@ -40,7 +39,6 @@ export class RegisterComponent extends BaseRegisterComponent {
         passwordGenerationService: PasswordGenerationService, private policyService: PolicyService) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
             passwordGenerationService);
-        this.showTerms = !platformUtilsService.isSelfHost();
     }
 
     getPasswordScoreAlertDisplay() {

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

@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
@@ -24,8 +27,8 @@ export class SetPasswordComponent extends BaseSetPasswordComponent {
         cryptoService: CryptoService, messagingService: MessagingService,
         userService: UserService, passwordGenerationService: PasswordGenerationService,
         platformUtilsService: PlatformUtilsService, policyService: PolicyService, router: Router,
-        syncService: SyncService) {
+        syncService: SyncService, route: ActivatedRoute) {
         super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
-            platformUtilsService, policyService, router, apiService, syncService);
+            platformUtilsService, policyService, router, apiService, syncService, route);
     }
 }

src/app/accounts/sso.component.ts

@@ -53,6 +53,9 @@ export class SsoComponent extends BaseSsoComponent {
 
     async submit() {
         await this.storageService.save(IdentifierStorageKey, this.identifier);
+        if (this.clientId === 'browser') {
+            document.cookie = `ssoHandOffMessage=${this.i18nService.t('ssoHandOff')};SameSite=strict`;
+        }
         super.submit();
     }
 }

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

@@ -5,7 +5,10 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 
-import { Router } from '@angular/router';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
 
 import { TwoFactorOptionsComponent } from './two-factor-options.component';
 
@@ -34,9 +37,9 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, stateService: StateService,
         environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
-        storageService: StorageService) {
+        storageService: StorageService, route: ActivatedRoute) {
         super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
-            stateService, storageService);
+            stateService, storageService, route);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
@@ -66,7 +69,11 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
                 this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
                 await this.stateService.remove('loginRedirect');
             } else {
-                this.router.navigate([this.successRoute]);
+                this.router.navigate([this.successRoute], {
+                    queryParams: {
+                        identifier: this.identifier,
+                    },
+                });
             }
         }
     }

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
 import { OrganizationLayoutComponent } from './layouts/organization-layout.component';
 import { UserLayoutComponent } from './layouts/user-layout.component';
 
+import { AcceptEmergencyComponent } from './accounts/accept-emergency.component';
 import { AcceptOrganizationComponent } from './accounts/accept-organization.component';
 import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
@@ -57,6 +58,9 @@ import {
 
 import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';
 
+import { AccessComponent } from './send/access.component';
+import { SendComponent } from './send/send.component';
+
 import { AccountComponent } from './settings/account.component';
 import { CreateOrganizationComponent } from './settings/create-organization.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
@@ -87,7 +91,10 @@ import { UnauthGuardService } from './services/unauth-guard.service';
 
 import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
 
-import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { Permissions } from 'jslib/enums/permissions';
+
+import { EmergencyAccessViewComponent } from './settings/emergency-access-view.component';
+import { EmergencyAccessComponent } from './settings/emergency-access.component';
 
 const routes: Routes = [
     {
@@ -122,6 +129,11 @@ const routes: Routes = [
                 component: AcceptOrganizationComponent,
                 data: { titleId: 'joinOrganization' },
             },
+            {
+                path: 'accept-emergency',
+                component: AcceptEmergencyComponent,
+                data: { titleId: 'acceptEmergency' },
+            },
             { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
             {
                 path: 'recover-2fa',
@@ -141,6 +153,11 @@ const routes: Routes = [
                 canActivate: [UnauthGuardService],
                 data: { titleId: 'deleteAccount' },
             },
+            /*{
+                path: 'send/:sendId/:key',
+                component: AccessComponent,
+                data: { title: 'Bitwarden Send' },
+            },*/
         ],
     },
     {
@@ -149,6 +166,7 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         children: [
             { path: 'vault', component: VaultComponent, data: { titleId: 'myVault' } },
+            { path: 'sends', component: SendComponent, data: { title: 'Send' } },
             {
                 path: 'settings',
                 component: SettingsComponent,
@@ -171,6 +189,21 @@ const routes: Routes = [
                         component: CreateOrganizationComponent,
                         data: { titleId: 'newOrganization' },
                     },
+                    {
+                        path: 'emergency-access',
+                        children: [
+                            {
+                                path: '',
+                                component: EmergencyAccessComponent,
+                                data: { titleId: 'emergencyAccess'},
+                            },
+                            {
+                                path: ':id',
+                                component: EmergencyAccessViewComponent,
+                                data: { titleId: 'emergencyAccess'},
+                            },
+                        ],
+                    },
                 ],
             },
             {
@@ -227,35 +260,75 @@ const routes: Routes = [
                 path: 'tools',
                 component: OrgToolsComponent,
                 canActivate: [OrganizationTypeGuardService],
-                data: { allowedTypes: [OrganizationUserType.Owner, OrganizationUserType.Admin] },
+                data: { permissions: [Permissions.AccessImportExport, Permissions.AccessReports] },
                 children: [
-                    { path: '', pathMatch: 'full', redirectTo: 'import' },
-                    { path: 'import', component: OrgImportComponent, data: { titleId: 'importData' } },
-                    { path: 'export', component: OrgExportComponent, data: { titleId: 'exportVault' } },
+                    {
+                        path: '',
+                        pathMatch: 'full',
+                        redirectTo: 'import',
+                    },
+                    {
+                        path: 'import',
+                        component: OrgImportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'importData',
+                            permissions: [Permissions.AccessImportExport],
+                        },
+                    },
+                    {
+                        path: 'export',
+                        component: OrgExportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'exportVault',
+                            permissions: [Permissions.AccessImportExport],
+                        },
+                    },
                     {
                         path: 'exposed-passwords-report',
                         component: OrgExposedPasswordsReportComponent,
-                        data: { titleId: 'exposedPasswordsReport' },
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'exposedPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
                     },
                     {
                         path: 'inactive-two-factor-report',
                         component: OrgInactiveTwoFactorReportComponent,
-                        data: { titleId: 'inactive2faReport' },
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'inactive2faReport',
+                            permissions: [Permissions.AccessReports],
+                        },
                     },
                     {
                         path: 'reused-passwords-report',
                         component: OrgReusedPasswordsReportComponent,
-                        data: { titleId: 'reusedPasswordsReport' },
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'reusedPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
                     },
                     {
                         path: 'unsecured-websites-report',
                         component: OrgUnsecuredWebsitesReportComponent,
-                        data: { titleId: 'unsecuredWebsitesReport' },
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'unsecuredWebsitesReport',
+                            permissions: [Permissions.AccessReports],
+                        },
                     },
                     {
                         path: 'weak-passwords-report',
                         component: OrgWeakPasswordsReportComponent,
-                        data: { titleId: 'weakPasswordsReport' },
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'weakPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
                     },
                 ],
             },
@@ -264,26 +337,73 @@ const routes: Routes = [
                 component: OrgManageComponent,
                 canActivate: [OrganizationTypeGuardService],
                 data: {
-                    allowedTypes: [
-                        OrganizationUserType.Owner,
-                        OrganizationUserType.Admin,
-                        OrganizationUserType.Manager,
+                    permissions: [
+                        Permissions.ManageAssignedCollections,
+                        Permissions.ManageAllCollections,
+                        Permissions.AccessEventLogs,
+                        Permissions.ManageGroups,
+                        Permissions.ManageUsers,
+                        Permissions.ManagePolicies,
                     ],
                 },
                 children: [
-                    { path: '', pathMatch: 'full', redirectTo: 'people' },
-                    { path: 'collections', component: OrgManageCollectionsComponent, data: { titleId: 'collections' } },
-                    { 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' } },
+                    {
+                        path: '',
+                        pathMatch: 'full',
+                        redirectTo: 'people',
+                    },
+                    {
+                        path: 'collections',
+                        component: OrgManageCollectionsComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'collections',
+                            permissions: [Permissions.ManageAssignedCollections, Permissions.ManageAllCollections],
+                        },
+                    },
+                    {
+                        path: 'events',
+                        component: OrgEventsComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'eventLogs',
+                            permissions: [Permissions.AccessEventLogs],
+                        },
+                    },
+                    {
+                        path: 'groups',
+                        component: OrgGroupsComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'groups',
+                            permissions: [Permissions.ManageGroups],
+                        },
+                    },
+                    {
+                        path: 'people',
+                        component: OrgPeopleComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'people',
+                            permissions: [Permissions.ManageUsers],
+                        },
+                    },
+                    {
+                        path: 'policies',
+                        component: OrgPoliciesComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'policies',
+                            permissions: [Permissions.ManagePolicies],
+                        },
+                    },
                 ],
             },
             {
                 path: 'settings',
                 component: OrgSettingsComponent,
                 canActivate: [OrganizationTypeGuardService],
-                data: { allowedTypes: [OrganizationUserType.Owner] },
+                data: { permissions: [Permissions.ManageOrganization] },
                 children: [
                     { path: '', pathMatch: 'full', redirectTo: 'account' },
                     { path: 'account', component: OrgAccountComponent, data: { titleId: 'myOrganization' } },
@@ -308,6 +428,7 @@ const routes: Routes = [
 @NgModule({
     imports: [RouterModule.forRoot(routes, {
         useHash: true,
+        paramsInheritanceStrategy: 'always',
         /*enableTracing: true,*/
     })],
     exports: [RouterModule],

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import * as jq from 'jquery';
-import Swal from 'sweetalert2/src/sweetalert2.js';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
 
 import {
     BodyOutputType,

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { NavbarComponent } from './layouts/navbar.component';
 import { OrganizationLayoutComponent } from './layouts/organization-layout.component';
 import { UserLayoutComponent } from './layouts/user-layout.component';
 
+import { AcceptEmergencyComponent } from './accounts/accept-emergency.component';
 import { AcceptOrganizationComponent } from './accounts/accept-organization.component';
 import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
@@ -60,13 +61,11 @@ import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/m
 
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
-import { ApiKeyComponent as OrgApiKeyComponent } from './organizations/settings/api-key.component';
 import { ChangePlanComponent } from './organizations/settings/change-plan.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
 import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
 import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
-import { RotateApiKeyComponent as OrgRotateApiKeyComponent } from './organizations/settings/rotate-api-key.component';
 import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
 import {
     TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
@@ -98,10 +97,15 @@ import { CollectionsComponent as OrgCollectionsComponent } from './organizations
 import { GroupingsComponent as OrgGroupingsComponent } from './organizations/vault/groupings.component';
 import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';
 
+import { AccessComponent } from './send/access.component';
+import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
+import { SendComponent } from './send/send.component';
+
 import { AccountComponent } from './settings/account.component';
 import { AddCreditComponent } from './settings/add-credit.component';
 import { AdjustPaymentComponent } from './settings/adjust-payment.component';
 import { AdjustStorageComponent } from './settings/adjust-storage.component';
+import { ApiKeyComponent } from './settings/api-key.component';
 import { ChangeEmailComponent } from './settings/change-email.component';
 import { ChangeKdfComponent } from './settings/change-kdf.component';
 import { ChangePasswordComponent } from './settings/change-password.component';
@@ -109,6 +113,12 @@ 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 { EmergencyAccessAddEditComponent } from './settings/emergency-access-add-edit.component';
+import { EmergencyAccessComponent } from './settings/emergency-access.component';
+import { EmergencyAccessConfirmComponent } from './settings/emergency-access-confirm.component';
+import { EmergencyAccessTakeoverComponent } from './settings/emergency-access-takeover.component';
+import { EmergencyAccessViewComponent } from './settings/emergency-access-view.component';
+import { EmergencyAddEditComponent } from './settings/emergency-add-edit.component';
 import { LinkSsoComponent } from './settings/link-sso.component';
 import { OptionsComponent } from './settings/options.component';
 import { OrganizationPlansComponent } from './settings/organization-plans.component';
@@ -179,7 +189,10 @@ import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe';
 import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
 
-import { registerLocaleData } from '@angular/common';
+import {
+    registerLocaleData,
+    DatePipe,
+} from '@angular/common';
 import localeCa from '@angular/common/locales/ca';
 import localeCs from '@angular/common/locales/cs';
 import localeDa from '@angular/common/locales/da';
@@ -193,6 +206,8 @@ import localeHe from '@angular/common/locales/he';
 import localeIt from '@angular/common/locales/it';
 import localeJa from '@angular/common/locales/ja';
 import localeKo from '@angular/common/locales/ko';
+import localeLv from '@angular/common/locales/lv';
+import localeMl from '@angular/common/locales/ml';
 import localeNb from '@angular/common/locales/nb';
 import localeNl from '@angular/common/locales/nl';
 import localePl from '@angular/common/locales/pl';
@@ -218,6 +233,8 @@ registerLocaleData(localeHe, 'he');
 registerLocaleData(localeIt, 'it');
 registerLocaleData(localeJa, 'ja');
 registerLocaleData(localeKo, 'ko');
+registerLocaleData(localeLv, 'lv');
+registerLocaleData(localeMl, 'ml');
 registerLocaleData(localeNb, 'nb');
 registerLocaleData(localeNl, 'nl');
 registerLocaleData(localePl, 'pl');
@@ -248,6 +265,8 @@ registerLocaleData(localeZhTw, 'zh-TW');
     ],
     declarations: [
         A11yTitleDirective,
+        AcceptEmergencyComponent,
+        AccessComponent,
         AcceptOrganizationComponent,
         AccountComponent,
         SetPasswordComponent,
@@ -257,6 +276,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         AdjustSeatsComponent,
         AdjustStorageComponent,
         ApiActionDirective,
+        ApiKeyComponent,
         AppComponent,
         AttachmentsComponent,
         AutofocusDirective,
@@ -283,6 +303,12 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DeleteOrganizationComponent,
         DomainRulesComponent,
         DownloadLicenseComponent,
+        EmergencyAccessAddEditComponent,
+        EmergencyAccessComponent,
+        EmergencyAccessConfirmComponent,
+        EmergencyAccessTakeoverComponent,
+        EmergencyAccessViewComponent,
+        EmergencyAddEditComponent,
         ExportComponent,
         ExposedPasswordsReportComponent,
         FallbackSrcDirective,
@@ -304,7 +330,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         OptionsComponent,
         OrgAccountComponent,
         OrgAddEditComponent,
-        OrgApiKeyComponent,
         OrganizationBillingComponent,
         OrganizationPlansComponent,
         OrganizationSubscriptionComponent,
@@ -328,7 +353,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         OrgPolicyEditComponent,
         OrgPoliciesComponent,
         OrgReusedPasswordsReportComponent,
-        OrgRotateApiKeyComponent,
         OrgSettingComponent,
         OrgToolsComponent,
         OrgTwoFactorSetupComponent,
@@ -354,6 +378,8 @@ registerLocaleData(localeZhTw, 'zh-TW');
         SearchCiphersPipe,
         SearchPipe,
         SelectCopyDirective,
+        SendAddEditComponent,
+        SendComponent,
         SettingsComponent,
         ShareComponent,
         SsoComponent,
@@ -386,6 +412,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
     ],
     entryComponents: [
         AddEditComponent,
+        ApiKeyComponent,
         AttachmentsComponent,
         BulkActionsComponent,
         BulkDeleteComponent,
@@ -396,10 +423,13 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DeauthorizeSessionsComponent,
         DeleteAccountComponent,
         DeleteOrganizationComponent,
+        EmergencyAccessAddEditComponent,
+        EmergencyAccessConfirmComponent,
+        EmergencyAccessTakeoverComponent,
+        EmergencyAddEditComponent,
         FolderAddEditComponent,
         ModalComponent,
         OrgAddEditComponent,
-        OrgApiKeyComponent,
         OrgAttachmentsComponent,
         OrgCollectionAddEditComponent,
         OrgCollectionsComponent,
@@ -407,12 +437,12 @@ registerLocaleData(localeZhTw, 'zh-TW');
         OrgEntityUsersComponent,
         OrgGroupAddEditComponent,
         OrgPolicyEditComponent,
-        OrgRotateApiKeyComponent,
         OrgUserAddEditComponent,
         OrgUserConfirmComponent,
         OrgUserGroupsComponent,
         PasswordGeneratorHistoryComponent,
         PurgeVaultComponent,
+        SendAddEditComponent,
         ShareComponent,
         TwoFactorAuthenticatorComponent,
         TwoFactorDuoComponent,
@@ -423,7 +453,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         TwoFactorYubiKeyComponent,
         UpdateKeyComponent,
     ],
-    providers: [],
+    providers: [DatePipe],
     bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/layouts/navbar.component.html

@@ -8,6 +8,9 @@
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
                 </li>
+                <!--<li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/sends">Send</a>
+                </li>-->
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
                 </li>

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

@@ -15,21 +15,21 @@
                     </div>
                 </div>
             </div>
-            <ul class="nav nav-tabs" *ngIf="organization.isManager">
+            <ul class="nav nav-tabs" *ngIf="showMenuBar">
                 <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">
+                <li class="nav-item" *ngIf="showManageTab">
+                    <a class="nav-link" [routerLink]="manageRoute" 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">
+                <li class="nav-item" *ngIf="showToolsTab">
+                    <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
                         <i class="fa fa-wrench" aria-hidden="true"></i>
                         {{'tools' | i18n}}
                     </a>
@@ -43,10 +43,10 @@
             </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}}"
+            <button class="btn btn-primary" (click)="goToBusinessPortal()" #businessBtn
+                [appApiAction]="businessTokenPromise" *ngIf="showBusinessPortalButton">
+                <i class="fa fa-bank fa-fw" [hidden]="businessBtn.loading" aria-hidden="true"></i>
+                <i class="fa fa-spinner fa-spin fa-fw" [hidden]="!businessBtn.loading" title="{{'loading' | i18n}}"
                     aria-hidden="true"></i>
                 {{'businessPortal' | i18n}} →
             </button>

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

@@ -24,9 +24,9 @@ const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     organization: Organization;
-    enterpriseTokenPromise: Promise<any>;
+    businessTokenPromise: Promise<any>;
     private organizationId: string;
-    private enterpriseUrl: string;
+    private businessUrl: string;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
         private broadcasterService: BroadcasterService, private ngZone: NgZone,
@@ -34,11 +34,11 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
         private environmentService: EnvironmentService) { }
 
     ngOnInit() {
-        this.enterpriseUrl = 'https://portal.bitwarden.com';
+        this.businessUrl = 'https://portal.bitwarden.com';
         if (this.environmentService.enterpriseUrl != null) {
-            this.enterpriseUrl = this.environmentService.enterpriseUrl;
+            this.businessUrl = this.environmentService.enterpriseUrl;
         } else if (this.environmentService.baseUrl != null) {
-            this.enterpriseUrl = this.environmentService.baseUrl + '/portal';
+            this.businessUrl = this.environmentService.baseUrl + '/portal';
         }
 
         document.body.classList.remove('layout_frontend');
@@ -65,19 +65,68 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
         this.organization = await this.userService.getOrganization(this.organizationId);
     }
 
-    async goToEnterprisePortal() {
-        if (this.enterpriseTokenPromise != null) {
+    async goToBusinessPortal() {
+        if (this.businessTokenPromise != null) {
             return;
         }
         try {
-            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
-            const token = await this.enterpriseTokenPromise;
+            this.businessTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.businessTokenPromise;
             if (token != null) {
                 const userId = await this.userService.getUserId();
-                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                this.platformUtilsService.launchUri(this.businessUrl + '/login?userId=' + userId +
                     '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organization.id);
             }
         } catch { }
-        this.enterpriseTokenPromise = null;
+        this.businessTokenPromise = null;
+    }
+
+    get showMenuBar() {
+        return this.showManageTab || this.showToolsTab || this.organization.isOwner;
+    }
+
+    get showManageTab(): boolean {
+        return this.organization.canManageUsers ||
+            this.organization.canManageAssignedCollections ||
+            this.organization.canManageAllCollections ||
+            this.organization.canManageGroups ||
+            this.organization.canManagePolicies ||
+            this.organization.canAccessEventLogs;
+    }
+
+    get showToolsTab(): boolean {
+        return this.organization.canAccessImportExport || this.organization.canAccessReports;
+    }
+
+    get showBusinessPortalButton(): boolean {
+        return this.organization.useBusinessPortal && this.organization.canAccessBusinessPortal;
+    }
+
+    get toolsRoute(): string {
+        return this.organization.canAccessImportExport ?
+            'tools/import' :
+            'tools/exposed-passwords-report';
+    }
+
+    get manageRoute(): string {
+        let route: string;
+        switch (true) {
+            case this.organization.canManageUsers:
+                route = 'manage/people';
+                break;
+            case this.organization.canManageAssignedCollections || this.organization.canManageAllCollections:
+                route = 'manage/collections';
+                break;
+            case this.organization.canManageGroups:
+                route = 'manage/groups';
+                break;
+            case this.organization.canManagePolicies:
+                route = 'manage/policies';
+                break;
+            case this.organization.canAccessEventLogs:
+                route = 'manage/events';
+                break;
+        }
+        return route;
     }
 }

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

@@ -14,7 +14,8 @@
             <div class="modal-body" *ngIf="!loading">
                 <div class="form-group">
                     <label for="name">{{'name' | i18n}}</label>
-                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
+                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required
+                        appAutofocus>
                 </div>
                 <div class="form-group">
                     <label for="externalId">{{'externalId' | i18n}}</label>

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

@@ -72,7 +72,7 @@ export class CollectionsComponent implements OnInit {
     async load() {
         const organization = await this.userService.getOrganization(this.organizationId);
         let response: ListResponse<CollectionResponse>;
-        if (organization.isAdmin) {
+        if (organization.canManageAllCollections) {
             response = await this.apiService.getCollections(this.organizationId);
         } else {
             response = await this.apiService.getUserCollections();

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

@@ -86,6 +86,7 @@
                                     <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
                                     <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
                                     <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                                    <span *ngIf="u.type === organizationUserType.Custom">{{'custom' | i18n}}</span>
                                 </td>
                                 <td class="text-center" *ngIf="entity === 'collection'">
                                     <input type="checkbox" [(ngModel)]="u.hidePasswords"

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

@@ -5,22 +5,23 @@
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
                     <a routerLink="people" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.isAdmin">
+                        *ngIf="organization.canManageUsers">
                         {{'people' | i18n}}
                     </a>
-                    <a routerLink="collections" class="list-group-item" routerLinkActive="active">
+                    <a routerLink="collections" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.canManageAssignedCollections || organization.canManageAllCollections">
                         {{'collections' | i18n}}
                     </a>
                     <a routerLink="groups" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.isAdmin && accessGroups">
+                        *ngIf="organization.canManageGroups && accessGroups">
                         {{'groups' | i18n}}
                     </a>
                     <a routerLink="policies" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.isAdmin && accessPolicies">
+                        *ngIf="organization.canManagePolicies && accessPolicies">
                         {{'policies' | i18n}}
                     </a>
                     <a routerLink="events" class="list-group-item" routerLinkActive="active"
-                        *ngIf="organization.isAdmin && accessEvents">
+                        *ngIf="organization.canAccessEventLogs && accessEvents">
                         {{'eventLogs' | i18n}}
                     </a>
                 </div>

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

@@ -69,6 +69,7 @@
                         <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
                         <span *ngIf="u.type === organizationUserType.Manager">{{'manager' | i18n}}</span>
                         <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                        <span *ngIf="u.type === organizationUserType.Custom">{{'custom' | i18n}}</span>
                     </td>
                     <td class="table-list-options">
                         <div class="dropdown" appListDropdown>

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

@@ -79,7 +79,7 @@ export class PeopleComponent implements OnInit {
         this.route.parent.parent.params.subscribe(async (params) => {
             this.organizationId = params.organizationId;
             const organization = await this.userService.getOrganization(this.organizationId);
-            if (!organization.isAdmin) {
+            if (!organization.canManageUsers) {
                 this.router.navigate(['../collections'], { relativeTo: this.route });
                 return;
             }

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

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

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

@@ -13,6 +13,7 @@ import {
 import { PolicyType } from 'jslib/enums/policyType';
 
 import { ApiService } from 'jslib/abstractions/api.service';
+import { EnvironmentService } from 'jslib/abstractions';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
@@ -34,6 +35,12 @@ export class PoliciesComponent implements OnInit {
     organizationId: string;
     policies: any[];
 
+    // Remove when removing deprecation warning
+    enterpriseTokenPromise: Promise<any>;
+    userCanAccessBusinessPortal = false;
+
+    private enterpriseUrl: string;
+
     private modal: ModalComponent = null;
     private orgPolicies: PolicyResponse[];
     private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
@@ -41,28 +48,7 @@ export class PoliciesComponent implements OnInit {
     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,
-            },
-        ];
-    }
+        private router: Router, private environmentService: EnvironmentService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
@@ -72,8 +58,83 @@ export class PoliciesComponent implements OnInit {
                 this.router.navigate(['/organizations', this.organizationId]);
                 return;
             }
+            this.userCanAccessBusinessPortal = organization.canAccessBusinessPortal;
+            this.policies = [
+                {
+                    name: this.i18nService.t('twoStepLogin'),
+                    description: this.i18nService.t('twoStepLoginPolicyDesc'),
+                    type: PolicyType.TwoFactorAuthentication,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('masterPass'),
+                    description: this.i18nService.t('masterPassPolicyDesc'),
+                    type: PolicyType.MasterPassword,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('passwordGenerator'),
+                    description: this.i18nService.t('passwordGeneratorPolicyDesc'),
+                    type: PolicyType.PasswordGenerator,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('singleOrg'),
+                    description: this.i18nService.t('singleOrgDesc'),
+                    type: PolicyType.SingleOrg,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('requireSso'),
+                    description: this.i18nService.t('requireSsoPolicyDesc'),
+                    type: PolicyType.RequireSso,
+                    enabled: false,
+                    display: organization.useSso,
+                },
+                {
+                    name: this.i18nService.t('personalOwnership'),
+                    description: this.i18nService.t('personalOwnershipPolicyDesc'),
+                    type: PolicyType.PersonalOwnership,
+                    enabled: false,
+                    display: true,
+                },
+            ];
             await this.load();
+
+            // Handle policies component launch from Event message
+            const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
+                if (qParams.policyId != null) {
+                    const policyIdFromEvents: string = qParams.policyId;
+                    for (const orgPolicy of this.orgPolicies) {
+                        if (orgPolicy.id === policyIdFromEvents) {
+                            for (let i = 0; i < this.policies.length; i++) {
+                                if (this.policies[i].type === orgPolicy.type) {
+                                    this.edit(this.policies[i]);
+                                    break;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
+            });
         });
+
+        // Remove when removing deprecation warning
+        this.enterpriseUrl = 'https://portal.bitwarden.com';
+        if (this.environmentService.enterpriseUrl != null) {
+            this.enterpriseUrl = this.environmentService.enterpriseUrl;
+        } else if (this.environmentService.baseUrl != null) {
+            this.enterpriseUrl = this.environmentService.baseUrl + '/portal';
+        }
     }
 
     async load() {
@@ -102,6 +163,7 @@ export class PoliciesComponent implements OnInit {
         childComponent.description = p.description;
         childComponent.type = p.type;
         childComponent.organizationId = this.organizationId;
+        childComponent.policiesEnabledMap = this.policiesEnabledMap;
         childComponent.onSavedPolicy.subscribe(() => {
             this.modal.close();
             this.load();
@@ -111,4 +173,22 @@ export class PoliciesComponent implements OnInit {
             this.modal = null;
         });
     }
+
+
+    // Remove when removing deprecation warning
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organizationId);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
 }

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

@@ -17,11 +17,26 @@
                     title="{{'warning' | i18n}}" icon="fa-warning">
                     {{'twoStepLoginPolicyWarning' | i18n}}
                 </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SingleOrg" title="{{'warning' | i18n}}"
+                    icon="fa-warning">
+                    {{'singleOrgPolicyWarning' | i18n}}
+                </app-callout>
+                <ng-container *ngIf="type === policyType.RequireSso">
+                    <app-callout type="tip" title="{{'prerequisite' | i18n}}">
+                        {{'requireSsoPolicyReq' | i18n}}
+                    </app-callout>
+                    <app-callout type="warning">
+                        {{'requireSsoExemption' | i18n}}
+                    </app-callout>
+                </ng-container>
+                <app-callout type="warning" *ngIf="type === policyType.PersonalOwnership">
+                    {{'personalOwnershipExemption' | i18n}}
+                </app-callout>
                 <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>
+                        <label class="form-check-label" for="enabled">{{checkboxDesc}}</label>
                     </div>
                 </div>
                 <ng-container *ngIf="type === policyType.MasterPassword">

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

@@ -27,6 +27,7 @@ export class PolicyEditComponent implements OnInit {
     @Input() description: string;
     @Input() type: PolicyType;
     @Input() organizationId: string;
+    @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
     @Output() onSavedPolicy = new EventEmitter();
 
     policyType = PolicyType;
@@ -127,45 +128,85 @@ export class PolicyEditComponent implements OnInit {
     }
 
     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;
+        if (this.preValidate()) {
+            const request = new PolicyRequest();
+            request.enabled = this.enabled;
+            request.type = this.type;
+            request.data = null;
+            switch (this.type) {
+                case PolicyType.PasswordGenerator:
+                    request.data = {
+                        defaultType: this.passGenDefaultType,
+                        minLength: this.passGenMinLength || null,
+                        useUpper: this.passGenUseUpper,
+                        useLower: this.passGenUseLower,
+                        useNumbers: this.passGenUseNumbers,
+                        useSpecial: this.passGenUseSpecial,
+                        minNumbers: this.passGenMinNumbers || null,
+                        minSpecial: this.passGenMinSpecial || null,
+                        minNumberWords: this.passGenMinNumberWords || null,
+                        capitalize: this.passGenCapitalize,
+                        includeNumber: this.passGenIncludeNumber,
+                    };
+                    break;
+                case PolicyType.MasterPassword:
+                    request.data = {
+                        minComplexity: this.masterPassMinComplexity || null,
+                        minLength: this.masterPassMinLength || null,
+                        requireUpper: this.masterPassRequireUpper,
+                        requireLower: this.masterPassRequireLower,
+                        requireNumbers: this.masterPassRequireNumbers,
+                        requireSpecial: this.masterPassRequireSpecial,
+                    };
+                    break;
+                default:
+                    break;
+            }
+            try {
+                this.formPromise = this.apiService.putPolicy(this.organizationId, this.type, request);
+                await this.formPromise;
+                this.analytics.eventTrack.next({ action: 'Edited Policy' });
+                this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.name));
+                this.onSavedPolicy.emit();
+            } catch { }
+        }
+    }
+
+    get checkboxDesc(): string {
+        return this.type === PolicyType.PersonalOwnership ? this.i18nService.t('personalOwnershipCheckboxDesc') :
+            this.i18nService.t('enabled');
+    }
+
+    private preValidate(): boolean {
+        switch (this.type) {
+            case PolicyType.RequireSso:
+                // Don't need prevalidation checks if submitting to disable
+                if (!this.enabled) {
+                    return true;
+                }
+                // Have SingleOrg policy enabled?
+                if (!(this.policiesEnabledMap.has(PolicyType.SingleOrg)
+                    && this.policiesEnabledMap.get(PolicyType.SingleOrg))) {
+                    this.toasterService.popAsync('error', null, this.i18nService.t('requireSsoPolicyReqError'));
+                    return false;
+                }
+                return true;
+
+            case PolicyType.SingleOrg:
+                // Don't need prevalidation checks if submitting to enable
+                if (this.enabled) {
+                    return true;
+                }
+                // If RequireSso Policy is enabled prevent submittal
+                if (this.policiesEnabledMap.has(PolicyType.RequireSso)
+                    && this.policiesEnabledMap.get(PolicyType.RequireSso)) {
+                    this.toasterService.popAsync('error', null, this.i18nService.t('disableRequireSsoError'));
+                    return false;
+                }
+                return true;
+
+            default:
+                return true;
         }
-        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

@@ -19,7 +19,8 @@
                     <p>{{'inviteUserDesc' | i18n}}</p>
                     <div class="form-group mb-4">
                         <label for="emails">{{'email' | i18n}}</label>
-                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required>
+                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required
+                            appAutoFocus>
                         <small class="text-muted">{{'inviteMultipleEmailDesc' | i18n : '20'}}</small>
                     </div>
                 </ng-container>
@@ -62,8 +63,127 @@
                         <small>{{'ownerDesc' | i18n}}</small>
                     </label>
                 </div>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="userTypeCustom"
+                        [value]="organizationUserType.Custom" [(ngModel)]="type">
+                    <label class="form-check-label" for="userTypeCustom">
+                        {{'custom' | i18n}}
+                        <small>{{'customDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <ng-container *ngIf="customUserTypeSelected">
+                    <h3 class="mt-4 d-flex">
+                        {{'permissions' | i18n}}
+                    </h3>
+                    <div class="row">
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="font-weight-bold mb-0">Manager Permissions</label>
+                                <hr class="my-0 mr-2" />
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageAssignedCollections"
+                                            id="manageAssignedCollections"
+                                            [(ngModel)]="permissions.manageAssignedCollections">
+                                        <label class="form-check-label font-weight-normal"
+                                            for="manageAssignedCollections">
+                                            {{'manageAssignedCollections' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-6">
+                            <div class="mb-3">
+                                <label class="font-weight-bold mb-0">Admin Permissions</label>
+                                <hr class="my-0 mr-2" />
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="accessBusinessPortal"
+                                            id="accessBusinessPortal" [(ngModel)]="permissions.accessBusinessPortal">
+                                        <label class="form-check-label font-weight-normal" for="accessBusinessPortal">
+                                            {{'accessBusinessPortal' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="accessEventLogs"
+                                            id="accessEventLogs" [(ngModel)]="permissions.accessEventLogs">
+                                        <label class="form-check-label font-weight-normal" for="accessEventLogs">
+                                            {{'accessEventLogs' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="accessImportExport"
+                                            id="accessImportExport" [(ngModel)]="permissions.accessImportExport">
+                                        <label class="form-check-label font-weight-normal" for="accessImportExport">
+                                            {{'accessImportExport' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="accessReports"
+                                            id="accessReports" [(ngModel)]="permissions.accessReports">
+                                        <label class="form-check-label font-weight-normal" for="accessReports">
+                                            {{'accessReports' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageAllCollections"
+                                            id="manageAllCollections" [(ngModel)]="permissions.manageAllCollections">
+                                        <label class="form-check-label font-weight-normal" for="manageAllCollections">
+                                            {{'manageAllCollections' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageGroups"
+                                            id="manageGroups" [(ngModel)]="permissions.manageGroups">
+                                        <label class="form-check-label font-weight-normal" for="manageGroups">
+                                            {{'manageGroups' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageSso"
+                                            id="managePolicies" [(ngModel)]="permissions.manageSso">
+                                        <label class="form-check-label font-weight-normal" for="manageSso">
+                                            {{'manageSso' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="managePolicies"
+                                            id="managePolicies" [(ngModel)]="permissions.managePolicies">
+                                        <label class="form-check-label font-weight-normal" for="managePolicies">
+                                            {{'managePolicies' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-0">
+                                    <div class="form-check mt-1 form-check-block">
+                                        <input class="form-check-input" type="checkbox" name="manageUsers"
+                                            id="manageUsers" [(ngModel)]="permissions.manageUsers">
+                                        <label class="form-check-label font-weight-normal" for="manageUsers">
+                                            {{'manageUsers' | i18n}}
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
                 <h3 class="mt-4 d-flex">
-                    <div class="mb-2">
+                    <div class="mb-3">
                         {{'accessControl' | i18n}}
                         <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
                             href="https://bitwarden.com/help/article/user-types-access-control/#access-control">

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

@@ -23,6 +23,7 @@ import { CollectionDetailsResponse } from 'jslib/models/response/collectionRespo
 import { CollectionView } from 'jslib/models/view/collectionView';
 
 import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { PermissionsApi } from 'jslib/models/api/permissionsApi';
 
 @Component({
     selector: 'app-user-add-edit',
@@ -40,12 +41,18 @@ export class UserAddEditComponent implements OnInit {
     title: string;
     emails: string;
     type: OrganizationUserType = OrganizationUserType.User;
+    permissions = new PermissionsApi();
+    showCustom = false;
     access: 'all' | 'selected' = 'selected';
     collections: CollectionView[] = [];
     formPromise: Promise<any>;
     deletePromise: Promise<any>;
     organizationUserType = OrganizationUserType;
 
+    get customUserTypeSelected(): boolean {
+        return this.type === OrganizationUserType.Custom;
+    }
+
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private analytics: Angulartics2, private toasterService: ToasterService,
         private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService) { }
@@ -61,6 +68,9 @@ export class UserAddEditComponent implements OnInit {
                 const user = await this.apiService.getOrganizationUser(this.organizationId, this.organizationUserId);
                 this.access = user.accessAll ? 'all' : 'selected';
                 this.type = user.type;
+                if (user.type === OrganizationUserType.Custom) {
+                    this.permissions = user.permissions;
+                }
                 if (user.collections != null && this.collections != null) {
                     user.collections.forEach((s) => {
                         const collection = this.collections.filter((c) => c.id === s.id);
@@ -97,6 +107,40 @@ export class UserAddEditComponent implements OnInit {
         this.collections.forEach((c) => this.check(c, select));
     }
 
+    setRequestPermissions(p: PermissionsApi, clearPermissions: boolean) {
+        p.accessBusinessPortal = clearPermissions ?
+            false :
+            this.permissions.accessBusinessPortal;
+        p.accessEventLogs = this.permissions.accessEventLogs = clearPermissions ?
+            false :
+            this.permissions.accessEventLogs;
+        p.accessImportExport = clearPermissions ?
+            false :
+            this.permissions.accessImportExport;
+        p.accessReports = clearPermissions ?
+            false :
+            this.permissions.accessReports;
+        p.manageAllCollections = clearPermissions ?
+            false :
+            this.permissions.manageAllCollections;
+        p.manageAssignedCollections = clearPermissions ?
+            false :
+            this.permissions.manageAssignedCollections;
+        p.manageGroups = clearPermissions ?
+            false :
+            this.permissions.manageGroups;
+        p.manageSso = clearPermissions ?
+            false :
+            this.permissions.manageSso;
+        p.managePolicies = clearPermissions ?
+            false :
+            this.permissions.managePolicies;
+        p.manageUsers = clearPermissions ?
+            false :
+            this.permissions.manageUsers;
+        return p;
+    }
+
     async submit() {
         let collections: SelectionReadOnlyRequest[] = null;
         if (this.access !== 'all') {
@@ -110,6 +154,7 @@ export class UserAddEditComponent implements OnInit {
                 request.accessAll = this.access === 'all';
                 request.type = this.type;
                 request.collections = collections;
+                request.permissions = this.setRequestPermissions(request.permissions ?? new PermissionsApi(), request.type !== OrganizationUserType.Custom);
                 this.formPromise = this.apiService.putOrganizationUser(this.organizationId, this.organizationUserId,
                     request);
             } else {
@@ -117,6 +162,7 @@ export class UserAddEditComponent implements OnInit {
                 request.emails = this.emails.trim().split(/\s*,\s*/);
                 request.accessAll = this.access === 'all';
                 request.type = this.type;
+                request.permissions = this.setRequestPermissions(request.permissions ?? new PermissionsApi(), request.type !== OrganizationUserType.Custom);
                 request.collections = collections;
                 this.formPromise = this.apiService.postOrganizationUserInvite(this.organizationId, request);
             }
@@ -148,4 +194,5 @@ export class UserAddEditComponent implements OnInit {
             this.onDeletedUser.emit();
         } catch { }
     }
+
 }

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

@@ -18,11 +18,10 @@ import { OrganizationUpdateRequest } from 'jslib/models/request/organizationUpda
 import { OrganizationResponse } from 'jslib/models/response/organizationResponse';
 
 import { ModalComponent } from '../../modal.component';
+import { ApiKeyComponent } from '../../settings/api-key.component';
 import { PurgeVaultComponent } from '../../settings/purge-vault.component';
 import { TaxInfoComponent } from '../../settings/tax-info.component';
-import { ApiKeyComponent } from './api-key.component';
 import { DeleteOrganizationComponent } from './delete-organization.component';
-import { RotateApiKeyComponent } from './rotate-api-key.component';
 
 @Component({
     selector: 'app-org-account',
@@ -125,7 +124,14 @@ export class AccountComponent {
         const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
         this.modal = this.apiKeyModalRef.createComponent(factory).instance;
         const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.apiKeyModalRef);
-        childComponent.organizationId = this.organizationId;
+        childComponent.keyType = 'organization';
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyDesc';
 
         this.modal.onClosed.subscribe(async () => {
             this.modal = null;
@@ -139,8 +145,16 @@ export class AccountComponent {
 
         const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
         this.modal = this.rotateApiKeyModalRef.createComponent(factory).instance;
-        const childComponent = this.modal.show<RotateApiKeyComponent>(RotateApiKeyComponent, this.rotateApiKeyModalRef);
-        childComponent.organizationId = this.organizationId;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateApiKeyModalRef);
+        childComponent.keyType = 'organization';
+        childComponent.isRotation = true;
+        childComponent.entityId = this.organizationId;
+        childComponent.postKey = this.apiService.postOrganizationRotateApiKey.bind(this.apiService);
+        childComponent.scope = 'api.organization';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'apiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
 
         this.modal.onClosed.subscribe(async () => {
             this.modal = null;

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

@@ -4,8 +4,8 @@
                 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"
-            (onCanceled)="cancel()">
+        <app-organization-plans [showFree]="false" [showCancel]="true" [plan]="defaultUpgradePlan"
+            [product]="defaultUpgradeProduct" [organizationId]="organizationId" (onCanceled)="cancel()">
         </app-organization-plans>
     </div>
 </div>

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

@@ -8,6 +8,9 @@ import {
 import { ApiService } from 'jslib/abstractions/api.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 
+import { PlanType } from 'jslib/enums/planType';
+import { ProductType } from 'jslib/enums/productType';
+
 @Component({
     selector: 'app-change-plan',
     templateUrl: 'change-plan.component.html',
@@ -18,6 +21,8 @@ export class ChangePlanComponent {
     @Output() onCanceled = new EventEmitter();
 
     formPromise: Promise<any>;
+    defaultUpgradePlan: PlanType = PlanType.FamiliesAnnually;
+    defaultUpgradeProduct: ProductType = ProductType.Families;
 
     constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
 

src/app/organizations/settings/rotate-api-key.component.html

@@ -1,48 +0,0 @@
-<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" id="rotateKeyTitle">{{'rotateApiKey' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <p>{{'apiKeyRotateDesc' | i18n}}</p>
-                <ng-container *ngIf="!clientSecret">
-                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                    <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-                        [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
-                </ng-container>
-                <app-callout type="warning" *ngIf="clientSecret">{{'apiKeyWarning' | i18n}}</app-callout>
-                <app-callout type="info" title="{{'oauth2ClientCredentials' | i18n}}" icon="fa-key"
-                    *ngIf="clientSecret">
-                    <p class="mb-1">
-                        <strong>client_id:</strong><br>
-                        <code>{{clientId}}</code>
-                    </p>
-                    <p class="mb-1">
-                        <strong>client_secret:</strong><br>
-                        <code>{{clientSecret}}</code>
-                    </p>
-                    <p class="mb-1">
-                        <strong>scope:</strong><br>
-                        <code>{{scope}}</code>
-                    </p>
-                    <p class="mb-0">
-                        <strong>grant_type:</strong><br>
-                        <code>client_credentials</code>
-                    </p>
-                </app-callout>
-            </div>
-            <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}}" aria-hidden="true"></i>
-                    <span>{{'rotateApiKey' | i18n}}</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
-            </div>
-        </form>
-    </div>
-</div>

src/app/organizations/settings/rotate-api-key.component.ts

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
-import { ApiService } from 'jslib/abstractions/api.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-
-import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
-
-import { ApiKeyResponse } from 'jslib/models/response/apiKeyResponse';
-
-@Component({
-    selector: 'app-rotate-api-key',
-    templateUrl: 'rotate-api-key.component.html',
-})
-export class RotateApiKeyComponent {
-    organizationId: string;
-
-    masterPassword: string;
-    formPromise: Promise<ApiKeyResponse>;
-    clientId: string;
-    clientSecret: string;
-    scope: string;
-
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private router: Router) { }
-
-    async submit() {
-        if (this.masterPassword == null || this.masterPassword === '') {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('masterPassRequired'));
-            return;
-        }
-
-        const request = new PasswordVerificationRequest();
-        request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
-        try {
-            this.formPromise = this.apiService.postOrganizationRotateApiKey(this.organizationId, request);
-            const response = await this.formPromise;
-            this.clientSecret = response.apiKey;
-            this.clientId = 'organization.' + this.organizationId;
-            this.scope = 'api.organization';
-            this.analytics.eventTrack.next({ action: 'Rotated Organization API Key' });
-        } catch { }
-    }
-}

src/app/organizations/tools/export.component.ts

@@ -16,8 +16,6 @@ import { EventType } from 'jslib/enums/eventType';
     templateUrl: '../../tools/export.component.html',
 })
 export class ExportComponent extends BaseExportComponent {
-    organizationId: string;
-
     constructor(cryptoService: CryptoService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, exportService: ExportService,
         eventService: EventService, private route: ActivatedRoute) {

src/app/organizations/tools/exposed-passwords-report.component.ts

@@ -14,12 +14,15 @@ import {
 } from '../../tools/exposed-passwords-report.component';
 
 import { CipherView } from 'jslib/models/view/cipherView';
+import { Cipher } from 'jslib/models/domain/cipher';
 
 @Component({
     selector: 'app-exposed-passwords-report',
     templateUrl: '../../tools/exposed-passwords-report.component.html',
 })
 export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportComponent {
+    manageableCiphers: Cipher[];
+
     constructor(cipherService: CipherService, auditService: AuditService,
         componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
         userService: UserService, private route: ActivatedRoute) {
@@ -29,6 +32,7 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
     ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
             this.organization = await this.userService.getOrganization(params.organizationId);
+            this.manageableCiphers = await this.cipherService.getAll();
             super.ngOnInit();
         });
     }
@@ -36,4 +40,8 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
     getAllCiphers(): Promise<CipherView[]> {
         return this.cipherService.getAllFromApiForOrganization(this.organization.id);
     }
+
+    canManageCipher(c: CipherView): boolean {
+        return this.manageableCiphers.some(x => x.id === c.id);
+    }
 }

src/app/organizations/tools/reused-passwords-report.component.ts

@@ -8,6 +8,8 @@ import { CipherService } from 'jslib/abstractions/cipher.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
+import { Cipher } from 'jslib/models/domain/cipher';
+
 import { CipherView } from 'jslib/models/view/cipherView';
 
 import {
@@ -19,6 +21,8 @@ import {
     templateUrl: '../../tools/reused-passwords-report.component.html',
 })
 export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportComponent {
+    manageableCiphers: Cipher[];
+
     constructor(cipherService: CipherService, componentFactoryResolver: ComponentFactoryResolver,
         messagingService: MessagingService, userService: UserService,
         private route: ActivatedRoute) {
@@ -28,6 +32,7 @@ export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportCom
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
             this.organization = await this.userService.getOrganization(params.organizationId);
+            this.manageableCiphers = await this.cipherService.getAll();
             await super.ngOnInit();
         });
     }
@@ -35,4 +40,8 @@ export class ReusedPasswordsReportComponent extends BaseReusedPasswordsReportCom
     getAllCiphers(): Promise<CipherView[]> {
         return this.cipherService.getAllFromApiForOrganization(this.organization.id);
     }
+
+    canManageCipher(c: CipherView): boolean {
+        return this.manageableCiphers.some(x => x.id === c.id);
+    }
 }

src/app/organizations/tools/tools.component.html

@@ -1,48 +1,54 @@
 <div class="container page-content">
-    <div class="row">
-        <div class="col-3">
-            <div class="card mb-4">
-                <div class="card-header">{{'tools' | i18n}}</div>
-                <div class="list-group list-group-flush">
-                    <a routerLink="import" class="list-group-item" routerLinkActive="active">
-                        {{'importData' | i18n}}
-                    </a>
-                    <a routerLink="export" class="list-group-item" routerLinkActive="active">
-                        {{'exportVault' | i18n}}
-                    </a>
-                </div>
-            </div>
-            <div class="card">
-                <div class="card-header d-flex">
-                    {{'reports' | i18n}}
-                    <div class="ml-auto">
-                        <a href="#" appStopClick class="badge badge-primary" *ngIf="!accessReports"
-                            (click)="upgradeOrganization()">
-                            {{'upgrade' | i18n}}
+    <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">
+        <div class="row">
+            <div class="col-3">
+                <div class="card mb-4" *ngIf="organization.canAccessImportExport">
+                    <div class="card-header">{{'tools' | i18n}}</div>
+                    <div class="list-group list-group-flush">
+                        <a routerLink="import" class="list-group-item" routerLinkActive="active">
+                            {{'importData' | i18n}}
+                        </a>
+                        <a routerLink="export" class="list-group-item" routerLinkActive="active">
+                            {{'exportVault' | i18n}}
                         </a>
                     </div>
                 </div>
-                <div class="list-group list-group-flush">
-                    <a routerLink="exposed-passwords-report" class="list-group-item" routerLinkActive="active">
-                        {{'exposedPasswordsReport' | i18n}}
-                    </a>
-                    <a routerLink="reused-passwords-report" class="list-group-item" routerLinkActive="active">
-                        {{'reusedPasswordsReport' | i18n}}
-                    </a>
-                    <a routerLink="weak-passwords-report" class="list-group-item" routerLinkActive="active">
-                        {{'weakPasswordsReport' | i18n}}
-                    </a>
-                    <a routerLink="unsecured-websites-report" class="list-group-item" routerLinkActive="active">
-                        {{'unsecuredWebsitesReport' | i18n}}
-                    </a>
-                    <a routerLink="inactive-two-factor-report" class="list-group-item" routerLinkActive="active">
-                        {{'inactive2faReport' | i18n}}
-                    </a>
+                <div class="card" *ngIf="organization.canAccessReports">
+                    <div class="card-header d-flex">
+                        {{'reports' | i18n}}
+                        <div class="ml-auto">
+                            <a href="#" appStopClick class="badge badge-primary" *ngIf="!accessReports"
+                                (click)="upgradeOrganization()">
+                                {{'upgrade' | i18n}}
+                            </a>
+                        </div>
+                    </div>
+                    <div class="list-group list-group-flush">
+                        <a routerLink="exposed-passwords-report" class="list-group-item" routerLinkActive="active">
+                            {{'exposedPasswordsReport' | i18n}}
+                        </a>
+                        <a routerLink="reused-passwords-report" class="list-group-item" routerLinkActive="active">
+                            {{'reusedPasswordsReport' | i18n}}
+                        </a>
+                        <a routerLink="weak-passwords-report" class="list-group-item" routerLinkActive="active">
+                            {{'weakPasswordsReport' | i18n}}
+                        </a>
+                        <a routerLink="unsecured-websites-report" class="list-group-item" routerLinkActive="active">
+                            {{'unsecuredWebsitesReport' | i18n}}
+                        </a>
+                        <a routerLink="inactive-two-factor-report" class="list-group-item" routerLinkActive="active">
+                            {{'inactive2faReport' | i18n}}
+                        </a>
+                    </div>
                 </div>
             </div>
+            <div class="col-9">
+                <router-outlet></router-outlet>
+            </div>
         </div>
-        <div class="col-9">
-            <router-outlet></router-outlet>
-        </div>
-    </div>
+    </ng-container>
 </div>

src/app/organizations/tools/tools.component.ts

@@ -13,6 +13,7 @@ import { UserService } from 'jslib/abstractions/user.service';
 export class ToolsComponent {
     organization: Organization;
     accessReports = false;
+    loading = true;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
         private messagingService: MessagingService) { }
@@ -23,6 +24,7 @@ export class ToolsComponent {
             // TODO: Maybe we want to just make sure they are not on a free plan? Just compare useTotp for now
             // since all paid plans include useTotp
             this.accessReports = this.organization.useTotp;
+            this.loading = false;
         });
     }
 

src/app/organizations/tools/weak-passwords-report.component.ts

@@ -9,6 +9,8 @@ import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
+import { Cipher } from 'jslib/models/domain/cipher';
+
 import { CipherView } from 'jslib/models/view/cipherView';
 
 import {
@@ -20,6 +22,8 @@ import {
     templateUrl: '../../tools/weak-passwords-report.component.html',
 })
 export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportComponent {
+    manageableCiphers: Cipher[];
+
     constructor(cipherService: CipherService, passwordGenerationService: PasswordGenerationService,
         componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
         userService: UserService, private route: ActivatedRoute) {
@@ -29,6 +33,7 @@ export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportCompone
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async (params) => {
             this.organization = await this.userService.getOrganization(params.organizationId);
+            this.manageableCiphers = await this.cipherService.getAll();
             await super.ngOnInit();
         });
     }
@@ -36,4 +41,8 @@ export class WeakPasswordsReportComponent extends BaseWeakPasswordsReportCompone
     getAllCiphers(): Promise<CipherView[]> {
         return this.cipherService.getAllFromApiForOrganization(this.organization.id);
     }
+
+    canManageCipher(c: CipherView): boolean {
+        return this.manageableCiphers.some(x => x.id === c.id);
+    }
 }

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

@@ -10,6 +10,7 @@ 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 { StateService } from 'jslib/abstractions/state.service';
 import { TotpService } from 'jslib/abstractions/totp.service';
 import { UserService } from 'jslib/abstractions/user.service';
@@ -36,16 +37,16 @@ export class AddEditComponent extends BaseAddEditComponent {
         userService: UserService, collectionService: CollectionService,
         totpService: TotpService, passwordGenerationService: PasswordGenerationService,
         private apiService: ApiService, messagingService: MessagingService,
-        eventService: EventService) {
+        eventService: EventService, policyService: PolicyService) {
         super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
             userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService);
+            eventService, policyService);
     }
 
     protected allowOwnershipAssignment() {
-        if (this.ownershipOptions != null && this.ownershipOptions.length > 1) {
+        if (this.ownershipOptions != null && (this.ownershipOptions.length > 1 || !this.allowPersonal)) {
             if (this.organization != null) {
-                return this.cloneMode && this.organization.isAdmin;
+                return this.cloneMode && this.organization.canManageAllCollections;
             } else {
                 return !this.editMode || this.cloneMode;
             }
@@ -54,14 +55,14 @@ export class AddEditComponent extends BaseAddEditComponent {
     }
 
     protected loadCollections() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.loadCollections();
         }
         return Promise.resolve(this.collections);
     }
 
     protected async loadCipher() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return await super.loadCipher();
         }
         const response = await this.apiService.getCipherAdmin(this.cipherId);
@@ -71,14 +72,14 @@ export class AddEditComponent extends BaseAddEditComponent {
     }
 
     protected encryptCipher() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.encryptCipher();
         }
         return this.cipherService.encrypt(this.cipher, null, this.originalCipher);
     }
 
     protected async saveCipher(cipher: Cipher) {
-        if (!this.organization.isAdmin || cipher.organizationId == null) {
+        if (!this.organization.canManageAllCollections || cipher.organizationId == null) {
             return super.saveCipher(cipher);
         }
         if (this.editMode && !this.cloneMode) {
@@ -91,7 +92,7 @@ export class AddEditComponent extends BaseAddEditComponent {
     }
 
     protected async deleteCipher() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.deleteCipher();
         }
         return this.cipher.isDeleted ? this.apiService.deleteCipherAdmin(this.cipherId)

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

@@ -29,13 +29,13 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     }
 
     protected async reupload(attachment: AttachmentView) {
-        if (this.organization.isAdmin && this.showFixOldAttachments(attachment)) {
+        if (this.organization.canManageAllCollections && this.showFixOldAttachments(attachment)) {
             await super.reuploadCipherAttachment(attachment, true);
         }
     }
 
     protected async loadCipher() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return await super.loadCipher();
         }
         const response = await this.apiService.getCipherAdmin(this.cipherId);
@@ -43,17 +43,17 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
     }
 
     protected saveCipherAttachment(file: File) {
-        return this.cipherService.saveAttachmentWithServer(this.cipherDomain, file, this.organization.isAdmin);
+        return this.cipherService.saveAttachmentWithServer(this.cipherDomain, file, this.organization.canManageAllCollections);
     }
 
     protected deleteCipherAttachment(attachmentId: string) {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.deleteCipherAttachment(attachmentId);
         }
         return this.apiService.deleteCipherAttachmentAdmin(this.cipherId, attachmentId);
     }
 
     protected showFixOldAttachments(attachment: AttachmentView) {
-        return attachment.key == null && this.organization.isAdmin;
+        return attachment.key == null && this.organization.canManageAllCollections;
     }
 }

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

@@ -13,6 +13,8 @@ import { EventService } from 'jslib/abstractions/event.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SearchService } from 'jslib/abstractions/search.service';
+import { TotpService } from 'jslib/abstractions/totp.service';
+import { UserService } from 'jslib/abstractions/user.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -34,13 +36,13 @@ export class CiphersComponent extends BaseCiphersComponent {
     constructor(searchService: SearchService, analytics: Angulartics2,
         toasterService: ToasterService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, cipherService: CipherService,
-        private apiService: ApiService, eventService: EventService) {
+        private apiService: ApiService, eventService: EventService, totpService: TotpService, userService: UserService) {
         super(searchService, analytics, toasterService, i18nService, platformUtilsService,
-            cipherService, eventService);
+            cipherService, eventService, totpService, userService);
     }
 
     async load(filter: (cipher: CipherView) => boolean = null) {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             await super.load(filter, this.deleted);
             return;
         }
@@ -51,7 +53,7 @@ export class CiphersComponent extends BaseCiphersComponent {
     }
 
     async applyFilter(filter: (cipher: CipherView) => boolean = null) {
-        if (this.organization.isAdmin) {
+        if (this.organization.canManageAllCollections) {
             await super.applyFilter(filter);
         } else {
             const f = (c: CipherView) => c.organizationId === this.organization.id && (filter == null || filter(c));
@@ -60,7 +62,7 @@ export class CiphersComponent extends BaseCiphersComponent {
     }
 
     async search(timeout: number = null) {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.search(timeout);
         }
         this.searchPending = false;
@@ -87,13 +89,13 @@ export class CiphersComponent extends BaseCiphersComponent {
     }
 
     protected deleteCipher(id: string) {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.deleteCipher(id, this.deleted);
         }
         return this.deleted ? this.apiService.deleteCipherAdmin(id) : this.apiService.putDeleteCipherAdmin(id);
     }
 
     protected showFixOldAttachments(c: CipherView) {
-        return this.organization.isAdmin && c.hasOldAttachments;
+        return this.organization.canManageAllCollections && c.hasOldAttachments;
     }
 }

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

@@ -28,7 +28,7 @@ export class CollectionsComponent extends BaseCollectionsComponent {
     }
 
     protected async loadCipher() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return await super.loadCipher();
         }
         const response = await this.apiService.getCipherAdmin(this.cipherId);
@@ -36,21 +36,21 @@ export class CollectionsComponent extends BaseCollectionsComponent {
     }
 
     protected loadCipherCollections() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.loadCipherCollections();
         }
         return this.collectionIds;
     }
 
     protected loadCollections() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             return super.loadCollections();
         }
         return Promise.resolve(this.collections);
     }
 
     protected saveCollections() {
-        if (this.organization.isAdmin) {
+        if (this.organization.canManageAllCollections) {
             const request = new CipherCollectionsRequest(this.cipherDomain.collectionIds);
             return this.apiService.putCipherCollectionsAdmin(this.cipherId, request);
         } else {

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

@@ -29,7 +29,7 @@ export class GroupingsComponent extends BaseGroupingsComponent {
     }
 
     async loadCollections() {
-        if (!this.organization.isAdmin) {
+        if (!this.organization.canManageAllCollections) {
             await super.loadCollections(this.organization.id);
             return;
         }

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

@@ -69,7 +69,7 @@ export class VaultComponent implements OnInit, OnDestroy {
 
             const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
                 this.ciphersComponent.searchText = this.groupingsComponent.searchText = qParams.search;
-                if (!this.organization.isAdmin) {
+                if (!this.organization.canManageAllCollections) {
                     await this.syncService.fullSync(false);
                     this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
                         this.ngZone.run(async () => {
@@ -233,7 +233,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         this.modal = this.collectionsModalRef.createComponent(factory).instance;
         const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
 
-        if (this.organization.isAdmin) {
+        if (this.organization.canManageAllCollections) {
             childComponent.collectionIds = cipher.collectionIds;
             childComponent.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
         }
@@ -253,7 +253,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         const component = this.editCipher(null);
         component.organizationId = this.organization.id;
         component.type = this.type;
-        if (this.organization.isAdmin) {
+        if (this.organization.canManageAllCollections) {
             component.collections = this.groupingsComponent.collections.filter((c) => !c.readOnly);
         }
         if (this.collectionId != null) {
@@ -296,7 +296,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         const component = this.editCipher(cipher);
         component.cloneMode = true;
         component.organizationId = this.organization.id;
-        if (this.organization.isAdmin) {
+        if (this.organization.canManageAllCollections) {
             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

src/app/send/access.component.html

@@ -0,0 +1,65 @@
+<form #form (ngSubmit)="load()" [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">Bitwarden Send</p>
+            <div class="card d-block">
+                <div class="card-body" *ngIf="loading" class="text-center">
+                    <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"
+                        aria-hidden="true"></i>
+                    <span class="sr-only">{{'loading' | i18n}}</span>
+                </div>
+                <div class="card-body" *ngIf="!loading && passwordRequired">
+                    <p>{{'sendProtectedPassword' | i18n}}</p>
+                    <p>{{'sendProtectedPasswordDontKnow' | i18n}}</p>
+                    <div class="form-group">
+                        <label for="password">{{'password' | i18n}}</label>
+                        <input id="password" type="password" name="Password" class="text-monospace form-control"
+                            [(ngModel)]="password" required appInputVerbatim appAutofocus>
+                    </div>
+                    <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> {{'continue' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="card-body" *ngIf="!loading && unavailable">
+                    {{'sendAccessUnavailable' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!loading && error">
+                    {{'unexpectedError' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!loading && !passwordRequired && send">
+                    <p class="text-center"><b>{{send.name}}</b></p>
+                    <hr>
+                    <!-- Text -->
+                    <ng-container *ngIf="send.type === sendType.Text">
+                        <app-callout *ngIf="send.text.hidden" type="tip">{{'sendHiddenByDefault' | i18n}}</app-callout>
+                        <div class="form-group">
+                            <textarea id="text" rows="8" name="Text" [(ngModel)]="sendText" class="form-control"
+                                readonly></textarea>
+                        </div>
+                        <button class="btn btn-block btn-link" type="button" (click)="toggleText()"
+                            *ngIf="send.text.hidden">
+                            <i class="fa fa-lg" aria-hidden="true"
+                                [ngClass]="{'fa-eye': !showText, 'fa-eye-slash': showText}"></i>
+                            {{'toggleVisibility' | i18n}}
+                        </button>
+                        <button class="btn btn-block btn-link" type="button" (click)="copyText()">
+                            <i class="fa fa-copy" aria-hidden="true"></i> {{'copyValue' | i18n}}
+                        </button>
+                    </ng-container>
+                    <!-- File -->
+                    <ng-container *ngIf="send.type === sendType.File">
+                        <p>{{send.file.fileName}}</p>
+                        <button class="btn btn-primary btn-block" type="button" (click)="download()">
+                            <i class="fa fa-download" aria-hidden="true"></i>
+                            {{'downloadFile' | i18n}} ({{send.file.sizeName}})</button>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/send/access.component.ts

@@ -0,0 +1,143 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { Utils } from 'jslib/misc/utils';
+
+import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
+import { SendAccess } from 'jslib/models/domain/sendAccess';
+
+import { SendAccessView } from 'jslib/models/view/sendAccessView';
+
+import { SendType } from 'jslib/enums/sendType';
+import { SendAccessRequest } from 'jslib/models/request/sendAccessRequest';
+import { ErrorResponse } from 'jslib/models/response/errorResponse';
+
+import { SendAccessResponse } from 'jslib/models/response/sendAccessResponse';
+
+@Component({
+    selector: 'app-send-access',
+    templateUrl: 'access.component.html',
+})
+export class AccessComponent implements OnInit {
+    send: SendAccessView;
+    sendType = SendType;
+    downloading = false;
+    loading = true;
+    passwordRequired = false;
+    formPromise: Promise<SendAccessResponse>;
+    password: string;
+    showText = false;
+    unavailable = false;
+    error = false;
+
+    private id: string;
+    private key: string;
+    private decKey: SymmetricCryptoKey;
+
+    constructor(private i18nService: I18nService, private cryptoFunctionService: CryptoFunctionService,
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private route: ActivatedRoute, private cryptoService: CryptoService) {
+    }
+
+    get sendText() {
+        if (this.send == null || this.send.text == null) {
+            return null;
+        }
+        return this.showText ? this.send.text.text : this.send.text.maskedText;
+    }
+
+    ngOnInit() {
+        this.route.params.subscribe(async (params) => {
+            this.id = params.sendId;
+            this.key = params.key;
+            if (this.key == null || this.id == null) {
+                return;
+            }
+            await this.load();
+        });
+    }
+
+    async download() {
+        if (this.send == null || this.decKey == null) {
+            return;
+        }
+
+        if (this.downloading) {
+            return;
+        }
+
+        this.downloading = true;
+        const response = await fetch(new Request(this.send.file.url, { cache: 'no-store' }));
+        if (response.status !== 200) {
+            this.platformUtilsService.showToast('error', null, this.i18nService.t('errorOccurred'));
+            this.downloading = false;
+            return;
+        }
+
+        try {
+            const buf = await response.arrayBuffer();
+            const decBuf = await this.cryptoService.decryptFromBytes(buf, this.decKey);
+            this.platformUtilsService.saveFile(window, decBuf, null, this.send.file.fileName);
+        } catch (e) {
+            this.platformUtilsService.showToast('error', null, this.i18nService.t('errorOccurred'));
+        }
+
+        this.downloading = false;
+    }
+
+    copyText() {
+        this.platformUtilsService.copyToClipboard(this.send.text.text);
+        this.platformUtilsService.showToast('success', null,
+            this.i18nService.t('valueCopied', this.i18nService.t('sendTypeText')));
+    }
+
+    toggleText() {
+        this.showText = !this.showText;
+    }
+
+    async load() {
+        this.unavailable = false;
+        this.error = false;
+        const keyArray = Utils.fromUrlB64ToArray(this.key);
+        const accessRequest = new SendAccessRequest();
+        if (this.password != null) {
+            const passwordHash = await this.cryptoFunctionService.pbkdf2(this.password, keyArray, 'sha256', 100000);
+            accessRequest.password = Utils.fromBufferToB64(passwordHash);
+        }
+        try {
+            let sendResponse: SendAccessResponse = null;
+            if (this.loading) {
+                sendResponse = await this.apiService.postSendAccess(this.id, accessRequest);
+            } else {
+                this.formPromise = this.apiService.postSendAccess(this.id, accessRequest);
+                sendResponse = await this.formPromise;
+            }
+            this.passwordRequired = false;
+            const sendAccess = new SendAccess(sendResponse);
+            this.decKey = await this.cryptoService.makeSendKey(keyArray);
+            this.send = await sendAccess.decrypt(this.decKey);
+            this.showText = this.send.text != null ? !this.send.text.hidden : true;
+        } catch (e) {
+            if (e instanceof ErrorResponse) {
+                if (e.statusCode === 401) {
+                    this.passwordRequired = true;
+                } else if (e.statusCode === 404) {
+                    this.unavailable = true;
+                } else {
+                    this.error = true;
+                }
+            }
+        }
+        this.loading = false;
+    }
+}

src/app/send/add-edit.component.html

@@ -0,0 +1,159 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="sendAddEditTitle">
+    <div class="modal-dialog modal-lg" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate
+            autocomplete="off">
+            <div class="modal-header">
+                <h2 class="modal-title" id="sendAddEditTitle">{{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="send">
+                <div class="row" *ngIf="!editMode">
+                    <div class="col-6 form-group">
+                        <label for="type">{{'whatTypeOfSend' | i18n}}</label>
+                        <select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus
+                            (change)='typeChanged()'>
+                            <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 form-group">
+                        <label for="name">{{'name' | i18n}}</label>
+                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required>
+                    </div>
+                </div>
+                <!-- Text -->
+                <ng-container *ngIf="send.type === sendType.Text">
+                    <div class="form-group">
+                        <label for="text">{{'sendTypeText' | i18n}}</label>
+                        <textarea id="text" name="Text.Text" rows="6" [(ngModel)]="send.text.text"
+                            class="form-control"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" [(ngModel)]="send.text.hidden"
+                                id="text-hidden" name="Text.Hidden">
+                            <label class="form-check-label" for="text-hidden">{{'textHiddenByDefault' | i18n}}</label>
+                        </div>
+                    </div>
+                </ng-container>
+                <!-- File -->
+                <ng-container *ngIf="send.type === sendType.File">
+                    <div class="form-group">
+                        <div *ngIf="editMode">
+                            <strong class="d-block">{{'file' | i18n}}</strong>
+                            {{send.file.fileName}} ({{send.file.sizeName}})
+                        </div>
+                        <div *ngIf="!editMode">
+                            <label for="file">{{'file' | i18n}}</label>
+                            <input type="file" id="file" class="form-control-file" name="file" required>
+                            <small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
+                        </div>
+                    </div>
+                </ng-container>
+                <h3 class="mt-5">{{'options' | i18n}}</h3>
+                <div class="row">
+                    <div class="col-6 form-group">
+                        <label for="deletionDate">{{'deletionDate' | i18n}}</label>
+                        <div *ngIf="!editMode">
+                            <select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
+                                class="form-control" required>
+                                <option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                            <input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
+                                name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
+                                placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        </div>
+                        <div *ngIf="editMode">
+                            <input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
+                                [(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        </div>
+                        <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
+                    </div>
+                    <div class="col-6 form-group">
+                        <div class="d-flex">
+                            <label for="expirationDate">{{'expirationDate' | i18n}}</label>
+                            <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto" *ngIf="editMode">
+                                {{'clear' | i18n}}
+                            </a>
+                        </div>
+                        <div *ngIf="!editMode">
+                            <select id="expirationDate" name="ExpirationDateSelect" [(ngModel)]="expirationDateSelect"
+                                class="form-control" required>
+                                <option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
+                                </option>
+                            </select>
+                            <input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
+                                name="ExpirationDate" [(ngModel)]="expirationDate" required
+                                *ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        </div>
+                        <div *ngIf="editMode">
+                            <input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
+                                [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM">
+                        </div>
+                        <div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 form-group">
+                        <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
+                        <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
+                            [(ngModel)]="send.maxAccessCount" min="1">
+                        <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
+                    </div>
+                    <div class="col-6 form-group" *ngIf="editMode">
+                        <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
+                        <input id="accessCount" class="form-control" type="number" name="AccessCount" readonly
+                            [(ngModel)]="send.accessCount">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 form-group">
+                        <label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
+                        <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
+                        <input id="password" class="form-control" type="password" name="Password"
+                            [(ngModel)]="password">
+                        <div class="form-text text-muted small">{{'sendPasswordDesc' | i18n}}</div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="notes">{{'notes' | i18n}}</label>
+                    <textarea id="notes" name="Notes" rows="6" [(ngModel)]="send.notes" class="form-control"></textarea>
+                    <div class="form-text text-muted small">{{'sendNotesDesc' | i18n}}</div>
+                </div>
+                <div class="form-group">
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" [(ngModel)]="send.disabled" id="disabled"
+                            name="Disabled">
+                        <label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
+                    </div>
+                </div>
+                <h3 class="mt-5" *ngIf="link">{{'share' | i18n}}</h3>
+                <div class="form-group" *ngIf="link">
+                    <label for="link">{{'sendLink' | i18n}}</label>
+                    <input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+                    {{'cancel' | i18n}}
+                </button>
+                <div class="ml-auto" *ngIf="send">
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/app/send/add-edit.component.ts

@@ -0,0 +1,236 @@
+import { DatePipe } from '@angular/common';
+
+import {
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { Component } from '@angular/core';
+
+import { SendType } from 'jslib/enums/sendType';
+
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SendService } from 'jslib/abstractions/send.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { SendFileView } from 'jslib/models/view/sendFileView';
+import { SendTextView } from 'jslib/models/view/sendTextView';
+import { SendView } from 'jslib/models/view/sendView';
+
+import { Send } from 'jslib/models/domain/send';
+
+@Component({
+    selector: 'app-send-add-edit',
+    templateUrl: 'add-edit.component.html',
+})
+export class AddEditComponent {
+    @Input() sendId: string;
+    @Input() type: SendType;
+
+    @Output() onSavedSend = new EventEmitter<SendView>();
+    @Output() onDeletedSend = new EventEmitter<SendView>();
+    @Output() onCancelled = new EventEmitter<SendView>();
+
+    editMode: boolean = false;
+    send: SendView;
+    link: string;
+    title: string;
+    deletionDate: string;
+    expirationDate: string;
+    hasPassword: boolean;
+    password: string;
+    formPromise: Promise<any>;
+    deletePromise: Promise<any>;
+    sendType = SendType;
+    typeOptions: any[];
+    deletionDateOptions: any[];
+    expirationDateOptions: any[];
+    deletionDateSelect = 168;
+    expirationDateSelect: number = null;
+    canAccessPremium = true;
+    premiumRequiredAlertShown = false;
+
+    constructor(private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService, private datePipe: DatePipe,
+        private sendService: SendService, private userService: UserService,
+        private messagingService: MessagingService) {
+        this.typeOptions = [
+            { name: i18nService.t('sendTypeFile'), value: SendType.File },
+            { name: i18nService.t('sendTypeText'), value: SendType.Text },
+        ];
+        this.deletionDateOptions = this.expirationDateOptions = [
+            { name: i18nService.t('oneHour'), value: 1 },
+            { name: i18nService.t('oneDay'), value: 24 },
+            { name: i18nService.t('days', '2'), value: 48 },
+            { name: i18nService.t('days', '3'), value: 72 },
+            { name: i18nService.t('days', '7'), value: 168 },
+            { name: i18nService.t('days', '30'), value: 720 },
+            { name: i18nService.t('custom'), value: 0 },
+        ];
+        this.expirationDateOptions = [
+            { name: i18nService.t('never'), value: null },
+        ].concat([...this.deletionDateOptions]);
+    }
+
+    async ngOnInit() {
+        await this.load();
+    }
+
+    async load() {
+        this.editMode = this.sendId != null;
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editSend');
+        } else {
+            this.title = this.i18nService.t('createSend');
+        }
+
+        this.canAccessPremium = await this.userService.canAccessPremium();
+        if (!this.canAccessPremium) {
+            this.type = SendType.Text;
+        }
+
+        if (this.send == null) {
+            if (this.editMode) {
+                const send = await this.loadSend();
+                this.send = await send.decrypt();
+            } else {
+                this.send = new SendView();
+                this.send.type = this.type == null ? SendType.File : this.type;
+                this.send.file = new SendFileView();
+                this.send.text = new SendTextView();
+                this.send.deletionDate = new Date();
+                this.send.deletionDate.setDate(this.send.deletionDate.getDate() + 7);
+            }
+        }
+
+        this.hasPassword = this.send.password != null && this.send.password.trim() !== '';
+
+        // Parse dates
+        this.deletionDate = this.dateToString(this.send.deletionDate);
+        this.expirationDate = this.dateToString(this.send.expirationDate);
+
+        if (this.editMode) {
+            let webVaultUrl = this.environmentService.getWebVaultUrl();
+            if (webVaultUrl == null) {
+                webVaultUrl = 'https://vault.bitwarden.com';
+            }
+            this.link = webVaultUrl + '/#/send/' + this.send.accessId + '/' + this.send.urlB64Key;
+        }
+    }
+
+    async submit(): Promise<boolean> {
+        if (this.send.name == null || this.send.name === '') {
+            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('nameRequired'));
+            return false;
+        }
+
+        let file: File = null;
+        if (this.send.type === SendType.File && !this.editMode) {
+            const fileEl = document.getElementById('file') as HTMLInputElement;
+            const files = fileEl.files;
+            if (files == null || files.length === 0) {
+                this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                    this.i18nService.t('selectFile'));
+                return;
+            }
+
+            file = files[0];
+            if (file.size > 104857600) { // 100 MB
+                this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                    this.i18nService.t('maxFileSize'));
+                return;
+            }
+        }
+
+        if (!this.editMode) {
+            const now = new Date();
+            if (this.deletionDateSelect > 0) {
+                const d = new Date();
+                d.setHours(now.getHours() + this.deletionDateSelect);
+                this.deletionDate = this.dateToString(d);
+            }
+            if (this.expirationDateSelect != null && this.expirationDateSelect > 0) {
+                const d = new Date();
+                d.setHours(now.getHours() + this.expirationDateSelect);
+                this.expirationDate = this.dateToString(d);
+            }
+        }
+
+        const encSend = await this.encryptSend(file);
+        try {
+            this.formPromise = this.sendService.saveWithServer(encSend);
+            await this.formPromise;
+            this.send.id = encSend[0].id;
+            this.platformUtilsService.showToast('success', null,
+                this.i18nService.t(this.editMode ? 'editedSend' : 'createdSend'));
+            this.onSavedSend.emit(this.send);
+            return true;
+        } catch { }
+
+        return false;
+    }
+
+    clearExpiration() {
+        this.expirationDate = null;
+    }
+
+    async delete(): Promise<void> {
+        if (this.deletePromise != null) {
+            return;
+        }
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteSendConfirmation'),
+            this.i18nService.t('deleteSend'),
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return;
+        }
+
+        try {
+            this.deletePromise = this.sendService.deleteWithServer(this.send.id);
+            await this.deletePromise;
+            this.platformUtilsService.showToast('success', null, this.i18nService.t('deletedSend'));
+            await this.load();
+            this.onDeletedSend.emit(this.send);
+        } catch { }
+    }
+
+    typeChanged() {
+        if (!this.canAccessPremium && this.send.type === SendType.File && !this.premiumRequiredAlertShown) {
+            this.premiumRequiredAlertShown = true;
+            this.messagingService.send('premiumRequired');
+        }
+    }
+
+    protected async loadSend(): Promise<Send> {
+        return this.sendService.get(this.sendId);
+    }
+
+    protected async encryptSend(file: File): Promise<[Send, ArrayBuffer]> {
+        const sendData = await this.sendService.encrypt(this.send, file, this.password, null);
+
+        // Parse dates
+        try {
+            sendData[0].deletionDate = this.deletionDate == null ? null : new Date(this.deletionDate);
+        } catch {
+            sendData[0].deletionDate = null;
+        }
+        try {
+            sendData[0].expirationDate = this.expirationDate == null ? null : new Date(this.expirationDate);
+        } catch {
+            sendData[0].expirationDate = null;
+        }
+
+        return sendData;
+    }
+
+    protected dateToString(d: Date) {
+        return d == null ? null : this.datePipe.transform(d, 'yyyy-MM-ddTHH:mm');
+    }
+}

src/app/send/send.component.html

@@ -0,0 +1,130 @@
+<div class="container page-content">
+    <div class="row">
+        <div class="col-3 groupings">
+            <div class="card vault-filters">
+                <div class="card-header d-flex">
+                    {{'filters' | i18n}}
+                </div>
+                <div class="card-body">
+                    <input type="search" placeholder="{{searchPlaceholder || ('searchSends' | i18n)}}" id="search"
+                        class="form-control" [(ngModel)]="searchText" (input)="searchTextChanged()" autocomplete="off"
+                        appAutofocus>
+                    <ul class="fa-ul card-ul">
+                        <li [ngClass]="{active: selectedAll}">
+                            <a href="#" appStopClick (click)="selectAll()">
+                                <i class="fa-li fa fa-fw fa-th"></i>{{'allSends' | i18n}}
+                            </a>
+                        </li>
+                    </ul>
+                    <h3>{{'types' | i18n}}</h3>
+                    <ul class="fa-ul card-ul">
+                        <li [ngClass]="{active: selectedType === sendType.Text}">
+                            <a href="#" appStopClick (click)="selectType(sendType.Text)">
+                                <i class="fa-li fa fa-fw fa-file-text-o"></i>{{'sendTypeText' | i18n}}
+                            </a>
+                        </li>
+                        <li [ngClass]="{active: selectedType === sendType.File}">
+                            <a href="#" appStopClick (click)="selectType(sendType.File)">
+                                <i class="fa-li fa fa-fw fa-file-o"></i>{{'sendTypeFile' | i18n}}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col-9">
+            <div class="page-header d-flex">
+                <h1>
+                    Send
+                    <small #actionSpinner [appApiAction]="actionPromise">
+                        <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>
+                <div class="ml-auto d-flex">
+                    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addSend()">
+                        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{'createSend' | i18n}}
+                    </button>
+                </div>
+            </div>
+            <!--Listing Table-->
+            <table class="table table-hover table-list" *ngIf="filteredSends && filteredSends.length">
+                <tbody>
+                    <tr *ngFor="let s of filteredSends">
+                        <td class="table-list-icon">
+                            <div class="icon" aria-hidden="true">
+                                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
+                                <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type == sendType.Text"></i>
+                            </div>
+                        </td>
+                        <td class="reduced-lh wrap">
+                            <a href="#" appStopClick appStopProp (click)="editSend(s)">{{s.name}}</a>
+                            <span appStopClick class="badge badge-secondary" *ngIf="s.disabled">
+                                {{'disabled' | i18n}}
+                            </span>
+                            <ng-container *ngIf="s.password">
+                                <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
+                                <span class="sr-only">{{'password' | i18n}}</span>
+                            </ng-container>
+                            <ng-container *ngIf="s.maxAccessCountReached">
+                                <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
+                            </ng-container>
+                            <ng-container *ngIf="s.expired">
+                                <i class="fa fa-clock-o" appStopProp title="{{'expired' | i18n}}" aria-hidden="true"></i>
+                                <span class="sr-only">{{'expired' | i18n}}</span>
+                            </ng-container>
+                            <ng-container *ngIf="s.pendingDelete">
+                                <i class="fa fa-trash" appStopProp title="{{'pendingDeletion' | i18n}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
+                            </ng-container>
+                            <br>
+                            <small appStopProp>{{s.deletionDate | date:'medium'}}</small>
+                        </td>
+                        <td class="table-list-options">
+                            <div class="dropdown" appListDropdown>
+                                <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                    id="dropdownMenuButton" 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" aria-labelledby="dropdownMenuButton">
+                                    <a class="dropdown-item" href="#" appStopClick (click)="copy(s)">
+                                        <i class="fa fa-fw fa-copy" aria-hidden="true"></i>
+                                        {{'copySendLink' | i18n}}
+                                    </a>
+                                    <a class="dropdown-item" href="#" appStopClick (click)="removePassword(s)"
+                                        *ngIf="s.password">
+                                        <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+                                        {{'removePassword' | i18n}}
+                                    </a>
+                                    <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(s)">
+                                        <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                                        {{'delete' | i18n}}
+                                    </a>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="no-items" *ngIf="filteredSends && !filteredSends.length">
+                <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>{{'noSendsInList' | i18n}}</p>
+                    <button (click)="addSend()" class="btn btn-outline-primary">
+                        <i class="fa fa-plus fa-fw"></i>{{'createSend' | i18n}}</button>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+<ng-template #sendAddEdit></ng-template>

src/app/send/send.component.ts

@@ -0,0 +1,207 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { SendType } from 'jslib/enums/sendType';
+
+import { SendView } from 'jslib/models/view/sendView';
+
+import { AddEditComponent } from './add-edit.component';
+
+import { ModalComponent } from '../modal.component';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SendService } from 'jslib/abstractions/send.service';
+
+@Component({
+    selector: 'app-send',
+    templateUrl: 'send.component.html',
+})
+export class SendComponent implements OnInit {
+    @ViewChild('sendAddEdit', { read: ViewContainerRef, static: true }) sendAddEditModalRef: ViewContainerRef;
+
+    sendType = SendType;
+    loaded = false;
+    loading = true;
+    refreshing = false;
+    expired: boolean = false;
+    type: SendType = null;
+    sends: SendView[] = [];
+    filteredSends: SendView[] = [];
+    searchText: string;
+    selectedType: SendType;
+    selectedAll: boolean;
+    searchPlaceholder: string;
+    filter: (cipher: SendView) => boolean;
+    searchPending = false;
+
+    modal: ModalComponent = null;
+    actionPromise: any;
+
+    private searchTimeout: any;
+
+    constructor(private apiService: ApiService, private sendService: SendService,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private environmentService: EnvironmentService) { }
+
+    async ngOnInit() {
+        await this.load();
+    }
+    async load(filter: (send: SendView) => boolean = null) {
+        this.loading = true;
+        const sends = await this.sendService.getAllDecrypted();
+        this.sends = sends;
+        this.selectAll();
+        this.loading = false;
+        this.loaded = true;
+    }
+
+    async reload(filter: (send: SendView) => boolean = null) {
+        this.loaded = false;
+        this.sends = [];
+        await this.load(filter);
+    }
+
+    async refresh() {
+        try {
+            this.refreshing = true;
+            await this.reload(this.filter);
+        } finally {
+            this.refreshing = false;
+        }
+    }
+
+    async applyFilter(filter: (send: SendView) => boolean = null) {
+        this.filter = filter;
+        await this.search(null);
+    }
+
+    async search(timeout: number = null) {
+        this.searchPending = false;
+        if (this.searchTimeout != null) {
+            clearTimeout(this.searchTimeout);
+        }
+        if (timeout == null) {
+            this.filteredSends = this.sends.filter((s) => this.filter == null || this.filter(s));
+            return;
+        }
+        this.searchPending = true;
+        this.searchTimeout = setTimeout(async () => {
+            this.filteredSends = this.sends.filter((s) => this.filter == null || this.filter(s));
+            this.searchPending = false;
+        }, timeout);
+    }
+
+    addSend() {
+        const component = this.editSend(null);
+        component.type = this.type;
+    }
+
+    editSend(send: SendView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.sendAddEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<AddEditComponent>(
+            AddEditComponent, this.sendAddEditModalRef);
+
+        childComponent.sendId = send == null ? null : send.id;
+        childComponent.onSavedSend.subscribe(async (s: SendView) => {
+            this.modal.close();
+            await this.load();
+        });
+        childComponent.onDeletedSend.subscribe(async (s: SendView) => {
+            this.modal.close();
+            await this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
+        return childComponent;
+    }
+
+    async removePassword(s: SendView): Promise<boolean> {
+        if (this.actionPromise != null || s.password == null) {
+            return;
+        }
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('removePasswordConfirmation'),
+            this.i18nService.t('removePassword'),
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.actionPromise = this.sendService.removePasswordWithServer(s.id);
+            await this.actionPromise;
+            this.platformUtilsService.showToast('success', null, this.i18nService.t('removedPassword'));
+            await this.load();
+        } catch { }
+        this.actionPromise = null;
+    }
+
+    async delete(s: SendView): Promise<boolean> {
+        if (this.actionPromise != null) {
+            return false;
+        }
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('deleteSendConfirmation'),
+            this.i18nService.t('deleteSend'),
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            this.actionPromise = this.sendService.deleteWithServer(s.id);
+            await this.actionPromise;
+            this.platformUtilsService.showToast('success', null, this.i18nService.t('deletedSend'));
+            await this.load();
+        } catch { }
+        this.actionPromise = null;
+        return true;
+    }
+
+    copy(s: SendView) {
+        let webVaultUrl = this.environmentService.getWebVaultUrl();
+        if (webVaultUrl == null) {
+            webVaultUrl = 'https://vault.bitwarden.com';
+        }
+        const link = webVaultUrl + '/#/send/' + s.accessId + '/' + s.urlB64Key;
+        this.platformUtilsService.copyToClipboard(link);
+        this.platformUtilsService.showToast('success', null,
+            this.i18nService.t('valueCopied', this.i18nService.t('sendLink')));
+    }
+
+    searchTextChanged() {
+        this.search(200);
+    }
+
+    selectAll() {
+        this.clearSelections();
+        this.selectedAll = true;
+        this.applyFilter(null);
+    }
+
+    selectType(type: SendType) {
+        this.clearSelections();
+        this.selectedType = type;
+        this.applyFilter((s) => s.type === type);
+    }
+
+    clearSelections() {
+        this.selectedAll = false;
+        this.selectedType = null;
+    }
+}

src/app/services/event.service.ts

@@ -153,6 +153,8 @@ export class EventService {
             case EventType.OrganizationUser_UpdatedGroups:
                 msg = this.i18nService.t('editedGroupsForUser', this.formatOrgUserId(ev));
                 break;
+            case EventType.OrganizationUser_UnlinkedSso:
+                msg = this.i18nService.t('unlinkedSsoUser', this.formatOrgUserId(ev));
             // Org
             case EventType.Organization_Updated:
                 msg = this.i18nService.t('editedOrgSettings');
@@ -165,6 +167,11 @@ export class EventService {
                 msg = this.i18nService.t('exportedOrganizationVault');
                 break;
             */
+            // Policies
+            case EventType.Policy_Updated:
+                msg = this.i18nService.t('modifiedPolicy', this.formatPolicyId(ev));
+                break;
+
             default:
                 break;
         }
@@ -251,6 +258,13 @@ export class EventService {
         return a.outerHTML;
     }
 
+    private formatPolicyId(ev: EventResponse) {
+        const shortId = this.getShortId(ev.policyId);
+        const a = this.makeAnchor(shortId);
+        a.setAttribute('href', '#/organizations/' + ev.organizationId + '/manage/policies?policyId=' + ev.policyId);
+        return a.outerHTML;
+    }
+
     private makeAnchor(shortId: string) {
         const a = document.createElement('a');
         a.title = this.i18nService.t('view');

src/app/services/organization-type-guard.service.ts

@@ -7,20 +7,32 @@ import {
 
 import { UserService } from 'jslib/abstractions/user.service';
 
-import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { Permissions } from 'jslib/enums/permissions';
 
 @Injectable()
 export class OrganizationTypeGuardService implements CanActivate {
     constructor(private userService: UserService, private router: Router) { }
 
     async canActivate(route: ActivatedRouteSnapshot) {
-        const org = await this.userService.getOrganization(route.parent.params.organizationId);
-        const allowedTypes = route.data == null ? null : route.data.allowedTypes as OrganizationUserType[];
-        if (allowedTypes == null || allowedTypes.indexOf(org.type) === -1) {
-            this.router.navigate(['/organizations', org.id]);
-            return false;
+        const org = await this.userService.getOrganization(route.params.organizationId);
+        const permissions = route.data == null ? null : route.data.permissions as Permissions[];
+
+        if (
+            (permissions.indexOf(Permissions.AccessBusinessPortal) !== -1 && org.canAccessBusinessPortal) ||
+            (permissions.indexOf(Permissions.AccessEventLogs) !== -1 && org.canAccessEventLogs) ||
+            (permissions.indexOf(Permissions.AccessImportExport) !== -1 && org.canAccessImportExport) ||
+            (permissions.indexOf(Permissions.AccessReports) !== -1 && org.canAccessReports) ||
+            (permissions.indexOf(Permissions.ManageAllCollections) !== -1 && org.canManageAllCollections) ||
+            (permissions.indexOf(Permissions.ManageAssignedCollections) !== -1 && org.canManageAssignedCollections) ||
+            (permissions.indexOf(Permissions.ManageGroups) !== -1 && org.canManageGroups) ||
+            (permissions.indexOf(Permissions.ManageOrganization) !== -1 && org.isOwner) ||
+            (permissions.indexOf(Permissions.ManagePolicies) !== -1 && org.canManagePolicies) ||
+            (permissions.indexOf(Permissions.ManageUsers) !== -1 && org.canManageUsers)
+        ) {
+            return true;
         }
 
-        return true;
+        this.router.navigate(['/organizations', org.id]);
+        return false;
     }
 }

src/app/services/services.module.ts

@@ -30,6 +30,7 @@ import { AuditService } from 'jslib/services/audit.service';
 import { AuthService } from 'jslib/services/auth.service';
 import { CipherService } from 'jslib/services/cipher.service';
 import { CollectionService } from 'jslib/services/collection.service';
+import { ConsoleLogService } from 'jslib/services/consoleLog.service';
 import { ConstantsService } from 'jslib/services/constants.service';
 import { ContainerService } from 'jslib/services/container.service';
 import { CryptoService } from 'jslib/services/crypto.service';
@@ -42,6 +43,7 @@ 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 { SendService } from 'jslib/services/send.service';
 import { SettingsService } from 'jslib/services/settings.service';
 import { StateService } from 'jslib/services/state.service';
 import { SyncService } from 'jslib/services/sync.service';
@@ -74,6 +76,7 @@ import {
 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 { SendService as SendServiceAbstraction } from 'jslib/abstractions/send.service';
 import { SettingsService as SettingsServiceAbstraction } from 'jslib/abstractions/settings.service';
 import { StateService as StateServiceAbstraction } from 'jslib/abstractions/state.service';
 import { StorageService as StorageServiceAbstraction } from 'jslib/abstractions/storage.service';
@@ -92,8 +95,10 @@ const storageService: StorageServiceAbstraction = new HtmlStorageService(platfor
 const secureStorageService: StorageServiceAbstraction = new MemoryStorageService();
 const cryptoFunctionService: CryptoFunctionServiceAbstraction = new WebCryptoFunctionService(window,
     platformUtilsService);
+const consoleLogService = new ConsoleLogService(false);
 const cryptoService = new CryptoService(storageService,
-    platformUtilsService.isDev() ? storageService : secureStorageService, cryptoFunctionService);
+    platformUtilsService.isDev() ? storageService : secureStorageService, cryptoFunctionService, platformUtilsService,
+    consoleLogService);
 const tokenService = new TokenService(storageService);
 const appIdService = new AppIdService(storageService);
 const apiService = new ApiService(tokenService, platformUtilsService,
@@ -106,23 +111,26 @@ const cipherService = new CipherService(cryptoService, userService, settingsServ
 const folderService = new FolderService(cryptoService, userService, apiService, storageService,
     i18nService, cipherService);
 const collectionService = new CollectionService(cryptoService, userService, storageService, i18nService);
-searchService = new SearchService(cipherService, platformUtilsService);
+searchService = new SearchService(cipherService, consoleLogService);
 const policyService = new PolicyService(userService, storageService);
+const sendService = new SendService(cryptoService, userService, apiService, storageService,
+    i18nService, cryptoFunctionService);
 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, policyService,
-    async (expired: boolean) => messagingService.send('logout', { expired: expired }));
+    sendService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));
 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, vaultTimeoutService);
+    userService, tokenService, appIdService, i18nService, platformUtilsService, messagingService, vaultTimeoutService,
+    consoleLogService);
 const exportService = new ExportService(folderService, cipherService, apiService);
 const importService = new ImportService(cipherService, folderService, apiService, i18nService, collectionService);
 const notificationsService = new NotificationsService(userService, syncService, appIdService,
-    apiService, vaultTimeoutService, async () => messagingService.send('logout', { expired: true }));
+    apiService, vaultTimeoutService, async () => messagingService.send('logout', { expired: true }), consoleLogService);
 const environmentService = new EnvironmentService(apiService, storageService, notificationsService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
@@ -218,6 +226,7 @@ export function initFactory(): Function {
         { provide: CryptoFunctionServiceAbstraction, useValue: cryptoFunctionService },
         { provide: EventLoggingServiceAbstraction, useValue: eventLoggingService },
         { provide: PolicyServiceAbstraction, useValue: policyService },
+        { provide: SendServiceAbstraction, useValue: sendService },
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,

src/app/settings/account.component.html

@@ -14,6 +14,14 @@
     <h1>{{'encKeySettings' | i18n}}</h1>
 </div>
 <app-change-kdf></app-change-kdf>
+<div class="secondary-header border-0 mb-0">
+    <h1>{{'apiKey' | i18n}}</h1>
+</div>
+<p>
+    {{'userApiKeyDesc' | i18n}}
+</p>
+<button type="button" class="btn btn-outline-secondary" (click)="viewUserApiKey()">{{'viewApiKey' | i18n}}</button>
+<button type="button" class="btn btn-outline-secondary" (click)="rotateUserApiKey()">{{'rotateApiKey' | i18n}}</button>
 <div class="secondary-header text-danger border-0 mb-0">
     <h1>{{'dangerZone' | i18n}}</h1>
 </div>
@@ -30,3 +38,5 @@
 <ng-template #deauthorizeSessionsTemplate></ng-template>
 <ng-template #purgeVaultTemplate></ng-template>
 <ng-template #deleteAccountTemplate></ng-template>
+<ng-template #viewUserApiKeyTemplate></ng-template>
+<ng-template #rotateUserApiKeyTemplate></ng-template>

src/app/settings/account.component.ts

@@ -6,10 +6,14 @@ import {
 } from '@angular/core';
 
 import { ModalComponent } from '../modal.component';
+import { ApiKeyComponent } from './api-key.component';
 import { DeauthorizeSessionsComponent } from './deauthorize-sessions.component';
 import { DeleteAccountComponent } from './delete-account.component';
 import { PurgeVaultComponent } from './purge-vault.component';
 
+import { ApiService } from 'jslib/abstractions/api.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
 @Component({
     selector: 'app-account',
     templateUrl: 'account.component.html',
@@ -18,10 +22,13 @@ export class AccountComponent {
     @ViewChild('deauthorizeSessionsTemplate', { read: ViewContainerRef, static: true }) deauthModalRef: ViewContainerRef;
     @ViewChild('purgeVaultTemplate', { read: ViewContainerRef, static: true }) purgeModalRef: ViewContainerRef;
     @ViewChild('deleteAccountTemplate', { read: ViewContainerRef, static: true }) deleteModalRef: ViewContainerRef;
+    @ViewChild('viewUserApiKeyTemplate', { read: ViewContainerRef, static: true }) viewUserApiKeyModalRef: ViewContainerRef;
+    @ViewChild('rotateUserApiKeyTemplate', { read: ViewContainerRef, static: true }) rotateUserApiKeyModalRef: ViewContainerRef;
 
     private modal: ModalComponent = null;
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+    constructor(private componentFactoryResolver: ComponentFactoryResolver, private apiService: ApiService,
+        private userService: UserService) { }
 
     deauthorizeSessions() {
         if (this.modal != null) {
@@ -64,4 +71,49 @@ export class AccountComponent {
             this.modal = null;
         });
     }
+
+    async viewUserApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.viewUserApiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.viewUserApiKeyModalRef);
+        childComponent.keyType = 'user';
+        childComponent.entityId = await this.userService.getUserId();
+        childComponent.postKey = this.apiService.postUserApiKey.bind(this.apiService);
+        childComponent.scope = 'api';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'userApiKeyWarning';
+        childComponent.apiKeyDescription = 'userApiKeyDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
+    async rotateUserApiKey() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.rotateUserApiKeyModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ApiKeyComponent>(ApiKeyComponent, this.rotateUserApiKeyModalRef);
+        childComponent.keyType = 'user';
+        childComponent.isRotation = true;
+        childComponent.entityId = await this.userService.getUserId();
+        childComponent.postKey = this.apiService.postUserRotateApiKey.bind(this.apiService);
+        childComponent.scope = 'api';
+        childComponent.grantType = 'client_credentials';
+        childComponent.apiKeyTitle = 'apiKey';
+        childComponent.apiKeyWarning = 'userApiKeyWarning';
+        childComponent.apiKeyDescription = 'apiKeyRotateDesc';
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
 }

src/app/settings/api-key.component.html

@@ -2,19 +2,19 @@
     <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="apiKeyTitle">{{'apiKey' | i18n}}</h2>
+                <h2 class="modal-title" id="apiKeyTitle">{{apiKeyTitle | i18n}}</h2>
                 <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <p>{{'apiKeyDesc' | i18n}}</p>
+                <p>{{apiKeyDescription | i18n}}</p>
                 <ng-container *ngIf="!clientSecret">
                     <label for="masterPassword">{{'masterPass' | i18n}}</label>
                     <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
                         [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
                 </ng-container>
-                <app-callout type="warning" *ngIf="clientSecret">{{'apiKeyWarning' | i18n}}</app-callout>
+                <app-callout type="warning" *ngIf="clientSecret">{{apiKeyWarning | i18n}}</app-callout>
                 <app-callout type="info" title="{{'oauth2ClientCredentials' | i18n}}" icon="fa-key"
                     *ngIf="clientSecret">
                     <p class="mb-1">
@@ -31,7 +31,7 @@
                     </p>
                     <p class="mb-0">
                         <strong>grant_type:</strong><br>
-                        <code>client_credentials</code>
+                        <code>{{grantType}}</code>
                     </p>
                 </app-callout>
             </div>
@@ -39,7 +39,7 @@
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                     *ngIf="!clientSecret">
                     <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                    <span>{{'viewApiKey' | i18n}}</span>
+                    <span>{{(isRotation ? 'rotateApiKey' : 'viewApiKey') | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>

src/app/settings/api-key.component.ts

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
 import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
 
@@ -17,17 +15,23 @@ import { ApiKeyResponse } from 'jslib/models/response/apiKeyResponse';
     templateUrl: 'api-key.component.html',
 })
 export class ApiKeyComponent {
-    organizationId: string;
+    keyType: string;
+    isRotation: boolean;
+    postKey: (entityId: string, request: PasswordVerificationRequest) => Promise<ApiKeyResponse>;
+    entityId: string;
+    scope: string;
+    grantType: string;
+    apiKeyTitle: string;
+    apiKeyWarning: string;
+    apiKeyDescription: string;
 
     masterPassword: string;
     formPromise: Promise<ApiKeyResponse>;
     clientId: string;
     clientSecret: string;
-    scope: string;
 
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private cryptoService: CryptoService, private router: Router) { }
+    constructor(private i18nService: I18nService, private analytics: Angulartics2,
+        private toasterService: ToasterService, private cryptoService: CryptoService) { }
 
     async submit() {
         if (this.masterPassword == null || this.masterPassword === '') {
@@ -39,12 +43,11 @@ export class ApiKeyComponent {
         const request = new PasswordVerificationRequest();
         request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
         try {
-            this.formPromise = this.apiService.postOrganizationApiKey(this.organizationId, request);
+            this.formPromise = this.postKey(this.entityId, request);
             const response = await this.formPromise;
             this.clientSecret = response.apiKey;
-            this.clientId = 'organization.' + this.organizationId;
-            this.scope = 'api.organization';
-            this.analytics.eventTrack.next({ action: 'Viewed Organization API Key' });
+            this.clientId = `${this.keyType}.${this.entityId}`;
+            this.analytics.eventTrack.next({ action: `Viewed ${this.keyType} API Key` });
         } catch { }
     }
 }

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

@@ -16,10 +16,14 @@ import {
     ChangePasswordComponent as BaseChangePasswordComponent,
 } from 'jslib/angular/components/change-password.component';
 
+import { EmergencyAccessStatusType } from 'jslib/enums/emergencyAccessStatusType';
+import { Utils } from 'jslib/misc/utils';
+
 import { CipherString } from 'jslib/models/domain/cipherString';
 import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
 
 import { CipherWithIdRequest } from 'jslib/models/request/cipherWithIdRequest';
+import { EmergencyAccessUpdateRequest } from 'jslib/models/request/emergencyAccessUpdateRequest';
 import { FolderWithIdRequest } from 'jslib/models/request/folderWithIdRequest';
 import { PasswordRequest } from 'jslib/models/request/passwordRequest';
 import { UpdateKeyRequest } from 'jslib/models/request/updateKeyRequest';
@@ -37,7 +41,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
         userService: UserService, passwordGenerationService: PasswordGenerationService,
         platformUtilsService: PlatformUtilsService, policyService: PolicyService,
         private folderService: FolderService, private cipherService: CipherService,
-        private syncService: SyncService, private apiService: ApiService, ) {
+        private syncService: SyncService, private apiService: ApiService ) {
         super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
             platformUtilsService, policyService);
     }
@@ -69,6 +73,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
 
             const result = await this.platformUtilsService.showDialog(
                 this.i18nService.t('updateEncryptionKeyWarning') + ' ' +
+                this.i18nService.t('updateEncryptionKeyExportWarning') + ' ' +
                 this.i18nService.t('rotateEncKeyConfirmation'), this.i18nService.t('rotateEncKeyTitle'),
                 this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
             if (!result) {
@@ -159,5 +164,32 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
         }
 
         await this.apiService.postAccountKey(request);
+
+        await this.updateEmergencyAccesses(encKey[0]);
+    }
+
+    private async updateEmergencyAccesses(encKey: SymmetricCryptoKey) {
+        const emergencyAccess = await this.apiService.getEmergencyAccessTrusted();
+        const allowedStatuses = [
+            EmergencyAccessStatusType.Confirmed,
+            EmergencyAccessStatusType.RecoveryInitiated,
+            EmergencyAccessStatusType.RecoveryApproved,
+        ];
+
+        const filteredAccesses = emergencyAccess.data.filter(d => allowedStatuses.includes(d.status));
+
+        for (const details of filteredAccesses) {
+            const publicKeyResponse = await this.apiService.getUserPublicKey(details.granteeId);
+            const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+
+            const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+
+            const updateRequest = new EmergencyAccessUpdateRequest();
+            updateRequest.type = details.type;
+            updateRequest.waitTimeDays = details.waitTimeDays;
+            updateRequest.keyEncrypted = encryptedKey.encryptedString;
+
+            await this.apiService.putEmergencyAccess(details.id, updateRequest);
+        }
     }
 }

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

@@ -5,6 +5,9 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
+import { PlanType } from 'jslib/enums/planType';
+import { ProductType } from 'jslib/enums/productType';
+
 import { OrganizationPlansComponent } from './organization-plans.component';
 
 @Component({
@@ -18,8 +21,15 @@ export class CreateOrganizationComponent implements OnInit {
 
     ngOnInit() {
         const queryParamsSub = this.route.queryParams.subscribe(async (qParams) => {
-            if (qParams.plan === 'families' || qParams.plan === 'teams' || qParams.plan === 'enterprise') {
-                this.orgPlansComponent.plan = qParams.plan;
+            if (qParams.plan === 'families') {
+                this.orgPlansComponent.plan = PlanType.FamiliesAnnually;
+                this.orgPlansComponent.product = ProductType.Families;
+            } else if (qParams.plan === 'teams') {
+                this.orgPlansComponent.plan = PlanType.TeamsAnnually;
+                this.orgPlansComponent.product = ProductType.Teams;
+            } else if (qParams.plan === 'enterprise') {
+                this.orgPlansComponent.plan = PlanType.EnterpriseAnnually;
+                this.orgPlansComponent.product = ProductType.Enterprise;
             }
             if (queryParamsSub != null) {
                 queryParamsSub.unsubscribe();

src/app/settings/emergency-access-add-edit.component.html

@@ -0,0 +1,76 @@
+<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" id="userAddEditTitle">
+                    <span class="badge badge-primary" *ngIf="readOnly">{{'premium' | i18n}}</span>
+                    {{title}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *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">
+                <ng-container *ngIf="!editMode">
+                    <p>{{'inviteEmergencyContactDesc' | i18n}}</p>
+                    <div class="form-group mb-4">
+                        <label for="email">{{'email' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required>
+                    </div>
+                </ng-container>
+                <h3>
+                    {{'userAccess' | 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="emergencyTypeView"
+                        [value]="emergencyAccessType.View" [(ngModel)]="type">
+                    <label class="form-check-label" for="emergencyTypeView">
+                        {{'view' | i18n}}
+                        <small>{{'viewDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <div class="form-check mt-2 form-check-block">
+                    <input class="form-check-input" type="radio" name="userType" id="emergencyTypeTakeover"
+                        [value]="emergencyAccessType.Takeover" [(ngModel)]="type" [disabled]="readOnly">
+                    <label class="form-check-label" for="emergencyTypeTakeover">
+                        {{'takeover' | i18n}}
+                        <small>{{'takeoverDesc' | i18n}}</small>
+                    </label>
+                </div>
+                <div class="form-group col-6 mt-4">
+                    <label for="waitTime">{{'waitTime' | i18n}}</label>
+                    <select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
+                        <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>
+                    </select>
+                    <small class="text-muted">{{'waitTimeDesc' | i18n}}</small>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary" [disabled]="loading || readOnly">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="loading"></i>
+                    <span *ngIf="!loading">{{'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"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

src/app/settings/emergency-access-add-edit.component.ts

@@ -0,0 +1,99 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { EmergencyAccessType } from 'jslib/enums/emergencyAccessType';
+import { EmergencyAccessInviteRequest } from 'jslib/models/request/emergencyAccessInviteRequest';
+import { EmergencyAccessUpdateRequest } from 'jslib/models/request/emergencyAccessUpdateRequest';
+
+@Component({
+    selector: 'emergency-access-add-edit',
+    templateUrl: 'emergency-access-add-edit.component.html',
+})
+export class EmergencyAccessAddEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() emergencyAccessId: string;
+    @Output() onSaved = new EventEmitter();
+    @Output() onDeleted = new EventEmitter();
+
+    loading = true;
+    readOnly: boolean = false;
+    editMode: boolean = false;
+    title: string;
+    email: string;
+    type: EmergencyAccessType = EmergencyAccessType.View;
+
+    formPromise: Promise<any>;
+
+    emergencyAccessType = EmergencyAccessType;
+    waitTimes: { name: string; value: number; }[];
+    waitTime: number;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private toasterService: ToasterService) { }
+
+    async ngOnInit() {
+        this.editMode = this.loading = this.emergencyAccessId != null;
+
+        this.waitTimes = [
+            { name: this.i18nService.t('oneDay'), value: 1 },
+            { name: this.i18nService.t('days', '2'), value: 2 },
+            { name: this.i18nService.t('days', '7'), value: 7 },
+            { name: this.i18nService.t('days', '14'), value: 14 },
+            { name: this.i18nService.t('days', '30'), value: 30 },
+            { name: this.i18nService.t('days', '90'), value: 90 },
+        ];
+
+        if (this.editMode) {
+            this.editMode = true;
+            this.title = this.i18nService.t('editEmergencyContact');
+            try {
+                const emergencyAccess = await this.apiService.getEmergencyAccess(this.emergencyAccessId);
+                this.type = emergencyAccess.type;
+                this.waitTime = emergencyAccess.waitTimeDays;
+            } catch { }
+        } else {
+            this.title = this.i18nService.t('inviteEmergencyContact');
+            this.waitTime = this.waitTimes[2].value;
+        }
+
+        this.loading = false;
+    }
+
+    async submit() {
+        try {
+            if (this.editMode) {
+                const request = new EmergencyAccessUpdateRequest();
+                request.type = this.type;
+                request.waitTimeDays = this.waitTime;
+
+                this.formPromise = this.apiService.putEmergencyAccess(this.emergencyAccessId, request);
+            } else {
+                const request = new EmergencyAccessInviteRequest();
+                request.email = this.email.trim();
+                request.type = this.type;
+                request.waitTimeDays = this.waitTime;
+
+                this.formPromise = this.apiService.postEmergencyAccessInvite(request);
+            }
+
+            await this.formPromise;
+            this.toasterService.popAsync('success', null,
+                this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
+            this.onSaved.emit();
+        } catch { }
+    }
+
+    async delete() {
+        this.onDeleted.emit();
+    }
+}

src/app/settings/emergency-access-confirm.component.html

@@ -0,0 +1,38 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
+    <div class="modal-dialog" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                <h2 class="modal-title" id="confirmUserTitle">
+                    {{'confirmUser' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    {{'fingerprintEnsureIntegrityVerify' | i18n}}
+                    <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener">
+                        {{'learnMore' | i18n}}</a>
+                </p>
+                <p><code>{{fingerprint}}</code></p>
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="dontAskAgain" name="DontAskAgain"
+                        [(ngModel)]="dontAskAgain">
+                    <label class="form-check-label" for="dontAskAgain">
+                        {{'dontAskFingerprintAgain' | i18n}}
+                    </label>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'confirm' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/settings/emergency-access-confirm.component.ts

@@ -0,0 +1,62 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+
+import { Utils } from 'jslib/misc/utils';
+
+@Component({
+    selector: 'emergency-access-confirm',
+    templateUrl: 'emergency-access-confirm.component.html',
+})
+export class EmergencyAccessConfirmComponent implements OnInit {
+    @Input() name: string;
+    @Input() userId: string;
+    @Input() emergencyAccessId: string;
+    @Input() formPromise: Promise<any>;
+    @Output() onConfirmed = new EventEmitter();
+
+    dontAskAgain = false;
+    loading = true;
+    fingerprint: string;
+
+    constructor(private apiService: ApiService, private cryptoService: CryptoService,
+        private storageService: StorageService) { }
+
+    async ngOnInit() {
+        try {
+            const publicKeyResponse = await this.apiService.getUserPublicKey(this.userId);
+            if (publicKeyResponse != null) {
+                const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+                const fingerprint = await this.cryptoService.getFingerprint(this.userId, publicKey.buffer);
+                if (fingerprint != null) {
+                    this.fingerprint = fingerprint.join('-');
+                }
+            }
+        } catch { }
+        this.loading = false;
+    }
+
+    async submit() {
+        if (this.loading) {
+            return;
+        }
+
+        if (this.dontAskAgain) {
+            await this.storageService.save(ConstantsService.autoConfirmFingerprints, true);
+        }
+
+        try {
+            this.onConfirmed.emit();
+        } catch { }
+    }
+}

src/app/settings/emergency-access-takeover.component.html

@@ -0,0 +1,44 @@
+<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" id="userAddEditTitle">
+                    {{'takeover' | i18n}}
+                    <small class="text-muted" *ngIf="name">{{name}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
+                <div class="row">
+                    <div class="col-6">
+                        <div class="form-group">
+                            <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="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
+                            <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"
+                                class="form-control" [(ngModel)]="masterPasswordRetype" required appInputVerbatim
+                                autocomplete="new-password">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/settings/emergency-access-takeover.component.ts

@@ -0,0 +1,81 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+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 { UserService } from 'jslib/abstractions/user.service';
+import { ChangePasswordComponent } from 'jslib/angular/components/change-password.component';
+
+import { KdfType } from 'jslib/enums/kdfType';
+import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
+import { EmergencyAccessPasswordRequest } from 'jslib/models/request/emergencyAccessPasswordRequest';
+
+@Component({
+    selector: 'emergency-access-takeover',
+    templateUrl: 'emergency-access-takeover.component.html',
+})
+export class EmergencyAccessTakeoverComponent extends ChangePasswordComponent implements OnInit {
+    @Output() onDone = new EventEmitter();
+    @Input() emergencyAccessId: string;
+    @Input() name: string;
+    @Input() email: string;
+    @Input() kdf: KdfType;
+    @Input() kdfIterations: number;
+
+    formPromise: Promise<any>;
+
+    constructor(i18nService: I18nService, cryptoService: CryptoService,
+        messagingService: MessagingService, userService: UserService,
+        passwordGenerationService: PasswordGenerationService,
+        platformUtilsService: PlatformUtilsService, policyService: PolicyService,
+        private apiService: ApiService, private toasterService: ToasterService) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService);
+    }
+
+    // tslint:disable-next-line
+    async ngOnInit() { }
+
+    async submit() {
+        if (!await this.strongPassword()) {
+            return;
+        }
+
+        const takeoverResponse = await this.apiService.postEmergencyAccessTakeover(this.emergencyAccessId);
+
+        const oldKeyBuffer = await this.cryptoService.rsaDecrypt(takeoverResponse.keyEncrypted);
+        const oldEncKey = new SymmetricCryptoKey(oldKeyBuffer);
+
+        if (oldEncKey == null) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), this.i18nService.t('unexpectedError'));
+            return;
+        }
+
+        const key = await this.cryptoService.makeKey(this.masterPassword, this.email, takeoverResponse.kdf, takeoverResponse.kdfIterations);
+        const masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
+
+        const encKey = await this.cryptoService.remakeEncKey(key, oldEncKey);
+
+        const request = new EmergencyAccessPasswordRequest();
+        request.newMasterPasswordHash = masterPasswordHash;
+        request.key = encKey[1].encryptedString;
+
+        this.apiService.postEmergencyAccessPassword(this.emergencyAccessId, request);
+
+        try {
+            this.onDone.emit();
+        } catch { }
+    }
+}

src/app/settings/emergency-access-view.component.html

@@ -0,0 +1,31 @@
+<div class="page-header">
+    <h1>{{'vault' | i18n}}</h1>
+</div>
+<div class="mt-4">
+    <ng-container *ngIf="ciphers.length">
+        <table class="table table-hover table-list table-ciphers">
+            <tbody>
+                <tr *ngFor="let c of ciphers">
+                    <td class="table-list-icon">
+                        <app-vault-icon [cipher]="c"></app-vault-icon>
+                    </td>
+                    <td class="reduced-lh wrap">
+                        <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
+                        <br>
+                        <small>{{c.subTitle}}</small>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </ng-container>
+</div>
+<ng-template #cipherAddEdit></ng-template>

src/app/settings/emergency-access-view.component.ts

@@ -0,0 +1,94 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+
+import { CipherData } from 'jslib/models/data';
+import { Cipher, SymmetricCryptoKey } from 'jslib/models/domain';
+import { EmergencyAccessViewResponse } from 'jslib/models/response/emergencyAccessResponse';
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import { ModalComponent } from '../modal.component';
+
+import { EmergencyAddEditComponent } from './emergency-add-edit.component';
+
+@Component({
+    selector: 'emergency-access-view',
+    templateUrl: 'emergency-access-view.component.html',
+})
+export class EmergencyAccessViewComponent implements OnInit {
+    @ViewChild('cipherAddEdit', { read: ViewContainerRef, static: true }) cipherAddEditModalRef: ViewContainerRef;
+
+    id: string;
+    ciphers: CipherView[] = [];
+
+    private modal: ModalComponent = null;
+
+    constructor(private cipherService: CipherService, private cryptoService: CryptoService,
+        private componentFactoryResolver: ComponentFactoryResolver, private router: Router,
+        private route: ActivatedRoute, private apiService: ApiService) { }
+
+    ngOnInit() {
+        this.route.params.subscribe((qParams) => {
+            if (qParams.id == null) {
+                return this.router.navigate(['settings/emergency-access']);
+            }
+
+            this.id = qParams.id;
+
+            this.load();
+        });
+    }
+
+    selectCipher(cipher: CipherView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.cipherAddEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EmergencyAddEditComponent>(EmergencyAddEditComponent, this.cipherAddEditModalRef);
+
+        childComponent.cipherId = cipher == null ? null : cipher.id;
+        childComponent.cipher = cipher;
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
+        return childComponent;
+    }
+
+    async load() {
+        const response = await this.apiService.postEmergencyAccessView(this.id);
+        this.ciphers = await this.getAllCiphers(response);
+    }
+
+    protected async getAllCiphers(response: EmergencyAccessViewResponse): Promise<CipherView[]> {
+        const ciphers = response.ciphers;
+
+        const decCiphers: CipherView[] = [];
+        const oldKeyBuffer = await this.cryptoService.rsaDecrypt(response.keyEncrypted);
+        const oldEncKey = new SymmetricCryptoKey(oldKeyBuffer);
+
+        const promises: any[] = [];
+        ciphers.forEach((cipherResponse) => {
+            const cipherData = new CipherData(cipherResponse);
+            const cipher = new Cipher(cipherData);
+            promises.push(cipher.decrypt(oldEncKey).then((c) => decCiphers.push(c)));
+        });
+
+        await Promise.all(promises);
+        decCiphers.sort(this.cipherService.getLocaleSortingFunction());
+
+        return decCiphers;
+    }
+}

src/app/settings/emergency-access.component.html

@@ -0,0 +1,159 @@
+<div class="page-header">
+    <h1>{{'emergencyAccess' | i18n}}</h1>
+</div>
+<p>
+    {{'emergencyAccessDesc' | i18n}}
+    <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener">
+        {{'learnMore' | i18n}}.
+    </a>
+</p>
+
+<div class="page-header d-flex">
+    <h2>
+        {{'trustedEmergencyContacts' | i18n}}
+        <a href="#" appStopClick class="badge badge-primary" *ngIf="!canAccessPremium" (click)="premiumRequired()">
+            {{'premium' | i18n}}
+        </a>
+    </h2>
+    <div class="ml-auto d-flex">
+        <button class="btn btn-sm btn-outline-primary ml-3" type="button" (click)="invite()" [disabled]="!canAccessPremium">
+            <i aria-hidden="true" class="fa fa-plus fa-fw"></i>
+            {{'addEmergencyContact' |i18n}}
+        </button>
+    </div>
+</div>
+
+<table class="table table-hover table-list mb-0" *ngIf="trustedContacts && trustedContacts.length">
+    <tbody>
+        <tr *ngFor="let c of trustedContacts; let i = index">
+            <td width="30">
+                <app-avatar [data]="c.name || c.email" [email]="c.email" size="25" [circle]="true"
+                    [fontSize]="14"></app-avatar>
+            </td>
+            <td>
+                <a href="#" appStopClick (click)="edit(c)">{{c.email}}</a>
+                <span class="badge badge-secondary"
+                    *ngIf="c.status === emergencyAccessStatusType.Invited">{{'invited' | i18n}}</span>
+                <span class="badge badge-warning"
+                    *ngIf="c.status === emergencyAccessStatusType.Accepted">{{'accepted' | i18n}}</span>
+                <span class="badge badge-warning"
+                    *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated">{{'emergencyAccessRecoveryInitiated' | i18n}}</span>
+                <span class="badge badge-success"
+                    *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{'emergencyAccessRecoveryApproved' | i18n}}</span>
+                
+                <span class="badge badge-primary"
+                    *ngIf="c.type === emergencyAccessType.View">{{'view' | i18n}}</span>
+                <span class="badge badge-primary"
+                    *ngIf="c.type === emergencyAccessType.Takeover">{{'takeover' | i18n}}</span>
+
+                <small class="text-muted d-block" *ngIf="c.name">{{c.name}}</small>
+            </td>
+            <td class="table-list-options">
+                <div class="dropdown" appListDropdown>
+                    <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        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(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.Invited">
+                            <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                            {{'resendInvitation' | i18n}}
+                        </a>
+                        <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.Accepted">
+                            <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                            {{'confirm' | i18n}}
+                        </a>
+                        <a class="dropdown-item text-success" href="#" appStopClick (click)="approve(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated">
+                            <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                            {{'approve' | i18n}}
+                        </a>
+                        <a class="dropdown-item text-warning" href="#" appStopClick (click)="reject(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated || c.status === emergencyAccessStatusType.RecoveryApproved">
+                            <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                            {{'reject' | i18n}}
+                        </a>
+                        <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(c)">
+                            <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                            {{'remove' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+<p *ngIf="!trustedContacts || !trustedContacts.length">{{'noTrustedContacts' | i18n}}</p>
+
+<div class="page-header spaced-header">
+    <h2>{{'designatedEmergencyContacts' | i18n}}</h2>
+</div>
+
+<table class="table table-hover table-list mb-0" *ngIf="grantedContacts && grantedContacts.length">
+    <tbody>
+        <tr *ngFor="let c of grantedContacts; let i = index">
+            <td width="30">
+                <app-avatar [data]="c.name || c.email" [email]="c.email" size="25" [circle]="true"
+                    [fontSize]="14"></app-avatar>
+            </td>
+            <td>
+                <span>{{c.email}}</span>
+                <span class="badge badge-secondary"
+                    *ngIf="c.status === emergencyAccessStatusType.Invited">{{'invited' | i18n}}</span>
+                <span class="badge badge-warning"
+                    *ngIf="c.status === emergencyAccessStatusType.Accepted">{{'accepted' | i18n}}</span>
+                <span class="badge badge-warning"
+                    *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated">{{'emergencyAccessRecoveryInitiated' | i18n}}</span>
+                <span class="badge badge-success"
+                    *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{'emergencyAccessRecoveryApproved' | i18n}}</span>
+                
+                <span class="badge badge-primary"
+                    *ngIf="c.type === emergencyAccessType.View">{{'view' | i18n}}</span>
+                <span class="badge badge-primary"
+                    *ngIf="c.type === emergencyAccessType.Takeover">{{'takeover' | i18n}}</span>
+
+                <small class="text-muted d-block" *ngIf="c.name">{{c.name}}</small>
+            </td>
+            <td class="table-list-options">
+                <div class="dropdown" appListDropdown>
+                    <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        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)="requestAccess(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.Confirmed">
+                            <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                            {{'requestAccess' | i18n}}
+                        </a>
+                        <a class="dropdown-item" href="#" appStopClick (click)="takeover(c)"
+                            *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved && c.type === emergencyAccessType.Takeover">
+                            <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+                            {{'takeover' | i18n}}
+                        </a>
+                        <a class="dropdown-item" [routerLink]="c.id"
+                            *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved && c.type === emergencyAccessType.View">
+                            <i class="fa fa-fw fa-eye" aria-hidden="true"></i>
+                            {{'view' | i18n}}
+                        </a>
+                        <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(c)">
+                            <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                            {{'remove' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+<p *ngIf="!grantedContacts || !grantedContacts.length">{{'noGrantedAccess' | i18n}}</p>
+
+<ng-template #addEdit></ng-template>
+<ng-template #takeoverTemplate></ng-template>
+<ng-template #confirmTemplate></ng-template>

src/app/settings/emergency-access.component.ts

@@ -0,0 +1,276 @@
+import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { ToasterService } from 'angular2-toaster';
+
+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 { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { EmergencyAccessStatusType } from 'jslib/enums/emergencyAccessStatusType';
+import { EmergencyAccessType } from 'jslib/enums/emergencyAccessType';
+import { Utils } from 'jslib/misc/utils';
+import { EmergencyAccessConfirmRequest } from 'jslib/models/request/emergencyAccessConfirmRequest';
+import { EmergencyAccessGranteeDetailsResponse, EmergencyAccessGrantorDetailsResponse } from 'jslib/models/response/emergencyAccessResponse';
+import { ConstantsService } from 'jslib/services/constants.service';
+
+import { ModalComponent } from '../modal.component';
+import { EmergencyAccessAddEditComponent } from './emergency-access-add-edit.component';
+import { EmergencyAccessConfirmComponent } from './emergency-access-confirm.component';
+import { EmergencyAccessTakeoverComponent } from './emergency-access-takeover.component';
+
+@Component({
+    selector: 'emergency-access',
+    templateUrl: 'emergency-access.component.html',
+})
+export class EmergencyAccessComponent implements OnInit {
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('takeoverTemplate', { read: ViewContainerRef, static: true}) takeoverModalRef: ViewContainerRef;
+    @ViewChild('confirmTemplate', { read: ViewContainerRef, static: true }) confirmModalRef: ViewContainerRef;
+
+    canAccessPremium: boolean;
+    trustedContacts: EmergencyAccessGranteeDetailsResponse[];
+    grantedContacts: EmergencyAccessGrantorDetailsResponse[];
+    emergencyAccessType = EmergencyAccessType;
+    emergencyAccessStatusType = EmergencyAccessStatusType;
+    actionPromise: Promise<any>;
+
+    private modal: ModalComponent = null;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService,
+        private toasterService: ToasterService, private cryptoService: CryptoService,
+        private storageService: StorageService, private userService: UserService,
+        private messagingService: MessagingService) { }
+
+    async ngOnInit() {
+        this.canAccessPremium = await this.userService.canAccessPremium();
+        this.load();
+    }
+
+    async load() {
+        this.trustedContacts = (await this.apiService.getEmergencyAccessTrusted()).data;
+        this.grantedContacts = (await this.apiService.getEmergencyAccessGranted()).data;
+    }
+
+    async premiumRequired() {
+        if (!this.canAccessPremium) {
+            this.messagingService.send('premiumRequired');
+            return;
+        }
+    }
+
+    edit(details: EmergencyAccessGranteeDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EmergencyAccessAddEditComponent>(
+            EmergencyAccessAddEditComponent, this.addEditModalRef);
+
+        childComponent.name = details?.name ?? details?.email;
+        childComponent.emergencyAccessId = details?.id;
+        childComponent.readOnly = !this.canAccessPremium;
+        childComponent.onSaved.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+        childComponent.onDeleted.subscribe(() => {
+            this.modal.close();
+            this.remove(details);
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    invite() {
+        this.edit(null);
+    }
+
+    async reinvite(contact: EmergencyAccessGranteeDetailsResponse) {
+        if (this.actionPromise != null) {
+            return;
+        }
+        this.actionPromise = this.apiService.postEmergencyAccessReinvite(contact.id);
+        await this.actionPromise;
+        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', contact.email));
+        this.actionPromise = null;
+    }
+
+    async confirm(contact: EmergencyAccessGranteeDetailsResponse) {
+        function updateUser() {
+            contact.status = EmergencyAccessStatusType.Confirmed;
+        }
+
+        if (this.actionPromise != null) {
+            return;
+        }
+
+        const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
+        if (autoConfirm == null || !autoConfirm) {
+            if (this.modal != null) {
+                this.modal.close();
+            }
+
+            const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            this.modal = this.confirmModalRef.createComponent(factory).instance;
+            const childComponent = this.modal.show<EmergencyAccessConfirmComponent>(
+                EmergencyAccessConfirmComponent, this.confirmModalRef);
+
+            childComponent.name = contact?.name ?? contact?.email;
+            childComponent.emergencyAccessId = contact.id;
+            childComponent.userId = contact?.granteeId;
+            childComponent.onConfirmed.subscribe(async () => {
+                this.modal.close();
+
+                childComponent.formPromise = this.doConfirmation(contact);
+                await childComponent.formPromise;
+
+                updateUser();
+                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', contact.name || contact.email));
+            });
+
+            this.modal.onClosed.subscribe(() => {
+                this.modal = null;
+            });
+            return;
+        }
+
+        this.actionPromise = this.doConfirmation(contact);
+        await this.actionPromise;
+        updateUser();
+
+        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', contact.name || contact.email));
+        this.actionPromise = null;
+    }
+
+    async remove(details: EmergencyAccessGranteeDetailsResponse | EmergencyAccessGrantorDetailsResponse) {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('removeUserConfirmation'), details.name || details.email,
+            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return false;
+        }
+
+        try {
+            await this.apiService.deleteEmergencyAccess(details.id);
+            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', details.name || details.email));
+
+            if (details instanceof EmergencyAccessGranteeDetailsResponse) {
+                this.removeGrantee(details);
+            } else {
+                this.removeGrantor(details);
+            }
+        } catch { }
+    }
+
+    async requestAccess(details: EmergencyAccessGrantorDetailsResponse) {
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('requestAccessConfirmation', details.waitTimeDays.toString()),
+            details.name || details.email,
+            this.i18nService.t('requestAccess'),
+            this.i18nService.t('no'),
+            'warning',
+        );
+
+        if (!confirmed) {
+            return false;
+        }
+
+        await this.apiService.postEmergencyAccessInitiate(details.id);
+
+        details.status = EmergencyAccessStatusType.RecoveryInitiated;
+        this.toasterService.popAsync('success', null, this.i18nService.t('requestSent', details.name || details.email));
+    }
+
+    async approve(details: EmergencyAccessGranteeDetailsResponse) {
+        const type = this.i18nService.t(details.type === EmergencyAccessType.View ? 'view' : 'takeover');
+
+        const confirmed = await this.platformUtilsService.showDialog(
+            this.i18nService.t('approveAccessConfirmation', details.name, type),
+            details.name || details.email,
+            this.i18nService.t('approve'),
+            this.i18nService.t('no'),
+            'warning',
+        );
+
+        if (!confirmed) {
+            return false;
+        }
+
+        await this.apiService.postEmergencyAccessApprove(details.id);
+        details.status = EmergencyAccessStatusType.RecoveryApproved;
+
+        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyApproved', details.name || details.email));
+    }
+
+    async reject(details: EmergencyAccessGranteeDetailsResponse) {
+        await this.apiService.postEmergencyAccessReject(details.id);
+        details.status = EmergencyAccessStatusType.Confirmed;
+
+        this.toasterService.popAsync('success', null, this.i18nService.t('emergencyRejected', details.name || details.email));
+    }
+
+    async takeover(details: EmergencyAccessGrantorDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.addEditModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<EmergencyAccessTakeoverComponent>(
+            EmergencyAccessTakeoverComponent, this.takeoverModalRef);
+
+        childComponent.name = details != null ? details.name || details.email : null;
+        childComponent.email = details.email;
+        childComponent.emergencyAccessId = details != null ? details.id : null;
+
+        childComponent.onDone.subscribe(() => {
+            this.modal.close();
+            this.toasterService.popAsync('success', null, this.i18nService.t('passwordResetFor', details.name || details.email));
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    private removeGrantee(details: EmergencyAccessGranteeDetailsResponse) {
+        const index = this.trustedContacts.indexOf(details);
+        if (index > -1) {
+            this.trustedContacts.splice(index, 1);
+        }
+    }
+
+    private removeGrantor(details: EmergencyAccessGrantorDetailsResponse) {
+        const index = this.grantedContacts.indexOf(details);
+        if (index > -1) {
+            this.grantedContacts.splice(index, 1);
+        }
+    }
+
+    // Encrypt the master password hash using the grantees public key, and send it to bitwarden for escrow.
+    private async doConfirmation(details: EmergencyAccessGranteeDetailsResponse) {
+        const encKey = await this.cryptoService.getEncKey();
+        const publicKeyResponse = await this.apiService.getUserPublicKey(details.granteeId);
+        const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+
+        try {
+            // tslint:disable-next-line
+            console.log('User\'s fingerprint: ' +
+                (await this.cryptoService.getFingerprint(details.granteeId, publicKey.buffer)).join('-'));
+        } catch { }
+
+        const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+        const request = new EmergencyAccessConfirmRequest();
+        request.key = encryptedKey.encryptedString;
+        await this.apiService.postEmergencyAccessConfirm(details.id, request);
+    }
+}

src/app/settings/emergency-add-edit.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+
+import { AuditService } from 'jslib/abstractions/audit.service';
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
+import { EventService } from 'jslib/abstractions/event.service';
+import { FolderService } from 'jslib/abstractions/folder.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+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 { TotpService } from 'jslib/abstractions/totp.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { Cipher } from 'jslib/models/domain/cipher';
+
+import { AddEditComponent as BaseAddEditComponent } from '../vault/add-edit.component';
+
+@Component({
+    selector: 'app-org-vault-add-edit',
+    templateUrl: '../vault/add-edit.component.html',
+})
+export class EmergencyAddEditComponent extends BaseAddEditComponent {
+    originalCipher: Cipher = null;
+    viewOnly = true;
+
+    constructor(cipherService: CipherService, folderService: FolderService,
+        i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        auditService: AuditService, stateService: StateService,
+        userService: UserService, collectionService: CollectionService,
+        totpService: TotpService, passwordGenerationService: PasswordGenerationService,
+        messagingService: MessagingService, eventService: EventService, policyService: PolicyService) {
+        super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
+            userService, collectionService, totpService, passwordGenerationService, messagingService,
+            eventService, policyService);
+    }
+
+    async load() {
+        this.title = this.i18nService.t('viewItem');
+    }
+
+    protected async loadCipher() {
+        return Promise.resolve(this.originalCipher);
+    }
+}

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

@@ -1,4 +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
+    {{'linkSso' | i18n}}
 </a>

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

@@ -24,7 +24,7 @@ import { Organization } from 'jslib/models/domain/organization';
 })
 export class LinkSsoComponent extends SsoComponent implements AfterContentInit {
     @Input() organization: Organization;
-    returnUri: string = '/settings/organizations'
+    returnUri: string = '/settings/organizations';
 
     constructor(platformUtilsService: PlatformUtilsService, i18nService: I18nService,
         apiService: ApiService, authService: AuthService,

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

@@ -54,6 +54,9 @@
                 <small *ngIf="selectableProduct.hasSelfHost">• {{'onPremHostingOptional' | i18n}}</small>
                 <small *ngIf="selectableProduct.hasSso">• {{'includeSsoAuthentication' | i18n}}</small>
                 <small *ngIf="selectableProduct.hasPolicies">• {{'includeEnterprisePolicies' | i18n}}</small>
+                <small *ngIf="selectableProduct.trialPeriodDays">•
+                    {{'xDayFreeTrial' | i18n : selectableProduct.trialPeriodDays }}
+                </small>
             </ng-container>
             <ng-template #fullFeatureList>
                 <small *ngIf="selectableProduct.product == productTypes.Free">•
@@ -206,21 +209,30 @@
             </label>
         </div>
         <hr class="my-3">
-        <div class="text-lg">
-            <strong>{{'total' | i18n}}:</strong> {{subtotal | currency:'USD $'}} /{{selectedPlanInterval | i18n}}
+        <h2 class="spaced-header mb-4">{{ (createOrganization ? 'paymentInformation' : 'billingInformation') | i18n}}</h2>
+        <app-payment *ngIf="createOrganization" [hideCredit]="true"></app-payment>
+        <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
+        <div id="price" class="my-4">
+            <div class="text-muted text-sm">
+                {{ 'planPrice' | i18n }}: {{ subtotal | currency: 'USD $' }}
+                <br />
+                <ng-container>
+                    {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
+                </ng-container>
+            </div>
+            <hr class="my-1 col-3 ml-0">
+            <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
+                {{total | currency:'USD $'}}/{{selectedPlanInterval | i18n}}</p>
         </div>
-        <ng-container *ngIf="createOrganization">
-            <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>
+        <small class="text-muted font-italic">{{'paymentChargedWithTrial' | i18n : (selectedPlanInterval | i18n) }}</small>
         <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>
+            {{'paymentCharged' | i18n : (selectedPlanInterval | i18n) }}</small>
+    </div>
+    <div *ngIf="singleOrgPolicyBlock" class="mt-4">
+        <app-callout [type]="'error'">{{'singleOrgBlockCreateMessage' | i18n}}</app-callout>
     </div>
     <div class="mt-4">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">

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

@@ -17,12 +17,14 @@ 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 { PolicyService } from 'jslib/abstractions/policy.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 
 import { PaymentComponent } from './payment.component';
 import { TaxInfoComponent } from './tax-info.component';
 
 import { PlanType } from 'jslib/enums/planType';
+import { PolicyType } from 'jslib/enums/policyType';
 import { ProductType } from 'jslib/enums/productType';
 
 import { OrganizationCreateRequest } from 'jslib/models/request/organizationCreateRequest';
@@ -56,13 +58,15 @@ export class OrganizationPlansComponent implements OnInit {
     businessName: string;
     productTypes = ProductType;
     formPromise: Promise<any>;
+    singleOrgPolicyBlock: boolean = false;
 
     plans: PlanResponse[];
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private analytics: Angulartics2, private toasterService: ToasterService,
         platformUtilsService: PlatformUtilsService, private cryptoService: CryptoService,
-        private router: Router, private syncService: SyncService) {
+        private router: Router, private syncService: SyncService,
+        private policyService: PolicyService) {
         this.selfHosted = platformUtilsService.isSelfHost();
     }
 
@@ -70,6 +74,9 @@ export class OrganizationPlansComponent implements OnInit {
         if (!this.selfHosted) {
             const plans = await this.apiService.getPlans();
             this.plans = plans.data;
+            if (this.product === ProductType.Enterprise || this.product === ProductType.Teams) {
+                this.ownedBusiness = true;
+            }
         }
         this.loading = false;
     }
@@ -155,6 +162,16 @@ export class OrganizationPlansComponent implements OnInit {
         return subTotal;
     }
 
+    get taxCharges() {
+        return this.taxComponent != null && this.taxComponent.taxRate != null ?
+            (this.taxComponent.taxRate / 100) * this.subtotal :
+            0;
+    }
+
+    get total() {
+        return (this.subtotal + this.taxCharges) || 0;
+    }
+
     changedProduct() {
         this.plan = this.selectablePlans[0].type;
         if (!this.selectedPlan.hasPremiumAccessOption) {
@@ -175,7 +192,8 @@ export class OrganizationPlansComponent implements OnInit {
         if (!this.ownedBusiness || this.selectedPlan.canBeUsedByBusiness) {
             return;
         }
-        this.plan = PlanType.TeamsMonthly;
+        this.product = ProductType.Teams;
+        this.plan = PlanType.TeamsAnnually;
     }
 
     changedCountry() {
@@ -193,6 +211,16 @@ export class OrganizationPlansComponent implements OnInit {
     }
 
     async submit() {
+        if (this.singleOrgPolicyBlock) {
+            return;
+        } else {
+            const policies = await this.policyService.getAll(PolicyType.SingleOrg);
+            this.singleOrgPolicyBlock = policies.some(policy => policy.enabled);
+            if (this.singleOrgPolicyBlock) {
+                return;
+            }
+        }
+
         let files: FileList = null;
         if (this.createOrganization && this.selfHosted) {
             const fileEl = document.getElementById('file') as HTMLInputElement;
@@ -264,6 +292,9 @@ export class OrganizationPlansComponent implements OnInit {
                     request.premiumAccessAddon = this.selectedPlan.hasPremiumAccessOption &&
                         this.premiumAccessAddon;
                     request.planType = this.selectedPlan.type;
+                    request.billingAddressCountry = this.taxComponent.taxInfo.country;
+                    request.billingAddressPostalCode = this.taxComponent.taxInfo.postalCode;
+
                     const result = await this.apiService.postOrganizationUpgrade(this.organizationId, request);
                     if (!result.success && result.paymentIntentClientSecret != null) {
                         await this.paymentComponent.handleStripeCardPayment(result.paymentIntentClientSecret, null);

src/app/settings/organizations.component.html

@@ -78,7 +78,7 @@
                                     <a *ngIf="o.ssoBound; else linkSso" class="dropdown-item" href="#" appStopClick
                                         (click)="unlinkSso(o)">
                                         <i class="fa fa-fw fa-chain-broken" aria-hidden="true"></i>
-                                        Unlink SSO
+                                        {{'unlinkSso' | i18n}}
                                     </a>
                                     <ng-template #linkSso>
                                         <app-link-sso [organization]="o">

src/app/settings/payment.component.html

@@ -39,13 +39,15 @@
             <div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
         </div>
         <div class="form-group col-4">
-            <label for="stripe-card-cvc-element" class="d-flex">
-                {{'securityCode' | i18n}}
+            <div class="d-flex">
+                <label for="stripe-card-cvc-element">
+                    {{'securityCode' | i18n}}
+                </label>
                 <a href="https://www.cvvnumber.com/cvv.html" tabindex="-1" target="_blank" rel="noopener noreferrer"
                     class="ml-auto" appA11yTitle="{{'learnMore' | i18n}}">
                     <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
-            </label>
+            </div>
             <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
         </div>
     </div>

src/app/settings/premium.component.html

@@ -69,13 +69,22 @@
     <br> {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} GB &times; {{storageGbPrice | currency:'$'}} = {{additionalStorageTotal
     | currency:'$'}}
     <hr class="my-3">
-    <div class="text-lg">
-        <strong>{{'total' | i18n}}:</strong> {{total | currency:'USD $'}} /{{'year' | i18n}}
-    </div>
-    <small class="text-muted font-italic">{{'paymentChargedAnnually' | i18n}}</small>
     <h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
     <app-payment [hideBank]="true"></app-payment>
     <app-tax-info></app-tax-info>
+    <div id="price" class="my-4">
+        <div class="text-muted text-sm">
+            {{ 'planPrice' | i18n }}: {{ subtotal | currency: 'USD $' }}
+            <br />
+            <ng-container>
+                {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
+            </ng-container>
+        </div>
+        <hr class="my-1 col-3 ml-0">
+        <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
+            {{total | currency:'USD $'}}/{{'year' | i18n}}</p>
+    </div>
+    <small class="text-muted font-italic">{{'paymentChargedAnnually' | i18n}}</small>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
         <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'submit' | i18n}}</span>

src/app/settings/premium.component.ts

@@ -114,7 +114,17 @@ export class PremiumComponent implements OnInit {
         return this.storageGbPrice * Math.abs(this.additionalStorage || 0);
     }
 
+    get subtotal(): number {
+        return this.premiumPrice + this.additionalStorageTotal;
+    }
+
+    get taxCharges(): number {
+        return this.taxInfoComponent != null && this.taxInfoComponent.taxRate != null ?
+            (this.taxInfoComponent.taxRate / 100) * this.subtotal :
+            0;
+    }
+
     get total(): number {
-        return this.additionalStorageTotal + this.premiumPrice;
+        return (this.subtotal + this.taxCharges) || 0;
     }
 }

src/app/settings/settings.component.html

@@ -28,6 +28,9 @@
                     <a routerLink="domain-rules" class="list-group-item" routerLinkActive="active">
                         {{'domainRules' | i18n}}
                     </a>
+                    <a routerLink="emergency-access" class="list-group-item" routerLinkActive="active">
+                        {{'emergencyAccess' | i18n}}
+                    </a>
                 </div>
             </div>
         </div>

src/app/settings/tax-info.component.ts

@@ -7,6 +7,7 @@ import { ActivatedRoute } from '@angular/router';
 import { ApiService } from 'jslib/abstractions/api.service';
 import { OrganizationTaxInfoUpdateRequest } from 'jslib/models/request/organizationTaxInfoUpdateRequest';
 import { TaxInfoUpdateRequest } from 'jslib/models/request/taxInfoUpdateRequest';
+import { TaxRateResponse } from 'jslib/models/response/taxRateResponse';
 
 @Component({
     selector: 'app-tax-info',
@@ -28,6 +29,8 @@ export class TaxInfoComponent {
         includeTaxId: false,
     };
 
+    taxRates: TaxRateResponse[];
+
     private pristine: any = {
         taxId: null,
         line1: null,
@@ -77,9 +80,22 @@ export class TaxInfoComponent {
                 this.onCountryChanged.emit();
             }
         });
+
+        const taxRates = await this.apiService.getTaxRates();
+        this.taxRates = taxRates.data;
         this.loading = false;
     }
 
+    get taxRate() {
+        if (this.taxRates != null) {
+            const localTaxRate = this.taxRates.find(x =>
+                x.country === this.taxInfo.country &&
+                x.postalCode === this.taxInfo.postalCode
+            );
+            return localTaxRate?.rate ?? null;
+        }
+    }
+
     getTaxInfoRequest(): TaxInfoUpdateRequest {
         if (this.organizationId) {
             const request = new OrganizationTaxInfoUpdateRequest();

src/app/settings/two-factor-recovery.component.ts

@@ -30,8 +30,8 @@ export class TwoFactorRecoveryComponent {
             '<code style="font-family: Menlo, Monaco, Consolas, \'Courier New\', monospace;">' +
             this.code + '</code></div>' +
             '<p style="text-align: center;">' + new Date() + '</p>');
+        w.onafterprint = () => w.close();
         w.print();
-        w.close();
     }
 
     private formatString(s: string) {

src/app/tools/export.component.html

@@ -3,13 +3,13 @@
         <h1>{{'exportVault' | i18n}}</h1>
     </div>
     <p>{{'exportMasterPassword' | i18n}}</p>
-    <app-callout type="warning">{{'exportWarningDesc' | i18n}}</app-callout>
     <div class="row">
         <div class="form-group col-6">
             <label for="format">{{'fileFormat' | i18n}}</label>
             <select class="form-control" id="format" name="Format" [(ngModel)]="format">
                 <option value="json">.json</option>
                 <option value="csv">.csv</option>
+                <option value="encrypted_json">.json (Encrypted)</option>
             </select>
         </div>
     </div>

src/app/tools/export.component.ts

@@ -13,6 +13,8 @@ import { ExportComponent as BaseExportComponent } from 'jslib/angular/components
     templateUrl: 'export.component.html',
 })
 export class ExportComponent extends BaseExportComponent {
+    organizationId: string;
+
     constructor(cryptoService: CryptoService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, exportService: ExportService,
         eventService: EventService) {

src/app/tools/exposed-passwords-report.component.html

@@ -21,7 +21,12 @@
                         <app-vault-icon [cipher]="c"></app-vault-icon>
                     </td>
                     <td class="reduced-lh wrap">
-                        <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        <ng-container *ngIf="!organization || canManageCipher(c) ; else cantManage">
+                            <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        </ng-container>
+                        <ng-template #cantManage>
+                            <span>{{c.name}}</span>
+                        </ng-template>
                         <ng-container *ngIf="!organization && c.organizationId">
                             <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
                             <span class="sr-only">{{'shared' | i18n}}</span>

src/app/tools/exposed-passwords-report.component.ts

@@ -43,7 +43,7 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
         const exposedPasswordCiphers: CipherView[] = [];
         const promises: Promise<void>[] = [];
         allCiphers.forEach((c) => {
-            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '') {
+            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '' || c.isDeleted) {
                 return;
             }
             const promise = this.auditService.passwordLeaked(c.login.password).then((exposedCount) => {
@@ -61,4 +61,9 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
     protected getAllCiphers(): Promise<CipherView[]> {
         return this.cipherService.getAllDecrypted();
     }
+
+    protected canManageCipher(c: CipherView): boolean {
+        // this will only ever be false from the org view;
+        return true;
+    }
 }

src/app/tools/import.component.html

@@ -77,12 +77,11 @@
                 https://help.bitwarden.com/article/import-from-chrome/</a>
         </ng-container>
         <ng-container *ngIf="format === 'firefoxcsv'">
-            Use the
-            <a target="_blank" rel="noopener"
-                href="https://github.com/kspearrin/ff-password-exporter/blob/master/README.md#ff-password-exporter">
-                FF Password Exporter</a> application to export your passwords to a CSV file.
+             See detailed instructions on our help site at
+            <a target="_blank" rel="noopener" href="https://bitwarden.com/help/article/import-from-firefox/">
+                https://bitwarden.com/help/article/import-from-firefox/</a>.
         </ng-container>
-        <ng-container *ngIf="format === '1password1pif' || format === '1passwordwincsv'">
+        <ng-container *ngIf="format === '1password1pif' || format === '1passwordwincsv' || format === '1passwordmaccsv'">
             See detailed instructions on our help site at
             <a target="_blank" rel="noopener" href="https://help.bitwarden.com/article/import-from-1password/">
                 https://help.bitwarden.com/article/import-from-1password/</a>.

src/app/tools/import.component.ts

@@ -47,7 +47,7 @@ export class ImportComponent implements OnInit {
     }
 
     async submit() {
-        const importer = this.importService.getImporter(this.format, this.organizationId != null);
+        const importer = this.importService.getImporter(this.format, this.organizationId);
         if (importer === null) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('selectFormat'));

src/app/tools/inactive-two-factor-report.component.ts

@@ -45,7 +45,8 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
             const promises: Promise<void>[] = [];
             const docs = new Map<string, string>();
             allCiphers.forEach((c) => {
-                if (c.type !== CipherType.Login || (c.login.totp != null && c.login.totp !== '') || !c.login.hasUris) {
+                if (c.type !== CipherType.Login || (c.login.totp != null && c.login.totp !== '') || !c.login.hasUris ||
+                    c.isDeleted) {
                     return;
                 }
                 for (let i = 0; i < c.login.uris.length; i++) {

src/app/tools/reused-passwords-report.component.html

@@ -27,7 +27,12 @@
                         <app-vault-icon [cipher]="c"></app-vault-icon>
                     </td>
                     <td class="reduced-lh wrap">
-                        <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        <ng-container *ngIf="!organization || canManageCipher(c) ; else cantManage">
+                            <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        </ng-container>
+                        <ng-template #cantManage>
+                            <span>{{c.name}}</span>
+                        </ng-template>
                         <ng-container *ngIf="!organization && c.organizationId">
                             <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
                             <span class="sr-only">{{'shared' | i18n}}</span>

src/app/tools/reused-passwords-report.component.ts

@@ -37,7 +37,7 @@ export class ReusedPasswordsReportComponent extends CipherReportComponent implem
         const ciphersWithPasswords: CipherView[] = [];
         this.passwordUseMap = new Map<string, number>();
         allCiphers.forEach((c) => {
-            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '') {
+            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '' || c.isDeleted) {
                 return;
             }
             ciphersWithPasswords.push(c);
@@ -55,4 +55,9 @@ export class ReusedPasswordsReportComponent extends CipherReportComponent implem
     protected getAllCiphers(): Promise<CipherView[]> {
         return this.cipherService.getAllDecrypted();
     }
+
+    protected canManageCipher(c: CipherView): boolean {
+        // this will only ever be false from an organization view
+        return true;
+    }
 }

src/app/tools/unsecured-websites-report.component.ts

@@ -33,7 +33,7 @@ export class UnsecuredWebsitesReportComponent extends CipherReportComponent impl
     async setCiphers() {
         const allCiphers = await this.getAllCiphers();
         const unsecuredCiphers = allCiphers.filter((c) => {
-            if (c.type !== CipherType.Login || !c.login.hasUris) {
+            if (c.type !== CipherType.Login || !c.login.hasUris || c.isDeleted) {
                 return false;
             }
             return c.login.uris.some((u) => u.uri != null && u.uri.indexOf('http://') === 0);

src/app/tools/weak-passwords-report.component.html

@@ -27,7 +27,12 @@
                         <app-vault-icon [cipher]="c"></app-vault-icon>
                     </td>
                     <td class="reduced-lh wrap">
-                        <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        <ng-container *ngIf="!organization || canManageCipher(c) ; else cantManage">
+                            <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
+                        </ng-container>
+                        <ng-template #cantManage>
+                            <span>{{c.name}}</span>
+                        </ng-template>
                         <ng-container *ngIf="!organization && c.organizationId">
                             <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
                             <span class="sr-only">{{'shared' | i18n}}</span>

src/app/tools/weak-passwords-report.component.ts

@@ -40,7 +40,7 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
         const allCiphers = await this.getAllCiphers();
         const weakPasswordCiphers: CipherView[] = [];
         allCiphers.forEach((c) => {
-            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '') {
+            if (c.type !== CipherType.Login || c.login.password == null || c.login.password === '' || c.isDeleted) {
                 return;
             }
             const hasUsername = c.login.username != null && c.login.username.trim() !== '';
@@ -75,6 +75,11 @@ export class WeakPasswordsReportComponent extends CipherReportComponent implemen
         return this.cipherService.getAllDecrypted();
     }
 
+    protected canManageCipher(c: CipherView): boolean {
+        // this will only ever be false from the org view;
+        return true;
+    }
+
     private scoreKey(score: number): [string, string] {
         switch (score) {
             case 4: