WIP angular cli

2026-01-18 08:23:23 +00:00 · 2022-01-25 20:06:29 +01:00
parent f387a4d469
commit 17f5cf74b5
101 changed files with 23671 additions and 3553 deletions
--- a/projects/web-vault/src/app/app-routing.module.ts
+++ b/projects/web-vault/src/app/app-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+const routes: Routes = [
+  {
+    path: "providers",
+    loadChildren: async () => (await import("./providers/providers.module")).ProvidersModule,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/projects/web-vault/src/app/app.component.ts
+++ b/projects/web-vault/src/app/app.component.ts
@@ -0,0 +1,20 @@
+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";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "../../../../src/app/app.component.html",
+})
+export class AppComponent extends BaseAppComponent {
+  ngOnInit() {
+    super.ngOnInit();
+
+    this.policyListService.addPolicies([
+      new MaximumVaultTimeoutPolicy(),
+      new DisablePersonalVaultExportPolicy(),
+    ]);
+  }
+}
--- a/projects/web-vault/src/app/app.module.ts
+++ b/projects/web-vault/src/app/app.module.ts
@@ -0,0 +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 { 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 { 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],
+})
+export class AppModule {}
--- a/projects/web-vault/src/app/organizations/manage/sso.component.html
+++ b/projects/web-vault/src/app/organizations/manage/sso.component.html
@@ -0,0 +1,488 @@
+<div class="page-header d-flex">
+  <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>
+</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>
+
+  <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>
+
+  <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>
+
+  <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>
+
+    <!-- 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>
+</form>
--- a/projects/web-vault/src/app/organizations/manage/sso.component.ts
+++ b/projects/web-vault/src/app/organizations/manage/sso.component.ts
@@ -0,0 +1,183 @@
+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 { Organization } from "jslib-common/models/domain/organization";
+
+import { OrganizationSsoRequest } from "jslib-common/models/request/organization/organizationSsoRequest";
+
+@Component({
+  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",
+  ];
+
+  loading = true;
+  organizationId: string;
+  organization: Organization;
+  formPromise: Promise<any>;
+
+  callbackPath: string;
+  signedOutCallbackPath: string;
+  spEntityId: string;
+  spMetadataUrl: string;
+  spAcsUrl: string;
+
+  enabled = this.formBuilder.control(false);
+  data = this.formBuilder.group({
+    configType: [],
+
+    keyConnectorEnabled: [],
+    keyConnectorUrl: [],
+
+    // OpenId
+    authority: [],
+    clientId: [],
+    clientSecret: [],
+    metadataAddress: [],
+    redirectBehavior: [],
+    getClaimsFromUserInfoEndpoint: [],
+    additionalScopes: [],
+    additionalUserIdClaimTypes: [],
+    additionalEmailClaimTypes: [],
+    additionalNameClaimTypes: [],
+    acrValues: [],
+    expectedReturnAcrValue: [],
+
+    // SAML
+    spNameIdFormat: [],
+    spOutboundSigningAlgorithm: [],
+    spSigningBehavior: [],
+    spMinIncomingSigningAlgorithm: [],
+    spWantAssertionsSigned: [],
+    spValidateCertificates: [],
+
+    idpEntityId: [],
+    idpBindingType: [],
+    idpSingleSignOnServiceUrl: [],
+    idpSingleLogoutServiceUrl: [],
+    idpArtifactResolutionServiceUrl: [],
+    idpX509PublicCert: [],
+    idpOutboundSigningAlgorithm: [],
+    idpAllowUnsolicitedAuthnResponse: [],
+    idpDisableOutboundLogoutRequests: [],
+    idpWantAuthnRequestsSigned: [],
+  });
+
+  constructor(
+    private formBuilder: 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();
+    });
+  }
+
+  async load() {
+    this.organization = await this.organizationService.get(this.organizationId);
+    const ssoSettings = await this.apiService.getOrganizationSso(this.organizationId);
+
+    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
+    }
+
+    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");
+  }
+}
--- a/projects/web-vault/src/app/organizations/organizations-routing.module.ts
+++ b/projects/web-vault/src/app/organizations/organizations-routing.module.ts
@@ -0,0 +1,54 @@
+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 { 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";
+
+const routes: Routes = [
+  {
+    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: "sso",
+            component: SsoComponent,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class OrganizationsRoutingModule {}
--- a/projects/web-vault/src/app/organizations/organizations.module.ts
+++ b/projects/web-vault/src/app/organizations/organizations.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { OssModule } from "src/app/oss.module";
+
+import { SsoComponent } from "./manage/sso.component";
+import { OrganizationsRoutingModule } from "./organizations-routing.module";
+
+@NgModule({
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, OssModule, OrganizationsRoutingModule],
+  declarations: [SsoComponent],
+})
+export class OrganizationsModule {}
--- a/projects/web-vault/src/app/policies/disable-personal-vault-export.component.html
+++ b/projects/web-vault/src/app/policies/disable-personal-vault-export.component.html
@@ -0,0 +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>
--- a/projects/web-vault/src/app/policies/disable-personal-vault-export.component.ts
+++ b/projects/web-vault/src/app/policies/disable-personal-vault-export.component.ts
@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { PolicyType } from "jslib-common/enums/policyType";
+
+import { PolicyRequest } from "jslib-common/models/request/policyRequest";
+
+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;
+}
+
+@Component({
+  selector: "policy-disable-personal-vault-export",
+  templateUrl: "disable-personal-vault-export.component.html",
+})
+export class DisablePersonalVaultExportPolicyComponent extends BasePolicyComponent {}
--- a/projects/web-vault/src/app/policies/maximum-vault-timeout.component.html
+++ b/projects/web-vault/src/app/policies/maximum-vault-timeout.component.html
@@ -0,0 +1,47 @@
+<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>
+
+<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>
+</div>
--- a/projects/web-vault/src/app/policies/maximum-vault-timeout.component.ts
+++ b/projects/web-vault/src/app/policies/maximum-vault-timeout.component.ts
@@ -0,0 +1,72 @@
+import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+
+import { PolicyType } from "jslib-common/enums/policyType";
+
+import { PolicyRequest } from "jslib-common/models/request/policyRequest";
+
+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;
+}
+
+@Component({
+  selector: "policy-maximum-timeout",
+  templateUrl: "maximum-vault-timeout.component.html",
+})
+export class MaximumVaultTimeoutPolicyComponent extends BasePolicyComponent {
+  data = this.formBuilder.group({
+    hours: [null],
+    minutes: [null],
+  });
+
+  constructor(private formBuilder: 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,
+    });
+  }
+
+  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,
+    };
+  }
+
+  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);
+  }
+}
--- a/projects/web-vault/src/app/providers/clients/add-organization.component.html
+++ b/projects/web-vault/src/app/providers/clients/add-organization.component.html
@@ -0,0 +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>
+  </div>
+</div>
--- a/projects/web-vault/src/app/providers/clients/add-organization.component.ts
+++ b/projects/web-vault/src/app/providers/clients/add-organization.component.ts
@@ -0,0 +1,86 @@
+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 { ValidationService } from "jslib-angular/services/validation.service";
+
+import { WebProviderService } from "../services/webProvider.service";
+
+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",
+})
+export class AddOrganizationComponent implements OnInit {
+  @Input() providerId: string;
+  @Input() organizations: Organization[];
+  @Output() onAddedOrganization = new EventEmitter();
+
+  provider: Provider;
+  formPromise: Promise<any>;
+  loading = true;
+
+  constructor(
+    private providerService: ProviderService,
+    private webProviderService: WebProviderService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private validationService: ValidationService
+  ) {}
+
+  async ngOnInit() {
+    await this.load();
+  }
+
+  async load() {
+    if (this.providerId == null) {
+      return;
+    }
+
+    this.provider = await this.providerService.get(this.providerId);
+
+    this.loading = false;
+  }
+
+  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"
+    );
+
+    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();
+  }
+}
--- a/projects/web-vault/src/app/providers/clients/clients.component.html
+++ b/projects/web-vault/src/app/providers/clients/clients.component.html
@@ -0,0 +1,86 @@
+<div class="page-header d-flex">
+  <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>
+</div>
+
+<ng-container *ngIf="loading">
+  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+
+<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>
--- a/projects/web-vault/src/app/providers/clients/clients.component.ts
+++ b/projects/web-vault/src/app/providers/clients/clients.component.ts
@@ -0,0 +1,183 @@
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+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 { 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 { Organization } from "jslib-common/models/domain/organization";
+import { ProviderOrganizationOrganizationDetailsResponse } from "jslib-common/models/response/provider/providerOrganizationResponse";
+
+import { WebProviderService } from "../services/webProvider.service";
+
+import { AddOrganizationComponent } from "./add-organization.component";
+
+const DisallowedPlanTypes = [
+  PlanType.Free,
+  PlanType.FamiliesAnnually2019,
+  PlanType.FamiliesAnnually,
+];
+
+@Component({
+  templateUrl: "clients.component.html",
+})
+export class ClientsComponent implements OnInit {
+  @ViewChild("add", { read: ViewContainerRef, static: true }) addModalRef: ViewContainerRef;
+
+  providerId: any;
+  searchText: string;
+  addableOrganizations: Organization[];
+  loading = true;
+  manageOrganizations = false;
+  showAddExisting = false;
+
+  clients: ProviderOrganizationOrganizationDetailsResponse[];
+  pagedClients: ProviderOrganizationOrganizationDetailsResponse[];
+
+  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
+  ) {}
+
+  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();
+            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;
+  }
+}
--- a/projects/web-vault/src/app/providers/clients/create-organization.component.html
+++ b/projects/web-vault/src/app/providers/clients/create-organization.component.html
@@ -0,0 +1,5 @@
+<div class="page-header">
+  <h1>{{ "newClientOrganization" | i18n }}</h1>
+</div>
+<p>{{ "newClientOrganizationDesc" | i18n }}</p>
+<app-organization-plans [providerId]="providerId"></app-organization-plans>
--- a/projects/web-vault/src/app/providers/clients/create-organization.component.ts
+++ b/projects/web-vault/src/app/providers/clients/create-organization.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { OrganizationPlansComponent } from "src/app/settings/organization-plans.component";
+
+@Component({
+  selector: "app-create-organization",
+  templateUrl: "create-organization.component.html",
+})
+export class CreateOrganizationComponent implements OnInit {
+  @ViewChild(OrganizationPlansComponent, { static: true })
+  orgPlansComponent: OrganizationPlansComponent;
+
+  providerId: string;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.route.parent.params.subscribe(async (params) => {
+      this.providerId = params.providerId;
+    });
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/accept-provider.component.html
+++ b/projects/web-vault/src/app/providers/manage/accept-provider.component.html
@@ -0,0 +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>
+<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>
+  </div>
+</div>
--- a/projects/web-vault/src/app/providers/manage/accept-provider.component.ts
+++ b/projects/web-vault/src/app/providers/manage/accept-provider.component.ts
@@ -0,0 +1,56 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { BaseAcceptComponent } from "src/app/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 { ProviderUserAcceptRequest } from "jslib-common/models/request/provider/providerUserAcceptRequest";
+
+@Component({
+  selector: "app-accept-provider",
+  templateUrl: "accept-provider.component.html",
+})
+export class AcceptProviderComponent extends BaseAcceptComponent {
+  providerName: string;
+
+  failedMessage = "providerInviteAcceptFailed";
+
+  requiredParameters = ["providerId", "providerUserId", "token"];
+
+  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;
+
+    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;
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/bulk/bulk-confirm.component.ts
+++ b/projects/web-vault/src/app/providers/manage/bulk/bulk-confirm.component.ts
@@ -0,0 +1,34 @@
+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 { 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";
+
+@Component({
+  templateUrl: "../../../../../../../src/app/organizations/manage/bulk/bulk-confirm.component.html",
+})
+export class BulkConfirmComponent extends OrganizationBulkConfirmComponent {
+  @Input() providerId: string;
+
+  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 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);
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/bulk/bulk-remove.component.ts
+++ b/projects/web-vault/src/app/providers/manage/bulk/bulk-remove.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+import { ProviderUserBulkRequest } from "jslib-common/models/request/provider/providerUserBulkRequest";
+
+import { BulkRemoveComponent as OrganizationBulkRemoveComponent } from "src/app/organizations/manage/bulk/bulk-remove.component";
+
+@Component({
+  templateUrl: "../../../../../../../src/app/organizations/manage/bulk/bulk-remove.component.html",
+})
+export class BulkRemoveComponent extends OrganizationBulkRemoveComponent {
+  @Input() providerId: string;
+
+  async deleteUsers() {
+    const request = new ProviderUserBulkRequest(this.users.map((user) => user.id));
+    return await this.apiService.deleteManyProviderUsers(this.providerId, request);
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/events.component.html
+++ b/projects/web-vault/src/app/providers/manage/events.component.html
@@ -0,0 +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>
+  </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>
+</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>
+</ng-container>
--- a/projects/web-vault/src/app/providers/manage/events.component.ts
+++ b/projects/web-vault/src/app/providers/manage/events.component.ts
@@ -0,0 +1,82 @@
+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 { UserNamePipe } from "jslib-angular/pipes/user-name.pipe";
+
+import { EventResponse } from "jslib-common/models/response/eventResponse";
+
+import { EventService } from "src/app/services/event.service";
+
+import { BaseEventsComponent } from "src/app/common/base.events.component";
+
+@Component({
+  selector: "provider-events",
+  templateUrl: "events.component.html",
+})
+export class EventsComponent extends BaseEventsComponent implements OnInit {
+  exportFileName: string = "provider-events";
+  providerId: string;
+
+  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);
+  }
+
+  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;
+  }
+
+  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;
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/manage.component.html
+++ b/projects/web-vault/src/app/providers/manage/manage.component.html
@@ -0,0 +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>
+  </div>
+</div>
--- a/projects/web-vault/src/app/providers/manage/manage.component.ts
+++ b/projects/web-vault/src/app/providers/manage/manage.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { ProviderService } from "jslib-common/abstractions/provider.service";
+
+import { Provider } from "jslib-common/models/domain/provider";
+
+@Component({
+  selector: "provider-manage",
+  templateUrl: "manage.component.html",
+})
+export class ManageComponent implements OnInit {
+  provider: Provider;
+  accessEvents = false;
+
+  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;
+    });
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/people.component.html
+++ b/projects/web-vault/src/app/providers/manage/people.component.html
@@ -0,0 +1,224 @@
+<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>
+  </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>
+</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>
+</ng-container>
+<ng-template #addEdit></ng-template>
+<ng-template #eventsTemplate></ng-template>
+<ng-template #confirmTemplate></ng-template>
+<ng-template #bulkStatusTemplate></ng-template>
+<ng-template #bulkConfirmTemplate></ng-template>
+<ng-template #bulkRemoveTemplate></ng-template>
--- a/projects/web-vault/src/app/providers/manage/people.component.ts
+++ b/projects/web-vault/src/app/providers/manage/people.component.ts
@@ -0,0 +1,292 @@
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+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 { 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 { 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 { 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";
+
+@Component({
+  selector: "provider-people",
+  templateUrl: "people.component.html",
+})
+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;
+
+  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
+    );
+  }
+
+  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;
+      }
+
+      this.accessEvents = provider.useEvents;
+
+      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;
+    }
+
+    const [modal] = await this.modalService.openViewRef(
+      BulkRemoveComponent,
+      this.bulkRemoveModalRef,
+      (comp) => {
+        comp.providerId = this.providerId;
+        comp.users = this.getCheckedUsers();
+      }
+    );
+
+    await modal.onClosedPromise();
+    await this.load();
+  }
+
+  async bulkReinvite() {
+    if (this.actionPromise != null) {
+      return;
+    }
+
+    const users = this.getCheckedUsers();
+    const filteredUsers = users.filter((u) => u.status === ProviderUserStatusType.Invited);
+
+    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 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();
+    }
+  }
+}
--- a/projects/web-vault/src/app/providers/manage/user-add-edit.component.html
+++ b/projects/web-vault/src/app/providers/manage/user-add-edit.component.html
@@ -0,0 +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>
--- a/projects/web-vault/src/app/providers/manage/user-add-edit.component.ts
+++ b/projects/web-vault/src/app/providers/manage/user-add-edit.component.ts
@@ -0,0 +1,121 @@
+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 { ProviderUserInviteRequest } from "jslib-common/models/request/provider/providerUserInviteRequest";
+
+import { PermissionsApi } from "jslib-common/models/api/permissionsApi";
+
+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",
+})
+export class UserAddEditComponent implements OnInit {
+  @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;
+
+  constructor(
+    private apiService: ApiService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private logService: LogService
+  ) {}
+
+  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;
+  }
+
+  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;
+    }
+
+    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);
+    }
+  }
+}
--- a/projects/web-vault/src/app/providers/providers-layout.component.html
+++ b/projects/web-vault/src/app/providers/providers-layout.component.html
@@ -0,0 +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>
+  </div>
+</div>
+<div class="container page-content">
+  <router-outlet></router-outlet>
+</div>
+<app-footer></app-footer>
--- a/projects/web-vault/src/app/providers/providers-layout.component.ts
+++ b/projects/web-vault/src/app/providers/providers-layout.component.ts
@@ -0,0 +1,50 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { ProviderService } from "jslib-common/abstractions/provider.service";
+
+import { Provider } from "jslib-common/models/domain/provider";
+
+@Component({
+  selector: "providers-layout",
+  templateUrl: "providers-layout.component.html",
+})
+export class ProvidersLayoutComponent {
+  provider: Provider;
+  private providerId: string;
+
+  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();
+    });
+  }
+
+  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";
+    }
+  }
+}
--- a/projects/web-vault/src/app/providers/providers-routing.module.ts
+++ b/projects/web-vault/src/app/providers/providers-routing.module.ts
@@ -0,0 +1,123 @@
+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 { 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 { 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,
+    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: "", 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],
+})
+export class ProvidersRoutingModule {}
--- a/projects/web-vault/src/app/providers/providers.module.ts
+++ b/projects/web-vault/src/app/providers/providers.module.ts
@@ -0,0 +1,63 @@
+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 { 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 { 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 { 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 { 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],
+})
+export class ProvidersModule {
+  constructor(modalService: ModalService, componentFactoryResolver: ComponentFactoryResolver) {
+    modalService.registerComponentFactoryResolver(
+      AddOrganizationComponent,
+      componentFactoryResolver
+    );
+  }
+}
--- a/projects/web-vault/src/app/providers/services/provider-guard.service.ts
+++ b/projects/web-vault/src/app/providers/services/provider-guard.service.ts
@@ -0,0 +1,31 @@
+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";
+
+@Injectable()
+export class ProviderGuardService implements CanActivate {
+  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;
+  }
+}
--- a/projects/web-vault/src/app/providers/services/provider-type-guard.service.ts
+++ b/projects/web-vault/src/app/providers/services/provider-type-guard.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
+
+import { ProviderService } from "jslib-common/abstractions/provider.service";
+
+import { Permissions } from "jslib-common/enums/permissions";
+
+@Injectable()
+export class ProviderTypeGuardService implements CanActivate {
+  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[]);
+
+    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;
+  }
+}
--- a/projects/web-vault/src/app/providers/services/webProvider.service.ts
+++ b/projects/web-vault/src/app/providers/services/webProvider.service.ts
@@ -0,0 +1,36 @@
+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 { ProviderAddOrganizationRequest } from "jslib-common/models/request/provider/providerAddOrganizationRequest";
+
+@Injectable()
+export class WebProviderService {
+  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);
+
+    const encryptedOrgKey = await this.cryptoService.encrypt(orgKey.key, providerKey);
+
+    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;
+  }
+
+  async detachOrganizastion(providerId: string, organizationId: string): Promise<any> {
+    await this.apiService.deleteProviderOrganization(providerId, organizationId);
+    await this.syncService.fullSync(true);
+  }
+}
--- a/projects/web-vault/src/app/providers/settings/account.component.html
+++ b/projects/web-vault/src/app/providers/settings/account.component.html
@@ -0,0 +1,48 @@
+<div class="page-header">
+  <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>
+</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>
+  </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>
--- a/projects/web-vault/src/app/providers/settings/account.component.ts
+++ b/projects/web-vault/src/app/providers/settings/account.component.ts
@@ -0,0 +1,65 @@
+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 { ProviderUpdateRequest } from "jslib-common/models/request/provider/providerUpdateRequest";
+
+import { ProviderResponse } from "jslib-common/models/response/provider/providerResponse";
+
+@Component({
+  selector: "provider-account",
+  templateUrl: "account.component.html",
+})
+export class AccountComponent {
+  selfHosted = false;
+  loading = true;
+  provider: ProviderResponse;
+  formPromise: Promise<any>;
+  taxFormPromise: Promise<any>;
+
+  private providerId: string;
+
+  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}`);
+    }
+  }
+}
--- a/projects/web-vault/src/app/providers/settings/settings.component.html
+++ b/projects/web-vault/src/app/providers/settings/settings.component.html
@@ -0,0 +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>
+  </div>
+</div>
--- a/projects/web-vault/src/app/providers/settings/settings.component.ts
+++ b/projects/web-vault/src/app/providers/settings/settings.component.ts
@@ -0,0 +1,23 @@
+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";
+
+@Component({
+  selector: "provider-settings",
+  templateUrl: "settings.component.html",
+})
+export class SettingsComponent {
+  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);
+    });
+  }
+}
--- a/projects/web-vault/src/app/providers/setup/setup-provider.component.html
+++ b/projects/web-vault/src/app/providers/setup/setup-provider.component.html
@@ -0,0 +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>
+<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>
+  </div>
+</div>
--- a/projects/web-vault/src/app/providers/setup/setup-provider.component.ts
+++ b/projects/web-vault/src/app/providers/setup/setup-provider.component.ts
@@ -0,0 +1,21 @@
+import { Component } from "@angular/core";
+
+import { BaseAcceptComponent } from "src/app/common/base.accept.component";
+
+@Component({
+  selector: "app-setup-provider",
+  templateUrl: "setup-provider.component.html",
+})
+export class SetupProviderComponent extends BaseAcceptComponent {
+  failedShortMessage = "inviteAcceptFailedShort";
+  failedMessage = "inviteAcceptFailed";
+
+  requiredParameters = ["providerId", "email", "token"];
+
+  async authedHandler(qParams: any) {
+    this.router.navigate(["/providers/setup"], { queryParams: qParams });
+  }
+
+  // tslint:disable-next-line
+  async unauthedHandler(qParams: any) {}
+}
--- a/projects/web-vault/src/app/providers/setup/setup.component.html
+++ b/projects/web-vault/src/app/providers/setup/setup.component.html
@@ -0,0 +1,39 @@
+<app-navbar></app-navbar>
+<div class="container page-content">
+  <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>
+
+    <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>
--- a/projects/web-vault/src/app/providers/setup/setup.component.ts
+++ b/projects/web-vault/src/app/providers/setup/setup.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+
+import { first } from "rxjs/operators";
+
+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";
+
+@Component({
+  selector: "provider-setup",
+  templateUrl: "setup.component.html",
+})
+export class SetupComponent implements OnInit {
+  loading = true;
+  authed = false;
+  email: string;
+  formPromise: Promise<any>;
+
+  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
+  ) {}
+
+  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;
+      }
+
+      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);
+    }
+  }
+}
--- a/projects/web-vault/src/assets/.gitkeep
+++ b/projects/web-vault/src/assets/.gitkeep
--- a/projects/web-vault/src/environments/environment.prod.ts
+++ b/projects/web-vault/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};
--- a/projects/web-vault/src/environments/environment.ts
+++ b/projects/web-vault/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
--- a/projects/web-vault/src/favicon.ico
+++ b/projects/web-vault/src/favicon.ico
--- a/projects/web-vault/src/index.html
+++ b/projects/web-vault/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebVault</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/projects/web-vault/src/main.ts
+++ b/projects/web-vault/src/main.ts
@@ -0,0 +1,19 @@
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+
+import "bootstrap";
+import "jquery";
+import "popper.js";
+
+import { AppModule } from "./app/app.module";
+
+// TODO: Investigate if we can use environment.
+// import { environment } from './environments/environment';
+
+if (process.env.NODE_ENV === "production") {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
--- a/projects/web-vault/src/polyfills.ts
+++ b/projects/web-vault/src/polyfills.ts
@@ -0,0 +1,66 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import "zone.js"; // Included with Angular CLI.
+
+(window as any).global = window;
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/projects/web-vault/src/styles.scss
+++ b/projects/web-vault/src/styles.scss
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
--- a/projects/web-vault/src/test.ts
+++ b/projects/web-vault/src/test.ts
@@ -0,0 +1,29 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import "zone.js/testing";
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: true },
+});
+
+// Then we find all the tests.
+const context = require.context("./", true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
				`@@ -0,0 +1 @@`
				`/* You can add global styles to this file, and also import other style files */`