Apply Prettier (#1347)

.gitattributes

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,5 @@
 ## Type of change
+
 - [ ] Bug fix
 - [ ] New feature development
 - [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
@@ -6,27 +7,26 @@
 - [ ] Other
 
 ## Objective
+
 <!--Describe what the purpose of this PR is. For example: what bug you're fixing or what new feature you're adding-->
 
-
-
 ## Code changes
+
 <!--Explain the changes you've made to each file or major component. This should help the reviewer understand your changes-->
 <!--Also refer to any related changes or PRs in other repositories-->
 
-* **file.ext:** Description of what was changed and why
+- **file.ext:** Description of what was changed and why
 
 ## Screenshots
+
 <!--Required for any UI changes. Delete if not applicable-->
 
-
-
 ## Testing requirements
+
 <!--What functionality requires testing by QA? This includes testing new behavior and regression testing-->
 
-
-
 ## Before you submit
+
 - [ ] I have checked for **linting** errors (`npm run lint`) (required)
 - [ ] This change requires a **documentation update** (notify the documentation team)
 - [ ] This change has particular **deployment requirements** (notify the DevOps team)

.github/workflows/build.yml

@@ -9,8 +9,8 @@ on:
         required: false
   push:
     branches-ignore:
-      - 'l10n_master'
-      - 'gh-pages'
+      - "l10n_master"
+      - "gh-pages"
 
 jobs:
   cloc:
@@ -28,7 +28,6 @@ jobs:
       - name: Print lines of code
         run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
 
-
   setup:
     name: Setup
     runs-on: ubuntu-20.04
@@ -42,7 +41,6 @@ jobs:
         id: version
         run: echo "::set-output name=value::${GITHUB_SHA:0:7}"
 
-
   build-oss-selfhost:
     name: Build OSS zip
     runs-on: ubuntu-20.04
@@ -53,13 +51,13 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
         with:
-          node-version: '16'
+          node-version: "16"
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
-          path: '~/.npm'
+          path: "~/.npm"
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
@@ -84,13 +82,12 @@ jobs:
           zip -r web-$_VERSION-selfhosted-open-source.zip build
 
       - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
+        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700 # v2.2.3
         with:
           name: web-${{ env._VERSION }}-selfhosted-open-source.zip
           path: ./web-${{ env._VERSION }}-selfhosted-open-source.zip
           if-no-files-found: error
 
-
   build-cloud:
     name: Build Cloud zip
     runs-on: ubuntu-20.04
@@ -101,13 +98,13 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
         with:
-          node-version: '16'
+          node-version: "16"
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
-          path: '~/.npm'
+          path: "~/.npm"
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
@@ -132,13 +129,12 @@ jobs:
           zip -r web-$_VERSION-cloud-COMMERCIAL.zip build
 
       - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
+        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700 # v2.2.3
         with:
           name: web-${{ env._VERSION }}-cloud-COMMERCIAL.zip
           path: ./web-${{ env._VERSION }}-cloud-COMMERCIAL.zip
           if-no-files-found: error
 
-
   build-commercial-selfhost:
     name: Build SelfHost Docker image
     runs-on: ubuntu-20.04
@@ -149,13 +145,13 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
         with:
-          node-version: '16'
+          node-version: "16"
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
-          path: '~/.npm'
+          path: "~/.npm"
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
@@ -195,7 +191,7 @@ jobs:
           zip -r web-$_VERSION-selfhosted-COMMERCIAL.zip build
 
       - name: Upload build artifact
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700  # v2.2.3
+        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700 # v2.2.3
         with:
           name: web-${{ env._VERSION }}-selfhosted-COMMERCIAL.zip
           path: ./web-${{ env._VERSION }}-selfhosted-COMMERCIAL.zip
@@ -248,7 +244,6 @@ jobs:
         if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix'
         run: docker logout
 
-
   build-qa:
     name: Build Docker images for QA environment
     runs-on: ubuntu-20.04
@@ -256,13 +251,13 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
         with:
-          node-version: '16'
+          node-version: "16"
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
-          path: '~/.npm'
+          path: "~/.npm"
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Print environment
@@ -344,7 +339,6 @@ jobs:
       - name: Log out of Docker
         run: docker logout
 
-
   windows:
     name: Test code on Windows
     runs-on: windows-2019
@@ -352,22 +346,22 @@ jobs:
       - name: Set up NuGet
         uses: nuget/setup-nuget@04b0c2b8d1b97922f67eca497d7cf0bf17b8ffe1
         with:
-          nuget-version: 'latest'
+          nuget-version: "latest"
 
       - name: Set up MSBuild
         uses: microsoft/setup-msbuild@c26a08ba26249b81327e26f6ef381897b6a8754d
 
       - name: Cache npm
         id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
+        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6
         with:
-          path: '~/.npm'
+          path: "~/.npm"
           key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
 
       - name: Set up Node
         uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
         with:
-          node-version: '16'
+          node-version: "16"
 
       - name: Print environment
         run: |
@@ -388,13 +382,12 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      # - name: Run linter
-      #   run: npm run lint
+      - name: Run linter
+        run: npm run lint
 
       - name: NPM build
         run: npm run build:bit:cloud
 
-
   crowdin-push:
     name: Crowdin Push
     if: github.ref == 'refs/heads/master'
@@ -408,7 +401,7 @@ jobs:
       _CROWDIN_PROJECT_ID: "308189"
     steps:
       - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
 
       - name: Login to Azure
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
@@ -423,7 +416,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Upload Sources
-        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea # v1.3.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
@@ -433,7 +426,6 @@ jobs:
           upload_sources: true
           upload_translations: false
 
-
   check-failures:
     name: Check for failures
     if: always()
@@ -493,7 +485,7 @@ jobs:
           secrets: "devops-alerts-slack-webhook-url"
 
       - name: Notify Slack on failure
-        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522  # v1.2.2
+        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522 # v1.2.2
         if: failure()
         env:
           SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}

.github/workflows/crowdin-pull.yml

@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
     inputs: {}
   schedule:
-    - cron: '0 0 * * 5'
+    - cron: "0 0 * * 5"
 
 jobs:
   crowdin-pull:
@@ -15,7 +15,7 @@ jobs:
       _CROWDIN_PROJECT_ID: "308189"
     steps:
       - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
 
       - name: Login to Azure
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
@@ -30,7 +30,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Download translations
-        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea  # v1.3.2
+        uses: crowdin/github-action@e39093fd75daae7859c68eded4b43d42ec78d8ea # v1.3.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}

.github/workflows/qa-deploy.yml

@@ -20,11 +20,10 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
 
       - name: Setup
-        run:
-          export PATH=$PATH:~/work/web/web
+        run: export PATH=$PATH:~/work/web/web
 
       - name: Login to Azure
         uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
           fi
 
       - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # 2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # 2.3.4
 
       - name: Check Release Version
         id: version
@@ -48,7 +48,6 @@ jobs:
           BRANCH_NAME=$(basename ${{ github.ref }})
           echo "::set-output name=branch-name::$BRANCH_NAME"
 
-
   self-host:
     name: Release self-host docker
     runs-on: ubuntu-20.04
@@ -96,7 +95,6 @@ jobs:
       - name: Log out of Docker
         run: docker logout
 
-
   ghpages-deploy:
     name: Deploy Web Vault
     runs-on: ubuntu-20.04
@@ -108,7 +106,7 @@ jobs:
       _TAG_VERSION: ${{ needs.setup.outputs.tag_version }}
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
         with:
           ref: gh-pages
 
@@ -118,7 +116,7 @@ jobs:
           git push -u origin deploy-$_TAG_VERSION
 
       - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
+        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
 
       - name: Setup git config
         run: |
@@ -140,7 +138,7 @@ jobs:
         run: unzip web-*-cloud-COMMERCIAL.zip
 
       - name: Deploy GitHub Pages
-        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925  # v2.5.0
+        uses: crazy-max/ghaction-github-pages@db4476a01402e1a7ce05f41832040eef16d14925 # v2.5.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -159,7 +157,6 @@ jobs:
             --base gh-pages \
             --head "$PR_BRANCH"
 
-
   release:
     name: Create GitHub Release
     runs-on: ubuntu-20.04
@@ -175,7 +172,7 @@ jobs:
           workflow_conclusion: success
           branch: ${{ needs.setup.outputs.branch-name }}
           artifacts: "web-*-selfhosted-COMMERCIAL.zip,
-                      web-*-selfhosted-open-source.zip"
+            web-*-selfhosted-open-source.zip"
 
       - name: Rename assets
         run: |
@@ -190,6 +187,6 @@ jobs:
           tag: "${{ needs.setup.outputs.tag_version }}"
           body: "<insert release notes here>"
           artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
-                      web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
+            web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
           token: ${{ secrets.GITHUB_TOKEN }}
           draft: true

CONTRIBUTING.md

@@ -6,17 +6,12 @@ Please visit our [Community Forums](https://community.bitwarden.com/) for genera
 
 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
+- **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
 
@@ -24,9 +19,9 @@ Please sign the [Contributor Agreement](https://cla-assistant.io/bitwarden/web)
 
 ## 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
+- use `npm run lint` and fix any linting suggestions before submitting a pull request
+- commit any pull requests against the `master` branch
+- include a link to your Community Forums post
 
 # Localization (l10n)
 

README.md

@@ -48,16 +48,14 @@ You can also manually adjusting your API endpoint settings by adding `config/loc
 
 ```json
 {
-    "dev": {
-        "proxyApi": "http://your-api-url",
-        "proxyIdentity": "http://your-identity-url",
-        "proxyEvents": "http://your-events-url",
-        "proxyNotifications": "http://your-notifications-url",
-        "allowedHosts": ["hostnames-to-allow-in-webpack"],
-    },
-    "urls": {
-      
-    }
+  "dev": {
+    "proxyApi": "http://your-api-url",
+    "proxyIdentity": "http://your-identity-url",
+    "proxyEvents": "http://your-events-url",
+    "proxyNotifications": "http://your-notifications-url",
+    "allowedHosts": ["hostnames-to-allow-in-webpack"]
+  },
+  "urls": {}
 }
 ```
 

bitwarden_license/src/app/app-routing.module.ts

@@ -1,15 +1,15 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
 
 const routes: Routes = [
-    {
-        path: 'providers',
-        loadChildren: async () => (await import('./providers/providers.module')).ProvidersModule,
-    },
+  {
+    path: "providers",
+    loadChildren: async () => (await import("./providers/providers.module")).ProvidersModule,
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

bitwarden_license/src/app/app.component.ts

@@ -1,22 +1,20 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { AppComponent as BaseAppComponent } from 'src/app/app.component';
-import { DisablePersonalVaultExportPolicy } from './policies/disable-personal-vault-export.component';
-import { MaximumVaultTimeoutPolicy } from './policies/maximum-vault-timeout.component';
+import { AppComponent as BaseAppComponent } from "src/app/app.component";
+import { DisablePersonalVaultExportPolicy } from "./policies/disable-personal-vault-export.component";
+import { MaximumVaultTimeoutPolicy } from "./policies/maximum-vault-timeout.component";
 
 @Component({
-    selector: 'app-root',
-    templateUrl: '../../../src/app/app.component.html',
+  selector: "app-root",
+  templateUrl: "../../../src/app/app.component.html",
 })
 export class AppComponent extends BaseAppComponent {
+  ngOnInit() {
+    super.ngOnInit();
 
-    ngOnInit() {
-        super.ngOnInit();
-
-        this.policyListService.addPolicies([
-            new MaximumVaultTimeoutPolicy(),
-            new DisablePersonalVaultExportPolicy(),
-        ]);
-    }
-
+    this.policyListService.addPolicies([
+      new MaximumVaultTimeoutPolicy(),
+      new DisablePersonalVaultExportPolicy(),
+    ]);
+  }
 }

bitwarden_license/src/app/app.module.ts

@@ -1,48 +1,48 @@
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterModule } from "@angular/router";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
 
-import { BitwardenToastModule } from 'jslib-angular/components/toastr.component';
+import { BitwardenToastModule } from "jslib-angular/components/toastr.component";
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { OrganizationsModule } from './organizations/organizations.module';
-import { DisablePersonalVaultExportPolicyComponent } from './policies/disable-personal-vault-export.component';
-import { MaximumVaultTimeoutPolicyComponent } from './policies/maximum-vault-timeout.component';
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { OrganizationsModule } from "./organizations/organizations.module";
+import { DisablePersonalVaultExportPolicyComponent } from "./policies/disable-personal-vault-export.component";
+import { MaximumVaultTimeoutPolicyComponent } from "./policies/maximum-vault-timeout.component";
 
-import { OssRoutingModule } from 'src/app/oss-routing.module';
-import { OssModule } from 'src/app/oss.module';
-import { ServicesModule } from 'src/app/services/services.module';
-import { WildcardRoutingModule } from 'src/app/wildcard-routing.module';
+import { OssRoutingModule } from "src/app/oss-routing.module";
+import { OssModule } from "src/app/oss.module";
+import { ServicesModule } from "src/app/services/services.module";
+import { WildcardRoutingModule } from "src/app/wildcard-routing.module";
 
 @NgModule({
-    imports: [
-        OssModule,
-        BrowserAnimationsModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ServicesModule,
-        BitwardenToastModule.forRoot({
-            maxOpened: 5,
-            autoDismiss: true,
-            closeButton: true,
-        }),
-        InfiniteScrollModule,
-        DragDropModule,
-        AppRoutingModule,
-        OssRoutingModule,
-        OrganizationsModule,
-        RouterModule,
-        WildcardRoutingModule, // Needs to be last to catch all non-existing routes
-    ],
-    declarations: [
-        AppComponent,
-        MaximumVaultTimeoutPolicyComponent,
-        DisablePersonalVaultExportPolicyComponent,
-    ],
-    bootstrap: [AppComponent],
+  imports: [
+    OssModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ServicesModule,
+    BitwardenToastModule.forRoot({
+      maxOpened: 5,
+      autoDismiss: true,
+      closeButton: true,
+    }),
+    InfiniteScrollModule,
+    DragDropModule,
+    AppRoutingModule,
+    OssRoutingModule,
+    OrganizationsModule,
+    RouterModule,
+    WildcardRoutingModule, // Needs to be last to catch all non-existing routes
+  ],
+  declarations: [
+    AppComponent,
+    MaximumVaultTimeoutPolicyComponent,
+    DisablePersonalVaultExportPolicyComponent,
+  ],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

bitwarden_license/src/app/main.ts

@@ -1,17 +1,17 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
-import 'bootstrap';
-import 'jquery';
-import 'popper.js';
+import "bootstrap";
+import "jquery";
+import "popper.js";
 
 // tslint:disable-next-line
-require('src/scss/styles.scss');
+require("src/scss/styles.scss");
 
-import { AppModule } from './app.module';
+import { AppModule } from "./app.module";
 
-if (process.env.NODE_ENV === 'production') {
-    enableProdMode();
+if (process.env.NODE_ENV === "production") {
+  enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

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

@@ -1,363 +1,488 @@
 <div class="page-header d-flex">
-    <h1>{{'singleSignOn' | i18n}}</h1>
+  <h1>{{ "singleSignOn" | 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>
+  <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>
 
-<form #form (ngSubmit)="submit()" [formGroup]="data" [appApiAction]="formPromise" *ngIf="!loading" ngNativeValidate>
-    <p>
-        {{'ssoPolicyHelpStart' | i18n}}
-        <a routerLink="../policies">{{'ssoPolicyHelpLink' | i18n}}</a>
-        {{'ssoPolicyHelpEnd' | i18n}}
-        <br>
-        {{'ssoPolicyHelpKeyConnector' | i18n}}
-    </p>
+<form
+  #form
+  (ngSubmit)="submit()"
+  [formGroup]="data"
+  [appApiAction]="formPromise"
+  *ngIf="!loading"
+  ngNativeValidate
+>
+  <p>
+    {{ "ssoPolicyHelpStart" | i18n }}
+    <a routerLink="../policies">{{ "ssoPolicyHelpLink" | i18n }}</a>
+    {{ "ssoPolicyHelpEnd" | i18n }}
+    <br />
+    {{ "ssoPolicyHelpKeyConnector" | i18n }}
+  </p>
 
-    <div class="form-group">
-        <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-            <label class="form-check-label" for="enabled">{{'allowSso' | i18n}}</label>
-        </div>
-        <small class="form-text text-muted">{{'allowSsoDesc' | i18n}}</small>
+  <div class="form-group">
+    <div class="form-check">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="enabled"
+        [formControl]="enabled"
+        name="Enabled"
+      />
+      <label class="form-check-label" for="enabled">{{ "allowSso" | i18n }}</label>
     </div>
+    <small class="form-text text-muted">{{ "allowSsoDesc" | i18n }}</small>
+  </div>
 
-    <div class="form-group">
-        <label>{{'memberDecryptionOption' | i18n}}</label>
-        <div class="form-check form-check-block">
-            <input class="form-check-input" type="radio" id="memberDecryptionPass" [value]="false" formControlName="keyConnectorEnabled">
-            <label class="form-check-label" for="memberDecryptionPass">
-                {{'masterPass' | i18n}}
-                <small>{{'memberDecryptionPassDesc' | i18n}}</small>
-            </label>
-        </div>
-        <div class="form-check mt-2 form-check-block">
-            <input class="form-check-input" type="radio" id="memberDecryptionKey" [value]="true" formControlName="keyConnectorEnabled"
-                [attr.disabled]="!organization.useKeyConnector || null">
-            <label class="form-check-label" for="memberDecryptionKey">
-                {{'keyConnector' | i18n}}
-                <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
-                    href="https://bitwarden.com/help/article/about-key-connector/">
-                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
-                </a>
-                <small>{{'memberDecryptionKeyConnectorDesc' | i18n}}</small>
-            </label>
-        </div>
+  <div class="form-group">
+    <label>{{ "memberDecryptionOption" | i18n }}</label>
+    <div class="form-check form-check-block">
+      <input
+        class="form-check-input"
+        type="radio"
+        id="memberDecryptionPass"
+        [value]="false"
+        formControlName="keyConnectorEnabled"
+      />
+      <label class="form-check-label" for="memberDecryptionPass">
+        {{ "masterPass" | i18n }}
+        <small>{{ "memberDecryptionPassDesc" | i18n }}</small>
+      </label>
     </div>
+    <div class="form-check mt-2 form-check-block">
+      <input
+        class="form-check-input"
+        type="radio"
+        id="memberDecryptionKey"
+        [value]="true"
+        formControlName="keyConnectorEnabled"
+        [attr.disabled]="!organization.useKeyConnector || null"
+      />
+      <label class="form-check-label" for="memberDecryptionKey">
+        {{ "keyConnector" | i18n }}
+        <a
+          target="_blank"
+          rel="noopener"
+          appA11yTitle="{{ 'learnMore' | i18n }}"
+          href="https://bitwarden.com/help/article/about-key-connector/"
+        >
+          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+        </a>
+        <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
+      </label>
+    </div>
+  </div>
 
-    <ng-container *ngIf="data.value.keyConnectorEnabled">
-        <app-callout type="warning" [useAlertRole]="true">
-            {{'keyConnectorWarning' | i18n}}
-        </app-callout>
-    
-        <div class="form-group">
-            <label for="keyConnectorUrl">{{'keyConnectorUrl' | i18n}}</label>
-            <div class="input-group">
-                <input class="form-control" formControlName="keyConnectorUrl" id="keyConnectorUrl" required>
-                <div class="input-group-append">
-                    <button type="button" class="btn btn-outline-secondary" (click)="validateKeyConnectorUrl()"
-                        [disabled]="!enableTestKeyConnector">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"
-                            *ngIf="keyConnectorUrl.pending"></i>
-                        <span *ngIf="!keyConnectorUrl.pending">
-                            {{'keyConnectorTest' | i18n}}
-                        </span>
-                    </button>
-                </div>
-            </div>
-            <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
-                <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
-                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
-                    {{'keyConnectorTestFail' | i18n}}
-                </div>
-                <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
-                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
-                    {{'keyConnectorTestSuccess' | i18n}}
-                </div>
-            </ng-container>
-        </div>
-    </ng-container>
+  <ng-container *ngIf="data.value.keyConnectorEnabled">
+    <app-callout type="warning" [useAlertRole]="true">
+      {{ "keyConnectorWarning" | i18n }}
+    </app-callout>
 
     <div class="form-group">
-        <label for="type">{{'type' | i18n}}</label>
-        <select class="form-control" id="type" formControlName="configType">
-            <option [ngValue]="0" disabled>{{'selectType' | i18n}}</option>
-            <option [ngValue]="1">OpenID Connect</option>
-            <option [ngValue]="2">SAML 2.0</option>
+      <label for="keyConnectorUrl">{{ "keyConnectorUrl" | i18n }}</label>
+      <div class="input-group">
+        <input
+          class="form-control"
+          formControlName="keyConnectorUrl"
+          id="keyConnectorUrl"
+          required
+        />
+        <div class="input-group-append">
+          <button
+            type="button"
+            class="btn btn-outline-secondary"
+            (click)="validateKeyConnectorUrl()"
+            [disabled]="!enableTestKeyConnector"
+          >
+            <i
+              class="fa fa-spinner fa-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+              *ngIf="keyConnectorUrl.pending"
+            ></i>
+            <span *ngIf="!keyConnectorUrl.pending">
+              {{ "keyConnectorTest" | i18n }}
+            </span>
+          </button>
+        </div>
+      </div>
+      <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
+        <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
+          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+          {{ "keyConnectorTestFail" | i18n }}
+        </div>
+        <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
+          <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+          {{ "keyConnectorTestSuccess" | i18n }}
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <div class="form-group">
+    <label for="type">{{ "type" | i18n }}</label>
+    <select class="form-control" id="type" formControlName="configType">
+      <option [ngValue]="0" disabled>{{ "selectType" | i18n }}</option>
+      <option [ngValue]="1">OpenID Connect</option>
+      <option [ngValue]="2">SAML 2.0</option>
+    </select>
+  </div>
+
+  <!-- OIDC -->
+  <div *ngIf="data.value.configType == 1">
+    <div class="config-section">
+      <h2>{{ "openIdConnectConfig" | i18n }}</h2>
+      <div class="form-group">
+        <label>{{ "callbackPath" | i18n }}</label>
+        <div class="input-group">
+          <input class="form-control" readonly [value]="callbackPath" />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'copyValue' | i18n }}"
+              (click)="copy(callbackPath)"
+            >
+              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>{{ "signedOutCallbackPath" | i18n }}</label>
+        <div class="input-group">
+          <input class="form-control" readonly [value]="signedOutCallbackPath" />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'copyValue' | i18n }}"
+              (click)="copy(signedOutCallbackPath)"
+            >
+              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="authority">{{ "authority" | i18n }}</label>
+        <input class="form-control" formControlName="authority" id="authority" />
+      </div>
+      <div class="form-group">
+        <label for="clientId">{{ "clientId" | i18n }}</label>
+        <input class="form-control" formControlName="clientId" id="clientId" />
+      </div>
+      <div class="form-group">
+        <label for="clientSecret">{{ "clientSecret" | i18n }}</label>
+        <input class="form-control" formControlName="clientSecret" id="clientSecret" />
+      </div>
+      <div class="form-group">
+        <label for="metadataAddress">{{ "metadataAddress" | i18n }}</label>
+        <input class="form-control" formControlName="metadataAddress" id="metadataAddress" />
+      </div>
+      <div class="form-group">
+        <label for="redirectBehavior">{{ "oidcRedirectBehavior" | i18n }}</label>
+        <select class="form-control" formControlName="redirectBehavior" id="redirectBehavior">
+          <option [ngValue]="0">Redirect GET</option>
+          <option [ngValue]="1">Form POST</option>
         </select>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="getClaimsFromUserInfoEndpoint"
+            formControlName="getClaimsFromUserInfoEndpoint"
+          />
+          <label class="form-check-label" for="getClaimsFromUserInfoEndpoint">
+            {{ "getClaimsFromUserInfoEndpoint" | i18n }}
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="additionalScopes">{{ "additionalScopes" | i18n }}</label>
+        <input class="form-control" formControlName="additionalScopes" id="additionalScopes" />
+      </div>
+      <div class="form-group">
+        <label for="additionalUserIdClaimTypes">{{ "additionalUserIdClaimTypes" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="additionalUserIdClaimTypes"
+          id="additionalUserIdClaimTypes"
+        />
+      </div>
+      <div class="form-group">
+        <label for="additionalEmailClaimTypes">{{ "additionalEmailClaimTypes" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="additionalEmailClaimTypes"
+          id="additionalEmailClaimTypes"
+        />
+      </div>
+      <div class="form-group">
+        <label for="additionalNameClaimTypes">{{ "additionalNameClaimTypes" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="additionalNameClaimTypes"
+          id="additionalNameClaimTypes"
+        />
+      </div>
+      <div class="form-group">
+        <label for="acrValues">{{ "acrValues" | i18n }}</label>
+        <input class="form-control" formControlName="acrValues" id="acrValues" />
+      </div>
+      <div class="form-group">
+        <label for="expectedReturnAcrValue">{{ "expectedReturnAcrValue" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="expectedReturnAcrValue"
+          id="expectedReturnAcrValue"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="data.value.configType == 2">
+    <!-- SAML2 SP -->
+    <div class="config-section">
+      <h2>{{ "samlSpConfig" | i18n }}</h2>
+      <div class="form-group">
+        <label>{{ "spEntityId" | i18n }}</label>
+        <div class="input-group">
+          <input class="form-control" readonly [value]="spEntityId" />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'copyValue' | i18n }}"
+              (click)="copy(spEntityId)"
+            >
+              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>{{ "spMetadataUrl" | i18n }}</label>
+        <div class="input-group">
+          <input class="form-control" readonly [value]="spMetadataUrl" />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'launch' | i18n }}"
+              (click)="launchUri(spMetadataUrl)"
+            >
+              <i class="fa fa-lg fa-external-link" aria-hidden="true"></i>
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'copyValue' | i18n }}"
+              (click)="copy(spMetadataUrl)"
+            >
+              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>{{ "spAcsUrl" | i18n }}</label>
+        <div class="input-group">
+          <input class="form-control" readonly [value]="spAcsUrl" />
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="btn btn-outline-secondary"
+              appA11yTitle="{{ 'copyValue' | i18n }}"
+              (click)="copy(spAcsUrl)"
+            >
+              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="spNameIdFormat">{{ "spNameIdFormat" | i18n }}</label>
+        <select class="form-control" formControlName="spNameIdFormat" id="spNameIdFormat">
+          <option value="0">Not Configured</option>
+          <option value="1">Unspecified</option>
+          <option value="2">Email Address</option>
+          <option value="3">X.509 Subject Name</option>
+          <option value="4">Windows Domain Qualified Name</option>
+          <option value="5">Kerberos Principal Name</option>
+          <option value="6">Entity Identifier</option>
+          <option value="7">Persistent</option>
+          <option value="8">Transient</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="spOutboundSigningAlgorithm">{{ "spOutboundSigningAlgorithm" | i18n }}</label>
+        <select
+          class="form-control"
+          formControlName="spOutboundSigningAlgorithm"
+          id="spOutboundSigningAlgorithm"
+        >
+          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="spSigningBehavior">{{ "spSigningBehavior" | i18n }}</label>
+        <select class="form-control" formControlName="spSigningBehavior" id="spSigningBehavior">
+          <option value="0">If IdP Wants Authn Requests Signed</option>
+          <option value="1">Always</option>
+          <option value="3">Never</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="spMinIncomingSigningAlgorithm">{{
+          "spMinIncomingSigningAlgorithm" | i18n
+        }}</label>
+        <select
+          class="form-control"
+          formControlName="spMinIncomingSigningAlgorithm"
+          id="spMinIncomingSigningAlgorithm"
+        >
+          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="spWantAssertionsSigned"
+            formControlName="spWantAssertionsSigned"
+          />
+          <label class="form-check-label" for="spWantAssertionsSigned">
+            {{ "spWantAssertionsSigned" | i18n }}
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="spValidateCertificates"
+            formControlName="spValidateCertificates"
+          />
+          <label class="form-check-label" for="spValidateCertificates">
+            {{ "spValidateCertificates" | i18n }}
+          </label>
+        </div>
+      </div>
     </div>
 
-    <!-- OIDC -->
-    <div *ngIf="data.value.configType == 1">
-        <div class="config-section">
-            <h2>{{'openIdConnectConfig' | i18n}}</h2>
-            <div class="form-group">
-                <label>{{'callbackPath' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="callbackPath">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(callbackPath)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'signedOutCallbackPath' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="signedOutCallbackPath">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(signedOutCallbackPath)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="authority">{{'authority' | i18n}}</label>
-                <input class="form-control" formControlName="authority" id="authority">
-            </div>
-            <div class="form-group">
-                <label for="clientId">{{'clientId' | i18n}}</label>
-                <input class="form-control" formControlName="clientId" id="clientId">
-            </div>
-            <div class="form-group">
-                <label for="clientSecret">{{'clientSecret' | i18n}}</label>
-                <input class="form-control" formControlName="clientSecret" id="clientSecret">
-            </div>
-            <div class="form-group">
-                <label for="metadataAddress">{{'metadataAddress' | i18n}}</label>
-                <input class="form-control" formControlName="metadataAddress" id="metadataAddress">
-            </div>
-            <div class="form-group">
-                <label for="redirectBehavior">{{'oidcRedirectBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="redirectBehavior" id="redirectBehavior">
-                    <option [ngValue]="0">Redirect GET</option>
-                    <option [ngValue]="1">Form POST</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="getClaimsFromUserInfoEndpoint"
-                        formControlName="getClaimsFromUserInfoEndpoint">
-                    <label class="form-check-label" for="getClaimsFromUserInfoEndpoint">
-                        {{'getClaimsFromUserInfoEndpoint' | i18n}}
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="additionalScopes">{{'additionalScopes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalScopes" id="additionalScopes">
-            </div>
-            <div class="form-group">
-                <label for="additionalUserIdClaimTypes">{{'additionalUserIdClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalUserIdClaimTypes"
-                    id="additionalUserIdClaimTypes">
-            </div>
-            <div class="form-group">
-                <label for="additionalEmailClaimTypes">{{'additionalEmailClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalEmailClaimTypes"
-                    id="additionalEmailClaimTypes">
-            </div>
-            <div class="form-group">
-                <label for="additionalNameClaimTypes">{{'additionalNameClaimTypes' | i18n}}</label>
-                <input class="form-control" formControlName="additionalNameClaimTypes"
-                    id="additionalNameClaimTypes">
-            </div>
-            <div class="form-group">
-                <label for="acrValues">{{'acrValues' | i18n}}</label>
-                <input class="form-control" formControlName="acrValues" id="acrValues">
-            </div>
-            <div class="form-group">
-                <label for="expectedReturnAcrValue">{{'expectedReturnAcrValue' | i18n}}</label>
-                <input class="form-control" formControlName="expectedReturnAcrValue" id="expectedReturnAcrValue">
-            </div>
+    <!-- SAML2 IDP -->
+    <div class="config-section">
+      <h2>{{ "samlIdpConfig" | i18n }}</h2>
+
+      <div class="form-group">
+        <label for="idpEntityId">{{ "idpEntityId" | i18n }}</label>
+        <input class="form-control" formControlName="idpEntityId" id="idpEntityId" />
+      </div>
+      <div class="form-group">
+        <label for="idpBindingType">{{ "idpBindingType" | i18n }}</label>
+        <select class="form-control" formControlName="idpBindingType" id="idpBindingType">
+          <option value="1">Redirect</option>
+          <option value="2">HTTP POST</option>
+          <option value="4">Artifact</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="idpSingleSignOnServiceUrl">{{ "idpSingleSignOnServiceUrl" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="idpSingleSignOnServiceUrl"
+          id="idpSingleSignOnServiceUrl"
+        />
+      </div>
+      <div class="form-group">
+        <label for="idpSingleLogoutServiceUrl">{{ "idpSingleLogoutServiceUrl" | i18n }}</label>
+        <input
+          class="form-control"
+          formControlName="idpSingleLogoutServiceUrl"
+          id="idpSingleLogoutServiceUrl"
+        />
+      </div>
+      <div class="form-group">
+        <label for="idpArtifactResolutionServiceUrl">{{
+          "idpArtifactResolutionServiceUrl" | i18n
+        }}</label>
+        <input
+          class="form-control"
+          formControlName="idpArtifactResolutionServiceUrl"
+          id="idpArtifactResolutionServiceUrl"
+        />
+      </div>
+      <div class="form-group">
+        <label for="idpX509PublicCert">{{ "idpX509PublicCert" | i18n }}</label>
+        <textarea
+          formControlName="idpX509PublicCert"
+          class="form-control form-control-sm text-monospace"
+          rows="6"
+          id="idpX509PublicCert"
+        ></textarea>
+      </div>
+      <div class="form-group">
+        <label for="idpOutboundSigningAlgorithm">{{ "idpOutboundSigningAlgorithm" | i18n }}</label>
+        <select
+          class="form-control"
+          formControlName="idpOutboundSigningAlgorithm"
+          id="idpOutboundSigningAlgorithm"
+        >
+          <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="idpAllowUnsolicitedAuthnResponse"
+            formControlName="idpAllowUnsolicitedAuthnResponse"
+          />
+          <label class="form-check-label" for="idpAllowUnsolicitedAuthnResponse">
+            {{ "idpAllowUnsolicitedAuthnResponse" | i18n }}
+          </label>
         </div>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="idpDisableOutboundLogoutRequests"
+            formControlName="idpDisableOutboundLogoutRequests"
+          />
+          <label class="form-check-label" for="idpDisableOutboundLogoutRequests">
+            {{ "idpDisableOutboundLogoutRequests" | i18n }}
+          </label>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="idpWantAuthnRequestsSigned"
+            formControlName="idpWantAuthnRequestsSigned"
+          />
+          <label class="form-check-label" for="idpWantAuthnRequestsSigned">
+            {{ "idpWantAuthnRequestsSigned" | i18n }}
+          </label>
+        </div>
+      </div>
     </div>
+  </div>
 
-    <div *ngIf="data.value.configType == 2">
-        <!-- SAML2 SP -->
-        <div class="config-section">
-            <h2>{{'samlSpConfig' | i18n}}</h2>
-            <div class="form-group">
-                <label>{{'spEntityId' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spEntityId" >
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spEntityId)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'spMetadataUrl' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spMetadataUrl">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'launch' | i18n}}"
-                            (click)="launchUri(spMetadataUrl)">
-                            <i class="fa fa-lg fa-external-link" aria-hidden="true"></i>
-                        </button>
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spMetadataUrl)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label>{{'spAcsUrl' | i18n}}</label>
-                <div class="input-group">
-                    <input class="form-control" readonly [value]="spAcsUrl">
-                    <div class="input-group-append">
-                        <button type="button" class="btn btn-outline-secondary"
-                            appA11yTitle="{{'copyValue' | i18n}}"
-                            (click)="copy(spAcsUrl)">
-                            <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="spNameIdFormat">{{'spNameIdFormat' | i18n}}</label>
-                <select class="form-control" formControlName="spNameIdFormat" id="spNameIdFormat">
-                    <option value="0">Not Configured</option>
-                    <option value="1">Unspecified</option>
-                    <option value="2">Email Address</option>
-                    <option value="3">X.509 Subject Name</option>
-                    <option value="4">Windows Domain Qualified Name</option>
-                    <option value="5">Kerberos Principal Name</option>
-                    <option value="6">Entity Identifier</option>
-                    <option value="7">Persistent</option>
-                    <option value="8">Transient</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="spOutboundSigningAlgorithm">{{'spOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="spOutboundSigningAlgorithm"
-                    id="spOutboundSigningAlgorithm">
-                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="spSigningBehavior">{{'spSigningBehavior' | i18n}}</label>
-                <select class="form-control" formControlName="spSigningBehavior" id="spSigningBehavior">
-                    <option value="0">If IdP Wants Authn Requests Signed</option>
-                    <option value="1">Always</option>
-                    <option value="3">Never</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="spMinIncomingSigningAlgorithm">{{'spMinIncomingSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="spMinIncomingSigningAlgorithm"
-                    id="spMinIncomingSigningAlgorithm">
-                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="spWantAssertionsSigned"
-                        formControlName="spWantAssertionsSigned">
-                    <label class="form-check-label" for="spWantAssertionsSigned">
-                        {{'spWantAssertionsSigned' | i18n}}
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="spValidateCertificates"
-                        formControlName="spValidateCertificates">
-                    <label class="form-check-label" for="spValidateCertificates">
-                        {{'spValidateCertificates' | i18n}}
-                    </label>
-                </div>
-            </div>
-        </div>
-
-        <!-- SAML2 IDP -->
-        <div class="config-section">
-            <h2>{{'samlIdpConfig' | i18n}}</h2>
-
-            <div class="form-group">
-                <label for="idpEntityId">{{'idpEntityId' | i18n}}</label>
-                <input class="form-control" formControlName="idpEntityId" id="idpEntityId">
-            </div>
-            <div class="form-group">
-                <label for="idpBindingType">{{'idpBindingType' | i18n}}</label>
-                <select class="form-control" formControlName="idpBindingType" id="idpBindingType">
-                    <option value="1">Redirect</option>
-                    <option value="2">HTTP POST</option>
-                    <option value="4">Artifact</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="idpSingleSignOnServiceUrl">{{'idpSingleSignOnServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleSignOnServiceUrl" id="idpSingleSignOnServiceUrl">
-            </div>
-            <div class="form-group">
-                <label for="idpSingleLogoutServiceUrl">{{'idpSingleLogoutServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpSingleLogoutServiceUrl" id="idpSingleLogoutServiceUrl">
-            </div>
-            <div class="form-group">
-                <label for="idpArtifactResolutionServiceUrl">{{'idpArtifactResolutionServiceUrl' | i18n}}</label>
-                <input class="form-control" formControlName="idpArtifactResolutionServiceUrl"
-                    id="idpArtifactResolutionServiceUrl">
-            </div>
-            <div class="form-group">
-                <label for="idpX509PublicCert">{{'idpX509PublicCert' | i18n}}</label>
-                <textarea formControlName="idpX509PublicCert" class="form-control form-control-sm text-monospace"
-                    rows="6" id="idpX509PublicCert"></textarea>
-            </div>
-            <div class="form-group">
-                <label for="idpOutboundSigningAlgorithm">{{'idpOutboundSigningAlgorithm' | i18n}}</label>
-                <select class="form-control" formControlName="idpOutboundSigningAlgorithm"
-                    id="idpOutboundSigningAlgorithm">
-                    <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{o}}</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="idpAllowUnsolicitedAuthnResponse"
-                        formControlName="idpAllowUnsolicitedAuthnResponse">
-                    <label class="form-check-label" for="idpAllowUnsolicitedAuthnResponse">
-                        {{'idpAllowUnsolicitedAuthnResponse' | i18n}}
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="idpDisableOutboundLogoutRequests"
-                        formControlName="idpDisableOutboundLogoutRequests">
-                    <label class="form-check-label" for="idpDisableOutboundLogoutRequests">
-                        {{'idpDisableOutboundLogoutRequests' | i18n}}
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" id="idpWantAuthnRequestsSigned"
-                        formControlName="idpWantAuthnRequestsSigned">
-                    <label class="form-check-label" for="idpWantAuthnRequestsSigned">
-                        {{'idpWantAuthnRequestsSigned' | i18n}}
-                    </label>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-        <span>{{'save' | i18n}}</span>
-    </button>
+  <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>
 </form>

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

@@ -1,180 +1,183 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { OrganizationService } from 'jslib-common/abstractions/organization.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { Organization } from 'jslib-common/models/domain/organization';
+import { Organization } from "jslib-common/models/domain/organization";
 
-import { OrganizationSsoRequest } from 'jslib-common/models/request/organization/organizationSsoRequest';
+import { OrganizationSsoRequest } from "jslib-common/models/request/organization/organizationSsoRequest";
 
 @Component({
-    selector: 'app-org-manage-sso',
-    templateUrl: 'sso.component.html',
+  selector: "app-org-manage-sso",
+  templateUrl: "sso.component.html",
 })
 export class SsoComponent implements OnInit {
+  samlSigningAlgorithms = [
+    "http://www.w3.org/2001/04/xmldsig-more#rsa-sha256",
+    "http://www.w3.org/2000/09/xmldsig#rsa-sha384",
+    "http://www.w3.org/2000/09/xmldsig#rsa-sha512",
+    "http://www.w3.org/2000/09/xmldsig#rsa-sha1",
+  ];
 
-    samlSigningAlgorithms = [
-        'http://www.w3.org/2001/04/xmldsig-more#rsa-sha256',
-        'http://www.w3.org/2000/09/xmldsig#rsa-sha384',
-        'http://www.w3.org/2000/09/xmldsig#rsa-sha512',
-        'http://www.w3.org/2000/09/xmldsig#rsa-sha1',
-    ];
+  loading = true;
+  organizationId: string;
+  organization: Organization;
+  formPromise: Promise<any>;
 
-    loading = true;
-    organizationId: string;
-    organization: Organization;
-    formPromise: Promise<any>;
+  callbackPath: string;
+  signedOutCallbackPath: string;
+  spEntityId: string;
+  spMetadataUrl: string;
+  spAcsUrl: string;
 
-    callbackPath: string;
-    signedOutCallbackPath: string;
-    spEntityId: string;
-    spMetadataUrl: string;
-    spAcsUrl: string;
+  enabled = this.fb.control(false);
+  data = this.fb.group({
+    configType: [],
 
-    enabled = this.fb.control(false);
-    data = this.fb.group({
-        configType: [],
+    keyConnectorEnabled: [],
+    keyConnectorUrl: [],
 
-        keyConnectorEnabled: [],
-        keyConnectorUrl: [],
+    // OpenId
+    authority: [],
+    clientId: [],
+    clientSecret: [],
+    metadataAddress: [],
+    redirectBehavior: [],
+    getClaimsFromUserInfoEndpoint: [],
+    additionalScopes: [],
+    additionalUserIdClaimTypes: [],
+    additionalEmailClaimTypes: [],
+    additionalNameClaimTypes: [],
+    acrValues: [],
+    expectedReturnAcrValue: [],
 
-        // OpenId
-        authority: [],
-        clientId: [],
-        clientSecret: [],
-        metadataAddress: [],
-        redirectBehavior: [],
-        getClaimsFromUserInfoEndpoint: [],
-        additionalScopes: [],
-        additionalUserIdClaimTypes: [],
-        additionalEmailClaimTypes: [],
-        additionalNameClaimTypes: [],
-        acrValues: [],
-        expectedReturnAcrValue: [],
+    // SAML
+    spNameIdFormat: [],
+    spOutboundSigningAlgorithm: [],
+    spSigningBehavior: [],
+    spMinIncomingSigningAlgorithm: [],
+    spWantAssertionsSigned: [],
+    spValidateCertificates: [],
 
-        // SAML
-        spNameIdFormat: [],
-        spOutboundSigningAlgorithm: [],
-        spSigningBehavior: [],
-        spMinIncomingSigningAlgorithm: [],
-        spWantAssertionsSigned: [],
-        spValidateCertificates: [],
+    idpEntityId: [],
+    idpBindingType: [],
+    idpSingleSignOnServiceUrl: [],
+    idpSingleLogoutServiceUrl: [],
+    idpArtifactResolutionServiceUrl: [],
+    idpX509PublicCert: [],
+    idpOutboundSigningAlgorithm: [],
+    idpAllowUnsolicitedAuthnResponse: [],
+    idpDisableOutboundLogoutRequests: [],
+    idpWantAuthnRequestsSigned: [],
+  });
 
-        idpEntityId: [],
-        idpBindingType: [],
-        idpSingleSignOnServiceUrl: [],
-        idpSingleLogoutServiceUrl: [],
-        idpArtifactResolutionServiceUrl: [],
-        idpX509PublicCert: [],
-        idpOutboundSigningAlgorithm: [],
-        idpAllowUnsolicitedAuthnResponse: [],
-        idpDisableOutboundLogoutRequests: [],
-        idpWantAuthnRequestsSigned: [],
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private organizationService: OrganizationService
+  ) {}
+
+  async ngOnInit() {
+    this.route.parent.parent.params.subscribe(async (params) => {
+      this.organizationId = params.organizationId;
+      await this.load();
     });
+  }
 
-    constructor(private fb: FormBuilder, private route: ActivatedRoute, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private organizationService: OrganizationService) { }
+  async load() {
+    this.organization = await this.organizationService.get(this.organizationId);
+    const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);
 
-    async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async params => {
-            this.organizationId = params.organizationId;
-            await this.load();
-        });
+    this.data.patchValue(ssoSettings.data);
+    this.enabled.setValue(ssoSettings.enabled);
+
+    this.callbackPath = ssoSettings.urls.callbackPath;
+    this.signedOutCallbackPath = ssoSettings.urls.signedOutCallbackPath;
+    this.spEntityId = ssoSettings.urls.spEntityId;
+    this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
+    this.spAcsUrl = ssoSettings.urls.spAcsUrl;
+
+    this.keyConnectorUrl.markAsDirty();
+
+    this.loading = false;
+  }
+
+  copy(value: string) {
+    this.platformUtilsService.copyToClipboard(value);
+  }
+
+  launchUri(url: string) {
+    this.platformUtilsService.launchUri(url);
+  }
+
+  async submit() {
+    this.formPromise = this.postData();
+
+    try {
+      const response = await this.formPromise;
+
+      this.data.patchValue(response.data);
+      this.enabled.setValue(response.enabled);
+
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("ssoSettingsSaved"));
+    } catch {
+      // Logged by appApiAction, do nothing
     }
 
-    async load() {
-        this.organization = await this.organizationService.get(this.organizationId);
-        const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);
+    this.formPromise = null;
+  }
 
-        this.data.patchValue(ssoSettings.data);
-        this.enabled.setValue(ssoSettings.enabled);
+  async postData() {
+    if (this.data.get("keyConnectorEnabled").value) {
+      await this.validateKeyConnectorUrl();
 
-        this.callbackPath = ssoSettings.urls.callbackPath;
-        this.signedOutCallbackPath = ssoSettings.urls.signedOutCallbackPath;
-        this.spEntityId = ssoSettings.urls.spEntityId;
-        this.spMetadataUrl = ssoSettings.urls.spMetadataUrl;
-        this.spAcsUrl = ssoSettings.urls.spAcsUrl;
-
-        this.keyConnectorUrl.markAsDirty();
-
-        this.loading = false;
+      if (this.keyConnectorUrl.hasError("invalidUrl")) {
+        throw new Error(this.i18nService.t("keyConnectorTestFail"));
+      }
     }
 
-    copy(value: string) {
-        this.platformUtilsService.copyToClipboard(value);
+    const request = new OrganizationSsoRequest();
+    request.enabled = this.enabled.value;
+    request.data = this.data.value;
+
+    return this.apiService.postOrganizationSso(this.organizationId, request);
+  }
+
+  async validateKeyConnectorUrl() {
+    if (this.keyConnectorUrl.pristine) {
+      return;
     }
 
-    launchUri(url: string) {
-        this.platformUtilsService.launchUri(url);
+    this.keyConnectorUrl.markAsPending();
+
+    try {
+      await this.apiService.getKeyConnectorAlive(this.keyConnectorUrl.value);
+      this.keyConnectorUrl.updateValueAndValidity();
+    } catch {
+      this.keyConnectorUrl.setErrors({
+        invalidUrl: true,
+      });
     }
 
-    async submit() {
-        this.formPromise = this.postData();
+    this.keyConnectorUrl.markAsPristine();
+  }
 
-        try {
-            const response = await this.formPromise;
+  get enableTestKeyConnector() {
+    return (
+      this.data.get("keyConnectorEnabled").value &&
+      this.keyConnectorUrl != null &&
+      this.keyConnectorUrl.value !== ""
+    );
+  }
 
-            this.data.patchValue(response.data);
-            this.enabled.setValue(response.enabled);
-
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('ssoSettingsSaved'));
-        } catch {
-            // Logged by appApiAction, do nothing
-        }
-
-        this.formPromise = null;
-    }
-
-    async postData() {
-        if (this.data.get('keyConnectorEnabled').value) {
-            await this.validateKeyConnectorUrl();
-
-            if (this.keyConnectorUrl.hasError('invalidUrl')) {
-                throw new Error(this.i18nService.t('keyConnectorTestFail'));
-            }
-        }
-
-        const request = new OrganizationSsoRequest();
-        request.enabled = this.enabled.value;
-        request.data = this.data.value;
-
-        return this.apiService.postOrganizationSso(this.organizationId, request);
-    }
-
-    async validateKeyConnectorUrl() {
-        if (this.keyConnectorUrl.pristine) {
-            return;
-        }
-
-        this.keyConnectorUrl.markAsPending();
-
-        try {
-            await this.apiService.getKeyConnectorAlive(this.keyConnectorUrl.value);
-            this.keyConnectorUrl.updateValueAndValidity();
-        } catch {
-            this.keyConnectorUrl.setErrors({
-                invalidUrl: true,
-            });
-        }
-
-        this.keyConnectorUrl.markAsPristine();
-    }
-
-    get enableTestKeyConnector() {
-        return this.data.get('keyConnectorEnabled').value &&
-            this.keyConnectorUrl != null &&
-            this.keyConnectorUrl.value !== '';
-    }
-
-    get keyConnectorUrl() {
-        return this.data.get('keyConnectorUrl');
-    }
+  get keyConnectorUrl() {
+    return this.data.get("keyConnectorUrl");
+  }
 }

bitwarden_license/src/app/organizations/organizations-routing.module.ts

@@ -1,54 +1,54 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
 
-import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
+import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
 
-import { Permissions } from 'jslib-common/enums/permissions';
+import { Permissions } from "jslib-common/enums/permissions";
 
-import { OrganizationLayoutComponent } from 'src/app/layouts/organization-layout.component';
-import { ManageComponent } from 'src/app/organizations/manage/manage.component';
-import { OrganizationGuardService } from 'src/app/services/organization-guard.service';
-import { OrganizationTypeGuardService } from 'src/app/services/organization-type-guard.service';
+import { OrganizationLayoutComponent } from "src/app/layouts/organization-layout.component";
+import { ManageComponent } from "src/app/organizations/manage/manage.component";
+import { OrganizationGuardService } from "src/app/services/organization-guard.service";
+import { OrganizationTypeGuardService } from "src/app/services/organization-type-guard.service";
 
-import { SsoComponent } from './manage/sso.component';
+import { SsoComponent } from "./manage/sso.component";
 
 const routes: Routes = [
-    {
-        path: 'organizations/:organizationId',
-        component: OrganizationLayoutComponent,
-        canActivate: [AuthGuardService, OrganizationGuardService],
+  {
+    path: "organizations/:organizationId",
+    component: OrganizationLayoutComponent,
+    canActivate: [AuthGuardService, OrganizationGuardService],
+    children: [
+      {
+        path: "manage",
+        component: ManageComponent,
+        canActivate: [OrganizationTypeGuardService],
+        data: {
+          permissions: [
+            Permissions.CreateNewCollections,
+            Permissions.EditAnyCollection,
+            Permissions.DeleteAnyCollection,
+            Permissions.EditAssignedCollections,
+            Permissions.DeleteAssignedCollections,
+            Permissions.AccessEventLogs,
+            Permissions.ManageGroups,
+            Permissions.ManageUsers,
+            Permissions.ManagePolicies,
+            Permissions.ManageSso,
+          ],
+        },
         children: [
-            {
-                path: 'manage',
-                component: ManageComponent,
-                canActivate: [OrganizationTypeGuardService],
-                data: {
-                    permissions: [
-                        Permissions.CreateNewCollections,
-                        Permissions.EditAnyCollection,
-                        Permissions.DeleteAnyCollection,
-                        Permissions.EditAssignedCollections,
-                        Permissions.DeleteAssignedCollections,
-                        Permissions.AccessEventLogs,
-                        Permissions.ManageGroups,
-                        Permissions.ManageUsers,
-                        Permissions.ManagePolicies,
-                        Permissions.ManageSso,
-                    ],
-                },
-                children: [
-                    {
-                        path: 'sso',
-                        component: SsoComponent,
-                    },
-                ],
-            },
+          {
+            path: "sso",
+            component: SsoComponent,
+          },
         ],
-    },
+      },
+    ],
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class OrganizationsRoutingModule { }
+export class OrganizationsRoutingModule {}

bitwarden_license/src/app/organizations/organizations.module.ts

@@ -1,22 +1,14 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
-import { OssModule } from 'src/app/oss.module';
+import { OssModule } from "src/app/oss.module";
 
-import { SsoComponent } from './manage/sso.component';
-import { OrganizationsRoutingModule } from './organizations-routing.module';
+import { SsoComponent } from "./manage/sso.component";
+import { OrganizationsRoutingModule } from "./organizations-routing.module";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        OssModule,
-        OrganizationsRoutingModule,
-    ],
-    declarations: [
-        SsoComponent,
-    ],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, OssModule, OrganizationsRoutingModule],
+  declarations: [SsoComponent],
 })
 export class OrganizationsModule {}

bitwarden_license/src/app/policies/disable-personal-vault-export.component.html

@@ -1,6 +1,12 @@
 <div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
+  <div class="form-check">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      id="enabled"
+      [formControl]="enabled"
+      name="Enabled"
+    />
+    <label class="form-check-label" for="enabled">{{ "enabled" | i18n }}</label>
+  </div>
 </div>

bitwarden_license/src/app/policies/disable-personal-vault-export.component.ts

@@ -1,24 +1,26 @@
-import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { I18nService } from "jslib-common/abstractions/i18n.service";
 
-import { PolicyType } from 'jslib-common/enums/policyType';
+import { PolicyType } from "jslib-common/enums/policyType";
 
-import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
+import { PolicyRequest } from "jslib-common/models/request/policyRequest";
 
-import { BasePolicy, BasePolicyComponent } from 'src/app/organizations/policies/base-policy.component';
+import {
+  BasePolicy,
+  BasePolicyComponent,
+} from "src/app/organizations/policies/base-policy.component";
 
 export class DisablePersonalVaultExportPolicy extends BasePolicy {
-    name = 'disablePersonalVaultExport';
-    description = 'disablePersonalVaultExportDesc';
-    type = PolicyType.DisablePersonalVaultExport;
-    component = DisablePersonalVaultExportPolicyComponent;
+  name = "disablePersonalVaultExport";
+  description = "disablePersonalVaultExportDesc";
+  type = PolicyType.DisablePersonalVaultExport;
+  component = DisablePersonalVaultExportPolicyComponent;
 }
 
 @Component({
-    selector: 'policy-disable-personal-vault-export',
-    templateUrl: 'disable-personal-vault-export.component.html',
+  selector: "policy-disable-personal-vault-export",
+  templateUrl: "disable-personal-vault-export.component.html",
 })
-export class DisablePersonalVaultExportPolicyComponent extends BasePolicyComponent {
-}
+export class DisablePersonalVaultExportPolicyComponent extends BasePolicyComponent {}

bitwarden_license/src/app/policies/maximum-vault-timeout.component.html

@@ -1,27 +1,47 @@
-<app-callout type="tip" title="{{'prerequisite' | i18n}}">
-    {{'requireSsoPolicyReq' | i18n}}
+<app-callout type="tip" title="{{ 'prerequisite' | i18n }}">
+  {{ "requireSsoPolicyReq" | i18n }}
 </app-callout>
 
 <div class="form-group">
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" id="enabled" [formControl]="enabled" name="Enabled">
-        <label class="form-check-label" for="enabled">{{'enabled' | i18n}}</label>
-    </div>
+  <div class="form-check">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      id="enabled"
+      [formControl]="enabled"
+      name="Enabled"
+    />
+    <label class="form-check-label" for="enabled">{{ "enabled" | i18n }}</label>
+  </div>
 </div>
 
 <div [formGroup]="data">
-    <div class="form-group">
-        <label for="hours">{{'maximumVaultTimeoutLabel' | i18n}}</label>
-        <div class="row">
-            <div class="col-6">
-                <input id="hours" class="form-control" type="number" min="0" name="hours" formControlName="hours">
-                <small>{{'hours' | i18n }}</small>
-            </div>
-            <div class="col-6">
-                <input id="minutes" class="form-control" type="number" min="0" max="59" name="minutes"
-                    formControlName="minutes">
-                <small>{{'minutes' | i18n }}</small>
-            </div>
-        </div>
+  <div class="form-group">
+    <label for="hours">{{ "maximumVaultTimeoutLabel" | i18n }}</label>
+    <div class="row">
+      <div class="col-6">
+        <input
+          id="hours"
+          class="form-control"
+          type="number"
+          min="0"
+          name="hours"
+          formControlName="hours"
+        />
+        <small>{{ "hours" | i18n }}</small>
+      </div>
+      <div class="col-6">
+        <input
+          id="minutes"
+          class="form-control"
+          type="number"
+          min="0"
+          max="59"
+          name="minutes"
+          formControlName="minutes"
+        />
+        <small>{{ "minutes" | i18n }}</small>
+      </div>
     </div>
+  </div>
 </div>

bitwarden_license/src/app/policies/maximum-vault-timeout.component.ts

@@ -1,70 +1,72 @@
-import { Component } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { I18nService } from "jslib-common/abstractions/i18n.service";
 
-import { PolicyType } from 'jslib-common/enums/policyType';
+import { PolicyType } from "jslib-common/enums/policyType";
 
-import { PolicyRequest } from 'jslib-common/models/request/policyRequest';
+import { PolicyRequest } from "jslib-common/models/request/policyRequest";
 
-import { BasePolicy, BasePolicyComponent } from 'src/app/organizations/policies/base-policy.component';
+import {
+  BasePolicy,
+  BasePolicyComponent,
+} from "src/app/organizations/policies/base-policy.component";
 
 export class MaximumVaultTimeoutPolicy extends BasePolicy {
-    name = 'maximumVaultTimeout';
-    description = 'maximumVaultTimeoutDesc';
-    type = PolicyType.MaximumVaultTimeout;
-    component = MaximumVaultTimeoutPolicyComponent;
+  name = "maximumVaultTimeout";
+  description = "maximumVaultTimeoutDesc";
+  type = PolicyType.MaximumVaultTimeout;
+  component = MaximumVaultTimeoutPolicyComponent;
 }
 
 @Component({
-    selector: 'policy-maximum-timeout',
-    templateUrl: 'maximum-vault-timeout.component.html',
+  selector: "policy-maximum-timeout",
+  templateUrl: "maximum-vault-timeout.component.html",
 })
 export class MaximumVaultTimeoutPolicyComponent extends BasePolicyComponent {
+  data = this.fb.group({
+    hours: [null],
+    minutes: [null],
+  });
 
-    data = this.fb.group({
-        hours: [null],
-        minutes: [null],
+  constructor(private fb: FormBuilder, private i18nService: I18nService) {
+    super();
+  }
+
+  loadData() {
+    const minutes = this.policyResponse.data?.minutes;
+
+    if (minutes == null) {
+      return;
+    }
+
+    this.data.patchValue({
+      hours: Math.floor(minutes / 60),
+      minutes: minutes % 60,
     });
+  }
 
-    constructor(private fb: FormBuilder, private i18nService: I18nService) {
-        super();
+  buildRequestData() {
+    if (this.data.value.hours == null && this.data.value.minutes == null) {
+      return null;
     }
 
-    loadData() {
-        const minutes = this.policyResponse.data?.minutes;
+    return {
+      minutes: this.data.value.hours * 60 + this.data.value.minutes,
+    };
+  }
 
-        if (minutes == null) {
-            return;
-        }
-
-        this.data.patchValue({
-            hours: Math.floor(minutes / 60),
-            minutes: minutes % 60,
-        });
+  buildRequest(policiesEnabledMap: Map<PolicyType, boolean>): Promise<PolicyRequest> {
+    const singleOrgEnabled = policiesEnabledMap.get(PolicyType.SingleOrg) ?? false;
+    if (this.enabled.value && !singleOrgEnabled) {
+      throw new Error(this.i18nService.t("requireSsoPolicyReqError"));
     }
 
-    buildRequestData() {
-        if (this.data.value.hours == null && this.data.value.minutes == null) {
-            return null;
-        }
-
-        return {
-            minutes: this.data.value.hours * 60 + this.data.value.minutes,
-        };
+    const data = this.buildRequestData();
+    if (data?.minutes == null || data?.minutes <= 0) {
+      throw new Error(this.i18nService.t("invalidMaximumVaultTimeout"));
     }
 
-    buildRequest(policiesEnabledMap: Map<PolicyType, boolean>): Promise<PolicyRequest> {
-        const singleOrgEnabled = policiesEnabledMap.get(PolicyType.SingleOrg) ?? false;
-        if (this.enabled.value && !singleOrgEnabled) {
-            throw new Error(this.i18nService.t('requireSsoPolicyReqError'));
-        }
-
-        const data = this.buildRequestData();
-        if (data?.minutes == null || data?.minutes <= 0) {
-            throw new Error(this.i18nService.t('invalidMaximumVaultTimeout'));
-        }
-
-        return super.buildRequest(policiesEnabledMap);
-    }
+    return super.buildRequest(policiesEnabledMap);
+  }
 }

bitwarden_license/src/app/providers/clients/add-organization.component.html

@@ -1,35 +1,46 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="addTitle">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h2 class="modal-title" id="addTitle">
-                    {{'addExistingOrganization' | 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>
-                <ng-container *ngIf="!loading">
-                    <table class="table table-hover table-list">
-                        <tr *ngFor="let o of organizations">
-                            <td width="30">
-                                <app-avatar [data]="o.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
-                            </td>
-                            <td>
-                                {{o.name}}
-                            </td>
-                            <td>
-                                <button class="btn btn-outline-secondary pull-right" (click)="add(o)" [disabled]="formPromise">Add</button>
-                            </td>
-                        </tr>
-                    </table>
-                </ng-container>
-            </div>
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="addTitle">
+          {{ "addExistingOrganization" | 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>
+        <ng-container *ngIf="!loading">
+          <table class="table table-hover table-list">
+            <tr *ngFor="let o of organizations">
+              <td width="30">
+                <app-avatar [data]="o.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
+              </td>
+              <td>
+                {{ o.name }}
+              </td>
+              <td>
+                <button
+                  class="btn btn-outline-secondary pull-right"
+                  (click)="add(o)"
+                  [disabled]="formPromise"
+                >
+                  Add
+                </button>
+              </td>
+            </tr>
+          </table>
+        </ng-container>
+      </div>
     </div>
+  </div>
 </div>

bitwarden_license/src/app/providers/clients/add-organization.component.ts

@@ -1,82 +1,86 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnInit,
-    Output
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
-import { ValidationService } from 'jslib-angular/services/validation.service';
+import { ValidationService } from "jslib-angular/services/validation.service";
 
-import { WebProviderService } from '../services/webProvider.service';
+import { WebProviderService } from "../services/webProvider.service";
 
-import { Organization } from 'jslib-common/models/domain/organization';
-import { Provider } from 'jslib-common/models/domain/provider';
+import { Organization } from "jslib-common/models/domain/organization";
+import { Provider } from "jslib-common/models/domain/provider";
 
 @Component({
-    selector: 'provider-add-organization',
-    templateUrl: 'add-organization.component.html',
+  selector: "provider-add-organization",
+  templateUrl: "add-organization.component.html",
 })
 export class AddOrganizationComponent implements OnInit {
+  @Input() providerId: string;
+  @Input() organizations: Organization[];
+  @Output() onAddedOrganization = new EventEmitter();
 
-    @Input() providerId: string;
-    @Input() organizations: Organization[];
-    @Output() onAddedOrganization = new EventEmitter();
+  provider: Provider;
+  formPromise: Promise<any>;
+  loading = true;
 
-    provider: Provider;
-    formPromise: Promise<any>;
-    loading = true;
+  constructor(
+    private providerService: ProviderService,
+    private webProviderService: WebProviderService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private validationService: ValidationService
+  ) {}
 
-    constructor(
-        private providerService: ProviderService,
-        private webProviderService: WebProviderService,
-        private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService,
-        private validationService: ValidationService
-    ) { }
+  async ngOnInit() {
+    await this.load();
+  }
 
-    async ngOnInit() {
-        await this.load();
+  async load() {
+    if (this.providerId == null) {
+      return;
     }
 
-    async load() {
-        if (this.providerId == null) {
-            return;
-        }
+    this.provider = await this.providerService.get(this.providerId);
 
-        this.provider = await this.providerService.get(this.providerId);
+    this.loading = false;
+  }
 
-        this.loading = false;
+  async add(organization: Organization) {
+    if (this.formPromise) {
+      return;
     }
 
-    async add(organization: Organization) {
-        if (this.formPromise) {
-            return;
-        }
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("addOrganizationConfirmation", organization.name, this.provider.name),
+      organization.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
 
-        const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('addOrganizationConfirmation', organization.name, this.provider.name), organization.name,
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-
-        if (!confirmed) {
-            return false;
-        }
-
-        try {
-            this.formPromise = this.webProviderService.addOrganizationToProvider(this.providerId, organization.id);
-            await this.formPromise;
-        } catch (e) {
-            this.validationService.showError(e);
-            return;
-        } finally {
-            this.formPromise = null;
-        }
-
-        this.platformUtilsService.showToast('success', null, this.i18nService.t('organizationJoinedProvider'));
-        this.onAddedOrganization.emit();
+    if (!confirmed) {
+      return false;
     }
+
+    try {
+      this.formPromise = this.webProviderService.addOrganizationToProvider(
+        this.providerId,
+        organization.id
+      );
+      await this.formPromise;
+    } catch (e) {
+      this.validationService.showError(e);
+      return;
+    } finally {
+      this.formPromise = null;
+    }
+
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("organizationJoinedProvider")
+    );
+    this.onAddedOrganization.emit();
+  }
 }

bitwarden_license/src/app/providers/clients/clients.component.html

@@ -1,62 +1,86 @@
 <div class="page-header d-flex">
-    <h1>{{'clients' | i18n}}</h1>
+  <h1>{{ "clients" | i18n }}</h1>
 
-    <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">
-        </div>
-        <a class="btn btn-sm btn-outline-primary ml-3" routerLink="create" *ngIf="manageOrganizations">
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
-            {{'newClientOrganization' | i18n}}
-        </a>
-        <button class="btn btn-sm btn-outline-primary ml-3" (click)="addExistingOrganization()"
-            *ngIf="manageOrganizations && showAddExisting">
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
-            {{'addExistingOrganization' | i18n}}
-        </button>
+  <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"
+      />
     </div>
+    <a class="btn btn-sm btn-outline-primary ml-3" routerLink="create" *ngIf="manageOrganizations">
+      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      {{ "newClientOrganization" | i18n }}
+    </a>
+    <button
+      class="btn btn-sm btn-outline-primary ml-3"
+      (click)="addExistingOrganization()"
+      *ngIf="manageOrganizations && showAddExisting"
+    >
+      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      {{ "addExistingOrganization" | i18n }}
+    </button>
+  </div>
 </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>
+  <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 && (clients | search:searchText:'organizationName':'id') as searchedClients">
-    <p *ngIf="!searchedClients.length">{{'noClientsInList' | i18n}}</p>
-    <ng-container *ngIf="searchedClients.length">
-        <table class="table table-hover table-list" infiniteScroll [infiniteScrollDistance]="1"
-            [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
-            <tbody>
-                <tr *ngFor="let o of searchedClients">
-                    <td width="30">
-                        <app-avatar [data]="o.organizationName" size="25" [circle]="true" [fontSize]="14"></app-avatar>
-                    </td>
-                    <td>
-                        <a [routerLink]="['/organizations', o.organizationId]">{{o.organizationName}}</a>
-                    </td>
-                    <td class="table-list-options" *ngIf="manageOrganizations">
-                        <div class="dropdown" appListDropdown>
-                            <button class="btn btn-outline-secondary dropdown-toggle" type="button"
-                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                                appA11yTitle="{{'options' | i18n}}">
-                                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-right">
-                                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(o)">
-                                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
-                                    {{'remove' | i18n}}
-                                </a>
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </ng-container>
+  *ngIf="!loading && (clients | search: searchText:'organizationName':'id') as searchedClients"
+>
+  <p *ngIf="!searchedClients.length">{{ "noClientsInList" | i18n }}</p>
+  <ng-container *ngIf="searchedClients.length">
+    <table
+      class="table table-hover table-list"
+      infiniteScroll
+      [infiniteScrollDistance]="1"
+      [infiniteScrollDisabled]="!isPaging()"
+      (scrolled)="loadMore()"
+    >
+      <tbody>
+        <tr *ngFor="let o of searchedClients">
+          <td width="30">
+            <app-avatar
+              [data]="o.organizationName"
+              size="25"
+              [circle]="true"
+              [fontSize]="14"
+            ></app-avatar>
+          </td>
+          <td>
+            <a [routerLink]="['/organizations', o.organizationId]">{{ o.organizationName }}</a>
+          </td>
+          <td class="table-list-options" *ngIf="manageOrganizations">
+            <div class="dropdown" appListDropdown>
+              <button
+                class="btn btn-outline-secondary dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                appA11yTitle="{{ 'options' | i18n }}"
+              >
+                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(o)">
+                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  {{ "remove" | i18n }}
+                </a>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ng-container>
 </ng-container>
 
 <ng-template #add></ng-template>

bitwarden_license/src/app/providers/clients/clients.component.ts

@@ -1,167 +1,183 @@
-import {
-    Component,
-    OnInit,
-    ViewChild,
-    ViewContainerRef
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { OrganizationService } from 'jslib-common/abstractions/organization.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
-import { SearchService } from 'jslib-common/abstractions/search.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { OrganizationService } from "jslib-common/abstractions/organization.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
+import { SearchService } from "jslib-common/abstractions/search.service";
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-import { ValidationService } from 'jslib-angular/services/validation.service';
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.service";
 
-import { PlanType } from 'jslib-common/enums/planType';
-import { ProviderUserType } from 'jslib-common/enums/providerUserType';
+import { PlanType } from "jslib-common/enums/planType";
+import { ProviderUserType } from "jslib-common/enums/providerUserType";
 
-import { Organization } from 'jslib-common/models/domain/organization';
-import {
-    ProviderOrganizationOrganizationDetailsResponse
-} from 'jslib-common/models/response/provider/providerOrganizationResponse';
+import { Organization } from "jslib-common/models/domain/organization";
+import { ProviderOrganizationOrganizationDetailsResponse } from "jslib-common/models/response/provider/providerOrganizationResponse";
 
-import { WebProviderService } from '../services/webProvider.service';
+import { WebProviderService } from "../services/webProvider.service";
 
-import { AddOrganizationComponent } from './add-organization.component';
+import { AddOrganizationComponent } from "./add-organization.component";
 
-const DisallowedPlanTypes = [PlanType.Free, PlanType.FamiliesAnnually2019, PlanType.FamiliesAnnually];
+const DisallowedPlanTypes = [
+  PlanType.Free,
+  PlanType.FamiliesAnnually2019,
+  PlanType.FamiliesAnnually,
+];
 
 @Component({
-    templateUrl: 'clients.component.html',
+  templateUrl: "clients.component.html",
 })
 export class ClientsComponent implements OnInit {
+  @ViewChild("add", { read: ViewContainerRef, static: true }) addModalRef: ViewContainerRef;
 
-    @ViewChild('add', { read: ViewContainerRef, static: true }) addModalRef: ViewContainerRef;
+  providerId: any;
+  searchText: string;
+  addableOrganizations: Organization[];
+  loading = true;
+  manageOrganizations = false;
+  showAddExisting = false;
 
-    providerId: any;
-    searchText: string;
-    addableOrganizations: Organization[];
-    loading = true;
-    manageOrganizations = false;
-    showAddExisting = false;
+  clients: ProviderOrganizationOrganizationDetailsResponse[];
+  pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
 
-    clients: ProviderOrganizationOrganizationDetailsResponse[];
-    pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
+  protected didScroll = false;
+  protected pageSize = 100;
+  protected actionPromise: Promise<any>;
+  private pagedClientsCount = 0;
 
-    protected didScroll = false;
-    protected pageSize = 100;
-    protected actionPromise: Promise<any>;
-    private pagedClientsCount = 0;
+  constructor(
+    private route: ActivatedRoute,
+    private providerService: ProviderService,
+    private apiService: ApiService,
+    private searchService: SearchService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private validationService: ValidationService,
+    private webProviderService: WebProviderService,
+    private logService: LogService,
+    private modalService: ModalService,
+    private organizationService: OrganizationService
+  ) {}
 
-    constructor(
-        private route: ActivatedRoute,
-        private providerService: ProviderService,
-        private apiService: ApiService,
-        private searchService: SearchService,
-        private platformUtilsService: PlatformUtilsService,
-        private i18nService: I18nService,
-        private validationService: ValidationService,
-        private webProviderService: WebProviderService,
-        private logService: LogService,
-        private modalService: ModalService,
-        private organizationService: OrganizationService
-    ) { }
+  async ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
 
-    async ngOnInit() {
-        this.route.parent.params.subscribe(async params => {
-            this.providerId = params.providerId;
+      await this.load();
 
+      this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+        this.searchText = qParams.search;
+      });
+    });
+  }
+
+  async load() {
+    const response = await this.apiService.getProviderClients(this.providerId);
+    this.clients = response.data != null && response.data.length > 0 ? response.data : [];
+    this.manageOrganizations =
+      (await this.providerService.get(this.providerId)).type === ProviderUserType.ProviderAdmin;
+    const candidateOrgs = (await this.organizationService.getAll()).filter(
+      (o) => o.isOwner && o.providerId == null
+    );
+    const allowedOrgsIds = await Promise.all(
+      candidateOrgs.map((o) => this.apiService.getOrganization(o.id))
+    ).then((orgs) =>
+      orgs.filter((o) => !DisallowedPlanTypes.includes(o.planType)).map((o) => o.id)
+    );
+    this.addableOrganizations = candidateOrgs.filter((o) => allowedOrgsIds.includes(o.id));
+
+    this.showAddExisting = this.addableOrganizations.length !== 0;
+    this.loading = false;
+  }
+
+  isPaging() {
+    const searching = this.isSearching();
+    if (searching && this.didScroll) {
+      this.resetPaging();
+    }
+    return !searching && this.clients && this.clients.length > this.pageSize;
+  }
+
+  isSearching() {
+    return this.searchService.isSearchable(this.searchText);
+  }
+
+  async resetPaging() {
+    this.pagedClients = [];
+    this.loadMore();
+  }
+
+  loadMore() {
+    if (!this.clients || this.clients.length <= this.pageSize) {
+      return;
+    }
+    const pagedLength = this.pagedClients.length;
+    let pagedSize = this.pageSize;
+    if (pagedLength === 0 && this.pagedClientsCount > this.pageSize) {
+      pagedSize = this.pagedClientsCount;
+    }
+    if (this.clients.length > pagedLength) {
+      this.pagedClients = this.pagedClients.concat(
+        this.clients.slice(pagedLength, pagedLength + pagedSize)
+      );
+    }
+    this.pagedClientsCount = this.pagedClients.length;
+    this.didScroll = this.pagedClients.length > this.pageSize;
+  }
+
+  async addExistingOrganization() {
+    const [modal] = await this.modalService.openViewRef(
+      AddOrganizationComponent,
+      this.addModalRef,
+      (comp) => {
+        comp.providerId = this.providerId;
+        comp.organizations = this.addableOrganizations;
+        comp.onAddedOrganization.subscribe(async () => {
+          try {
             await this.load();
-
-            this.route.queryParams.pipe(first()).subscribe(async qParams => {
-                this.searchText = qParams.search;
-            });
+            modal.close();
+          } catch (e) {
+            this.logService.error(`Handled exception: ${e}`);
+          }
         });
+      }
+    );
+  }
+
+  async remove(organization: ProviderOrganizationOrganizationDetailsResponse) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("detachOrganizationConfirmation"),
+      organization.organizationName,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+
+    if (!confirmed) {
+      return false;
     }
 
-    async load() {
-        const response = await this.apiService.getProviderClients(this.providerId);
-        this.clients = response.data != null && response.data.length > 0 ? response.data : [];
-        this.manageOrganizations = (await this.providerService.get(this.providerId)).type === ProviderUserType.ProviderAdmin;
-        const candidateOrgs = (await this.organizationService.getAll()).filter(o => o.isOwner && o.providerId == null);
-        const allowedOrgsIds = await Promise.all(candidateOrgs.map(o => this.apiService.getOrganization(o.id))).then(orgs =>
-            orgs.filter(o => !DisallowedPlanTypes.includes(o.planType))
-                .map(o => o.id));
-        this.addableOrganizations = candidateOrgs.filter(o => allowedOrgsIds.includes(o.id));
-
-        this.showAddExisting = this.addableOrganizations.length !== 0;
-        this.loading = false;
-    }
-
-    isPaging() {
-        const searching = this.isSearching();
-        if (searching && this.didScroll) {
-            this.resetPaging();
-        }
-        return !searching && this.clients && this.clients.length > this.pageSize;
-    }
-
-    isSearching() {
-        return this.searchService.isSearchable(this.searchText);
-    }
-
-    async resetPaging() {
-        this.pagedClients = [];
-        this.loadMore();
-    }
-
-
-    loadMore() {
-        if (!this.clients || this.clients.length <= this.pageSize) {
-            return;
-        }
-        const pagedLength = this.pagedClients.length;
-        let pagedSize = this.pageSize;
-        if (pagedLength === 0 && this.pagedClientsCount > this.pageSize) {
-            pagedSize = this.pagedClientsCount;
-        }
-        if (this.clients.length > pagedLength) {
-            this.pagedClients = this.pagedClients.concat(this.clients.slice(pagedLength, pagedLength + pagedSize));
-        }
-        this.pagedClientsCount = this.pagedClients.length;
-        this.didScroll = this.pagedClients.length > this.pageSize;
-    }
-
-    async addExistingOrganization() {
-        const [modal] = await this.modalService.openViewRef(AddOrganizationComponent, this.addModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.organizations = this.addableOrganizations;
-            comp.onAddedOrganization.subscribe(async () => {
-                try {
-                    await this.load();
-                    modal.close();
-                } catch (e) {
-                    this.logService.error(`Handled exception: ${e}`);
-                }
-            });
-        });
-    }
-
-    async remove(organization: ProviderOrganizationOrganizationDetailsResponse) {
-        const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('detachOrganizationConfirmation'), organization.organizationName,
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-
-        if (!confirmed) {
-            return false;
-        }
-
-        this.actionPromise = this.webProviderService.detachOrganizastion(this.providerId, organization.id);
-        try {
-            await this.actionPromise;
-            this.platformUtilsService.showToast('success', null,
-                this.i18nService.t('detachedOrganization', organization.organizationName));
-            await this.load();
-        } catch (e) {
-            this.validationService.showError(e);
-        }
-        this.actionPromise = null;
+    this.actionPromise = this.webProviderService.detachOrganizastion(
+      this.providerId,
+      organization.id
+    );
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("detachedOrganization", organization.organizationName)
+      );
+      await this.load();
+    } catch (e) {
+      this.validationService.showError(e);
     }
+    this.actionPromise = null;
+  }
 }

bitwarden_license/src/app/providers/clients/create-organization.component.html

@@ -1,5 +1,5 @@
 <div class="page-header">
-    <h1>{{'newClientOrganization' | i18n}}</h1>
+  <h1>{{ "newClientOrganization" | i18n }}</h1>
 </div>
-<p>{{'newClientOrganizationDesc' | i18n}}</p>
+<p>{{ "newClientOrganizationDesc" | i18n }}</p>
 <app-organization-plans [providerId]="providerId"></app-organization-plans>

bitwarden_license/src/app/providers/clients/create-organization.component.ts

@@ -1,26 +1,23 @@
-import {
-    Component,
-    OnInit,
-    ViewChild,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { OrganizationPlansComponent } from 'src/app/settings/organization-plans.component';
+import { OrganizationPlansComponent } from "src/app/settings/organization-plans.component";
 
 @Component({
-    selector: 'app-create-organization',
-    templateUrl: 'create-organization.component.html',
+  selector: "app-create-organization",
+  templateUrl: "create-organization.component.html",
 })
 export class CreateOrganizationComponent implements OnInit {
-    @ViewChild(OrganizationPlansComponent, { static: true }) orgPlansComponent: OrganizationPlansComponent;
+  @ViewChild(OrganizationPlansComponent, { static: true })
+  orgPlansComponent: OrganizationPlansComponent;
 
-    providerId: string;
+  providerId: string;
 
-    constructor(private route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute) {}
 
-    ngOnInit() {
-        this.route.parent.params.subscribe(async params => {
-            this.providerId = params.providerId;
-        });
-    }
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+    });
+  }
 }

bitwarden_license/src/app/providers/manage/accept-provider.component.html

@@ -1,35 +1,42 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
-    <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
-        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span class="sr-only">{{'loading' | i18n}}</span>
-        </p>
-    </div>
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="fa fa-spinner fa-spin fa-2x text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="sr-only">{{ "loading" | i18n }}</span>
+    </p>
+  </div>
 </div>
 <div class="container" *ngIf="!loading && !authed">
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <p class="lead text-center mb-4">{{'joinProvider' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <p class="text-center">
-                        {{providerName}}
-                        <strong class="d-block mt-2">{{email}}</strong>
-                    </p>
-                    <p>{{'joinProviderDesc' | 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "joinProvider" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <p class="text-center">
+            {{ providerName }}
+            <strong class="d-block mt-2">{{ email }}</strong>
+          </p>
+          <p>{{ "joinProviderDesc" | 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>

bitwarden_license/src/app/providers/manage/accept-provider.component.ts

@@ -1,48 +1,56 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { BaseAcceptComponent } from 'src/app/common/base.accept.component';
+import { BaseAcceptComponent } from "src/app/common/base.accept.component";
 
-import { ApiService } from 'jslib-common/abstractions/api.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 { StateService } from 'jslib-common/abstractions/state.service';
-import { ProviderUserAcceptRequest } from 'jslib-common/models/request/provider/providerUserAcceptRequest';
+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 { ProviderUserAcceptRequest } from "jslib-common/models/request/provider/providerUserAcceptRequest";
 
 @Component({
-    selector: 'app-accept-provider',
-    templateUrl: 'accept-provider.component.html',
+  selector: "app-accept-provider",
+  templateUrl: "accept-provider.component.html",
 })
 export class AcceptProviderComponent extends BaseAcceptComponent {
-    providerName: string;
+  providerName: string;
 
-    failedMessage = 'providerInviteAcceptFailed';
+  failedMessage = "providerInviteAcceptFailed";
 
-    requiredParameters = ['providerId', 'providerUserId', 'token'];
+  requiredParameters = ["providerId", "providerUserId", "token"];
 
-    constructor(
-        router: Router,
-        i18nService: I18nService,
-        route: ActivatedRoute,
-        stateService: StateService,
-        private apiService: ApiService,
-        platformUtilService: PlatformUtilsService,
-    ) {
-        super(router, platformUtilService, i18nService, route, stateService);
-    }
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    stateService: StateService,
+    private apiService: ApiService,
+    platformUtilService: PlatformUtilsService
+  ) {
+    super(router, platformUtilService, i18nService, route, stateService);
+  }
 
-    async authedHandler(qParams: any) {
-        const request = new ProviderUserAcceptRequest();
-        request.token = qParams.token;
+  async authedHandler(qParams: any) {
+    const request = new ProviderUserAcceptRequest();
+    request.token = qParams.token;
 
-        await this.apiService.postProviderUserAccept(qParams.providerId, qParams.providerUserId, request);
-        this.platformUtilService.showToast('success', this.i18nService.t('inviteAccepted'),
-            this.i18nService.t('providerInviteAcceptedDesc'), { timeout: 10000 });
-        this.router.navigate(['/vault']);
-    }
+    await this.apiService.postProviderUserAccept(
+      qParams.providerId,
+      qParams.providerUserId,
+      request
+    );
+    this.platformUtilService.showToast(
+      "success",
+      this.i18nService.t("inviteAccepted"),
+      this.i18nService.t("providerInviteAcceptedDesc"),
+      { timeout: 10000 }
+    );
+    this.router.navigate(["/vault"]);
+  }
 
-    async unauthedHandler(qParams: any) {
-        this.providerName = qParams.providerName;
-    }
+  async unauthedHandler(qParams: any) {
+    this.providerName = qParams.providerName;
+  }
 }

bitwarden_license/src/app/providers/manage/bulk/bulk-confirm.component.ts

@@ -1,38 +1,34 @@
-import {
-    Component,
-    Input,
-} from '@angular/core';
+import { Component, Input } from "@angular/core";
 
-import { ProviderUserBulkConfirmRequest } from 'jslib-common/models/request/provider/providerUserBulkConfirmRequest';
-import { ProviderUserBulkRequest } from 'jslib-common/models/request/provider/providerUserBulkRequest';
+import { ProviderUserBulkConfirmRequest } from "jslib-common/models/request/provider/providerUserBulkConfirmRequest";
+import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
 
-import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
+import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
 
-import { BulkConfirmComponent as OrganizationBulkConfirmComponent } from 'src/app/organizations/manage/bulk/bulk-confirm.component';
-import { BulkUserDetails } from 'src/app/organizations/manage/bulk/bulk-status.component';
+import { BulkConfirmComponent as OrganizationBulkConfirmComponent } from "src/app/organizations/manage/bulk/bulk-confirm.component";
+import { BulkUserDetails } from "src/app/organizations/manage/bulk/bulk-status.component";
 
 @Component({
-    templateUrl: '../../../../../../src/app/organizations/manage/bulk/bulk-confirm.component.html',
+  templateUrl: "../../../../../../src/app/organizations/manage/bulk/bulk-confirm.component.html",
 })
 export class BulkConfirmComponent extends OrganizationBulkConfirmComponent {
+  @Input() providerId: string;
 
-    @Input() providerId: string;
+  protected isAccepted(user: BulkUserDetails) {
+    return user.status === ProviderUserStatusType.Accepted;
+  }
 
-    protected isAccepted(user: BulkUserDetails) {
-        return user.status === ProviderUserStatusType.Accepted;
-    }
+  protected async getPublicKeys() {
+    const request = new ProviderUserBulkRequest(this.filteredUsers.map((user) => user.id));
+    return await this.apiService.postProviderUsersPublicKey(this.providerId, request);
+  }
 
-    protected async getPublicKeys() {
-        const request = new ProviderUserBulkRequest(this.filteredUsers.map(user => user.id));
-        return await this.apiService.postProviderUsersPublicKey(this.providerId, request);
-    }
+  protected getCryptoKey() {
+    return this.cryptoService.getProviderKey(this.providerId);
+  }
 
-    protected getCryptoKey() {
-        return this.cryptoService.getProviderKey(this.providerId);
-    }
-
-    protected async postConfirmRequest(userIdsWithKeys: any[]) {
-        const request = new ProviderUserBulkConfirmRequest(userIdsWithKeys);
-        return await this.apiService.postProviderUserBulkConfirm(this.providerId, request);
-    }
+  protected async postConfirmRequest(userIdsWithKeys: any[]) {
+    const request = new ProviderUserBulkConfirmRequest(userIdsWithKeys);
+    return await this.apiService.postProviderUserBulkConfirm(this.providerId, request);
+  }
 }

bitwarden_license/src/app/providers/manage/bulk/bulk-remove.component.ts

@@ -1,21 +1,17 @@
-import {
-    Component,
-    Input,
-} from '@angular/core';
+import { Component, Input } from "@angular/core";
 
-import { ProviderUserBulkRequest } from 'jslib-common/models/request/provider/providerUserBulkRequest';
+import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
 
-import { BulkRemoveComponent as OrganizationBulkRemoveComponent } from 'src/app/organizations/manage/bulk/bulk-remove.component';
+import { BulkRemoveComponent as OrganizationBulkRemoveComponent } from "src/app/organizations/manage/bulk/bulk-remove.component";
 
 @Component({
-    templateUrl: '../../../../../../src/app/organizations/manage/bulk/bulk-remove.component.html',
+  templateUrl: "../../../../../../src/app/organizations/manage/bulk/bulk-remove.component.html",
 })
 export class BulkRemoveComponent extends OrganizationBulkRemoveComponent {
+  @Input() providerId: string;
 
-    @Input() providerId: string;
-
-    async deleteUsers() {
-        const request = new ProviderUserBulkRequest(this.users.map(user => user.id));
-        return await this.apiService.deleteManyProviderUsers(this.providerId, request);
-    }
+  async deleteUsers() {
+    const request = new ProviderUserBulkRequest(this.users.map((user) => user.id));
+    return await this.apiService.deleteManyProviderUsers(this.providerId, request);
+  }
 }

bitwarden_license/src/app/providers/manage/events.component.html

@@ -1,68 +1,103 @@
 <div class="page-header d-flex">
-    <h1>{{'eventLogs' | i18n}}</h1>
-    <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"
-                (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"
-                (change)="dirtyDates = true">
-        </div>
-        <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>
+  <h1>{{ "eventLogs" | i18n }}</h1>
+  <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"
+        (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"
+        (change)="dirtyDates = true"
+      />
     </div>
+    <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>
 <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>
+  <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">
-        <thead>
-            <tr>
-                <th class="border-top-0" width="210">{{'timestamp' | i18n}}</th>
-                <th class="border-top-0" width="40">
-                    <span class="sr-only">{{'device' | i18n}}</span>
-                </th>
-                <th class="border-top-0" width="150">{{'user' | i18n}}</th>
-                <th class="border-top-0">{{'event' | i18n}}</th>
-            </tr>
-        </thead>
-        <tbody>
-            <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}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
-                </td>
-                <td>
-                    <span title="{{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}}" aria-hidden="true"></i>
-        <span>{{'loadMore' | i18n}}</span>
-    </button>
+  <p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
+  <table class="table table-hover" *ngIf="events && events.length">
+    <thead>
+      <tr>
+        <th class="border-top-0" width="210">{{ "timestamp" | i18n }}</th>
+        <th class="border-top-0" width="40">
+          <span class="sr-only">{{ "device" | i18n }}</span>
+        </th>
+        <th class="border-top-0" width="150">{{ "user" | i18n }}</th>
+        <th class="border-top-0">{{ "event" | i18n }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <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 }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ e.appName }}, {{ e.ip }}</span>
+        </td>
+        <td>
+          <span title="{{ 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 }}" aria-hidden="true"></i>
+    <span>{{ "loadMore" | i18n }}</span>
+  </button>
 </ng-container>

bitwarden_license/src/app/providers/manage/events.component.ts

@@ -1,84 +1,82 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-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 { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.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 { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
-import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
 
-import { EventResponse } from 'jslib-common/models/response/eventResponse';
+import { EventResponse } from "jslib-common/models/response/eventResponse";
 
-import { EventService } from 'src/app/services/event.service';
+import { EventService } from "src/app/services/event.service";
 
-import { BaseEventsComponent } from 'src/app/common/base.events.component';
+import { BaseEventsComponent } from "src/app/common/base.events.component";
 
 @Component({
-    selector: 'provider-events',
-    templateUrl: 'events.component.html',
+  selector: "provider-events",
+  templateUrl: "events.component.html",
 })
 export class EventsComponent extends BaseEventsComponent implements OnInit {
-    exportFileName: string = 'provider-events';
-    providerId: string;
+  exportFileName: string = "provider-events";
+  providerId: string;
 
-    private providerUsersUserIdMap = new Map<string, any>();
-    private providerUsersIdMap = new Map<string, any>();
+  private providerUsersUserIdMap = new Map<string, any>();
+  private providerUsersIdMap = new Map<string, any>();
 
-    constructor(
-        private apiService: ApiService,
-        private route: ActivatedRoute,
-        eventService: EventService,
-        i18nService: I18nService,
-        private providerService: ProviderService,
-        exportService: ExportService,
-        platformUtilsService: PlatformUtilsService,
-        private router: Router,
-        logService: LogService,
-        private userNamePipe: UserNamePipe,
-    ) {
-        super(
-            eventService,
-            i18nService,
-            exportService,
-            platformUtilsService,
-            logService,
-        );
-    }
+  constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute,
+    eventService: EventService,
+    i18nService: I18nService,
+    private providerService: ProviderService,
+    exportService: ExportService,
+    platformUtilsService: PlatformUtilsService,
+    private router: Router,
+    logService: LogService,
+    private userNamePipe: UserNamePipe
+  ) {
+    super(eventService, i18nService, exportService, platformUtilsService, logService);
+  }
 
-    async ngOnInit() {
-        this.route.parent.parent.params.subscribe(async params => {
-            this.providerId = params.providerId;
-            const provider = await this.providerService.get(this.providerId);
-            if (provider == null || !provider.useEvents) {
-                this.router.navigate(['/providers', this.providerId]);
-                return;
-            }
-            await this.load();
-        });
-    }
+  async ngOnInit() {
+    this.route.parent.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+      const provider = await this.providerService.get(this.providerId);
+      if (provider == null || !provider.useEvents) {
+        this.router.navigate(["/providers", this.providerId]);
+        return;
+      }
+      await this.load();
+    });
+  }
 
-    async load() {
-        const response = await this.apiService.getProviderUsers(this.providerId);
-        response.data.forEach(u => {
-            const name = this.userNamePipe.transform(u);
-            this.providerUsersIdMap.set(u.id, { name: name, email: u.email });
-            this.providerUsersUserIdMap.set(u.userId, { name: name, email: u.email });
-        });
-        await this.loadEvents(true);
-        this.loaded = true;
-    }
+  async load() {
+    const response = await this.apiService.getProviderUsers(this.providerId);
+    response.data.forEach((u) => {
+      const name = this.userNamePipe.transform(u);
+      this.providerUsersIdMap.set(u.id, { name: name, email: u.email });
+      this.providerUsersUserIdMap.set(u.userId, { name: name, email: u.email });
+    });
+    await this.loadEvents(true);
+    this.loaded = true;
+  }
 
-    protected requestEvents(startDate: string, endDate: string, continuationToken: string) {
-        return this.apiService.getEventsProvider(this.providerId, startDate, endDate, continuationToken);
-    }
+  protected requestEvents(startDate: string, endDate: string, continuationToken: string) {
+    return this.apiService.getEventsProvider(
+      this.providerId,
+      startDate,
+      endDate,
+      continuationToken
+    );
+  }
 
-    protected getUserName(r: EventResponse, userId: string) {
-        return userId != null && this.providerUsersUserIdMap.has(userId) ? this.providerUsersUserIdMap.get(userId) : null;
-    }
+  protected getUserName(r: EventResponse, userId: string) {
+    return userId != null && this.providerUsersUserIdMap.has(userId)
+      ? this.providerUsersUserIdMap.get(userId)
+      : null;
+  }
 }

bitwarden_license/src/app/providers/manage/manage.component.html

@@ -1,22 +1,30 @@
 <div class="container page-content">
-    <div class="row">
-        <div class="col-3">
-            <div class="card" *ngIf="provider">
-                <div class="card-header">{{'manage' | i18n}}</div>
-                <div class="list-group list-group-flush">
-                    <a routerLink="people" class="list-group-item" routerLinkActive="active"
-                        *ngIf="provider.canManageUsers">
-                        {{'people' | i18n}}
-                    </a>
-                    <a routerLink="events" class="list-group-item" routerLinkActive="active"
-                        *ngIf="provider.canAccessEventLogs && accessEvents">
-                        {{'eventLogs' | i18n}}
-                    </a>
-                </div>
-            </div>
-        </div>
-        <div class="col-9">
-            <router-outlet></router-outlet>
+  <div class="row">
+    <div class="col-3">
+      <div class="card" *ngIf="provider">
+        <div class="card-header">{{ "manage" | i18n }}</div>
+        <div class="list-group list-group-flush">
+          <a
+            routerLink="people"
+            class="list-group-item"
+            routerLinkActive="active"
+            *ngIf="provider.canManageUsers"
+          >
+            {{ "people" | i18n }}
+          </a>
+          <a
+            routerLink="events"
+            class="list-group-item"
+            routerLinkActive="active"
+            *ngIf="provider.canAccessEventLogs && accessEvents"
+          >
+            {{ "eventLogs" | i18n }}
+          </a>
         </div>
+      </div>
     </div>
+    <div class="col-9">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 </div>

bitwarden_license/src/app/providers/manage/manage.component.ts

@@ -1,27 +1,24 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
-import { Provider } from 'jslib-common/models/domain/provider';
+import { Provider } from "jslib-common/models/domain/provider";
 
 @Component({
-    selector: 'provider-manage',
-    templateUrl: 'manage.component.html',
+  selector: "provider-manage",
+  templateUrl: "manage.component.html",
 })
 export class ManageComponent implements OnInit {
-    provider: Provider;
-    accessEvents = false;
+  provider: Provider;
+  accessEvents = false;
 
-    constructor(private route: ActivatedRoute, private providerService: ProviderService) { }
+  constructor(private route: ActivatedRoute, private providerService: ProviderService) {}
 
-    ngOnInit() {
-        this.route.parent.params.subscribe(async params => {
-            this.provider = await this.providerService.get(params.providerId);
-            this.accessEvents = this.provider.useEvents;
-        });
-    }
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.provider = await this.providerService.get(params.providerId);
+      this.accessEvents = this.provider.useEvents;
+    });
+  }
 }

bitwarden_license/src/app/providers/manage/people.component.html

@@ -1,145 +1,220 @@
 <div class="page-header d-flex">
-    <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)">
-                {{'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 == userStatusType.Invited}"
-                (click)="filter(userStatusType.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 == userStatusType.Accepted}"
-                (click)="filter(userStatusType.Accepted)">
-                {{'accepted' | i18n}}
-                <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{acceptedCount}}</span>
-            </button>
-        </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">
-        </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" aria-hidden="true"></i>
-            {{'inviteUser' | i18n}}
-        </button>
+  <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)"
+      >
+        {{ "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 == userStatusType.Invited }"
+        (click)="filter(userStatusType.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 == userStatusType.Accepted }"
+        (click)="filter(userStatusType.Accepted)"
+      >
+        {{ "accepted" | i18n }}
+        <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{
+          acceptedCount
+        }}</span>
+      </button>
     </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"
+      />
+    </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" aria-hidden="true"></i>
+      {{ "inviteUser" | i18n }}
+    </button>
+  </div>
 </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>
+  <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">
-            {{'providerUsersNeedConfirmed' | i18n}}
-        </app-callout>
-        <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 | userName" [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 === userStatusType.Invited">{{'invited' | i18n}}</span>
-                        <span class="badge badge-warning"
-                            *ngIf="u.status === userStatusType.Accepted">{{'accepted' | i18n}}</span>
-                        <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
-                    </td>
-                    <td>
-                        <ng-container *ngIf="u.twoFactorEnabled">
-                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}" aria-hidden="true"></i>
-                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
-                        </ng-container>
-                    </td>
-                    <td>
-                        <span *ngIf="u.type === userType.ProviderAdmin">{{'providerAdmin' | i18n}}</span>
-                        <span *ngIf="u.type === userType.ServiceUser">{{'serviceUser' | i18n}}</span>
-                        <span *ngIf="u.type === userType.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"
-                                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 === userStatusType.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 === userStatusType.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" aria-hidden="true"></i>
-                                    {{'groups' | i18n}}
-                                </a>
-                                <a class="dropdown-item" href="#" appStopClick (click)="events(u)"
-                                    *ngIf="accessEvents && u.status === userStatusType.Confirmed">
-                                    <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
-                                    {{'eventLogs' | i18n}}
-                                </a>
-                                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                                    <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
-                                    {{'remove' | i18n}}
-                                </a>
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </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"
+    >
+      {{ "providerUsersNeedConfirmed" | i18n }}
+    </app-callout>
+    <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 | userName"
+              [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 === userStatusType.Invited">{{
+              "invited" | i18n
+            }}</span>
+            <span class="badge badge-warning" *ngIf="u.status === userStatusType.Accepted">{{
+              "accepted" | i18n
+            }}</span>
+            <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>
+          </td>
+          <td>
+            <ng-container *ngIf="u.twoFactorEnabled">
+              <i class="fa fa-lock" title="{{ 'userUsingTwoStep' | i18n }}" aria-hidden="true"></i>
+              <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
+            </ng-container>
+          </td>
+          <td>
+            <span *ngIf="u.type === userType.ProviderAdmin">{{ "providerAdmin" | i18n }}</span>
+            <span *ngIf="u.type === userType.ServiceUser">{{ "serviceUser" | i18n }}</span>
+            <span *ngIf="u.type === userType.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"
+                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 === userStatusType.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 === userStatusType.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" aria-hidden="true"></i>
+                  {{ "groups" | i18n }}
+                </a>
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  appStopClick
+                  (click)="events(u)"
+                  *ngIf="accessEvents && u.status === userStatusType.Confirmed"
+                >
+                  <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                  {{ "eventLogs" | i18n }}
+                </a>
+                <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
+                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  {{ "remove" | i18n }}
+                </a>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ng-container>
 </ng-container>
 <ng-template #addEdit></ng-template>
 <ng-template #eventsTemplate></ng-template>

bitwarden_license/src/app/providers/manage/people.component.ts

@@ -1,257 +1,292 @@
-import {
-    Component,
-    OnInit,
-    ViewChild,
-    ViewContainerRef
-} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
-import { SearchService } from 'jslib-common/abstractions/search.service';
-import { StateService } from 'jslib-common/abstractions/state.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 { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
+import { SearchService } from "jslib-common/abstractions/search.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-import { ValidationService } from 'jslib-angular/services/validation.service';
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.service";
 
-import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
-import { ProviderUserType } from 'jslib-common/enums/providerUserType';
+import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
+import { ProviderUserType } from "jslib-common/enums/providerUserType";
 
-import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
-import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
 
-import { ListResponse } from 'jslib-common/models/response/listResponse';
-import { ProviderUserUserDetailsResponse } from 'jslib-common/models/response/provider/providerUserResponse';
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
 
-import { ProviderUserBulkRequest } from 'jslib-common/models/request/provider/providerUserBulkRequest';
-import { ProviderUserConfirmRequest } from 'jslib-common/models/request/provider/providerUserConfirmRequest';
-import { ProviderUserBulkResponse } from 'jslib-common/models/response/provider/providerUserBulkResponse';
+import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
+import { ProviderUserConfirmRequest } from "jslib-common/models/request/provider/providerUserConfirmRequest";
+import { ProviderUserBulkResponse } from "jslib-common/models/response/provider/providerUserBulkResponse";
 
-import { BasePeopleComponent } from 'src/app/common/base.people.component';
-import { BulkStatusComponent } from 'src/app/organizations/manage/bulk/bulk-status.component';
-import { EntityEventsComponent } from 'src/app/organizations/manage/entity-events.component';
-import { BulkConfirmComponent } from './bulk/bulk-confirm.component';
-import { BulkRemoveComponent } from './bulk/bulk-remove.component';
-import { UserAddEditComponent } from './user-add-edit.component';
+import { BasePeopleComponent } from "src/app/common/base.people.component";
+import { BulkStatusComponent } from "src/app/organizations/manage/bulk/bulk-status.component";
+import { EntityEventsComponent } from "src/app/organizations/manage/entity-events.component";
+import { BulkConfirmComponent } from "./bulk/bulk-confirm.component";
+import { BulkRemoveComponent } from "./bulk/bulk-remove.component";
+import { UserAddEditComponent } from "./user-add-edit.component";
 
 @Component({
-    selector: 'provider-people',
-    templateUrl: 'people.component.html',
+  selector: "provider-people",
+  templateUrl: "people.component.html",
 })
-export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetailsResponse> implements OnInit {
+export class PeopleComponent
+  extends BasePeopleComponent<ProviderUserUserDetailsResponse>
+  implements OnInit
+{
+  @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("bulkStatusTemplate", { read: ViewContainerRef, static: true })
+  bulkStatusModalRef: ViewContainerRef;
+  @ViewChild("bulkConfirmTemplate", { read: ViewContainerRef, static: true })
+  bulkConfirmModalRef: ViewContainerRef;
+  @ViewChild("bulkRemoveTemplate", { read: ViewContainerRef, static: true })
+  bulkRemoveModalRef: 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('bulkStatusTemplate', { read: ViewContainerRef, static: true }) bulkStatusModalRef: ViewContainerRef;
-    @ViewChild('bulkConfirmTemplate', { read: ViewContainerRef, static: true }) bulkConfirmModalRef: ViewContainerRef;
-    @ViewChild('bulkRemoveTemplate', { read: ViewContainerRef, static: true }) bulkRemoveModalRef: ViewContainerRef;
+  userType = ProviderUserType;
+  userStatusType = ProviderUserStatusType;
+  providerId: string;
+  accessEvents = false;
 
-    userType = ProviderUserType;
-    userStatusType = ProviderUserStatusType;
-    providerId: string;
-    accessEvents = false;
+  constructor(
+    apiService: ApiService,
+    private route: ActivatedRoute,
+    i18nService: I18nService,
+    modalService: ModalService,
+    platformUtilsService: PlatformUtilsService,
+    cryptoService: CryptoService,
+    private router: Router,
+    searchService: SearchService,
+    validationService: ValidationService,
+    logService: LogService,
+    searchPipe: SearchPipe,
+    userNamePipe: UserNamePipe,
+    stateService: StateService,
+    private providerService: ProviderService
+  ) {
+    super(
+      apiService,
+      searchService,
+      i18nService,
+      platformUtilsService,
+      cryptoService,
+      validationService,
+      modalService,
+      logService,
+      searchPipe,
+      userNamePipe,
+      stateService
+    );
+  }
 
-    constructor(
-        apiService: ApiService,
-        private route: ActivatedRoute,
-        i18nService: I18nService,
-        modalService: ModalService,
-        platformUtilsService: PlatformUtilsService,
-        cryptoService: CryptoService,
-        private router: Router,
-        searchService: SearchService,
-        validationService: ValidationService,
-        logService: LogService,
-        searchPipe: SearchPipe,
-        userNamePipe: UserNamePipe,
-        stateService: StateService,
-        private providerService: ProviderService,
-    ) {
-        super(
-            apiService,
-            searchService,
-            i18nService,
-            platformUtilsService,
-            cryptoService,
-            validationService,
-            modalService,
-            logService,
-            searchPipe,
-            userNamePipe,
-            stateService,
-        );
-    }
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+      const provider = await this.providerService.get(this.providerId);
 
-    ngOnInit() {
-        this.route.parent.params.subscribe(async params => {
-            this.providerId = params.providerId;
-            const provider = await this.providerService.get(this.providerId);
+      if (!provider.canManageUsers) {
+        this.router.navigate(["../"], { relativeTo: this.route });
+        return;
+      }
 
-            if (!provider.canManageUsers) {
-                this.router.navigate(['../'], { relativeTo: this.route });
-                return;
-            }
+      this.accessEvents = provider.useEvents;
 
-            this.accessEvents = provider.useEvents;
+      await this.load();
 
-            await this.load();
-
-            this.route.queryParams.pipe(first()).subscribe(async qParams => {
-                this.searchText = qParams.search;
-                if (qParams.viewEvents != null) {
-                    const user = this.users.filter(u => u.id === qParams.viewEvents);
-                    if (user.length > 0 && user[0].status === ProviderUserStatusType.Confirmed) {
-                        this.events(user[0]);
-                    }
-                }
-            });
-        });
-    }
-
-    getUsers(): Promise<ListResponse<ProviderUserUserDetailsResponse>> {
-        return this.apiService.getProviderUsers(this.providerId);
-    }
-
-    deleteUser(id: string): Promise<any> {
-        return this.apiService.deleteProviderUser(this.providerId, id);
-    }
-
-    reinviteUser(id: string): Promise<any> {
-        return this.apiService.postProviderUserReinvite(this.providerId, id);
-    }
-
-    async confirmUser(user: ProviderUserUserDetailsResponse, publicKey: Uint8Array): Promise<any> {
-        const providerKey = await this.cryptoService.getProviderKey(this.providerId);
-        const key = await this.cryptoService.rsaEncrypt(providerKey.key, publicKey.buffer);
-        const request = new ProviderUserConfirmRequest();
-        request.key = key.encryptedString;
-        await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
-    }
-
-    async edit(user: ProviderUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(UserAddEditComponent, this.addEditModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.providerId = this.providerId;
-            comp.providerUserId = user != null ? user.id : null;
-            comp.onSavedUser.subscribe(() => {
-                modal.close();
-                this.load();
-            });
-            comp.onDeletedUser.subscribe(() => {
-                modal.close();
-                this.removeUser(user);
-            });
-        });
-    }
-
-    async events(user: ProviderUserUserDetailsResponse) {
-        const [modal] = await this.modalService.openViewRef(EntityEventsComponent, this.eventsModalRef, comp => {
-            comp.name = this.userNamePipe.transform(user);
-            comp.providerId = this.providerId;
-            comp.entityId = user.id;
-            comp.showUser = false;
-            comp.entity = 'user';
-        });
-    }
-
-    async bulkRemove() {
-        if (this.actionPromise != null) {
-            return;
+      this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+        this.searchText = qParams.search;
+        if (qParams.viewEvents != null) {
+          const user = this.users.filter((u) => u.id === qParams.viewEvents);
+          if (user.length > 0 && user[0].status === ProviderUserStatusType.Confirmed) {
+            this.events(user[0]);
+          }
         }
+      });
+    });
+  }
 
-        const [modal] = await this.modalService.openViewRef(BulkRemoveComponent, this.bulkRemoveModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.users = this.getCheckedUsers();
+  getUsers(): Promise<ListResponse<ProviderUserUserDetailsResponse>> {
+    return this.apiService.getProviderUsers(this.providerId);
+  }
+
+  deleteUser(id: string): Promise<any> {
+    return this.apiService.deleteProviderUser(this.providerId, id);
+  }
+
+  reinviteUser(id: string): Promise<any> {
+    return this.apiService.postProviderUserReinvite(this.providerId, id);
+  }
+
+  async confirmUser(user: ProviderUserUserDetailsResponse, publicKey: Uint8Array): Promise<any> {
+    const providerKey = await this.cryptoService.getProviderKey(this.providerId);
+    const key = await this.cryptoService.rsaEncrypt(providerKey.key, publicKey.buffer);
+    const request = new ProviderUserConfirmRequest();
+    request.key = key.encryptedString;
+    await this.apiService.postProviderUserConfirm(this.providerId, user.id, request);
+  }
+
+  async edit(user: ProviderUserUserDetailsResponse) {
+    const [modal] = await this.modalService.openViewRef(
+      UserAddEditComponent,
+      this.addEditModalRef,
+      (comp) => {
+        comp.name = this.userNamePipe.transform(user);
+        comp.providerId = this.providerId;
+        comp.providerUserId = user != null ? user.id : null;
+        comp.onSavedUser.subscribe(() => {
+          modal.close();
+          this.load();
         });
+        comp.onDeletedUser.subscribe(() => {
+          modal.close();
+          this.removeUser(user);
+        });
+      }
+    );
+  }
 
-        await modal.onClosedPromise();
-        await this.load();
+  async events(user: ProviderUserUserDetailsResponse) {
+    const [modal] = await this.modalService.openViewRef(
+      EntityEventsComponent,
+      this.eventsModalRef,
+      (comp) => {
+        comp.name = this.userNamePipe.transform(user);
+        comp.providerId = this.providerId;
+        comp.entityId = user.id;
+        comp.showUser = false;
+        comp.entity = "user";
+      }
+    );
+  }
+
+  async bulkRemove() {
+    if (this.actionPromise != null) {
+      return;
     }
 
-    async bulkReinvite() {
-        if (this.actionPromise != null) {
-            return;
-        }
+    const [modal] = await this.modalService.openViewRef(
+      BulkRemoveComponent,
+      this.bulkRemoveModalRef,
+      (comp) => {
+        comp.providerId = this.providerId;
+        comp.users = this.getCheckedUsers();
+      }
+    );
 
-        const users = this.getCheckedUsers();
-        const filteredUsers = users.filter(u => u.status === ProviderUserStatusType.Invited);
+    await modal.onClosedPromise();
+    await this.load();
+  }
 
-        if (filteredUsers.length <= 0) {
-            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('noSelectedUsersApplicable'));
-            return;
-        }
-
-        try {
-            const request = new ProviderUserBulkRequest(filteredUsers.map(user => user.id));
-            const response = this.apiService.postManyProviderUserReinvite(this.providerId, request);
-            this.showBulkStatus(users, filteredUsers, response, this.i18nService.t('bulkReinviteMessage'));
-        } catch (e) {
-            this.validationService.showError(e);
-        }
-        this.actionPromise = null;
+  async bulkReinvite() {
+    if (this.actionPromise != null) {
+      return;
     }
 
-    async bulkConfirm() {
-        if (this.actionPromise != null) {
-            return;
-        }
+    const users = this.getCheckedUsers();
+    const filteredUsers = users.filter((u) => u.status === ProviderUserStatusType.Invited);
 
-        const [modal] = await this.modalService.openViewRef(BulkConfirmComponent, this.bulkConfirmModalRef, comp => {
-            comp.providerId = this.providerId;
-            comp.users = this.getCheckedUsers();
-        });
-
-        await modal.onClosedPromise();
-        await this.load();
+    if (filteredUsers.length <= 0) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("noSelectedUsersApplicable")
+      );
+      return;
     }
 
-    private async showBulkStatus(users: ProviderUserUserDetailsResponse[], filteredUsers: ProviderUserUserDetailsResponse[],
-        request: Promise<ListResponse<ProviderUserBulkResponse>>, successfullMessage: string) {
-
-        const [modal, childComponent] = await this.modalService.openViewRef(BulkStatusComponent, this.bulkStatusModalRef, comp => {
-            comp.loading = true;
-        });
-
-        // Workaround to handle closing the modal shortly after it has been opened
-        let close = false;
-        modal.onShown.subscribe(() => {
-            if (close) {
-                modal.close();
-            }
-        });
-
-        try {
-            const response = await request;
-
-            if (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;
-            modal.close();
-        }
+    try {
+      const request = new ProviderUserBulkRequest(filteredUsers.map((user) => user.id));
+      const response = this.apiService.postManyProviderUserReinvite(this.providerId, request);
+      this.showBulkStatus(
+        users,
+        filteredUsers,
+        response,
+        this.i18nService.t("bulkReinviteMessage")
+      );
+    } catch (e) {
+      this.validationService.showError(e);
     }
+    this.actionPromise = null;
+  }
+
+  async bulkConfirm() {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    const [modal] = await this.modalService.openViewRef(
+      BulkConfirmComponent,
+      this.bulkConfirmModalRef,
+      (comp) => {
+        comp.providerId = this.providerId;
+        comp.users = this.getCheckedUsers();
+      }
+    );
+
+    await modal.onClosedPromise();
+    await this.load();
+  }
+
+  private async showBulkStatus(
+    users: ProviderUserUserDetailsResponse[],
+    filteredUsers: ProviderUserUserDetailsResponse[],
+    request: Promise<ListResponse<ProviderUserBulkResponse>>,
+    successfullMessage: string
+  ) {
+    const [modal, childComponent] = await this.modalService.openViewRef(
+      BulkStatusComponent,
+      this.bulkStatusModalRef,
+      (comp) => {
+        comp.loading = true;
+      }
+    );
+
+    // Workaround to handle closing the modal shortly after it has been opened
+    let close = false;
+    modal.onShown.subscribe(() => {
+      if (close) {
+        modal.close();
+      }
+    });
+
+    try {
+      const response = await request;
+
+      if (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;
+      modal.close();
+    }
+  }
 }

bitwarden_license/src/app/providers/manage/user-add-edit.component.html

@@ -1,71 +1,124 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-            <div class="modal-header">
-                <h2 class="modal-title" id="userAddEditTitle">
-                    {{title}}
-                    <small class="text-muted" *ngIf="name">{{name}}</small>
-                </h2>
-                <button type="button" class="close" data-dismiss="modal" appA11yTitle="{{'close' | i18n}}">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                <span class="sr-only">{{'loading' | i18n}}</span>
-            </div>
-            <div class="modal-body" *ngIf="!loading">
-                <ng-container *ngIf="!editMode">
-                    <p>{{'providerInviteUserDesc' | i18n}}</p>
-                    <div class="form-group mb-4">
-                        <label for="emails">{{'email' | i18n}}</label>
-                        <input id="emails" class="form-control" type="text" name="Emails" [(ngModel)]="emails" required
-                            appAutoFocus>
-                        <small class="text-muted">{{'inviteMultipleEmailDesc' | i18n : '20'}}</small>
-                    </div>
-                </ng-container>
-                <h3>
-                    {{'userType' | i18n}}
-                    <a target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
-                        href="https://bitwarden.com/help/article/user-types-access-control/#user-types">
-                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
-                    </a>
-                </h3>
-                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeServiceUser"
-                        [value]="userType.ServiceUser" [(ngModel)]="type">
-                    <label class="form-check-label" for="userTypeServiceUser">
-                        {{'serviceUser' | i18n}}
-                        <small>{{'serviceUserDesc' | i18n}}</small>
-                    </label>
-                </div>
-                <div class="form-check mt-2 form-check-block">
-                    <input class="form-check-input" type="radio" name="userType" id="userTypeProviderAdmin"
-                        [value]="userType.ProviderAdmin" [(ngModel)]="type">
-                    <label class="form-check-label" for="userTypeProviderAdmin">
-                        {{'providerAdmin' | i18n}}
-                        <small>{{'providerAdminDesc' | i18n}}</small>
-                    </label>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                    <span>{{'save' | i18n}}</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-                    {{'cancel' | i18n}}
-                </button>
-                <div class="ml-auto">
-                    <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
-                        [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                    </button>
-                </div>
-            </div>
-        </form>
-    </div>
+  <div 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" id="userAddEditTitle">
+          {{ title }}
+          <small class="text-muted" *ngIf="name">{{ name }}</small>
+        </h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body" *ngIf="loading">
+        <i
+          class="fa fa-spinner fa-spin text-muted"
+          title="{{ 'loading' | i18n }}"
+          aria-hidden="true"
+        ></i>
+        <span class="sr-only">{{ "loading" | i18n }}</span>
+      </div>
+      <div class="modal-body" *ngIf="!loading">
+        <ng-container *ngIf="!editMode">
+          <p>{{ "providerInviteUserDesc" | i18n }}</p>
+          <div class="form-group mb-4">
+            <label for="emails">{{ "email" | i18n }}</label>
+            <input
+              id="emails"
+              class="form-control"
+              type="text"
+              name="Emails"
+              [(ngModel)]="emails"
+              required
+              appAutoFocus
+            />
+            <small class="text-muted">{{ "inviteMultipleEmailDesc" | i18n: "20" }}</small>
+          </div>
+        </ng-container>
+        <h3>
+          {{ "userType" | i18n }}
+          <a
+            target="_blank"
+            rel="noopener"
+            appA11yTitle="{{ 'learnMore' | i18n }}"
+            href="https://bitwarden.com/help/article/user-types-access-control/#user-types"
+          >
+            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          </a>
+        </h3>
+        <div class="form-check mt-2 form-check-block">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="userType"
+            id="userTypeServiceUser"
+            [value]="userType.ServiceUser"
+            [(ngModel)]="type"
+          />
+          <label class="form-check-label" for="userTypeServiceUser">
+            {{ "serviceUser" | i18n }}
+            <small>{{ "serviceUserDesc" | i18n }}</small>
+          </label>
+        </div>
+        <div class="form-check mt-2 form-check-block">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="userType"
+            id="userTypeProviderAdmin"
+            [value]="userType.ProviderAdmin"
+            [(ngModel)]="type"
+          />
+          <label class="form-check-label" for="userTypeProviderAdmin">
+            {{ "providerAdmin" | i18n }}
+            <small>{{ "providerAdminDesc" | i18n }}</small>
+          </label>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <span>{{ "save" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "cancel" | i18n }}
+        </button>
+        <div class="ml-auto">
+          <button
+            #deleteBtn
+            type="button"
+            (click)="delete()"
+            class="btn btn-outline-danger"
+            appA11yTitle="{{ 'delete' | i18n }}"
+            *ngIf="editMode"
+            [disabled]="deleteBtn.loading"
+            [appApiAction]="deletePromise"
+          >
+            <i
+              class="fa fa-trash-o fa-lg fa-fw"
+              [hidden]="deleteBtn.loading"
+              aria-hidden="true"
+            ></i>
+            <i
+              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              [hidden]="!deleteBtn.loading"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
 </div>

bitwarden_license/src/app/providers/manage/user-add-edit.component.ts

@@ -1,109 +1,121 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnInit,
-    Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { ProviderUserInviteRequest } from 'jslib-common/models/request/provider/providerUserInviteRequest';
+import { ProviderUserInviteRequest } from "jslib-common/models/request/provider/providerUserInviteRequest";
 
-import { PermissionsApi } from 'jslib-common/models/api/permissionsApi';
+import { PermissionsApi } from "jslib-common/models/api/permissionsApi";
 
-import { ProviderUserType } from 'jslib-common/enums/providerUserType';
-import { ProviderUserUpdateRequest } from 'jslib-common/models/request/provider/providerUserUpdateRequest';
+import { ProviderUserType } from "jslib-common/enums/providerUserType";
+import { ProviderUserUpdateRequest } from "jslib-common/models/request/provider/providerUserUpdateRequest";
 
 @Component({
-    selector: 'provider-user-add-edit',
-    templateUrl: 'user-add-edit.component.html',
+  selector: "provider-user-add-edit",
+  templateUrl: "user-add-edit.component.html",
 })
 export class UserAddEditComponent implements OnInit {
-    @Input() name: string;
-    @Input() providerUserId: string;
-    @Input() providerId: string;
-    @Output() onSavedUser = new EventEmitter();
-    @Output() onDeletedUser = new EventEmitter();
+  @Input() name: string;
+  @Input() providerUserId: string;
+  @Input() providerId: string;
+  @Output() onSavedUser = new EventEmitter();
+  @Output() onDeletedUser = new EventEmitter();
 
-    loading = true;
-    editMode: boolean = false;
-    title: string;
-    emails: string;
-    type: ProviderUserType = ProviderUserType.ServiceUser;
-    permissions = new PermissionsApi();
-    showCustom = false;
-    access: 'all' | 'selected' = 'selected';
-    formPromise: Promise<any>;
-    deletePromise: Promise<any>;
-    userType = ProviderUserType;
+  loading = true;
+  editMode: boolean = false;
+  title: string;
+  emails: string;
+  type: ProviderUserType = ProviderUserType.ServiceUser;
+  permissions = new PermissionsApi();
+  showCustom = false;
+  access: "all" | "selected" = "selected";
+  formPromise: Promise<any>;
+  deletePromise: Promise<any>;
+  userType = ProviderUserType;
 
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private logService: LogService) { }
+  constructor(
+    private apiService: ApiService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private logService: LogService
+  ) {}
 
-    async ngOnInit() {
-        this.editMode = this.loading = this.providerUserId != null;
+  async ngOnInit() {
+    this.editMode = this.loading = this.providerUserId != null;
 
-        if (this.editMode) {
-            this.editMode = true;
-            this.title = this.i18nService.t('editUser');
-            try {
-                const user = await this.apiService.getProviderUser(this.providerId, this.providerUserId);
-                this.type = user.type;
-            } catch (e) {
-                this.logService.error(e);
-            }
-        } else {
-            this.title = this.i18nService.t('inviteUser');
-        }
-
-        this.loading = false;
+    if (this.editMode) {
+      this.editMode = true;
+      this.title = this.i18nService.t("editUser");
+      try {
+        const user = await this.apiService.getProviderUser(this.providerId, this.providerUserId);
+        this.type = user.type;
+      } catch (e) {
+        this.logService.error(e);
+      }
+    } else {
+      this.title = this.i18nService.t("inviteUser");
     }
 
-    async submit() {
-        try {
-            if (this.editMode) {
-                const request = new ProviderUserUpdateRequest();
-                request.type = this.type;
-                this.formPromise = this.apiService.putProviderUser(this.providerId, this.providerUserId, request);
-            } else {
-                const request = new ProviderUserInviteRequest();
-                request.emails = this.emails.trim().split(/\s*,\s*/);
-                request.type = this.type;
-                this.formPromise = this.apiService.postProviderUserInvite(this.providerId, request);
-            }
-            await this.formPromise;
-            this.platformUtilsService.showToast('success', null,
-                this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
-            this.onSavedUser.emit();
-        } catch (e) {
-            this.logService.error(e);
-        }
+    this.loading = false;
+  }
+
+  async submit() {
+    try {
+      if (this.editMode) {
+        const request = new ProviderUserUpdateRequest();
+        request.type = this.type;
+        this.formPromise = this.apiService.putProviderUser(
+          this.providerId,
+          this.providerUserId,
+          request
+        );
+      } else {
+        const request = new ProviderUserInviteRequest();
+        request.emails = this.emails.trim().split(/\s*,\s*/);
+        request.type = this.type;
+        this.formPromise = this.apiService.postProviderUserInvite(this.providerId, request);
+      }
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.name)
+      );
+      this.onSavedUser.emit();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async delete() {
+    if (!this.editMode) {
+      return;
     }
 
-    async delete() {
-        if (!this.editMode) {
-            return;
-        }
-
-        const confirmed = await this.platformUtilsService.showDialog(
-            this.i18nService.t('removeUserConfirmation'), this.name,
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-        if (!confirmed) {
-            return false;
-        }
-
-        try {
-            this.deletePromise = this.apiService.deleteProviderUser(this.providerId, this.providerUserId);
-            await this.deletePromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('removedUserId', this.name));
-            this.onDeletedUser.emit();
-        } catch (e) {
-            this.logService.error(e);
-        }
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.i18nService.t("removeUserConfirmation"),
+      this.name,
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+    if (!confirmed) {
+      return false;
     }
 
+    try {
+      this.deletePromise = this.apiService.deleteProviderUser(this.providerId, this.providerUserId);
+      await this.deletePromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("removedUserId", this.name)
+      );
+      this.onDeletedUser.emit();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
 }

bitwarden_license/src/app/providers/providers-layout.component.html

@@ -1,44 +1,44 @@
 <app-navbar></app-navbar>
 <div class="org-nav" *ngIf="provider">
-    <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]="provider.name" size="45" [circle]="true"></app-avatar>
-                <div class="org-name ml-3">
-                    <span>{{provider.name}}</span>
-                    <small class="text-muted">{{'provider' | i18n}}</small>
-                </div>
-                <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!provider.enabled">
-                    <div class="card-body py-2">
-                        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-                        {{'providerIsDisabled' | i18n}}
-                    </div>
-                </div>
-            </div>
-            <ul class="nav nav-tabs" *ngIf="showMenuBar">
-                <li class="nav-item">
-                    <a class="nav-link" routerLink="clients" routerLinkActive="active">
-                        <i class="fa fa-university" aria-hidden="true"></i>
-                        {{'clients' | 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="showSettingsTab">
-                    <a class="nav-link" routerLink="settings" routerLinkActive="active">
-                        <i class="fa fa-cogs" aria-hidden="true"></i>
-                        {{'settings' | i18n}}
-                    </a>
-                </li>
-            </ul>
+  <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]="provider.name" size="45" [circle]="true"></app-avatar>
+        <div class="org-name ml-3">
+          <span>{{ provider.name }}</span>
+          <small class="text-muted">{{ "provider" | i18n }}</small>
         </div>
+        <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!provider.enabled">
+          <div class="card-body py-2">
+            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            {{ "providerIsDisabled" | i18n }}
+          </div>
+        </div>
+      </div>
+      <ul class="nav nav-tabs" *ngIf="showMenuBar">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="clients" routerLinkActive="active">
+            <i class="fa fa-university" aria-hidden="true"></i>
+            {{ "clients" | 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="showSettingsTab">
+          <a class="nav-link" routerLink="settings" routerLinkActive="active">
+            <i class="fa fa-cogs" aria-hidden="true"></i>
+            {{ "settings" | i18n }}
+          </a>
+        </li>
+      </ul>
     </div>
+  </div>
 </div>
 <div class="container page-content">
-    <router-outlet></router-outlet>
+  <router-outlet></router-outlet>
 </div>
 <app-footer></app-footer>

bitwarden_license/src/app/providers/providers-layout.component.ts

@@ -1,51 +1,50 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
-import { Provider } from 'jslib-common/models/domain/provider';
+import { Provider } from "jslib-common/models/domain/provider";
 
 @Component({
-    selector: 'providers-layout',
-    templateUrl: 'providers-layout.component.html',
+  selector: "providers-layout",
+  templateUrl: "providers-layout.component.html",
 })
 export class ProvidersLayoutComponent {
+  provider: Provider;
+  private providerId: string;
 
-    provider: Provider;
-    private providerId: string;
+  constructor(private route: ActivatedRoute, private providerService: ProviderService) {}
 
-    constructor(private route: ActivatedRoute, private providerService: ProviderService) { }
+  ngOnInit() {
+    document.body.classList.remove("layout_frontend");
+    this.route.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+      await this.load();
+    });
+  }
 
-    ngOnInit() {
-        document.body.classList.remove('layout_frontend');
-        this.route.params.subscribe(async params => {
-            this.providerId = params.providerId;
-            await this.load();
-        });
-    }
-
-    async load() {
-        this.provider = await this.providerService.get(this.providerId);
-    }
-
-    get showMenuBar() {
-        return this.showManageTab || this.showSettingsTab;
-    }
-
-    get showManageTab() {
-        return this.provider.canManageUsers || this.provider.canAccessEventLogs;
-    }
-
-    get showSettingsTab() {
-        return this.provider.isProviderAdmin;
-    }
-
-    get manageRoute(): string {
-        switch (true) {
-            case this.provider.canManageUsers:
-                return 'manage/people';
-            case this.provider.canAccessEventLogs:
-                return 'manage/events';
-        }
+  async load() {
+    this.provider = await this.providerService.get(this.providerId);
+  }
+
+  get showMenuBar() {
+    return this.showManageTab || this.showSettingsTab;
+  }
+
+  get showManageTab() {
+    return this.provider.canManageUsers || this.provider.canAccessEventLogs;
+  }
+
+  get showSettingsTab() {
+    return this.provider.isProviderAdmin;
+  }
+
+  get manageRoute(): string {
+    switch (true) {
+      case this.provider.canManageUsers:
+        return "manage/people";
+      case this.provider.canAccessEventLogs:
+        return "manage/events";
     }
+  }
 }

bitwarden_license/src/app/providers/providers-routing.module.ts

@@ -1,123 +1,123 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
 
-import { AuthGuardService } from 'jslib-angular/services/auth-guard.service';
-import { Permissions } from 'jslib-common/enums/permissions';
+import { AuthGuardService } from "jslib-angular/services/auth-guard.service";
+import { Permissions } from "jslib-common/enums/permissions";
 
-import { AddOrganizationComponent } from './clients/add-organization.component';
-import { ClientsComponent } from './clients/clients.component';
-import { CreateOrganizationComponent } from './clients/create-organization.component';
-import { AcceptProviderComponent } from './manage/accept-provider.component';
-import { EventsComponent } from './manage/events.component';
-import { ManageComponent } from './manage/manage.component';
-import { PeopleComponent } from './manage/people.component';
-import { ProvidersLayoutComponent } from './providers-layout.component';
-import { SettingsComponent } from './settings/settings.component';
-import { SetupProviderComponent } from './setup/setup-provider.component';
-import { SetupComponent } from './setup/setup.component';
+import { AddOrganizationComponent } from "./clients/add-organization.component";
+import { ClientsComponent } from "./clients/clients.component";
+import { CreateOrganizationComponent } from "./clients/create-organization.component";
+import { AcceptProviderComponent } from "./manage/accept-provider.component";
+import { EventsComponent } from "./manage/events.component";
+import { ManageComponent } from "./manage/manage.component";
+import { PeopleComponent } from "./manage/people.component";
+import { ProvidersLayoutComponent } from "./providers-layout.component";
+import { SettingsComponent } from "./settings/settings.component";
+import { SetupProviderComponent } from "./setup/setup-provider.component";
+import { SetupComponent } from "./setup/setup.component";
 
-import { FrontendLayoutComponent } from 'src/app/layouts/frontend-layout.component';
+import { FrontendLayoutComponent } from "src/app/layouts/frontend-layout.component";
 
-import { ProvidersComponent } from 'src/app/providers/providers.component';
-import { ProviderGuardService } from './services/provider-guard.service';
-import { ProviderTypeGuardService } from './services/provider-type-guard.service';
-import { AccountComponent } from './settings/account.component';
+import { ProvidersComponent } from "src/app/providers/providers.component";
+import { ProviderGuardService } from "./services/provider-guard.service";
+import { ProviderTypeGuardService } from "./services/provider-type-guard.service";
+import { AccountComponent } from "./settings/account.component";
 
 const routes: Routes = [
-    {
-        path: '',
-        canActivate: [AuthGuardService],
-        component: ProvidersComponent,
-    },
-    {
-        path: '',
-        component: FrontendLayoutComponent,
+  {
+    path: "",
+    canActivate: [AuthGuardService],
+    component: ProvidersComponent,
+  },
+  {
+    path: "",
+    component: FrontendLayoutComponent,
+    children: [
+      {
+        path: "setup-provider",
+        component: SetupProviderComponent,
+        data: { titleId: "setupProvider" },
+      },
+      {
+        path: "accept-provider",
+        component: AcceptProviderComponent,
+        data: { titleId: "acceptProvider" },
+      },
+    ],
+  },
+  {
+    path: "",
+    canActivate: [AuthGuardService],
+    children: [
+      {
+        path: "setup",
+        component: SetupComponent,
+      },
+      {
+        path: ":providerId",
+        component: ProvidersLayoutComponent,
+        canActivate: [ProviderGuardService],
         children: [
-            {
-                path: 'setup-provider',
-                component: SetupProviderComponent,
-                data: { titleId: 'setupProvider' },
-            },
-            {
-                path: 'accept-provider',
-                component: AcceptProviderComponent,
-                data: { titleId: 'acceptProvider' },
-            },
+          { path: "", pathMatch: "full", redirectTo: "clients" },
+          { path: "clients/create", component: CreateOrganizationComponent },
+          { path: "clients", component: ClientsComponent, data: { titleId: "clients" } },
+          {
+            path: "manage",
+            component: ManageComponent,
+            children: [
+              {
+                path: "",
+                pathMatch: "full",
+                redirectTo: "people",
+              },
+              {
+                path: "people",
+                component: PeopleComponent,
+                canActivate: [ProviderTypeGuardService],
+                data: {
+                  titleId: "people",
+                  permissions: [Permissions.ManageUsers],
+                },
+              },
+              {
+                path: "events",
+                component: EventsComponent,
+                canActivate: [ProviderTypeGuardService],
+                data: {
+                  titleId: "eventLogs",
+                  permissions: [Permissions.AccessEventLogs],
+                },
+              },
+            ],
+          },
+          {
+            path: "settings",
+            component: SettingsComponent,
+            children: [
+              {
+                path: "",
+                pathMatch: "full",
+                redirectTo: "account",
+              },
+              {
+                path: "account",
+                component: AccountComponent,
+                canActivate: [ProviderTypeGuardService],
+                data: {
+                  titleId: "myProvider",
+                  permissions: [Permissions.ManageProvider],
+                },
+              },
+            ],
+          },
         ],
-    },
-    {
-        path: '',
-        canActivate: [AuthGuardService],
-        children: [
-            {
-                path: 'setup',
-                component: SetupComponent,
-            },
-            {
-                path: ':providerId',
-                component: ProvidersLayoutComponent,
-                canActivate: [ProviderGuardService],
-                children: [
-                    { path: '', pathMatch: 'full', redirectTo: 'clients' },
-                    { path: 'clients/create', component: CreateOrganizationComponent },
-                    { path: 'clients', component: ClientsComponent, data: { titleId: 'clients' } },
-                    {
-                        path: 'manage',
-                        component: ManageComponent,
-                        children: [
-                            {
-                                path: '',
-                                pathMatch: 'full',
-                                redirectTo: 'people',
-                            },
-                            {
-                                path: 'people',
-                                component: PeopleComponent,
-                                canActivate: [ProviderTypeGuardService],
-                                data: {
-                                    titleId: 'people',
-                                    permissions: [Permissions.ManageUsers],
-                                },
-                            },
-                            {
-                                path: 'events',
-                                component: EventsComponent,
-                                canActivate: [ProviderTypeGuardService],
-                                data: {
-                                    titleId: 'eventLogs',
-                                    permissions: [Permissions.AccessEventLogs],
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        path: 'settings',
-                        component: SettingsComponent,
-                        children: [
-                            {
-                                path: '',
-                                pathMatch: 'full',
-                                redirectTo: 'account',
-                            },
-                            {
-                                path: 'account',
-                                component: AccountComponent,
-                                canActivate: [ProviderTypeGuardService],
-                                data: {
-                                    titleId: 'myProvider',
-                                    permissions: [Permissions.ManageProvider],
-                                },
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    },
+      },
+    ],
+  },
 ];
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class ProvidersRoutingModule { }
+export class ProvidersRoutingModule {}

bitwarden_license/src/app/providers/providers.module.ts

@@ -1,69 +1,63 @@
-import { CommonModule } from '@angular/common';
-import { ComponentFactoryResolver } from '@angular/core';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { CommonModule } from "@angular/common";
+import { ComponentFactoryResolver } from "@angular/core";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
 
-import { ModalService } from 'jslib-angular/services/modal.service';
+import { ModalService } from "jslib-angular/services/modal.service";
 
-import { ProviderGuardService } from './services/provider-guard.service';
-import { ProviderTypeGuardService } from './services/provider-type-guard.service';
-import { WebProviderService } from './services/webProvider.service';
+import { ProviderGuardService } from "./services/provider-guard.service";
+import { ProviderTypeGuardService } from "./services/provider-type-guard.service";
+import { WebProviderService } from "./services/webProvider.service";
 
-import { ProvidersLayoutComponent } from './providers-layout.component';
-import { ProvidersRoutingModule } from './providers-routing.module';
+import { ProvidersLayoutComponent } from "./providers-layout.component";
+import { ProvidersRoutingModule } from "./providers-routing.module";
 
-import { AddOrganizationComponent } from './clients/add-organization.component';
-import { ClientsComponent } from './clients/clients.component';
-import { CreateOrganizationComponent } from './clients/create-organization.component';
+import { AddOrganizationComponent } from "./clients/add-organization.component";
+import { ClientsComponent } from "./clients/clients.component";
+import { CreateOrganizationComponent } from "./clients/create-organization.component";
 
-import { AcceptProviderComponent } from './manage/accept-provider.component';
-import { BulkConfirmComponent } from './manage/bulk/bulk-confirm.component';
-import { BulkRemoveComponent } from './manage/bulk/bulk-remove.component';
-import { EventsComponent } from './manage/events.component';
-import { ManageComponent } from './manage/manage.component';
-import { PeopleComponent } from './manage/people.component';
-import { UserAddEditComponent } from './manage/user-add-edit.component';
+import { AcceptProviderComponent } from "./manage/accept-provider.component";
+import { BulkConfirmComponent } from "./manage/bulk/bulk-confirm.component";
+import { BulkRemoveComponent } from "./manage/bulk/bulk-remove.component";
+import { EventsComponent } from "./manage/events.component";
+import { ManageComponent } from "./manage/manage.component";
+import { PeopleComponent } from "./manage/people.component";
+import { UserAddEditComponent } from "./manage/user-add-edit.component";
 
-import { AccountComponent } from './settings/account.component';
-import { SettingsComponent } from './settings/settings.component';
+import { AccountComponent } from "./settings/account.component";
+import { SettingsComponent } from "./settings/settings.component";
 
-import { SetupProviderComponent } from './setup/setup-provider.component';
-import { SetupComponent } from './setup/setup.component';
+import { SetupProviderComponent } from "./setup/setup-provider.component";
+import { SetupComponent } from "./setup/setup.component";
 
-import { OssModule } from 'src/app/oss.module';
+import { OssModule } from "src/app/oss.module";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        FormsModule,
-        OssModule,
-        ProvidersRoutingModule,
-    ],
-    declarations: [
-        AcceptProviderComponent,
-        AccountComponent,
-        AddOrganizationComponent,
-        BulkConfirmComponent,
-        BulkRemoveComponent,
-        ClientsComponent,
-        CreateOrganizationComponent,
-        EventsComponent,
-        ManageComponent,
-        PeopleComponent,
-        ProvidersLayoutComponent,
-        SettingsComponent,
-        SetupComponent,
-        SetupProviderComponent,
-        UserAddEditComponent,
-    ],
-    providers: [
-        WebProviderService,
-        ProviderGuardService,
-        ProviderTypeGuardService,
-    ],
+  imports: [CommonModule, FormsModule, OssModule, ProvidersRoutingModule],
+  declarations: [
+    AcceptProviderComponent,
+    AccountComponent,
+    AddOrganizationComponent,
+    BulkConfirmComponent,
+    BulkRemoveComponent,
+    ClientsComponent,
+    CreateOrganizationComponent,
+    EventsComponent,
+    ManageComponent,
+    PeopleComponent,
+    ProvidersLayoutComponent,
+    SettingsComponent,
+    SetupComponent,
+    SetupProviderComponent,
+    UserAddEditComponent,
+  ],
+  providers: [WebProviderService, ProviderGuardService, ProviderTypeGuardService],
 })
 export class ProvidersModule {
-    constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {
-        modalService.registerComponentFactoryResolver(AddOrganizationComponent, componentFactoryResolver);
-    }
+  constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {
+    modalService.registerComponentFactoryResolver(
+      AddOrganizationComponent,
+      componentFactoryResolver
+    );
+  }
 }

bitwarden_license/src/app/providers/services/provider-guard.service.ts

@@ -1,35 +1,31 @@
-import { Injectable } from '@angular/core';
-import {
-    ActivatedRouteSnapshot,
-    CanActivate,
-    Router,
-} from '@angular/router';
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
 
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
 @Injectable()
 export class ProviderGuardService implements CanActivate {
-    constructor(
-        private router: Router,
-        private platformUtilsService: PlatformUtilsService,
-        private i18nService: I18nService,
-        private providerService: ProviderService,
-    ) { }
+  constructor(
+    private router: Router,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private providerService: ProviderService
+  ) {}
 
-    async canActivate(route: ActivatedRouteSnapshot) {
-        const provider = await this.providerService.get(route.params.providerId);
-        if (provider == null) {
-            this.router.navigate(['/']);
-            return false;
-        }
-        if (!provider.isProviderAdmin && !provider.enabled) {
-            this.platformUtilsService.showToast('error', null, this.i18nService.t('providerIsDisabled'));
-            this.router.navigate(['/']);
-            return false;
-        }
-
-        return true;
+  async canActivate(route: ActivatedRouteSnapshot) {
+    const provider = await this.providerService.get(route.params.providerId);
+    if (provider == null) {
+      this.router.navigate(["/"]);
+      return false;
     }
+    if (!provider.isProviderAdmin && !provider.enabled) {
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("providerIsDisabled"));
+      this.router.navigate(["/"]);
+      return false;
+    }
+
+    return true;
+  }
 }

bitwarden_license/src/app/providers/services/provider-type-guard.service.ts

@@ -1,31 +1,27 @@
-import { Injectable } from '@angular/core';
-import {
-    ActivatedRouteSnapshot,
-    CanActivate,
-    Router,
-} from '@angular/router';
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
 
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
-import { Permissions } from 'jslib-common/enums/permissions';
+import { Permissions } from "jslib-common/enums/permissions";
 
 @Injectable()
 export class ProviderTypeGuardService implements CanActivate {
-    constructor(private providerService: ProviderService, private router: Router) { }
+  constructor(private providerService: ProviderService, private router: Router) {}
 
-    async canActivate(route: ActivatedRouteSnapshot) {
-        const provider = await this.providerService.get(route.params.providerId);
-        const permissions = route.data == null ? null : route.data.permissions as Permissions[];
+  async canActivate(route: ActivatedRouteSnapshot) {
+    const provider = await this.providerService.get(route.params.providerId);
+    const permissions = route.data == null ? null : (route.data.permissions as Permissions[]);
 
-        if (
-            (permissions.indexOf(Permissions.AccessEventLogs) !== -1 && provider.canAccessEventLogs) ||
-            (permissions.indexOf(Permissions.ManageProvider) !== -1 && provider.isProviderAdmin) ||
-            (permissions.indexOf(Permissions.ManageUsers) !== -1 && provider.canManageUsers)
-        ) {
-            return true;
-        }
-
-        this.router.navigate(['/providers', provider.id]);
-        return false;
+    if (
+      (permissions.indexOf(Permissions.AccessEventLogs) !== -1 && provider.canAccessEventLogs) ||
+      (permissions.indexOf(Permissions.ManageProvider) !== -1 && provider.isProviderAdmin) ||
+      (permissions.indexOf(Permissions.ManageUsers) !== -1 && provider.canManageUsers)
+    ) {
+      return true;
     }
+
+    this.router.navigate(["/providers", provider.id]);
+    return false;
+  }
 }

bitwarden_license/src/app/providers/services/webProvider.service.ts

@@ -1,32 +1,36 @@
-import { Injectable } from '@angular/core';
+import { Injectable } from "@angular/core";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
 
-import { ProviderAddOrganizationRequest } from 'jslib-common/models/request/provider/providerAddOrganizationRequest';
+import { ProviderAddOrganizationRequest } from "jslib-common/models/request/provider/providerAddOrganizationRequest";
 
 @Injectable()
 export class WebProviderService {
-    constructor(private cryptoService: CryptoService, private syncService: SyncService, private apiService: ApiService) {}
+  constructor(
+    private cryptoService: CryptoService,
+    private syncService: SyncService,
+    private apiService: ApiService
+  ) {}
 
-    async addOrganizationToProvider(providerId: string, organizationId: string) {
-        const orgKey = await this.cryptoService.getOrgKey(organizationId);
-        const providerKey = await this.cryptoService.getProviderKey(providerId);
+  async addOrganizationToProvider(providerId: string, organizationId: string) {
+    const orgKey = await this.cryptoService.getOrgKey(organizationId);
+    const providerKey = await this.cryptoService.getProviderKey(providerId);
 
-        const encryptedOrgKey = await this.cryptoService.encrypt(orgKey.key, providerKey);
+    const encryptedOrgKey = await this.cryptoService.encrypt(orgKey.key, providerKey);
 
-        const request = new ProviderAddOrganizationRequest();
-        request.organizationId = organizationId;
-        request.key = encryptedOrgKey.encryptedString;
+    const request = new ProviderAddOrganizationRequest();
+    request.organizationId = organizationId;
+    request.key = encryptedOrgKey.encryptedString;
 
-        const response = await this.apiService.postProviderAddOrganization(providerId, request);
-        await this.syncService.fullSync(true);
-        return response;
-    }
+    const response = await this.apiService.postProviderAddOrganization(providerId, request);
+    await this.syncService.fullSync(true);
+    return response;
+  }
 
-    async detachOrganizastion(providerId: string, organizationId: string): Promise<any> {
-        await this.apiService.deleteProviderOrganization(providerId, organizationId);
-        await this.syncService.fullSync(true);
-    }
+  async detachOrganizastion(providerId: string, organizationId: string): Promise<any> {
+    await this.apiService.deleteProviderOrganization(providerId, organizationId);
+    await this.syncService.fullSync(true);
+  }
 }

bitwarden_license/src/app/providers/settings/account.component.html

@@ -1,30 +1,48 @@
 <div class="page-header">
-    <h1>{{'myProvider' | i18n}}</h1>
+  <h1>{{ "myProvider" | i18n }}</h1>
 </div>
 <div *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>
+  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
-<form *ngIf="provider && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-    <div class="row">
-        <div class="col-6">
-            <div class="form-group">
-                <label for="name">{{'providerName' | i18n}}</label>
-                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="provider.name"
-                    [disabled]="selfHosted">
-            </div>
-            <div class="form-group">
-                <label for="billingEmail">{{'billingEmail' | i18n}}</label>
-                <input id="billingEmail" class="form-control" type="text" name="BillingEmail"
-                    [(ngModel)]="provider.billingEmail" [disabled]="selfHosted">
-            </div>
-        </div>
-        <div class="col-6">
-            <app-avatar data="{{provider.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
-        </div>
+<form
+  *ngIf="provider && !loading"
+  #form
+  (ngSubmit)="submit()"
+  [appApiAction]="formPromise"
+  ngNativeValidate
+>
+  <div class="row">
+    <div class="col-6">
+      <div class="form-group">
+        <label for="name">{{ "providerName" | i18n }}</label>
+        <input
+          id="name"
+          class="form-control"
+          type="text"
+          name="Name"
+          [(ngModel)]="provider.name"
+          [disabled]="selfHosted"
+        />
+      </div>
+      <div class="form-group">
+        <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
+        <input
+          id="billingEmail"
+          class="form-control"
+          type="text"
+          name="BillingEmail"
+          [(ngModel)]="provider.billingEmail"
+          [disabled]="selfHosted"
+        />
+      </div>
     </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-        <span>{{'save' | i18n}}</span>
-    </button>
+    <div class="col-6">
+      <app-avatar data="{{ provider.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <span>{{ "save" | i18n }}</span>
+  </button>
 </form>

bitwarden_license/src/app/providers/settings/account.component.ts

@@ -1,60 +1,65 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
 
-import { ProviderUpdateRequest } from 'jslib-common/models/request/provider/providerUpdateRequest';
+import { ProviderUpdateRequest } from "jslib-common/models/request/provider/providerUpdateRequest";
 
-import { ProviderResponse } from 'jslib-common/models/response/provider/providerResponse';
+import { ProviderResponse } from "jslib-common/models/response/provider/providerResponse";
 
 @Component({
-    selector: 'provider-account',
-    templateUrl: 'account.component.html',
+  selector: "provider-account",
+  templateUrl: "account.component.html",
 })
 export class AccountComponent {
-    selfHosted = false;
-    loading = true;
-    provider: ProviderResponse;
-    formPromise: Promise<any>;
-    taxFormPromise: Promise<any>;
+  selfHosted = false;
+  loading = true;
+  provider: ProviderResponse;
+  formPromise: Promise<any>;
+  taxFormPromise: Promise<any>;
 
-    private providerId: string;
+  private providerId: string;
 
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private route: ActivatedRoute, private syncService: SyncService,
-        private platformUtilsService: PlatformUtilsService, private logService: LogService) { }
+  constructor(
+    private apiService: ApiService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private syncService: SyncService,
+    private platformUtilsService: PlatformUtilsService,
+    private logService: LogService
+  ) {}
 
-    async ngOnInit() {
-        this.selfHosted = this.platformUtilsService.isSelfHost();
-        this.route.parent.parent.params.subscribe(async params => {
-            this.providerId = params.providerId;
-            try {
-                this.provider = await this.apiService.getProvider(this.providerId);
-            } catch (e) {
-                this.logService.error(`Handled exception: ${e}`);
-            }
-        });
-        this.loading = false;
-    }
-
-    async submit() {
-        try {
-            const request = new ProviderUpdateRequest();
-            request.name = this.provider.name;
-            request.businessName = this.provider.businessName;
-            request.billingEmail = this.provider.billingEmail;
-
-            this.formPromise = this.apiService.putProvider(this.providerId, request).then(() => {
-                return this.syncService.fullSync(true);
-            });
-            await this.formPromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('providerUpdated'));
-        } catch (e) {
-            this.logService.error(`Handled exception: ${e}`);
-        }
+  async ngOnInit() {
+    this.selfHosted = this.platformUtilsService.isSelfHost();
+    this.route.parent.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+      try {
+        this.provider = await this.apiService.getProvider(this.providerId);
+      } catch (e) {
+        this.logService.error(`Handled exception: ${e}`);
+      }
+    });
+    this.loading = false;
+  }
+
+  async submit() {
+    try {
+      const request = new ProviderUpdateRequest();
+      request.name = this.provider.name;
+      request.businessName = this.provider.businessName;
+      request.billingEmail = this.provider.billingEmail;
+
+      this.formPromise = this.apiService.putProvider(this.providerId, request).then(() => {
+        return this.syncService.fullSync(true);
+      });
+      await this.formPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("providerUpdated"));
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
     }
+  }
 }

bitwarden_license/src/app/providers/settings/settings.component.html

@@ -1,17 +1,17 @@
 <div class="container page-content">
-    <div class="row">
-        <div class="col-3">
-            <div class="card">
-                <div class="card-header">{{'settings' | i18n}}</div>
-                <div class="list-group list-group-flush">
-                    <a routerLink="account" class="list-group-item" routerLinkActive="active">
-                        {{'myProvider' | i18n}}
-                    </a>
-                </div>
-            </div>
-        </div>
-        <div class="col-9">
-            <router-outlet></router-outlet>
+  <div class="row">
+    <div class="col-3">
+      <div class="card">
+        <div class="card-header">{{ "settings" | i18n }}</div>
+        <div class="list-group list-group-flush">
+          <a routerLink="account" class="list-group-item" routerLinkActive="active">
+            {{ "myProvider" | i18n }}
+          </a>
         </div>
+      </div>
     </div>
+    <div class="col-9">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
 </div>

bitwarden_license/src/app/providers/settings/settings.component.ts

@@ -1,20 +1,23 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { ProviderService } from 'jslib-common/abstractions/provider.service';
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { ProviderService } from "jslib-common/abstractions/provider.service";
 
 @Component({
-    selector: 'provider-settings',
-    templateUrl: 'settings.component.html',
+  selector: "provider-settings",
+  templateUrl: "settings.component.html",
 })
 export class SettingsComponent {
-    constructor(private route: ActivatedRoute, private providerService: ProviderService,
-        private platformUtilsService: PlatformUtilsService) { }
+  constructor(
+    private route: ActivatedRoute,
+    private providerService: ProviderService,
+    private platformUtilsService: PlatformUtilsService
+  ) {}
 
-    ngOnInit() {
-        this.route.parent.params.subscribe(async params => {
-            const provider = await this.providerService.get(params.providerId);
-        });
-    }
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      const provider = await this.providerService.get(params.providerId);
+    });
+  }
 }

bitwarden_license/src/app/providers/setup/setup-provider.component.html

@@ -1,27 +1,31 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
-    <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
-        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span class="sr-only">{{'loading' | i18n}}</span>
-        </p>
-    </div>
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="fa fa-spinner fa-spin fa-2x text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="sr-only">{{ "loading" | i18n }}</span>
+    </p>
+  </div>
 </div>
 <div class="container" *ngIf="!loading && !authed">
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <p class="lead text-center mb-4">{{'setupProvider' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <p>{{'setupProviderLoginDesc' | i18n}}</p>
-                    <hr>
-                    <div class="d-flex">
-                        <a routerLink="/" [queryParams]="{email: email}" class="btn btn-primary btn-block">
-                            {{'logIn' | i18n}}
-                        </a>
-                    </div>
-                </div>
-            </div>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "setupProvider" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <p>{{ "setupProviderLoginDesc" | i18n }}</p>
+          <hr />
+          <div class="d-flex">
+            <a routerLink="/" [queryParams]="{ email: email }" class="btn btn-primary btn-block">
+              {{ "logIn" | i18n }}
+            </a>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>

bitwarden_license/src/app/providers/setup/setup-provider.component.ts

@@ -1,22 +1,21 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { BaseAcceptComponent } from 'src/app/common/base.accept.component';
+import { BaseAcceptComponent } from "src/app/common/base.accept.component";
 
 @Component({
-    selector: 'app-setup-provider',
-    templateUrl: 'setup-provider.component.html',
+  selector: "app-setup-provider",
+  templateUrl: "setup-provider.component.html",
 })
 export class SetupProviderComponent extends BaseAcceptComponent {
+  failedShortMessage = "inviteAcceptFailedShort";
+  failedMessage = "inviteAcceptFailed";
 
-    failedShortMessage = 'inviteAcceptFailedShort';
-    failedMessage = 'inviteAcceptFailed';
+  requiredParameters = ["providerId", "email", "token"];
 
-    requiredParameters = ['providerId', 'email', 'token'];
+  async authedHandler(qParams: any) {
+    this.router.navigate(["/providers/setup"], { queryParams: qParams });
+  }
 
-    async authedHandler(qParams: any) {
-        this.router.navigate(['/providers/setup'], {queryParams: qParams});
-    }
-
-    // tslint:disable-next-line
-    async unauthedHandler(qParams: any) {}
+  // tslint:disable-next-line
+  async unauthedHandler(qParams: any) {}
 }

bitwarden_license/src/app/providers/setup/setup.component.html

@@ -1,32 +1,39 @@
 <app-navbar></app-navbar>
 <div class="container page-content">
-    <div class="page-header">
-        <h1>{{'setupProvider' | i18n}}</h1>
+  <div class="page-header">
+    <h1>{{ "setupProvider" | i18n }}</h1>
+  </div>
+  <p>{{ "setupProviderDesc" | i18n }}</p>
+
+  <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
+    <h2 class="mt-5">{{ "generalInformation" | i18n }}</h2>
+    <div class="row">
+      <div class="form-group col-6">
+        <label for="name">{{ "providerName" | i18n }}</label>
+        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required />
+      </div>
+      <div class="form-group col-6">
+        <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
+        <input
+          id="billingEmail"
+          class="form-control"
+          type="text"
+          name="BillingEmail"
+          [(ngModel)]="billingEmail"
+          required
+        />
+      </div>
     </div>
-    <p>{{'setupProviderDesc' | i18n}}</p>
 
-    <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
-        <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
-        <div class="row">
-            <div class="form-group col-6">
-                <label for="name">{{'providerName' | i18n}}</label>
-                <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
-            </div>
-            <div class="form-group col-6">
-                <label for="billingEmail">{{'billingEmail' | i18n}}</label>
-                <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail" required>
-            </div>
-        </div>
-
-        <div class="mt-4">
-            <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                <span>{{'submit' | i18n}}</span>
-            </button>
-            <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
-                {{'cancel' | i18n}}
-            </button>
-        </div>
-    </form>
+    <div class="mt-4">
+      <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <span>{{ "submit" | i18n }}</span>
+      </button>
+      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </form>
 </div>
 <app-footer></app-footer>

bitwarden_license/src/app/providers/setup/setup.component.ts

@@ -1,95 +1,101 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
 
-import { ValidationService } from 'jslib-angular/services/validation.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { ProviderSetupRequest } from 'jslib-common/models/request/provider/providerSetupRequest';
+import { ValidationService } from "jslib-angular/services/validation.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { ProviderSetupRequest } from "jslib-common/models/request/provider/providerSetupRequest";
 
 @Component({
-    selector: 'provider-setup',
-    templateUrl: 'setup.component.html',
+  selector: "provider-setup",
+  templateUrl: "setup.component.html",
 })
 export class SetupComponent implements OnInit {
-    loading = true;
-    authed = false;
-    email: string;
-    formPromise: Promise<any>;
+  loading = true;
+  authed = false;
+  email: string;
+  formPromise: Promise<any>;
 
-    providerId: string;
-    token: string;
-    name: string;
-    billingEmail: string;
+  providerId: string;
+  token: string;
+  name: string;
+  billingEmail: string;
 
-    constructor(private router: Router, private platformUtilsService: PlatformUtilsService,
-        private i18nService: I18nService, private route: ActivatedRoute,
-        private cryptoService: CryptoService, private apiService: ApiService,
-        private syncService: SyncService, private validationService: ValidationService) { }
+  constructor(
+    private router: Router,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private cryptoService: CryptoService,
+    private apiService: ApiService,
+    private syncService: SyncService,
+    private validationService: ValidationService
+  ) {}
 
-    ngOnInit() {
-        document.body.classList.remove('layout_frontend');
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            const error = qParams.providerId == null || qParams.email == null || qParams.token == null;
+  ngOnInit() {
+    document.body.classList.remove("layout_frontend");
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      const error = qParams.providerId == null || qParams.email == null || qParams.token == null;
 
-            if (error) {
-                this.platformUtilsService.showToast('error', null, this.i18nService.t('emergencyInviteAcceptFailed'),
-                    { timeout: 10000 });
-                this.router.navigate(['/']);
-                return;
-            }
+      if (error) {
+        this.platformUtilsService.showToast(
+          "error",
+          null,
+          this.i18nService.t("emergencyInviteAcceptFailed"),
+          {
+            timeout: 10000,
+          }
+        );
+        this.router.navigate(["/"]);
+        return;
+      }
 
-            this.providerId = qParams.providerId;
-            this.token = qParams.token;
+      this.providerId = qParams.providerId;
+      this.token = qParams.token;
 
-            // Check if provider exists, redirect if it does
-            try {
-                const provider = await this.apiService.getProvider(this.providerId);
-                if (provider.name != null) {
-                    this.router.navigate(['/providers', provider.id], { replaceUrl: true });
-                }
-            } catch (e) {
-                this.validationService.showError(e);
-                this.router.navigate(['/']);
-            }
-        });
-    }
-
-    async submit() {
-        this.formPromise = this.doSubmit();
-        await this.formPromise;
-        this.formPromise = null;
-    }
-
-    async doSubmit() {
-        try {
-            const shareKey = await this.cryptoService.makeShareKey();
-            const key = shareKey[0].encryptedString;
-
-            const request = new ProviderSetupRequest();
-            request.name = this.name;
-            request.billingEmail = this.billingEmail;
-            request.token = this.token;
-            request.key = key;
-
-            const provider = await this.apiService.postProviderSetup(this.providerId, request);
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('providerSetup'));
-            await this.syncService.fullSync(true);
-
-            this.router.navigate(['/providers', provider.id]);
-        } catch (e) {
-            this.validationService.showError(e);
+      // Check if provider exists, redirect if it does
+      try {
+        const provider = await this.apiService.getProvider(this.providerId);
+        if (provider.name != null) {
+          this.router.navigate(["/providers", provider.id], { replaceUrl: true });
         }
+      } catch (e) {
+        this.validationService.showError(e);
+        this.router.navigate(["/"]);
+      }
+    });
+  }
+
+  async submit() {
+    this.formPromise = this.doSubmit();
+    await this.formPromise;
+    this.formPromise = null;
+  }
+
+  async doSubmit() {
+    try {
+      const shareKey = await this.cryptoService.makeShareKey();
+      const key = shareKey[0].encryptedString;
+
+      const request = new ProviderSetupRequest();
+      request.name = this.name;
+      request.billingEmail = this.billingEmail;
+      request.token = this.token;
+      request.key = key;
+
+      const provider = await this.apiService.postProviderSetup(this.providerId, request);
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("providerSetup"));
+      await this.syncService.fullSync(true);
+
+      this.router.navigate(["/providers", provider.id]);
+    } catch (e) {
+      this.validationService.showError(e);
     }
+  }
 }

bitwarden_license/webpack.config.js

@@ -1,12 +1,12 @@
-const { AngularWebpackPlugin } = require('@ngtools/webpack');
+const { AngularWebpackPlugin } = require("@ngtools/webpack");
 
-const webpackConfig = require('../webpack.config');
+const webpackConfig = require("../webpack.config");
 
-webpackConfig.entry['app/main'] = './bitwarden_license/src/app/main.ts';
-webpackConfig.plugins[webpackConfig.plugins.length -1] = new AngularWebpackPlugin({
-    tsConfigPath: 'tsconfig.json',
-    entryModule: 'bitwarden_license/src/app/app.module#AppModule',
-    sourceMap: true,
+webpackConfig.entry["app/main"] = "./bitwarden_license/src/app/main.ts";
+webpackConfig.plugins[webpackConfig.plugins.length - 1] = new AngularWebpackPlugin({
+  tsConfigPath: "tsconfig.json",
+  entryModule: "bitwarden_license/src/app/app.module#AppModule",
+  sourceMap: true,
 });
 
 module.exports = webpackConfig;

config.js

@@ -1,37 +1,36 @@
 function load(envName) {
-    return {
-        ...require('./config/base.json'),
-        ...loadConfig(envName),
-        ...loadConfig('local'),
-        dev: {
-            ...require('./config/base.json').dev,
-            ...loadConfig(envName).dev,
-            ...loadConfig('local').dev,
-        },
-    };
+  return {
+    ...require("./config/base.json"),
+    ...loadConfig(envName),
+    ...loadConfig("local"),
+    dev: {
+      ...require("./config/base.json").dev,
+      ...loadConfig(envName).dev,
+      ...loadConfig("local").dev,
+    },
+  };
 }
 
 function log(configObj) {
-    const repeatNum = 50;
-    console.log(`${"=".repeat(repeatNum)}\nenvConfig`);
-    console.log(JSON.stringify(configObj, null, 2));
-    console.log(`${"=".repeat(repeatNum)}`);
+  const repeatNum = 50;
+  console.log(`${"=".repeat(repeatNum)}\nenvConfig`);
+  console.log(JSON.stringify(configObj, null, 2));
+  console.log(`${"=".repeat(repeatNum)}`);
 }
 
 function loadConfig(configName) {
-    try {
-        return require(`./config/${configName}.json`);
-    } catch (e) {
-        if (e instanceof Error && e.code === "MODULE_NOT_FOUND") {
-            return {};
-        }
-        else {
-            throw e;
-        }
+  try {
+    return require(`./config/${configName}.json`);
+  } catch (e) {
+    if (e instanceof Error && e.code === "MODULE_NOT_FOUND") {
+      return {};
+    } else {
+      throw e;
     }
+  }
 }
 
 module.exports = {
-    load,
-    log
+  load,
+  log,
 };

config/base.json

@@ -1,12 +1,12 @@
 {
-    "urls": {},
-    "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
-    "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
-    "paypal": {
-        "businessId": "AD3LAUZSNVPJY",
-        "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
-    },
-    "dev": {
-        "allowedHosts": "auto"
-    }
+  "urls": {},
+  "stripeKey": "pk_test_KPoCfZXu7mznb9uSCPZ2JpTD",
+  "braintreeKey": "sandbox_r72q8jq6_9pnxkwm75f87sdc2",
+  "paypal": {
+    "businessId": "AD3LAUZSNVPJY",
+    "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
+  },
+  "dev": {
+    "allowedHosts": "auto"
+  }
 }

config/cloud.json

@@ -1,17 +1,17 @@
 {
-    "urls": {
-        "icons": "https://icons.bitwarden.net",
-        "notifications": "https://notifications.bitwarden.com"
-    },
-    "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
-    "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
-    "paypal": {
-        "businessId": "4ZDA7DLUUJGMN",
-        "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
-    },
-    "dev": {
-        "proxyApi": "https://api.bitwarden.com",
-        "proxyIdentity": "https://identity.bitwarden.com",
-        "proxyEvents": "https://events.bitwarden.com"
-    }
+  "urls": {
+    "icons": "https://icons.bitwarden.net",
+    "notifications": "https://notifications.bitwarden.com"
+  },
+  "stripeKey": "pk_live_bpN0P37nMxrMQkcaHXtAybJk",
+  "braintreeKey": "production_qfbsv8kc_njj2zjtyngtjmbjd",
+  "paypal": {
+    "businessId": "4ZDA7DLUUJGMN",
+    "buttonAction": "https://www.paypal.com/cgi-bin/webscr"
+  },
+  "dev": {
+    "proxyApi": "https://api.bitwarden.com",
+    "proxyIdentity": "https://identity.bitwarden.com",
+    "proxyEvents": "https://events.bitwarden.com"
+  }
 }

config/development.json

@@ -1,11 +1,11 @@
 {
-    "urls": {
-        "notifications": "http://localhost:61840"
-    },
-    "dev": {
-        "proxyApi": "http://localhost:4000",
-        "proxyIdentity": "http://localhost:33656",
-        "proxyEvents": "http://localhost:46273",
-        "proxyNotifications": "http://localhost:61840"
-    }
+  "urls": {
+    "notifications": "http://localhost:61840"
+  },
+  "dev": {
+    "proxyApi": "http://localhost:4000",
+    "proxyIdentity": "http://localhost:33656",
+    "proxyEvents": "http://localhost:46273",
+    "proxyNotifications": "http://localhost:61840"
+  }
 }

config/qa.json

@@ -1,11 +1,11 @@
 {
-    "urls": {
-        "icons": "https://icons.qa.bitwarden.pw",
-        "notifications": "https://notifications.qa.bitwarden.pw"
-    },
-    "dev": {
-        "proxyApi": "https://api.qa.bitwarden.pw",
-        "proxyIdentity": "https://identity.qa.bitwarden.pw",
-        "proxyEvents": "https://events.qa.bitwarden.pw"
-    }
+  "urls": {
+    "icons": "https://icons.qa.bitwarden.pw",
+    "notifications": "https://notifications.qa.bitwarden.pw"
+  },
+  "dev": {
+    "proxyApi": "https://api.qa.bitwarden.pw",
+    "proxyIdentity": "https://identity.qa.bitwarden.pw",
+    "proxyEvents": "https://events.qa.bitwarden.pw"
+  }
 }

package.json

@@ -29,7 +29,7 @@
     "dist:bit:selfhost": "npm run build:bit:selfhost:prod",
     "deploy": "npm run dist:bit && gh-pages -d build",
     "deploy:dev": "npm run dist:bit && gh-pages -d build -r git@github.com:kspearrin/bitwarden-web-dev.git",
-    "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts'",
+    "lint": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' && prettier --check .",
     "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix",
     "prettier": "prettier --write .",
     "prepare": "husky install"

src/404.html

@@ -1,50 +1,56 @@
 <!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">
+  <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
+      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">
+    <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>
+    <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
-                    </div>
-                </div>
-            </div>
+  <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</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>
+      </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

@@ -1,119 +1,121 @@
 @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-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-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-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-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-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-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-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-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-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;
+  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';
+  font-family: "Open Sans";
 }
 
-html, body, .row {
-    height: 100%;
-    -webkit-font-smoothing: antialiased;
+html,
+body,
+.row {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
 }
 
 h2 {
-    font-size: 25px;
-    margin-bottom: 12.5px;
-    font-weight: 500;
-    line-height: 1.1;
+  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;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .banner {
-    background-color: #175DDC;
-    height: 56px;
+  background-color: #175ddc;
+  height: 56px;
 }
 
 .content {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    padding-left: 15px;
-    padding-right: 15px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .footer {
-    padding: 40px 0 40px 0;
-    border-top: 1px solid #dee2e6;
+  padding: 40px 0 40px 0;
+  border-top: 1px solid #dee2e6;
 }

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

@@ -1,34 +1,41 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
-    <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
-        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span class="sr-only">{{'loading' | i18n}}</span>
-        </p>
-    </div>
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="fa fa-spinner fa-spin fa-2x text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="sr-only">{{ "loading" | i18n }}</span>
+    </p>
+  </div>
 </div>
 <div class="container" *ngIf="!loading && !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 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

@@ -1,60 +1,54 @@
-import { Component } from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
-import { EmergencyAccessAcceptRequest } from 'jslib-common/models/request/emergencyAccessAcceptRequest';
-import { BaseAcceptComponent } from '../common/base.accept.component';
+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 { StateService } from "jslib-common/abstractions/state.service";
+import { EmergencyAccessAcceptRequest } from "jslib-common/models/request/emergencyAccessAcceptRequest";
+import { BaseAcceptComponent } from "../common/base.accept.component";
 
 @Component({
-    selector: 'app-accept-emergency',
-    templateUrl: 'accept-emergency.component.html',
+  selector: "app-accept-emergency",
+  templateUrl: "accept-emergency.component.html",
 })
 export class AcceptEmergencyComponent extends BaseAcceptComponent {
+  name: string;
 
-    name: string;
+  protected requiredParameters: string[] = ["id", "name", "email", "token"];
+  protected failedShortMessage = "emergencyInviteAcceptFailedShort";
+  protected failedMessage = "emergencyInviteAcceptFailed";
 
-    protected requiredParameters: string[] = ['id', 'name', 'email', 'token'];
-    protected failedShortMessage = 'emergencyInviteAcceptFailedShort';
-    protected failedMessage = 'emergencyInviteAcceptFailed';
+  constructor(
+    router: Router,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    private apiService: ApiService,
+    stateService: StateService
+  ) {
+    super(router, platformUtilsService, i18nService, route, stateService);
+  }
 
-    constructor(
-        router: Router,
-        platformUtilsService: PlatformUtilsService,
-        i18nService: I18nService,
-        route: ActivatedRoute,
-        private apiService: ApiService,
-        stateService: StateService
-    ) {
-        super(
-            router,
-            platformUtilsService,
-            i18nService,
-            route,
-            stateService
-        );
-    }
-
-    async authedHandler(qParams: any): Promise<void> {
-        const request = new EmergencyAccessAcceptRequest();
-        request.token = qParams.token;
-        this.actionPromise = this.apiService.postEmergencyAccessAccept(qParams.id, request);
-        await this.actionPromise;
-        this.platformUtilService.showToast('success', this.i18nService.t('inviteAccepted'),
-            this.i18nService.t('emergencyInviteAcceptedDesc'), {timeout: 10000});
-        this.router.navigate(['/vault']);
-    }
-
-    async unauthedHandler(qParams: any): Promise<void> {
-        this.name = qParams.name;
-        if (this.name != null) {
-            // Fix URL encoding of space issue with Angular
-            this.name = this.name.replace(/\+/g, ' ');
-        }
+  async authedHandler(qParams: any): Promise<void> {
+    const request = new EmergencyAccessAcceptRequest();
+    request.token = qParams.token;
+    this.actionPromise = this.apiService.postEmergencyAccessAccept(qParams.id, request);
+    await this.actionPromise;
+    this.platformUtilService.showToast(
+      "success",
+      this.i18nService.t("inviteAccepted"),
+      this.i18nService.t("emergencyInviteAcceptedDesc"),
+      { timeout: 10000 }
+    );
+    this.router.navigate(["/vault"]);
+  }
+
+  async unauthedHandler(qParams: any): Promise<void> {
+    this.name = qParams.name;
+    if (this.name != null) {
+      // Fix URL encoding of space issue with Angular
+      this.name = this.name.replace(/\+/g, " ");
     }
+  }
 }

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

@@ -1,35 +1,42 @@
 <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>
+    <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">{{'joinOrganization' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <p class="text-center">
-                        {{orgName}}
-                        <strong class="d-block mt-2">{{email}}</strong>
-                    </p>
-                    <p>{{'joinOrganizationDesc' | 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "joinOrganization" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <p class="text-center">
+            {{ orgName }}
+            <strong class="d-block mt-2">{{ email }}</strong>
+          </p>
+          <p>{{ "joinOrganizationDesc" | 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-organization.component.ts

@@ -1,116 +1,127 @@
-import { Component } from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+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 { LogService } from 'jslib-common/abstractions/log.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 { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
-import { OrganizationUserAcceptRequest } from 'jslib-common/models/request/organizationUserAcceptRequest';
-import { OrganizationUserResetPasswordEnrollmentRequest } from 'jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest';
+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';
-import { BaseAcceptComponent } from '../common/base.accept.component';
+import { Utils } from "jslib-common/misc/utils";
+import { Policy } from "jslib-common/models/domain/policy";
+import { BaseAcceptComponent } from "../common/base.accept.component";
 
 @Component({
-    selector: 'app-accept-organization',
-    templateUrl: 'accept-organization.component.html',
+  selector: "app-accept-organization",
+  templateUrl: "accept-organization.component.html",
 })
 export class AcceptOrganizationComponent extends BaseAcceptComponent {
-    orgName: string;
+  orgName: string;
 
-    protected requiredParameters: string[] = ['organizationId', 'organizationUserId', 'token'];
+  protected requiredParameters: string[] = ["organizationId", "organizationUserId", "token"];
 
-    constructor(
-        router: Router,
-        platformUtilsService: PlatformUtilsService,
-        i18nService: I18nService,
-        route: ActivatedRoute,
-        private apiService: ApiService,
-        stateService: StateService,
-        private cryptoService: CryptoService,
-        private policyService: PolicyService,
-        private logService: LogService
-    ) {
-        super(
-            router,
-            platformUtilsService,
-            i18nService,
-            route,
-            stateService
-        );
+  constructor(
+    router: Router,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    private apiService: ApiService,
+    stateService: StateService,
+    private cryptoService: CryptoService,
+    private policyService: PolicyService,
+    private logService: LogService
+  ) {
+    super(router, platformUtilsService, i18nService, route, stateService);
+  }
+
+  async authedHandler(qParams: any): Promise<void> {
+    const request = new OrganizationUserAcceptRequest();
+    request.token = qParams.token;
+    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;
+
+          return this.apiService.putOrganizationUserResetPasswordEnrollment(
+            qParams.organizationId,
+            await this.stateService.getUserId(),
+            resetRequest
+          );
+        });
+    } else {
+      this.actionPromise = this.apiService.postOrganizationUserAccept(
+        qParams.organizationId,
+        qParams.organizationUserId,
+        request
+      );
     }
 
-    async authedHandler(qParams: any): Promise<void> {
-        const request = new OrganizationUserAcceptRequest();
-        request.token = qParams.token;
-        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'));
-                    }
+    await this.actionPromise;
+    this.platformUtilService.showToast(
+      "success",
+      this.i18nService.t("inviteAccepted"),
+      this.i18nService.t("inviteAcceptedDesc"),
+      { timeout: 10000 }
+    );
 
-                    const publicKey = Utils.fromB64ToArray(response.publicKey);
+    await this.stateService.setOrganizationInvitation(null);
+    this.router.navigate(["/vault"]);
+  }
 
-                    // 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);
+  async unauthedHandler(qParams: any): Promise<void> {
+    this.orgName = qParams.organizationName;
+    if (this.orgName != null) {
+      // Fix URL encoding of space issue with Angular
+      this.orgName = this.orgName.replace(/\+/g, " ");
+    }
+    await this.stateService.setOrganizationInvitation(qParams);
+  }
 
-                    // Create request and execute enrollment
-                    const resetRequest = new OrganizationUserResetPasswordEnrollmentRequest();
-                    resetRequest.resetPasswordKey = encryptedKey.encryptedString;
-
-                    return this.apiService.putOrganizationUserResetPasswordEnrollment(qParams.organizationId, await this.stateService.getUserId(), resetRequest);
-                });
-        } else {
-            this.actionPromise = this.apiService.postOrganizationUserAccept(qParams.organizationId,
-                qParams.organizationUserId, request);
-        }
-
-        await this.actionPromise;
-        this.platformUtilService.showToast('success', this.i18nService.t('inviteAccepted'),
-            this.i18nService.t('inviteAcceptedDesc'), {timeout: 10000});
-
-        await this.stateService.setOrganizationInvitation(null);
-        this.router.navigate(['/vault']);
+  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 (e) {
+      this.logService.error(e);
     }
 
-    async unauthedHandler(qParams: any): Promise<void> {
-        this.orgName = qParams.organizationName;
-        if (this.orgName != null) {
-            // Fix URL encoding of space issue with Angular
-            this.orgName = this.orgName.replace(/\+/g, ' ');
-        }
-        await this.stateService.setOrganizationInvitation(qParams);
+    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;
     }
 
-    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 (e) {
-            this.logService.error(e);
-        }
-
-        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;
-    }
+    return false;
+  }
 }

src/app/accounts/hint.component.html

@@ -1,27 +1,44 @@
 <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">{{'passwordHint' | i18n}}</p>
-            <div class="card d-block">
-                <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">
-                        <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}}" 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "passwordHint" | i18n }}</p>
+      <div class="card d-block">
+        <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"
+            />
+            <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 }}"
+                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/hint.component.ts

@@ -1,21 +1,25 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hint.component';
+import { HintComponent as BaseHintComponent } from "jslib-angular/components/hint.component";
 
 @Component({
-    selector: 'app-hint',
-    templateUrl: 'hint.component.html',
+  selector: "app-hint",
+  templateUrl: "hint.component.html",
 })
 export class HintComponent extends BaseHintComponent {
-    constructor(router: Router, i18nService: I18nService,
-        apiService: ApiService, platformUtilsService: PlatformUtilsService,
-        logService: LogService) {
-        super(router, i18nService, apiService, platformUtilsService, logService);
-    }
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    apiService: ApiService,
+    platformUtilsService: PlatformUtilsService,
+    logService: LogService
+  ) {
+    super(router, i18nService, apiService, platformUtilsService, logService);
+  }
 }

src/app/accounts/lock.component.html

@@ -1,42 +1,68 @@
 <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" aria-hidden="true"></i>
-            </p>
-            <p class="lead text-center mx-4 mb-4">{{'yourVaultIsLocked' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <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" 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 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}}
-                        </button>
-                    </div>
-                </div>
+  <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" aria-hidden="true"></i>
+      </p>
+      <p class="lead text-center mx-4 mb-4">{{ "yourVaultIsLocked" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <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"
+                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 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 }}
+            </button>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </form>

src/app/accounts/lock.component.ts

@@ -1,48 +1,65 @@
-import {
-    Component,
-    NgZone,
-} from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, NgZone } from "@angular/core";
+import { Router } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { CryptoService } from 'jslib-common/abstractions/crypto.service';
-import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { MessagingService } from 'jslib-common/abstractions/messaging.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
-import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.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 { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
 
-import { RouterService } from '../services/router.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',
+  selector: "app-lock",
+  templateUrl: "lock.component.html",
 })
 export class LockComponent extends BaseLockComponent {
-    constructor(router: Router, i18nService: I18nService,
-        platformUtilsService: PlatformUtilsService, messagingService: MessagingService,
-        cryptoService: CryptoService, vaultTimeoutService: VaultTimeoutService,
-        environmentService: EnvironmentService, private routerService: RouterService,
-        stateService: StateService, apiService: ApiService, logService: LogService,
-        keyConnectorService: KeyConnectorService, ngZone: NgZone) {
-        super(router, i18nService, platformUtilsService, messagingService, cryptoService,
-            vaultTimeoutService, environmentService, stateService, apiService, logService,
-            keyConnectorService, ngZone);
-    }
+  constructor(
+    router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    messagingService: MessagingService,
+    cryptoService: CryptoService,
+    vaultTimeoutService: VaultTimeoutService,
+    environmentService: EnvironmentService,
+    private routerService: RouterService,
+    stateService: StateService,
+    apiService: ApiService,
+    logService: LogService,
+    keyConnectorService: KeyConnectorService,
+    ngZone: NgZone
+  ) {
+    super(
+      router,
+      i18nService,
+      platformUtilsService,
+      messagingService,
+      cryptoService,
+      vaultTimeoutService,
+      environmentService,
+      stateService,
+      apiService,
+      logService,
+      keyConnectorService,
+      ngZone
+    );
+  }
 
-    async ngOnInit() {
-        await super.ngOnInit();
-        this.onSuccessfulSubmit = async () => {
-            const previousUrl = this.routerService.getPreviousUrl();
-            if (previousUrl !== '/' && previousUrl.indexOf('lock') === -1) {
-                this.successRoute = previousUrl;
-            }
-            this.router.navigate([this.successRoute]);
-        };
-    }
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.onSuccessfulSubmit = async () => {
+      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

@@ -1,61 +1,101 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <img class="mb-2 logo logo-themed" alt="Bitwarden">
-            <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
-            <div class="card d-block">
-                <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">
-                    </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" 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">
-                            <a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
-                        </small>
-                    </div>
-                    <div class="form-check mb-3">
-                        <input type="checkbox" class="form-check-input" id="rememberEmail" name="RememberEmail"
-                            [(ngModel)]="rememberEmail">
-                        <label class="form-check-label" for="rememberEmail">{{'rememberEmail' | i18n}}</label>
-                    </div>
-                    <div class="mb-n3" [hidden]="!showCaptcha()"><iframe id="hcaptcha_iframe" height="80"></iframe></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="/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>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <img class="mb-2 logo logo-themed" alt="Bitwarden" />
+      <p class="lead text-center mx-4 mb-4">{{ "loginOrCreateNewAccount" | i18n }}</p>
+      <div class="card d-block">
+        <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"
+            />
+          </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"
+                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">
+              <a routerLink="/hint">{{ "getMasterPasswordHint" | i18n }}</a>
+            </small>
+          </div>
+          <div class="form-check mb-3">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="rememberEmail"
+              name="RememberEmail"
+              [(ngModel)]="rememberEmail"
+            />
+            <label class="form-check-label" for="rememberEmail">{{ "rememberEmail" | i18n }}</label>
+          </div>
+          <div class="mb-n3" [hidden]="!showCaptcha()">
+            <iframe id="hcaptcha_iframe" height="80"></iframe>
+          </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="/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>
+      </div>
     </div>
+  </div>
 </form>

src/app/accounts/login.component.ts

@@ -1,100 +1,118 @@
-import {
-    Component,
-    NgZone,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component, NgZone } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-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 { LogService } from 'jslib-common/abstractions/log.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 { 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 { LogService } from "jslib-common/abstractions/log.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 { 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';
+import { Policy } from "jslib-common/models/domain/policy";
 
 @Component({
-    selector: 'app-login',
-    templateUrl: 'login.component.html',
+  selector: "app-login",
+  templateUrl: "login.component.html",
 })
 export class LoginComponent extends BaseLoginComponent {
+  showResetPasswordAutoEnrollWarning = false;
 
-    showResetPasswordAutoEnrollWarning = false;
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    private route: ActivatedRoute,
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    environmentService: EnvironmentService,
+    passwordGenerationService: PasswordGenerationService,
+    cryptoFunctionService: CryptoFunctionService,
+    private apiService: ApiService,
+    private policyService: PolicyService,
+    logService: LogService,
+    ngZone: NgZone
+  ) {
+    super(
+      authService,
+      router,
+      platformUtilsService,
+      i18nService,
+      stateService,
+      environmentService,
+      passwordGenerationService,
+      cryptoFunctionService,
+      logService,
+      ngZone
+    );
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
 
-    constructor(authService: AuthService, router: Router,
-        i18nService: I18nService, private route: ActivatedRoute, stateService: StateService,
-        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
-        passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService,
-        private apiService: ApiService, private policyService: PolicyService, logService: LogService,
-        ngZone: NgZone) {
-        super(authService, router,
-            platformUtilsService, i18nService,
-            stateService, environmentService,
-            passwordGenerationService, cryptoFunctionService,
-            logService, ngZone);
-        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
-    }
-
-    async ngOnInit() {
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
-                this.email = qParams.email;
-            }
-            if (qParams.premium != null) {
-                this.stateService.setLoginRedirect({ route: '/settings/premium' });
-            } else if (qParams.org != null) {
-                this.stateService.setLoginRedirect(
-                    { route: '/settings/create-organization', qParams: { plan: qParams.org } });
-            }
-
-            // Are they coming from an email for sponsoring a families organization
-            if (qParams.sponsorshipToken != null) {
-                // After logging in redirect them to setup the families sponsorship
-                this.stateService.setLoginRedirect({
-                    route: '/setup/families-for-enterprise',
-                    qParams: { token: qParams.sponsorshipToken },
-                });
-            }
-            await super.ngOnInit();
+  async ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.email != null && qParams.email.indexOf("@") > -1) {
+        this.email = qParams.email;
+      }
+      if (qParams.premium != null) {
+        this.stateService.setLoginRedirect({ route: "/settings/premium" });
+      } else if (qParams.org != null) {
+        this.stateService.setLoginRedirect({
+          route: "/settings/create-organization",
+          qParams: { plan: qParams.org },
         });
+      }
 
-        const invite = await this.stateService.getOrganizationInvitation();
-        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 (e) {
-                this.logService.error(e);
-            }
+      // Are they coming from an email for sponsoring a families organization
+      if (qParams.sponsorshipToken != null) {
+        // After logging in redirect them to setup the families sponsorship
+        this.stateService.setLoginRedirect({
+          route: "/setup/families-for-enterprise",
+          qParams: { token: qParams.sponsorshipToken },
+        });
+      }
+      await super.ngOnInit();
+    });
 
-            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;
-            }
-        }
+    const invite = await this.stateService.getOrganizationInvitation();
+    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 (e) {
+        this.logService.error(e);
+      }
+
+      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 loginRedirect = await this.stateService.getLoginRedirect();
-        if (loginRedirect != null) {
-            this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
-            await this.stateService.setLoginRedirect(null);
-        } else {
-            this.router.navigate([this.successRoute]);
-        }
+  async goAfterLogIn() {
+    const loginRedirect = await this.stateService.getLoginRedirect();
+    if (loginRedirect != null) {
+      this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
+      await this.stateService.setLoginRedirect(null);
+    } else {
+      this.router.navigate([this.successRoute]);
     }
+  }
 }

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

@@ -1,27 +1,44 @@
 <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">{{'deleteAccount' | i18n}}</p>
-            <div class="card">
-                <div class="card-body">
-                    <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">
-                    </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}}" 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
+      <div class="card">
+        <div class="card-body">
+          <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"
+            />
+          </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 }}"
+                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/recover-delete.component.ts

@@ -1,36 +1,43 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { DeleteRecoverRequest } from 'jslib-common/models/request/deleteRecoverRequest';
+import { DeleteRecoverRequest } from "jslib-common/models/request/deleteRecoverRequest";
 
 @Component({
-    selector: 'app-recover-delete',
-    templateUrl: 'recover-delete.component.html',
+  selector: "app-recover-delete",
+  templateUrl: "recover-delete.component.html",
 })
 export class RecoverDeleteComponent {
-    email: string;
-    formPromise: Promise<any>;
+  email: string;
+  formPromise: Promise<any>;
 
-    constructor(private router: Router, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private logService: LogService) {
-    }
+  constructor(
+    private router: Router,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private logService: LogService
+  ) {}
 
-    async submit() {
-        try {
-            const request = new DeleteRecoverRequest();
-            request.email = this.email.trim().toLowerCase();
-            this.formPromise = this.apiService.postAccountRecoverDelete(request);
-            await this.formPromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('deleteRecoverEmailSent'));
-            this.router.navigate(['/']);
-        } catch (e) {
-            this.logService.error(e);
-        }
+  async submit() {
+    try {
+      const request = new DeleteRecoverRequest();
+      request.email = this.email.trim().toLowerCase();
+      this.formPromise = this.apiService.postAccountRecoverDelete(request);
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("deleteRecoverEmailSent")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
     }
+  }
 }

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

@@ -1,40 +1,76 @@
 <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">{{'recoverAccountTwoStep' | i18n}}</p>
-            <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>
-                    </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">
-                    </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>
-                    </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>
-                    </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}}" 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "recoverAccountTwoStep" | i18n }}</p>
+      <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
+            >
+          </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"
+            />
+          </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
+            />
+          </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
+            />
+          </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 }}"
+                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/recover-two-factor.component.ts

@@ -1,43 +1,52 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
-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 { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.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 { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { TwoFactorRecoveryRequest } from 'jslib-common/models/request/twoFactorRecoveryRequest';
+import { TwoFactorRecoveryRequest } from "jslib-common/models/request/twoFactorRecoveryRequest";
 
 @Component({
-    selector: 'app-recover-two-factor',
-    templateUrl: 'recover-two-factor.component.html',
+  selector: "app-recover-two-factor",
+  templateUrl: "recover-two-factor.component.html",
 })
 export class RecoverTwoFactorComponent {
-    email: string;
-    masterPassword: string;
-    recoveryCode: string;
-    formPromise: Promise<any>;
+  email: string;
+  masterPassword: string;
+  recoveryCode: string;
+  formPromise: Promise<any>;
 
-    constructor(private router: Router, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private cryptoService: CryptoService, private authService: AuthService,
-        private logService: LogService) { }
+  constructor(
+    private router: Router,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private cryptoService: CryptoService,
+    private authService: AuthService,
+    private logService: LogService
+  ) {}
 
-    async submit() {
-        try {
-            const request = new TwoFactorRecoveryRequest();
-            request.recoveryCode = this.recoveryCode.replace(/\s/g, '').toLowerCase();
-            request.email = this.email.trim().toLowerCase();
-            const key = await this.authService.makePreloginKey(this.masterPassword, request.email);
-            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
-            this.formPromise = this.apiService.postTwoFactorRecover(request);
-            await this.formPromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('twoStepRecoverDisabled'));
-            this.router.navigate(['/']);
-        } catch (e) {
-            this.logService.error(e);
-        }
+  async submit() {
+    try {
+      const request = new TwoFactorRecoveryRequest();
+      request.recoveryCode = this.recoveryCode.replace(/\s/g, "").toLowerCase();
+      request.email = this.email.trim().toLowerCase();
+      const key = await this.authService.makePreloginKey(this.masterPassword, request.email);
+      request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
+      this.formPromise = this.apiService.postTwoFactorRecover(request);
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("twoStepRecoverDisabled")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
     }
+  }
 }

src/app/accounts/register.component.html

@@ -1,141 +1,216 @@
 <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>
+  <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>
-    </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" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                                        *ngIf="enforcedPolicyOptions">
-                                    </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 [hidden]="!showCaptcha()"><iframe id="hcaptcha_iframe" height="80"></iframe></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>
+    </div>
+  </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>
-    </form>
+      </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"
+                    [enforcedPolicyOptions]="enforcedPolicyOptions"
+                    *ngIf="enforcedPolicyOptions"
+                  >
+                  </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 [hidden]="!showCaptcha()">
+                  <iframe id="hcaptcha_iframe" height="80"></iframe>
+                </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

@@ -1,115 +1,150 @@
-import { Component } from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-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 { EnvironmentService } from 'jslib-common/abstractions/environment.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.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 { ApiService } from "jslib-common/abstractions/api.service";
+import { AuthService } from "jslib-common/abstractions/auth.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 { LogService } from "jslib-common/abstractions/log.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 { 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';
+import { PolicyData } from "jslib-common/models/data/policyData";
+import { ReferenceEventRequest } from "jslib-common/models/request/referenceEventRequest";
 
 @Component({
-    selector: 'app-register',
-    templateUrl: 'register.component.html',
+  selector: "app-register",
+  templateUrl: "register.component.html",
 })
 export class RegisterComponent extends BaseRegisterComponent {
-    showCreateOrgMessage = false;
-    layout = '';
-    enforcedPolicyOptions: MasterPasswordPolicyOptions;
+  showCreateOrgMessage = false;
+  layout = "";
+  enforcedPolicyOptions: MasterPasswordPolicyOptions;
 
-    private policies: Policy[];
+  private policies: Policy[];
 
-    constructor(authService: AuthService, router: Router,
-        i18nService: I18nService, cryptoService: CryptoService,
-        apiService: ApiService, private route: ActivatedRoute,
-        stateService: StateService, platformUtilsService: PlatformUtilsService,
-        passwordGenerationService: PasswordGenerationService, private policyService: PolicyService,
-        environmentService: EnvironmentService, logService: LogService) {
-        super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
-            passwordGenerationService, environmentService, logService);
-    }
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    cryptoService: CryptoService,
+    apiService: ApiService,
+    private route: ActivatedRoute,
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    passwordGenerationService: PasswordGenerationService,
+    private policyService: PolicyService,
+    environmentService: EnvironmentService,
+    logService: LogService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      cryptoService,
+      apiService,
+      stateService,
+      platformUtilsService,
+      passwordGenerationService,
+      environmentService,
+      logService
+    );
+  }
 
-    async ngOnInit() {
-        this.route.queryParams.pipe(first()).subscribe(qParams => {
-            this.referenceData = new ReferenceEventRequest();
-            if (qParams.email != null && qParams.email.indexOf('@') > -1) {
-                this.email = qParams.email;
-            }
-            if (qParams.premium != null) {
-                this.stateService.setLoginRedirect({ route: '/settings/premium' });
-            } else if (qParams.org != null) {
-                this.showCreateOrgMessage = true;
-                this.referenceData.flow = qParams.org;
-                this.stateService.setLoginRedirect(
-                    { 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();
-            }
-            // Are they coming from an email for sponsoring a families organization
-            if (qParams.sponsorshipToken != null) {
-                // After logging in redirect them to setup the families sponsorship
-                this.stateService.setLoginRedirect({
-                    route: '/setup/families-for-enterprise',
-                    qParams: { token: qParams.sponsorshipToken },
-                });
-            }
-            if (this.referenceData.id === '') {
-                this.referenceData.id = null;
-            }
+  async ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe((qParams) => {
+      this.referenceData = new ReferenceEventRequest();
+      if (qParams.email != null && qParams.email.indexOf("@") > -1) {
+        this.email = qParams.email;
+      }
+      if (qParams.premium != null) {
+        this.stateService.setLoginRedirect({ route: "/settings/premium" });
+      } else if (qParams.org != null) {
+        this.showCreateOrgMessage = true;
+        this.referenceData.flow = qParams.org;
+        this.stateService.setLoginRedirect({
+          route: "/settings/create-organization",
+          qParams: { plan: qParams.org },
         });
-        const invite = await this.stateService.getOrganizationInvitation();
-        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 (e) {
-                this.logService.error(e);
-            }
+      }
+      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();
+      }
+      // Are they coming from an email for sponsoring a families organization
+      if (qParams.sponsorshipToken != null) {
+        // After logging in redirect them to setup the families sponsorship
+        this.stateService.setLoginRedirect({
+          route: "/setup/families-for-enterprise",
+          qParams: { token: qParams.sponsorshipToken },
+        });
+      }
+      if (this.referenceData.id === "") {
+        this.referenceData.id = null;
+      }
+    });
+    const invite = await this.stateService.getOrganizationInvitation();
+    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));
         }
-
-        if (this.policies != null) {
-            this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(this.policies);
-        }
-
-        await super.ngOnInit();
+      } catch (e) {
+        this.logService.error(e);
+      }
     }
 
-    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();
+    if (this.policies != null) {
+      this.enforcedPolicyOptions = await this.policyService.getMasterPasswordPolicyOptions(
+        this.policies
+      );
     }
+
+    await super.ngOnInit();
+  }
+
+  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/remove-password.component.html

@@ -1,31 +1,55 @@
 <div class="mt-5 d-flex justify-content-center" *ngIf="loading">
-    <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
-        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span class="sr-only">{{'loading' | i18n}}</span>
-        </p>
-    </div>
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="fa fa-spinner fa-spin fa-2x text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="sr-only">{{ "loading" | i18n }}</span>
+    </p>
+  </div>
 </div>
 <div class="container" *ngIf="!loading">
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <p class="lead text-center mb-4">{{'removeMasterPassword' | i18n}}</p>
-            <hr>
-            <div class="card d-block">
-                <div class="card-body">
-                    <p>{{'convertOrganizationEncryptionDesc' | i18n : organization.name}}</p>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "removeMasterPassword" | i18n }}</p>
+      <hr />
+      <div class="card d-block">
+        <div class="card-body">
+          <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
 
-                    <button type="button" class="btn btn-primary btn-block" (click)="convert()" [disabled]="actionPromise">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="continuing"></i>
-                        {{'removeMasterPassword' | i18n}}
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary btn-block" (click)="leave()" [disabled]="actionPromise">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true" *ngIf="leaving"></i>
-                        {{'leaveOrganization' | i18n}}
-                    </button>
-                </div>
-            </div>
+          <button
+            type="button"
+            class="btn btn-primary btn-block"
+            (click)="convert()"
+            [disabled]="actionPromise"
+          >
+            <i
+              class="fa fa-spinner fa-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+              *ngIf="continuing"
+            ></i>
+            {{ "removeMasterPassword" | i18n }}
+          </button>
+          <button
+            type="button"
+            class="btn btn-outline-secondary btn-block"
+            (click)="leave()"
+            [disabled]="actionPromise"
+          >
+            <i
+              class="fa fa-spinner fa-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+              *ngIf="leaving"
+            ></i>
+            {{ "leaveOrganization" | i18n }}
+          </button>
         </div>
+      </div>
     </div>
+  </div>
 </div>

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

@@ -1,10 +1,9 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { RemovePasswordComponent as BaseRemovePasswordComponent } from 'jslib-angular/components/remove-password.component';
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from "jslib-angular/components/remove-password.component";
 
 @Component({
-    selector: 'app-remove-password',
-    templateUrl: 'remove-password.component.html',
+  selector: "app-remove-password",
+  templateUrl: "remove-password.component.html",
 })
-export class RemovePasswordComponent extends BaseRemovePasswordComponent {
-}
+export class RemovePasswordComponent extends BaseRemovePasswordComponent {}

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

@@ -1,73 +1,117 @@
 <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>
-                    <app-callout type="warning" title="{{'resetPasswordPolicyAutoEnroll' | i18n}}"
-                        *ngIf="resetPasswordAutoEnroll">
-                        {{'resetPasswordAutoEnrollInviteWarning' | i18n}}
-                    </app-callout>
-                    <div class="form-group">
-                        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                            *ngIf="enforcedPolicyOptions">
-                        </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 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>
+          <app-callout
+            type="warning"
+            title="{{ 'resetPasswordPolicyAutoEnroll' | i18n }}"
+            *ngIf="resetPasswordAutoEnroll"
+          >
+            {{ "resetPasswordAutoEnrollInviteWarning" | i18n }}
+          </app-callout>
+          <div class="form-group">
+            <app-callout
+              type="info"
+              [enforcedPolicyOptions]="enforcedPolicyOptions"
+              *ngIf="enforcedPolicyOptions"
+            >
+            </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

@@ -1,34 +1,48 @@
-import { Component } from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+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 { StateService } from 'jslib-common/abstractions/state.service';
-import { SyncService } from 'jslib-common/abstractions/sync.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 { 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 { StateService } from "jslib-common/abstractions/state.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
 
-import {
-    SetPasswordComponent as BaseSetPasswordComponent,
-} from 'jslib-angular/components/set-password.component';
+import { SetPasswordComponent as BaseSetPasswordComponent } from "jslib-angular/components/set-password.component";
 
 @Component({
-    selector: 'app-set-password',
-    templateUrl: 'set-password.component.html',
+  selector: "app-set-password",
+  templateUrl: "set-password.component.html",
 })
 export class SetPasswordComponent extends BaseSetPasswordComponent {
-    constructor(apiService: ApiService, i18nService: I18nService,
-        cryptoService: CryptoService, messagingService: MessagingService,
-        passwordGenerationService: PasswordGenerationService, platformUtilsService: PlatformUtilsService,
-        policyService: PolicyService, router: Router,
-        syncService: SyncService, route: ActivatedRoute, stateService: StateService) {
-        super(i18nService, cryptoService, messagingService, passwordGenerationService,
-            platformUtilsService, policyService, router, apiService, syncService, route, stateService);
-    }
+  constructor(
+    apiService: ApiService,
+    i18nService: I18nService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    passwordGenerationService: PasswordGenerationService,
+    platformUtilsService: PlatformUtilsService,
+    policyService: PolicyService,
+    router: Router,
+    syncService: SyncService,
+    route: ActivatedRoute,
+    stateService: StateService
+  ) {
+    super(
+      i18nService,
+      cryptoService,
+      messagingService,
+      passwordGenerationService,
+      platformUtilsService,
+      policyService,
+      router,
+      apiService,
+      syncService,
+      route,
+      stateService
+    );
+  }
 }

src/app/accounts/sso.component.html

@@ -1,33 +1,52 @@
-<form #form (ngSubmit)="submit()" class="container" [appApiAction]="initiateSsoFormPromise" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
-            <img class="logo mb-2 logo-themed" 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>
+<form
+  #form
+  (ngSubmit)="submit()"
+  class="container"
+  [appApiAction]="initiateSsoFormPromise"
+  ngNativeValidate
+>
+  <div class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <img class="logo mb-2 logo-themed" 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

@@ -1,59 +1,74 @@
-import { Component } from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-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 { LogService } from 'jslib-common/abstractions/log.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 { 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 { LogService } from "jslib-common/abstractions/log.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 { SsoComponent as BaseSsoComponent } from 'jslib-angular/components/sso.component';
+import { SsoComponent as BaseSsoComponent } from "jslib-angular/components/sso.component";
 
 @Component({
-    selector: 'app-sso',
-    templateUrl: 'sso.component.html',
+  selector: "app-sso",
+  templateUrl: "sso.component.html",
 })
 export class SsoComponent extends BaseSsoComponent {
-    constructor(authService: AuthService, router: Router,
-        i18nService: I18nService, route: ActivatedRoute,
-        stateService: StateService, platformUtilsService: PlatformUtilsService,
-        apiService: ApiService, cryptoFunctionService: CryptoFunctionService,
-        environmentService: EnvironmentService, passwordGenerationService: PasswordGenerationService,
-        logService: LogService) {
-        super(authService, router, i18nService, route, stateService, platformUtilsService,
-            apiService, cryptoFunctionService, environmentService, passwordGenerationService, logService);
-        this.redirectUri = window.location.origin + '/sso-connector.html';
-        this.clientId = 'web';
-    }
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    route: ActivatedRoute,
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    apiService: ApiService,
+    cryptoFunctionService: CryptoFunctionService,
+    environmentService: EnvironmentService,
+    passwordGenerationService: PasswordGenerationService,
+    logService: LogService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      route,
+      stateService,
+      platformUtilsService,
+      apiService,
+      cryptoFunctionService,
+      environmentService,
+      passwordGenerationService,
+      logService
+    );
+    this.redirectUri = window.location.origin + "/sso-connector.html";
+    this.clientId = "web";
+  }
 
-    async ngOnInit() {
-        super.ngOnInit();
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            if (qParams.identifier != null) {
-                this.identifier = qParams.identifier;
-            } else {
-                const storedIdentifier = await this.stateService.getSsoOrgIdentifier();
-                if (storedIdentifier != null) {
-                    this.identifier = storedIdentifier;
-                }
-            }
-        });
-    }
-
-    async submit() {
-        await this.stateService.setSsoOrganizationIdentifier(this.identifier);
-        if (this.clientId === 'browser') {
-            document.cookie = `ssoHandOffMessage=${this.i18nService.t('ssoHandOff')};SameSite=strict`;
+  async ngOnInit() {
+    super.ngOnInit();
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.identifier != null) {
+        this.identifier = qParams.identifier;
+      } else {
+        const storedIdentifier = await this.stateService.getSsoOrgIdentifier();
+        if (storedIdentifier != null) {
+          this.identifier = storedIdentifier;
         }
-        super.submit();
+      }
+    });
+  }
+
+  async submit() {
+    await this.stateService.setSsoOrganizationIdentifier(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,54 +1,68 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <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>
+  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <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="modal-body">
+        <div class="list-group list-group-flush-2fa">
+          <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
+            <div class="two-factor-content">
+              <div class="logo-col">
+                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+              </div>
+              <div class="text-col">
+                <h3>{{ p.name }}</h3>
+                {{ p.description }}
+              </div>
+              <div class="btn-col">
+                <button
+                  [attr.aria-describedby]="p.name"
+                  type="button"
+                  class="btn btn-outline-secondary btn-sm"
+                  (click)="choose(p)"
+                >
+                  {{ "select" | i18n }}
                 </button>
+              </div>
             </div>
-            <div class="modal-body">
-                <div class="list-group list-group-flush-2fa">
-                    <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
-                        <div class="two-factor-content">
-                            <div class="logo-col">
-                                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
-                            </div>
-                            <div class="text-col">
-                                <h3>{{p.name}}</h3>
-                                {{p.description}}
-                            </div>
-                            <div class="btn-col">
-                                <button [attr.aria-describedby]="p.name" type="button"
-                                    class="btn btn-outline-secondary btn-sm" (click)="choose(p)">
-                                    {{'select' | i18n}}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="list-group-item list-group-item-action" (click)="recover()">
-                        <div class="two-factor-content">
-                            <div class="logo-col">
-                                <img class="recovery-code-img" alt="rc logo">
-                            </div>
-                            <div class="text-col">
-                                <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                                {{'recoveryCodeDesc' | i18n}}
-                            </div>
-                            <div class="btn-col">
-                                <button [attr.aria-descibedby]="'recoveryCodeTitle' | i18n" type="button"
-                                    class="btn btn-outline-secondary btn-sm" (click)="recover()">
-                                    {{'select' | i18n}}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' |
-                    i18n}}</button>
+          </div>
+          <div class="list-group-item list-group-item-action" (click)="recover()">
+            <div class="two-factor-content">
+              <div class="logo-col">
+                <img class="recovery-code-img" alt="rc logo" />
+              </div>
+              <div class="text-col">
+                <h3>{{ "recoveryCodeTitle" | i18n }}</h3>
+                {{ "recoveryCodeDesc" | i18n }}
+              </div>
+              <div class="btn-col">
+                <button
+                  [attr.aria-descibedby]="'recoveryCodeTitle' | i18n"
+                  type="button"
+                  class="btn btn-outline-secondary btn-sm"
+                  (click)="recover()"
+                >
+                  {{ "select" | i18n }}
+                </button>
+              </div>
             </div>
+          </div>
         </div>
+      </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/accounts/two-factor-options.component.ts

@@ -1,21 +1,23 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
 
-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 { 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';
+import { TwoFactorOptionsComponent as BaseTwoFactorOptionsComponent } from "jslib-angular/components/two-factor-options.component";
 
 @Component({
-    selector: 'app-two-factor-options',
-    templateUrl: 'two-factor-options.component.html',
+  selector: "app-two-factor-options",
+  templateUrl: "two-factor-options.component.html",
 })
 export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent {
-    constructor(authService: AuthService, router: Router,
-        i18nService: I18nService, platformUtilsService: PlatformUtilsService) {
-        super(authService, router, i18nService, platformUtilsService, window);
-    }
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService
+  ) {
+    super(authService, router, i18nService, platformUtilsService, window);
+  }
 }

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

@@ -1,80 +1,148 @@
-<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}">
-            <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>
-                        <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>
-                            <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
-                                <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
-                                    *ngIf="selectedProviderType === providerType.Email">
-                                    {{'sendVerificationCodeEmailAgain' | i18n}}
-                                </a>
-                            </small>
-                        </div>
-                    </ng-container>
-                    <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
-                        <p class="text-center">{{'insertYubiKey' | i18n}}</p>
-                        <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">
-                        </div>
-                    </ng-container>
-                    <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
-                        <div id="web-authn-frame" class="mb-3">
-                            <iframe id="webauthn_iframe" [allow]="webAuthnAllow"></iframe>
-                        </div>
-                    </ng-container>
-                    <ng-container *ngIf="selectedProviderType === providerType.Duo ||
-                        selectedProviderType === providerType.OrganizationDuo">
-                        <div id="duo-frame" class="mb-3">
-                            <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.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">
-                        <label for="remember" class="form-check-label">{{'rememberMe' | i18n}}</label>
-                    </div>
-                    <ng-container *ngIf="selectedProviderType == null">
-                        <p>{{'noTwoStepProviders' | i18n}}</p>
-                        <p>{{'noTwoStepProviders2' | i18n}}</p>
-                    </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.WebAuthn">
-                            <span>
-                                <i class="fa fa-sign-in" aria-hidden="true"></i> {{'continue' | i18n}}
-                            </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-                        </button>
-                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-                            {{'cancel' | i18n}}
-                        </a>
-                    </div>
-                    <div class="text-center">
-                        <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
-                    </div>
-                </div>
+<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
+      }"
+    >
+      <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>
+            <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
+              />
+              <small class="form-text" *ngIf="selectedProviderType === providerType.Email">
+                <a
+                  href="#"
+                  appStopClick
+                  (click)="sendEmail(true)"
+                  [appApiAction]="emailPromise"
+                  *ngIf="selectedProviderType === providerType.Email"
+                >
+                  {{ "sendVerificationCodeEmailAgain" | i18n }}
+                </a>
+              </small>
             </div>
+          </ng-container>
+          <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
+            <p class="text-center">{{ "insertYubiKey" | i18n }}</p>
+            <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"
+              />
+            </div>
+          </ng-container>
+          <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
+            <div id="web-authn-frame" class="mb-3">
+              <iframe id="webauthn_iframe" [allow]="webAuthnAllow"></iframe>
+            </div>
+          </ng-container>
+          <ng-container
+            *ngIf="
+              selectedProviderType === providerType.Duo ||
+              selectedProviderType === providerType.OrganizationDuo
+            "
+          >
+            <div id="duo-frame" class="mb-3">
+              <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.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"
+            />
+            <label for="remember" class="form-check-label">{{ "rememberMe" | i18n }}</label>
+          </div>
+          <ng-container *ngIf="selectedProviderType == null">
+            <p>{{ "noTwoStepProviders" | i18n }}</p>
+            <p>{{ "noTwoStepProviders2" | i18n }}</p>
+          </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.WebAuthn
+              "
+            >
+              <span>
+                <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+              </span>
+              <i
+                class="fa fa-spinner fa-spin"
+                title="{{ 'loading' | i18n }}"
+                aria-hidden="true"
+              ></i>
+            </button>
+            <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+              {{ "cancel" | i18n }}
+            </a>
+          </div>
+          <div class="text-center">
+            <a href="#" appStopClick (click)="anotherMethod()">{{
+              "useAnotherTwoStepMethod" | i18n
+            }}</a>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </form>
 <ng-template #twoFactorOptions></ng-template>

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

@@ -1,71 +1,86 @@
-import {
-    Component,
-    ViewChild,
-    ViewContainerRef,
-} from '@angular/core';
+import { Component, ViewChild, ViewContainerRef } from "@angular/core";
 
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { ActivatedRoute, Router } from "@angular/router";
 
-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 { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { StateService } from 'jslib-common/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 { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
-import { ModalService } from 'jslib-angular/services/modal.service';
+import { ModalService } from "jslib-angular/services/modal.service";
 
-import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType';
+import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
 
-import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
+import { TwoFactorComponent as BaseTwoFactorComponent } from "jslib-angular/components/two-factor.component";
 
-import { TwoFactorOptionsComponent } from './two-factor-options.component';
+import { TwoFactorOptionsComponent } from "./two-factor-options.component";
 
 @Component({
-    selector: 'app-two-factor',
-    templateUrl: 'two-factor.component.html',
+  selector: "app-two-factor",
+  templateUrl: "two-factor.component.html",
 })
 export class TwoFactorComponent extends BaseTwoFactorComponent {
-    @ViewChild('twoFactorOptions', { read: ViewContainerRef, static: true }) twoFactorOptionsModal: ViewContainerRef;
+  @ViewChild("twoFactorOptions", { read: ViewContainerRef, static: true })
+  twoFactorOptionsModal: ViewContainerRef;
 
-    constructor(authService: AuthService, router: Router,
-        i18nService: I18nService, apiService: ApiService,
-        platformUtilsService: PlatformUtilsService, stateService: StateService,
-        environmentService: EnvironmentService, private modalService: ModalService,
-        route: ActivatedRoute, logService: LogService) {
-        super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
-            stateService, route, logService);
-        this.onSuccessfulLoginNavigate = this.goAfterLogIn;
-    }
+  constructor(
+    authService: AuthService,
+    router: Router,
+    i18nService: I18nService,
+    apiService: ApiService,
+    platformUtilsService: PlatformUtilsService,
+    stateService: StateService,
+    environmentService: EnvironmentService,
+    private modalService: ModalService,
+    route: ActivatedRoute,
+    logService: LogService
+  ) {
+    super(
+      authService,
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      window,
+      environmentService,
+      stateService,
+      route,
+      logService
+    );
+    this.onSuccessfulLoginNavigate = this.goAfterLogIn;
+  }
 
-    async anotherMethod() {
-        const [modal] = await this.modalService.openViewRef(TwoFactorOptionsComponent, this.twoFactorOptionsModal, comp => {
-            comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
-                modal.close();
-                this.selectedProviderType = provider;
-                await this.init();
-            });
-            comp.onRecoverSelected.subscribe(() => {
-                modal.close();
-            });
+  async anotherMethod() {
+    const [modal] = await this.modalService.openViewRef(
+      TwoFactorOptionsComponent,
+      this.twoFactorOptionsModal,
+      (comp) => {
+        comp.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+          modal.close();
+          this.selectedProviderType = provider;
+          await this.init();
         });
-    }
+        comp.onRecoverSelected.subscribe(() => {
+          modal.close();
+        });
+      }
+    );
+  }
 
-    async goAfterLogIn() {
-        const loginRedirect = await this.stateService.getLoginRedirect();
-        if (loginRedirect != null) {
-            this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
-            await this.stateService.setLoginRedirect(null);
-        } else {
-            this.router.navigate([this.successRoute], {
-                queryParams: {
-                    identifier: this.identifier,
-                },
-            });
-        }
+  async goAfterLogIn() {
+    const loginRedirect = await this.stateService.getLoginRedirect();
+    if (loginRedirect != null) {
+      this.router.navigate([loginRedirect.route], { queryParams: loginRedirect.qParams });
+      await this.stateService.setLoginRedirect(null);
+    } else {
+      this.router.navigate([this.successRoute], {
+        queryParams: {
+          identifier: this.identifier,
+        },
+      });
     }
+  }
 }

src/app/accounts/update-temp-password.component.html

@@ -1,65 +1,105 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-4">
-            <p class="lead text-center mb-4">{{'updateMasterPassword' | i18n}}</p>
-            <div class="card d-block">
-                <div class="card-body">
-                    <app-callout type="warning">{{'updateMasterPasswordWarning' | i18n}}
-                    </app-callout>
-                    <div class="form-group">
-                        <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions"
-                            *ngIf="enforcedPolicyOptions">
-                        </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>
-                    </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 class="row justify-content-md-center mt-5">
+    <div class="col-4">
+      <p class="lead text-center mb-4">{{ "updateMasterPassword" | i18n }}</p>
+      <div class="card d-block">
+        <div class="card-body">
+          <app-callout type="warning">{{ "updateMasterPasswordWarning" | i18n }} </app-callout>
+          <div class="form-group">
+            <app-callout
+              type="info"
+              [enforcedPolicyOptions]="enforcedPolicyOptions"
+              *ngIf="enforcedPolicyOptions"
+            >
+            </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>
+          </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/update-temp-password.component.ts

@@ -1,29 +1,46 @@
-import { Component } from '@angular/core';
+import { Component } 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 { LogService } from 'jslib-common/abstractions/log.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 { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { 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 { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from 'jslib-angular/components/update-temp-password.component';
-import { StateService } from 'jslib-common/abstractions/state.service';
+import { UpdateTempPasswordComponent as BaseUpdateTempPasswordComponent } from "jslib-angular/components/update-temp-password.component";
+import { StateService } from "jslib-common/abstractions/state.service";
 
 @Component({
-    selector: 'app-update-temp-password',
-    templateUrl: 'update-temp-password.component.html',
+  selector: "app-update-temp-password",
+  templateUrl: "update-temp-password.component.html",
 })
-
 export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent {
-    constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
-        passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
-        cryptoService: CryptoService, messagingService: MessagingService,
-        apiService: ApiService, logService: LogService, stateService: StateService, syncService: SyncService) {
-        super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
-            messagingService, apiService, stateService, syncService, logService);
-    }
+  constructor(
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    passwordGenerationService: PasswordGenerationService,
+    policyService: PolicyService,
+    cryptoService: CryptoService,
+    messagingService: MessagingService,
+    apiService: ApiService,
+    logService: LogService,
+    stateService: StateService,
+    syncService: SyncService
+  ) {
+    super(
+      i18nService,
+      platformUtilsService,
+      passwordGenerationService,
+      policyService,
+      cryptoService,
+      messagingService,
+      apiService,
+      stateService,
+      syncService,
+      logService
+    );
+  }
 }

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

@@ -1,9 +1,13 @@
 <div class="mt-5 d-flex justify-content-center">
-    <div>
-        <img class="mb-4 logo logo-themed" alt="Bitwarden">
-        <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
-            <span class="sr-only">{{'loading' | i18n}}</span>
-        </p>
-    </div>
+  <div>
+    <img class="mb-4 logo logo-themed" alt="Bitwarden" />
+    <p class="text-center">
+      <i
+        class="fa fa-spinner fa-spin fa-2x text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="sr-only">{{ "loading" | i18n }}</span>
+    </p>
+  </div>
 </div>

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

@@ -1,55 +1,50 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
-import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailRequest';
+import { VerifyEmailRequest } from "jslib-common/models/request/verifyEmailRequest";
 
 @Component({
-    selector: 'app-verify-email-token',
-    templateUrl: 'verify-email-token.component.html',
+  selector: "app-verify-email-token",
+  templateUrl: "verify-email-token.component.html",
 })
 export class VerifyEmailTokenComponent implements OnInit {
-    constructor(
-        private router: Router,
-        private platformUtilsService: PlatformUtilsService,
-        private i18nService: I18nService,
-        private route: ActivatedRoute,
-        private apiService: ApiService,
-        private logService: LogService,
-        private stateService: StateService
-    ) { }
+  constructor(
+    private router: Router,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private apiService: ApiService,
+    private logService: LogService,
+    private stateService: StateService
+  ) {}
 
-    ngOnInit() {
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            if (qParams.userId != null && qParams.token != null) {
-                try {
-                    await this.apiService.postAccountVerifyEmailToken(
-                        new VerifyEmailRequest(qParams.userId, qParams.token));
-                    if (await this.stateService.getIsAuthenticated()) {
-                        await this.apiService.refreshIdentityToken();
-                    }
-                    this.platformUtilsService.showToast('success', null, this.i18nService.t('emailVerified'));
-                    this.router.navigate(['/']);
-                    return;
-                } catch (e) {
-                    this.logService.error(e);
-                }
-            }
-            this.platformUtilsService.showToast('error', null, this.i18nService.t('emailVerifiedFailed'));
-            this.router.navigate(['/']);
-        });
-    }
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.userId != null && qParams.token != null) {
+        try {
+          await this.apiService.postAccountVerifyEmailToken(
+            new VerifyEmailRequest(qParams.userId, qParams.token)
+          );
+          if (await this.stateService.getIsAuthenticated()) {
+            await this.apiService.refreshIdentityToken();
+          }
+          this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+          this.router.navigate(["/"]);
+          return;
+        } catch (e) {
+          this.logService.error(e);
+        }
+      }
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("emailVerifiedFailed"));
+      this.router.navigate(["/"]);
+    });
+  }
 }

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

@@ -1,26 +1,34 @@
 <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">{{'deleteAccount' | i18n}}</p>
-            <div class="card">
-                <div class="card-body">
-                    <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
-                    <p class="text-center">
-                        <strong>{{email}}</strong>
-                    </p>
-                    <p>{{'deleteRecoverConfirmDesc' | i18n}}</p>
-                    <hr>
-                    <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}}" 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 class="row justify-content-md-center mt-5">
+    <div class="col-5">
+      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
+      <div class="card">
+        <div class="card-body">
+          <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+          <p class="text-center">
+            <strong>{{ email }}</strong>
+          </p>
+          <p>{{ "deleteRecoverConfirmDesc" | i18n }}</p>
+          <hr />
+          <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 }}"
+                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/verify-recover-delete.component.ts

@@ -1,59 +1,60 @@
-import {
-    Component,
-    OnInit,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { VerifyDeleteRecoverRequest } from 'jslib-common/models/request/verifyDeleteRecoverRequest';
+import { VerifyDeleteRecoverRequest } from "jslib-common/models/request/verifyDeleteRecoverRequest";
 
 @Component({
-    selector: 'app-verify-recover-delete',
-    templateUrl: 'verify-recover-delete.component.html',
+  selector: "app-verify-recover-delete",
+  templateUrl: "verify-recover-delete.component.html",
 })
 export class VerifyRecoverDeleteComponent implements OnInit {
-    email: string;
-    formPromise: Promise<any>;
+  email: string;
+  formPromise: Promise<any>;
 
-    private userId: string;
-    private token: string;
+  private userId: string;
+  private token: string;
 
-    constructor(private router: Router, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
-        private route: ActivatedRoute, private logService: LogService) {
-    }
-
-    ngOnInit() {
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            if (qParams.userId != null && qParams.token != null && qParams.email != null) {
-                this.userId = qParams.userId;
-                this.token = qParams.token;
-                this.email = qParams.email;
-            } else {
-                this.router.navigate(['/']);
-            }
-        });
-    }
-
-    async submit() {
-        try {
-            const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
-            this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
-            await this.formPromise;
-            this.platformUtilsService.showToast('success', this.i18nService.t('accountDeleted'),
-                this.i18nService.t('accountDeletedDesc'));
-            this.router.navigate(['/']);
-        } catch (e) {
-            this.logService.error(e);
-        }
+  constructor(
+    private router: Router,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private route: ActivatedRoute,
+    private logService: LogService
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      if (qParams.userId != null && qParams.token != null && qParams.email != null) {
+        this.userId = qParams.userId;
+        this.token = qParams.token;
+        this.email = qParams.email;
+      } else {
+        this.router.navigate(["/"]);
+      }
+    });
+  }
+
+  async submit() {
+    try {
+      const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
+      this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
+      await this.formPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        this.i18nService.t("accountDeleted"),
+        this.i18nService.t("accountDeletedDesc")
+      );
+      this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error(e);
     }
+  }
 }

src/app/app.component.ts

@@ -1,300 +1,310 @@
-import {
-    Component,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    SecurityContext,
-} from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import {
-    NavigationEnd,
-    Router,
-} from '@angular/router';
-import * as jq from 'jquery';
-import { IndividualConfig, ToastrService } from 'ngx-toastr';
-import Swal from 'sweetalert2';
+import { Component, NgZone, OnDestroy, OnInit, SecurityContext } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { NavigationEnd, Router } from "@angular/router";
+import * as jq from "jquery";
+import { IndividualConfig, ToastrService } from "ngx-toastr";
+import Swal from "sweetalert2";
 
-import { AuthService } from 'jslib-common/abstractions/auth.service';
-import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.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 { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
-import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
-import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-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 { StorageService } from 'jslib-common/abstractions/storage.service';
-import { SyncService } from 'jslib-common/abstractions/sync.service';
-import { TokenService } from 'jslib-common/abstractions/token.service';
-import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
+import { AuthService } from "jslib-common/abstractions/auth.service";
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.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 { KeyConnectorService } from "jslib-common/abstractions/keyConnector.service";
+import { NotificationsService } from "jslib-common/abstractions/notifications.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+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 { StorageService } from "jslib-common/abstractions/storage.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { TokenService } from "jslib-common/abstractions/token.service";
+import { VaultTimeoutService } from "jslib-common/abstractions/vaultTimeout.service";
 
-import { PolicyListService } from './services/policy-list.service';
-import { RouterService } from './services/router.service';
+import { PolicyListService } from "./services/policy-list.service";
+import { RouterService } from "./services/router.service";
 
-import { DisableSendPolicy } from './organizations/policies/disable-send.component';
-import { MasterPasswordPolicy } from './organizations/policies/master-password.component';
-import { PasswordGeneratorPolicy } from './organizations/policies/password-generator.component';
-import { PersonalOwnershipPolicy } from './organizations/policies/personal-ownership.component';
-import { RequireSsoPolicy } from './organizations/policies/require-sso.component';
-import { ResetPasswordPolicy } from './organizations/policies/reset-password.component';
-import { SendOptionsPolicy } from './organizations/policies/send-options.component';
-import { SingleOrgPolicy } from './organizations/policies/single-org.component';
-import { TwoFactorAuthenticationPolicy } from './organizations/policies/two-factor-authentication.component';
+import { DisableSendPolicy } from "./organizations/policies/disable-send.component";
+import { MasterPasswordPolicy } from "./organizations/policies/master-password.component";
+import { PasswordGeneratorPolicy } from "./organizations/policies/password-generator.component";
+import { PersonalOwnershipPolicy } from "./organizations/policies/personal-ownership.component";
+import { RequireSsoPolicy } from "./organizations/policies/require-sso.component";
+import { ResetPasswordPolicy } from "./organizations/policies/reset-password.component";
+import { SendOptionsPolicy } from "./organizations/policies/send-options.component";
+import { SingleOrgPolicy } from "./organizations/policies/single-org.component";
+import { TwoFactorAuthenticationPolicy } from "./organizations/policies/two-factor-authentication.component";
 
-const BroadcasterSubscriptionId = 'AppComponent';
+const BroadcasterSubscriptionId = "AppComponent";
 const IdleTimeout = 60000 * 10; // 10 minutes
 
 @Component({
-    selector: 'app-root',
-    templateUrl: 'app.component.html',
+  selector: "app-root",
+  templateUrl: "app.component.html",
 })
 export class AppComponent implements OnDestroy, OnInit {
+  private lastActivity: number = null;
+  private idleTimer: number = null;
+  private isIdle = false;
 
-    private lastActivity: number = null;
-    private idleTimer: number = null;
-    private isIdle = false;
+  constructor(
+    private broadcasterService: BroadcasterService,
+    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 toastrService: ToastrService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private ngZone: NgZone,
+    private vaultTimeoutService: VaultTimeoutService,
+    private cryptoService: CryptoService,
+    private collectionService: CollectionService,
+    private sanitizer: DomSanitizer,
+    private searchService: SearchService,
+    private notificationsService: NotificationsService,
+    private routerService: RouterService,
+    private stateService: StateService,
+    private eventService: EventService,
+    private policyService: PolicyService,
+    protected policyListService: PolicyListService,
+    private keyConnectorService: KeyConnectorService
+  ) {}
 
-    constructor(
-        private broadcasterService: BroadcasterService,
-        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 toastrService: ToastrService,
-        private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService,
-        private ngZone: NgZone,
-        private vaultTimeoutService: VaultTimeoutService,
-        private cryptoService: CryptoService,
-        private collectionService: CollectionService,
-        private sanitizer: DomSanitizer,
-        private searchService: SearchService,
-        private notificationsService: NotificationsService,
-        private routerService: RouterService,
-        private stateService: StateService,
-        private eventService: EventService,
-        private policyService: PolicyService,
-        protected policyListService: PolicyListService,
-        private keyConnectorService: KeyConnectorService
-    ) { }
+  ngOnInit() {
+    this.ngZone.runOutsideAngular(() => {
+      window.onmousemove = () => this.recordActivity();
+      window.onmousedown = () => this.recordActivity();
+      window.ontouchstart = () => this.recordActivity();
+      window.onclick = () => this.recordActivity();
+      window.onscroll = () => this.recordActivity();
+      window.onkeypress = () => this.recordActivity();
+    });
 
-    ngOnInit() {
-        this.ngZone.runOutsideAngular(() => {
-            window.onmousemove = () => this.recordActivity();
-            window.onmousedown = () => this.recordActivity();
-            window.ontouchstart = () => this.recordActivity();
-            window.onclick = () => this.recordActivity();
-            window.onscroll = () => this.recordActivity();
-            window.onkeypress = () => this.recordActivity();
-        });
-
-        this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
-            this.ngZone.run(async () => {
-                switch (message.command) {
-                    case 'loggedIn':
-                    case 'loggedOut':
-                    case 'unlocked':
-                        this.notificationsService.updateConnection(false);
-                        break;
-                    case 'authBlocked':
-                        this.router.navigate(['/']);
-                        break;
-                    case 'logout':
-                        this.logOut(!!message.expired);
-                        break;
-                    case 'lockVault':
-                        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':
-                        break;
-                    case 'upgradeOrganization':
-                        const upgradeConfirmed = await this.platformUtilsService.showDialog(
-                            this.i18nService.t('upgradeOrganizationDesc'), this.i18nService.t('upgradeOrganization'),
-                            this.i18nService.t('upgradeOrganization'), this.i18nService.t('cancel'));
-                        if (upgradeConfirmed) {
-                            this.router.navigate(['organizations', message.organizationId, 'settings', 'billing']);
-                        }
-                        break;
-                    case 'premiumRequired':
-                        const premiumConfirmed = await this.platformUtilsService.showDialog(
-                            this.i18nService.t('premiumRequiredDesc'), this.i18nService.t('premiumRequired'),
-                            this.i18nService.t('learnMore'), this.i18nService.t('cancel'));
-                        if (premiumConfirmed) {
-                            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 'setFullWidth':
-                        this.setFullWidth();
-                        break;
-                    case 'convertAccountToKeyConnector':
-                        this.keyConnectorService.setConvertAccountRequired(true);
-                        this.router.navigate(['/remove-password']);
-                        break;
-                    default:
-                        break;
-                }
-            });
-        });
-
-        this.router.events.subscribe(event => {
-            if (event instanceof NavigationEnd) {
-                const modals = Array.from(document.querySelectorAll('.modal'));
-                for (const modal of modals) {
-                    (jq(modal) as any).modal('hide');
-                }
-
-                if (document.querySelector('.swal-modal') != null) {
-                    Swal.close(undefined);
-                }
+    this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+      this.ngZone.run(async () => {
+        switch (message.command) {
+          case "loggedIn":
+          case "loggedOut":
+          case "unlocked":
+            this.notificationsService.updateConnection(false);
+            break;
+          case "authBlocked":
+            this.router.navigate(["/"]);
+            break;
+          case "logout":
+            this.logOut(!!message.expired);
+            break;
+          case "lockVault":
+            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":
+            break;
+          case "upgradeOrganization":
+            const upgradeConfirmed = await this.platformUtilsService.showDialog(
+              this.i18nService.t("upgradeOrganizationDesc"),
+              this.i18nService.t("upgradeOrganization"),
+              this.i18nService.t("upgradeOrganization"),
+              this.i18nService.t("cancel")
+            );
+            if (upgradeConfirmed) {
+              this.router.navigate([
+                "organizations",
+                message.organizationId,
+                "settings",
+                "billing",
+              ]);
             }
-        });
-
-        this.policyListService.addPolicies([
-            new TwoFactorAuthenticationPolicy(),
-            new MasterPasswordPolicy(),
-            new PasswordGeneratorPolicy(),
-            new SingleOrgPolicy(),
-            new RequireSsoPolicy(),
-            new PersonalOwnershipPolicy(),
-            new DisableSendPolicy(),
-            new SendOptionsPolicy(),
-            new ResetPasswordPolicy(),
-        ]);
-
-        this.setFullWidth();
-    }
-
-    ngOnDestroy() {
-        this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
-    }
-
-    private async logOut(expired: boolean) {
-        await this.eventService.uploadEvents();
-        const userId = await this.stateService.getUserId();
-        await Promise.all([
-            this.eventService.clearEvents(),
-            this.syncService.setLastSync(new Date(0)),
-            this.tokenService.clearToken(),
-            this.cryptoService.clearKeys(),
-            this.settingsService.clear(userId),
-            this.cipherService.clear(userId),
-            this.folderService.clear(userId),
-            this.collectionService.clear(userId),
-            this.policyService.clear(userId),
-            this.passwordGenerationService.clear(),
-            this.keyConnectorService.clear(),
-        ]);
-
-        this.searchService.clearIndex();
-        this.authService.logOut(async () => {
-            if (expired) {
-                this.platformUtilsService.showToast('warning', this.i18nService.t('loggedOut'),
-                    this.i18nService.t('loginExpired'));
+            break;
+          case "premiumRequired":
+            const premiumConfirmed = await this.platformUtilsService.showDialog(
+              this.i18nService.t("premiumRequiredDesc"),
+              this.i18nService.t("premiumRequired"),
+              this.i18nService.t("learnMore"),
+              this.i18nService.t("cancel")
+            );
+            if (premiumConfirmed) {
+              this.router.navigate(["settings/premium"]);
             }
-
-            await this.stateService.clean({ userId: userId });
-            Swal.close();
-            this.router.navigate(['/']);
-        });
-    }
-
-    private async recordActivity() {
-        const now = (new Date()).getTime();
-        if (this.lastActivity != null && now - this.lastActivity < 250) {
-            return;
-        }
-
-        this.lastActivity = now;
-        this.stateService.setLastActive(now);
-        // Idle states
-        if (this.isIdle) {
-            this.isIdle = false;
-            this.idleStateChanged();
-        }
-        if (this.idleTimer != null) {
-            window.clearTimeout(this.idleTimer);
-            this.idleTimer = null;
-        }
-        this.idleTimer = window.setTimeout(() => {
-            if (!this.isIdle) {
-                this.isIdle = true;
-                this.idleStateChanged();
+            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/"
+              );
             }
-        }, IdleTimeout);
-    }
-
-    private showToast(msg: any) {
-        let message = '';
-
-        const options: Partial<IndividualConfig> = {};
-
-        if (typeof (msg.text) === 'string') {
-            message = msg.text;
-        } else if (msg.text.length === 1) {
-            message = msg.text[0];
-        } else {
-            msg.text.forEach((t: string) =>
-                message += ('<p>' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '</p>'));
-            options.enableHtml = true;
+            break;
+          case "showToast":
+            this.showToast(message);
+            break;
+          case "setFullWidth":
+            this.setFullWidth();
+            break;
+          case "convertAccountToKeyConnector":
+            this.keyConnectorService.setConvertAccountRequired(true);
+            this.router.navigate(["/remove-password"]);
+            break;
+          default:
+            break;
         }
-        if (msg.options != null) {
-            if (msg.options.trustedHtml === true) {
-                options.enableHtml = true;
-            }
-            if (msg.options.timeout != null && msg.options.timeout > 0) {
-                options.timeOut = msg.options.timeout;
-            }
+      });
+    });
+
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        const modals = Array.from(document.querySelectorAll(".modal"));
+        for (const modal of modals) {
+          (jq(modal) as any).modal("hide");
         }
 
-        this.toastrService.show(message, msg.title, options, 'toast-' + msg.type);
+        if (document.querySelector(".swal-modal") != null) {
+          Swal.close(undefined);
+        }
+      }
+    });
+
+    this.policyListService.addPolicies([
+      new TwoFactorAuthenticationPolicy(),
+      new MasterPasswordPolicy(),
+      new PasswordGeneratorPolicy(),
+      new SingleOrgPolicy(),
+      new RequireSsoPolicy(),
+      new PersonalOwnershipPolicy(),
+      new DisableSendPolicy(),
+      new SendOptionsPolicy(),
+      new ResetPasswordPolicy(),
+    ]);
+
+    this.setFullWidth();
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+
+  private async logOut(expired: boolean) {
+    await this.eventService.uploadEvents();
+    const userId = await this.stateService.getUserId();
+    await Promise.all([
+      this.eventService.clearEvents(),
+      this.syncService.setLastSync(new Date(0)),
+      this.tokenService.clearToken(),
+      this.cryptoService.clearKeys(),
+      this.settingsService.clear(userId),
+      this.cipherService.clear(userId),
+      this.folderService.clear(userId),
+      this.collectionService.clear(userId),
+      this.policyService.clear(userId),
+      this.passwordGenerationService.clear(),
+      this.keyConnectorService.clear(),
+    ]);
+
+    this.searchService.clearIndex();
+    this.authService.logOut(async () => {
+      if (expired) {
+        this.platformUtilsService.showToast(
+          "warning",
+          this.i18nService.t("loggedOut"),
+          this.i18nService.t("loginExpired")
+        );
+      }
+
+      await this.stateService.clean({ userId: userId });
+      Swal.close();
+      this.router.navigate(["/"]);
+    });
+  }
+
+  private async recordActivity() {
+    const now = new Date().getTime();
+    if (this.lastActivity != null && now - this.lastActivity < 250) {
+      return;
     }
 
-    private idleStateChanged() {
-        if (this.isIdle) {
-            this.notificationsService.disconnectFromInactivity();
-        } else {
-            this.notificationsService.reconnectFromActivity();
-        }
+    this.lastActivity = now;
+    this.stateService.setLastActive(now);
+    // Idle states
+    if (this.isIdle) {
+      this.isIdle = false;
+      this.idleStateChanged();
+    }
+    if (this.idleTimer != null) {
+      window.clearTimeout(this.idleTimer);
+      this.idleTimer = null;
+    }
+    this.idleTimer = window.setTimeout(() => {
+      if (!this.isIdle) {
+        this.isIdle = true;
+        this.idleStateChanged();
+      }
+    }, IdleTimeout);
+  }
+
+  private showToast(msg: any) {
+    let message = "";
+
+    const options: Partial<IndividualConfig> = {};
+
+    if (typeof msg.text === "string") {
+      message = msg.text;
+    } else if (msg.text.length === 1) {
+      message = msg.text[0];
+    } else {
+      msg.text.forEach(
+        (t: string) =>
+          (message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>")
+      );
+      options.enableHtml = true;
+    }
+    if (msg.options != null) {
+      if (msg.options.trustedHtml === true) {
+        options.enableHtml = true;
+      }
+      if (msg.options.timeout != null && msg.options.timeout > 0) {
+        options.timeOut = msg.options.timeout;
+      }
     }
 
-    private async setFullWidth() {
-        const enableFullWidth = await this.stateService.getEnableFullWidth();
-        if (enableFullWidth) {
-            document.body.classList.add('full-width');
-        } else {
-            document.body.classList.remove('full-width');
-        }
+    this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
+  }
+
+  private idleStateChanged() {
+    if (this.isIdle) {
+      this.notificationsService.disconnectFromInactivity();
+    } else {
+      this.notificationsService.reconnectFromActivity();
     }
+  }
+
+  private async setFullWidth() {
+    const enableFullWidth = await this.stateService.getEnableFullWidth();
+    if (enableFullWidth) {
+      document.body.classList.add("full-width");
+    } else {
+      document.body.classList.remove("full-width");
+    }
+  }
 }

src/app/app.module.ts

@@ -1,37 +1,35 @@
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
 
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DragDropModule } from "@angular/cdk/drag-drop";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
-import { BitwardenToastModule } from 'jslib-angular/components/toastr.component';
+import { BitwardenToastModule } from "jslib-angular/components/toastr.component";
 
-import { AppComponent } from './app.component';
-import { OssRoutingModule } from './oss-routing.module';
-import { OssModule } from './oss.module';
-import { ServicesModule } from './services/services.module';
-import { WildcardRoutingModule } from './wildcard-routing.module';
+import { AppComponent } from "./app.component";
+import { OssRoutingModule } from "./oss-routing.module";
+import { OssModule } from "./oss.module";
+import { ServicesModule } from "./services/services.module";
+import { WildcardRoutingModule } from "./wildcard-routing.module";
 
 @NgModule({
-    imports: [
-        OssModule,
-        BrowserAnimationsModule,
-        FormsModule,
-        ServicesModule,
-        BitwardenToastModule.forRoot({
-            maxOpened: 5,
-            autoDismiss: true,
-            closeButton: true,
-        }),
-        InfiniteScrollModule,
-        DragDropModule,
-        OssRoutingModule,
-        WildcardRoutingModule, // Needs to be last to catch all non-existing routes
-    ],
-    declarations: [
-        AppComponent,
-    ],
-    bootstrap: [AppComponent],
+  imports: [
+    OssModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ServicesModule,
+    BitwardenToastModule.forRoot({
+      maxOpened: 5,
+      autoDismiss: true,
+      closeButton: true,
+    }),
+    InfiniteScrollModule,
+    DragDropModule,
+    OssRoutingModule,
+    WildcardRoutingModule, // Needs to be last to catch all non-existing routes
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/common/base.accept.component.ts

@@ -1,76 +1,78 @@
-import {
-    Directive,
-    OnInit,
-} from '@angular/core';
-import {
-    ActivatedRoute,
-    Router,
-} from '@angular/router';
+import { Directive, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 
-import { first } from 'rxjs/operators';
+import { first } from "rxjs/operators";
 
-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 { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
 @Directive()
 export abstract class BaseAcceptComponent implements OnInit {
-    loading = true;
-    authed = false;
-    email: string;
-    actionPromise: Promise<any>;
+  loading = true;
+  authed = false;
+  email: string;
+  actionPromise: Promise<any>;
 
-    protected requiredParameters: string[] = [];
-    protected failedShortMessage = 'inviteAcceptFailedShort';
-    protected failedMessage = 'inviteAcceptFailed';
+  protected requiredParameters: string[] = [];
+  protected failedShortMessage = "inviteAcceptFailedShort";
+  protected failedMessage = "inviteAcceptFailed";
 
-    constructor(protected router: Router, protected platformUtilService: PlatformUtilsService,
-        protected i18nService: I18nService, protected route: ActivatedRoute,
-        protected stateService: StateService) { }
+  constructor(
+    protected router: Router,
+    protected platformUtilService: PlatformUtilsService,
+    protected i18nService: I18nService,
+    protected route: ActivatedRoute,
+    protected stateService: StateService
+  ) {}
 
-    abstract authedHandler(qParams: any): Promise<void>;
-    abstract unauthedHandler(qParams: any): Promise<void>;
+  abstract authedHandler(qParams: any): Promise<void>;
+  abstract unauthedHandler(qParams: any): Promise<void>;
 
-    ngOnInit() {
-        this.route.queryParams.pipe(first()).subscribe(async qParams => {
-            await this.stateService.setLoginRedirect(null);
-            let error = this.requiredParameters.some(e => qParams?.[e] == null || qParams[e] === '');
-            let errorMessage: string = null;
-            if (!error) {
-                this.authed = await this.stateService.getIsAuthenticated();
+  ngOnInit() {
+    this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
+      await this.stateService.setLoginRedirect(null);
+      let error = this.requiredParameters.some((e) => qParams?.[e] == null || qParams[e] === "");
+      let errorMessage: string = null;
+      if (!error) {
+        this.authed = await this.stateService.getIsAuthenticated();
 
-                if (this.authed) {
-                    try {
-                        await this.authedHandler(qParams);
-                    } catch (e) {
-                        error = true;
-                        errorMessage = e.message;
-                    }
-                } else {
-                    await this.stateService.setLoginRedirect({
-                        route: this.getRedirectRoute(),
-                        qParams: qParams,
-                    });
+        if (this.authed) {
+          try {
+            await this.authedHandler(qParams);
+          } catch (e) {
+            error = true;
+            errorMessage = e.message;
+          }
+        } else {
+          await this.stateService.setLoginRedirect({
+            route: this.getRedirectRoute(),
+            qParams: qParams,
+          });
 
-                    this.email = qParams.email;
-                    await this.unauthedHandler(qParams);
-                }
-            }
+          this.email = qParams.email;
+          await this.unauthedHandler(qParams);
+        }
+      }
 
-            if (error) {
-                const message = errorMessage != null ? this.i18nService.t(this.failedShortMessage, errorMessage) :
-                        this.i18nService.t(this.failedMessage);
-                this.platformUtilService.showToast('error', null, message, {timeout: 10000});
-                this.router.navigate(['/']);
-            }
-
-            this.loading = false;
+      if (error) {
+        const message =
+          errorMessage != null
+            ? this.i18nService.t(this.failedShortMessage, errorMessage)
+            : this.i18nService.t(this.failedMessage);
+        this.platformUtilService.showToast("error", null, message, {
+          timeout: 10000,
         });
-    }
+        this.router.navigate(["/"]);
+      }
 
-    getRedirectRoute() {
-        const urlTree = this.router.parseUrl(this.router.url);
-        urlTree.queryParams = {};
-        return urlTree.toString();
-    }
+      this.loading = false;
+    });
+  }
+
+  getRedirectRoute() {
+    const urlTree = this.router.parseUrl(this.router.url);
+    urlTree.queryParams = {};
+    return urlTree.toString();
+  }
 }

src/app/common/base.events.component.ts

@@ -1,156 +1,193 @@
-import { Directive } from '@angular/core';
+import { Directive } from "@angular/core";
 
-import { ExportService } from 'jslib-common/abstractions/export.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { ExportService } from "jslib-common/abstractions/export.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { EventView } from 'jslib-common/models/view/eventView';
+import { EventView } from "jslib-common/models/view/eventView";
 
-import { EventResponse } from 'jslib-common/models/response/eventResponse';
-import { ListResponse } from 'jslib-common/models/response/listResponse';
+import { EventResponse } from "jslib-common/models/response/eventResponse";
+import { ListResponse } from "jslib-common/models/response/listResponse";
 
-import { EventService } from 'src/app/services/event.service';
+import { EventService } from "src/app/services/event.service";
 
 @Directive()
 export abstract class BaseEventsComponent {
-    loading = true;
-    loaded = false;
-    events: EventView[];
-    start: string;
-    end: string;
-    dirtyDates: boolean = true;
-    continuationToken: string;
-    refreshPromise: Promise<any>;
-    exportPromise: Promise<any>;
-    morePromise: Promise<any>;
+  loading = true;
+  loaded = false;
+  events: EventView[];
+  start: string;
+  end: string;
+  dirtyDates: boolean = true;
+  continuationToken: string;
+  refreshPromise: Promise<any>;
+  exportPromise: Promise<any>;
+  morePromise: Promise<any>;
 
-    abstract readonly exportFileName: string;
+  abstract readonly exportFileName: string;
 
-    constructor(protected eventService: EventService, protected i18nService: I18nService,
-        protected exportService: ExportService, protected platformUtilsService: PlatformUtilsService,
-        protected logService: LogService) {
-        const defaultDates = this.eventService.getDefaultDateFilters();
-        this.start = defaultDates[0];
-        this.end = defaultDates[1];
+  constructor(
+    protected eventService: EventService,
+    protected i18nService: I18nService,
+    protected exportService: ExportService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected logService: LogService
+  ) {
+    const defaultDates = this.eventService.getDefaultDateFilters();
+    this.start = defaultDates[0];
+    this.end = defaultDates[1];
+  }
+
+  async exportEvents() {
+    if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
+      return;
     }
 
-    async exportEvents() {
-        if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
-            return;
-        }
+    this.loading = true;
 
-        this.loading = true;
-
-        const dates = this.parseDates();
-        if (dates == null) {
-            return;
-        }
-
-        try {
-            this.exportPromise = this.export(dates[0], dates[1]);
-
-            await this.exportPromise;
-        } catch (e) {
-            this.logService.error(`Handled exception: ${e}`);
-        }
-
-        this.exportPromise = null;
-        this.loading = false;
+    const dates = this.parseDates();
+    if (dates == null) {
+      return;
     }
 
-    async loadEvents(clearExisting: boolean) {
-        if (this.appApiPromiseUnfulfilled()) {
-            return;
-        }
+    try {
+      this.exportPromise = this.export(dates[0], dates[1]);
 
-        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;
-            }
-            const result = await promise;
-            this.continuationToken = result.continuationToken;
-            events = result.events;
-        } catch (e) {
-            this.logService.error(`Handled exception: ${e}`);
-        }
-
-        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;
+      await this.exportPromise;
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
     }
 
-    protected abstract requestEvents(startDate: string, endDate: string, continuationToken: string): Promise<ListResponse<EventResponse>>;
-    protected abstract getUserName(r: EventResponse, userId: string): { name: string, email: string };
+    this.exportPromise = null;
+    this.loading = false;
+  }
 
-    protected async loadAndParseEvents(startDate: string, endDate: string, continuationToken: string) {
-        const response = await this.requestEvents(startDate, endDate, continuationToken);
-
-        const events = await Promise.all(response.data.map(async r => {
-            const userId = r.actingUserId == null ? r.userId : r.actingUserId;
-            const eventInfo = await this.eventService.getEventInfo(r);
-            const user = this.getUserName(r, userId);
-            return new EventView({
-                message: eventInfo.message,
-                humanReadableMessage: eventInfo.humanReadableMessage,
-                appIcon: eventInfo.appIcon,
-                appName: eventInfo.appName,
-                userId: userId,
-                userName: user != null ? user.name : this.i18nService.t('unknown'),
-                userEmail: user != null ? user.email : '',
-                date: r.date,
-                ip: r.ipAddress,
-                type: r.type,
-            });
-        }));
-        return { continuationToken: response.continuationToken, events: events };
+  async loadEvents(clearExisting: boolean) {
+    if (this.appApiPromiseUnfulfilled()) {
+      return;
     }
 
-    protected parseDates() {
-        let dates: string[] = null;
-        try {
-            dates = this.eventService.formatDateFilters(this.start, this.end);
-        } catch (e) {
-            this.platformUtilsService.showToast('error', this.i18nService.t('errorOccurred'),
-                this.i18nService.t('invalidDateRange'));
-            return null;
-        }
-        return dates;
+    const dates = this.parseDates();
+    if (dates == null) {
+      return;
     }
 
-    protected appApiPromiseUnfulfilled() {
-        return this.refreshPromise != null || this.morePromise != null || this.exportPromise != null;
+    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;
+      }
+      const result = await promise;
+      this.continuationToken = result.continuationToken;
+      events = result.events;
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
     }
 
-    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(this.exportFileName, 'csv');
-        this.platformUtilsService.saveFile(window, data, { type: 'text/plain' }, fileName);
+    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;
+  }
+
+  protected abstract requestEvents(
+    startDate: string,
+    endDate: string,
+    continuationToken: string
+  ): Promise<ListResponse<EventResponse>>;
+  protected abstract getUserName(
+    r: EventResponse,
+    userId: string
+  ): {
+    name: string;
+    email: string;
+  };
+
+  protected async loadAndParseEvents(
+    startDate: string,
+    endDate: string,
+    continuationToken: string
+  ) {
+    const response = await this.requestEvents(startDate, endDate, continuationToken);
+
+    const events = await Promise.all(
+      response.data.map(async (r) => {
+        const userId = r.actingUserId == null ? r.userId : r.actingUserId;
+        const eventInfo = await this.eventService.getEventInfo(r);
+        const user = this.getUserName(r, userId);
+        return new EventView({
+          message: eventInfo.message,
+          humanReadableMessage: eventInfo.humanReadableMessage,
+          appIcon: eventInfo.appIcon,
+          appName: eventInfo.appName,
+          userId: userId,
+          userName: user != null ? user.name : this.i18nService.t("unknown"),
+          userEmail: user != null ? user.email : "",
+          date: r.date,
+          ip: r.ipAddress,
+          type: r.type,
+        });
+      })
+    );
+    return {
+      continuationToken: response.continuationToken,
+      events: events,
+    };
+  }
+
+  protected parseDates() {
+    let dates: string[] = null;
+    try {
+      dates = this.eventService.formatDateFilters(this.start, this.end);
+    } catch (e) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("invalidDateRange")
+      );
+      return null;
+    }
+    return dates;
+  }
+
+  protected appApiPromiseUnfulfilled() {
+    return this.refreshPromise != null || this.morePromise != null || this.exportPromise != 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(this.exportFileName, "csv");
+    this.platformUtilsService.saveFile(
+      window,
+      data,
+      {
+        type: "text/plain",
+      },
+      fileName
+    );
+  }
 }

src/app/common/base.people.component.ts

@@ -1,320 +1,353 @@
-import {
-    Directive,
-    ViewChild,
-    ViewContainerRef
-} from '@angular/core';
+import { Directive, ViewChild, ViewContainerRef } 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 { LogService } from 'jslib-common/abstractions/log.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { SearchService } from 'jslib-common/abstractions/search.service';
-import { StateService } from 'jslib-common/abstractions/state.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 { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SearchService } from "jslib-common/abstractions/search.service";
+import { StateService } from "jslib-common/abstractions/state.service";
 
-import { ModalService } from 'jslib-angular/services/modal.service';
-import { ValidationService } from 'jslib-angular/services/validation.service';
+import { ModalService } from "jslib-angular/services/modal.service";
+import { ValidationService } from "jslib-angular/services/validation.service";
 
-import { SearchPipe } from 'jslib-angular/pipes/search.pipe';
-import { UserNamePipe } from 'jslib-angular/pipes/user-name.pipe';
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
+import { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
 
-import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
-import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
-import { ProviderUserStatusType } from 'jslib-common/enums/providerUserStatusType';
-import { ProviderUserType } from 'jslib-common/enums/providerUserType';
+import { OrganizationUserStatusType } from "jslib-common/enums/organizationUserStatusType";
+import { OrganizationUserType } from "jslib-common/enums/organizationUserType";
+import { ProviderUserStatusType } from "jslib-common/enums/providerUserStatusType";
+import { ProviderUserType } from "jslib-common/enums/providerUserType";
 
-import { ListResponse } from 'jslib-common/models/response/listResponse';
-import { OrganizationUserUserDetailsResponse } from 'jslib-common/models/response/organizationUserResponse';
-import { ProviderUserUserDetailsResponse } from 'jslib-common/models/response/provider/providerUserResponse';
+import { ListResponse } from "jslib-common/models/response/listResponse";
+import { OrganizationUserUserDetailsResponse } from "jslib-common/models/response/organizationUserResponse";
+import { ProviderUserUserDetailsResponse } from "jslib-common/models/response/provider/providerUserResponse";
 
-import { Utils } from 'jslib-common/misc/utils';
+import { Utils } from "jslib-common/misc/utils";
 
-import { UserConfirmComponent } from '../organizations/manage/user-confirm.component';
+import { UserConfirmComponent } from "../organizations/manage/user-confirm.component";
 
 type StatusType = OrganizationUserStatusType | ProviderUserStatusType;
 
 const MaxCheckedCount = 500;
 
 @Directive()
-export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse>  {
+export abstract class BasePeopleComponent<
+  UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse
+> {
+  @ViewChild("confirmTemplate", {
+    read: ViewContainerRef,
+    static: true,
+  })
+  confirmModalRef: ViewContainerRef;
 
-    @ViewChild('confirmTemplate', { read: ViewContainerRef, static: true }) confirmModalRef: ViewContainerRef;
+  get allCount() {
+    return this.allUsers != null ? this.allUsers.length : 0;
+  }
 
-    get allCount() {
-        return this.allUsers != null ? this.allUsers.length : 0;
+  get invitedCount() {
+    return this.statusMap.has(this.userStatusType.Invited)
+      ? this.statusMap.get(this.userStatusType.Invited).length
+      : 0;
+  }
+
+  get acceptedCount() {
+    return this.statusMap.has(this.userStatusType.Accepted)
+      ? this.statusMap.get(this.userStatusType.Accepted).length
+      : 0;
+  }
+
+  get confirmedCount() {
+    return this.statusMap.has(this.userStatusType.Confirmed)
+      ? this.statusMap.get(this.userStatusType.Confirmed).length
+      : 0;
+  }
+
+  get showConfirmUsers(): boolean {
+    return (
+      this.allUsers != null &&
+      this.statusMap != null &&
+      this.allUsers.length > 1 &&
+      this.confirmedCount > 0 &&
+      this.confirmedCount < 3 &&
+      this.acceptedCount > 0
+    );
+  }
+
+  get showBulkConfirmUsers(): boolean {
+    return this.acceptedCount > 0;
+  }
+
+  abstract userType: typeof OrganizationUserType | typeof ProviderUserType;
+  abstract userStatusType: typeof OrganizationUserStatusType | typeof ProviderUserStatusType;
+
+  loading = true;
+  statusMap = new Map<StatusType, UserType[]>();
+  status: StatusType;
+  users: UserType[] = [];
+  pagedUsers: UserType[] = [];
+  searchText: string;
+  actionPromise: Promise<any>;
+
+  protected allUsers: UserType[] = [];
+
+  protected didScroll = false;
+  protected pageSize = 100;
+
+  private pagedUsersCount = 0;
+
+  constructor(
+    protected apiService: ApiService,
+    private searchService: SearchService,
+    protected i18nService: I18nService,
+    protected platformUtilsService: PlatformUtilsService,
+    protected cryptoService: CryptoService,
+    protected validationService: ValidationService,
+    protected modalService: ModalService,
+    private logService: LogService,
+    private searchPipe: SearchPipe,
+    protected userNamePipe: UserNamePipe,
+    protected stateService: StateService
+  ) {}
+
+  abstract edit(user: UserType): void;
+  abstract getUsers(): Promise<ListResponse<UserType>>;
+  abstract deleteUser(id: string): Promise<any>;
+  abstract reinviteUser(id: string): Promise<any>;
+  abstract confirmUser(user: UserType, publicKey: Uint8Array): Promise<any>;
+
+  async load() {
+    const response = await this.getUsers();
+    this.statusMap.clear();
+    for (const status of Utils.iterateEnum(this.userStatusType)) {
+      this.statusMap.set(status, []);
     }
 
-    get invitedCount() {
-        return this.statusMap.has(this.userStatusType.Invited) ?
-            this.statusMap.get(this.userStatusType.Invited).length : 0;
+    this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
+    this.allUsers.sort(Utils.getSortFunction(this.i18nService, "email"));
+    this.allUsers.forEach((u) => {
+      if (!this.statusMap.has(u.status)) {
+        this.statusMap.set(u.status, [u]);
+      } else {
+        this.statusMap.get(u.status).push(u);
+      }
+    });
+    this.filter(this.status);
+    this.loading = false;
+  }
+
+  filter(status: StatusType) {
+    this.status = status;
+    if (this.status != null) {
+      this.users = this.statusMap.get(this.status);
+    } 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;
+  }
+
+  checkUser(user: OrganizationUserUserDetailsResponse, select?: boolean) {
+    (user as any).checked = select == null ? !(user as any).checked : select;
+  }
+
+  selectAll(select: boolean) {
+    if (select) {
+      this.selectAll(false);
     }
 
-    get acceptedCount() {
-        return this.statusMap.has(this.userStatusType.Accepted) ?
-            this.statusMap.get(this.userStatusType.Accepted).length : 0;
+    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);
+    }
+  }
+
+  async resetPaging() {
+    this.pagedUsers = [];
+    this.loadMore();
+  }
+
+  invite() {
+    this.edit(null);
+  }
+
+  async remove(user: UserType) {
+    const confirmed = await this.platformUtilsService.showDialog(
+      this.deleteWarningMessage(user),
+      this.userNamePipe.transform(user),
+      this.i18nService.t("yes"),
+      this.i18nService.t("no"),
+      "warning"
+    );
+
+    if (!confirmed) {
+      return false;
     }
 
-    get confirmedCount() {
-        return this.statusMap.has(this.userStatusType.Confirmed) ?
-            this.statusMap.get(this.userStatusType.Confirmed).length : 0;
+    this.actionPromise = this.deleteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("removedUserId", this.userNamePipe.transform(user))
+      );
+      this.removeUser(user);
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async reinvite(user: UserType) {
+    if (this.actionPromise != null) {
+      return;
     }
 
-    get showConfirmUsers(): boolean {
-        return this.allUsers != null && this.statusMap != null && this.allUsers.length > 1 &&
-            this.confirmedCount > 0 && this.confirmedCount < 3 && this.acceptedCount > 0;
+    this.actionPromise = this.reinviteUser(user.id);
+    try {
+      await this.actionPromise;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("hasBeenReinvited", this.userNamePipe.transform(user))
+      );
+    } catch (e) {
+      this.validationService.showError(e);
+    }
+    this.actionPromise = null;
+  }
+
+  async confirm(user: UserType) {
+    function updateUser(self: BasePeopleComponent<UserType>) {
+      user.status = self.userStatusType.Confirmed;
+      const mapIndex = self.statusMap.get(self.userStatusType.Accepted).indexOf(user);
+      if (mapIndex > -1) {
+        self.statusMap.get(self.userStatusType.Accepted).splice(mapIndex, 1);
+        self.statusMap.get(self.userStatusType.Confirmed).push(user);
+      }
     }
 
-    get showBulkConfirmUsers(): boolean {
-        return this.acceptedCount > 0;
-    }
-
-    abstract userType: typeof OrganizationUserType | typeof ProviderUserType;
-    abstract userStatusType: typeof OrganizationUserStatusType | typeof ProviderUserStatusType;
-
-    loading = true;
-    statusMap = new Map<StatusType, UserType[]>();
-    status: StatusType;
-    users: UserType[] = [];
-    pagedUsers: UserType[] = [];
-    searchText: string;
-    actionPromise: Promise<any>;
-
-    protected allUsers: UserType[] = [];
-
-    protected didScroll = false;
-    protected pageSize = 100;
-
-    private pagedUsersCount = 0;
-
-    constructor(
-        protected apiService: ApiService,
-        private searchService: SearchService,
-        protected i18nService: I18nService,
-        protected platformUtilsService: PlatformUtilsService,
-        protected cryptoService: CryptoService,
-        protected validationService: ValidationService,
-        protected modalService: ModalService,
-        private logService: LogService,
-        private searchPipe: SearchPipe,
-        protected userNamePipe: UserNamePipe,
-        protected stateService: StateService,
-    ) { }
-
-    abstract edit(user: UserType): void;
-    abstract getUsers(): Promise<ListResponse<UserType>>;
-    abstract deleteUser(id: string): Promise<any>;
-    abstract reinviteUser(id: string): Promise<any>;
-    abstract confirmUser(user: UserType, publicKey: Uint8Array): Promise<any>;
-
-    async load() {
-        const response = await this.getUsers();
-        this.statusMap.clear();
-        for (const status of Utils.iterateEnum(this.userStatusType)) {
-            this.statusMap.set(status, []);
-        }
-
-        this.allUsers = response.data != null && response.data.length > 0 ? response.data : [];
-        this.allUsers.sort(Utils.getSortFunction(this.i18nService, 'email'));
-        this.allUsers.forEach(u => {
-            if (!this.statusMap.has(u.status)) {
-                this.statusMap.set(u.status, [u]);
-            } else {
-                this.statusMap.get(u.status).push(u);
-            }
-        });
-        this.filter(this.status);
-        this.loading = false;
-    }
-
-    filter(status: StatusType) {
-        this.status = status;
-        if (this.status != null) {
-            this.users = this.statusMap.get(this.status);
-        } 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;
-    }
-
-    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);
-        }
-    }
-
-    async resetPaging() {
-        this.pagedUsers = [];
-        this.loadMore();
-    }
-
-    invite() {
-        this.edit(null);
-    }
-
-    async remove(user: UserType) {
-        const confirmed = await this.platformUtilsService.showDialog(
-            this.deleteWarningMessage(user), this.userNamePipe.transform(user),
-            this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
-
-        if (!confirmed) {
-            return false;
-        }
-
-        this.actionPromise = this.deleteUser(user.id);
-        try {
-            await this.actionPromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('removedUserId',
-                this.userNamePipe.transform(user)));
-            this.removeUser(user);
-        } catch (e) {
-            this.validationService.showError(e);
-        }
+    const confirmUser = async (publicKey: Uint8Array) => {
+      try {
+        this.actionPromise = this.confirmUser(user, publicKey);
+        await this.actionPromise;
+        updateUser(this);
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(user))
+        );
+      } catch (e) {
+        this.validationService.showError(e);
+        throw e;
+      } finally {
         this.actionPromise = null;
+      }
+    };
+
+    if (this.actionPromise != null) {
+      return;
     }
 
-    async reinvite(user: UserType) {
-        if (this.actionPromise != null) {
-            return;
-        }
+    try {
+      const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
+      const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
 
-        this.actionPromise = this.reinviteUser(user.id);
-        try {
-            await this.actionPromise;
-            this.platformUtilsService.showToast('success', null, this.i18nService.t('hasBeenReinvited',
-                this.userNamePipe.transform(user)));
-        } catch (e) {
-            this.validationService.showError(e);
-        }
-        this.actionPromise = null;
-    }
-
-    async confirm(user: UserType) {
-        function updateUser(self: BasePeopleComponent<UserType>) {
-            user.status = self.userStatusType.Confirmed;
-            const mapIndex = self.statusMap.get(self.userStatusType.Accepted).indexOf(user);
-            if (mapIndex > -1) {
-                self.statusMap.get(self.userStatusType.Accepted).splice(mapIndex, 1);
-                self.statusMap.get(self.userStatusType.Confirmed).push(user);
-            }
-        }
-
-        const confirmUser = async (publicKey: Uint8Array) => {
-            try {
-                this.actionPromise = this.confirmUser(user, publicKey);
-                await this.actionPromise;
-                updateUser(this);
-                this.platformUtilsService.showToast('success', null, this.i18nService.t('hasBeenConfirmed',
-                    this.userNamePipe.transform(user)));
-            } catch (e) {
-                this.validationService.showError(e);
-                throw e;
-            } finally {
-                this.actionPromise = null;
-            }
-        };
-
-        if (this.actionPromise != null) {
-            return;
-        }
-
-        try {
-            const publicKeyResponse = await this.apiService.getUserPublicKey(user.userId);
-            const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
-
-            const autoConfirm = await this.stateService.getAutoConfirmFingerPrints();
-            if (autoConfirm == null || !autoConfirm) {
-                const [modal] = await this.modalService.openViewRef(UserConfirmComponent, this.confirmModalRef, comp => {
-                    comp.name = this.userNamePipe.transform(user);
-                    comp.userId = user != null ? user.userId : null;
-                    comp.publicKey = publicKey;
-                    comp.onConfirmedUser.subscribe(async () => {
-                        try {
-                            comp.formPromise = confirmUser(publicKey);
-                            await comp.formPromise;
-                            modal.close();
-                        } catch (e) {
-                            this.logService.error(e);
-                        }
-                    });
-                });
-                return;
-            }
-
-            try {
-                const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey.buffer);
-                this.logService.info(`User's fingerprint: ${fingerprint.join('-')}`);
-            } catch (e) {
+      const autoConfirm = await this.stateService.getAutoConfirmFingerPrints();
+      if (autoConfirm == null || !autoConfirm) {
+        const [modal] = await this.modalService.openViewRef(
+          UserConfirmComponent,
+          this.confirmModalRef,
+          (comp) => {
+            comp.name = this.userNamePipe.transform(user);
+            comp.userId = user != null ? user.userId : null;
+            comp.publicKey = publicKey;
+            comp.onConfirmedUser.subscribe(async () => {
+              try {
+                comp.formPromise = confirmUser(publicKey);
+                await comp.formPromise;
+                modal.close();
+              } catch (e) {
                 this.logService.error(e);
-            }
-            await confirmUser(publicKey);
-        } catch (e) {
-            this.logService.error(`Handled exception: ${e}`);
-        }
-    }
+              }
+            });
+          }
+        );
+        return;
+      }
 
-    isSearching() {
-        return this.searchService.isSearchable(this.searchText);
+      try {
+        const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey.buffer);
+        this.logService.info(`User's fingerprint: ${fingerprint.join("-")}`);
+      } catch (e) {
+        this.logService.error(e);
+      }
+      await confirmUser(publicKey);
+    } catch (e) {
+      this.logService.error(`Handled exception: ${e}`);
     }
+  }
 
-    isPaging() {
-        const searching = this.isSearching();
-        if (searching && this.didScroll) {
-            this.resetPaging();
-        }
-        return !searching && this.users && this.users.length > this.pageSize;
+  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;
+  }
 
-    protected deleteWarningMessage(user: UserType): string {
-        return this.i18nService.t('removeUserConfirmation');
+  protected deleteWarningMessage(user: UserType): string {
+    return this.i18nService.t("removeUserConfirmation");
+  }
+
+  protected getCheckedUsers() {
+    return this.users.filter((u) => (u as any).checked);
+  }
+
+  protected removeUser(user: UserType) {
+    let index = this.users.indexOf(user);
+    if (index > -1) {
+      this.users.splice(index, 1);
+      this.resetPaging();
     }
-
-    protected getCheckedUsers() {
-        return this.users.filter(u => (u as any).checked);
+    if (this.statusMap.has(user.status)) {
+      index = this.statusMap.get(user.status).indexOf(user);
+      if (index > -1) {
+        this.statusMap.get(user.status).splice(index, 1);
+      }
     }
-
-    protected removeUser(user: UserType) {
-        let index = this.users.indexOf(user);
-        if (index > -1) {
-            this.users.splice(index, 1);
-            this.resetPaging();
-        }
-        if (this.statusMap.has(user.status)) {
-            index = this.statusMap.get(user.status).indexOf(user);
-            if (index > -1) {
-                this.statusMap.get(user.status).splice(index, 1);
-            }
-        }
-    }
-
+  }
 }

src/app/components/nested-checkbox.component.html

@@ -1,18 +1,30 @@
 <div class="form-group mb-0">
-    <div class="form-check mt-1 form-check-block">
-        <input class="form-check-input" type="checkbox" [name]="pascalize(parentId)" [id]="parentId"
-            [(ngModel)]="parentChecked" [indeterminate]="parentIndeterminate">
-        <label class="form-check-label font-weight-normal" [for]="parentId">
-            {{parentId | i18n}}
-        </label>
-    </div>
-    <div class="form-group form-group-child-check mb-0">
-        <div class="form-check mt-1" *ngFor="let c of checkboxes">
-            <input class="form-check-input" type="checkbox" [name]="pascalize(c.id)" [id]="c.id" [ngModel]="c.get()"
-                (ngModelChange)="c.set($event)">
-            <label class="form-check-label font-weight-normal" [for]="c.id">
-                {{c.id | i18n}}
-            </label>
-        </div>
+  <div class="form-check mt-1 form-check-block">
+    <input
+      class="form-check-input"
+      type="checkbox"
+      [name]="pascalize(parentId)"
+      [id]="parentId"
+      [(ngModel)]="parentChecked"
+      [indeterminate]="parentIndeterminate"
+    />
+    <label class="form-check-label font-weight-normal" [for]="parentId">
+      {{ parentId | i18n }}
+    </label>
+  </div>
+  <div class="form-group form-group-child-check mb-0">
+    <div class="form-check mt-1" *ngFor="let c of checkboxes">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        [name]="pascalize(c.id)"
+        [id]="c.id"
+        [ngModel]="c.get()"
+        (ngModelChange)="c.set($event)"
+      />
+      <label class="form-check-label font-weight-normal" [for]="c.id">
+        {{ c.id | i18n }}
+      </label>
     </div>
+  </div>
 </div>