New Crowdin updates (#1073)

* New translations messages.json (Romanian)

* 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 (Portuguese, Brazilian)

* New translations messages.json (Estonian)

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

* New translations messages.json (Latvian)

* New translations messages.json (Azerbaijani)

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

* New translations messages.json (Kannada)

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

* New translations messages.json (Swedish)

* New translations messages.json (French)

* 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 (Slovak)

* 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 (Russian)

.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

.gitattributes

@@ -0,0 +1,3 @@
+*.sh eol=lf
+.dockerignore eol=lf
+dockerfile eol=lf

.github/workflows/build.yml

@@ -0,0 +1,169 @@
+name: build
+
+on:
+  push:
+    branches-ignore:
+      - 'l10n_master'
+      - 'gh-pages'
+
+jobs:
+  cloc:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
+      - 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@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        with:
+          node-version: '14'
+
+      - name: Update NPM
+        run: |
+          npm install -g npm@7
+
+      - name: Print environment
+        run: |
+          whoami
+          node --version
+          npm --version
+          gulp --version
+          docker --version
+          echo "GitHub ref: $GITHUB_REF"
+          echo "GitHub event: $GITHUB_EVENT"
+
+      - name: Login to Azure
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "docker-password, 
+                    docker-username,
+                    dct-delegate-2-repo-passphrase,
+                    dct-delegate-2-key"
+
+      - name: Log into Docker
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+        env:
+          DOCKER_USERNAME: ${{ steps.retrieve-secrets.outputs.docker-username }}
+          DOCKER_PASSWORD: ${{ steps.retrieve-secrets.outputs.docker-password }}
+
+      - name: Setup Docker Trust
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: |
+          mkdir -p ~/.docker/trust/private
+
+          echo "$DCT_DELEGATE_KEY" > ~/.docker/trust/private/$DCT_DELEGATION_KEY_ID.key
+        env:
+          DCT_DELEGATION_KEY_ID: "c9bde8ec820701516491e5e03d3a6354e7bd66d05fa3df2b0062f68b116dc59c"
+          DCT_DELEGATE_KEY: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-key }}
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
+      - name: Restore
+        run: dotnet tool restore
+
+      - name: Build
+        run: |
+          echo -e "# Building Web\n"
+          echo "Building app"
+          echo "npm version $(npm --version)"
+          npm install
+          npm run dist:selfhost
+
+          echo -e "\nBuilding Docker image"
+          docker --version
+          docker build -t bitwarden/web .
+
+      - name: Tag rc branch
+        if: github.ref == 'refs/heads/rc'
+        run: docker tag bitwarden/web bitwarden/web:rc
+
+      - name: Tag dev
+        if: github.ref == 'refs/heads/master'
+        run: docker tag bitwarden/web bitwarden/web:dev
+
+      - name: List Docker images
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: docker images
+
+      - name: Push rc images
+        if: github.ref == 'refs/heads/rc'
+        run: docker push bitwarden/web:rc
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+
+      - name: Push dev images
+        if: github.ref == 'refs/heads/master'
+        run: docker push bitwarden/web:dev
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+
+      - name: Log out of Docker
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
+        run: docker logout
+
+  windows:
+    runs-on: windows-latest
+    steps:
+      - name: Set up NuGet
+        uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
+        with:
+          nuget-version: 'latest'
+
+      - name: Set up MSBuild
+        uses: microsoft/setup-msbuild@c26a08ba26249b81327e26f6ef381897b6a8754d
+
+      - name: Set up Node
+        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        with:
+          node-version: '14'
+
+      - name: Update NPM
+        run: |
+          npm install -g npm@7
+
+      - name: Print environment
+        run: |
+          nuget help | grep Version
+          msbuild -version
+          dotnet --info
+          node --version
+          npm --version
+          echo "GitHub ref: $GITHUB_REF"
+          echo "GitHub event: $GITHUB_EVENT"
+        env:
+          GITHUB_REF: ${{ github.ref }}
+          GITHUB_EVENT: ${{ github.event_name }}
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
+      - name: npm install
+        run: npm install
+
+      - name: npm build
+        run: npm run build:prod
+

.github/workflows/deploy.yml

@@ -0,0 +1,70 @@
+name: Deploy
+
+on: 
+  workflow_dispatch:
+    inputs:
+      release_version:
+        description: "Release Tag Version <vX.X.X>"
+        required: true
+  release:
+    types:
+      - published
+
+
+jobs:
+  deploy:
+    name: Deploy Web Vault
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        with:
+          ref: gh-pages
+
+      - name: Get release version
+        id: release-version
+        run: |
+          if [[ "${{ github.event_name }}" == "release" ]]; then
+              echo "::set-output name=version::${{ github.event.release.tag_name }}"
+          else
+              echo "::set-output name=version::${{ github.event.inputs.release_version }}"
+          fi
+
+      - name: Create deploy branch
+        run: |
+          git switch -c deploy-${{ steps.release-version.outputs.version }}
+          git push -u origin deploy-${{ steps.release-version.outputs.version }}
+
+      - name: Checkout Repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        with:
+          ref: rc
+
+      - name: setup git config
+        run: |
+          git config user.name = "GitHub Action Bot"
+          git config user.email = "<>"
+
+      - name: Install and Build
+        run: |
+          npm ci
+          npm run dist
+
+      - name: Deploy GitHub Pages
+        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
+        with:
+          target_branch: deploy-${{ steps.release-version.outputs.version }}
+          build_dir: build
+          keep_history: true
+          commit_message: "Staging deploy ${{ steps.release-version.outputs.version }}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create Deploy PR
+        run: |
+          gh pr create --title "Deploy $VERSION" --body "Deploying $VERSION" --base gh-pages --head "$PR_BRANCH"
+        env:
+          VERSION: ${{ steps.release-version.outputs.version }}
+          PR_BRANCH: deploy-${{ steps.release-version.outputs.version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/release.yml

@@ -0,0 +1,157 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      release_tag_name_input:
+        description: "Release Tag Name <X.X.X>"
+        required: true
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      release_upload_url: ${{ steps.create_release.outputs.upload_url }}
+      release_version: ${{ steps.create_tags.outputs.package_version }}
+      tag_version: ${{ steps.create_tags.outputs.tag_version }}
+    steps:
+      - name: Branch check
+        run: |
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
+            echo "==================================="
+            echo "[!] Can only release from rc branch"
+            echo "==================================="
+            exit 1
+          fi
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
+
+      - name: Create Release Vars
+        id: create_tags
+        run: |
+          case "${RELEASE_TAG_NAME_INPUT:0:1}" in
+            v)
+              echo "RELEASE_NAME=${RELEASE_TAG_NAME_INPUT:1}" >> $GITHUB_ENV
+              echo "RELEASE_TAG_NAME=$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "::set-output name=package_version::${RELEASE_TAG_NAME_INPUT:1}"
+              echo "::set-output name=tag_version::$RELEASE_TAG_NAME_INPUT"
+              ;;
+            [0-9])
+              echo "RELEASE_NAME=$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "RELEASE_TAG_NAME=v$RELEASE_TAG_NAME_INPUT" >> $GITHUB_ENV
+              echo "::set-output name=package_version::$RELEASE_TAG_NAME_INPUT"
+              echo "::set-output name=tag_version::v$RELEASE_TAG_NAME_INPUT"
+              ;;
+            *)
+              exit 1
+              ;;
+          esac
+        env:
+          RELEASE_TAG_NAME_INPUT: ${{ github.event.inputs.release_tag_name_input }}
+
+      - name: Create Draft Release
+        id: create_release
+        uses: actions/create-release@0cb9c9b65d5d1901c1f53e5e66eaf4afd303e70e  # 1.1.4 - Repo Archived
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ env.RELEASE_TAG_NAME }}
+          release_name: Version ${{ env.RELEASE_NAME }}
+          draft: true
+          prerelease: false
+
+  ubuntu:
+    runs-on: ubuntu-latest
+    needs: setup
+    env:
+      RELEASE_VERSION: ${{ needs.setup.outputs.release_version }}
+    steps:
+      - name: Set up Node
+        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
+        with:
+          node-version: '14'
+
+      - name: Update NPM
+        run: |
+          npm install -g npm@7
+
+      - name: Print environment
+        run: |
+          whoami
+          node --version
+          npm --version
+          gulp --version
+          docker --version
+          echo "GitHub ref: $GITHUB_REF"
+          echo "GitHub event: $GITHUB_EVENT"
+
+      - name: Login to Azure
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "docker-password, 
+                    docker-username,
+                    dct-delegate-2-repo-passphrase,
+                    dct-delegate-2-key"
+
+      - name: Log into Docker
+        run: echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+        env:
+          DOCKER_USERNAME: ${{ steps.retrieve-secrets.outputs.docker-username }}
+          DOCKER_PASSWORD: ${{ steps.retrieve-secrets.outputs.docker-password }}
+
+      - name: Setup Docker Trust
+        if: github.ref == 'refs/heads/master' || github.event_name == 'release' || github.ref == 'refs/heads/rc'
+        run: |
+          mkdir -p ~/.docker/trust/private
+
+          echo "$DCT_DELEGATE_KEY" > ~/.docker/trust/private/$DCT_DELEGATION_KEY_ID.key
+        env:
+          DCT_DELEGATION_KEY_ID: "c9bde8ec820701516491e5e03d3a6354e7bd66d05fa3df2b0062f68b116dc59c"
+          DCT_DELEGATE_KEY: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-key }}
+
+      - name: Checkout repo
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+
+      - name: Restore
+        run: dotnet tool restore
+
+      - name: Build
+        run: |
+          echo -e "# Building Web\n"
+          echo "Building app"
+          echo "npm version $(npm --version)"
+          npm install
+          npm run dist:selfhost
+
+          echo -e "\nBuilding Docker image"
+          docker --version
+          docker build -t bitwarden/web .
+
+      - name: Tag version
+        run: docker tag bitwarden/web bitwarden/web:$RELEASE_VERSION
+
+      - name: List Docker images
+        run: docker images
+
+      - name: Push latest images
+        run: docker push bitwarden/web:latest
+        env: 
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+
+      - name: Push version images
+        run: docker push bitwarden/web:$RELEASE_VERSION
+        env:
+          DOCKER_CONTENT_TRUST: 1
+          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.retrieve-secrets.outputs.dct-delegate-2-repo-passphrase }}
+
+      - name: Log out of Docker
+        run: docker logout

.gitignore

@@ -11,3 +11,4 @@ dist/
 *.zip
 build/
 !dev-server.shared.pem
+config/development.json

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)
 

Dockerfile

@@ -5,6 +5,7 @@ LABEL com.bitwarden.product="bitwarden"
 RUN apt-get update \
     && apt-get install -y --no-install-recommends \
         gosu \
+        curl \
 && rm -rf /var/lib/apt/lists/*
 
 ENV ASPNETCORE_URLS http://+:5000
@@ -14,4 +15,6 @@ COPY ./build .
 COPY entrypoint.sh /
 RUN chmod +x /entrypoint.sh
 
+HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
+
 ENTRYPOINT ["/entrypoint.sh"]

ISSUE_TEMPLATE.md

@@ -3,3 +3,50 @@ Please do not submit feature requests. The [Community Forums][1] has a
 section for submitting, voting for, and discussing product feature requests.
 [1]: https://community.bitwarden.com
 -->
+
+## Describe the Bug
+
+<!-- Comment:
+A clear and concise description of what the bug is.
+-->
+
+## Steps To Reproduce
+
+<!-- Comment:
+How can we reproduce the behavior:
+-->
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. Click on '...'
+
+## Expected Result
+
+<!-- Comment:
+A clear and concise description of what you expected to happen.
+-->
+
+## Actual Result
+
+<!-- Comment:
+A clear and concise description of what is happening.
+-->
+
+## Screenshots or Videos
+
+<!-- Comment:
+If applicable, add screenshots and/or a short video to help explain your problem.
+-->
+
+## Environment
+
+- Operating system: [e.g. Windows 10, Mac OS Catalina]
+- Browser: [e.g. Firefox 73.0.1]
+- Build Version (Bottom of the page): [2.13.0]
+
+## Additional Context
+
+<!-- Comment:
+Add any other context about the problem here.
+-->

README.md

@@ -5,8 +5,8 @@
     The Bitwarden web project is an Angular application that powers the web vault (https://vault.bitwarden.com/).
 </p>
 <p align="center">
-  <a href="https://ci.appveyor.com/project/bitwarden/web/branch/master" target="_blank">
-    <img src="https://ci.appveyor.com/api/projects/status/github/bitwarden/web?branch=master&svg=true" alt="appveyor build" />
+  <a href="https://github.com/bitwarden/web/actions?query=branch:master" target="_blank">
+    <img src="https://github.com/bitwarden/web/actions/workflows/build.yml/badge.svg?branch=master" alt="Github Workflow build on master" />
   </a>
   <a href="https://crowdin.com/project/bitwarden-web" target="_blank">
     <img src="https://d322cqt584bo4o.cloudfront.net/bitwarden-web/localized.svg" alt="Crowdin" />
@@ -23,38 +23,48 @@
 
 ### Requirements
 
-- [Node.js](https://nodejs.org) v8.11 or greater
+- [Node.js](https://nodejs.org) v14.17 or greater
+- NPM v7
 
 ### Run the app
 
+For local development, run the app with:
+
 ```
 npm install
 npm run build:watch
 ```
 
-You can now access the web vault in your browser at `https://localhost:8080`. You can adjust your API endpoint settings in `src/app/services/services.module.ts` by altering the `apiService.setUrls` call. For example:
+You can now access the web vault in your browser at `https://localhost:8080`.
 
-```typescript
-await apiService.setUrls({
-    base: isDev ? null : window.location.origin,
-    api: isDev ? 'http://mylocalapi' : null,
-    identity: isDev ? 'http://mylocalidentity' : null,
-});
+If you want to point the development web vault to the production APIs, you can run using:
+
+```
+npm install
+ENV=production npm run build:watch
 ```
 
-If you want to point the development web vault to the production APIs, you can set:
+You can also manually adjusting your API endpoint settings by adding `config/development.js` overriding any of the values in `config/base.json`. For example:
 
 ```typescript
-await apiService.setUrls({
-    base: null,
-    api: 'https://api.bitwarden.com',
-    identity: 'https://identity.bitwarden.com',
-});
+{
+    "proxyApi": "http://your-api-url",
+    "proxyIdentity": "http://your-identity-url",
+    "proxyEvents": "http://your-events-url",
+    "proxyNotifications": "http://your-notifications-url",
+    "proxyPortal": "http://your-portal-url",
+    "allowedHosts": ["hostnames-to-allow-in-webpack"]
+}
 ```
 
+To pick up the overrides in the newly created `config/development.js` file, run the app with:
+
+```
+npm run build:dev:watch
+```
 
 ## Contribute
 
-Code contributions are welcome! Please commit any pull requests against the `master` branch.
+Code contributions are welcome! Please commit any pull requests against the `master` branch. Learn more about how to contribute by reading the [`CONTRIBUTING.md`](CONTRIBUTING.md) file.
 
 Security audits and feedback are welcome. Please open an issue or email us privately if the report is sensitive in nature. You can read our security policy in the [`SECURITY.md`](SECURITY.md) file.

build.sh

@@ -1,33 +0,0 @@
-#!/usr/bin/env bash
-set -e
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-
-echo ""
-
-if [ $# -gt 1 -a "$1" == "push" ]
-then
-    TAG=$2
-    echo "# Pushing Web ($TAG)"
-    echo ""
-    docker push bitwarden/web:$TAG
-elif [ $# -gt 1 -a "$1" == "tag" ]
-then
-    TAG=$2
-    echo "Tagging Web as '$TAG'"
-    docker tag bitwarden/web bitwarden/web:$TAG
-else
-    echo "# Building Web"
-
-    echo ""
-    echo "Building app"
-    echo "npm version $(npm --version)"
-    npm install
-    npm run sub:update
-    npm run dist:selfhost
-
-    echo ""
-    echo "Building docker image"
-    docker --version
-    docker build -t bitwarden/web $DIR/.
-fi

config.js

@@ -0,0 +1,29 @@
+function load(envName) {
+    const envOverrides = {
+        'production': () => require('./config/production.json'),
+        'qa': () => require('./config/qa.json'),
+        'development': () => require('./config/development.json'),
+    };
+
+    const baseConfig = require('./config/base.json');
+    const overrideConfig = envOverrides.hasOwnProperty(envName) ? envOverrides[envName]() : {};
+
+    return {
+        ...baseConfig,
+        ...overrideConfig
+    };
+}
+
+function log(configObj) {
+    const repeatNum = 50
+    console.log(`${"=".repeat(repeatNum)}\nenvConfig`)
+    Object.entries(configObj).map(([key, value]) => {
+        console.log(`  ${key}: ${value}`)
+    })
+    console.log(`${"=".repeat(repeatNum)}`)
+}
+
+module.exports = {
+    load,
+    log
+};

config/base.json

@@ -0,0 +1,8 @@
+{
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840",
+    "proxyPortal": "http://localhost:52313",
+    "allowedHosts": []
+}

config/production.json

@@ -0,0 +1,7 @@
+{
+    "proxyApi": "https://api.bitwarden.com",
+    "proxyIdentity": "https://identity.bitwarden.com",
+    "proxyEvents": "https://events.bitwarden.com",
+    "proxyNotifications": "https://notifications.bitwarden.com",
+    "proxyPortal": "https://portal.bitwarden.com"
+}

config/qa.json

@@ -0,0 +1,7 @@
+{
+    "proxyApi": "https://api.qa.bitwarden.com",
+    "proxyIdentity": "https://identity.qa.bitwarden.com",
+    "proxyEvents": "https://events.qa.bitwarden.com",
+    "proxyNotifications": "https://notifications.qa.bitwarden.com",
+    "proxyPortal": "https://portal.qa.bitwarden.com"
+}

crowdin.yml

@@ -8,3 +8,5 @@ files:
         pt-BR: pt_BR
         zh-CN: zh_CN
         zh-TW: zh_TW
+        en-GB: en_GB
+        en-IN: en_IN

entrypoint.sh

@@ -31,6 +31,7 @@ mkhomedir_helper $USERNAME
 
 chown -R $USERNAME:$GROUPNAME /etc/bitwarden
 cp /etc/bitwarden/web/app-id.json /app/app-id.json
+cp /etc/bitwarden/web/assetlinks.json /app/assetlinks.json
 chown -R $USERNAME:$GROUPNAME /app
 chown -R $USERNAME:$GROUPNAME /bitwarden_server
 

gulpfile.js

@@ -5,6 +5,7 @@ const package = require('./package.json');
 const fs = require('fs');
 
 const paths = {
+    node_modules: './node_modules/',
     src: './src/',
     build: './build/',
     cssDir: './src/css/',
@@ -24,12 +25,13 @@ function webfonts() {
         .pipe(gulp.dest(paths.cssDir));
 };
 
-function version() {
+function version(cb) {
     fs.writeFileSync(paths.build + 'version.json', '{"version":"' + package.version + '"}');
+    cb();
 }
 
-gulp.task('clean', clean);
-gulp.task('webfonts', ['clean'], webfonts);
-gulp.task('prebuild', ['webfonts']);
-gulp.task('version', version);
-gulp.task('postdist', ['version']);
+exports.clean = clean;
+exports.webfonts = gulp.series(clean, webfonts);
+exports.prebuild = gulp.series(clean, webfonts);
+exports.version = version;
+exports.postdist = version;

package.json

@@ -1,92 +1,89 @@
 {
   "name": "bitwarden-web",
-  "version": "2.4.0",
+  "version": "2.21.1",
+  "license": "GPL-3.0",
+  "repository": "https://github.com/bitwarden/web",
   "scripts": {
     "sub:init": "git submodule update --init --recursive",
     "sub:update": "git submodule update --remote",
-    "sub:pull": "git submodule foreach git pull",
-    "postinstall": "npm run sub:init",
+    "sub:pull": "git submodule foreach git pull origin master",
+    "preinstall": "npm run sub:init",
+    "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
+    "symlink:mac": "npm run symlink:lin",
+    "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
     "build": "gulp prebuild && webpack",
-    "build:watch": "gulp prebuild && webpack-dev-server",
-    "build:prod": "gulp prebuild && cross-env NODE_ENV=production webpack",
-    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production webpack-dev-server",
-    "build:selfhost": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
-    "build:selfhost:watch": "gulp prebuild && cross-env SELF_HOST=true webpack-dev-server",
+    "build:watch": "gulp prebuild && webpack serve",
+    "build:dev": "gulp prebuild && cross-env ENV=development webpack",
+    "build:dev:watch": "gulp prebuild && cross-env ENV=development webpack serve",
+    "build:qa": "gulp prebuild && cross-env NODE_ENV=production ENV=qa webpack",
+    "build:qa:watch": "gulp prebuild && cross-env NODE_ENV=production ENV=qa webpack serve",
+    "build:prod": "gulp prebuild && cross-env NODE_ENV=production ENV=production webpack",
+    "build:prod:watch": "gulp prebuild && cross-env NODE_ENV=production ENV=production webpack serve",
+    "build:selfhost": "gulp prebuild && cross-env SELF_HOST=true webpack serve",
+    "build:selfhost:watch": "gulp prebuild && cross-env SELF_HOST=true webpack serve",
     "build:selfhost:prod": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack",
-    "build:selfhost:prod:watch": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack-dev-server",
+    "build:selfhost:prod:watch": "gulp prebuild && cross-env SELF_HOST=true NODE_ENV=production webpack serve",
     "clean:l10n": "git push origin --delete l10n_master",
     "dist": "npm run build:prod && gulp postdist",
     "dist:selfhost": "npm run build:selfhost:prod && gulp postdist",
     "deploy": "npm run dist && gh-pages -d build",
     "deploy:dev": "npm run dist && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
-    "lint": "tslint src/**/*.ts || true",
-    "lint:fix": "tslint src/**/*.ts --fix"
+    "lint": "tslint 'src/**/*.ts' || true",
+    "lint:fix": "tslint 'src/**/*.ts' --fix"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.1.7",
-    "@ngtools/webpack": "^6.2.1",
-    "@types/jquery": "^3.3.6",
-    "@types/lunr": "^2.1.6",
-    "@types/node-forge": "^0.7.5",
-    "@types/papaparse": "^4.5.3",
+    "@angular/compiler-cli": "^11.2.11",
+    "@ngtools/webpack": "^11.2.10",
+    "@types/duo_web_sdk": "^2.7.0",
+    "@types/jquery": "^3.5.5",
+    "@types/node": "^14.17.2",
     "@types/webcrypto": "^0.0.28",
-    "@types/webpack": "^4.4.11",
-    "angular2-template-loader": "^0.6.2",
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.2",
-    "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
-    "del": "^3.0.0",
-    "extract-text-webpack-plugin": "next",
-    "file-loader": "^2.0.0",
-    "gh-pages": "^1.2.0",
-    "gulp": "^3.9.1",
-    "gulp-google-webfonts": "^2.0.0",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.9.3",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.0",
-    "ts-loader": "^5.1.0",
-    "tslint": "^5.11.0",
-    "tslint-loader": "^3.6.0",
-    "typescript": "^2.7.2",
-    "webpack": "^4.18.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
+    "@types/webpack": "^4.4.27",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.4.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.3",
+    "del": "^6.0.0",
+    "file-loader": "^6.2.0",
+    "gh-pages": "^3.1.0",
+    "gulp": "^4.0.2",
+    "gulp-google-webfonts": "^4.0.0",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^4.5.1",
+    "mini-css-extract-plugin": "^1.5.0",
+    "sass": "^1.32.10",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "tapable": "^1.1.3",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^8.1.0",
+    "tslint": "^6.1.3",
+    "tslint-loader": "^3.5.4",
+    "typescript": "4.1.5",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@angular/animations": "6.1.7",
-    "@angular/common": "6.1.7",
-    "@angular/compiler": "6.1.7",
-    "@angular/core": "6.1.7",
-    "@angular/forms": "6.1.7",
-    "@angular/http": "6.1.7",
-    "@angular/platform-browser": "6.1.7",
-    "@angular/platform-browser-dynamic": "6.1.7",
-    "@angular/router": "6.1.7",
-    "@angular/upgrade": "6.1.7",
-    "@aspnet/signalr": "1.0.4",
-    "@aspnet/signalr-protocol-msgpack": "1.0.4",
-    "angular2-toaster": "6.1.0",
-    "angulartics2": "6.3.0",
-    "bootstrap": "4.1.3",
-    "braintree-web-drop-in": "1.13.0",
-    "core-js": "2.5.7",
-    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git",
+    "@bitwarden/jslib-angular": "file:jslib/angular",
+    "@bitwarden/jslib-common": "file:jslib/common",
+    "angular2-toaster": "11.0.1",
+    "bootstrap": "4.6.0",
+    "braintree-web-drop-in": "1.30.1",
+    "browser-hrtime": "^1.1.8",
+    "core-js": "^3.11.0",
+    "date-input-polyfill": "^2.14.0",
+    "duo_web_sdk": "git+https://github.com/duosecurity/duo_web_sdk.git#5f9a1a8598d2cda494c4f5ee0e38b31474abfee9",
     "font-awesome": "4.7.0",
-    "jquery": "3.3.1",
-    "lunr": "2.3.3",
-    "ngx-infinite-scroll": "6.0.1",
-    "node-forge": "0.7.6",
-    "papaparse": "4.6.0",
-    "popper.js": "1.14.4",
+    "jquery": "3.6.0",
+    "popper.js": "1.16.1",
     "qrious": "4.0.2",
-    "rxjs": "6.3.2",
-    "sweetalert": "2.1.0",
-    "web-animations-js": "2.3.1",
-    "webcrypto-shim": "0.1.4",
-    "whatwg-fetch": "3.0.0",
-    "zone.js": "0.8.26"
+    "sweetalert2": "^10.16.6",
+    "webcrypto-shim": "0.1.7",
+    "whatwg-fetch": "3.6.2"
+  },
+  "engines": {
+    "node": "~14",
+    "npm": "~7"
   }
 }

src/404.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="/404/bootstrap.min.css" rel="stylesheet" type="text/css"
+            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l">
+        <link href="/404/font-awesome.min.css" rel="stylesheet" type="text/css"
+            integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==">
+        <link href="/404/styles.css" rel="stylesheet" type="text/css">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
+        <link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#175DDC">
+        <link rel="manifest" href="/manifest.json">
+
+        <title>Page not found!</title>
+        <meta name="description" content="404 Page Not Found">
+    </head>
+
+    <body>
+        <div class="banner">
+            <div class="container inner banner">
+                <div class="row align-items-center">
+                    <div class="col brand">
+                        <i class="fa fa-shield"></i>&nbsp;
+                        <strong>bit</strong>warden</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container inner content">
+            <h2>Page not found!</h2>
+            <p>Sorry, but the page you were looking for could not be found.</p>
+            <p>
+                <a href="/">
+                    <img src="/images/404.png" class="img-fluid" alt="404 image" width="80%"/>
+                </a>
+            </p>
+            <p>You can <a href="/">return to the web vault</a>, check our <a href="https://status.bitwarden.com/">status page</a>
+                or <a href="https://bitwarden.com/contact/">contact us</a>.</p>
+        </div>
+        <div class="container footer text-muted content">
+            © Copyright 2021 Bitwarden, Inc.
+        </div>
+    </body>
+</html>

src/404/styles.css

@@ -0,0 +1,119 @@
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 300;
+	src: url(../fonts/Open_Sans-italic-300.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 400;
+	src: url(../fonts/Open_Sans-italic-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 600;
+	src: url(../fonts/Open_Sans-italic-600.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 700;
+	src: url(../fonts/Open_Sans-italic-700.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: italic;
+	font-weight: 800;
+	src: url(../fonts/Open_Sans-italic-800.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 300;
+	src: url(../fonts/Open_Sans-normal-300.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 400;
+	src: url(../fonts/Open_Sans-normal-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 600;
+	src: url(../fonts/Open_Sans-normal-600.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: url(../fonts/Open_Sans-normal-700.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 800;
+	src: url(../fonts/Open_Sans-normal-800.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+body {
+    font-family: 'Open Sans';
+}
+
+html, body, .row {
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+}
+
+h2 {
+    font-size: 25px;
+    margin-bottom: 12.5px;
+    font-weight: 500;
+    line-height: 1.1;
+}
+
+.brand {
+  font-size: 23px;
+  line-height: 25px;
+  color: #fff;
+  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+.banner {
+    background-color: #175DDC;
+    height: 56px;
+}
+
+.content {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.footer {
+    padding: 40px 0 40px 0;
+    border-top: 1px solid #dee2e6;
+}

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-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+import { EmergencyAccessAcceptRequest } from 'jslib-common/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/accept-organization.component.html

@@ -2,7 +2,8 @@
     <div>
         <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </p>
     </div>
 </div>
@@ -22,7 +23,8 @@
                         <a routerLink="/" [queryParams]="{email: email}" class="btn btn-primary btn-block">
                             {{'logIn' | i18n}}
                         </a>
-                        <a routerLink="/register" [queryParams]="{email: email}" class="btn btn-primary btn-block ml-2 mt-0">
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-primary btn-block ml-2 mt-0">
                             {{'createAccount' | i18n}}
                         </a>
                     </div>

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

@@ -2,6 +2,7 @@ import {
     Component,
     OnInit,
 } from '@angular/core';
+
 import {
     ActivatedRoute,
     Router,
@@ -12,12 +13,18 @@ import {
     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 { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { OrganizationUserAcceptRequest } from 'jslib/models/request/organizationUserAcceptRequest';
+import { OrganizationUserAcceptRequest } from 'jslib-common/models/request/organizationUserAcceptRequest';
+import { OrganizationUserResetPasswordEnrollmentRequest } from 'jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest';
+
+import { Utils } from 'jslib-common/misc/utils';
+import { Policy } from 'jslib-common/models/domain/policy';
 
 @Component({
     selector: 'app-accept-organization',
@@ -33,25 +40,55 @@ export class AcceptOrganizationComponent implements OnInit {
     constructor(private router: Router, private toasterService: ToasterService,
         private i18nService: I18nService, private route: ActivatedRoute,
         private apiService: ApiService, private userService: UserService,
-        private stateService: StateService) { }
+        private stateService: StateService, private cryptoService: CryptoService,
+        private policyService: PolicyService) { }
 
     ngOnInit() {
         let fired = false;
-        this.route.queryParams.subscribe(async (qParams) => {
+        this.route.queryParams.subscribe(async qParams => {
             if (fired) {
                 return;
             }
             fired = true;
             await this.stateService.remove('orgInvitation');
             let error = qParams.organizationId == null || qParams.organizationUserId == null || qParams.token == null;
+            let errorMessage: string = null;
             if (!error) {
                 this.authed = await this.userService.isAuthenticated();
                 if (this.authed) {
                     const request = new OrganizationUserAcceptRequest();
                     request.token = qParams.token;
                     try {
-                        this.actionPromise = this.apiService.postOrganizationUserAccept(qParams.organizationId,
-                            qParams.organizationUserId, request);
+                        if (await this.performResetPasswordAutoEnroll(qParams)) {
+                            this.actionPromise = this.apiService.postOrganizationUserAccept(qParams.organizationId,
+                                qParams.organizationUserId, request).then(() => {
+                                    // Retrieve Public Key
+                                    return this.apiService.getOrganizationKeys(qParams.organizationId);
+                                }).then(async response => {
+                                    if (response == null) {
+                                        throw new Error(this.i18nService.t('resetPasswordOrgKeysError'));
+                                    }
+
+                                    const publicKey = Utils.fromB64ToArray(response.publicKey);
+
+                                    // RSA Encrypt user's encKey.key with organization public key
+                                    const encKey = await this.cryptoService.getEncKey();
+                                    const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+
+                                    // Create request and execute enrollment
+                                    const resetRequest = new OrganizationUserResetPasswordEnrollmentRequest();
+                                    resetRequest.resetPasswordKey = encryptedKey.encryptedString;
+
+                                    // Get User Id
+                                    const userId = await this.userService.getUserId();
+
+                                    return this.apiService.putOrganizationUserResetPasswordEnrollment(qParams.organizationId, userId, resetRequest);
+                                });
+                        } else {
+                            this.actionPromise = this.apiService.postOrganizationUserAccept(qParams.organizationId,
+                                qParams.organizationUserId, request);
+                        }
+
                         await this.actionPromise;
                         const toast: Toast = {
                             type: 'success',
@@ -61,8 +98,9 @@ export class AcceptOrganizationComponent implements OnInit {
                         };
                         this.toasterService.popAsync(toast);
                         this.router.navigate(['/vault']);
-                    } catch {
+                    } catch (e) {
                         error = true;
+                        errorMessage = e.message;
                     }
                 } else {
                     await this.stateService.save('orgInvitation', qParams);
@@ -76,11 +114,35 @@ export class AcceptOrganizationComponent implements OnInit {
             }
 
             if (error) {
-                this.toasterService.popAsync('error', null, this.i18nService.t('inviteAcceptFailed'));
+                const toast: Toast = {
+                    type: 'error',
+                    title: null,
+                    body: errorMessage != null ? this.i18nService.t('inviteAcceptFailedShort', errorMessage) :
+                        this.i18nService.t('inviteAcceptFailed'),
+                    timeout: 10000,
+                };
+                this.toasterService.popAsync(toast);
                 this.router.navigate(['/']);
             }
 
             this.loading = false;
         });
     }
+
+    private async performResetPasswordAutoEnroll(qParams: any): Promise<boolean> {
+        let policyList: Policy[] = null;
+        try {
+            const policies = await this.apiService.getPoliciesByToken(qParams.organizationId, qParams.token,
+                qParams.email, qParams.organizationUserId);
+            policyList = this.policyService.mapPoliciesFromToken(policies);
+        } catch { }
+
+        if (policyList != null) {
+            const result = this.policyService.getResetPasswordPolicyOptions(policyList, qParams.organizationId);
+            // Return true if policy enabled and auto-enroll enabled
+            return result[1] && result[0].autoEnrollEnabled;
+        }
+
+        return false;
+    }
 }

src/app/accounts/hint.component.html

@@ -6,15 +6,15 @@
                 <div class="card-body">
                     <div class="form-group">
                         <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                         <small class="form-text text-muted">{{'enterEmailToGetHint' | i18n}}</small>
                     </div>
                     <hr>
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span [hidden]="form.loading">{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}

src/app/accounts/hint.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
-import { HintComponent as BaseHintComponent } from 'jslib/angular/components/hint.component';
+import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hint.component';
 
 @Component({
     selector: 'app-hint',

src/app/accounts/lock.component.html

@@ -1,8 +1,8 @@
-<form (ngSubmit)="submit()" class="container" ngNativeValidate>
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
     <div class="row justify-content-md-center mt-5">
         <div class="col-5">
             <p class="text-center mb-4">
-                <i class="fa fa-lock fa-4x text-muted"></i>
+                <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
             </p>
             <p class="lead text-center mx-4 mb-4">{{'yourVaultIsLocked' | i18n}}</p>
             <div class="card d-block">
@@ -10,18 +10,26 @@
                     <div class="form-group">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <div class="d-flex">
-                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
-                                [(ngModel)]="masterPassword" required appAutofocus appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appAutofocus appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
+                        <small class="text-muted form-text">
+                            {{'loggedInAsEmailOn' | i18n : email : webVaultHostname}}
+                        </small>
                     </div>
                     <hr>
                     <div class="d-flex">
-                        <button type="submit" class="btn btn-primary btn-block">
-                            <i class="fa fa-unlock-alt"></i>
-                            {{'unlock' | i18n}}
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>
+                                <i class="fa fa-unlock-alt" aria-hidden="true"></i> {{'unlock' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" (click)="logOut()">
                             {{'logOut' | i18n}}

src/app/accounts/lock.component.ts

@@ -1,42 +1,44 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-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 { UserService } from 'jslib/abstractions/user.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
 
 import { RouterService } from '../services/router.service';
 
-import { LockComponent as BaseLockComponent } from 'jslib/angular/components/lock.component';
+import { LockComponent as BaseLockComponent } from 'jslib-angular/components/lock.component';
 
 @Component({
     selector: 'app-lock',
     templateUrl: 'lock.component.html',
 })
-export class LockComponent extends BaseLockComponent implements OnInit {
+export class LockComponent extends BaseLockComponent {
     constructor(router: Router, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
         userService: UserService, cryptoService: CryptoService,
-        private routerService: RouterService) {
-        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService);
+        storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
+        environmentService: EnvironmentService, private routerService: RouterService,
+        stateService: StateService, apiService: ApiService) {
+        super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
+            storageService, vaultTimeoutService, environmentService, stateService, apiService);
     }
 
     async ngOnInit() {
-        const authed = await this.userService.isAuthenticated();
-        if (!authed) {
-            this.router.navigate(['/']);
-        } else if (await this.cryptoService.hasKey()) {
-            this.router.navigate(['vault']);
-        }
-
-        const previousUrl = this.routerService.getPreviousUrl();
-        if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
-            this.successRoute = previousUrl;
-        }
+        await super.ngOnInit();
+        this.onSuccessfulSubmit = () => {
+            const previousUrl = this.routerService.getPreviousUrl();
+            if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
+                this.successRoute = previousUrl;
+            }
+            this.router.navigate([this.successRoute]);
+        };
     }
 }

src/app/accounts/login.component.html

@@ -5,17 +5,25 @@
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">
+                    <app-callout type="warning" title="{{'resetPasswordPolicyAutoEnroll' | i18n}}"
+                        *ngIf="showResetPasswordAutoEnrollWarning">
+                        {{'resetPasswordAutoEnrollInviteWarning' | 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 inputmode="email" appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            inputmode="email" appInputVerbatim="false">
                     </div>
                     <div class="form-group">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
                         <div class="d-flex">
-                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
-                                [(ngModel)]="masterPassword" required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
+                                required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword()">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
                         <small class="form-text">
@@ -23,19 +31,26 @@
                         </small>
                     </div>
                     <div class="form-check">
-                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail" [(ngModel)]="rememberEmail">
+                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail"
+                            [(ngModel)]="rememberEmail">
                         <label class="form-check-label" for="rememberEmail">{{'rememberEmail' | i18n}}</label>
                     </div>
                     <hr>
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>
-                                <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}
                             </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
-                        <a routerLink="/register" [queryParams]="{email: email}" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-                            <i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
+                        <a routerLink="/register" [queryParams]="{email: email}"
+                            class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{'createAccount' | i18n}}
+                        </a>
+                    </div>
+                    <div class="d-flex">
+                        <a routerLink="/sso" class="btn btn-outline-secondary btn-block mt-2">
+                            <i class="fa fa-bank" aria-hidden="true"></i> {{'enterpriseSingleSignOn' | i18n}}
                         </a>
                     </div>
                 </div>

src/app/accounts/login.component.ts

@@ -4,29 +4,45 @@ import {
     Router,
 } from '@angular/router';
 
-import { AuthService } from 'jslib/abstractions/auth.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { StateService } from 'jslib/abstractions/state.service';
-import { StorageService } from 'jslib/abstractions/storage.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
+import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
 
-import { LoginComponent as BaseLoginComponent } from 'jslib/angular/components/login.component';
+import { LoginComponent as BaseLoginComponent } from 'jslib-angular/components/login.component';
+
+import { Policy } from 'jslib-common/models/domain/policy';
 
 @Component({
     selector: 'app-login',
     templateUrl: 'login.component.html',
 })
 export class LoginComponent extends BaseLoginComponent {
+
+    showResetPasswordAutoEnrollWarning = false;
+
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, private route: ActivatedRoute,
-        storageService: StorageService, private stateService: StateService,
-        platformUtilsService: PlatformUtilsService) {
-        super(authService, router, platformUtilsService, i18nService, storageService);
+        storageService: StorageService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
+        passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService,
+        private apiService: ApiService, private policyService: PolicyService) {
+        super(authService, router,
+            platformUtilsService, i18nService,
+            stateService, environmentService,
+            passwordGenerationService, cryptoFunctionService,
+            storageService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
     async ngOnInit() {
-        this.route.queryParams.subscribe(async (qParams) => {
+        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
             }
@@ -37,13 +53,35 @@ export class LoginComponent extends BaseLoginComponent {
                     { route: '/settings/create-organization', qParams: { plan: qParams.org } });
             }
             await super.ngOnInit();
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
         });
+
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            let policyList: Policy[] = null;
+            try {
+                const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
+                    invite.email, invite.organizationUserId);
+                policyList = this.policyService.mapPoliciesFromToken(policies);
+            } catch { }
+
+            if (policyList != null) {
+                const result = this.policyService.getResetPasswordPolicyOptions(policyList, invite.organizationId);
+                // Set to true if policy enabled and auto-enroll enabled
+                this.showResetPasswordAutoEnrollWarning = result[1] && result[0].autoEnrollEnabled;
+            }
+        }
     }
 
     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/recover-delete.component.html

@@ -7,14 +7,14 @@
                     <p>{{'deleteRecoverDesc' | i18n}}</p>
                     <div class="form-group">
                         <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                     </div>
                     <hr>
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}

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

@@ -2,12 +2,11 @@ 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 { I18nService } from 'jslib/abstractions/i18n.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
-import { DeleteRecoverRequest } from 'jslib/models/request/deleteRecoverRequest';
+import { DeleteRecoverRequest } from 'jslib-common/models/request/deleteRecoverRequest';
 
 @Component({
     selector: 'app-recover-delete',
@@ -18,8 +17,7 @@ export class RecoverDeleteComponent {
     formPromise: Promise<any>;
 
     constructor(private router: Router, private apiService: ApiService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private i18nService: I18nService) {
+        private toasterService: ToasterService, private i18nService: I18nService) {
     }
 
     async submit() {
@@ -28,7 +26,6 @@ export class RecoverDeleteComponent {
             request.email = this.email.trim().toLowerCase();
             this.formPromise = this.apiService.postAccountRecoverDelete(request);
             await this.formPromise;
-            this.analytics.eventTrack.next({ action: 'Started Delete Recovery' });
             this.toasterService.popAsync('success', null, this.i18nService.t('deleteRecoverEmailSent'));
             this.router.navigate(['/']);
         } catch { }

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

@@ -5,28 +5,29 @@
             <div class="card">
                 <div class="card-body">
                     <p>{{'recoverAccountTwoStepDesc' | i18n}}
-                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank" rel="noopener">{{'learnMore' | i18n}}</a>
+                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank"
+                            rel="noopener">{{'learnMore' | i18n}}</a>
                     </p>
                     <div class="form-group">
                         <label for="email">{{'emailAddress' | i18n}}</label>
-                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
-                            appInputVerbatim="false">
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required
+                            appAutofocus inputmode="email" appInputVerbatim="false">
                     </div>
                     <div class="form-group">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control" [(ngModel)]="masterPassword" required
-                            appInputVerbatim>
+                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control"
+                            [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="form-group">
                         <label for="recoveryCode">{{'recoveryCodeTitle' | i18n}}</label>
-                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode" [(ngModel)]="recoveryCode" required
-                            appInputVerbatim>
+                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode"
+                            [(ngModel)]="recoveryCode" required appInputVerbatim>
                     </div>
                     <hr>
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}

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

@@ -2,14 +2,13 @@ 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 { AuthService } from 'jslib/abstractions/auth.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
-import { TwoFactorRecoveryRequest } from 'jslib/models/request/twoFactorRecoveryRequest';
+import { TwoFactorRecoveryRequest } from 'jslib-common/models/request/twoFactorRecoveryRequest';
 
 @Component({
     selector: 'app-recover-two-factor',
@@ -22,9 +21,8 @@ export class RecoverTwoFactorComponent {
     formPromise: Promise<any>;
 
     constructor(private router: Router, private apiService: ApiService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private i18nService: I18nService, private cryptoService: CryptoService,
-        private authService: AuthService) { }
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private cryptoService: CryptoService, private authService: AuthService) { }
 
     async submit() {
         try {
@@ -35,7 +33,6 @@ export class RecoverTwoFactorComponent {
             request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
             this.formPromise = this.apiService.postTwoFactorRecover(request);
             await this.formPromise;
-            this.analytics.eventTrack.next({ action: 'Recovered 2FA' });
             this.toasterService.popAsync('success', null, this.i18nService.t('twoStepRecoverDisabled'));
             this.router.navigate(['/']);
         } catch { }

src/app/accounts/register.component.html

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

src/app/accounts/register.component.ts

@@ -4,14 +4,22 @@ import {
     Router,
 } from '@angular/router';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { AuthService } from 'jslib/abstractions/auth.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { StateService } from 'jslib/abstractions/state.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
-import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/components/register.component';
+import { RegisterComponent as BaseRegisterComponent } from 'jslib-angular/components/register.component';
+
+import { MasterPasswordPolicyOptions } from 'jslib-common/models/domain/masterPasswordPolicyOptions';
+import { Policy } from 'jslib-common/models/domain/policy';
+
+import { PolicyData } from 'jslib-common/models/data/policyData';
+import { ReferenceEventRequest } from 'jslib-common/models/request/referenceEventRequest';
 
 @Component({
     selector: 'app-register',
@@ -19,18 +27,43 @@ import { RegisterComponent as BaseRegisterComponent } from 'jslib/angular/compon
 })
 export class RegisterComponent extends BaseRegisterComponent {
     showCreateOrgMessage = false;
-    showTerms = true;
+    layout = '';
+    enforcedPolicyOptions: MasterPasswordPolicyOptions;
+
+    private policies: Policy[];
 
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, cryptoService: CryptoService,
         apiService: ApiService, private route: ActivatedRoute,
-        stateService: StateService, platformUtilsService: PlatformUtilsService) {
-        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService);
-        this.showTerms = !platformUtilsService.isSelfHost();
+        stateService: StateService, platformUtilsService: PlatformUtilsService,
+        passwordGenerationService: PasswordGenerationService, private policyService: PolicyService) {
+        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
+            passwordGenerationService);
     }
 
-    ngOnInit() {
-        this.route.queryParams.subscribe((qParams) => {
+    getPasswordScoreAlertDisplay() {
+        if (this.enforcedPolicyOptions == null) {
+            return '';
+        }
+
+        let str: string;
+        switch (this.enforcedPolicyOptions.minComplexity) {
+            case 4:
+                str = this.i18nService.t('strong');
+                break;
+            case 3:
+                str = this.i18nService.t('good');
+                break;
+            default:
+                str = this.i18nService.t('weak');
+                break;
+        }
+        return str + ' (' + this.enforcedPolicyOptions.minComplexity + ')';
+    }
+
+    async ngOnInit() {
+        const queryParamsSub = this.route.queryParams.subscribe(qParams => {
+            this.referenceData = new ReferenceEventRequest();
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
             }
@@ -38,9 +71,51 @@ export class RegisterComponent extends BaseRegisterComponent {
                 this.stateService.save('loginRedirect', { route: '/settings/premium' });
             } else if (qParams.org != null) {
                 this.showCreateOrgMessage = true;
+                this.referenceData.flow = qParams.org;
                 this.stateService.save('loginRedirect',
                     { route: '/settings/create-organization', qParams: { plan: qParams.org } });
             }
+            if (qParams.layout != null) {
+                this.layout = this.referenceData.layout = qParams.layout;
+            }
+            if (qParams.reference != null) {
+                this.referenceData.id = qParams.reference;
+            } else {
+                this.referenceData.id = ('; ' + document.cookie).split('; reference=').pop().split(';').shift();
+            }
+            if (this.referenceData.id === '') {
+                this.referenceData.id = null;
+            }
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
         });
+        const invite = await this.stateService.get<any>('orgInvitation');
+        if (invite != null) {
+            try {
+                const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
+                    invite.email, invite.organizationUserId);
+                if (policies.data != null) {
+                    const policiesData = policies.data.map(p => new PolicyData(p));
+                    this.policies = policiesData.map(p => new Policy(p));
+                }
+            } catch { }
+        }
+
+        if (this.policies != null) {
+            this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(this.policies);
+        }
+    }
+
+    async submit() {
+        if (this.enforcedPolicyOptions != null &&
+            !this.policyService.evaluateMasterPassword(this.masterPasswordScore, this.masterPassword,
+                this.enforcedPolicyOptions)) {
+            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPasswordPolicyRequirementsNotMet'));
+            return;
+        }
+
+        await super.submit();
     }
 }

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

@@ -0,0 +1,85 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'setMasterPassword' | i18n}}</p>
+            <div class="card d-block">
+                <div class="card-body text-center" *ngIf="syncLoading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!syncLoading">
+                    <app-callout type="info">{{'ssoCompleteRegistration' | i18n}}</app-callout>
+                    <div class="form-group">
+                        <app-callout type="info" *ngIf="enforcedPolicyOptions">
+                            {{'masterPasswordPolicyInEffect' | i18n}}
+                            <ul class="mb-0">
+                                <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
+                                    {{'policyInEffectMinComplexity' | i18n : getPasswordScoreAlertDisplay()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.minLength > 0">
+                                    {{'policyInEffectMinLength' | i18n : enforcedPolicyOptions?.minLength.toString()}}
+                                </li>
+                                <li *ngIf="enforcedPolicyOptions?.requireUpper">
+                                    {{'policyInEffectUppercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireLower">
+                                    {{'policyInEffectLowercase' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireNumbers">
+                                    {{'policyInEffectNumbers' | i18n}}</li>
+                                <li *ngIf="enforcedPolicyOptions?.requireSpecial">
+                                    {{'policyInEffectSpecial' | i18n : '!@#$%^&*'}}</li>
+                            </ul>
+                        </app-callout>
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <div class="w-100">
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPasswordHash" class="text-monospace form-control mb-1"
+                                    [(ngModel)]="masterPassword" (input)="updatePasswordStrength()" required
+                                    appInputVerbatim>
+                                <app-password-strength [score]="masterPasswordScore" [showText]="true">
+                                </app-password-strength>
+                            </div>
+                            <div>
+                                <button type="button" class="ml-1 btn btn-link"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    <i class="fa fa-lg" aria-hidden="true"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </button>
+                                <div class="progress-bar invisible"></div>
+                            </div>
+                        </div>
+                        <small class="form-text text-muted">{{'masterPassDesc' | i18n}}</small>
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
+                        <div class="d-flex">
+                            <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
+                                name="MasterPasswordRetype" class="text-monospace form-control"
+                                [(ngModel)]="masterPasswordRetype" required appInputVerbatim>
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
+                                (click)="togglePassword(true)">
+                                <i class="fa fa-lg" aria-hidden="true"
+                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="hint">{{'masterPassHint' | i18n}}</label>
+                        <input id="hint" class="form-control" type="text" name="Hint" [(ngModel)]="hint">
+                        <small class="form-text text-muted">{{'masterPassHintDesc' | i18n}}</small>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                            <span>{{'submit' | i18n}}</span>
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary btn-block ml-2 mt-0" (click)="logOut()">
+                            {{'logOut' | i18n}}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import {
+    SetPasswordComponent as BaseSetPasswordComponent,
+} from 'jslib-angular/components/set-password.component';
+
+@Component({
+    selector: 'app-set-password',
+    templateUrl: 'set-password.component.html',
+})
+export class SetPasswordComponent extends BaseSetPasswordComponent {
+    constructor(apiService: ApiService, i18nService: I18nService,
+        cryptoService: CryptoService, messagingService: MessagingService,
+        userService: UserService, passwordGenerationService: PasswordGenerationService,
+        platformUtilsService: PlatformUtilsService, policyService: PolicyService, router: Router,
+        syncService: SyncService, route: ActivatedRoute) {
+        super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
+            platformUtilsService, policyService, router, apiService, syncService, route);
+    }
+}

src/app/accounts/sso.component.html

@@ -0,0 +1,33 @@
+<form #form (ngSubmit)="submit()" class="container" [appApiAction]="initiateSsoFormPromise" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <img src="../../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden">
+            <div class="card d-block mt-4">
+                <div class="card-body" *ngIf="loggingIn">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <div class="card-body" *ngIf="!loggingIn">
+                    <p>{{'ssoLogInWithOrgIdentifier' | i18n}}</p>
+                    <div class="form-group">
+                        <label for="identifier">{{'organizationIdentifier' | i18n}}</label>
+                        <input id="identifier" class="form-control" type="text" name="Identifier"
+                            [(ngModel)]="identifier" required appAutofocus>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
+                            <span>
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'logIn' | i18n}}
+                            </span>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

src/app/accounts/sso.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
+
+import { SsoComponent as BaseSsoComponent } from 'jslib-angular/components/sso.component';
+
+const IdentifierStorageKey = 'ssoOrgIdentifier';
+
+@Component({
+    selector: 'app-sso',
+    templateUrl: 'sso.component.html',
+})
+export class SsoComponent extends BaseSsoComponent {
+    constructor(authService: AuthService, router: Router,
+        i18nService: I18nService, route: ActivatedRoute,
+        storageService: StorageService, stateService: StateService,
+        platformUtilsService: PlatformUtilsService, apiService: ApiService,
+        cryptoFunctionService: CryptoFunctionService,
+        passwordGenerationService: PasswordGenerationService) {
+        super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
+            apiService, cryptoFunctionService, passwordGenerationService);
+        this.redirectUri = window.location.origin + '/sso-connector.html';
+        this.clientId = 'web';
+    }
+
+    async ngOnInit() {
+        super.ngOnInit();
+        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            if (qParams.identifier != null) {
+                this.identifier = qParams.identifier;
+            } else {
+                const storedIdentifier = await this.storageService.get<string>(IdentifierStorageKey);
+                if (storedIdentifier != null) {
+                    this.identifier = storedIdentifier;
+                }
+            }
+            if (queryParamsSub != null) {
+                queryParamsSub.unsubscribe();
+            }
+        });
+    }
+
+    async submit() {
+        await this.storageService.save(IdentifierStorageKey, this.identifier);
+        if (this.clientId === 'browser') {
+            document.cookie = `ssoHandOffMessage=${this.i18nService.t('ssoHandOff')};SameSite=strict`;
+        }
+        super.submit();
+    }
+}

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

@@ -1,22 +1,25 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">{{'twoStepOptions' | i18n}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="list-group list-group-flush">
-                <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)" class="list-group-item list-group-item-action">
-                    <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                    <h3>{{p.name}}</h3>
-                    {{p.description}}
-                </a>
-                <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                    <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                    {{'recoveryCodeDesc' | i18n}}
-                </a>
+            <div class="modal-body">
+                <div class="list-group list-group-flush">
+                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
+                        class="list-group-item list-group-item-action">
+                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
+                        <h3>{{p.name}}</h3>
+                        {{p.description}}
+                    </a>
+                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
+                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                        {{'recoveryCodeDesc' | i18n}}
+                    </a>
+                </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>

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

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { AuthService } from 'jslib/abstractions/auth.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import {
     TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent,
-} from 'jslib/angular/components/two-factor-options.component';
+} from 'jslib-angular/components/two-factor-options.component';
 
 @Component({
     selector: 'app-two-factor-options',

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

@@ -1,19 +1,24 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-5" [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+        <div class="col-5"
+            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
             <p class="lead text-center mb-4">{{title}}</p>
             <div class="card d-block">
                 <div class="card-body">
-                    <ng-container *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
-                        <p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
+                    <ng-container
+                        *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
+                        <p *ngIf="selectedProviderType === providerType.Authenticator">
+                            {{'enterVerificationCodeApp' | i18n}}</p>
                         <p *ngIf="selectedProviderType === providerType.Email">
                             {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
                         </p>
                         <div class="form-group">
                             <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
-                            <input id="code" type="text" name="Code" class="form-control" [(ngModel)]="token" required appAutofocus inputmode="tel" appInputVerbatim>
+                            <input id="code" type="text" name="Code" class="form-control" [(ngModel)]="token" required
+                                appAutofocus inputmode="tel" appInputVerbatim>
                             <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
-                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise" *ngIf="selectedProviderType === providerType.Email">
+                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
+                                    *ngIf="selectedProviderType === providerType.Email">
                                     {{'sendVerificationCodeEmailAgain' | i18n}}
                                 </a>
                             </small>
@@ -24,18 +29,14 @@
                         <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="">
                         <div class="form-group">
                             <label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
-                            <input id="code" type="password" name="Code" class="form-control" [(ngModel)]="token" required appAutofocus appInputVerbatim
-                                autocomplete="new-password">
+                            <input id="code" type="password" name="Code" class="form-control" [(ngModel)]="token"
+                                required appAutofocus appInputVerbatim autocomplete="new-password">
                         </div>
                     </ng-container>
-                    <ng-container *ngIf="selectedProviderType === providerType.U2f">
-                        <p class="text-center" *ngIf="!u2fReady">
-                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
-                        </p>
-                        <ng-container *ngIf="u2fReady">
-                            <p class="text-center">{{'insertU2f' | i18n}}</p>
-                            <img src="../../images/u2fkey.jpg" alt="" class="rounded img-fluid mb-3">
-                        </ng-container>
+                    <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
+                        <div id="web-authn-frame" class="mb-3">
+                            <iframe id="webauthn_iframe"></iframe>
+                        </div>
                     </ng-container>
                     <ng-container *ngIf="selectedProviderType === providerType.Duo ||
                         selectedProviderType === providerType.OrganizationDuo">
@@ -43,9 +44,11 @@
                             <iframe id="duo_iframe"></iframe>
                         </div>
                     </ng-container>
-                    <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}" *ngIf="form.loading && selectedProviderType === providerType.U2f"></i>
+                    <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}"
+                        *ngIf="form.loading && selectedProviderType === providerType.WebAuthn" aria-hidden="true"></i>
                     <div class="form-check" *ngIf="selectedProviderType != null">
-                        <input id="remember" type="checkbox" name="Remember" class="form-check-input" [(ngModel)]="remember">
+                        <input id="remember" type="checkbox" name="Remember" class="form-check-input"
+                            [(ngModel)]="remember">
                         <label for="remember" class="form-check-label">{{'rememberMe' | i18n}}</label>
                     </div>
                     <ng-container *ngIf="selectedProviderType == null">
@@ -54,12 +57,13 @@
                     </ng-container>
                     <hr>
                     <div class="d-flex mb-3">
-                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
-                        selectedProviderType !== providerType.OrganizationDuo && selectedProviderType !== providerType.U2f">
+                        <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading"
+                            *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
+                        selectedProviderType !== providerType.OrganizationDuo && selectedProviderType !== providerType.WebAuthn">
                             <span>
-                                <i class="fa fa-sign-in"></i> {{'continue' | i18n}}
+                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'continue' | i18n}}
                             </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
@@ -74,4 +78,3 @@
     </div>
 </form>
 <ng-template #twoFactorOptions></ng-template>
-<iframe id="u2f_iframe" hidden></iframe>

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

@@ -5,35 +5,41 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 
-import { Router } from '@angular/router';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
 
 import { TwoFactorOptionsComponent } from './two-factor-options.component';
 
 import { ModalComponent } from '../modal.component';
 
-import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { AuthService } from 'jslib/abstractions/auth.service';
-import { EnvironmentService } from 'jslib/abstractions/environment.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { StateService } from 'jslib/abstractions/state.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
 
-import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib/angular/components/two-factor.component';
+import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
 
 @Component({
     selector: 'app-two-factor',
     templateUrl: 'two-factor.component.html',
 })
 export class TwoFactorComponent extends BaseTwoFactorComponent {
-    @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
+    @ViewChild('twoFactorOptions', { read: ViewContainerRef, static: true }) twoFactorOptionsModal: ViewContainerRef;
 
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, apiService: ApiService,
-        platformUtilsService: PlatformUtilsService, private stateService: StateService,
-        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver) {
-        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService);
+        platformUtilsService: PlatformUtilsService, stateService: StateService,
+        environmentService: EnvironmentService, private componentFactoryResolver: ComponentFactoryResolver,
+        storageService: StorageService, route: ActivatedRoute) {
+        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
+            stateService, storageService, route);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
@@ -54,16 +60,23 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
     }
 
     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) {
                 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/accounts/verify-email-token.component.html

@@ -2,7 +2,8 @@
     <div>
         <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </p>
     </div>
 </div>

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

@@ -9,11 +9,11 @@ import {
 
 import { ToasterService } from 'angular2-toaster';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { VerifyEmailRequest } from 'jslib/models/request/verifyEmailRequest';
+import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailRequest';
 
 @Component({
     selector: 'app-verify-email-token',
@@ -26,7 +26,7 @@ export class VerifyEmailTokenComponent implements OnInit {
 
     ngOnInit() {
         let fired = false;
-        this.route.queryParams.subscribe(async (qParams) => {
+        this.route.queryParams.subscribe(async qParams => {
             if (fired) {
                 return;
             }

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

@@ -13,7 +13,7 @@
                     <div class="d-flex">
                         <button type="submit" class="btn btn-danger btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'deleteAccount' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}

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

@@ -8,12 +8,11 @@ import {
 } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
-import { VerifyDeleteRecoverRequest } from 'jslib/models/request/verifyDeleteRecoverRequest';
+import { VerifyDeleteRecoverRequest } from 'jslib-common/models/request/verifyDeleteRecoverRequest';
 
 @Component({
     selector: 'app-verify-recover-delete',
@@ -27,13 +26,13 @@ export class VerifyRecoverDeleteComponent implements OnInit {
     private token: string;
 
     constructor(private router: Router, private apiService: ApiService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private i18nService: I18nService, private route: ActivatedRoute) {
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private route: ActivatedRoute) {
     }
 
     ngOnInit() {
         let fired = false;
-        this.route.queryParams.subscribe(async (qParams) => {
+        this.route.queryParams.subscribe(async qParams => {
             if (fired) {
                 return;
             }
@@ -53,7 +52,6 @@ export class VerifyRecoverDeleteComponent implements OnInit {
             const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
             this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
             await this.formPromise;
-            this.analytics.eventTrack.next({ action: 'Recovered Delete' });
             this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
                 this.i18nService.t('accountDeletedDesc'));
             this.router.navigate(['/']);

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';
@@ -15,6 +16,8 @@ import { LoginComponent } from './accounts/login.component';
 import { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
+import { SetPasswordComponent } from './accounts/set-password.component';
+import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
 import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
@@ -24,20 +27,40 @@ import { EventsComponent as OrgEventsComponent } from './organizations/manage/ev
 import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
 import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
 import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';
 
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
 import { SettingsComponent as OrgSettingsComponent } from './organizations/settings/settings.component';
 import {
     TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
 } from './organizations/settings/two-factor-setup.component';
 
 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
 import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';
 
 import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault.component';
 
+import { AccessComponent } from './send/access.component';
+import { SendComponent } from './send/send.component';
+
 import { AccountComponent } from './settings/account.component';
 import { CreateOrganizationComponent } from './settings/create-organization.component';
 import { DomainRulesComponent } from './settings/domain-rules.component';
@@ -47,22 +70,32 @@ import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
 import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
 import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';
 
 import { VaultComponent } from './vault/vault.component';
 
 import { OrganizationGuardService } from './services/organization-guard.service';
 import { OrganizationTypeGuardService } from './services/organization-type-guard.service';
-import { UnauthGuardService } from './services/unauth-guard.service';
 
-import { AuthGuardService } from 'jslib/angular/services/auth-guard.service';
+import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
+import { LockGuardService } from 'jslib-angular/services/lock-guard.service';
+import { UnauthGuardService } from 'jslib-angular/services/unauth-guard.service';
 
-import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { Permissions } from 'jslib-common/enums/permissions';
+
+import { EmergencyAccessViewComponent } from './settings/emergency-access-view.component';
+import { EmergencyAccessComponent } from './settings/emergency-access.component';
 
 const routes: Routes = [
     {
@@ -76,18 +109,36 @@ const routes: Routes = [
                 canActivate: [UnauthGuardService],
                 data: { titleId: 'createAccount' },
             },
+            {
+                path: 'sso', component: SsoComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'enterpriseSingleSignOn' },
+            },
+            {
+                path: 'set-password', component: SetPasswordComponent,
+                data: { titleId: 'setMasterPassword' },
+            },
             {
                 path: 'hint', component: HintComponent,
                 canActivate: [UnauthGuardService],
                 data: { titleId: 'passwordHint' },
             },
-            { path: 'lock', component: LockComponent },
+            {
+                path: 'lock',
+                component: LockComponent,
+                canActivate: [LockGuardService],
+            },
             { path: 'verify-email', component: VerifyEmailTokenComponent },
             {
                 path: 'accept-organization',
                 component: AcceptOrganizationComponent,
                 data: { titleId: 'joinOrganization' },
             },
+            {
+                path: 'accept-emergency',
+                component: AcceptEmergencyComponent,
+                data: { titleId: 'acceptEmergency' },
+            },
             { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
             {
                 path: 'recover-2fa',
@@ -107,6 +158,11 @@ const routes: Routes = [
                 canActivate: [UnauthGuardService],
                 data: { titleId: 'deleteAccount' },
             },
+            {
+                path: 'send/:sendId/:key',
+                component: AccessComponent,
+                data: { title: 'Bitwarden Send' },
+            },
         ],
     },
     {
@@ -115,6 +171,7 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         children: [
             { path: 'vault', component: VaultComponent, data: { titleId: 'myVault' } },
+            { path: 'sends', component: SendComponent, data: { title: 'Send' } },
             {
                 path: 'settings',
                 component: SettingsComponent,
@@ -125,13 +182,33 @@ const routes: Routes = [
                     { path: 'domain-rules', component: DomainRulesComponent, data: { titleId: 'domainRules' } },
                     { path: 'two-factor', component: TwoFactorSetupComponent, data: { titleId: 'twoStepLogin' } },
                     { path: 'premium', component: PremiumComponent, data: { titleId: 'goPremium' } },
-                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billingAndLicensing' } },
+                    { path: 'billing', component: UserBillingComponent, data: { titleId: 'billing' } },
+                    {
+                        path: 'subscription',
+                        component: UserSubscriptionComponent,
+                        data: { titleId: 'premiumMembership' },
+                    },
                     { path: 'organizations', component: OrganizationsComponent, data: { titleId: 'organizations' } },
                     {
                         path: 'create-organization',
                         component: CreateOrganizationComponent,
                         data: { titleId: 'newOrganization' },
                     },
+                    {
+                        path: 'emergency-access',
+                        children: [
+                            {
+                                path: '',
+                                component: EmergencyAccessComponent,
+                                data: { titleId: 'emergencyAccess' },
+                            },
+                            {
+                                path: ':id',
+                                component: EmergencyAccessViewComponent,
+                                data: { titleId: 'emergencyAccess' },
+                            },
+                        ],
+                    },
                 ],
             },
             {
@@ -148,6 +225,31 @@ const routes: Routes = [
                         data: { titleId: 'passwordGenerator' },
                     },
                     { path: 'breach-report', component: BreachReportComponent, data: { titleId: 'dataBreachReport' } },
+                    {
+                        path: 'reused-passwords-report',
+                        component: ReusedPasswordsReportComponent,
+                        data: { titleId: 'reusedPasswordsReport' },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: UnsecuredWebsitesReportComponent,
+                        data: { titleId: 'unsecuredWebsitesReport' },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: WeakPasswordsReportComponent,
+                        data: { titleId: 'weakPasswordsReport' },
+                    },
+                    {
+                        path: 'exposed-passwords-report',
+                        component: ExposedPasswordsReportComponent,
+                        data: { titleId: 'exposedPasswordsReport' },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: InactiveTwoFactorReportComponent,
+                        data: { titleId: 'inactive2faReport' },
+                    },
                 ],
             },
         ],
@@ -163,31 +265,150 @@ 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,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'exposedPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
+                    },
+                    {
+                        path: 'inactive-two-factor-report',
+                        component: OrgInactiveTwoFactorReportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'inactive2faReport',
+                            permissions: [Permissions.AccessReports],
+                        },
+                    },
+                    {
+                        path: 'reused-passwords-report',
+                        component: OrgReusedPasswordsReportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'reusedPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
+                    },
+                    {
+                        path: 'unsecured-websites-report',
+                        component: OrgUnsecuredWebsitesReportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'unsecuredWebsitesReport',
+                            permissions: [Permissions.AccessReports],
+                        },
+                    },
+                    {
+                        path: 'weak-passwords-report',
+                        component: OrgWeakPasswordsReportComponent,
+                        canActivate: [OrganizationTypeGuardService],
+                        data: {
+                            titleId: 'weakPasswordsReport',
+                            permissions: [Permissions.AccessReports],
+                        },
+                    },
                 ],
             },
             {
                 path: 'manage',
                 component: OrgManageComponent,
                 canActivate: [OrganizationTypeGuardService],
-                data: { allowedTypes: [OrganizationUserType.Owner, OrganizationUserType.Admin] },
+                data: {
+                    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: '',
+                        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, Permissions.ManageUsersPassword],
+                        },
+                    },
+                    {
+                        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' } },
@@ -195,7 +416,12 @@ const routes: Routes = [
                     {
                         path: 'billing',
                         component: OrganizationBillingComponent,
-                        data: { titleId: 'billingAndLicensing' },
+                        data: { titleId: 'billing' },
+                    },
+                    {
+                        path: 'subscription',
+                        component: OrganizationSubscriptionComponent,
+                        data: { titleId: 'subscription' },
                     },
                 ],
             },
@@ -207,6 +433,7 @@ const routes: Routes = [
 @NgModule({
     imports: [RouterModule.forRoot(routes, {
         useHash: true,
+        paramsInheritanceStrategy: 'always',
         /*enableTracing: true,*/
     })],
     exports: [RouterModule],

src/app/app.component.html

@@ -1,2 +1,2 @@
-<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
+<toaster-container [toasterconfig]="toasterConfig" aria-live="polite"></toaster-container>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,16 +1,12 @@
 import * as jq from 'jquery';
-import * as _swal from 'sweetalert';
-import { SweetAlert } from 'sweetalert/typings/core';
+import Swal from 'sweetalert2';
 
 import {
     BodyOutputType,
     Toast,
     ToasterConfig,
-    ToasterContainerComponent,
     ToasterService,
 } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 
 import {
     Component,
@@ -25,33 +21,34 @@ import {
     Router,
 } from '@angular/router';
 
-import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
 
-import { StorageService } from 'jslib/abstractions/storage.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
 
-import { AuthService } from 'jslib/abstractions/auth.service';
-import { CipherService } from 'jslib/abstractions/cipher.service';
-import { CollectionService } from 'jslib/abstractions/collection.service';
-import { CryptoService } from 'jslib/abstractions/crypto.service';
-import { FolderService } from 'jslib/abstractions/folder.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { LockService } from 'jslib/abstractions/lock.service';
-import { NotificationsService } from 'jslib/abstractions/notifications.service';
-import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { SearchService } from 'jslib/abstractions/search.service';
-import { SettingsService } from 'jslib/abstractions/settings.service';
-import { SyncService } from 'jslib/abstractions/sync.service';
-import { TokenService } from 'jslib/abstractions/token.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { AuthService } from 'jslib-common/abstractions/auth.service';
+import { CipherService } from 'jslib-common/abstractions/cipher.service';
+import { CollectionService } from 'jslib-common/abstractions/collection.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { EventService } from 'jslib-common/abstractions/event.service';
+import { FolderService } from 'jslib-common/abstractions/folder.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
+import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { SearchService } from 'jslib-common/abstractions/search.service';
+import { SettingsService } from 'jslib-common/abstractions/settings.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
+import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { TokenService } from 'jslib-common/abstractions/token.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
 
-import { ConstantsService } from 'jslib/services/constants.service';
+import { ConstantsService } from 'jslib-common/services/constants.service';
 
 import { RouterService } from './services/router.service';
 
 const BroadcasterSubscriptionId = 'AppComponent';
-// Hack due to Angular 5.2 bug
-const swal: SweetAlert = _swal as any;
 const IdleTimeout = 60000 * 10; // 10 minutes
 
 @Component({
@@ -70,18 +67,20 @@ export class AppComponent implements OnDestroy, OnInit {
     private idleTimer: number = null;
     private isIdle = false;
 
-    constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+    constructor(
         private broadcasterService: BroadcasterService, private userService: UserService,
         private tokenService: TokenService, private folderService: FolderService,
         private settingsService: SettingsService, private syncService: SyncService,
         private passwordGenerationService: PasswordGenerationService, private cipherService: CipherService,
-        private authService: AuthService, private router: Router, private analytics: Angulartics2,
+        private authService: AuthService, private router: Router,
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private ngZone: NgZone,
-        private lockService: LockService, private storageService: StorageService,
+        private vaultTimeoutService: VaultTimeoutService, private storageService: StorageService,
         private cryptoService: CryptoService, private collectionService: CollectionService,
         private sanitizer: DomSanitizer, private searchService: SearchService,
-        private notificationsService: NotificationsService) { }
+        private notificationsService: NotificationsService, private routerService: RouterService,
+        private stateService: StateService, private eventService: EventService,
+        private policyService: PolicyService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -101,16 +100,22 @@ export class AppComponent implements OnDestroy, OnInit {
                     case 'unlocked':
                         this.notificationsService.updateConnection(false);
                         break;
+                    case 'authBlocked':
+                        this.router.navigate(['/']);
+                        break;
                     case 'logout':
                         this.logOut(!!message.expired);
                         break;
                     case 'lockVault':
-                        await this.lockService.lock();
+                        await this.vaultTimeoutService.lock();
                         break;
                     case 'locked':
                         this.notificationsService.updateConnection(false);
                         this.router.navigate(['lock']);
                         break;
+                    case 'lockedUrl':
+                        window.setTimeout(() => this.routerService.setPreviousUrl(message.url), 500);
+                        break;
                     case 'syncStarted':
                         break;
                     case 'syncCompleted':
@@ -131,14 +136,20 @@ export class AppComponent implements OnDestroy, OnInit {
                             this.router.navigate(['settings/premium']);
                         }
                         break;
+                    case 'emailVerificationRequired':
+                        const emailVerificationConfirmed = await this.platformUtilsService.showDialog(
+                            this.i18nService.t('emailVerificationRequiredDesc'),
+                            this.i18nService.t('emailVerificationRequired'),
+                            this.i18nService.t('learnMore'), this.i18nService.t('cancel'));
+                        if (emailVerificationConfirmed) {
+                            this.platformUtilsService.launchUri('https://bitwarden.com/help/article/create-bitwarden-account/');
+                        }
+                        break;
                     case 'showToast':
                         this.showToast(message);
                         break;
-                    case 'analyticsEventTrack':
-                        this.analytics.eventTrack.next({
-                            action: message.action,
-                            properties: { label: message.label },
-                        });
+                    case 'setFullWidth':
+                        this.setFullWidth();
                         break;
                     default:
                         break;
@@ -146,7 +157,7 @@ export class AppComponent implements OnDestroy, OnInit {
             });
         });
 
-        this.router.events.subscribe((event) => {
+        this.router.events.subscribe(event => {
             if (event instanceof NavigationEnd) {
                 const modals = Array.from(document.querySelectorAll('.modal'));
                 for (const modal of modals) {
@@ -154,10 +165,12 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
 
                 if (document.querySelector('.swal-modal') != null) {
-                    swal.close(undefined);
+                    Swal.close(undefined);
                 }
             }
         });
+
+        this.setFullWidth();
     }
 
     ngOnDestroy() {
@@ -165,9 +178,11 @@ export class AppComponent implements OnDestroy, OnInit {
     }
 
     private async logOut(expired: boolean) {
+        await this.eventService.uploadEvents();
         const userId = await this.userService.getUserId();
 
         await Promise.all([
+            this.eventService.clearEvents(),
             this.syncService.setLastSync(new Date(0)),
             this.tokenService.clearToken(),
             this.cryptoService.clearKeys(),
@@ -176,16 +191,19 @@ export class AppComponent implements OnDestroy, OnInit {
             this.cipherService.clear(userId),
             this.folderService.clear(userId),
             this.collectionService.clear(userId),
+            this.policyService.clear(userId),
             this.passwordGenerationService.clear(),
+            this.stateService.purge(),
         ]);
 
         this.searchService.clearIndex();
         this.authService.logOut(async () => {
-            this.analytics.eventTrack.next({ action: 'Logged Out' });
             if (expired) {
                 this.toasterService.popAsync('warning', this.i18nService.t('loggedOut'),
                     this.i18nService.t('loginExpired'));
             }
+
+            Swal.close();
             this.router.navigate(['/']);
         });
     }
@@ -250,4 +268,13 @@ export class AppComponent implements OnDestroy, OnInit {
             this.notificationsService.reconnectFromActivity();
         }
     }
+
+    private async setFullWidth() {
+        const enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
+        if (enableFullWidth) {
+            document.body.classList.add('full-width');
+        } else {
+            document.body.classList.remove('full-width');
+        }
+    }
 }

src/app/app.module.ts

@@ -1,11 +1,9 @@
-import 'core-js';
-
 import { ToasterModule } from 'angular2-toaster';
-import { Angulartics2Module } from 'angulartics2';
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
 
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -17,7 +15,7 @@ import { AppComponent } from './app.component';
 import { ModalComponent } from './modal.component';
 
 import { AvatarComponent } from './components/avatar.component';
-import { CalloutComponent } from './components/callout.component';
+import { PasswordStrengthComponent } from './components/password-strength.component';
 
 import { FooterComponent } from './layouts/footer.component';
 import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
@@ -25,6 +23,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';
@@ -32,11 +31,16 @@ import { LoginComponent } from './accounts/login.component';
 import { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
+import { SetPasswordComponent } from './accounts/set-password.component';
+import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
 import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
 
+import { BulkConfirmComponent as OrgBulkConfirmComponent } from './organizations/manage/bulk/bulk-confirm.component';
+import { BulkRemoveComponent as OrgBulkRemoveComponent } from './organizations/manage/bulk/bulk-remove.component';
+import { BulkStatusComponent as OrgBulkStatusComponent } from './organizations/manage/bulk/bulk-status.component';
 import {
     CollectionAddEditComponent as OrgCollectionAddEditComponent,
 } from './organizations/manage/collection-add-edit.component';
@@ -48,21 +52,43 @@ import { GroupAddEditComponent as OrgGroupAddEditComponent } from './organizatio
 import { GroupsComponent as OrgGroupsComponent } from './organizations/manage/groups.component';
 import { ManageComponent as OrgManageComponent } from './organizations/manage/manage.component';
 import { PeopleComponent as OrgPeopleComponent } from './organizations/manage/people.component';
+import { PoliciesComponent as OrgPoliciesComponent } from './organizations/manage/policies.component';
+import { PolicyEditComponent as OrgPolicyEditComponent } from './organizations/manage/policy-edit.component';
+import { ResetPasswordComponent as OrgResetPasswordComponent } from './organizations/manage/reset-password.component';
 import { UserAddEditComponent as OrgUserAddEditComponent } from './organizations/manage/user-add-edit.component';
+import { UserConfirmComponent as OrgUserConfirmComponent } from './organizations/manage/user-confirm.component';
 import { UserGroupsComponent as OrgUserGroupsComponent } from './organizations/manage/user-groups.component';
 
 import { AccountComponent as OrgAccountComponent } from './organizations/settings/account.component';
 import { AdjustSeatsComponent } from './organizations/settings/adjust-seats.component';
+import { ChangePlanComponent } from './organizations/settings/change-plan.component';
 import { DeleteOrganizationComponent } from './organizations/settings/delete-organization.component';
+import { DownloadLicenseComponent } from './organizations/settings/download-license.component';
 import { OrganizationBillingComponent } from './organizations/settings/organization-billing.component';
+import { OrganizationSubscriptionComponent } from './organizations/settings/organization-subscription.component';
 import { SettingsComponent as OrgSettingComponent } from './organizations/settings/settings.component';
 import {
     TwoFactorSetupComponent as OrgTwoFactorSetupComponent,
 } from './organizations/settings/two-factor-setup.component';
 
 import { ExportComponent as OrgExportComponent } from './organizations/tools/export.component';
+import {
+    ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent,
+} from './organizations/tools/exposed-passwords-report.component';
 import { ImportComponent as OrgImportComponent } from './organizations/tools/import.component';
+import {
+    InactiveTwoFactorReportComponent as OrgInactiveTwoFactorReportComponent,
+} from './organizations/tools/inactive-two-factor-report.component';
+import {
+    ReusedPasswordsReportComponent as OrgReusedPasswordsReportComponent,
+} from './organizations/tools/reused-passwords-report.component';
 import { ToolsComponent as OrgToolsComponent } from './organizations/tools/tools.component';
+import {
+    UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent,
+} from './organizations/tools/unsecured-websites-report.component';
+import {
+    WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent,
+} from './organizations/tools/weak-passwords-report.component';
 
 import { AddEditComponent as OrgAddEditComponent } from './organizations/vault/add-edit.component';
 import { AttachmentsComponent as OrgAttachmentsComponent } from './organizations/vault/attachments.component';
@@ -71,9 +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';
@@ -81,95 +113,161 @@ 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 { EmergencyAccessAttachmentsComponent } from './settings/emergency-access-attachments.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 { EmergencyAccessComponent } from './settings/emergency-access.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';
 import { OrganizationsComponent } from './settings/organizations.component';
 import { PaymentComponent } from './settings/payment.component';
 import { PremiumComponent } from './settings/premium.component';
 import { ProfileComponent } from './settings/profile.component';
 import { PurgeVaultComponent } from './settings/purge-vault.component';
 import { SettingsComponent } from './settings/settings.component';
+import { TaxInfoComponent } from './settings/tax-info.component';
 import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
 import { TwoFactorEmailComponent } from './settings/two-factor-email.component';
 import { TwoFactorRecoveryComponent } from './settings/two-factor-recovery.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
-import { TwoFactorU2fComponent } from './settings/two-factor-u2f.component';
 import { TwoFactorVerifyComponent } from './settings/two-factor-verify.component';
+import { TwoFactorWebAuthnComponent } from './settings/two-factor-webauthn.component';
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
 import { UpdateKeyComponent } from './settings/update-key.component';
 import { UpdateLicenseComponent } from './settings/update-license.component';
 import { UserBillingComponent } from './settings/user-billing.component';
+import { UserSubscriptionComponent } from './settings/user-subscription.component';
 import { VerifyEmailComponent } from './settings/verify-email.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
 import { ExportComponent } from './tools/export.component';
+import { ExposedPasswordsReportComponent } from './tools/exposed-passwords-report.component';
 import { ImportComponent } from './tools/import.component';
+import { InactiveTwoFactorReportComponent } from './tools/inactive-two-factor-report.component';
 import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
 import { PasswordGeneratorComponent } from './tools/password-generator.component';
+import { ReusedPasswordsReportComponent } from './tools/reused-passwords-report.component';
 import { ToolsComponent } from './tools/tools.component';
+import { UnsecuredWebsitesReportComponent } from './tools/unsecured-websites-report.component';
+import { WeakPasswordsReportComponent } from './tools/weak-passwords-report.component';
 
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
+import { BulkActionsComponent } from './vault/bulk-actions.component';
 import { BulkDeleteComponent } from './vault/bulk-delete.component';
 import { BulkMoveComponent } from './vault/bulk-move.component';
+import { BulkRestoreComponent } from './vault/bulk-restore.component';
 import { BulkShareComponent } from './vault/bulk-share.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CollectionsComponent } from './vault/collections.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { SendInfoComponent } from './vault/send-info.component';
 import { ShareComponent } from './vault/share.component';
 import { VaultComponent } from './vault/vault.component';
 
-import { IconComponent } from 'jslib/angular/components/icon.component';
+import { CalloutComponent } from 'jslib-angular/components/callout.component';
+import { IconComponent } from 'jslib-angular/components/icon.component';
 
-import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
-import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
-import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
-import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive';
-import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive';
-import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
-import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive';
-import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
-import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
+import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
+import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
+import { AutofocusDirective } from 'jslib-angular/directives/autofocus.directive';
+import { BlurClickDirective } from 'jslib-angular/directives/blur-click.directive';
+import { BoxRowDirective } from 'jslib-angular/directives/box-row.directive';
+import { FallbackSrcDirective } from 'jslib-angular/directives/fallback-src.directive';
+import { InputVerbatimDirective } from 'jslib-angular/directives/input-verbatim.directive';
+import { SelectCopyDirective } from 'jslib-angular/directives/select-copy.directive';
+import { StopClickDirective } from 'jslib-angular/directives/stop-click.directive';
+import { StopPropDirective } from 'jslib-angular/directives/stop-prop.directive';
+import { TrueFalseValueDirective } from 'jslib-angular/directives/true-false-value.directive';
 
-import { 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 { ColorPasswordPipe } from 'jslib-angular/pipes/color-password.pipe';
+import { I18nPipe } from 'jslib-angular/pipes/i18n.pipe';
+import { SearchCiphersPipe } from 'jslib-angular/pipes/search-ciphers.pipe';
+import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
 
-import { registerLocaleData } from '@angular/common';
+import {
+    DatePipe,
+    registerLocaleData,
+} from '@angular/common';
+import localeBg from '@angular/common/locales/bg';
+import localeCa from '@angular/common/locales/ca';
 import localeCs from '@angular/common/locales/cs';
 import localeDa from '@angular/common/locales/da';
 import localeDe from '@angular/common/locales/de';
+import localeEl from '@angular/common/locales/el';
+import localeEnGb from '@angular/common/locales/en-GB';
+import localeEnIn from '@angular/common/locales/en-IN';
+import localeEo from '@angular/common/locales/eo';
 import localeEs from '@angular/common/locales/es';
 import localeEt from '@angular/common/locales/et';
+import localeFi from '@angular/common/locales/fi';
 import localeFr from '@angular/common/locales/fr';
+import localeHe from '@angular/common/locales/he';
+import localeHr from '@angular/common/locales/hr';
+import localeHu from '@angular/common/locales/hu';
+import localeId from '@angular/common/locales/id';
 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';
 import localePtBr from '@angular/common/locales/pt';
 import localePtPt from '@angular/common/locales/pt-PT';
+import localeRo from '@angular/common/locales/ro';
 import localeRu from '@angular/common/locales/ru';
 import localeSk from '@angular/common/locales/sk';
+import localeSr from '@angular/common/locales/sr';
 import localeSv from '@angular/common/locales/sv';
+import localeTr from '@angular/common/locales/tr';
+import localeUk from '@angular/common/locales/uk';
 import localeZhCn from '@angular/common/locales/zh-Hans';
+import localeZhTw from '@angular/common/locales/zh-Hant';
 
+registerLocaleData(localeCa, 'ca');
 registerLocaleData(localeCs, 'cs');
+registerLocaleData(localeBg, 'bg');
 registerLocaleData(localeDa, 'da');
 registerLocaleData(localeDe, 'de');
+registerLocaleData(localeEl, 'el');
+registerLocaleData(localeEnGb, 'en-GB');
+registerLocaleData(localeEnIn, 'en-IN');
 registerLocaleData(localeEs, 'es');
 registerLocaleData(localeEt, 'et');
+registerLocaleData(localeEo, 'eo');
+registerLocaleData(localeFi, 'fi');
 registerLocaleData(localeFr, 'fr');
+registerLocaleData(localeHe, 'he');
+registerLocaleData(localeHr, 'hr');
+registerLocaleData(localeHu, 'hu');
+registerLocaleData(localeId, 'id');
 registerLocaleData(localeIt, 'it');
+registerLocaleData(localeJa, 'ja');
+registerLocaleData(localeKo, 'ko');
+registerLocaleData(localeLv, 'lv');
+registerLocaleData(localeMl, 'ml');
 registerLocaleData(localeNb, 'nb');
 registerLocaleData(localeNl, 'nl');
 registerLocaleData(localePl, 'pl');
 registerLocaleData(localePtBr, 'pt-BR');
 registerLocaleData(localePtPt, 'pt-PT');
+registerLocaleData(localeRo, 'ro');
 registerLocaleData(localeRu, 'ru');
 registerLocaleData(localeSk, 'sk');
+registerLocaleData(localeSr, 'sr');
 registerLocaleData(localeSv, 'sv');
+registerLocaleData(localeTr, 'tr');
+registerLocaleData(localeUk, 'uk');
 registerLocaleData(localeZhCn, 'zh-CN');
+registerLocaleData(localeZhTw, 'zh-TW');
 
 @NgModule({
     imports: [
@@ -178,21 +276,24 @@ registerLocaleData(localeZhCn, 'zh-CN');
         FormsModule,
         AppRoutingModule,
         ServicesModule,
-        Angulartics2Module.forRoot([Angulartics2GoogleAnalytics], {
-            pageTracking: {
-                clearQueryParams: true,
-            },
-        }),
         ToasterModule.forRoot(),
+        InfiniteScrollModule,
+        DragDropModule,
     ],
     declarations: [
+        A11yTitleDirective,
+        AcceptEmergencyComponent,
+        AccessComponent,
         AcceptOrganizationComponent,
         AccountComponent,
+        SetPasswordComponent,
+        AddCreditComponent,
         AddEditComponent,
         AdjustPaymentComponent,
         AdjustSeatsComponent,
         AdjustStorageComponent,
         ApiActionDirective,
+        ApiKeyComponent,
         AppComponent,
         AttachmentsComponent,
         AutofocusDirective,
@@ -200,31 +301,46 @@ registerLocaleData(localeZhCn, 'zh-CN');
         BlurClickDirective,
         BoxRowDirective,
         BreachReportComponent,
+        BulkActionsComponent,
         BulkDeleteComponent,
         BulkMoveComponent,
+        BulkRestoreComponent,
         BulkShareComponent,
         CalloutComponent,
         ChangeEmailComponent,
         ChangeKdfComponent,
         ChangePasswordComponent,
+        ChangePlanComponent,
         CiphersComponent,
         CollectionsComponent,
+        ColorPasswordPipe,
         CreateOrganizationComponent,
         DeauthorizeSessionsComponent,
         DeleteAccountComponent,
         DeleteOrganizationComponent,
         DomainRulesComponent,
+        DownloadLicenseComponent,
+        EmergencyAccessAddEditComponent,
+        EmergencyAccessAttachmentsComponent,
+        EmergencyAccessComponent,
+        EmergencyAccessConfirmComponent,
+        EmergencyAccessTakeoverComponent,
+        EmergencyAccessViewComponent,
+        EmergencyAddEditComponent,
         ExportComponent,
+        ExposedPasswordsReportComponent,
         FallbackSrcDirective,
         FolderAddEditComponent,
         FooterComponent,
         FrontendLayoutComponent,
         GroupingsComponent,
         HintComponent,
-        IconComponent,
         I18nPipe,
+        IconComponent,
         ImportComponent,
+        InactiveTwoFactorReportComponent,
         InputVerbatimDirective,
+        LinkSsoComponent,
         LockComponent,
         LoginComponent,
         ModalComponent,
@@ -233,7 +349,12 @@ registerLocaleData(localeZhCn, 'zh-CN');
         OrgAccountComponent,
         OrgAddEditComponent,
         OrganizationBillingComponent,
+        OrganizationPlansComponent,
+        OrganizationSubscriptionComponent,
         OrgAttachmentsComponent,
+        OrgBulkStatusComponent,
+        OrgBulkConfirmComponent,
+        OrgBulkRemoveComponent,
         OrgCiphersComponent,
         OrgCollectionAddEditComponent,
         OrgCollectionsComponent,
@@ -241,23 +362,33 @@ registerLocaleData(localeZhCn, 'zh-CN');
         OrgEntityUsersComponent,
         OrgEventsComponent,
         OrgExportComponent,
+        OrgExposedPasswordsReportComponent,
         OrgImportComponent,
+        OrgInactiveTwoFactorReportComponent,
         OrgGroupAddEditComponent,
         OrgGroupingsComponent,
         OrgGroupsComponent,
         OrgManageCollectionsComponent,
         OrgManageComponent,
         OrgPeopleComponent,
+        OrgPolicyEditComponent,
+        OrgPoliciesComponent,
+        OrgResetPasswordComponent,
+        OrgReusedPasswordsReportComponent,
         OrgSettingComponent,
         OrgToolsComponent,
         OrgTwoFactorSetupComponent,
         OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
         OrgUserGroupsComponent,
         OrganizationsComponent,
         OrganizationLayoutComponent,
+        OrgUnsecuredWebsitesReportComponent,
         OrgVaultComponent,
+        OrgWeakPasswordsReportComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
+        PasswordStrengthComponent,
         PaymentComponent,
         PremiumComponent,
         ProfileComponent,
@@ -265,12 +396,19 @@ registerLocaleData(localeZhCn, 'zh-CN');
         RecoverDeleteComponent,
         RecoverTwoFactorComponent,
         RegisterComponent,
+        ReusedPasswordsReportComponent,
         SearchCiphersPipe,
         SearchPipe,
+        SelectCopyDirective,
+        SendAddEditComponent,
+        SendComponent,
+        SendInfoComponent,
         SettingsComponent,
         ShareComponent,
+        SsoComponent,
         StopClickDirective,
         StopPropDirective,
+        TaxInfoComponent,
         ToolsComponent,
         TrueFalseValueDirective,
         TwoFactorAuthenticatorComponent,
@@ -280,52 +418,70 @@ registerLocaleData(localeZhCn, 'zh-CN');
         TwoFactorOptionsComponent,
         TwoFactorRecoveryComponent,
         TwoFactorSetupComponent,
-        TwoFactorU2fComponent,
         TwoFactorVerifyComponent,
+        TwoFactorWebAuthnComponent,
         TwoFactorYubiKeyComponent,
+        UnsecuredWebsitesReportComponent,
         UpdateKeyComponent,
         UpdateLicenseComponent,
         UserBillingComponent,
         UserLayoutComponent,
+        UserSubscriptionComponent,
         VaultComponent,
         VerifyEmailComponent,
         VerifyEmailTokenComponent,
         VerifyRecoverDeleteComponent,
+        WeakPasswordsReportComponent,
     ],
     entryComponents: [
         AddEditComponent,
+        ApiKeyComponent,
         AttachmentsComponent,
+        BulkActionsComponent,
         BulkDeleteComponent,
         BulkMoveComponent,
+        BulkRestoreComponent,
         BulkShareComponent,
         CollectionsComponent,
         DeauthorizeSessionsComponent,
         DeleteAccountComponent,
         DeleteOrganizationComponent,
+        EmergencyAccessAddEditComponent,
+        EmergencyAccessAttachmentsComponent,
+        EmergencyAccessConfirmComponent,
+        EmergencyAccessTakeoverComponent,
+        EmergencyAddEditComponent,
         FolderAddEditComponent,
         ModalComponent,
         OrgAddEditComponent,
         OrgAttachmentsComponent,
+        OrgBulkStatusComponent,
+        OrgBulkConfirmComponent,
+        OrgBulkRemoveComponent,
         OrgCollectionAddEditComponent,
         OrgCollectionsComponent,
         OrgEntityEventsComponent,
         OrgEntityUsersComponent,
         OrgGroupAddEditComponent,
+        OrgPolicyEditComponent,
+        OrgResetPasswordComponent,
         OrgUserAddEditComponent,
+        OrgUserConfirmComponent,
         OrgUserGroupsComponent,
         PasswordGeneratorHistoryComponent,
         PurgeVaultComponent,
+        SendAddEditComponent,
         ShareComponent,
         TwoFactorAuthenticatorComponent,
         TwoFactorDuoComponent,
         TwoFactorEmailComponent,
         TwoFactorOptionsComponent,
         TwoFactorRecoveryComponent,
-        TwoFactorU2fComponent,
+        TwoFactorWebAuthnComponent,
         TwoFactorYubiKeyComponent,
         UpdateKeyComponent,
     ],
-    providers: [],
+    providers: [DatePipe, SearchPipe],
     bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/components/avatar.component.ts

@@ -6,10 +6,10 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
-import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service';
-import { StateService } from 'jslib/abstractions/state.service';
+import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
+import { StateService } from 'jslib-common/abstractions/state.service';
 
-import { Utils } from 'jslib/misc/utils';
+import { Utils } from 'jslib-common/misc/utils';
 
 @Component({
     selector: 'app-avatar',

src/app/components/callout.component.html

@@ -1,7 +0,0 @@
-<div class="callout callout-{{calloutStyle}}" role="alert">
-    <h3 class="callout-heading" *ngIf="title">
-        <i class="fa {{icon}}" *ngIf="icon"></i>
-        {{title}}
-    </h3>
-    <ng-content></ng-content>
-</div>

src/app/components/callout.component.ts

@@ -1,53 +0,0 @@
-import {
-    Component,
-    Input,
-    OnInit,
-} from '@angular/core';
-
-import { I18nService } from 'jslib/abstractions/i18n.service';
-
-@Component({
-    selector: 'app-callout',
-    templateUrl: 'callout.component.html',
-})
-export class CalloutComponent implements OnInit {
-    @Input() type = 'info';
-    @Input() icon: string;
-    @Input() title: string;
-
-    calloutStyle: string;
-
-    constructor(private i18nService: I18nService) { }
-
-    ngOnInit() {
-        this.calloutStyle = this.type;
-
-        if (this.type === 'warning' || this.type === 'danger') {
-            if (this.type === 'danger') {
-                this.calloutStyle = 'danger';
-            }
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('warning');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-warning';
-            }
-        } else if (this.type === 'error') {
-            this.calloutStyle = 'danger';
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('error');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-bolt';
-            }
-        } else if (this.type === 'tip') {
-            this.calloutStyle = 'success';
-            if (this.title === undefined) {
-                this.title = this.i18nService.t('tip');
-            }
-            if (this.icon === undefined) {
-                this.icon = 'fa-lightbulb-o';
-            }
-        }
-    }
-}

src/app/components/password-strength.component.html

@@ -0,0 +1,8 @@
+<div class="progress">
+    <div class="progress-bar {{color}}" role="progressbar" [ngStyle]="{width: (scoreWidth + '%')}"
+        attr.aria-valuenow="{{scoreWidth}}" aria-valuemin="0" aria-valuemax="100">
+        <ng-container *ngIf="showText && text">
+            {{text}}
+        </ng-container>
+    </div>
+</div>

src/app/components/password-strength.component.ts

@@ -0,0 +1,44 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+} from '@angular/core';
+
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-password-strength',
+    templateUrl: 'password-strength.component.html',
+})
+export class PasswordStrengthComponent implements OnChanges {
+    @Input() score?: number;
+    @Input() showText = false;
+
+    scoreWidth = 0;
+    color = 'bg-danger';
+    text: string;
+
+    constructor(private i18nService: I18nService) { }
+
+    ngOnChanges(): void {
+        this.scoreWidth = this.score == null ? 0 : (this.score + 1) * 20;
+        switch (this.score) {
+            case 4:
+                this.color = 'bg-success';
+                this.text = this.i18nService.t('strong');
+                break;
+            case 3:
+                this.color = 'bg-primary';
+                this.text = this.i18nService.t('good');
+                break;
+            case 2:
+                this.color = 'bg-warning';
+                this.text = this.i18nService.t('weak');
+                break;
+            default:
+                this.color = 'bg-danger';
+                this.text = this.score != null ? this.i18nService.t('weak') : null;
+                break;
+        }
+    }
+}

src/app/dummy.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ModalComponent } from 'jslib/angular/components/modal.component';
-
-@NgModule({
-    imports: [],
-    declarations: [
-        ModalComponent,
-    ],
-})
-export class DummyModule {
-}

src/app/layouts/footer.component.html

@@ -1,7 +1,7 @@
 <div class="container footer text-muted">
     <div class="row">
         <div class="col">
-            &copy; {{year}}, 8bit Solutions LLC
+            &copy; {{year}}, Bitwarden Inc.
         </div>
         <div class="col text-center"></div>
         <div class="col text-right">

src/app/layouts/footer.component.ts

@@ -3,7 +3,7 @@ import {
     OnInit,
 } from '@angular/core';
 
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 @Component({
     selector: 'app-footer',
@@ -15,8 +15,8 @@ export class FooterComponent implements OnInit {
 
     constructor(private platformUtilsService: PlatformUtilsService) { }
 
-    ngOnInit() {
+    async ngOnInit() {
         this.year = new Date().getFullYear().toString();
-        this.version = this.platformUtilsService.getApplicationVersion();
+        this.version = await this.platformUtilsService.getApplicationVersion();
     }
 }

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

@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-    &copy; 2018, 8bit Solutions LLC
+    &copy; {{year}}, Bitwarden Inc.
     <br> {{'versionNumber' | i18n : version}}
 </div>

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

@@ -4,7 +4,7 @@ import {
     OnInit,
 } from '@angular/core';
 
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 @Component({
     selector: 'app-frontend-layout',
@@ -12,11 +12,13 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 })
 export class FrontendLayoutComponent implements OnInit, OnDestroy {
     version: string;
+    year: string = '2015';
 
     constructor(private platformUtilsService: PlatformUtilsService) { }
 
-    ngOnInit() {
-        this.version = this.platformUtilsService.getApplicationVersion();
+    async ngOnInit() {
+        this.year = new Date().getFullYear().toString();
+        this.version = await this.platformUtilsService.getApplicationVersion();
         document.body.classList.add('layout_frontend');
     }
 

src/app/layouts/navbar.component.html

@@ -1,13 +1,16 @@
 <nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
     <div class="container">
-        <a class="navbar-brand" routerLink="/" title="{{'pageTitle' | i18n : 'Bitwarden'}}">
-            <i class="fa fa-shield"></i>
+        <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
+            <i class="fa fa-shield" aria-hidden="true"></i>
         </a>
         <div class="collapse navbar-collapse">
             <ul class="navbar-nav">
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/vault">{{'myVault' | i18n}}</a>
                 </li>
+                <li class="nav-item" routerLinkActive="active">
+                    <a class="nav-link" routerLink="/sends">{{'send' | i18n}}</a>
+                </li>
                 <li class="nav-item" routerLinkActive="active">
                     <a class="nav-link" routerLink="/tools">{{'tools' | i18n}}</a>
                 </li>
@@ -18,8 +21,9 @@
         </div>
         <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
             <li class="nav-item dropdown">
-                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i class="fa fa-user-circle fa-lg"></i>
+                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown"
+                    aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i>
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
                     <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
@@ -31,24 +35,24 @@
                     </div>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#" routerLink="/settings/account">
-                        <i class="fa fa-fw fa-user"></i>
+                        <i class="fa fa-fw fa-user" aria-hidden="true"></i>
                         {{'myAccount' | i18n}}
                     </a>
                     <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
-                        <i class="fa fa-fw fa-question-circle"></i>
+                        <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
                         {{'getHelp' | i18n}}
                     </a>
-                    <a class="dropdown-item" href="https://bitwarden.com#download" target="_blank" rel="noopener">
-                        <i class="fa fa-fw fa-download"></i>
+                    <a class="dropdown-item" href="https://bitwarden.com/download/" target="_blank" rel="noopener">
+                        <i class="fa fa-fw fa-download" aria-hidden="true"></i>
                         {{'getApps' | i18n}}
                     </a>
                     <div class="dropdown-divider"></div>
                     <button type="button" class="dropdown-item" (click)="lock()">
-                        <i class="fa fa-fw fa-lock"></i>
+                        <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
                         {{'lockNow' | i18n}}
                     </button>
                     <button type="button" class="dropdown-item" (click)="logOut()">
-                        <i class="fa fa-fw fa-sign-out"></i>
+                        <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
                         {{'logOut' | i18n}}
                     </button>
                 </div>

src/app/layouts/navbar.component.ts

@@ -3,9 +3,9 @@ import {
     OnInit,
 } from '@angular/core';
 
-import { MessagingService } from 'jslib/abstractions/messaging.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { TokenService } from 'jslib/abstractions/token.service';
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { TokenService } from 'jslib-common/abstractions/token.service';
 
 @Component({
     selector: 'app-navbar',

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

@@ -1,45 +1,56 @@
 <app-navbar></app-navbar>
 <div class="org-nav" *ngIf="organization">
-    <div class="container d-flex flex-column">
-        <div class="my-auto d-flex align-items-center pl-1">
-            <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
-            <div class="org-name ml-3">
-                <span>{{organization.name}}</span>
-                <small class="text-muted">{{'organization' | i18n}}</small>
-            </div>
-            <div class="ml-auto card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
-                <div class="card-body py-2">
-                    <i class="fa fa-exclamation-triangle"></i>
-                    {{'organizationIsDisabled' | i18n}}
+    <div class="container d-flex">
+        <div class="d-flex flex-column">
+            <div class="my-auto d-flex align-items-center pl-1">
+                <app-avatar [data]="organization.name" size="45" [circle]="true"></app-avatar>
+                <div class="org-name ml-3">
+                    <span>{{organization.name}}</span>
+                    <small class="text-muted">{{'organization' | i18n}}</small>
+                </div>
+                <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!organization.enabled">
+                    <div class="card-body py-2">
+                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                        {{'organizationIsDisabled' | i18n}}
+                    </div>
                 </div>
             </div>
+            <ul class="nav nav-tabs" *ngIf="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" *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="showToolsTab">
+                    <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
+                        <i class="fa fa-wrench" aria-hidden="true"></i>
+                        {{'tools' | i18n}}
+                    </a>
+                </li>
+                <li class="nav-item" *ngIf="organization.isOwner">
+                    <a class="nav-link" routerLink="settings" routerLinkActive="active">
+                        <i class="fa fa-cogs" aria-hidden="true"></i>
+                        {{'settings' | i18n}}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="ml-auto d-flex align-items-center">
+            <button class="btn btn-primary" (click)="goToBusinessPortal()" #businessBtn
+                [appApiAction]="businessTokenPromise" *ngIf="showBusinessPortalButton">
+                <i class="fa fa-bank fa-fw" [hidden]="businessBtn.loading" aria-hidden="true"></i>
+                <i class="fa fa-spinner fa-spin fa-fw" [hidden]="!businessBtn.loading" title="{{'loading' | i18n}}"
+                    aria-hidden="true"></i>
+                {{'businessPortal' | i18n}} →
+            </button>
         </div>
-        <ul class="nav nav-tabs" *ngIf="organization.isAdmin">
-            <li class="nav-item">
-                <a class="nav-link" routerLink="vault" routerLinkActive="active">
-                    <i class="fa fa-lock"></i>
-                    {{'vault' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="manage" routerLinkActive="active">
-                    <i class="fa fa-sliders"></i>
-                    {{'manage' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="tools" routerLinkActive="active">
-                    <i class="fa fa-wrench"></i>
-                    {{'tools' | i18n}}
-                </a>
-            </li>
-            <li class="nav-item" *ngIf="organization.isOwner">
-                <a class="nav-link" routerLink="settings" routerLinkActive="active">
-                    <i class="fa fa-cogs"></i>
-                    {{'settings' | i18n}}
-                </a>
-            </li>
-        </ul>
     </div>
 </div>
 <router-outlet></router-outlet>

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

@@ -1,33 +1,132 @@
 import {
     Component,
+    NgZone,
+    OnDestroy,
     OnInit,
 } from '@angular/core';
+
 import { ActivatedRoute } from '@angular/router';
 
-import { UserService } from 'jslib/abstractions/user.service';
+import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
 
-import { Organization } from 'jslib/models/domain/organization';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { Organization } from 'jslib-common/models/domain/organization';
+
+const BroadcasterSubscriptionId = 'OrganizationLayoutComponent';
 
 @Component({
     selector: 'app-organization-layout',
     templateUrl: 'organization-layout.component.html',
 })
-export class OrganizationLayoutComponent implements OnInit {
+export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     organization: Organization;
-
+    businessTokenPromise: Promise<any>;
     private organizationId: string;
+    private businessUrl: string;
 
-    constructor(private route: ActivatedRoute, private userService: UserService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService,
+        private broadcasterService: BroadcasterService, private ngZone: NgZone,
+        private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private environmentService: EnvironmentService) { }
 
     ngOnInit() {
+        this.businessUrl = 'https://portal.bitwarden.com';
+        if (this.environmentService.enterpriseUrl != null) {
+            this.businessUrl = this.environmentService.enterpriseUrl;
+        } else if (this.environmentService.baseUrl != null) {
+            this.businessUrl = this.environmentService.baseUrl + '/portal';
+        }
+
         document.body.classList.remove('layout_frontend');
-        this.route.params.subscribe(async (params) => {
+        this.route.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             await this.load();
         });
+        this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
+            this.ngZone.run(async () => {
+                switch (message.command) {
+                    case 'updatedOrgLicense':
+                        await this.load();
+                        break;
+                }
+            });
+        });
+    }
+
+    ngOnDestroy() {
+        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
     }
 
     async load() {
         this.organization = await this.userService.getOrganization(this.organizationId);
     }
+
+    async goToBusinessPortal() {
+        if (this.businessTokenPromise != null) {
+            return;
+        }
+        try {
+            this.businessTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.businessTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.businessUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organization.id);
+            }
+        } catch { }
+        this.businessTokenPromise = null;
+    }
+
+    get showMenuBar() {
+        return this.showManageTab || this.showToolsTab || this.organization.isOwner;
+    }
+
+    get showManageTab(): boolean {
+        return this.organization.canManageUsers ||
+            this.organization.canManageAssignedCollections ||
+            this.organization.canManageAllCollections ||
+            this.organization.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/modal.component.ts

@@ -7,8 +7,10 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 
-import { ModalComponent as BaseModalComponent } from 'jslib/angular/components/modal.component';
-import { Utils } from 'jslib/misc/utils';
+import { ModalComponent as BaseModalComponent } from 'jslib-angular/components/modal.component';
+import { Utils } from 'jslib-common/misc/utils';
+
+import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 
 @Component({
     selector: 'app-modal',
@@ -17,18 +19,22 @@ import { Utils } from 'jslib/misc/utils';
 export class ModalComponent extends BaseModalComponent {
     el: any = null;
 
-    constructor(componentFactoryResolver: ComponentFactoryResolver) {
-        super(componentFactoryResolver);
+    constructor(componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService) {
+        super(componentFactoryResolver, messagingService);
     }
 
     ngOnDestroy() { /* Nothing */ }
 
-    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true): T {
+    show<T>(type: Type<T>, parentContainer: ViewContainerRef, fade: boolean = true,
+        setComponentParameters: (component: T) => void = null): T {
         this.parentContainer = parentContainer;
         this.fade = fade;
 
         const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
         const componentRef = this.container.createComponent<T>(factory);
+        if (setComponentParameters != null) {
+            setComponentParameters(componentRef.instance);
+        }
 
         const modals = Array.from(document.querySelectorAll('.modal'));
         if (modals.length > 0) {
@@ -37,18 +43,22 @@ export class ModalComponent extends BaseModalComponent {
 
             this.el.on('show.bs.modal', () => {
                 this.onShow.emit();
+                this.messagingService.send('modalShow');
             });
             this.el.on('shown.bs.modal', () => {
                 this.onShown.emit();
+                this.messagingService.send('modalShown');
                 if (!Utils.isMobileBrowser) {
                     this.el.find('*[appAutoFocus]').focus();
                 }
             });
             this.el.on('hide.bs.modal', () => {
                 this.onClose.emit();
+                this.messagingService.send('modalClose');
             });
             this.el.on('hidden.bs.modal', () => {
                 this.onClosed.emit();
+                this.messagingService.send('modalClosed');
                 if (this.parentContainer != null) {
                     this.parentContainer.clear();
                 }

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

@@ -0,0 +1,100 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="bulkTitle">
+                    {{'confirmUsers' | 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">
+                <div class="card-body text-center" *ngIf="loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
+                    {{'noSelectedUsersApplicable' | i18n}}
+                </app-callout>
+                <app-callout type="error" *ngIf="error">
+                    {{error}}
+                </app-callout>
+                <ng-container *ngIf="!loading && !done">
+                    <p>
+                        {{'fingerprintEnsureIntegrityVerify' | i18n}}
+                        <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener">
+                            {{'learnMore' | i18n}}</a>
+                    </p>
+                    <table class="table table-hover table-list">
+                        <thead>
+                            <tr>
+                                <th colspan="2">{{'user' | i18n}}</th>
+                                <th>{{'fingerprint' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tr *ngFor="let user of filteredUsers">
+                            <td width="30">
+                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{user.email}}
+                                <small class="text-muted d-block" *ngIf="user.name">{{user.name}}</small>
+                            </td>
+                            <td>
+                                {{fingerprints.get(user.id)}}
+                            </td>
+                        </tr>
+                        <tr *ngFor="let user of excludedUsers">
+                            <td width="30">
+                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{user.email}}
+                                <small class="text-muted d-block" *ngIf="user.name">{{user.name}}</small>
+                            </td>
+                            <td>
+                                {{'bulkFilteredMessage' | i18n}}
+                            </td>
+                        </tr>
+                    </table>
+                </ng-container>
+                <ng-container *ngIf="!loading && done">
+                    <table class="table table-hover table-list">
+                        <thead>
+                            <tr>
+                                <th colspan="2">{{'user' | i18n}}</th>
+                                <th>{{'status' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tr *ngFor="let user of filteredUsers">
+                            <td width="30">
+                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{user.email}}
+                                <small class="text-muted d-block" *ngIf="user.name">{{user.name}}</small>
+                            </td>
+                            <td *ngIf="statuses.has(user.id)">
+                                {{statuses.get(user.id)}}
+                            </td>
+                            <td *ngIf="!statuses.has(user.id)">
+                                {{'bulkFilteredMessage' | i18n}}
+                            </td>
+                        </tr>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" *ngIf="!done" [disabled]="loading" (click)="submit()">
+                    <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">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/organizations/manage/bulk/bulk-confirm.component.ts

@@ -0,0 +1,95 @@
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+
+import { OrganizationUserBulkConfirmRequest } from 'jslib-common/models/request/organizationUserBulkConfirmRequest';
+import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
+
+import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
+
+import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
+
+import { Utils } from 'jslib-common/misc/utils';
+
+@Component({
+    selector: 'app-bulk-confirm',
+    templateUrl: 'bulk-confirm.component.html',
+})
+export class BulkConfirmComponent implements OnInit {
+
+    @Input() organizationId: string;
+    @Input() users: OrganizationUserUserDetailsResponse[];
+
+    excludedUsers: OrganizationUserUserDetailsResponse[];
+    filteredUsers: OrganizationUserUserDetailsResponse[];
+    publicKeys: Map<string, Uint8Array> = new Map();
+    fingerprints: Map<string, string> = new Map();
+    statuses: Map<string, string> = new Map();
+
+    loading: boolean = true;
+    done: boolean = false;
+    error: string;
+
+    constructor(private cryptoService: CryptoService, private apiService: ApiService,
+      private i18nService: I18nService) { }
+
+    async ngOnInit() {
+        this.excludedUsers = this.users.filter(user => user.status !== OrganizationUserStatusType.Accepted);
+        this.filteredUsers = this.users.filter(user => user.status === OrganizationUserStatusType.Accepted);
+
+        if (this.filteredUsers.length <= 0) {
+            this.done = true;
+        }
+
+        const request = new OrganizationUserBulkRequest(this.filteredUsers.map(user => user.id));
+        const response = await this.apiService.postOrganizationUsersPublicKey(this.organizationId, request);
+
+        for (const entry of response.data) {
+            const publicKey = Utils.fromB64ToArray(entry.key);
+            const fingerprint = await this.cryptoService.getFingerprint(entry.userId, publicKey.buffer);
+            if (fingerprint != null) {
+                this.publicKeys.set(entry.id, publicKey);
+                this.fingerprints.set(entry.id, fingerprint.join('-'));
+            }
+        }
+
+        this.loading = false;
+    }
+
+    async submit() {
+        this.loading = true;
+        try {
+            const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
+            const userIdsWithKeys: any[] = [];
+            for (const user of this.filteredUsers) {
+                const publicKey = this.publicKeys.get(user.id);
+                if (publicKey == null) {
+                    continue;
+                }
+                const key = await this.cryptoService.rsaEncrypt(orgKey.key, publicKey.buffer);
+                userIdsWithKeys.push({
+                    id: user.id,
+                    key: key.encryptedString,
+                });
+            }
+            const request = new OrganizationUserBulkConfirmRequest(userIdsWithKeys);
+            const response = await this.apiService.postOrganizationUserBulkConfirm(this.organizationId, request);
+
+            response.data.forEach(entry => {
+                const error = entry.error !== '' ? entry.error : this.i18nService.t('bulkConfirmMessage');
+                this.statuses.set(entry.id, error);
+            });
+
+            this.done = true;
+        } catch (e) {
+            this.error = e.message;
+        }
+        this.loading = false;
+    }
+}

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

@@ -0,0 +1,81 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="bulkTitle">
+                    {{'removeUsers' | 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">
+                <div class="card-body text-center" *ngIf="loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <app-callout type="danger" *ngIf="users.length <= 0">
+                    {{'noSelectedUsersApplicable' | i18n}}
+                </app-callout>
+                <app-callout type="error" *ngIf="error">
+                    {{error}}
+                </app-callout>
+                <ng-container *ngIf="!loading && !done">
+                    <app-callout type="warning" *ngIf="users.length > 0 && !error">
+                        {{'removeUsersWarning' | i18n}}
+                    </app-callout>
+                    <table class="table table-hover table-list">
+                        <thead>
+                            <tr>
+                                <th colspan="2">{{'user' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tr *ngFor="let user of users">
+                            <td width="30">
+                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{user.email}}
+                                <small class="text-muted d-block" *ngIf="user.name">{{user.name}}</small>
+                            </td>
+                        </tr>
+                    </table>
+                </ng-container>
+                <ng-container *ngIf="!loading && done">
+                    <table class="table table-hover table-list">
+                        <thead>
+                            <tr>
+                                <th colspan="2">{{'user' | i18n}}</th>
+                                <th>{{'status' | i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tr *ngFor="let user of users">
+                            <td width="30">
+                                <app-avatar [data]="user.name || user.email" [email]="user.email" size="25" [circle]="true"
+                                    [fontSize]="14"></app-avatar>
+                            </td>
+                            <td>
+                                {{user.email}}
+                                <small class="text-muted d-block" *ngIf="user.name">{{user.name}}</small>
+                            </td>
+                            <td *ngIf="statuses.has(user.id)">
+                                {{statuses.get(user.id)}}
+                            </td>
+                            <td *ngIf="!statuses.has(user.id)">
+                                {{'bulkFilteredMessage' | i18n}}
+                            </td>
+                        </tr>
+                    </table>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" *ngIf="!done && users.length > 0" [disabled]="loading" (click)="submit()">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'removeUsers' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,46 @@
+import {
+    Component,
+    Input,
+} from '@angular/core';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
+
+import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
+
+@Component({
+    selector: 'app-bulk-remove',
+    templateUrl: 'bulk-remove.component.html',
+})
+export class BulkRemoveComponent {
+
+    @Input() organizationId: string;
+    @Input() users: OrganizationUserUserDetailsResponse[];
+
+    statuses: Map<string, string> = new Map();
+
+    loading: boolean = false;
+    done: boolean = false;
+    error: string;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService) { }
+
+    async submit() {
+        this.loading = true;
+        try {
+            const request = new OrganizationUserBulkRequest(this.users.map(user => user.id));
+            const response = await this.apiService.deleteManyOrganizationUsers(this.organizationId, request);
+
+            response.data.forEach(entry => {
+                const error = entry.error !== '' ? entry.error : this.i18nService.t('bulkRemovedMessage');
+                this.statuses.set(entry.id, error);
+            });
+            this.done = true;
+        } catch (e) {
+            this.error = e.message;
+        }
+
+        this.loading = false;
+    }
+}

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

@@ -0,0 +1,47 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="bulkTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="bulkTitle">
+                    {{'bulkConfirmStatus' | 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">
+                <div class="card-body text-center" *ngIf="loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    {{'loading' | i18n}}
+                </div>
+                <table class="table table-hover table-list" *ngIf="!loading">
+                    <thead>
+                        <tr>
+                            <th colspan="2">{{'user' | i18n}}</th>
+                            <th>{{'status' | i18n}}</th>
+                        </tr>
+                    </thead>
+                    <tr *ngFor="let item of users">
+                        <td width="30">
+                            <app-avatar [data]="item.user.name || item.user.email" [email]="item.user.email" size="25" [circle]="true"
+                                [fontSize]="14"></app-avatar>
+                        </td>
+                        <td>
+                            {{item.user.email}}
+                            <small class="text-muted d-block" *ngIf="item.user.name">{{item.user.name}}</small>
+                        </td>
+                        <td class="text-danger" *ngIf="item.error">
+                            {{item.message}}
+                        </td>
+                        <td *ngIf="!item.error">
+                            {{item.message}}
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
+
+type BulkStatusEntry = {
+    user: OrganizationUserUserDetailsResponse,
+    error: boolean,
+    message: string,
+};
+
+@Component({
+    selector: 'app-bulk-status',
+    templateUrl: 'bulk-status.component.html',
+})
+export class BulkStatusComponent {
+
+    users: BulkStatusEntry[];
+    loading: boolean = false;
+
+}

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

@@ -1,19 +1,26 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="collectionAddEditTitle">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="collectionAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <div class="form-group">
                     <label for="name">{{'name' | i18n}}</label>
-                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
+                    <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required
+                        appAutofocus>
+                </div>
+                <div class="form-group">
+                    <label for="externalId">{{'externalId' | i18n}}</label>
+                    <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
                 </div>
                 <ng-container *ngIf="accessGroups">
                     <h3 class="mt-4 d-flex mb-0">
@@ -35,22 +42,31 @@
                             <tr>
                                 <th>&nbsp;</th>
                                 <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'hidePasswords' | i18n}}</th>
                                 <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr *ngFor="let g of groups; let i = index">
                                 <td class="table-list-checkbox" (click)="check(g)">
-                                    <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked" [disabled]="g.accessAll" appStopProp>
+                                    <input type="checkbox" [(ngModel)]="g.checked" name="Groups[{{i}}].Checked"
+                                        [disabled]="g.accessAll" appStopProp>
                                 </td>
                                 <td (click)="check(g)">
-                                    <span appStopProp>
-                                        {{g.name}}
-                                        <i class="fa fa-th text-muted fa-fw" *ngIf="g.accessAll" title="This group can access all items"></i>
-                                    </span>
+                                    {{g.name}}
+                                    <ng-container *ngIf="g.accessAll">
+                                        <i class="fa fa-th text-muted fa-fw" title="{{'groupAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'groupAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                 </td>
                                 <td class="text-center">
-                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly" [disabled]="!g.checked || g.accessAll">
+                                    <input type="checkbox" [(ngModel)]="g.hidePasswords"
+                                        name="Groups[{{i}}].HidePasswords" [disabled]="!g.checked || g.accessAll">
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
+                                        [disabled]="!g.checked || g.accessAll">
                                 </td>
                             </tr>
                         </tbody>
@@ -59,15 +75,18 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}" *ngIf="editMode"
-                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" title="{{'loading' | i18n}}"></i>
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>

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

@@ -7,21 +7,20 @@ import {
 } from '@angular/core';
 
 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 { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { CipherString } from 'jslib/models/domain/cipherString';
-import { SymmetricCryptoKey } from 'jslib/models/domain/symmetricCryptoKey';
-import { CollectionRequest } from 'jslib/models/request/collectionRequest';
-import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
-import { GroupResponse } from 'jslib/models/response/groupResponse';
+import { EncString } from 'jslib-common/models/domain/encString';
+import { SymmetricCryptoKey } from 'jslib-common/models/domain/symmetricCryptoKey';
+import { CollectionRequest } from 'jslib-common/models/request/collectionRequest';
+import { SelectionReadOnlyRequest } from 'jslib-common/models/request/selectionReadOnlyRequest';
+import { GroupResponse } from 'jslib-common/models/response/groupResponse';
 
-import { Utils } from 'jslib/misc/utils';
+import { Utils } from 'jslib-common/misc/utils';
 
 @Component({
     selector: 'app-collection-add-edit',
@@ -38,6 +37,7 @@ export class CollectionAddEditComponent implements OnInit {
     accessGroups: boolean = false;
     title: string;
     name: string;
+    externalId: string;
     groups: GroupResponse[] = [];
     formPromise: Promise<any>;
     deletePromise: Promise<any>;
@@ -45,9 +45,8 @@ export class CollectionAddEditComponent implements OnInit {
     private orgKey: SymmetricCryptoKey;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private platformUtilsService: PlatformUtilsService, private cryptoService: CryptoService,
-        private userService: UserService) { }
+        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
+        private cryptoService: CryptoService, private userService: UserService) { }
 
     async ngOnInit() {
         const organization = await this.userService.getOrganization(this.organizationId);
@@ -55,7 +54,7 @@ export class CollectionAddEditComponent implements OnInit {
         this.editMode = this.loading = this.collectionId != null;
         if (this.accessGroups) {
             const groupsResponse = await this.apiService.getGroups(this.organizationId);
-            this.groups = groupsResponse.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, 'name'));
+            this.groups = groupsResponse.data.map(r => r).sort(Utils.getSortFunction(this.i18nService, 'name'));
         }
         this.orgKey = await this.cryptoService.getOrgKey(this.organizationId);
 
@@ -64,13 +63,15 @@ export class CollectionAddEditComponent implements OnInit {
             this.title = this.i18nService.t('editCollection');
             try {
                 const collection = await this.apiService.getCollectionDetails(this.organizationId, this.collectionId);
-                this.name = await this.cryptoService.decryptToUtf8(new CipherString(collection.name), this.orgKey);
+                this.name = await this.cryptoService.decryptToUtf8(new EncString(collection.name), this.orgKey);
+                this.externalId = collection.externalId;
                 if (collection.groups != null && this.groups.length > 0) {
-                    collection.groups.forEach((s) => {
-                        const group = this.groups.filter((g) => !g.accessAll && g.id === s.id);
+                    collection.groups.forEach(s => {
+                        const group = this.groups.filter(g => !g.accessAll && g.id === s.id);
                         if (group != null && group.length > 0) {
                             (group[0] as any).checked = true;
                             (group[0] as any).readOnly = s.readOnly;
+                            (group[0] as any).hidePasswords = s.hidePasswords;
                         }
                     });
                 }
@@ -79,7 +80,7 @@ export class CollectionAddEditComponent implements OnInit {
             this.title = this.i18nService.t('addCollection');
         }
 
-        this.groups.forEach((g) => {
+        this.groups.forEach(g => {
             if (g.accessAll) {
                 (g as any).checked = true;
             }
@@ -95,11 +96,12 @@ export class CollectionAddEditComponent implements OnInit {
         (g as any).checked = select == null ? !(g as any).checked : select;
         if (!(g as any).checked) {
             (g as any).readOnly = false;
+            (g as any).hidePasswords = false;
         }
     }
 
     selectAll(select: boolean) {
-        this.groups.forEach((g) => this.check(g, select));
+        this.groups.forEach(g => this.check(g, select));
     }
 
     async submit() {
@@ -109,8 +111,9 @@ export class CollectionAddEditComponent implements OnInit {
 
         const request = new CollectionRequest();
         request.name = (await this.cryptoService.encrypt(this.name, this.orgKey)).encryptedString;
-        request.groups = this.groups.filter((g) => (g as any).checked && !g.accessAll)
-            .map((g) => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly));
+        request.externalId = this.externalId;
+        request.groups = this.groups.filter(g => (g as any).checked && !g.accessAll)
+            .map(g => new SelectionReadOnlyRequest(g.id, !!(g as any).readOnly, !!(g as any).hidePasswords));
 
         try {
             if (this.editMode) {
@@ -119,7 +122,6 @@ export class CollectionAddEditComponent implements OnInit {
                 this.formPromise = this.apiService.postCollection(this.organizationId, request);
             }
             await this.formPromise;
-            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Collection' : 'Created Collection' });
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedCollectionId' : 'createdCollectionId', this.name));
             this.onSavedCollection.emit();
@@ -141,7 +143,6 @@ export class CollectionAddEditComponent implements OnInit {
         try {
             this.deletePromise = this.apiService.deleteCollection(this.organizationId, this.collectionId);
             await this.deletePromise;
-            this.analytics.eventTrack.next({ action: 'Deleted Collection' });
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', this.name));
             this.onDeletedCollection.emit();
         } catch { }

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

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

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

@@ -8,17 +8,22 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { CollectionService } from 'jslib/abstractions/collection.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CollectionService } from 'jslib-common/abstractions/collection.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { SearchService } from 'jslib-common/abstractions/search.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { CollectionData } from 'jslib/models/data/collectionData';
-import { Collection } from 'jslib/models/domain/collection';
-import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
-import { CollectionView } from 'jslib/models/view/collectionView';
+import { CollectionData } from 'jslib-common/models/data/collectionData';
+import { Collection } from 'jslib-common/models/domain/collection';
+import {
+    CollectionDetailsResponse,
+    CollectionResponse,
+} from 'jslib-common/models/response/collectionResponse';
+import { ListResponse } from 'jslib-common/models/response/listResponse';
+import { CollectionView } from 'jslib-common/models/view/collectionView';
 
 import { ModalComponent } from '../../modal.component';
 import { CollectionAddEditComponent } from './collection-add-edit.component';
@@ -29,39 +34,72 @@ import { EntityUsersComponent } from './entity-users.component';
     templateUrl: 'collections.component.html',
 })
 export class CollectionsComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef, static: true }) usersModalRef: ViewContainerRef;
 
     loading = true;
     organizationId: string;
     collections: CollectionView[];
+    pagedCollections: CollectionView[];
     searchText: string;
 
+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedCollectionsCount = 0;
     private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
         private collectionService: CollectionService, private componentFactoryResolver: ComponentFactoryResolver,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService) { }
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private searchService: SearchService) { }
 
     async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async (params) => {
+        this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             await this.load();
-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
                 this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
             });
         });
     }
 
     async load() {
-        const response = await this.apiService.getCollections(this.organizationId);
-        const collections = response.data.map((r) =>
+        const organization = await this.userService.getOrganization(this.organizationId);
+        let response: ListResponse<CollectionResponse>;
+        if (organization.canManageAllCollections) {
+            response = await this.apiService.getCollections(this.organizationId);
+        } else {
+            response = await this.apiService.getUserCollections();
+        }
+        const collections = response.data.filter(c => c.organizationId === this.organizationId).map(r =>
             new Collection(new CollectionData(r as CollectionDetailsResponse)));
         this.collections = await this.collectionService.decryptMany(collections);
+        this.resetPaging();
         this.loading = false;
     }
 
+    loadMore() {
+        if (!this.collections || this.collections.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedCollections.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedCollectionsCount > this.pageSize) {
+            pagedSize = this.pagedCollectionsCount;
+        }
+        if (this.collections.length > pagedLength) {
+            this.pagedCollections =
+                this.pagedCollections.concat(this.collections.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedCollectionsCount = this.pagedCollections.length;
+        this.didScroll = this.pagedCollections.length > this.pageSize;
+    }
+
     edit(collection: CollectionView) {
         if (this.modal != null) {
             this.modal.close();
@@ -102,7 +140,6 @@ export class CollectionsComponent implements OnInit {
 
         try {
             await this.apiService.deleteCollection(this.organizationId, collection.id);
-            this.analytics.eventTrack.next({ action: 'Deleted Collection' });
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', collection.name));
             this.removeCollection(collection);
         } catch { }
@@ -123,15 +160,37 @@ export class CollectionsComponent implements OnInit {
         childComponent.entityId = collection.id;
         childComponent.entityName = collection.name;
 
+        childComponent.onEditedUsers.subscribe(() => {
+            this.load();
+            this.modal.close();
+        });
         this.modal.onClosed.subscribe(() => {
             this.modal = null;
         });
     }
 
+    async resetPaging() {
+        this.pagedCollections = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.collections && this.collections.length > this.pageSize;
+    }
+
     private removeCollection(collection: CollectionView) {
         const index = this.collections.indexOf(collection);
         if (index > -1) {
             this.collections.splice(index, 1);
+            this.resetPaging();
         }
     }
 }

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

@@ -1,32 +1,35 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="eventLogsTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="eventLogsTitle">
                     {{'eventLogs' | i18n}}
                     <small class="text-muted" *ngIf="name">{{name}}</small>
                 </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body" *ngIf="!loaded">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="loaded">
                 <div class="d-flex">
                     <div class="form-inline">
                         <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="start" placeholder="{{'startDate' | i18n}}" [(ngModel)]="start"
-                            placeholder="YYYY-MM-DDTHH:MM">
+                        <input type="datetime-local" class="form-control form-control-sm" id="start"
+                            placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM">
                         <span class="mx-2">-</span>
                         <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
-                        <input type="datetime-local" class="form-control form-control-sm" id="end" placeholder="{{'endDate' | i18n}}" [(ngModel)]="end"
-                            placeholder="YYYY-MM-DDTHH:MM">
+                        <input type="datetime-local" class="form-control form-control-sm" id="end"
+                            placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM">
                     </div>
-                    <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
+                    <button #refreshBtn [appApiAction]="refreshPromise" type="button"
+                        class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
                         [disabled]="loaded && refreshBtn.loading">
-                        <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
+                        <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"
+                            aria-hidden="true"></i>
                         {{'refresh' | i18n}}
                     </button>
                 </div>
@@ -49,18 +52,20 @@
                         <tr *ngFor="let e of events">
                             <td>{{e.date | date:'medium'}}</td>
                             <td>
-                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                             </td>
                             <td *ngIf="showUser">
-                                <span title="{{e.userEmail}}">{{e.userName}}</span>
+                                <span appA11yTitle="{{e.userEmail}}">{{e.userName}}</span>
                             </td>
                             <td [innerHTML]="e.message"></td>
                         </tr>
                     </tbody>
                 </table>
-                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit" (click)="loadEvents(false)"
-                    [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+                    (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'loadMore' | i18n}}</span>
                 </button>
             </div>

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

@@ -6,13 +6,13 @@ import {
 
 import { ToasterService } from 'angular2-toaster';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
 import { EventService } from '../../services/event.service';
 
-import { EventResponse } from 'jslib/models/response/eventResponse';
-import { ListResponse } from 'jslib/models/response/listResponse';
+import { EventResponse } from 'jslib-common/models/response/eventResponse';
+import { ListResponse } from 'jslib-common/models/response/listResponse';
 
 @Component({
     selector: 'app-entity-events',
@@ -50,7 +50,7 @@ export class EntityEventsComponent implements OnInit {
     async load() {
         if (this.showUser) {
             const response = await this.apiService.getOrganizationUsers(this.organizationId);
-            response.data.forEach((u) => {
+            response.data.forEach(u => {
                 const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
                 this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
                 this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
@@ -94,9 +94,9 @@ export class EntityEventsComponent implements OnInit {
         } catch { }
 
         this.continuationToken = response.continuationToken;
-        const events = response.data.map((r) => {
+        const events = await Promise.all(response.data.map(async r => {
             const userId = r.actingUserId == null ? r.userId : r.actingUserId;
-            const eventInfo = this.eventService.getEventInfo(r);
+            const eventInfo = await this.eventService.getEventInfo(r);
             const user = this.showUser && userId != null && this.orgUsersUserIdMap.has(userId) ?
                 this.orgUsersUserIdMap.get(userId) : null;
             return {
@@ -110,7 +110,7 @@ export class EntityEventsComponent implements OnInit {
                 ip: r.ipAddress,
                 type: r.type,
             };
-        });
+        }));
 
         if (!clearExisting && this.events != null && this.events.length > 0) {
             this.events = this.events.concat(events);

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

@@ -1,57 +1,114 @@
-<div class="modal fade">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="userAccessTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">
+                <h2 class="modal-title" id="userAccessTitle">
                     {{'userAccess' | i18n}}
                     <small>{{entityName}}</small>
                 </h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
-            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+            <div class="modal-body" *ngIf="loading || !users">
+                <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="!users || !users.length">
+            <div class="modal-body"
+                *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
+                <div class="d-flex">
+                    <div class="mr-3">
+                        <label class="sr-only" for="search">{{'search' | i18n}}</label>
+                        <input type="search" class="form-control form-control-sm" id="search"
+                            placeholder="{{'search' | i18n}}" name="SearchText" [(ngModel)]="searchText">
+                    </div>
+                    <div class="btn-group btn-group-sm" role="group">
+                        <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: !showSelected}"
+                            (click)="filterSelected(false)">
+                            {{'all' | i18n}}
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: showSelected}"
+                            (click)="filterSelected(true)">
+                            {{'selected' | i18n}}
+                            <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{selectedCount}}</span>
+                        </button>
+                    </div>
+                </div>
+                <ng-container *ngIf="!searchedUsers.length">
+                    <hr>
                     {{'noUsersInList' | i18n}}
                 </ng-container>
-                <table class="table table-hover table-list mb-0" *ngIf="users && users.length">
-                    <tbody>
-                        <tr *ngFor="let u of users">
-                            <td width="30">
-                                <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true" [fontSize]="14"></app-avatar>
-                            </td>
-                            <td>
-                                {{u.email}}
-                                <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
-                                <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
-                                <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
-                            </td>
-                            <td *ngIf="entity === 'collection'">
-                                <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
-                                <i class="fa fa-eye" *ngIf="u.readOnly" title="{{'readOnly' | i18n}}"></i>
-                            </td>
-                            <td>
-                                <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
-                                <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
-                                <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
-                            </td>
-                            <td class="table-list-options wider">
-                                <button type="button" class="btn btn-sm btn-outline-danger btn-submit" (click)="remove(u)" #removeBtn [disabled]="removeBtn.loading"
-                                    [appApiAction]="actionPromise" *ngIf="entity !== 'collection' || !u.accessAll">
-                                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
-                                    <span>{{'remove' | i18n}}</span>
-                                </button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                <ng-container *ngIf="searchedUsers.length">
+                    <table class="table table-hover table-list mb-0">
+                        <thead>
+                            <tr>
+                                <th>&nbsp;</th>
+                                <th>&nbsp;</th>
+                                <th>{{'name' | i18n}}</th>
+                                <th *ngIf="entity === 'collection'">&nbsp;</th>
+                                <th>{{'userType' | i18n}}</th>
+                                <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'hidePasswords' |
+                                    i18n}}</th>
+                                <th width="100" class="text-center" *ngIf="entity === 'collection'">{{'readOnly' |
+                                    i18n}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let u of searchedUsers">
+                                <td class="table-list-checkbox" (click)="check(u)">
+                                    <input type="checkbox" [(ngModel)]="u.checked" name="{{u.id.substr(0,8)}}_Checked"
+                                        [disabled]="entity === 'collection' && u.accessAll"
+                                        (change)="selectedChanged(u)" appStopProp>
+                                </td>
+                                <td width="30" (click)="check(u)">
+                                    <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                                        [fontSize]="14"></app-avatar>
+                                </td>
+                                <td>
+                                    {{u.email}}
+                                    <span class="badge badge-secondary"
+                                        *ngIf="u.status === organizationUserStatusType.Invited">{{'invited'
+                                        | i18n}}</span>
+                                    <span class="badge badge-warning"
+                                        *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted'
+                                        | i18n}}</span>
+                                    <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
+                                </td>
+                                <td *ngIf="entity === 'collection'">
+                                    <ng-container *ngIf="u.accessAll">
+                                        <i class="fa fa-th" title="{{'userAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'userAccessAllItems' | i18n}}</span>
+                                    </ng-container>
+                                </td>
+                                <td>
+                                    <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
+                                    <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"
+                                        name="{{u.id.substr(0,8)}}_HidePasswords"
+                                        [disabled]="u.accessAll || !u.checked">
+                                </td>
+                                <td class="text-center" *ngIf="entity === 'collection'">
+                                    <input type="checkbox" [(ngModel)]="u.readOnly" name="{{u.id.substr(0,8)}}_ReadOnly"
+                                        [disabled]="u.accessAll || !u.checked">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </ng-container>
             </div>
             <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
             </div>
-        </div>
+        </form>
     </div>
 </div>

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

@@ -7,16 +7,16 @@ import {
 } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
 
-import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
-import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
+import { SelectionReadOnlyRequest } from 'jslib-common/models/request/selectionReadOnlyRequest';
+import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
 
-import { Utils } from 'jslib/misc/utils';
+import { Utils } from 'jslib-common/misc/utils';
 
 @Component({
     selector: 'app-entity-users',
@@ -27,68 +27,109 @@ export class EntityUsersComponent implements OnInit {
     @Input() entityId: string;
     @Input() entityName: string;
     @Input() organizationId: string;
-    @Output() onRemovedUser = new EventEmitter();
+    @Output() onEditedUsers = new EventEmitter();
 
     organizationUserType = OrganizationUserType;
     organizationUserStatusType = OrganizationUserStatusType;
 
+    showSelected = false;
     loading = true;
-    users: any[] = [];
-    actionPromise: Promise<any>;
+    formPromise: Promise<any>;
+    selectedCount = 0;
+    searchText: string;
+
+    private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private toasterService: ToasterService) { }
 
     async ngOnInit() {
         await this.loadUsers();
         this.loading = false;
     }
 
-    async loadUsers() {
-        let users: any[] = [];
-        if (this.entity === 'group') {
-            const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
-            users = response.data.map((r) => r);
-        } else if (this.entity === 'collection') {
-            const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
-            users = response.data.map((r) => r);
+    get users() {
+        if (this.showSelected) {
+            return this.allUsers.filter(u => (u as any).checked);
+        } else {
+            return this.allUsers;
         }
-        users.sort(Utils.getSortFunction(this.i18nService, 'email'));
-        this.users = users;
     }
 
-    async remove(user: any) {
-        if (this.actionPromise != null || (this.entity === 'collection' && user.accessAll)) {
+    async loadUsers() {
+        const users = await this.apiService.getOrganizationUsers(this.organizationId);
+        this.allUsers = users.data.map(r => r).sort(Utils.getSortFunction(this.i18nService, 'email'));
+        if (this.entity === 'group') {
+            const response = await this.apiService.getGroupUsers(this.organizationId, this.entityId);
+            if (response != null && users.data.length > 0) {
+                response.forEach(s => {
+                    const user = users.data.filter(u => u.id === s);
+                    if (user != null && user.length > 0) {
+                        (user[0] as any).checked = true;
+                    }
+                });
+            }
+        } else if (this.entity === 'collection') {
+            const response = await this.apiService.getCollectionUsers(this.organizationId, this.entityId);
+            if (response != null && users.data.length > 0) {
+                response.forEach(s => {
+                    const user = users.data.filter(u => !u.accessAll && u.id === s.id);
+                    if (user != null && user.length > 0) {
+                        (user[0] as any).checked = true;
+                        (user[0] as any).readOnly = s.readOnly;
+                        (user[0] as any).hidePasswords = s.hidePasswords;
+                    }
+                });
+            }
+        }
+
+        this.allUsers.forEach(u => {
+            if (this.entity === 'collection' && u.accessAll) {
+                (u as any).checked = true;
+            }
+            if ((u as any).checked) {
+                this.selectedCount++;
+            }
+        });
+    }
+
+    check(u: OrganizationUserUserDetailsResponse) {
+        if (this.entity === 'collection' && u.accessAll) {
             return;
         }
+        (u as any).checked = !(u as any).checked;
+        this.selectedChanged(u);
+    }
 
-        const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeUserConfirmation'), user.email,
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return false;
+    selectedChanged(u: OrganizationUserUserDetailsResponse) {
+        if ((u as any).checked) {
+            this.selectedCount++;
+        } else {
+            if (this.entity === 'collection') {
+                (u as any).readOnly = false;
+                (u as any).hidePasswords = false;
+            }
+            this.selectedCount--;
         }
+    }
 
+    filterSelected(showSelected: boolean) {
+        this.showSelected = showSelected;
+    }
+
+    async submit() {
         try {
             if (this.entity === 'group') {
-                this.actionPromise = this.apiService.deleteGroupUser(this.organizationId, this.entityId,
-                    user.organizationUserId);
-                await this.actionPromise;
-                this.analytics.eventTrack.next({ action: 'Removed User From Group' });
-            } else if (this.entity === 'collection') {
-                this.actionPromise = this.apiService.deleteCollectionUser(this.organizationId, this.entityId,
-                    user.organizationUserId);
-                await this.actionPromise;
-                this.analytics.eventTrack.next({ action: 'Removed User From Collection' });
-            }
-
-            this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', user.email));
-            this.onRemovedUser.emit();
-            const index = this.users.indexOf(user);
-            if (index > -1) {
-                this.users.splice(index, 1);
+                const selections = this.users.filter(u => (u as any).checked).map(u => u.id);
+                this.formPromise = this.apiService.putGroupUsers(this.organizationId, this.entityId, selections);
+            } else {
+                const selections = this.users.filter(u => (u as any).checked && !u.accessAll)
+                    .map(u => new SelectionReadOnlyRequest(u.id, !!(u as any).readOnly, !!(u as any).hidePasswords));
+                this.formPromise = this.apiService.putCollectionUsers(this.organizationId, this.entityId, selections);
             }
+            await this.formPromise;
+            this.toasterService.popAsync('success', null, this.i18nService.t('updatedUsers'));
+            this.onEditedUsers.emit();
         } catch { }
     }
 }

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

@@ -3,21 +3,36 @@
     <div class="ml-auto d-flex">
         <div class="form-inline">
             <label class="sr-only" for="start">{{'startDate' | i18n}}</label>
-            <input type="datetime-local" class="form-control form-control-sm" id="start" placeholder="{{'startDate' | i18n}}" [(ngModel)]="start"
-                placeholder="YYYY-MM-DDTHH:MM">
+            <input type="datetime-local" class="form-control form-control-sm" id="start"
+                placeholder="{{'startDate' | i18n}}" [(ngModel)]="start" placeholder="YYYY-MM-DDTHH:MM"
+                (change)="dirtyDates = true">
             <span class="mx-2">-</span>
             <label class="sr-only" for="end">{{'endDate' | i18n}}</label>
-            <input type="datetime-local" class="form-control form-control-sm" id="end" placeholder="{{'endDate' | i18n}}" [(ngModel)]="end"
-                placeholder="YYYY-MM-DDTHH:MM">
+            <input type="datetime-local" class="form-control form-control-sm" id="end"
+                placeholder="{{'endDate' | i18n}}" [(ngModel)]="end" placeholder="YYYY-MM-DDTHH:MM"
+                (change)="dirtyDates = true">
         </div>
-        <button #refreshBtn [appApiAction]="refreshPromise" type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
-            [disabled]="loaded && refreshBtn.loading">
-            <i class="fa fa-refresh fa-fw" [ngClass]="{'fa-spin': loaded && refreshBtn.loading}"></i>
-            {{'refresh' | i18n}}
-        </button>
+        <form #refreshForm [appApiAction]="refreshPromise" class="d-inline">
+            <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="loadEvents(true)"
+                [disabled]="loaded && refreshForm.loading">
+                <i class="fa fa-refresh fa-fw" aria-hidden="true" [ngClass]="{'fa-spin': loaded && refreshForm.loading}"></i>
+                {{'refresh' | i18n}}
+            </button>
+        </form>
+        <form #exportForm [appApiAction]="exportPromise" class="d-inline">
+            <button type="button" class="btn btn-sm btn-outline-primary btn-submit manual ml-3"
+                [ngClass]="{loading:exportForm.loading}" (click)="exportEvents()"
+                [disabled]="loaded && exportForm.loading || dirtyDates">
+                <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+                <span>{{'export' | i18n}}</span>
+            </button>
+        </form>
     </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!loaded">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="loaded">
     <p *ngIf="!events || !events.length">{{'noEventsInList' | i18n}}</p>
     <table class="table table-hover" *ngIf="events && events.length">
@@ -35,7 +50,8 @@
             <tr *ngFor="let e of events">
                 <td>{{e.date | date:'medium'}}</td>
                 <td>
-                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                 </td>
                 <td>
                     <span title="{{e.userEmail}}">{{e.userName}}</span>
@@ -44,9 +60,9 @@
             </tr>
         </tbody>
     </table>
-    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit" (click)="loadEvents(false)"
-        [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+    <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
+        (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'loadMore' | i18n}}</span>
     </button>
 </ng-container>

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

@@ -6,15 +6,18 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { ExportService } from 'jslib-common/abstractions/export.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { EventResponse } from 'jslib-common/models/response/eventResponse';
+import { ListResponse } from 'jslib-common/models/response/listResponse';
+import { EventView } from 'jslib-common/models/view/eventView';
 
 import { EventService } from '../../services/event.service';
 
-import { EventResponse } from 'jslib/models/response/eventResponse';
-import { ListResponse } from 'jslib/models/response/listResponse';
-
 @Component({
     selector: 'app-org-events',
     templateUrl: 'events.component.html',
@@ -23,23 +26,25 @@ export class EventsComponent implements OnInit {
     loading = true;
     loaded = false;
     organizationId: string;
-    events: any[];
+    events: EventView[];
     start: string;
     end: string;
+    dirtyDates: boolean = true;
     continuationToken: string;
     refreshPromise: Promise<any>;
+    exportPromise: Promise<any>;
     morePromise: Promise<any>;
 
     private orgUsersUserIdMap = new Map<string, any>();
     private orgUsersIdMap = new Map<string, any>();
 
-    constructor(private apiService: ApiService, private route: ActivatedRoute,
-        private eventService: EventService, private i18nService: I18nService,
-        private toasterService: ToasterService, private userService: UserService,
+    constructor(private apiService: ApiService, private route: ActivatedRoute, private eventService: EventService,
+        private i18nService: I18nService, private toasterService: ToasterService, private userService: UserService,
+        private exportService: ExportService, private platformUtilsService: PlatformUtilsService,
         private router: Router) { }
 
     async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async (params) => {
+        this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             const organization = await this.userService.getOrganization(this.organizationId);
             if (organization == null || !organization.useEvents) {
@@ -55,7 +60,7 @@ export class EventsComponent implements OnInit {
 
     async load() {
         const response = await this.apiService.getOrganizationUsers(this.organizationId);
-        response.data.forEach((u) => {
+        response.data.forEach(u => {
             const name = u.name == null || u.name.trim() === '' ? u.email : u.name;
             this.orgUsersIdMap.set(u.id, { name: name, email: u.email });
             this.orgUsersUserIdMap.set(u.userId, { name: name, email: u.email });
@@ -64,41 +69,91 @@ export class EventsComponent implements OnInit {
         this.loaded = true;
     }
 
-    async loadEvents(clearExisting: boolean) {
-        if (this.refreshPromise != null || this.morePromise != null) {
-            return;
-        }
-
-        let dates: string[] = null;
-        try {
-            dates = this.eventService.formatDateFilters(this.start, this.end);
-        } catch (e) {
-            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('invalidDateRange'));
+    async exportEvents() {
+        if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
             return;
         }
 
         this.loading = true;
-        let response: ListResponse<EventResponse>;
+
+        const dates = this.parseDates();
+        if (dates == null) {
+            return;
+        }
+
         try {
-            const promise = this.apiService.getEventsOrganization(this.organizationId, dates[0], dates[1],
-                clearExisting ? null : this.continuationToken);
+            this.exportPromise = this.export(dates[0], dates[1]);
+
+            await this.exportPromise;
+        } catch { }
+
+        this.exportPromise = null;
+        this.loading = false;
+    }
+
+    async loadEvents(clearExisting: boolean) {
+        if (this.appApiPromiseUnfulfilled()) {
+            return;
+        }
+
+        const dates = this.parseDates();
+        if (dates == null) {
+            return;
+        }
+
+        this.loading = true;
+        let events: EventView[] = [];
+        try {
+            const promise = this.loadAndParseEvents(dates[0], dates[1], clearExisting ? null : this.continuationToken);
             if (clearExisting) {
                 this.refreshPromise = promise;
             } else {
                 this.morePromise = promise;
             }
-            response = await promise;
+            const result = await promise;
+            this.continuationToken = result.continuationToken;
+            events = result.events;
         } catch { }
 
-        this.continuationToken = response.continuationToken;
-        const events = response.data.map((r) => {
+        if (!clearExisting && this.events != null && this.events.length > 0) {
+            this.events = this.events.concat(events);
+        } else {
+            this.events = events;
+        }
+
+        this.dirtyDates = false;
+        this.loading = false;
+        this.morePromise = null;
+        this.refreshPromise = null;
+    }
+
+    private async export(start: string, end: string) {
+        let continuationToken = this.continuationToken;
+        let events = [].concat(this.events);
+
+        while (continuationToken != null) {
+            const result = await this.loadAndParseEvents(start, end, continuationToken);
+            continuationToken = result.continuationToken;
+            events = events.concat(result.events);
+        }
+
+        const data = await this.exportService.getEventExport(events);
+        const fileName = this.exportService.getFileName('org-events', 'csv');
+        this.platformUtilsService.saveFile(window, data, { type: 'text/plain' }, fileName);
+    }
+
+    private async loadAndParseEvents(startDate: string, endDate: string, continuationToken: string) {
+        const response = await this.apiService.getEventsOrganization(this.organizationId, startDate, endDate,
+            continuationToken);
+
+        const events = await Promise.all(response.data.map(async r => {
             const userId = r.actingUserId == null ? r.userId : r.actingUserId;
-            const eventInfo = this.eventService.getEventInfo(r);
+            const eventInfo = await this.eventService.getEventInfo(r);
             const user = userId != null && this.orgUsersUserIdMap.has(userId) ?
                 this.orgUsersUserIdMap.get(userId) : null;
-            return {
+            return new EventView({
                 message: eventInfo.message,
+                humanReadableMessage: eventInfo.humanReadableMessage,
                 appIcon: eventInfo.appIcon,
                 appName: eventInfo.appName,
                 userId: userId,
@@ -107,17 +162,24 @@ export class EventsComponent implements OnInit {
                 date: r.date,
                 ip: r.ipAddress,
                 type: r.type,
-            };
-        });
+            });
+        }));
+        return { continuationToken: response.continuationToken, events: events };
+    }
 
-        if (!clearExisting && this.events != null && this.events.length > 0) {
-            this.events = this.events.concat(events);
-        } else {
-            this.events = events;
+    private parseDates() {
+        let dates: string[] = null;
+        try {
+            dates = this.eventService.formatDateFilters(this.start, this.end);
+        } catch (e) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('invalidDateRange'));
+            return null;
         }
+        return dates;
+    }
 
-        this.loading = false;
-        this.morePromise = null;
-        this.refreshPromise = null;
+    private appApiPromiseUnfulfilled() {
+        return this.refreshPromise != null || this.morePromise != null || this.exportPromise != null;
     }
 }

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

@@ -1,14 +1,15 @@
-<div class="modal fade">
-    <div class="modal-dialog">
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="groupAddEditTitle">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
             <div class="modal-header">
-                <h2 class="modal-title">{{title}}</h2>
-                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                <h2 class="modal-title" id="groupAddEditTitle">{{title}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <div class="form-group">
@@ -18,11 +19,15 @@
                 <div class="form-group">
                     <label for="externalId">{{'externalId' | i18n}}</label>
                     <input id="externalId" class="form-control" type="text" name="ExternalId" [(ngModel)]="externalId">
-                    <small class="form-text text-muted">{{'externalIdGroupDesc' | i18n}}</small>
+                    <small class="form-text text-muted">{{'externalIdDesc' | i18n}}</small>
                 </div>
                 <h3 class="mt-4 d-flex">
                     <div class="mb-2">
                         {{'accessControl' | i18n}}
+                        <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
+                            href="https://bitwarden.com/help/article/user-types-access-control/#access-control">
+                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                        </a>
                     </div>
                     <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
                         <button type="button" (click)="selectAll(true)" class="btn btn-link btn-sm py-0">
@@ -35,13 +40,15 @@
                 </h3>
                 <div class="form-group" [ngClass]="{'mb-0': access !== 'selected'}">
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessAll" value="all"
+                            [(ngModel)]="access">
                         <label class="form-check-label" for="accessAll">
                             {{'groupAccessAllItems' | i18n}}
                         </label>
                     </div>
                     <div class="form-check">
-                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected" [(ngModel)]="access">
+                        <input class="form-check-input" type="radio" name="access" id="accessSelected" value="selected"
+                            [(ngModel)]="access">
                         <label class="form-check-label" for="accessSelected">
                             {{'groupAccessSelectedCollections' | i18n}}
                         </label>
@@ -56,19 +63,26 @@
                             <tr>
                                 <th>&nbsp;</th>
                                 <th>{{'name' | i18n}}</th>
+                                <th width="100" class="text-center">{{'hidePasswords' | i18n}}</th>
                                 <th width="100" class="text-center">{{'readOnly' | i18n}}</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr *ngFor="let c of collections; let i = index">
                                 <td class="table-list-checkbox" (click)="check(c)">
-                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked" appStopProp>
+                                    <input type="checkbox" [(ngModel)]="c.checked" name="Collection[{{i}}].Checked"
+                                        appStopProp>
                                 </td>
                                 <td (click)="check(c)">
-                                    <span appStopProp>{{c.name}}</span>
+                                    {{c.name}}
                                 </td>
                                 <td class="text-center">
-                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly" [disabled]="!c.checked">
+                                    <input type="checkbox" [(ngModel)]="c.hidePasswords"
+                                        name="Collection[{{i}}].HidePasswords" [disabled]="!c.checked">
+                                </td>
+                                <td class="text-center">
+                                    <input type="checkbox" [(ngModel)]="c.readOnly" name="Collection[{{i}}].ReadOnly"
+                                        [disabled]="!c.checked">
                                 </td>
                             </tr>
                         </tbody>
@@ -77,15 +91,18 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}" *ngIf="editMode"
-                        [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" title="{{'loading' | i18n}}"></i>
+                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        [appApiAction]="deletePromise">
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"
+                            title="{{'loading' | i18n}}"></i>
                     </button>
                 </div>
             </div>

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

@@ -7,19 +7,18 @@ import {
 } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { CollectionService } from 'jslib/abstractions/collection.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CollectionService } from 'jslib-common/abstractions/collection.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
-import { CollectionData } from 'jslib/models/data/collectionData';
-import { Collection } from 'jslib/models/domain/collection';
-import { GroupRequest } from 'jslib/models/request/groupRequest';
-import { SelectionReadOnlyRequest } from 'jslib/models/request/selectionReadOnlyRequest';
-import { CollectionDetailsResponse } from 'jslib/models/response/collectionResponse';
-import { CollectionView } from 'jslib/models/view/collectionView';
+import { CollectionData } from 'jslib-common/models/data/collectionData';
+import { Collection } from 'jslib-common/models/domain/collection';
+import { GroupRequest } from 'jslib-common/models/request/groupRequest';
+import { SelectionReadOnlyRequest } from 'jslib-common/models/request/selectionReadOnlyRequest';
+import { CollectionDetailsResponse } from 'jslib-common/models/response/collectionResponse';
+import { CollectionView } from 'jslib-common/models/view/collectionView';
 
 @Component({
     selector: 'app-group-add-edit',
@@ -42,8 +41,8 @@ export class GroupAddEditComponent implements OnInit {
     deletePromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private collectionService: CollectionService, private platformUtilsService: PlatformUtilsService) { }
+        private toasterService: ToasterService, private collectionService: CollectionService,
+        private platformUtilsService: PlatformUtilsService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.groupId != null;
@@ -58,11 +57,12 @@ export class GroupAddEditComponent implements OnInit {
                 this.name = group.name;
                 this.externalId = group.externalId;
                 if (group.collections != null && this.collections != null) {
-                    group.collections.forEach((s) => {
-                        const collection = this.collections.filter((c) => c.id === s.id);
+                    group.collections.forEach(s => {
+                        const collection = this.collections.filter(c => c.id === s.id);
                         if (collection != null && collection.length > 0) {
                             (collection[0] as any).checked = true;
                             collection[0].readOnly = s.readOnly;
+                            collection[0].hidePasswords = s.hidePasswords;
                         }
                     });
                 }
@@ -76,7 +76,7 @@ export class GroupAddEditComponent implements OnInit {
 
     async loadCollections() {
         const response = await this.apiService.getCollections(this.organizationId);
-        const collections = response.data.map((r) =>
+        const collections = response.data.map(r =>
             new Collection(new CollectionData(r as CollectionDetailsResponse)));
         this.collections = await this.collectionService.decryptMany(collections);
     }
@@ -89,7 +89,7 @@ export class GroupAddEditComponent implements OnInit {
     }
 
     selectAll(select: boolean) {
-        this.collections.forEach((c) => this.check(c, select));
+        this.collections.forEach(c => this.check(c, select));
     }
 
     async submit() {
@@ -98,8 +98,8 @@ export class GroupAddEditComponent implements OnInit {
         request.externalId = this.externalId;
         request.accessAll = this.access === 'all';
         if (!request.accessAll) {
-            request.collections = this.collections.filter((c) => (c as any).checked)
-                .map((c) => new SelectionReadOnlyRequest(c.id, !!c.readOnly));
+            request.collections = this.collections.filter(c => (c as any).checked)
+                .map(c => new SelectionReadOnlyRequest(c.id, !!c.readOnly, !!c.hidePasswords));
         }
 
         try {
@@ -109,7 +109,6 @@ export class GroupAddEditComponent implements OnInit {
                 this.formPromise = this.apiService.postGroup(this.organizationId, request);
             }
             await this.formPromise;
-            this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Group' : 'Created Group' });
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedGroupId' : 'createdGroupId', this.name));
             this.onSavedGroup.emit();
@@ -131,7 +130,6 @@ export class GroupAddEditComponent implements OnInit {
         try {
             this.deletePromise = this.apiService.deleteGroup(this.organizationId, this.groupId);
             await this.deletePromise;
-            this.analytics.eventTrack.next({ action: 'Deleted Group' });
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', this.name));
             this.onDeletedGroup.emit();
         } catch { }

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

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

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

@@ -11,16 +11,16 @@ import {
 } from '@angular/router';
 
 import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
 
-import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { SearchService } from 'jslib-common/abstractions/search.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { GroupResponse } from 'jslib/models/response/groupResponse';
+import { GroupResponse } from 'jslib-common/models/response/groupResponse';
 
-import { Utils } from 'jslib/misc/utils';
+import { Utils } from 'jslib-common/misc/utils';
 
 import { ModalComponent } from '../../modal.component';
 import { EntityUsersComponent } from './entity-users.component';
@@ -31,24 +31,29 @@ import { GroupAddEditComponent } from './group-add-edit.component';
     templateUrl: 'groups.component.html',
 })
 export class GroupsComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('usersTemplate', { read: ViewContainerRef }) usersModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('usersTemplate', { read: ViewContainerRef, static: true }) usersModalRef: ViewContainerRef;
 
     loading = true;
     organizationId: string;
     groups: GroupResponse[];
+    pagedGroups: GroupResponse[];
     searchText: string;
 
+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedGroupsCount = 0;
     private modal: ModalComponent = null;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private router: Router) { }
+        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
+        private userService: UserService, private router: Router,
+        private searchService: SearchService) { }
 
     async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async (params) => {
+        this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             const organization = await this.userService.getOrganization(this.organizationId);
             if (organization == null || !organization.useGroups) {
@@ -56,8 +61,11 @@ export class GroupsComponent implements OnInit {
                 return;
             }
             await this.load();
-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
                 this.searchText = qParams.search;
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
             });
         });
     }
@@ -67,9 +75,26 @@ export class GroupsComponent implements OnInit {
         const groups = response.data != null && response.data.length > 0 ? response.data : [];
         groups.sort(Utils.getSortFunction(this.i18nService, 'name'));
         this.groups = groups;
+        this.resetPaging();
         this.loading = false;
     }
 
+    loadMore() {
+        if (!this.groups || this.groups.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedGroups.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedGroupsCount > this.pageSize) {
+            pagedSize = this.pagedGroupsCount;
+        }
+        if (this.groups.length > pagedLength) {
+            this.pagedGroups = this.pagedGroups.concat(this.groups.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedGroupsCount = this.pagedGroups.length;
+        this.didScroll = this.pagedGroups.length > this.pageSize;
+    }
+
     edit(group: GroupResponse) {
         if (this.modal != null) {
             this.modal.close();
@@ -110,7 +135,6 @@ export class GroupsComponent implements OnInit {
 
         try {
             await this.apiService.deleteGroup(this.organizationId, group.id);
-            this.analytics.eventTrack.next({ action: 'Deleted Group' });
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', group.name));
             this.removeGroup(group);
         } catch { }
@@ -131,15 +155,36 @@ export class GroupsComponent implements OnInit {
         childComponent.entityId = group.id;
         childComponent.entityName = group.name;
 
+        childComponent.onEditedUsers.subscribe(() => {
+            this.modal.close();
+        });
         this.modal.onClosed.subscribe(() => {
             this.modal = null;
         });
     }
 
+    async resetPaging() {
+        this.pagedGroups = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.groups && this.groups.length > this.pageSize;
+    }
+
     private removeGroup(group: GroupResponse) {
         const index = this.groups.indexOf(group);
         if (index > -1) {
             this.groups.splice(index, 1);
+            this.resetPaging();
         }
     }
 }

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

@@ -1,19 +1,27 @@
 <div class="container page-content">
     <div class="row">
         <div class="col-3">
-            <div class="card">
+            <div class="card" *ngIf="organization">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
-                    <a routerLink="people" class="list-group-item" routerLinkActive="active">
+                    <a routerLink="people" class="list-group-item" routerLinkActive="active"
+                        *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="accessGroups">
+                    <a routerLink="groups" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.canManageGroups && accessGroups">
                         {{'groups' | i18n}}
                     </a>
-                    <a routerLink="events" class="list-group-item" routerLinkActive="active" *ngIf="accessEvents">
+                    <a routerLink="policies" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.canManagePolicies && accessPolicies">
+                        {{'policies' | i18n}}
+                    </a>
+                    <a routerLink="events" class="list-group-item" routerLinkActive="active"
+                        *ngIf="organization.canAccessEventLogs && accessEvents">
                         {{'eventLogs' | i18n}}
                     </a>
                 </div>

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

@@ -4,23 +4,28 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { UserService } from 'jslib/abstractions/user.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { Organization } from 'jslib-common/models/domain/organization';
 
 @Component({
     selector: 'app-org-manage',
     templateUrl: 'manage.component.html',
 })
 export class ManageComponent implements OnInit {
+    organization: Organization;
+    accessPolicies = false;
     accessGroups = false;
     accessEvents = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService) { }
 
     ngOnInit() {
-        this.route.parent.params.subscribe(async (params) => {
-            const organization = await this.userService.getOrganization(params.organizationId);
-            this.accessEvents = organization.useEvents;
-            this.accessGroups = organization.useGroups;
+        this.route.parent.params.subscribe(async params => {
+            this.organization = await this.userService.getOrganization(params.organizationId);
+            this.accessPolicies = this.organization.usePolicies;
+            this.accessEvents = this.organization.useEvents;
+            this.accessGroups = this.organization.useGroups;
         });
     }
 }

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

@@ -2,15 +2,19 @@
     <h1>{{'people' | i18n}}</h1>
     <div class="ml-auto d-flex">
         <div class="btn-group btn-group-sm" role="group">
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}" (click)="filter(null)">
+            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == null}"
+                (click)="filter(null)">
                 {{'all' | i18n}}
+                <span class="badge badge-pill badge-info" *ngIf="allCount">{{allCount}}</span>
             </button>
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Invited}"
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Invited}"
                 (click)="filter(organizationUserStatusType.Invited)">
                 {{'invited' | i18n}}
                 <span class="badge badge-pill badge-info" *ngIf="invitedCount">{{invitedCount}}</span>
             </button>
-            <button type="button" class="btn btn-outline-secondary" [ngClass]="{active: status == organizationUserStatusType.Accepted}"
+            <button type="button" class="btn btn-outline-secondary"
+                [ngClass]="{active: status == organizationUserStatusType.Accepted}"
                 (click)="filter(organizationUserStatusType.Accepted)">
                 {{'accepted' | i18n}}
                 <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{acceptedCount}}</span>
@@ -18,62 +22,126 @@
         </div>
         <div class="ml-3">
             <label class="sr-only" for="search">{{'search' | i18n}}</label>
-            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
+            <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}"
+                [(ngModel)]="searchText">
+        </div>
+        <div class="dropdown ml-3" appListDropdown>
+            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="bulkActionsButton"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" appA11yTitle="{{'options' | i18n}}">
+                <i class="fa fa-cog" aria-hidden="true"></i>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
+                <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
+                    <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                    {{'reinviteSelected' | i18n}}
+                </button>
+                <button class="dropdown-item text-success" appStopClick (click)="bulkConfirm()"
+                    *ngIf="showBulkConfirmUsers">
+                    <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                    {{'confirmSelected' | i18n}}
+                </button>
+                <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
+                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                    {{'remove' | i18n}}
+                </button>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item" appStopClick (click)="selectAll(true)">
+                    <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+                    {{'selectAll' | i18n}}
+                </button>
+                <button class="dropdown-item" appStopClick (click)="selectAll(false)">
+                    <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+                    {{'unselectAll' | i18n}}
+                </button>
+            </div>
         </div>
         <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-            <i class="fa fa-plus fa-fw"></i>
+            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
             {{'inviteUser' | i18n}}
         </button>
     </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
-<ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<ng-container
+    *ngIf="!loading && (isPaging() ? pagedUsers : users | search:searchText:'name':'email':'id') as searchedUsers">
     <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
     <ng-container *ngIf="searchedUsers.length">
         <app-callout type="info" title="{{'confirmUsers' | i18n}}" icon="fa-check-circle" *ngIf="showConfirmUsers">
             {{'usersNeedConfirmed' | i18n}}
         </app-callout>
-        <table class="table table-hover table-list">
+        <table class="table table-hover table-list" infiniteScroll [infiniteScrollDistance]="1"
+            [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
             <tbody>
                 <tr *ngFor="let u of searchedUsers">
+                    <td (click)="checkUser(u)" class="table-list-checkbox">
+                        <input type="checkbox" [(ngModel)]="u.checked" appStopProp>
+                    </td>
                     <td width="30">
-                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+                        <app-avatar [data]="u.name || u.email" [email]="u.email" size="25" [circle]="true"
+                            [fontSize]="14"></app-avatar>
                     </td>
                     <td>
                         <a href="#" appStopClick (click)="edit(u)">{{u.email}}</a>
-                        <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
-                        <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
+                        <span class="badge badge-secondary"
+                            *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
+                        <span class="badge badge-warning"
+                            *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
                         <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                     </td>
+                    <td>
+                        <ng-container *ngIf="u.twoFactorEnabled">
+                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="showEnrolledStatus(u)">
+                            <i class="fa fa-key" title="{{'enrolledPasswordReset' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'enrolledPasswordReset' | i18n}}</span>
+                        </ng-container>
+                    </td>
                     <td>
                         <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
                         <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>
-                            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                <i class="fa fa-cog fa-lg"></i>
+                            <button class="btn btn-outline-secondary dropdown-toggle" type="button"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                                appA11yTitle="{{'options' | i18n}}">
+                                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
                             </button>
                             <div class="dropdown-menu dropdown-menu-right">
-                                <a class="dropdown-item" href="#" appStopClick (click)="reinvite(u)" *ngIf="u.status === organizationUserStatusType.Invited">
-                                    <i class="fa fa-fw fa-envelope-o"></i>
+                                <a class="dropdown-item" href="#" appStopClick (click)="reinvite(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Invited">
+                                    <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
                                     {{'resendInvitation' | i18n}}
                                 </a>
-                                <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(u)" *ngIf="u.status === organizationUserStatusType.Accepted">
-                                    <i class="fa fa-fw fa-check"></i>
+                                <a class="dropdown-item text-success" href="#" appStopClick (click)="confirm(u)"
+                                    *ngIf="u.status === organizationUserStatusType.Accepted">
+                                    <i class="fa fa-fw fa-check" aria-hidden="true"></i>
                                     {{'confirm' | i18n}}
                                 </a>
                                 <a class="dropdown-item" href="#" appStopClick (click)="groups(u)" *ngIf="accessGroups">
-                                    <i class="fa fa-fw fa-sitemap"></i>
+                                    <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
                                     {{'groups' | i18n}}
                                 </a>
-                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)" *ngIf="accessEvents && u.status === organizationUserStatusType.Confirmed">
-                                    <i class="fa fa-fw fa-file-text-o"></i>
+                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)"
+                                    *ngIf="accessEvents && u.status === organizationUserStatusType.Confirmed">
+                                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
                                     {{'eventLogs' | i18n}}
                                 </a>
+                                <a class="dropdown-item" href="#" appStopClick (click)="resetPassword(u)"
+                                    *ngIf="allowResetPassword(u)">
+                                    <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+                                    {{'resetPassword' | i18n}}
+                                </a>
                                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                                    <i class="fa fa-fw fa-remove"></i>
+                                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
                                     {{'remove' | i18n}}
                                 </a>
                             </div>
@@ -87,3 +155,8 @@
 <ng-template #addEdit></ng-template>
 <ng-template #groupsTemplate></ng-template>
 <ng-template #eventsTemplate></ng-template>
+<ng-template #confirmTemplate></ng-template>
+<ng-template #resetPasswordTemplate></ng-template>
+<ng-template #bulkStatusTemplate></ng-template>
+<ng-template #bulkConfirmTemplate></ng-template>
+<ng-template #bulkRemoveTemplate></ng-template>

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

@@ -5,43 +5,73 @@ import {
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+
+import {
+    ActivatedRoute,
+    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 { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
-import { UserService } from 'jslib/abstractions/user.service';
+import { ValidationService } from 'jslib-angular/services/validation.service';
+import { ConstantsService } from 'jslib-common/services/constants.service';
 
-import { OrganizationUserConfirmRequest } from 'jslib/models/request/organizationUserConfirmRequest';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { SearchService } from 'jslib-common/abstractions/search.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
+import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
 
-import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
+import { OrganizationKeysRequest } from 'jslib-common/models/request/organizationKeysRequest';
+import { OrganizationUserBulkRequest } from 'jslib-common/models/request/organizationUserBulkRequest';
+import { OrganizationUserConfirmRequest } from 'jslib-common/models/request/organizationUserConfirmRequest';
 
-import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
-import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+import { ListResponse } from 'jslib-common/models/response/listResponse';
+import { OrganizationUserBulkResponse } from 'jslib-common/models/response/organizationUserBulkResponse';
+import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
 
-import { Utils } from 'jslib/misc/utils';
+import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
+import { PolicyType } from 'jslib-common/enums/policyType';
+
+import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
+
+import { Utils } from 'jslib-common/misc/utils';
 
 import { ModalComponent } from '../../modal.component';
+import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
+import { BulkRemoveComponent } from './bulk/bulk-remove.component';
+import { BulkStatusComponent } from './bulk/bulk-status.component';
 import { EntityEventsComponent } from './entity-events.component';
+import { ResetPasswordComponent } from './reset-password.component';
 import { UserAddEditComponent } from './user-add-edit.component';
+import { UserConfirmComponent } from './user-confirm.component';
 import { UserGroupsComponent } from './user-groups.component';
 
+const MaxCheckedCount = 500;
+
 @Component({
     selector: 'app-org-people',
     templateUrl: 'people.component.html',
 })
 export class PeopleComponent implements OnInit {
-    @ViewChild('addEdit', { read: ViewContainerRef }) addEditModalRef: ViewContainerRef;
-    @ViewChild('groupsTemplate', { read: ViewContainerRef }) groupsModalRef: ViewContainerRef;
-    @ViewChild('eventsTemplate', { read: ViewContainerRef }) eventsModalRef: ViewContainerRef;
+    @ViewChild('addEdit', { read: ViewContainerRef, static: true }) addEditModalRef: ViewContainerRef;
+    @ViewChild('groupsTemplate', { read: ViewContainerRef, static: true }) groupsModalRef: ViewContainerRef;
+    @ViewChild('eventsTemplate', { read: ViewContainerRef, static: true }) eventsModalRef: ViewContainerRef;
+    @ViewChild('confirmTemplate', { read: ViewContainerRef, static: true }) confirmModalRef: ViewContainerRef;
+    @ViewChild('resetPasswordTemplate', { read: ViewContainerRef, static: true }) resetPasswordModalRef: ViewContainerRef;
+    @ViewChild('bulkStatusTemplate', { read: ViewContainerRef, static: true }) bulkStatusModalRef: ViewContainerRef;
+    @ViewChild('bulkConfirmTemplate', { read: ViewContainerRef, static: true }) bulkConfirmModalRef: ViewContainerRef;
+    @ViewChild('bulkRemoveTemplate', { read: ViewContainerRef, static: true }) bulkRemoveModalRef: ViewContainerRef;
 
     loading = true;
     organizationId: string;
     users: OrganizationUserUserDetailsResponse[];
+    pagedUsers: OrganizationUserUserDetailsResponse[];
     searchText: string;
     status: OrganizationUserStatusType = null;
     statusMap = new Map<OrganizationUserStatusType, OrganizationUserUserDetailsResponse[]>();
@@ -50,32 +80,69 @@ export class PeopleComponent implements OnInit {
     actionPromise: Promise<any>;
     accessEvents = false;
     accessGroups = false;
+    canResetPassword = false; // User permission (admin/custom)
+    orgUseResetPassword = false; // Org plan ability
+    orgHasKeys = false; // Org public/private keys
+    orgResetPasswordPolicyEnabled = false;
+    callingUserType: OrganizationUserType = null;
 
+    protected didScroll = false;
+    protected pageSize = 100;
+
+    private pagedUsersCount = 0;
     private modal: ModalComponent = null;
     private allUsers: OrganizationUserUserDetailsResponse[];
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
         private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
-        private platformUtilsService: PlatformUtilsService, private analytics: Angulartics2,
-        private toasterService: ToasterService, private cryptoService: CryptoService,
-        private userService: UserService) { }
+        private platformUtilsService: PlatformUtilsService, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private userService: UserService, private router: Router,
+        private storageService: StorageService, private searchService: SearchService,
+        private validationService: ValidationService, private policyService: PolicyService,
+        private searchPipe: SearchPipe, private syncService: SyncService) { }
 
     async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async (params) => {
+        this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             const organization = await this.userService.getOrganization(this.organizationId);
+            if (!organization.canManageUsers) {
+                this.router.navigate(['../collections'], { relativeTo: this.route });
+                return;
+            }
             this.accessEvents = organization.useEvents;
             this.accessGroups = organization.useGroups;
+            this.canResetPassword = organization.canManageUsersPassword;
+            this.orgUseResetPassword = organization.useResetPassword;
+            this.callingUserType = organization.type;
+            this.orgHasKeys = organization.hasPublicAndPrivateKeys;
+
+            // Backfill pub/priv key if necessary
+            if (this.canResetPassword && !this.orgHasKeys) {
+                const orgShareKey = await this.cryptoService.getOrgKey(this.organizationId);
+                const orgKeys = await this.cryptoService.makeKeyPair(orgShareKey);
+                const request = new OrganizationKeysRequest(orgKeys[0], orgKeys[1].encryptedString);
+                const response = await this.apiService.postOrganizationKeys(this.organizationId, request);
+                if (response != null) {
+                    this.orgHasKeys = response.publicKey != null && response.privateKey != null;
+                    await this.syncService.fullSync(true); // Replace oganizations with new data
+                } else {
+                    throw new Error(this.i18nService.t('resetPasswordOrgKeysError'));
+                }
+            }
+
             await this.load();
 
-            this.route.queryParams.subscribe(async (qParams) => {
+            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
-                    const user = this.users.filter((u) => u.id === qParams.viewEvents);
+                    const user = this.users.filter(u => u.id === qParams.viewEvents);
                     if (user.length > 0 && user[0].status === OrganizationUserStatusType.Confirmed) {
                         this.events(user[0]);
                     }
                 }
+                if (queryParamsSub != null) {
+                    queryParamsSub.unsubscribe();
+                }
             });
         });
     }
@@ -85,7 +152,7 @@ export class PeopleComponent implements OnInit {
         this.statusMap.clear();
         this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
         this.allUsers.sort(Utils.getSortFunction(this.i18nService, 'email'));
-        this.allUsers.forEach((u) => {
+        this.allUsers.forEach(u => {
             if (!this.statusMap.has(u.status)) {
                 this.statusMap.set(u.status, [u]);
             } else {
@@ -93,9 +160,38 @@ export class PeopleComponent implements OnInit {
             }
         });
         this.filter(this.status);
+        const policies = await this.policyService.getAll(PolicyType.ResetPassword);
+        this.orgResetPasswordPolicyEnabled = policies.some(p => p.organizationId === this.organizationId && p.enabled);
         this.loading = false;
     }
 
+    allowResetPassword(orgUser: OrganizationUserUserDetailsResponse): boolean {
+        // Hierarchy check
+        let callingUserHasPermission = false;
+
+        switch (this.callingUserType) {
+            case OrganizationUserType.Owner:
+                callingUserHasPermission = true;
+                break;
+            case OrganizationUserType.Admin:
+                callingUserHasPermission = orgUser.type !== OrganizationUserType.Owner;
+                break;
+            case OrganizationUserType.Custom:
+                callingUserHasPermission = orgUser.type !== OrganizationUserType.Owner
+                    && orgUser.type !== OrganizationUserType.Admin;
+                break;
+        }
+
+        // Final
+        return this.canResetPassword && callingUserHasPermission && this.orgUseResetPassword && this.orgHasKeys
+            && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled
+            && orgUser.status === OrganizationUserStatusType.Confirmed;
+    }
+
+    showEnrolledStatus(orgUser: OrganizationUserUserDetailsResponse): boolean {
+        return this.orgUseResetPassword && orgUser.resetPasswordEnrolled && this.orgResetPasswordPolicyEnabled;
+    }
+
     filter(status: OrganizationUserStatusType) {
         this.status = status;
         if (this.status != null) {
@@ -103,6 +199,29 @@ export class PeopleComponent implements OnInit {
         } else {
             this.users = this.allUsers;
         }
+        // Reset checkbox selecton
+        this.selectAll(false);
+        this.resetPaging();
+    }
+
+    loadMore() {
+        if (!this.users || this.users.length <= this.pageSize) {
+            return;
+        }
+        const pagedLength = this.pagedUsers.length;
+        let pagedSize = this.pageSize;
+        if (pagedLength === 0 && this.pagedUsersCount > this.pageSize) {
+            pagedSize = this.pagedUsersCount;
+        }
+        if (this.users.length > pagedLength) {
+            this.pagedUsers = this.pagedUsers.concat(this.users.slice(pagedLength, pagedLength + pagedSize));
+        }
+        this.pagedUsersCount = this.pagedUsers.length;
+        this.didScroll = this.pagedUsers.length > this.pageSize;
+    }
+
+    get allCount() {
+        return this.allUsers != null ? this.allUsers.length : 0;
     }
 
     get invitedCount() {
@@ -125,6 +244,10 @@ export class PeopleComponent implements OnInit {
             this.confirmedCount > 0 && this.confirmedCount < 3 && this.acceptedCount > 0;
     }
 
+    get showBulkConfirmUsers(): boolean {
+        return this.acceptedCount > 0;
+    }
+
     edit(user: OrganizationUserUserDetailsResponse) {
         if (this.modal != null) {
             this.modal.close();
@@ -186,42 +309,175 @@ export class PeopleComponent implements OnInit {
             return false;
         }
 
+        this.actionPromise = this.apiService.deleteOrganizationUser(this.organizationId, user.id);
         try {
-            await this.apiService.deleteOrganizationUser(this.organizationId, user.id);
-            this.analytics.eventTrack.next({ action: 'Deleted User' });
+            await this.actionPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', user.name || user.email));
             this.removeUser(user);
-        } catch { }
+        } catch (e) {
+            this.validationService.showError(e);
+        }
+        this.actionPromise = null;
     }
 
     async reinvite(user: OrganizationUserUserDetailsResponse) {
         if (this.actionPromise != null) {
             return;
         }
+
         this.actionPromise = this.apiService.postOrganizationUserReinvite(this.organizationId, user.id);
-        await this.actionPromise;
-        this.analytics.eventTrack.next({ action: 'Reinvited User' });
-        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', user.name || user.email));
+        try {
+            await this.actionPromise;
+            this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenReinvited', user.name || user.email));
+        } catch (e) {
+            this.validationService.showError(e);
+        }
         this.actionPromise = null;
     }
 
-    async confirm(user: OrganizationUserUserDetailsResponse) {
+    async bulkRemove() {
         if (this.actionPromise != null) {
             return;
         }
-        this.actionPromise = this.doConfirmation(user);
-        await this.actionPromise;
-        user.status = OrganizationUserStatusType.Confirmed;
-        const mapIndex = this.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
-        if (mapIndex > -1) {
-            this.statusMap.get(OrganizationUserStatusType.Accepted).splice(mapIndex, 1);
-            this.statusMap.get(OrganizationUserStatusType.Confirmed).push(user);
+
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkRemoveModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkRemoveComponent, this.bulkRemoveModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
+    }
+
+    async bulkReinvite() {
+        if (this.actionPromise != null) {
+            return;
+        }
+
+        const users = this.getCheckedUsers();
+        const filteredUsers = users.filter(u => u.status === OrganizationUserStatusType.Invited);
+
+        if (filteredUsers.length <= 0) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('noSelectedUsersApplicable'));
+            return;
+        }
+
+
+        try {
+            const request = new OrganizationUserBulkRequest(filteredUsers.map(user => user.id));
+            const response = this.apiService.postManyOrganizationUserReinvite(this.organizationId, request);
+            this.showBulkStatus(users, filteredUsers, response, this.i18nService.t('bulkReinviteMessage'));
+        } catch (e) {
+            this.validationService.showError(e);
         }
-        this.analytics.eventTrack.next({ action: 'Confirmed User' });
-        this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', user.name || user.email));
         this.actionPromise = null;
     }
 
+    async bulkConfirm() {
+        if (this.actionPromise != null) {
+            return;
+        }
+
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkConfirmModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show(BulkConfirmComponent, this.bulkConfirmModalRef);
+
+        childComponent.organizationId = this.organizationId;
+        childComponent.users = this.getCheckedUsers();
+
+        this.modal.onClosed.subscribe(async () => {
+            await this.load();
+            this.modal = null;
+        });
+    }
+
+    async confirm(user: OrganizationUserUserDetailsResponse) {
+        function updateUser(self: PeopleComponent) {
+            user.status = OrganizationUserStatusType.Confirmed;
+            const mapIndex = self.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
+            if (mapIndex > -1) {
+                self.statusMap.get(OrganizationUserStatusType.Accepted).splice(mapIndex, 1);
+                self.statusMap.get(OrganizationUserStatusType.Confirmed).push(user);
+            }
+        }
+
+        const confirmUser = async (publicKey: Uint8Array) => {
+            try {
+                this.actionPromise = this.doConfirmation(user, publicKey);
+                await this.actionPromise;
+                updateUser(this);
+                this.toasterService.popAsync('success', null, this.i18nService.t('hasBeenConfirmed', user.name || user.email));
+            } catch (e) {
+                this.validationService.showError(e);
+                throw e;
+            } finally {
+                this.actionPromise = null;
+            }
+        };
+
+        if (this.actionPromise != null) {
+            return;
+        }
+
+        const autoConfirm = await this.storageService.get<boolean>(ConstantsService.autoConfirmFingerprints);
+        if (autoConfirm == null || !autoConfirm) {
+            if (this.modal != null) {
+                this.modal.close();
+            }
+
+            const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+            this.modal = this.confirmModalRef.createComponent(factory).instance;
+            const childComponent = this.modal.show<UserConfirmComponent>(
+                UserConfirmComponent, this.confirmModalRef);
+
+            childComponent.name = user != null ? user.name || user.email : null;
+            childComponent.organizationId = this.organizationId;
+            childComponent.organizationUserId = user != null ? user.id : null;
+            childComponent.userId = user != null ? user.userId : null;
+            childComponent.onConfirmedUser.subscribe(async (publicKey: Uint8Array) => {
+                try {
+                    await confirmUser(publicKey);
+                    this.modal.close();
+                } catch (e) {
+                    // tslint:disable-next-line
+                    console.error('Handled exception:', e);
+                }
+            });
+
+            this.modal.onClosed.subscribe(() => {
+                this.modal = null;
+            });
+            return;
+        }
+
+        try {
+            const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
+            const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
+            try {
+                // tslint:disable-next-line
+                console.log('User\'s fingerprint: ' +
+                    (await this.cryptoService.getFingerprint(user.userId, publicKey.buffer)).join('-'));
+            } catch { }
+            await confirmUser(publicKey);
+        } catch (e) {
+            // tslint:disable-next-line
+            console.error('Handled exception:', e);
+        }
+    }
+
     async events(user: OrganizationUserUserDetailsResponse) {
         if (this.modal != null) {
             this.modal.close();
@@ -243,10 +499,120 @@ export class PeopleComponent implements OnInit {
         });
     }
 
-    private async doConfirmation(user: OrganizationUserUserDetailsResponse) {
+    async resetPaging() {
+        this.pagedUsers = [];
+        this.loadMore();
+    }
+
+    isSearching() {
+        return this.searchService.isSearchable(this.searchText);
+    }
+
+    isPaging() {
+        const searching = this.isSearching();
+        if (searching && this.didScroll) {
+            this.resetPaging();
+        }
+        return !searching && this.users && this.users.length > this.pageSize;
+    }
+
+    async resetPassword(user: OrganizationUserUserDetailsResponse) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.resetPasswordModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ResetPasswordComponent>(
+            ResetPasswordComponent, this.resetPasswordModalRef);
+
+        childComponent.name = user != null ? user.name || user.email : null;
+        childComponent.email = user != null ? user.email : null;
+        childComponent.organizationId = this.organizationId;
+        childComponent.id = user != null ? user.id : null;
+
+        childComponent.onPasswordReset.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+    checkUser(user: OrganizationUserUserDetailsResponse, select?: boolean) {
+        (user as any).checked = select == null ? !(user as any).checked : select;
+    }
+
+    selectAll(select: boolean) {
+        if (select) {
+            this.selectAll(false);
+        }
+
+        const filteredUsers = this.searchPipe.transform(this.users, this.searchText, 'name', 'email', 'id');
+
+        const selectCount = select && filteredUsers.length > MaxCheckedCount
+            ? MaxCheckedCount
+            : filteredUsers.length;
+        for (let i = 0; i < selectCount; i++) {
+            this.checkUser(filteredUsers[i], select);
+        }
+    }
+
+    private async showBulkStatus(users: OrganizationUserUserDetailsResponse[], filteredUsers: OrganizationUserUserDetailsResponse[],
+        request: Promise<ListResponse<OrganizationUserBulkResponse>>, successfullMessage: string) {
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.bulkStatusModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<BulkStatusComponent>(
+            BulkStatusComponent, this.bulkStatusModalRef);
+
+        childComponent.loading = true;
+
+        // Workaround to handle closing the modal shortly after it has been opened
+        let close = false;
+        this.modal.onShown.subscribe(() => {
+            if (close) {
+                this.modal.close();
+            }
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+
+        try {
+            const response = await request;
+
+            if (this.modal) {
+                const keyedErrors: any = response.data.filter(r => r.error !== '').reduce((a, x) => ({ ...a, [x.id]: x.error }), {});
+                const keyedFilteredUsers: any = filteredUsers.reduce((a, x) => ({ ...a, [x.id]: x }), {});
+
+                childComponent.users = users.map(user => {
+                    let message = keyedErrors[user.id] ?? successfullMessage;
+                    if (!keyedFilteredUsers.hasOwnProperty(user.id)) {
+                        message = this.i18nService.t('bulkFilteredMessage');
+                    }
+
+                    return {
+                        user: user,
+                        error: keyedErrors.hasOwnProperty(user.id),
+                        message: message,
+                    };
+                });
+                childComponent.loading = false;
+            }
+        } catch {
+            close = true;
+            if (this.modal) {
+                this.modal.close();
+            }
+        }
+    }
+
+    private async doConfirmation(user: OrganizationUserUserDetailsResponse, publicKey: Uint8Array) {
         const orgKey = await this.cryptoService.getOrgKey(this.organizationId);
-        const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
-        const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
         const key = await this.cryptoService.rsaEncrypt(orgKey.key, publicKey.buffer);
         const request = new OrganizationUserConfirmRequest();
         request.key = key.encryptedString;
@@ -257,6 +623,7 @@ export class PeopleComponent implements OnInit {
         let index = this.users.indexOf(user);
         if (index > -1) {
             this.users.splice(index, 1);
+            this.resetPaging();
         }
         if (this.statusMap.has(OrganizationUserStatusType.Accepted)) {
             index = this.statusMap.get(OrganizationUserStatusType.Accepted).indexOf(user);
@@ -277,4 +644,8 @@ export class PeopleComponent implements OnInit {
             }
         }
     }
+
+    private getCheckedUsers() {
+        return this.users.filter(u => (u as any).checked);
+    }
 }

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

@@ -0,0 +1,24 @@
+<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>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
+<table class="table table-hover table-list" *ngIf="!loading">
+    <tbody>
+        <tr *ngFor="let p of policies">
+            <td *ngIf="p.display">
+                <a href="#" appStopClick (click)="edit(p)">{{p.name}}</a>
+                <span class="badge badge-success" *ngIf="p.enabled">{{'enabled' | i18n}}</span>
+                <small class="text-muted d-block">{{p.description}}</small>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<ng-template #editTemplate></ng-template>

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

@@ -0,0 +1,214 @@
+import {
+    Component,
+    ComponentFactoryResolver,
+    OnInit,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { PolicyType } from 'jslib-common/enums/policyType';
+
+import { EnvironmentService } from 'jslib-common/abstractions';
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { UserService } from 'jslib-common/abstractions/user.service';
+
+import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
+
+import { ModalComponent } from '../../modal.component';
+
+import { PolicyEditComponent } from './policy-edit.component';
+
+@Component({
+    selector: 'app-org-policies',
+    templateUrl: 'policies.component.html',
+})
+export class PoliciesComponent implements OnInit {
+    @ViewChild('editTemplate', { read: ViewContainerRef, static: true }) editModalRef: ViewContainerRef;
+
+    loading = true;
+    organizationId: string;
+    policies: any[];
+
+    // Remove when removing deprecation warning
+    enterpriseTokenPromise: Promise<any>;
+    userCanAccessBusinessPortal = false;
+
+    private enterpriseUrl: string;
+
+    private modal: ModalComponent = null;
+    private orgPolicies: PolicyResponse[];
+    private policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute,
+        private i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver,
+        private platformUtilsService: PlatformUtilsService, private userService: UserService,
+        private router: Router, private environmentService: EnvironmentService) { }
+
+    async ngOnInit() {
+        this.route.parent.parent.params.subscribe(async params => {
+            this.organizationId = params.organizationId;
+            const organization = await this.userService.getOrganization(this.organizationId);
+            if (organization == null || !organization.usePolicies) {
+                this.router.navigate(['/organizations', this.organizationId]);
+                return;
+            }
+            this.userCanAccessBusinessPortal = organization.canAccessBusinessPortal;
+            this.policies = [
+                {
+                    name: this.i18nService.t('twoStepLogin'),
+                    description: this.i18nService.t('twoStepLoginPolicyDesc'),
+                    type: PolicyType.TwoFactorAuthentication,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('masterPass'),
+                    description: this.i18nService.t('masterPassPolicyDesc'),
+                    type: PolicyType.MasterPassword,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('passwordGenerator'),
+                    description: this.i18nService.t('passwordGeneratorPolicyDesc'),
+                    type: PolicyType.PasswordGenerator,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('singleOrg'),
+                    description: this.i18nService.t('singleOrgDesc'),
+                    type: PolicyType.SingleOrg,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('requireSso'),
+                    description: this.i18nService.t('requireSsoPolicyDesc'),
+                    type: PolicyType.RequireSso,
+                    enabled: false,
+                    display: organization.useSso,
+                },
+                {
+                    name: this.i18nService.t('personalOwnership'),
+                    description: this.i18nService.t('personalOwnershipPolicyDesc'),
+                    type: PolicyType.PersonalOwnership,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('disableSend'),
+                    description: this.i18nService.t('disableSendPolicyDesc'),
+                    type: PolicyType.DisableSend,
+                    enabled: false,
+                    display: true,
+                },
+                {
+                    name: this.i18nService.t('sendOptions'),
+                    description: this.i18nService.t('sendOptionsPolicyDesc'),
+                    type: PolicyType.SendOptions,
+                    enabled: false,
+                    display: true,
+                }, {
+                    name: this.i18nService.t('resetPasswordPolicy'),
+                    description: this.i18nService.t('resetPasswordPolicyDescription'),
+                    type: PolicyType.ResetPassword,
+                    enabled: false,
+                    display: organization.useResetPassword,
+                },
+            ];
+            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() {
+        const response = await this.apiService.getPolicies(this.organizationId);
+        this.orgPolicies = response.data != null && response.data.length > 0 ? response.data : [];
+        this.orgPolicies.forEach(op => {
+            this.policiesEnabledMap.set(op.type, op.enabled);
+        });
+        this.policies.forEach(p => {
+            p.enabled = this.policiesEnabledMap.has(p.type) && this.policiesEnabledMap.get(p.type);
+        });
+        this.loading = false;
+    }
+
+    edit(p: any) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.editModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PolicyEditComponent>(
+            PolicyEditComponent, this.editModalRef);
+
+        childComponent.name = p.name;
+        childComponent.description = p.description;
+        childComponent.type = p.type;
+        childComponent.organizationId = this.organizationId;
+        childComponent.policiesEnabledMap = this.policiesEnabledMap;
+        childComponent.onSavedPolicy.subscribe(() => {
+            this.modal.close();
+            this.load();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
+
+    // Remove when removing deprecation warning
+    async goToEnterprisePortal() {
+        if (this.enterpriseTokenPromise != null) {
+            return;
+        }
+        try {
+            this.enterpriseTokenPromise = this.apiService.getEnterprisePortalSignInToken();
+            const token = await this.enterpriseTokenPromise;
+            if (token != null) {
+                const userId = await this.userService.getUserId();
+                this.platformUtilsService.launchUri(this.enterpriseUrl + '/login?userId=' + userId +
+                    '&token=' + (window as any).encodeURIComponent(token) + '&organizationId=' + this.organizationId);
+            }
+        } catch { }
+        this.enterpriseTokenPromise = null;
+    }
+}

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

@@ -0,0 +1,189 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+            <div class="modal-header">
+                <h2 class="modal-title" id="policiesEditTitle">{{'editPolicy' | i18n}} - {{name}}</h2>
+                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" *ngIf="loading">
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
+            </div>
+            <div class="modal-body" *ngIf="!loading">
+                <p>{{description}}</p>
+                <app-callout type="warning" *ngIf="type === policyType.TwoFactorAuthentication"
+                    title="{{'warning' | i18n}}" icon="fa-warning">
+                    {{'twoStepLoginPolicyWarning' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SingleOrg" title="{{'warning' | i18n}}"
+                    icon="fa-warning">
+                    {{'singleOrgPolicyWarning' | i18n}}
+                </app-callout>
+                <ng-container *ngIf="type === policyType.RequireSso">
+                    <app-callout type="tip" title="{{'prerequisite' | i18n}}">
+                        {{'requireSsoPolicyReq' | i18n}}
+                    </app-callout>
+                    <app-callout type="warning">
+                        {{'requireSsoExemption' | i18n}}
+                    </app-callout>
+                </ng-container>
+                <app-callout type="warning" *ngIf="type === policyType.PersonalOwnership">
+                    {{'personalOwnershipExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.DisableSend">
+                    {{'disableSendExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.SendOptions">
+                    {{'sendOptionsExemption' | i18n}}
+                </app-callout>
+                <app-callout type="warning" *ngIf="type === policyType.ResetPassword">
+                    {{'resetPasswordPolicyWarning' | 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">{{checkboxDesc}}</label>
+                    </div>
+                </div>
+                <ng-container *ngIf="type === policyType.MasterPassword">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinComplexity">{{'minComplexityScore' | i18n}}</label>
+                            <select id="masterPassMinComplexity" name="MasterPassMinComplexity"
+                                [(ngModel)]="masterPassMinComplexity" class="form-control">
+                                <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="masterPassMinLength">{{'minLength' | i18n}}</label>
+                            <input id="masterPassMinLength" class="form-control" type="number" min="8"
+                                name="MasterPassMinLength" [(ngModel)]="masterPassMinLength">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireUpper"
+                            [(ngModel)]="masterPassRequireUpper" name="MasterPassRequireUpper">
+                        <label class="form-check-label" for="masterPassRequireUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireLower"
+                            [(ngModel)]="masterPassRequireLower" name="MasterPassRequireLower">
+                        <label class="form-check-label" for="masterPassRequireLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireNumbers"
+                            [(ngModel)]="masterPassRequireNumbers" name="MasterPassRequireNumbers">
+                        <label class="form-check-label" for="masterPassRequireNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="masterPassRequireSpecial"
+                            [(ngModel)]="masterPassRequireSpecial" name="MasterPassRequireSpecial">
+                        <label class="form-check-label" for="masterPassRequireSpecial">!@#$%^&amp;*</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.PasswordGenerator">
+                    <div class="row">
+                        <div class="col-6 form-group  mb-0">
+                            <label for="passGenDefaultType">{{'defaultType' | i18n}}</label>
+                            <select id="passGenDefaultType" name="PassGenDefaultType" [(ngModel)]="passGenDefaultType"
+                                class="form-control">
+                                <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <h3 class="mt-4">{{'password' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinLength">{{'minLength' | i18n}}</label>
+                            <input id="passGenMinLength" class="form-control" type="number" name="PassGenMinLength"
+                                min="5" max="128" [(ngModel)]="passGenMinLength">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumbers">{{'minNumbers' | i18n}}</label>
+                            <input id="passGenMinNumbers" class="form-control" type="number" name="PassGenMinNumbers"
+                                min="0" max="9" [(ngModel)]="passGenMinNumbers">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="passGenMinSpecial">{{'minSpecial' | i18n}}</label>
+                            <input id="passGenMinSpecial" class="form-control" type="number" name="PassGenMinSpecial"
+                                min="0" max="9" [(ngModel)]="passGenMinSpecial">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseUpper"
+                            [(ngModel)]="passGenUseUpper" name="PassGenUseUpper">
+                        <label class="form-check-label" for="passGenUseUpper">A-Z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseLower"
+                            [(ngModel)]="passGenUseLower" name="PassGenUseLower">
+                        <label class="form-check-label" for="passGenUseLower">a-z</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseNumbers"
+                            [(ngModel)]="passGenUseNumbers" name="PassGenUseNumbers">
+                        <label class="form-check-label" for="passGenUseNumbers">0-9</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenUseSpecial"
+                            [(ngModel)]="passGenUseSpecial" name="PassGenUseSpecial">
+                        <label class="form-check-label" for="passGenUseSpecial">!@#$%^&amp;*</label>
+                    </div>
+                    <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="passGenMinNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
+                            <input id="passGenMinNumberWords" class="form-control" type="number"
+                                name="PassGenMinNumberWords" min="3" max="20" [(ngModel)]="passGenMinNumberWords">
+                        </div>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenCapitalize"
+                            [(ngModel)]="passGenCapitalize" name="PassGenCapitalize">
+                        <label class="form-check-label" for="passGenCapitalize">{{'capitalize' | i18n}}</label>
+                    </div>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="passGenIncludeNumber"
+                            [(ngModel)]="passGenIncludeNumber" name="PassGenIncludeNumber">
+                        <label class="form-check-label" for="passGenIncludeNumber">{{'includeNumber' | i18n}}</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.SendOptions">
+                    <h3 class="mt-4">{{'options' | i18n}}</h3>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="sendDisableHideEmail"
+                            [(ngModel)]="sendDisableHideEmail" name="SendDisableHideEmail">
+                        <label class="form-check-label" for="sendDisableHideEmail">{{'disableHideEmail' | i18n}}</label>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="type === policyType.ResetPassword">
+                    <h3 class="mt-4">{{'resetPasswordPolicyAutoEnroll' | i18n}}</h3>
+                    <p>{{'resetPasswordPolicyAutoEnrollDescription' | i18n}}</p>
+                    <app-callout type="warning">
+                        {{'resetPasswordPolicyAutoEnrollWarning' | i18n}}
+                    </app-callout>
+                    <div class="form-check">
+                        <input class="form-check-input" type="checkbox" id="autoEnrollEnabled"
+                            [(ngModel)]="resetPasswordAutoEnroll" name="AutoEnrollEnabled">
+                        <label class="form-check-label"
+                            for="autoEnrollEnabled">{{'resetPasswordPolicyAutoEnrollCheckbox' | i18n }}</label>
+                    </div>
+                </ng-container>
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span>{{'save' | i18n}}</span>
+                </button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+                    {{'cancel' | i18n}}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

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

@@ -0,0 +1,230 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+
+import { ApiService } from 'jslib-common/abstractions/api.service';
+import { I18nService } from 'jslib-common/abstractions/i18n.service';
+
+import { PolicyType } from 'jslib-common/enums/policyType';
+
+import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
+
+import { PolicyResponse } from 'jslib-common/models/response/policyResponse';
+
+@Component({
+    selector: 'app-policy-edit',
+    templateUrl: 'policy-edit.component.html',
+})
+export class PolicyEditComponent implements OnInit {
+    @Input() name: string;
+    @Input() description: string;
+    @Input() type: PolicyType;
+    @Input() organizationId: string;
+    @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+    @Output() onSavedPolicy = new EventEmitter();
+
+    policyType = PolicyType;
+    loading = true;
+    enabled = false;
+    formPromise: Promise<any>;
+    passwordScores: any[];
+    defaultTypes: any[];
+
+    // Master password
+    masterPassMinComplexity?: number = null;
+    masterPassMinLength?: number;
+    masterPassRequireUpper?: number;
+    masterPassRequireLower?: number;
+    masterPassRequireNumbers?: number;
+    masterPassRequireSpecial?: number;
+
+    // Password generator
+    passGenDefaultType?: string;
+    passGenMinLength?: number;
+    passGenUseUpper?: boolean;
+    passGenUseLower?: boolean;
+    passGenUseNumbers?: boolean;
+    passGenUseSpecial?: boolean;
+    passGenMinNumbers?: number;
+    passGenMinSpecial?: number;
+    passGenMinNumberWords?: number;
+    passGenCapitalize?: boolean;
+    passGenIncludeNumber?: boolean;
+
+    // Send options
+    sendDisableHideEmail?: boolean;
+
+    // Reset Password
+    resetPasswordAutoEnroll?: boolean;
+
+    private policy: PolicyResponse;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private toasterService: ToasterService) {
+        this.passwordScores = [
+            { name: '-- ' + i18nService.t('select') + ' --', value: null },
+            { name: i18nService.t('weak') + ' (0)', value: 0 },
+            { name: i18nService.t('weak') + ' (1)', value: 1 },
+            { name: i18nService.t('weak') + ' (2)', value: 2 },
+            { name: i18nService.t('good') + ' (3)', value: 3 },
+            { name: i18nService.t('strong') + ' (4)', value: 4 },
+        ];
+        this.defaultTypes = [
+            { name: i18nService.t('userPreference'), value: null },
+            { name: i18nService.t('password'), value: 'password' },
+            { name: i18nService.t('passphrase'), value: 'passphrase' },
+        ];
+    }
+
+    async ngOnInit() {
+        await this.load();
+        this.loading = false;
+    }
+
+    async load() {
+        try {
+            this.policy = await this.apiService.getPolicy(this.organizationId, this.type);
+
+            if (this.policy != null) {
+                this.enabled = this.policy.enabled;
+                if (this.policy.data != null) {
+                    switch (this.type) {
+                        case PolicyType.PasswordGenerator:
+                            this.passGenDefaultType = this.policy.data.defaultType;
+                            this.passGenMinLength = this.policy.data.minLength;
+                            this.passGenUseUpper = this.policy.data.useUpper;
+                            this.passGenUseLower = this.policy.data.useLower;
+                            this.passGenUseNumbers = this.policy.data.useNumbers;
+                            this.passGenUseSpecial = this.policy.data.useSpecial;
+                            this.passGenMinNumbers = this.policy.data.minNumbers;
+                            this.passGenMinSpecial = this.policy.data.minSpecial;
+                            this.passGenMinNumberWords = this.policy.data.minNumberWords;
+                            this.passGenCapitalize = this.policy.data.capitalize;
+                            this.passGenIncludeNumber = this.policy.data.includeNumber;
+                            break;
+                        case PolicyType.MasterPassword:
+                            this.masterPassMinComplexity = this.policy.data.minComplexity;
+                            this.masterPassMinLength = this.policy.data.minLength;
+                            this.masterPassRequireUpper = this.policy.data.requireUpper;
+                            this.masterPassRequireLower = this.policy.data.requireLower;
+                            this.masterPassRequireNumbers = this.policy.data.requireNumbers;
+                            this.masterPassRequireSpecial = this.policy.data.requireSpecial;
+                            break;
+                        case PolicyType.SendOptions:
+                            this.sendDisableHideEmail = this.policy.data.disableHideEmail;
+                            break;
+                        case PolicyType.ResetPassword:
+                            this.resetPasswordAutoEnroll = this.policy.data.autoEnrollEnabled;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+        } catch (e) {
+            if (e.statusCode === 404) {
+                this.enabled = false;
+            } else {
+                throw e;
+            }
+        }
+    }
+
+    async submit() {
+        if (this.preValidate()) {
+            const request = new PolicyRequest();
+            request.enabled = this.enabled;
+            request.type = this.type;
+            request.data = null;
+            switch (this.type) {
+                case PolicyType.PasswordGenerator:
+                    request.data = {
+                        defaultType: this.passGenDefaultType,
+                        minLength: this.passGenMinLength || null,
+                        useUpper: this.passGenUseUpper,
+                        useLower: this.passGenUseLower,
+                        useNumbers: this.passGenUseNumbers,
+                        useSpecial: this.passGenUseSpecial,
+                        minNumbers: this.passGenMinNumbers || null,
+                        minSpecial: this.passGenMinSpecial || null,
+                        minNumberWords: this.passGenMinNumberWords || null,
+                        capitalize: this.passGenCapitalize,
+                        includeNumber: this.passGenIncludeNumber,
+                    };
+                    break;
+                case PolicyType.MasterPassword:
+                    request.data = {
+                        minComplexity: this.masterPassMinComplexity || null,
+                        minLength: this.masterPassMinLength || null,
+                        requireUpper: this.masterPassRequireUpper,
+                        requireLower: this.masterPassRequireLower,
+                        requireNumbers: this.masterPassRequireNumbers,
+                        requireSpecial: this.masterPassRequireSpecial,
+                    };
+                    break;
+                case PolicyType.SendOptions:
+                    request.data = {
+                        disableHideEmail: this.sendDisableHideEmail,
+                    };
+                    break;
+                case PolicyType.ResetPassword:
+                    request.data = {
+                        autoEnrollEnabled: this.resetPasswordAutoEnroll,
+                    };
+                    break;
+                default:
+                    break;
+            }
+            try {
+                this.formPromise = this.apiService.putPolicy(this.organizationId, this.type, request);
+                await this.formPromise;
+                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;
+        }
+    }
+}