Merge branch 'master' into refactor/organization-module

src/app/accounts/lock.component.ts

@@ -55,7 +55,7 @@ export class LockComponent extends BaseLockComponent {
     await super.ngOnInit();
     this.onSuccessfulSubmit = async () => {
       const previousUrl = this.routerService.getPreviousUrl();
-      if (previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
+      if (previousUrl && previousUrl !== "/" && previousUrl.indexOf("lock") === -1) {
         this.successRoute = previousUrl;
       }
       this.router.navigateByUrl(this.successRoute);

src/app/accounts/login.component.ts

@@ -74,7 +74,7 @@ export class LoginComponent extends BaseLoginComponent {
       if (qParams.premium != null) {
         this.routerService.setPreviousUrl("/settings/premium");
       } else if (qParams.org != null) {
-        const route = this.router.createUrlTree(["settings/create-organization"], {
+        const route = this.router.createUrlTree(["create-organization"], {
           queryParams: { plan: qParams.org },
         });
         this.routerService.setPreviousUrl(route.toString());

src/app/accounts/register.component.html

@@ -101,7 +101,7 @@
       <div [ngClass]="{ 'col-5': layout, 'col-12': !layout }">
         <div class="row justify-content-md-center mt-5">
           <div [ngClass]="{ 'col-5': !layout, 'col-12': layout }">
-            <p class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</p>
+            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
             <div class="card d-block">
               <div class="card-body">
                 <app-callout

src/app/accounts/register.component.ts

@@ -71,7 +71,7 @@ export class RegisterComponent extends BaseRegisterComponent {
       } else if (qParams.org != null) {
         this.showCreateOrgMessage = true;
         this.referenceData.flow = qParams.org;
-        const route = this.router.createUrlTree(["settings/create-organization"], {
+        const route = this.router.createUrlTree(["create-organization"], {
           queryParams: { plan: qParams.org },
         });
         this.routerService.setPreviousUrl(route.toString());

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

@@ -122,17 +122,20 @@ export abstract class BaseEventsComponent {
         const userId = r.actingUserId == null ? r.userId : r.actingUserId;
         const eventInfo = await this.eventService.getEventInfo(r);
         const user = this.getUserName(r, userId);
+        const userName = user != null ? user.name : this.i18nService.t("unknown");
+
         return new EventView({
           message: eventInfo.message,
           humanReadableMessage: eventInfo.humanReadableMessage,
           appIcon: eventInfo.appIcon,
           appName: eventInfo.appName,
           userId: userId,
-          userName: user != null ? user.name : this.i18nService.t("unknown"),
+          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
           userEmail: user != null ? user.email : "",
           date: r.date,
           ip: r.ipAddress,
           type: r.type,
+          installationId: r.installationId,
         });
       })
     );

src/app/layouts/footer.component.html

@@ -1,6 +1,6 @@
 <div class="container footer text-muted">
   <div class="row">
-    <div class="col">&copy; {{ year }}, Bitwarden Inc.</div>
+    <div class="col">&copy; {{ year }} Bitwarden Inc.</div>
     <div class="col text-center"></div>
     <div class="col text-right">
       {{ "versionNumber" | i18n: version }}

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

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

src/app/layouts/navbar.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, NgZone, OnInit } from "@angular/core";
 
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -31,7 +32,9 @@ export class NavbarComponent implements OnInit {
     private providerService: ProviderService,
     private syncService: SyncService,
     private organizationService: OrganizationService,
-    private i18nService: I18nService
+    private i18nService: I18nService,
+    private broadcasterService: BroadcasterService,
+    private ngZone: NgZone
   ) {
     this.selfHosted = this.platformUtilsService.isSelfHost();
   }
@@ -49,8 +52,24 @@ export class NavbarComponent implements OnInit {
     }
     this.providers = await this.providerService.getAll();
 
+    this.organizations = await this.buildOrganizations();
+
+    this.broadcasterService.subscribe(this.constructor.name, async (message: any) => {
+      this.ngZone.run(async () => {
+        switch (message.command) {
+          case "organizationCreated":
+            if (this.organizations.length < 1) {
+              this.organizations = await this.buildOrganizations();
+            }
+            break;
+        }
+      });
+    });
+  }
+
+  async buildOrganizations() {
     const allOrgs = await this.organizationService.getAll();
-    this.organizations = allOrgs
+    return allOrgs
       .filter((org) => OrgNavigationPermissionsService.canAccessAdmin(org))
       .sort(Utils.getSortFunction(this.i18nService, "name"));
   }

src/app/modules/loose-components.module.ts

@@ -58,7 +58,6 @@ import { EmergencyAccessTakeoverComponent } from "../settings/emergency-access-t
 import { EmergencyAccessViewComponent } from "../settings/emergency-access-view.component";
 import { EmergencyAccessComponent } from "../settings/emergency-access.component";
 import { EmergencyAddEditComponent } from "../settings/emergency-add-edit.component";
-import { LinkSsoComponent } from "../settings/link-sso.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 import { PreferencesComponent } from "../settings/preferences.component";
 import { PremiumComponent } from "../settings/premium.component";
@@ -155,7 +154,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     NestedCheckboxComponent,
@@ -258,7 +256,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     NestedCheckboxComponent,

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

@@ -29,52 +29,52 @@
         ></i>
         <span class="sr-only">{{ "loading" | i18n }}</span>
       </div>
-      <div
-        class="modal-body"
-        *ngIf="
-          !loading && users && (users | search: searchText:'name':'email':'id') as searchedUsers
-        "
+      <cdk-virtual-scroll-viewport
+        itemSize="46"
+        minBufferPx="600"
+        maxBufferPx="1200"
+        [style]="scrollViewportStyle"
       >
-        <div class="d-flex">
-          <div class="mr-3">
-            <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-            <input
-              type="search"
-              class="form-control form-control-sm"
-              id="search"
-              placeholder="{{ 'search' | i18n }}"
-              name="SearchText"
-              [(ngModel)]="searchText"
-            />
+        <div class="modal-body" *ngIf="!loading && users && searchedUsers">
+          <div class="d-flex">
+            <div class="mr-3">
+              <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+              <input
+                type="search"
+                class="form-control form-control-sm"
+                id="search"
+                placeholder="{{ 'search' | i18n }}"
+                name="SearchText"
+                [(ngModel)]="searchText"
+              />
+            </div>
+            <div class="btn-group btn-group-sm" role="group">
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: !showSelected }"
+                (click)="filterSelected(false)"
+              >
+                {{ "all" | i18n }}
+              </button>
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                [ngClass]="{ active: showSelected }"
+                (click)="filterSelected(true)"
+              >
+                {{ "selected" | i18n }}
+                <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
+                  selectedCount
+                }}</span>
+              </button>
+            </div>
           </div>
-          <div class="btn-group btn-group-sm" role="group">
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: !showSelected }"
-              (click)="filterSelected(false)"
-            >
-              {{ "all" | i18n }}
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-secondary"
-              [ngClass]="{ active: showSelected }"
-              (click)="filterSelected(true)"
-            >
-              {{ "selected" | i18n }}
-              <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
-                selectedCount
-              }}</span>
-            </button>
-          </div>
-        </div>
-        <ng-container *ngIf="!searchedUsers.length">
-          <hr />
-          {{ "noUsersInList" | i18n }}
-        </ng-container>
-        <ng-container *ngIf="searchedUsers.length">
-          <table class="table table-hover table-list mb-0">
+          <ng-container *ngIf="!searchedUsers.length">
+            <hr />
+            {{ "noUsersInList" | i18n }}
+          </ng-container>
+          <table class="table table-hover table-list mb-0" [hidden]="!searchedUsers.length">
             <thead>
               <tr>
                 <th>&nbsp;</th>
@@ -91,7 +91,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let u of searchedUsers">
+              <tr *cdkVirtualFor="let u of searchedUsers" class="">
                 <td class="table-list-checkbox" (click)="check(u)">
                   <input
                     type="checkbox"
@@ -164,8 +164,8 @@
               </tr>
             </tbody>
           </table>
-        </ng-container>
-      </div>
+        </div>
+      </cdk-virtual-scroll-viewport>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
           <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>

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

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 
+import { SearchPipe } from "jslib-angular/pipes/search.pipe";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
@@ -13,6 +14,7 @@ import { OrganizationUserUserDetailsResponse } from "jslib-common/models/respons
 @Component({
   selector: "app-entity-users",
   templateUrl: "entity-users.component.html",
+  providers: [SearchPipe],
 })
 export class EntityUsersComponent implements OnInit {
   @Input() entity: "group" | "collection";
@@ -33,6 +35,7 @@ export class EntityUsersComponent implements OnInit {
   private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
   constructor(
+    private search: SearchPipe,
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -52,6 +55,14 @@ export class EntityUsersComponent implements OnInit {
     }
   }
 
+  get searchedUsers() {
+    return this.search.transform(this.users, this.searchText, "name", "email", "id");
+  }
+
+  get scrollViewportStyle() {
+    return `min-height: 120px; height: ${120 + this.searchedUsers.length * 46}px`;
+  }
+
   async loadUsers() {
     const users = await this.apiService.getOrganizationUsers(this.organizationId);
     this.allUsers = users.data.map((r) => r).sort(Utils.getSortFunction(this.i18nService, "email"));

src/app/modules/organizations/manage/organization-manage.module.ts

@@ -0,0 +1,13 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../../shared.module";
+
+import { EntityUsersComponent } from "./entity-users.component";
+
+@NgModule({
+  imports: [SharedModule, ScrollingModule],
+  declarations: [EntityUsersComponent],
+  exports: [EntityUsersComponent],
+})
+export class OrganizationManageModule {}

src/app/modules/organizations/users/enroll-master-password-reset.component.html

@@ -0,0 +1,59 @@
+<div
+  class="modal fade"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="enrollMasterPasswordResetTitle"
+>
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form
+      class="modal-content"
+      #form
+      (ngSubmit)="submit()"
+      [appApiAction]="formPromise"
+      ngNativeValidate
+    >
+      <div class="modal-header">
+        <h2 class="modal-title" id="enrollMasterPasswordResetTitle">
+          {{ (isEnrolled ? "withdrawPasswordReset" : "enrollPasswordReset") | 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">
+        <app-callout type="warning" *ngIf="!isEnrolled">
+          {{ "resetPasswordEnrollmentWarning" | i18n }}
+        </app-callout>
+        <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
+      </div>
+      <div class="modal-footer">
+        <button bit-button buttonType="primary" type="submit" [disabled]="form.loading">
+          <i
+            class="bwi bwi-spinner bwi-spin"
+            title="{{ 'loading' | i18n }}"
+            *ngIf="form.loading"
+          ></i>
+          <span>
+            {{ "submit" | i18n }}
+          </span>
+        </button>
+        <button
+          bit-button
+          buttonType="secondary"
+          type="button"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span>
+            {{ "cancel" | i18n }}
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/modules/organizations/users/enroll-master-password-reset.component.ts

@@ -0,0 +1,97 @@
+import { Component } from "@angular/core";
+
+import { ModalRef } from "jslib-angular/components/modal/modal.ref";
+import { ModalConfig } from "jslib-angular/services/modal.service";
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { SyncService } from "jslib-common/abstractions/sync.service";
+import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+import { Utils } from "jslib-common/misc/utils";
+import { Organization } from "jslib-common/models/domain/organization";
+import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+import { Verification } from "jslib-common/types/verification";
+
+@Component({
+  selector: "app-enroll-master-password-reset",
+  templateUrl: "enroll-master-password-reset.component.html",
+})
+export class EnrollMasterPasswordReset {
+  organization: Organization;
+
+  verification: Verification;
+  formPromise: Promise<any>;
+
+  constructor(
+    private userVerificationService: UserVerificationService,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private cryptoService: CryptoService,
+    private syncService: SyncService,
+    private logService: LogService,
+    private modalRef: ModalRef,
+    config: ModalConfig
+  ) {
+    this.organization = config.data.organization;
+  }
+
+  async submit() {
+    let toastStringRef = "withdrawPasswordResetSuccess";
+
+    this.formPromise = this.userVerificationService
+      .buildRequest(this.verification, OrganizationUserResetPasswordEnrollmentRequest)
+      .then(async (request) => {
+        // Set variables
+        let keyString: string = null;
+
+        // Enrolling
+        if (!this.organization.resetPasswordEnrolled) {
+          // Retrieve Public Key
+          const orgKeys = await this.apiService.getOrganizationKeys(this.organization.id);
+          if (orgKeys == null) {
+            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
+          }
+
+          const publicKey = Utils.fromB64ToArray(orgKeys.publicKey);
+
+          // RSA Encrypt user's encKey.key with organization public key
+          const encKey = await this.cryptoService.getEncKey();
+          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
+          keyString = encryptedKey.encryptedString;
+          toastStringRef = "enrollPasswordResetSuccess";
+
+          // Create request and execute enrollment
+          request.resetPasswordKey = keyString;
+          await this.apiService.putOrganizationUserResetPasswordEnrollment(
+            this.organization.id,
+            this.organization.userId,
+            request
+          );
+        } else {
+          // Withdrawal
+          request.resetPasswordKey = keyString;
+          await this.apiService.putOrganizationUserResetPasswordEnrollment(
+            this.organization.id,
+            this.organization.userId,
+            request
+          );
+        }
+
+        await this.syncService.fullSync(true);
+      });
+    try {
+      await this.formPromise;
+      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
+      this.modalRef.close();
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  get isEnrolled(): boolean {
+    return this.organization.resetPasswordEnrolled;
+  }
+}

src/app/modules/organizations/users/organization-user.module.ts

@@ -0,0 +1,14 @@
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { NgModule } from "@angular/core";
+
+import { LooseComponentsModule } from "../../loose-components.module";
+import { SharedModule } from "../../shared.module";
+
+import { EnrollMasterPasswordReset } from "./enroll-master-password-reset.component";
+
+@NgModule({
+  imports: [SharedModule, ScrollingModule, LooseComponentsModule],
+  declarations: [EnrollMasterPasswordReset],
+  exports: [EnrollMasterPasswordReset],
+})
+export class OrganizationUserModule {}

src/app/modules/vault-filter/components/collection-filter.component.html

@@ -16,7 +16,7 @@
         aria-hidden="true"
       ></i>
     </button>
-    <h3 class="filter-title">{{ collectionsGrouping.name | i18n }}</h3>
+    <h3 class="filter-title">&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
   </div>
   <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
     <ng-template #recursiveCollections let-collections>
@@ -31,7 +31,7 @@
           <button
             class="toggle-button"
             *ngIf="c.children.length"
-            (click)="collapse(c.node)"
+            (click)="toggleCollapse(c.node)"
             title="{{ 'toggleCollapse' | i18n }}"
             [attr.aria-expanded]="!isCollapsed(c.node)"
             [attr.aria-controls]="c.node.name + '_children'"
@@ -51,7 +51,7 @@
               class="bwi bwi-collection bwi-fw"
               aria-hidden="true"
             ></i
-            >{{ c.node.name }}
+            >&nbsp;{{ c.node.name }}
           </button>
         </span>
         <ul

src/app/modules/vault-filter/components/folder-filter.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!hide && !activeFilter.selectedOrganizationId">
+<ng-container *ngIf="!hide">
   <div class="filter-heading">
     <button
       class="toggle-button"
@@ -16,9 +16,7 @@
         }"
       ></i>
     </button>
-    <h3 class="filter-title">
-      {{ "folders" | i18n }}
-    </h3>
+    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
     <button
       class="text-muted ml-auto add-button"
       (click)="addFolder()"
@@ -56,7 +54,7 @@
           </button>
           <button class="filter-button" (click)="applyFilter(f.node)">
             <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i
-            >{{ f.node.name }}
+            >&nbsp;{{ f.node.name }}
           </button>
           <button
             class="edit-button"

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -12,9 +12,9 @@
         </li>
         <li class="filter-option">
           <span class="filter-buttons">
-            <a href="#" routerLink="/settings/create-organization" class="filter-button">
+            <a href="#" routerLink="/create-organization" class="filter-button">
               <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              {{ "newOrganization" | i18n }}
+              &nbsp;{{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,14 +45,6 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
-        <a
-          href="#"
-          routerLink="/settings/create-organization"
-          class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
-        >
-          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li
@@ -75,6 +67,14 @@
             </ng-container>
           </span>
         </li>
+        <li class="filter-option">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
       </ul>
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
@@ -85,7 +85,7 @@
         </button>
       </div>
     </ng-container>
-    <ng-container *ngSwitchCase="'organizationMember'">
+    <ng-container *ngSwitchDefault>
       <div class="filter-heading">
         <button
           class="toggle-button"
@@ -110,14 +110,6 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
-        <a
-          href="#"
-          routerLink="/settings/create-organization"
-          class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
-        >
-          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
@@ -148,6 +140,14 @@
             </ng-container>
           </span>
         </li>
+        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
+          <span class="filter-buttons">
+            <a href="#" routerLink="/create-organization" class="filter-button">
+              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+              &nbsp;{{ "newOrganization" | i18n }}
+            </a>
+          </span>
+        </li>
       </ul>
     </ng-container>
   </ng-container>

src/app/modules/vault-filter/components/organization-options.component.ts

@@ -1,17 +1,17 @@
 import { Component, Input } from "@angular/core";
 
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
-import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { PolicyType } from "jslib-common/enums/policyType";
-import { Utils } from "jslib-common/misc/utils";
 import { Organization } from "jslib-common/models/domain/organization";
 import { Policy } from "jslib-common/models/domain/policy";
-import { OrganizationUserResetPasswordEnrollmentRequest } from "jslib-common/models/request/organizationUserResetPasswordEnrollmentRequest";
+
+import { EnrollMasterPasswordReset } from "../../organizations/users/enroll-master-password-reset.component";
 
 @Component({
   selector: "app-organization-options",
@@ -29,8 +29,8 @@ export class OrganizationOptionsComponent {
     private i18nService: I18nService,
     private apiService: ApiService,
     private syncService: SyncService,
-    private cryptoService: CryptoService,
     private policyService: PolicyService,
+    private modalService: ModalService,
     private logService: LogService
   ) {}
 
@@ -82,6 +82,7 @@ export class OrganizationOptionsComponent {
       this.platformUtilsService.showToast("success", null, "Unlinked SSO");
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
@@ -106,74 +107,17 @@ export class OrganizationOptionsComponent {
       this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }
 
   async toggleResetPasswordEnrollment(org: Organization) {
-    // Set variables
-    let keyString: string = null;
-    let toastStringRef = "withdrawPasswordResetSuccess";
-
-    // Enrolling
-    if (!org.resetPasswordEnrolled) {
-      // Alert user about enrollment
-      const confirmed = await this.platformUtilsService.showDialog(
-        this.i18nService.t("resetPasswordEnrollmentWarning"),
-        null,
-        this.i18nService.t("yes"),
-        this.i18nService.t("no"),
-        "warning"
-      );
-      if (!confirmed) {
-        return;
-      }
-
-      // Retrieve Public Key
-      this.actionPromise = this.apiService
-        .getOrganizationKeys(org.id)
-        .then(async (response) => {
-          if (response == null) {
-            throw new Error(this.i18nService.t("resetPasswordOrgKeysError"));
-          }
-
-          const publicKey = Utils.fromB64ToArray(response.publicKey);
-
-          // RSA Encrypt user's encKey.key with organization public key
-          const encKey = await this.cryptoService.getEncKey();
-          const encryptedKey = await this.cryptoService.rsaEncrypt(encKey.key, publicKey.buffer);
-          keyString = encryptedKey.encryptedString;
-          toastStringRef = "enrollPasswordResetSuccess";
-
-          // Create request and execute enrollment
-          const request = new OrganizationUserResetPasswordEnrollmentRequest();
-          request.resetPasswordKey = keyString;
-          return this.apiService.putOrganizationUserResetPasswordEnrollment(
-            org.id,
-            org.userId,
-            request
-          );
-        })
-        .then(() => {
-          return this.syncService.fullSync(true);
-        });
-    } else {
-      // Withdrawal
-      const request = new OrganizationUserResetPasswordEnrollmentRequest();
-      request.resetPasswordKey = keyString;
-      this.actionPromise = this.apiService
-        .putOrganizationUserResetPasswordEnrollment(org.id, org.userId, request)
-        .then(() => {
-          return this.syncService.fullSync(true);
-        });
-    }
-
-    try {
-      await this.actionPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
-      await this.load();
-    } catch (e) {
-      this.logService.error(e);
-    }
+    this.modalService.open(EnrollMasterPasswordReset, {
+      allowMultipleModals: true,
+      data: {
+        organization: org,
+      },
+    });
   }
 }

src/app/modules/vault-filter/components/type-filter.component.html

@@ -15,9 +15,7 @@
       }"
     ></i>
   </button>
-  <h3>
-    {{ "types" | i18n }}
-  </h3>
+  <h3>&nbsp;{{ "types" | i18n }}</h3>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
   <li
@@ -26,14 +24,14 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>{{ "typeLogin" | i18n }}
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
       </button>
     </span>
   </li>
   <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Card)">
-        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>{{ "typeCard" | i18n }}
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
       </button>
     </span>
   </li>
@@ -43,7 +41,7 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Identity)">
-        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>{{ "typeIdentity" | i18n }}
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
       </button>
     </span>
   </li>
@@ -53,7 +51,9 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>{{ "typeSecureNote" | i18n }}
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
+          "typeSecureNote" | i18n
+        }}
       </button>
     </span>
   </li>

src/app/modules/vault-filter/vault-filter.component.ts

@@ -28,12 +28,6 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
     this.onSearchTextChanged.emit(this.searchText);
   }
 
-  // This method exists because the vault component gets its data mixed up during the initial sync on first login. It looks for data before the sync is complete.
-  // It should be removed as soon as doing so makes sense.
-  async reloadOrganizations() {
-    this.organizations = await this.vaultFilterService.buildOrganizations();
-  }
-
   async initCollections() {
     return await this.vaultFilterService.buildCollections(this.organization?.id);
   }

src/app/modules/vault-filter/vault-filter.module.ts

@@ -12,6 +12,7 @@ import { SharedModule } from "../shared.module";
 
 import { CollectionFilterComponent } from "./components/collection-filter.component";
 import { FolderFilterComponent } from "./components/folder-filter.component";
+import { LinkSsoComponent } from "./components/link-sso.component";
 import { OrganizationFilterComponent } from "./components/organization-filter.component";
 import { OrganizationOptionsComponent } from "./components/organization-options.component";
 import { StatusFilterComponent } from "./components/status-filter.component";
@@ -28,6 +29,7 @@ import { VaultFilterComponent } from "./vault-filter.component";
     OrganizationOptionsComponent,
     StatusFilterComponent,
     TypeFilterComponent,
+    LinkSsoComponent,
   ],
   exports: [VaultFilterComponent],
   providers: [

src/app/modules/vault/modules/individual-vault/individual-vault.component.html

@@ -32,19 +32,26 @@
           </small>
         </h1>
         <div class="ml-auto d-flex">
-          <app-vault-bulk-actions [ciphersComponent]="ciphersComponent" [deleted]="deleted">
+          <app-vault-bulk-actions
+            [ciphersComponent]="ciphersComponent"
+            [deleted]="activeFilter.status === 'trash'"
+          >
           </app-vault-bulk-actions>
           <button
             type="button"
             class="btn btn-outline-primary btn-sm"
             (click)="addCipher()"
-            *ngIf="!deleted"
+            *ngIf="activeFilter.status !== 'trash'"
           >
             <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
           </button>
         </div>
       </div>
-      <app-callout type="warning" *ngIf="deleted" icon="bwi-exclamation-triangle">
+      <app-callout
+        type="warning"
+        *ngIf="activeFilter.status === 'trash'"
+        icon="bwi-exclamation-triangle"
+      >
         {{ trashCleanupWarning }}
       </app-callout>
       <app-vault-ciphers
@@ -95,7 +102,10 @@
         </div>
         <div class="card-body">
           <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-          <a class="btn btn-block btn-outline-secondary" routerLink="/settings/premium">
+          <a
+            class="btn btn-block btn-outline-secondary"
+            routerLink="/settings/subscription/premium"
+          >
             {{ "goPremium" | i18n }}
           </a>
         </div>

src/app/modules/vault/modules/individual-vault/individual-vault.component.ts

@@ -58,7 +58,6 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
   updateKeyModalRef: ViewContainerRef;
 
   favorites = false;
-  type: CipherType = null;
   folderId: string = null;
   collectionId: string = null;
   organizationId: string = null;
@@ -209,7 +208,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
         cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
       }
       if (
-        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolder &&
         this.activeFilter.selectedFolderId != "none" &&
         cipherPassesFilter
       ) {
@@ -327,7 +326,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
 
   async addCipher() {
     const component = await this.editCipher(null);
-    component.type = this.type;
+    component.type = this.activeFilter.cipherType;
     component.folderId = this.folderId === "none" ? null : this.folderId;
     if (this.activeFilter.selectedCollectionId != null) {
       const collection = this.filterComponent.collections.fullList.filter(
@@ -399,7 +398,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
     if (queryParams == null) {
       queryParams = {
         favorites: this.favorites ? true : null,
-        type: this.type,
+        type: this.activeFilter.cipherType,
         folderId: this.folderId,
         collectionId: this.collectionId,
         deleted: this.deleted ? true : null,

src/app/modules/vault/modules/organization-vault/organization-vault.component.ts

@@ -124,7 +124,11 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
 
         this.route.queryParams.subscribe(async (params) => {
           if (params.cipherId) {
-            if ((await this.cipherService.get(params.cipherId)) != null) {
+            if (
+              // Handle users with implicit collection access since they use the admin endpoint
+              this.organization.canEditAnyCollection ||
+              (await this.cipherService.get(params.cipherId)) != null
+            ) {
               this.editCipherId(params.cipherId);
             } else {
               this.platformUtilsService.showToast(
@@ -169,7 +173,7 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
         cipherPassesFilter = cipher.type === this.activeFilter.cipherType;
       }
       if (
-        this.activeFilter.selectedFolderId != null &&
+        this.activeFilter.selectedFolder != null &&
         this.activeFilter.selectedFolderId != "none" &&
         cipherPassesFilter
       ) {

src/app/organizations/guards/permissions.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { ActivatedRouteSnapshot, CanActivate, Router } from "@angular/router";
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -17,7 +17,7 @@ export class PermissionsGuard implements CanActivate {
     private syncService: SyncService
   ) {}
 
-  async canActivate(route: ActivatedRouteSnapshot) {
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     // TODO: We need to fix this issue once and for all.
     if ((await this.syncService.getLastSync()) == null) {
       await this.syncService.fullSync(false);
@@ -39,6 +39,16 @@ export class PermissionsGuard implements CanActivate {
 
     const permissions = route.data == null ? [] : (route.data.permissions as Permissions[]);
     if (permissions != null && !org.hasAnyPermission(permissions)) {
+      // Handle linkable ciphers for organizations the user only has view access to
+      // https://bitwarden.atlassian.net/browse/EC-203
+      if (state.root.queryParamMap.has("cipherId")) {
+        return this.router.createUrlTree(["/vault"], {
+          queryParams: {
+            cipherId: state.root.queryParamMap.get("cipherId"),
+          },
+        });
+      }
+
       this.platformUtilsService.showToast("error", null, this.i18nService.t("accessDenied"));
       return this.router.createUrlTree(["/"]);
     }

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

@@ -1,3 +1,4 @@
+<app-navbar></app-navbar>
 <div class="org-nav" *ngIf="organization">
   <div class="container d-flex">
     <div class="d-flex flex-column">
@@ -35,3 +36,4 @@
   </div>
 </div>
 <router-outlet></router-outlet>
+<app-footer></app-footer>

src/app/organizations/layouts/organization-switcher.component.html

@@ -58,7 +58,7 @@
       </li>
       <bit-menu-divider></bit-menu-divider>
       <li class="tw-list-none" role="none">
-        <a bit-menu-item routerLink="/settings/create-organization">
+        <a bit-menu-item routerLink="/create-organization">
           <i class="bwi bwi-plus mr-2"></i>
           {{ "newOrganization" | i18n }}</a
         >

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

@@ -20,8 +20,9 @@ import {
 import { ListResponse } from "jslib-common/models/response/listResponse";
 import { CollectionView } from "jslib-common/models/view/collectionView";
 
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { CollectionAddEditComponent } from "./collection-add-edit.component";
-import { EntityUsersComponent } from "./entity-users.component";
 
 @Component({
   selector: "app-org-manage-collections",

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

@@ -12,7 +12,8 @@ import { SearchService } from "jslib-common/abstractions/search.service";
 import { Utils } from "jslib-common/misc/utils";
 import { GroupResponse } from "jslib-common/models/response/groupResponse";
 
-import { EntityUsersComponent } from "./entity-users.component";
+import { EntityUsersComponent } from "../../modules/organizations/manage/entity-users.component";
+
 import { GroupAddEditComponent } from "./group-add-edit.component";
 
 @Component({

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

@@ -52,7 +52,7 @@
             target="_blank"
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/provider-users/"
+            href="https://bitwarden.com/help/user-types-access-control/"
           >
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>

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

@@ -14,7 +14,7 @@ import { CipherView } from "jslib-common/models/view/cipherView";
 import { ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent } from "../../reports/exposed-passwords-report.component";
 
 @Component({
-  selector: "app-exposed-passwords-report",
+  selector: "app-org-exposed-passwords-report",
   templateUrl: "../../reports/exposed-passwords-report.component.html",
 })
 export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportComponent {
@@ -41,12 +41,10 @@ export class ExposedPasswordsReportComponent extends BaseExposedPasswordsReportC
   }
 
   ngOnInit() {
-    const dynamicSuper = Object.getPrototypeOf(this.constructor.prototype);
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organization = await this.organizationService.get(params.organizationId);
       this.manageableCiphers = await this.cipherService.getAll();
-      // TODO: We should do something about this, calling super in an async function is bad
-      dynamicSuper.ngOnInit();
+      await this.checkAccess();
     });
   }
 

src/app/oss-routing.module.ts

@@ -155,6 +155,11 @@ const routes: Routes = [
             .IndividualVaultModule,
       },
       { path: "sends", component: SendComponent, data: { title: "Send" } },
+      {
+        path: "create-organization",
+        component: CreateOrganizationComponent,
+        data: { titleId: "newOrganization" },
+      },
       {
         path: "settings",
         component: SettingsComponent,
@@ -181,11 +186,6 @@ const routes: Routes = [
             loadChildren: async () =>
               (await import("./settings/subscription-routing.module")).SubscriptionRoutingModule,
           },
-          {
-            path: "create-organization",
-            component: CreateOrganizationComponent,
-            data: { titleId: "newOrganization" },
-          },
           {
             path: "emergency-access",
             children: [
@@ -229,13 +229,13 @@ const routes: Routes = [
           (await import("./reports/reports-routing.module")).ReportsRoutingModule,
       },
       { path: "setup/families-for-enterprise", component: FamiliesForEnterpriseSetupComponent },
-      {
-        path: "organizations",
-        loadChildren: async () =>
-          (await import("./organizations/organizations.module")).OrganizationsModule,
-      },
     ],
   },
+  {
+    path: "organizations",
+    loadChildren: async () =>
+      (await import("./organizations/organizations.module")).OrganizationsModule,
+  },
 ];
 
 @NgModule({

src/app/oss.module.ts

@@ -1,12 +1,21 @@
 import { NgModule } from "@angular/core";
 
 import { LooseComponentsModule } from "./modules/loose-components.module";
+import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
+import { OrganizationUserModule } from "./modules/organizations/users/organization-user.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
 import { OrganizationBadgeModule } from "./modules/vault/modules/organization-badge/organization-badge.module";
 
 @NgModule({
-  imports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
+  imports: [
+    LooseComponentsModule,
+    VaultFilterModule,
+    OrganizationBadgeModule,
+    PipesModule,
+    OrganizationManageModule,
+    OrganizationUserModule,
+  ],
   exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
   bootstrap: [],
 })

src/app/send/access.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
   <div class="row justify-content-center mt-5">
     <div class="col-12">
-      <p class="lead text-center mb-4">Bitwarden Send</p>
+      <h1 class="lead text-center mb-4">Bitwarden Send</h1>
     </div>
     <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
       <p>{{ "sendCreatorIdentifier" | i18n: creatorIdentifier }}</p>

src/app/services/event.service.ts

@@ -307,6 +307,9 @@ export class EventService {
       case EventType.Organization_DisabledKeyConnector:
         msg = humanReadableMsg = this.i18nService.t("disabledKeyConnector");
         break;
+      case EventType.Organization_SponsorshipsSynced:
+        msg = humanReadableMsg = this.i18nService.t("sponsorshipsSynced");
+        break;
       // Policies
       case EventType.Policy_Updated: {
         msg = this.i18nService.t("modifiedPolicyId", this.formatPolicyId(ev));

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

@@ -68,6 +68,7 @@ export class ChangePasswordComponent extends BaseChangePasswordComponent {
     if (await this.keyConnectorService.getUsesKeyConnector()) {
       this.router.navigate(["/settings/security/two-factor"]);
     }
+    await super.ngOnInit();
   }
 
   async rotateEncKeyClicked() {

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

@@ -1,5 +1,11 @@
-<div class="page-header">
-  <h1>{{ "newOrganization" | i18n }}</h1>
+<div class="container page-content">
+  <div class="row">
+    <div class="col-12">
+      <div class="page-header">
+        <h1>{{ "newOrganization" | i18n }}</h1>
+      </div>
+      <p>{{ "newOrganizationDesc" | i18n }}</p>
+      <app-organization-plans></app-organization-plans>
+    </div>
+  </div>
 </div>
-<p>{{ "newOrganizationDesc" | i18n }}</p>
-<app-organization-plans></app-organization-plans>

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

@@ -5,6 +5,7 @@ import { ApiService } from "jslib-common/abstractions/api.service";
 import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
@@ -68,7 +69,8 @@ export class OrganizationPlansComponent implements OnInit {
     private syncService: SyncService,
     private policyService: PolicyService,
     private organizationService: OrganizationService,
-    private logService: LogService
+    private logService: LogService,
+    private messagingService: MessagingService
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -298,6 +300,7 @@ export class OrganizationPlansComponent implements OnInit {
       this.formPromise = doSubmit();
       const organizationId = await this.formPromise;
       this.onSuccess.emit({ organizationId: organizationId });
+      this.messagingService.send("organizationCreated", organizationId);
     } catch (e) {
       this.logService.error(e);
     }

src/app/settings/settings.component.ts

@@ -54,7 +54,11 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.premium = await this.tokenService.getPremium();
     this.hasFamilySponsorshipAvailable = await this.organizationService.canManageSponsorships();
     const hasPremiumFromOrg = await this.stateService.getCanAccessPremium();
-    const billing = await this.apiService.getUserBillingHistory();
-    this.hideSubscription = !this.premium && hasPremiumFromOrg && billing.hasNoHistory;
+    let billing = null;
+    if (!this.selfHosted) {
+      billing = await this.apiService.getUserBillingHistory();
+    }
+    this.hideSubscription =
+      !this.premium && hasPremiumFromOrg && (this.selfHosted || billing?.hasNoHistory);
   }
 }

src/app/settings/sponsoring-org-row.component.html

@@ -8,6 +8,7 @@
 <td class="table-action-right">
   <div class="dropdown" appListDropdown>
     <button
+      *ngIf="!sponsoringOrg.familySponsorshipToDelete"
       class="btn btn-outline-secondary dropdown-toggle"
       type="button"
       id="dropdownMenuButton"
@@ -21,7 +22,7 @@
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
       <button
         #resendEmailBtn
-        *ngIf="!isSelfHosted"
+        *ngIf="!isSelfHosted && !sponsoringOrg.familySponsorshipValidUntil"
         [appApiAction]="resendEmailPromise"
         class="dropdown-item btn-submit"
         [disabled]="resendEmailBtn.loading"

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

@@ -73,10 +73,14 @@ export class TaxInfoComponent {
           this.logService.error(e);
         }
       } else {
-        const taxInfo = await this.apiService.getTaxInfo();
-        if (taxInfo) {
-          this.taxInfo.postalCode = taxInfo.postalCode;
-          this.taxInfo.country = taxInfo.country || "US";
+        try {
+          const taxInfo = await this.apiService.getTaxInfo();
+          if (taxInfo) {
+            this.taxInfo.postalCode = taxInfo.postalCode;
+            this.taxInfo.country = taxInfo.country || "US";
+          }
+        } catch (e) {
+          this.logService.error(e);
         }
       }
       this.pristine = Object.assign({}, this.taxInfo);
@@ -86,9 +90,16 @@ export class TaxInfoComponent {
       }
     });
 
-    const taxRates = await this.apiService.getTaxRates();
-    this.taxRates = taxRates.data;
-    this.loading = false;
+    try {
+      const taxRates = await this.apiService.getTaxRates();
+      if (taxRates) {
+        this.taxRates = taxRates.data;
+      }
+    } catch (e) {
+      this.logService.error(e);
+    } finally {
+      this.loading = false;
+    }
   }
 
   get taxRate() {

src/app/tools/generator.component.html

@@ -295,16 +295,6 @@
           (blur)="saveUsernameOptions()"
         />
       </div>
-      <div class="form-group col-4">
-        <label for="simplelogin-hostname">{{ "hostname" | i18n }}</label>
-        <input
-          id="simplelogin-hostname"
-          class="form-control"
-          type="text"
-          [(ngModel)]="usernameOptions.forwardedSimpleLoginHostname"
-          (blur)="saveUsernameOptions()"
-        />
-      </div>
     </div>
     <div class="row" *ngIf="usernameOptions.forwardedService === 'anonaddy'">
       <div class="form-group col-4">

src/app/tools/generator.component.ts

@@ -40,11 +40,13 @@ export class GeneratorComponent extends BaseGeneratorComponent {
       route,
       window
     );
-    // Cannot use Firefox Relay on the web vault yet due to CORS issues with Firefox Relay API
-    this.forwardOptions.splice(
-      this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
-      1
-    );
+    if (platformUtilsService.isSelfHost()) {
+      // Cannot use Firefox Relay on self hosted web vaults due to CORS issues with Firefox Relay API
+      this.forwardOptions.splice(
+        this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+        1
+      );
+    }
   }
 
   async history() {

src/app/vault/share.component.html

@@ -77,7 +77,7 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="btn btn-primary"
           *ngIf="!organizations || !organizations.length"
         >

src/locales/en/messages.json

@@ -4163,7 +4163,7 @@
     "message": "Password reset success!"
   },
   "resetPasswordEnrollmentWarning": {
-    "message": "Enrollment will allow organization administrators to change your master password. Are you sure you want to enroll?"
+    "message": "Enrollment will allow organization administrators to change your master password"
   },
   "resetPasswordPolicy": {
     "message": "Master Password Reset"
@@ -4669,13 +4669,13 @@
     "message": "Email Sent"
   },
   "revokeSponsorshipConfirmation": {
-    "message": "After removing this account, the Families organization owner will be responsible for this subscription and related invoices. Are you sure you want to continue?"
+    "message": "After removing this account, the Families plan sponsorship will expire at the end of the billing period. You will not be able to redeem a new sponsorship offer until the existing one expires. Are you sure you want to continue?"
   },
   "removeSponsorshipSuccess": {
     "message": "Sponsorship Removed"
   },
-  "ssoKeyConnectorUnavailable": {
-    "message": "Unable to reach the Key Connector, try again later."
+  "ssoKeyConnectorError": {
+    "message": "Key Connector error: make sure Key Connector is available and working correctly."
   },
   "keyConnectorUrl": {
     "message": "Key Connector URL"
@@ -5005,7 +5005,7 @@
     "message": "Service"
   },
   "unknownCipher": {
-    "message": "Unknown Item, you may need to login with another account to access this item."
+    "message": "Unknown Item, you may need to request permission to access this item."
   },
   "cannotSponsorSelf": {
     "message": "You cannot redeem for the active account. Enter a different email."
@@ -5041,6 +5041,9 @@
     "message": "Last Sync",
     "Description": "Used as a prefix to indicate the last time a sync occured. Example \"Last sync 1968-11-16 00:00:00\""
   },
+  "sponsorshipsSynced": {
+    "message": "Self-hosted sponsorships synced."
+  },
   "billingManagedByProvider": {
     "message": "Managed by $PROVIDER$",
     "placeholders": {

src/scss/vault-filters.scss

@@ -14,14 +14,6 @@
     font-size: $font-size-base;
   }
 
-  a.create-organization-link {
-    &:hover {
-      @include themify($themes) {
-        color: themed("iconHover") !important;
-      }
-    }
-  }
-
   button {
     @extend .no-btn;
   }
@@ -116,6 +108,7 @@
       }
       text-decoration: none;
     }
+    max-width: 90%;
   }
 
   .edit-button {