[fix] Expose observable without write access to callers

1. Extend the BaseVaultFiltersService to manage an observable for collapsed nodes that can be modified from outside the VaultFiltersComponent
2. Subscribe to the new observable in VaultFiltersComponent.ngOnInit() to update the collapsed state of filters when changed from outside the VaultFiltersComponent
3. Add a helper method to VaultFiltersService for expanding vault filters if they are collapsed that sends a new value through the subscription
4. Wire everything up in the IndividualVaultComponent so applying a not null organization filter expanded the vault filters

.dockerignore

@@ -1,3 +1,3 @@
-**/bin
-**/obj
-**/node_modules
+*
+!build/*
+!entrypoint.sh

.github/workflows/build.yml

@@ -218,7 +218,7 @@ jobs:
         run: |
           echo -e "\nBuilding Docker image"
           docker --version
-          docker build -t bitwarden/web -f docker/Dockerfile .
+          docker build -t bitwarden/web .
 
       - name: Tag rc branch
         if: github.ref == 'refs/heads/rc'
@@ -340,7 +340,7 @@ jobs:
 
           echo -e "\nBuilding Docker image"
           docker --version
-          docker build -t bitwardenqa.azurecr.io/web -f docker/Dockerfile-QA .
+          docker build -t bitwardenqa.azurecr.io/web .
 
       - name: Get image tag
         id: image-tag

.github/workflows/version-bump.yml

@@ -38,12 +38,6 @@ jobs:
           version: ${{ github.event.inputs.version_number }}
           file_path: "./package-lock.json"
 
-      - name: Bump Version - csproj
-        uses: bitwarden/gh-actions/version-bump@03ad9a873c39cdc95dd8d77dbbda67f84db43945
-        with:
-          version: ${{ github.event.inputs.version_number }}
-          file_path: "./dotnet-src/Web/Web.csproj"
-
       - name: Commit files
         run: |
           git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"

.gitignore

@@ -13,15 +13,3 @@ dist/
 build/
 !dev-server.shared.pem
 config/local.json
-
-# Build results
-[Dd]ebug/
-[Dd]ebugPublic/
-[Rr]elease/
-[Rr]eleases/
-x64/
-x86/
-build/
-bld/
-[Bb]in/
-[Oo]bj/

Dockerfile

@@ -0,0 +1,20 @@
+FROM bitwarden/server
+
+LABEL com.bitwarden.product="bitwarden"
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        gosu \
+        curl \
+&& rm -rf /var/lib/apt/lists/*
+
+ENV ASPNETCORE_URLS http://+:5000
+WORKDIR /app
+EXPOSE 5000
+COPY ./build .
+COPY entrypoint.sh /
+RUN chmod +x /entrypoint.sh
+
+HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
+
+ENTRYPOINT ["/entrypoint.sh"]

bitwarden-web.sln

@@ -1,16 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Web", "dotnet-src\Web\Web.csproj", "{D0B6D8EB-21F0-400A-91E5-2C4722B9D170}"
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-		Release|Any CPU = Release|Any CPU
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{D0B6D8EB-21F0-400A-91E5-2C4722B9D170}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{D0B6D8EB-21F0-400A-91E5-2C4722B9D170}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{D0B6D8EB-21F0-400A-91E5-2C4722B9D170}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{D0B6D8EB-21F0-400A-91E5-2C4722B9D170}.Release|Any CPU.Build.0 = Release|Any CPU
-	EndGlobalSection
-EndGlobal

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

@@ -22,9 +22,9 @@ const routes: Routes = [
         component: ManageComponent,
         canActivate: [PermissionsGuard],
         data: {
-          permissions: [
-            NavigationPermissionsService.getPermissions("manage").concat(Permissions.ManageSso),
-          ],
+          permissions: NavigationPermissionsService.getPermissions("manage").concat(
+            Permissions.ManageSso
+          ),
         },
         children: [
           {

docker/Dockerfile

@@ -1,84 +0,0 @@
-###############################################
-#                 Build stage                 #
-###############################################
-FROM node:16-slim AS node-build
-
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends \
-        git \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /source
-COPY . .
-
-RUN npm ci
-RUN npm run dist:bit:selfhost
-
-###############################################
-#                 Build stage                 #
-###############################################
-FROM mcr.microsoft.com/dotnet/sdk:5.0-alpine AS dotnet-build
-
-# Add packages
-RUN apk add --update-cache \
-    npm \
-    && rm -rf /var/cache/apk/*
-
-# Copy csproj files as distinct layers
-WORKDIR /source
-COPY dotnet-src/Web/*.csproj ./src/Web/
-#COPY Directory.Build.props .
-
-# Restore project dependencies and tools
-WORKDIR /source/src/Web
-RUN dotnet restore
-
-# Copy required project files
-WORKDIR /source
-COPY dotnet-src/Web/. ./src/Web/
-
-# Build app
-WORKDIR /source/src/Web
-RUN dotnet publish -c release -o /app --no-restore
-
-###############################################
-#                  App stage                  #
-###############################################
-FROM mcr.microsoft.com/dotnet/aspnet:5.0-alpine
-LABEL com.bitwarden.product="bitwarden"
-LABEL com.bitwarden.project="web"
-ENV ASPNETCORE_ENVIRONMENT=Production
-ENV ASPNETCORE_URLS http://+:5000
-EXPOSE 5000
-
-# Add packages
-RUN apk add --update-cache \
-    curl \
-    && rm -rf /var/cache/apk/*
-
-# Create required directories
-RUN mkdir -p /etc/bitwarden/web
-
-COPY docker/confd/app-id.toml /etc/confd/conf.d/
-COPY docker/confd/app-id.conf.tmpl /etc/confd/templates/
-
-ADD https://github.com/kelseyhightower/confd/releases/download/v0.16.0/confd-0.16.0-linux-amd64 /usr/local/bin/confd
-RUN chmod +x /usr/local/bin/confd
-
-# Copy Web server from dotnet-build stage
-COPY --from=dotnet-build /app /server
-
-# Copy app from build stage
-WORKDIR /app
-COPY --from=node-build /source/build ./
-
-# Copy entrypoint script and make it executable
-COPY docker/entrypoint.sh /
-RUN chmod +x /entrypoint.sh
-
-# Create non-root user to run app
-RUN adduser -s /bin/false -D bitwarden && chown -R bitwarden:bitwarden /app /server /etc/bitwarden
-
-USER bitwarden:bitwarden
-HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
-ENTRYPOINT ["/entrypoint.sh"]

docker/Dockerfile-QA

@@ -1,87 +0,0 @@
-###############################################
-#                 Build stage                 #
-###############################################
-FROM node:16-slim AS node-build
-
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends \
-        git \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /source
-COPY . .
-
-RUN npm ci
-# TODO: Make sure version is correct when building QA image.
-# RUN jq --arg version "$VERSION - ${GITHUB_SHA:0:7}" '.version = $version' package.json > package.json.tmp
-# RUN mv package.json.tmp package.json
-RUN npm run build:bit:qa
-
-###############################################
-#                 Build stage                 #
-###############################################
-FROM mcr.microsoft.com/dotnet/sdk:5.0-alpine AS dotnet-build
-
-# Add packages
-RUN apk add --update-cache \
-    npm \
-    && rm -rf /var/cache/apk/*
-
-# Copy csproj files as distinct layers
-WORKDIR /source
-COPY dotnet-src/Web/*.csproj ./src/Web/
-#COPY Directory.Build.props .
-
-# Restore project dependencies and tools
-WORKDIR /source/src/Web
-RUN dotnet restore
-
-# Copy required project files
-WORKDIR /source
-COPY dotnet-src/Web/. ./src/Web/
-
-# Build app
-WORKDIR /source/src/Web
-RUN dotnet publish -c release -o /app --no-restore
-
-###############################################
-#                  App stage                  #
-###############################################
-FROM mcr.microsoft.com/dotnet/aspnet:5.0-alpine
-LABEL com.bitwarden.product="bitwarden"
-LABEL com.bitwarden.project="web"
-ENV ASPNETCORE_ENVIRONMENT=Production
-ENV ASPNETCORE_URLS http://+:5000
-EXPOSE 5000
-
-# Add packages
-RUN apk add --update-cache \
-    curl \
-    && rm -rf /var/cache/apk/*
-
-# Create required directories
-RUN mkdir -p /etc/bitwarden/web
-
-COPY docker/confd/app-id.toml /etc/confd/conf.d/
-COPY docker/confd/app-id.conf.tmpl /etc/confd/templates/
-
-ADD https://github.com/kelseyhightower/confd/releases/download/v0.16.0/confd-0.16.0-linux-amd64 /usr/local/bin/confd
-RUN chmod +x /usr/local/bin/confd
-
-# Copy Web server from dotnet-build stage
-COPY --from=dotnet-build /app /server
-
-# Copy app from build stage
-WORKDIR /app
-COPY --from=node-build /source/build ./
-
-# Copy entrypoint script and make it executable
-COPY docker/entrypoint.sh /
-RUN chmod +x /entrypoint.sh
-
-# Create non-root user to run app
-RUN adduser -s /bin/false -D bitwarden && chown -R bitwarden:bitwarden /app /server /etc/bitwarden
-
-USER bitwarden:bitwarden
-HEALTHCHECK CMD curl -f http://localhost:5000 || exit 1
-ENTRYPOINT ["/entrypoint.sh"]

docker/confd/app-id.conf.tmpl

@@ -1,15 +0,0 @@
-{
-  "trustedFacets": [
-    {
-      "version": {
-        "major": 1,
-        "minor": 0
-      },
-      "ids": [
-        "{{ getenv "globalSettings__baseServiceUri__vault" "https://localhost" }}",
-        "ios:bundle-id:com.8bit.bitwarden",
-        "android:apk-key-hash:dUGFzUzf3lmHSLBDBIv+WaFyZMI"
-      ]
-    }
-  ]
-}

docker/confd/app-id.toml

@@ -1,6 +0,0 @@
-[template]
-src = "app-id.conf.tmpl"
-dest = "/etc/bitwarden/web/app-id.json"
-keys = [
-  "globalSettings__baseServiceUri__vault"
-]

docker/entrypoint.sh

@@ -1,7 +0,0 @@
-#!/bin/sh
-
-/usr/local/bin/confd -onetime -backend env
-
-cp /etc/bitwarden/web/app-id.json /app/app-id.json
-
-exec dotnet /server/Web.dll /contentRoot=/app /webRoot=.

dotnet-src/Web/Program.cs

@@ -1,46 +0,0 @@
-using System.IO;
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.Logging;
-
-namespace Bit.Web
-{
-    public class Program
-    {
-        public static void Main(string[] args)
-        {
-            var config = new ConfigurationBuilder()
-                .AddCommandLine(args)
-                .Build();
-
-            var builder = new WebHostBuilder()
-                .UseConfiguration(config)
-                .UseKestrel()
-                .UseStartup<Startup>()
-                .ConfigureLogging((hostingContext, logging) =>
-                {
-                    logging.AddConsole().AddDebug();
-                })
-                .ConfigureKestrel((context, options) => { });
-
-            var contentRoot = config.GetValue<string>("contentRoot");
-            if (!string.IsNullOrWhiteSpace(contentRoot))
-            {
-                builder.UseContentRoot(contentRoot);
-            }
-            else
-            {
-                builder.UseContentRoot(Directory.GetCurrentDirectory());
-            }
-            
-            var webRoot = config.GetValue<string>("webRoot");
-            if (string.IsNullOrWhiteSpace(webRoot))
-            {
-                builder.UseWebRoot(webRoot);
-            }
-
-            var host = builder.Build();
-            host.Run();
-        }
-    }
-}

dotnet-src/Web/Properties/launchSettings.json

@@ -1,12 +0,0 @@
-{
-  "profiles": {
-    "Server": {
-      "commandName": "Project",
-      "launchBrowser": false,
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      },
-      "applicationUrl": "http://localhost:53910/"
-    }
-  }
-}

dotnet-src/Web/Startup.cs

@@ -1,79 +0,0 @@
-using System.Collections.Generic;
-using System.Globalization;
-using System.Linq;
-using System.Reflection;
-using Microsoft.AspNetCore.Builder;
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.StaticFiles;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.DependencyInjection;
-
-namespace Bit.Web
-{
-    public class Startup
-    {
-        private readonly List<string> _longCachedPaths = new List<string>
-        {
-            "/app/", "/locales/", "/fonts/", "/connectors/", "/scripts/"
-        };
-        private readonly List<string> _mediumCachedPaths = new List<string>
-        {
-            "/images/"
-        };
-
-        public Startup()
-        {
-            CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US");
-        }
-
-        public void ConfigureServices(IServiceCollection services)
-        {
-            services.AddRouting();
-        }
-
-        public void Configure(
-            IApplicationBuilder app,
-            IConfiguration configuration)
-        {
-            // TODO: This should be removed when asp.net natively support avif
-            var provider = new FileExtensionContentTypeProvider { Mappings = { [".avif"] = "image/avif" } };
-
-            var options = new DefaultFilesOptions();
-            options.DefaultFileNames.Clear();
-            options.DefaultFileNames.Add("index.html");
-            app.UseDefaultFiles(options);
-            app.UseStaticFiles(new StaticFileOptions
-            {
-                ContentTypeProvider = provider,
-                OnPrepareResponse = ctx =>
-                {
-                    if (!ctx.Context.Request.Path.HasValue ||
-                        ctx.Context.Response.Headers.ContainsKey("Cache-Control"))
-                    {
-                        return;
-                    }
-                    var path = ctx.Context.Request.Path.Value;
-                    if (_longCachedPaths.Any(ext => path.StartsWith(ext)))
-                    {
-                        // 14 days
-                        ctx.Context.Response.Headers.Append("Cache-Control", "max-age=1209600");
-                    }
-                    if (_mediumCachedPaths.Any(ext => path.StartsWith(ext)))
-                    {
-                        // 7 days
-                        ctx.Context.Response.Headers.Append("Cache-Control", "max-age=604800");
-                    }
-                }
-            });
-            app.UseRouting();
-            app.UseEndpoints(endpoints =>
-            {
-                endpoints.MapGet("/alive",
-                    async context => await context.Response.WriteAsJsonAsync(System.DateTime.UtcNow));
-                endpoints.MapGet("/version",
-                    async context => await context.Response.WriteAsJsonAsync(Assembly.GetEntryAssembly()
-                        .GetCustomAttribute<AssemblyInformationalVersionAttribute>().InformationalVersion));
-            });
-        }
-    }
-}

dotnet-src/Web/Web.csproj

@@ -1,11 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
-
-  <PropertyGroup>
-    <MvcRazorCompileOnPublish>false</MvcRazorCompileOnPublish>
-    <TargetFramework>net5.0</TargetFramework>
-    <Version>2.27.0</Version>
-    <RootNamespace>Bit.$(MSBuildProjectName)</RootNamespace>
-    <RestorePackagesWithLockFile>true</RestorePackagesWithLockFile>
-  </PropertyGroup>
-
-</Project>

dotnet-src/Web/build.sh

@@ -1,15 +0,0 @@
-#!/usr/bin/env bash
-set -e
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-
-echo -e "\n## Building Web"
-
-echo -e "\nBuilding app"
-echo ".NET Core version $(dotnet --version)"
-echo "Restore"
-dotnet restore "$DIR/Web.csproj"
-echo "Clean"
-dotnet clean "$DIR/Web.csproj" -c "Release" -o "$DIR/obj/build-output/publish"
-echo "Publish"
-dotnet publish "$DIR/Web.csproj" -c "Release" -o "$DIR/obj/build-output/publish"

dotnet-src/Web/packages.lock.json

@@ -1,6 +0,0 @@
-{
-  "version": 1,
-  "dependencies": {
-    ".NETCoreApp,Version=v5.0": {}
-  }
-}

entrypoint.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Setup
+
+GROUPNAME="bitwarden"
+USERNAME="bitwarden"
+
+LUID=${LOCAL_UID:-0}
+LGID=${LOCAL_GID:-0}
+
+# Step down from host root to well-known nobody/nogroup user
+
+if [ $LUID -eq 0 ]
+then
+    LUID=65534
+fi
+if [ $LGID -eq 0 ]
+then
+    LGID=65534
+fi
+
+# Create user and group
+
+groupadd -o -g $LGID $GROUPNAME >/dev/null 2>&1 ||
+groupmod -o -g $LGID $GROUPNAME >/dev/null 2>&1
+useradd -o -u $LUID -g $GROUPNAME -s /bin/false $USERNAME >/dev/null 2>&1 ||
+usermod -o -u $LUID -g $GROUPNAME -s /bin/false $USERNAME >/dev/null 2>&1
+mkhomedir_helper $USERNAME
+
+# The rest...
+
+chown -R $USERNAME:$GROUPNAME /etc/bitwarden
+cp /etc/bitwarden/web/app-id.json /app/app-id.json
+chown -R $USERNAME:$GROUPNAME /app
+chown -R $USERNAME:$GROUPNAME /bitwarden_server
+
+exec gosu $USERNAME:$GROUPNAME dotnet /bitwarden_server/Server.dll \
+    /contentRoot=/app /webRoot=. /serveUnknown=false /webVault=true

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.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/components/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/layouts/navbar.component.html

@@ -38,7 +38,7 @@
       <li>
         <button
           [bitMenuTriggerFor]="accountMenu"
-          class="tw-border-0 tw-bg-transparent tw-text-contrast tw-opacity-70 hover:tw-opacity-90"
+          class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
         >
           <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
           <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>

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

@@ -35,7 +35,6 @@ import { BulkStatusComponent as OrgBulkStatusComponent } from "../organizations/
 import { CollectionAddEditComponent as OrgCollectionAddEditComponent } from "../organizations/manage/collection-add-edit.component";
 import { CollectionsComponent as OrgManageCollectionsComponent } from "../organizations/manage/collections.component";
 import { EntityEventsComponent as OrgEntityEventsComponent } from "../organizations/manage/entity-events.component";
-import { EntityUsersComponent as OrgEntityUsersComponent } from "../organizations/manage/entity-users.component";
 import { EventsComponent as OrgEventsComponent } from "../organizations/manage/events.component";
 import { GroupAddEditComponent as OrgGroupAddEditComponent } from "../organizations/manage/group-add-edit.component";
 import { GroupsComponent as OrgGroupsComponent } from "../organizations/manage/groups.component";
@@ -58,6 +57,7 @@ import { SingleOrgPolicyComponent } from "../organizations/policies/single-org.c
 import { TwoFactorAuthenticationPolicyComponent } from "../organizations/policies/two-factor-authentication.component";
 import { AccountComponent as OrgAccountComponent } from "../organizations/settings/account.component";
 import { AdjustSubscription } from "../organizations/settings/adjust-subscription.component";
+import { BillingSyncApiKeyComponent } from "../organizations/settings/billing-sync-api-key.component";
 import { ChangePlanComponent } from "../organizations/settings/change-plan.component";
 import { DeleteOrganizationComponent } from "../organizations/settings/delete-organization.component";
 import { DownloadLicenseComponent } from "../organizations/settings/download-license.component";
@@ -66,6 +66,7 @@ import { OrganizationBillingComponent } from "../organizations/settings/organiza
 import { OrganizationSubscriptionComponent } from "../organizations/settings/organization-subscription.component";
 import { SettingsComponent as OrgSettingComponent } from "../organizations/settings/settings.component";
 import { TwoFactorSetupComponent as OrgTwoFactorSetupComponent } from "../organizations/settings/two-factor-setup.component";
+import { AcceptFamilySponsorshipComponent } from "../organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "../organizations/sponsorships/families-for-enterprise-setup.component";
 import { ExportComponent as OrgExportComponent } from "../organizations/tools/export.component";
 import { ExposedPasswordsReportComponent as OrgExposedPasswordsReportComponent } from "../organizations/tools/exposed-passwords-report.component";
@@ -98,6 +99,7 @@ import { AddCreditComponent } from "../settings/add-credit.component";
 import { AdjustPaymentComponent } from "../settings/adjust-payment.component";
 import { AdjustStorageComponent } from "../settings/adjust-storage.component";
 import { ApiKeyComponent } from "../settings/api-key.component";
+import { BillingSyncKeyComponent } from "../settings/billing-sync-key.component";
 import { ChangeEmailComponent } from "../settings/change-email.component";
 import { ChangeKdfComponent } from "../settings/change-kdf.component";
 import { ChangePasswordComponent } from "../settings/change-password.component";
@@ -171,6 +173,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
   declarations: [
     PremiumBadgeComponent,
     AcceptEmergencyComponent,
+    AcceptFamilySponsorshipComponent,
     AcceptOrganizationComponent,
     AccessComponent,
     AccountComponent,
@@ -183,6 +186,8 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     AdjustSubscription,
     ApiKeyComponent,
     AttachmentsComponent,
+    BillingSyncApiKeyComponent,
+    BillingSyncKeyComponent,
     BreachReportComponent,
     BulkActionsComponent,
     BulkDeleteComponent,
@@ -239,7 +244,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,
@@ -400,7 +404,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
     OrgEntityEventsComponent,
-    OrgEntityUsersComponent,
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,

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/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"

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

@@ -12,7 +12,7 @@
         </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 }}
             </a>
@@ -47,9 +47,9 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
         >
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         </a>
@@ -78,16 +78,14 @@
       </ul>
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
-      <ul class="filter-options">
-        <li class="filter-option active">
-          <button class="filter-button">
-            <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
-            {{ organizations[0].name }}
-          </button>
-        </li>
-      </ul>
+      <div class="filter-heading">
+        <button class="filter-button active">
+          <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
+          {{ organizations[0].name }}
+        </button>
+      </div>
     </ng-container>
-    <ng-container *ngSwitchCase="'organizationMember'">
+    <ng-container *ngSwitchDefault>
       <div class="filter-heading">
         <button
           class="toggle-button"
@@ -114,9 +112,10 @@
         </button>
         <a
           href="#"
-          routerLink="/settings/create-organization"
+          routerLink="/create-organization"
           class="text-muted ml-auto create-organization-link"
-          appA11yTitle="{{ 'addOrganization' | i18n }}"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
         >
           <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         </a>
@@ -140,7 +139,7 @@
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}
             </button>
-            <ng-container *ngIf="organization.id === activeFilter.selectedOrganizationId">
+            <ng-container>
               <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">
                 <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
               </button>

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

@@ -35,7 +35,6 @@ export class OrganizationOptionsComponent {
   ) {}
 
   async ngOnInit() {
-    await this.syncService.fullSync(true);
     await this.load();
   }
 
@@ -83,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);
     }
   }
@@ -107,6 +107,7 @@ 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);
     }
   }
@@ -174,6 +175,7 @@ export class OrganizationOptionsComponent {
       this.platformUtilsService.showToast("success", null, this.i18nService.t(toastStringRef));
       await this.load();
     } catch (e) {
+      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
       this.logService.error(e);
     }
   }

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

@@ -26,19 +26,17 @@
         autocomplete="off"
         appAutofocus
       />
-      <div class="filter">
-        <app-organization-filter
-          *ngIf="showOrgFilter"
-          [hide]="hideOrganizations"
-          [activeFilter]="activeFilter"
-          [collapsedFilterNodes]="collapsedFilterNodes"
-          [organizations]="organizations"
-          [activePersonalOwnershipPolicy]="activePersonalOwnershipPolicy"
-          [activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
-          (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
-          (onFilterChange)="applyFilter($event)"
-        ></app-organization-filter>
-      </div>
+      <app-organization-filter
+        *ngIf="showOrgFilter"
+        [hide]="hideOrganizations"
+        [activeFilter]="activeFilter"
+        [collapsedFilterNodes]="collapsedFilterNodes"
+        [organizations]="organizations"
+        [activePersonalOwnershipPolicy]="activePersonalOwnershipPolicy"
+        [activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
+        (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
+        (onFilterChange)="applyFilter($event)"
+      ></app-organization-filter>
       <div class="filter">
         <app-status-filter
           [hideFavorites]="!showFavorites"

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

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { VaultFilterComponent as BaseVaultFilterComponent } from "jslib-angular/modules/vault-filter/vault-filter.component";
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 import { Organization } from "jslib-common/models/domain/organization";
 
+import { VaultFilterService } from "./vault-filter.service";
+
 @Component({
   selector: "app-vault-filter",
   templateUrl: "vault-filter.component.html",
@@ -20,10 +21,17 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
 
   organization: Organization;
 
-  constructor(vaultFilterService: VaultFilterService) {
+  constructor(protected vaultFilterService: VaultFilterService) {
     super(vaultFilterService);
   }
 
+  async ngOnInit() {
+    await super.ngOnInit();
+    this.vaultFilterService.collapsedFilterNodes$.subscribe((nodes) => {
+      this.collapsedFilterNodes = nodes;
+    });
+  }
+
   searchTextChanged() {
     this.onSearchTextChanged.emit(this.searchText);
   }
@@ -32,6 +40,10 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
   // It should be removed as soon as doing so makes sense.
   async reloadOrganizations() {
     this.organizations = await this.vaultFilterService.buildOrganizations();
+    this.activePersonalOwnershipPolicy =
+      await this.vaultFilterService.checkForPersonalOwnershipPolicy();
+    this.activeSingleOrganizationPolicy =
+      await this.vaultFilterService.checkForSingleOrganizationPolicy();
   }
 
   async initCollections() {

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

@@ -1,6 +1,5 @@
 import { NgModule } from "@angular/core";
 
-import { VaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 import { CipherService } from "jslib-common/abstractions/cipher.service";
 import { CollectionService } from "jslib-common/abstractions/collection.service";
 import { FolderService } from "jslib-common/abstractions/folder.service";
@@ -17,6 +16,7 @@ import { OrganizationOptionsComponent } from "./components/organization-options.
 import { StatusFilterComponent } from "./components/status-filter.component";
 import { TypeFilterComponent } from "./components/type-filter.component";
 import { VaultFilterComponent } from "./vault-filter.component";
+import { VaultFilterService } from "./vault-filter.service";
 
 @NgModule({
   imports: [SharedModule],

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

@@ -1,3 +1,28 @@
+import { BehaviorSubject, Observable } from "rxjs";
+
 import { VaultFilterService as BaseVaultFilterService } from "jslib-angular/modules/vault-filter/vault-filter.service";
 
-export class VaultFilterService extends BaseVaultFilterService {}
+export class VaultFilterService extends BaseVaultFilterService {
+  private _collapsedFilterNodes = new BehaviorSubject<Set<string>>(null);
+  collapsedFilterNodes$: Observable<Set<string>> = this._collapsedFilterNodes.asObservable();
+
+  async buildCollapsedFilterNodes(): Promise<Set<string>> {
+    const nodes = await super.buildCollapsedFilterNodes();
+    this._collapsedFilterNodes.next(nodes);
+    return nodes;
+  }
+
+  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
+    await super.storeCollapsedFilterNodes(collapsedFilterNodes);
+    this._collapsedFilterNodes.next(collapsedFilterNodes);
+  }
+
+  async ensureVaultFiltersAreExpanded() {
+    const collapsedFilterNodes = await super.buildCollapsedFilterNodes();
+    if (!collapsedFilterNodes.has("vaults")) {
+      return;
+    }
+    collapsedFilterNodes.delete("vaults");
+    await this.storeCollapsedFilterNodes(collapsedFilterNodes);
+  }
+}

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

@@ -34,6 +34,7 @@ import { CollectionsComponent } from "../../../../vault/collections.component";
 import { FolderAddEditComponent } from "../../../../vault/folder-add-edit.component";
 import { ShareComponent } from "../../../../vault/share.component";
 import { VaultFilterComponent } from "../../../vault-filter/vault-filter.component";
+import { VaultFilterService } from "../../../vault-filter/vault-filter.service";
 import { VaultService } from "../../vault.service";
 
 const BroadcasterSubscriptionId = "VaultComponent";
@@ -88,7 +89,8 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
     private organizationService: OrganizationService,
     private vaultService: VaultService,
     private cipherService: CipherService,
-    private passwordRepromptService: PasswordRepromptService
+    private passwordRepromptService: PasswordRepromptService,
+    private vaultFilterService: VaultFilterService
   ) {}
 
   async ngOnInit() {
@@ -187,6 +189,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
       this.activeFilter.myVaultOnly = true;
     } else {
       this.activeFilter.selectedOrganizationId = orgId;
+      await this.vaultFilterService.ensureVaultFiltersAreExpanded();
     }
     await this.applyVaultFilter(this.activeFilter);
   }
@@ -209,7 +212,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
       ) {
@@ -352,7 +355,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
 
   async editCipherId(id: string) {
     const cipher = await this.cipherService.get(id);
-    if (cipher.reprompt != 0) {
+    if (cipher != null && cipher.reprompt != 0) {
       if (!(await this.passwordRepromptService.showPasswordPrompt())) {
         this.go({ cipherId: null });
         return;

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

@@ -86,7 +86,7 @@ export class OrganizationVaultComponent implements OnInit, OnDestroy {
       this.ciphersComponent.organization = this.organization;
 
       this.route.queryParams.pipe(first()).subscribe(async (qParams) => {
-        // this.ciphersComponent.searchText = this.vaultFilterComponent.search = qParams.search;
+        this.ciphersComponent.searchText = this.vaultFilterComponent.searchText = qParams.search;
         if (!this.organization.canViewAllCollections) {
           await this.syncService.fullSync(false);
           this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -123,7 +123,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(
@@ -168,7 +172,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/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/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/settings/billing-sync-api-key.component.html

@@ -0,0 +1,117 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncApiKeyTitle">
+  <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="billingSyncApiKeyTitle">
+          {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | 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-user-verification
+          [(ngModel)]="masterPassword"
+          ngDefaultControl
+          name="secret"
+          *ngIf="!clientSecret"
+        >
+        </app-user-verification>
+        <ng-container *ngIf="clientSecret && showRotateScreen">
+          <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
+          <app-callout type="warning">
+            {{ "rotateBillingSyncTokenWarning" | i18n }}
+          </app-callout>
+        </ng-container>
+
+        <div *ngIf="clientSecret && !showRotateScreen">
+          <p>{{ "copyPasteBillingSync" | i18n }}</p>
+          <label for="clientSecret">Billing Sync Key</label>
+          <div class="input-group">
+            <input
+              id="clientSecret"
+              class="form-control text-monospace"
+              type="text"
+              [(ngModel)]="clientSecret"
+              name="clientSecret"
+              disabled
+            />
+            <div class="input-group-append">
+              <button
+                type="button"
+                class="btn btn-outline-secondary"
+                (click)="copy()"
+                [appA11yTitle]="'copy' | i18n"
+              >
+                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+          <div class="small text-muted mt-2" *ngIf="showLastSyncText">
+            <b class="font-weight-semibold">{{ "lastSync" | i18n }}:</b>
+            {{ lastSyncDate | date: "medium" }}
+          </div>
+          <div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
+            <i class="bwi bwi-error"></i>
+            {{
+              (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
+                | i18n: daysBetween
+            }}
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="submit"
+          class="btn btn-primary btn-submit"
+          [disabled]="form.loading"
+          *ngIf="!clientSecret || showRotateScreen"
+        >
+          <i
+            class="bwi bwi-spinner bwi-spin"
+            title="{{ 'loading' | i18n }}"
+            *ngIf="form.loading"
+          ></i>
+          <span>
+            {{ submitButtonText }}
+          </span>
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          data-dismiss="modal"
+          *ngIf="!showRotateScreen"
+        >
+          {{ "close" | i18n }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          *ngIf="showRotateScreen"
+          (click)="cancelRotate()"
+        >
+          {{ "cancel" | i18n }}
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-secondary"
+          *ngIf="clientSecret && !showRotateScreen"
+          (click)="rotateToken()"
+        >
+          {{ "rotateToken" | i18n }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

src/app/organizations/settings/billing-sync-api-key.component.ts

@@ -0,0 +1,108 @@
+import { Component } from "@angular/core";
+
+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 { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+import { OrganizationApiKeyType } from "jslib-common/enums/organizationApiKeyType";
+import { OrganizationApiKeyRequest } from "jslib-common/models/request/organizationApiKeyRequest";
+import { ApiKeyResponse } from "jslib-common/models/response/apiKeyResponse";
+import { Verification } from "jslib-common/types/verification";
+
+@Component({
+  selector: "app-billing-sync-api-key",
+  templateUrl: "billing-sync-api-key.component.html",
+})
+export class BillingSyncApiKeyComponent {
+  organizationId: string;
+  hasBillingToken: boolean;
+
+  showRotateScreen: boolean;
+  masterPassword: Verification;
+  formPromise: Promise<ApiKeyResponse>;
+  clientSecret?: string;
+  keyRevisionDate?: Date;
+  lastSyncDate?: Date = null;
+
+  constructor(
+    private userVerificationService: UserVerificationService,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService
+  ) {}
+
+  copy() {
+    this.platformUtilsService.copyToClipboard(this.clientSecret);
+  }
+
+  async submit() {
+    if (this.showRotateScreen) {
+      this.formPromise = this.userVerificationService
+        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
+        .then((request) => {
+          request.type = OrganizationApiKeyType.BillingSync;
+          return this.apiService.postOrganizationRotateApiKey(this.organizationId, request);
+        });
+      const response = await this.formPromise;
+      await this.load(response);
+      this.showRotateScreen = false;
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("billingSyncApiKeyRotated")
+      );
+    } else {
+      this.formPromise = this.userVerificationService
+        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
+        .then((request) => {
+          request.type = OrganizationApiKeyType.BillingSync;
+          return this.apiService.postOrganizationApiKey(this.organizationId, request);
+        });
+      const response = await this.formPromise;
+      await this.load(response);
+    }
+  }
+
+  async load(response: ApiKeyResponse) {
+    this.clientSecret = response.apiKey;
+    this.keyRevisionDate = response.revisionDate;
+    this.hasBillingToken = true;
+    const syncStatus = await this.apiService.getSponsorshipSyncStatus(this.organizationId);
+    this.lastSyncDate = syncStatus.lastSyncDate;
+  }
+
+  cancelRotate() {
+    this.showRotateScreen = false;
+  }
+
+  rotateToken() {
+    this.showRotateScreen = true;
+  }
+
+  private dayDiff(date1: Date, date2: Date): number {
+    const diffTime = Math.abs(date2.getTime() - date1.getTime());
+    return Math.round(diffTime / (1000 * 60 * 60 * 24));
+  }
+
+  get submitButtonText(): string {
+    if (this.showRotateScreen) {
+      return this.i18nService.t("rotateToken");
+    }
+
+    return this.i18nService.t(this.hasBillingToken ? "continue" : "generateToken");
+  }
+
+  get showLastSyncText(): boolean {
+    // If the keyRevisionDate is later than the lastSyncDate we need to show
+    // a warning that they need to put the billing sync key in their self hosted install
+    return this.lastSyncDate && this.lastSyncDate > this.keyRevisionDate;
+  }
+
+  get showAwaitingSyncText(): boolean {
+    return this.lastSyncDate && this.lastSyncDate <= this.keyRevisionDate;
+  }
+
+  get daysBetween(): number {
+    return this.dayDiff(this.keyRevisionDate, new Date());
+  }
+}

src/app/organizations/settings/organization-subscription.component.html

@@ -188,10 +188,10 @@
         ></app-adjust-storage>
       </div>
     </ng-container>
-
-    <h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
+    <!--Switch to i18n-->
+    <h2 class="spaced-header">{{ "selfHostingTitle" | i18n }}</h2>
     <p class="mb-4">
-      {{ "additionalOptionsDesc" | i18n }}
+      {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
     </p>
     <div class="d-flex">
       <button
@@ -203,6 +203,27 @@
       >
         {{ "downloadLicense" | i18n }}
       </button>
+      <button
+        type="button"
+        class="btn btn-outline-secondary ml-1"
+        (click)="manageBillingSync()"
+        *ngIf="canManageBillingSync"
+      >
+        {{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
+      </button>
+    </div>
+    <div class="mt-3" *ngIf="showDownloadLicense">
+      <app-download-license
+        [organizationId]="organizationId"
+        (onDownloaded)="closeDownloadLicense()"
+        (onCanceled)="closeDownloadLicense()"
+      ></app-download-license>
+    </div>
+    <h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
+    <p class="mb-4">
+      {{ "additionalOptionsDesc" | i18n }}
+    </p>
+    <div class="d-flex">
       <button
         #cancelBtn
         type="button"
@@ -216,13 +237,6 @@
         <span>{{ "cancelSubscription" | i18n }}</span>
       </button>
     </div>
-    <div class="mt-3" *ngIf="showDownloadLicense">
-      <app-download-license
-        [organizationId]="organizationId"
-        (onDownloaded)="closeDownloadLicense()"
-        (onCanceled)="closeDownloadLicense()"
-      ></app-download-license>
-    </div>
   </ng-container>
   <ng-container *ngIf="selfHosted">
     <dl>
@@ -269,5 +283,31 @@
         ></app-update-license>
       </div>
     </div>
+    <div *ngIf="showBillingSyncKey">
+      <h2 class="mt-5">
+        {{ "billingSync" | i18n }}
+      </h2>
+      <p>
+        {{ "billingSyncDesc" | i18n }}
+      </p>
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        (click)="manageBillingSyncSelfHosted()"
+      >
+        {{ "manageBillingSync" | i18n }}
+      </button>
+      <small class="form-text text-muted" *ngIf="billingSyncSetUp">
+        {{ "lastSync" | i18n }}:
+        <span *ngIf="userOrg.familySponsorshipLastSyncDate != null">
+          {{ userOrg.familySponsorshipLastSyncDate | date: "medium" }}
+        </span>
+        <span *ngIf="userOrg.familySponsorshipLastSyncDate == null">
+          {{ "never" | i18n | lowercase }}
+        </span>
+      </small>
+    </div>
   </ng-container>
 </ng-container>
+<ng-template #setupBillingSyncTemplate></ng-template>
+<ng-template #rotateBillingSyncKeyTemplate></ng-template>

src/app/organizations/settings/organization-subscription.component.ts

@@ -1,21 +1,34 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
+import { ModalRef } from "jslib-angular/components/modal/modal.ref";
+import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { OrganizationApiKeyType } from "jslib-common/enums/organizationApiKeyType";
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
 import { PlanType } from "jslib-common/enums/planType";
+import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
 import { Organization } from "jslib-common/models/domain/organization";
+import { OrganizationConnectionResponse } from "jslib-common/models/response/organizationConnectionResponse";
 import { OrganizationSubscriptionResponse } from "jslib-common/models/response/organizationSubscriptionResponse";
 
+import { BillingSyncKeyComponent } from "src/app/settings/billing-sync-key.component";
+
+import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
+
 @Component({
   selector: "app-org-subscription",
   templateUrl: "organization-subscription.component.html",
 })
 export class OrganizationSubscriptionComponent implements OnInit {
+  @ViewChild("setupBillingSyncTemplate", { read: ViewContainerRef, static: true })
+  setupBillingSyncModalRef: ViewContainerRef;
+
   loading = false;
   firstLoaded = false;
   organizationId: string;
@@ -25,17 +38,24 @@ export class OrganizationSubscriptionComponent implements OnInit {
   adjustStorageAdd = true;
   showAdjustStorage = false;
   showUpdateLicense = false;
+  showBillingSyncKey = false;
   showDownloadLicense = false;
   showChangePlan = false;
   sub: OrganizationSubscriptionResponse;
   selfHosted = false;
+  hasBillingSyncToken: boolean;
 
   userOrg: Organization;
+  existingBillingSyncConnection: OrganizationConnectionResponse<BillingSyncConfigApi>;
 
   removeSponsorshipPromise: Promise<any>;
   cancelPromise: Promise<any>;
   reinstatePromise: Promise<any>;
 
+  @ViewChild("rotateBillingSyncKeyTemplate", { read: ViewContainerRef, static: true })
+  billingSyncKeyViewContainerRef: ViewContainerRef;
+  billingSyncKeyRef: [ModalRef, BillingSyncKeyComponent];
+
   constructor(
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
@@ -43,7 +63,8 @@ export class OrganizationSubscriptionComponent implements OnInit {
     private messagingService: MessagingService,
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
-    private logService: LogService
+    private logService: LogService,
+    private modalService: ModalService
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }
@@ -63,10 +84,27 @@ export class OrganizationSubscriptionComponent implements OnInit {
 
     this.loading = true;
     this.userOrg = await this.organizationService.get(this.organizationId);
-
     if (this.userOrg.canManageBilling) {
       this.sub = await this.apiService.getOrganizationSubscription(this.organizationId);
     }
+    const apiKeyResponse = await this.apiService.getOrganizationApiKeyInformation(
+      this.organizationId
+    );
+    this.hasBillingSyncToken = apiKeyResponse.data.some(
+      (i) => i.keyType === OrganizationApiKeyType.BillingSync
+    );
+
+    if (this.selfHosted) {
+      this.showBillingSyncKey = await this.apiService.getCloudCommunicationsEnabled();
+    }
+
+    if (this.showBillingSyncKey) {
+      this.existingBillingSyncConnection = await this.apiService.getOrganizationConnection(
+        this.organizationId,
+        OrganizationConnectionType.CloudBillingSync,
+        BillingSyncConfigApi
+      );
+    }
 
     this.loading = false;
   }
@@ -138,6 +176,20 @@ export class OrganizationSubscriptionComponent implements OnInit {
     this.showDownloadLicense = !this.showDownloadLicense;
   }
 
+  async manageBillingSync() {
+    const [ref] = await this.modalService.openViewRef(
+      BillingSyncApiKeyComponent,
+      this.setupBillingSyncModalRef,
+      (comp) => {
+        comp.organizationId = this.organizationId;
+        comp.hasBillingToken = this.hasBillingSyncToken;
+      }
+    );
+    ref.onClosed.subscribe(async () => {
+      await this.load();
+    });
+  }
+
   closeDownloadLicense() {
     this.showDownloadLicense = false;
   }
@@ -200,6 +252,24 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
   }
 
+  async manageBillingSyncSelfHosted() {
+    this.billingSyncKeyRef = await this.modalService.openViewRef(
+      BillingSyncKeyComponent,
+      this.billingSyncKeyViewContainerRef,
+      (comp) => {
+        comp.entityId = this.organizationId;
+        comp.existingConnectionId = this.existingBillingSyncConnection?.id;
+        comp.billingSyncKey = this.existingBillingSyncConnection?.config?.billingSyncKey;
+        comp.setParentConnection = (
+          connection: OrganizationConnectionResponse<BillingSyncConfigApi>
+        ) => {
+          this.existingBillingSyncConnection = connection;
+          this.billingSyncKeyRef[0].close();
+        };
+      }
+    );
+  }
+
   get isExpired() {
     return (
       this.sub != null && this.sub.expiration != null && new Date(this.sub.expiration) < new Date()
@@ -266,6 +336,16 @@ export class OrganizationSubscriptionComponent implements OnInit {
     );
   }
 
+  get canManageBillingSync() {
+    return (
+      !this.selfHosted &&
+      (this.sub.planType === PlanType.EnterpriseAnnually ||
+        this.sub.planType === PlanType.EnterpriseMonthly ||
+        this.sub.planType === PlanType.EnterpriseAnnually2019 ||
+        this.sub.planType === PlanType.EnterpriseMonthly2019)
+    );
+  }
+
   get subscriptionDesc() {
     if (this.sub.planType === PlanType.Free) {
       return this.i18nService.t("subscriptionFreePlan", this.sub.seats.toString());
@@ -293,4 +373,8 @@ export class OrganizationSubscriptionComponent implements OnInit {
   get showChangePlanButton() {
     return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
   }
+
+  get billingSyncSetUp() {
+    return this.existingBillingSyncConnection?.id != null;
+  }
 }

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/organizations/vault/ciphers.component.ts

@@ -58,7 +58,8 @@ export class CiphersComponent extends BaseCiphersComponent {
     );
   }
 
-  async load(filter: (cipher: CipherView) => boolean = null) {
+  async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
+    this.deleted = deleted || false;
     if (this.organization.canEditAnyCollection) {
       this.accessEvents = this.organization.useEvents;
       this.allCiphers = await this.cipherService.getAllFromApiForOrganization(this.organization.id);

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,15 +229,15 @@ const routes: Routes = [
           (await import("./reports/reports-routing.module")).ReportsRoutingModule,
       },
       { path: "setup/families-for-enterprise", component: FamiliesForEnterpriseSetupComponent },
-      {
-        path: "organizations",
-        loadChildren: () =>
-          import("./organizations/organization-routing.module").then(
-            (m) => m.OrganizationsRoutingModule
-          ),
-      },
     ],
   },
+  {
+    path: "organizations",
+    loadChildren: () =>
+      import("./organizations/organization-routing.module").then(
+        (m) => m.OrganizationsRoutingModule
+      ),
+  },
 ];
 
 @NgModule({

src/app/oss.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
 import { LooseComponentsModule } from "./modules/loose-components.module";
+import { OrganizationManageModule } from "./modules/organizations/manage/organization-manage.module";
 import { PipesModule } from "./modules/pipes/pipes.module";
 import { SharedModule } from "./modules/shared.module";
 import { VaultFilterModule } from "./modules/vault-filter/vault-filter.module";
@@ -13,6 +14,7 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     VaultFilterModule,
     OrganizationBadgeModule,
     PipesModule,
+    OrganizationManageModule,
   ],
   exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
   bootstrap: [],

src/app/settings/billing-sync-key.component.html

@@ -0,0 +1,69 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncTitle">
+  <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="billingSyncTitle">{{ "manageBillingSync" | i18n }}</h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>{{ "billingSyncKeyDesc" | i18n }}</p>
+        <div class="form-group">
+          <label for="billingSyncKey"
+            >{{ "billingSyncKey" | i18n }} <small>(</small><small>{{ "required" | i18n }}</small
+            ><small>)</small></label
+          >
+          <input
+            id="billingSyncKey"
+            type="input"
+            name="billingSyncKey"
+            class="form-control"
+            [(ngModel)]="billingSyncKey"
+            required
+            appAutofocus
+            appInputVerbatim
+          />
+        </div>
+      </div>
+      <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>
+          <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)="deleteConnection()"
+            class="btn btn-outline-danger"
+            appA11yTitle="{{ 'delete' | i18n }}"
+            [disabled]="form.loading"
+          >
+            <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="form.loading" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
+              [hidden]="!form.loading"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

src/app/settings/billing-sync-key.component.ts

@@ -0,0 +1,61 @@
+import { Component } from "@angular/core";
+
+import { ApiService } from "jslib-common/abstractions/api.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
+import { Utils } from "jslib-common/misc/utils";
+import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
+import { BillingSyncConfigRequest } from "jslib-common/models/request/billingSyncConfigRequest";
+import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";
+import { OrganizationConnectionResponse } from "jslib-common/models/response/organizationConnectionResponse";
+
+@Component({
+  selector: "app-billing-sync-key",
+  templateUrl: "billing-sync-key.component.html",
+})
+export class BillingSyncKeyComponent {
+  entityId: string;
+  existingConnectionId: string;
+  billingSyncKey: string;
+  setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => void;
+
+  formPromise: Promise<OrganizationConnectionResponse<BillingSyncConfigApi>> | Promise<void>;
+
+  constructor(private apiService: ApiService, private logService: LogService) {}
+
+  async submit() {
+    try {
+      const request = new OrganizationConnectionRequest(
+        this.entityId,
+        OrganizationConnectionType.CloudBillingSync,
+        true,
+        new BillingSyncConfigRequest(this.billingSyncKey)
+      );
+      if (this.existingConnectionId == null) {
+        this.formPromise = this.apiService.createOrganizationConnection(
+          request,
+          BillingSyncConfigApi
+        );
+      } else {
+        this.formPromise = this.apiService.updateOrganizationConnection(
+          request,
+          BillingSyncConfigApi,
+          this.existingConnectionId
+        );
+      }
+      const response = (await this
+        .formPromise) as OrganizationConnectionResponse<BillingSyncConfigApi>;
+      this.existingConnectionId = response?.id;
+      this.billingSyncKey = response?.config?.billingSyncKey;
+      this.setParentConnection(response);
+    } catch (e) {
+      this.logService.error(e);
+    }
+  }
+
+  async deleteConnection() {
+    this.formPromise = this.apiService.deleteOrganizationConnection(this.existingConnectionId);
+    await this.formPromise;
+    this.setParentConnection(null);
+  }
+}

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/sponsored-families.component.html

@@ -20,33 +20,55 @@
     #form
     (ngSubmit)="submit()"
     [appApiAction]="formPromise"
+    [formGroup]="sponsorshipForm"
     ngNativeValidate
     *ngIf="anyOrgsAvailable"
   >
-    <div *ngIf="moreThanOneOrgAvailable" class="form-group col-7">
+    <div class="form-group col-7">
       <label for="availableSponsorshipOrg">{{ "familiesSponsoringOrgSelect" | i18n }}</label>
       <select
         id="availableSponsorshipOrg"
         name="Available Sponsorship Organization"
-        [(ngModel)]="selectedSponsorshipOrgId"
+        formControlName="selectedSponsorshipOrgId"
         class="form-control"
         required
       >
-        <option value="">-- {{ "select" | i18n }} --</option>
+        <option disabled="true" value="">-- {{ "select" | i18n }} --</option>
         <option *ngFor="let o of availableSponsorshipOrgs" [ngValue]="o.id">{{ o.name }}</option>
       </select>
     </div>
     <div class="form-group col-7">
-      <label for="accountEmail">{{ "sponsoredFamiliesEmail" | i18n }}:</label>
+      <label for="sponsorshipEmail">{{ "sponsoredFamiliesEmail" | i18n }}:</label>
       <input
-        id="accountEmail"
+        id="sponsorshipEmail"
         class="form-control"
         inputmode="email"
-        [(ngModel)]="sponsorshipEmail"
+        formControlName="sponsorshipEmail"
         name="sponsorshipEmail"
         required
+        [attr.aria-invalid]="sponsorshipEmailControl.invalid"
       />
-      <button class="btn btn-primary btn-submit mt-4" type="submit" [disabled]="form.loading">
+      <small
+        aria-errormessage="sponsorshipEmail"
+        *ngIf="sponsorshipEmailControl.errors?.notAllowedValue"
+        class="error-inline"
+        role="alert"
+      >
+        <i class="bwi bwi-error" aria-hidden="true"></i>
+        {{ "cannotSponsorSelf" | i18n }}
+      </small>
+      <small
+        aria-errormessage="sponsorshipEmail"
+        *ngIf="sponsorshipEmailControl.errors?.email"
+        class="error-inline"
+        role="alert"
+      >
+        <i class="bwi bwi-error" aria-hidden="true"></i>
+        {{ "invalidEmail" | i18n }}
+      </small>
+    </div>
+    <div class="form-group col-7">
+      <button class="btn btn-primary btn-submit mt-2" type="submit" [disabled]="form.loading">
         <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "redeem" | i18n }}</span>
       </button>
@@ -59,12 +81,18 @@
           <tr>
             <th>{{ "recipient" | i18n }}</th>
             <th>{{ "sponsoringOrg" | i18n }}</th>
+            <th>{{ "status" | i18n }}</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           <ng-container *ngFor="let o of activeSponsorshipOrgs">
-            <tr sponsoring-org-row [sponsoringOrg]="o" (sponsorshipRemoved)="load(true)"></tr>
+            <tr
+              sponsoring-org-row
+              [sponsoringOrg]="o"
+              [isSelfHosted]="isSelfHosted"
+              (sponsorshipRemoved)="load(true)"
+            ></tr>
           </ng-container>
         </tbody>
       </table>

src/app/settings/sponsored-families.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 
+import { notAllowedValueAsync } from "jslib-angular/validators/notAllowedValueAsync.validator";
 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 { StateService } from "jslib-common/abstractions/state.service";
 import { SyncService } from "jslib-common/abstractions/sync.service";
 import { PlanSponsorshipType } from "jslib-common/enums/planSponsorshipType";
 import { Organization } from "jslib-common/models/domain/organization";
@@ -17,30 +20,54 @@ export class SponsoredFamiliesComponent implements OnInit {
 
   availableSponsorshipOrgs: Organization[] = [];
   activeSponsorshipOrgs: Organization[] = [];
-  selectedSponsorshipOrgId = "";
-  sponsorshipEmail = "";
 
   // Conditional display properties
   formPromise: Promise<any>;
 
+  sponsorshipForm: FormGroup;
+
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private syncService: SyncService,
-    private organizationService: OrganizationService
-  ) {}
+    private organizationService: OrganizationService,
+    private formBuilder: FormBuilder,
+    private stateService: StateService
+  ) {
+    this.sponsorshipForm = this.formBuilder.group({
+      selectedSponsorshipOrgId: [
+        "",
+        {
+          validators: [Validators.required],
+        },
+      ],
+      sponsorshipEmail: [
+        "",
+        {
+          validators: [Validators.email],
+          asyncValidators: [
+            notAllowedValueAsync(async () => await this.stateService.getEmail(), true),
+          ],
+          updateOn: "blur",
+        },
+      ],
+    });
+  }
 
   async ngOnInit() {
     await this.load();
   }
 
   async submit() {
-    this.formPromise = this.apiService.postCreateSponsorship(this.selectedSponsorshipOrgId, {
-      sponsoredEmail: this.sponsorshipEmail,
-      planSponsorshipType: PlanSponsorshipType.FamiliesForEnterprise,
-      friendlyName: this.sponsorshipEmail,
-    });
+    this.formPromise = this.apiService.postCreateSponsorship(
+      this.sponsorshipForm.value.selectedSponsorshipOrgId,
+      {
+        sponsoredEmail: this.sponsorshipForm.value.sponsorshipEmail,
+        planSponsorshipType: PlanSponsorshipType.FamiliesForEnterprise,
+        friendlyName: this.sponsorshipForm.value.sponsorshipEmail,
+      }
+    );
 
     await this.formPromise;
     this.platformUtilsService.showToast("success", null, this.i18nService.t("sponsorshipCreated"));
@@ -67,14 +94,19 @@ export class SponsoredFamiliesComponent implements OnInit {
     );
 
     if (this.availableSponsorshipOrgs.length === 1) {
-      this.selectedSponsorshipOrgId = this.availableSponsorshipOrgs[0].id;
+      this.sponsorshipForm.patchValue({
+        selectedSponsorshipOrgId: this.availableSponsorshipOrgs[0].id,
+      });
     }
     this.loading = false;
   }
 
+  get sponsorshipEmailControl() {
+    return this.sponsorshipForm.controls["sponsorshipEmail"];
+  }
+
   private async resetForm() {
-    this.sponsorshipEmail = "";
-    this.selectedSponsorshipOrgId = "";
+    this.sponsorshipForm.reset();
   }
 
   get anyActiveSponsorships(): boolean {
@@ -85,7 +117,7 @@ export class SponsoredFamiliesComponent implements OnInit {
     return this.availableSponsorshipOrgs.length > 0;
   }
 
-  get moreThanOneOrgAvailable(): boolean {
-    return this.availableSponsorshipOrgs.length > 1;
+  get isSelfHosted(): boolean {
+    return this.platformUtilsService.isSelfHost();
   }
 }

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

@@ -2,9 +2,13 @@
   {{ sponsoringOrg.familySponsorshipFriendlyName }}
 </td>
 <td>{{ sponsoringOrg.name }}</td>
+<td>
+  <span [ngClass]="statusClass">{{ statusMessage }}</span>
+</td>
 <td class="table-action-right">
   <div class="dropdown" appListDropdown>
     <button
+      *ngIf="!sponsoringOrg.familySponsorshipToDelete"
       class="btn btn-outline-secondary dropdown-toggle"
       type="button"
       id="dropdownMenuButton"
@@ -18,6 +22,7 @@
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
       <button
         #resendEmailBtn
+        *ngIf="!isSelfHosted && !sponsoringOrg.familySponsorshipValidUntil"
         [appApiAction]="resendEmailPromise"
         class="dropdown-item btn-submit"
         [disabled]="resendEmailBtn.loading"

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

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { formatDate } from "@angular/common";
+import { Component, EventEmitter, Input, Output, OnInit } from "@angular/core";
 
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
@@ -10,11 +11,15 @@ import { Organization } from "jslib-common/models/domain/organization";
   selector: "[sponsoring-org-row]",
   templateUrl: "sponsoring-org-row.component.html",
 })
-export class SponsoringOrgRowComponent {
+export class SponsoringOrgRowComponent implements OnInit {
   @Input() sponsoringOrg: Organization = null;
+  @Input() isSelfHosted = false;
 
   @Output() sponsorshipRemoved = new EventEmitter();
 
+  statusMessage = "loading";
+  statusClass: "text-success" | "text-danger" = "text-success";
+
   revokeSponsorshipPromise: Promise<any>;
   resendEmailPromise: Promise<any>;
 
@@ -25,6 +30,15 @@ export class SponsoringOrgRowComponent {
     private platformUtilsService: PlatformUtilsService
   ) {}
 
+  ngOnInit(): void {
+    this.setStatus(
+      this.isSelfHosted,
+      this.sponsoringOrg.familySponsorshipToDelete,
+      this.sponsoringOrg.familySponsorshipValidUntil,
+      this.sponsoringOrg.familySponsorshipLastSyncDate
+    );
+  }
+
   async revokeSponsorship() {
     try {
       this.revokeSponsorshipPromise = this.doRevokeSponsorship();
@@ -43,6 +57,10 @@ export class SponsoringOrgRowComponent {
     this.resendEmailPromise = null;
   }
 
+  get isSentAwaitingSync() {
+    return this.isSelfHosted && !this.sponsoringOrg.familySponsorshipLastSyncDate;
+  }
+
   private async doRevokeSponsorship() {
     const isConfirmed = await this.platformUtilsService.showDialog(
       this.i18nService.t("revokeSponsorshipConfirmation"),
@@ -60,4 +78,53 @@ export class SponsoringOrgRowComponent {
     this.platformUtilsService.showToast("success", null, this.i18nService.t("reclaimedFreePlan"));
     this.sponsorshipRemoved.emit();
   }
+
+  private setStatus(
+    selfHosted: boolean,
+    toDelete?: boolean,
+    validUntil?: Date,
+    lastSyncDate?: Date
+  ) {
+    /*
+     * Possible Statuses:
+     * Requested (self-hosted only)
+     * Sent
+     * Active
+     * RequestRevoke
+     * RevokeWhenExpired
+     */
+
+    if (toDelete && validUntil) {
+      // They want to delete but there is a valid until date which means there is an active sponsorship
+      this.statusMessage = this.i18nService.t(
+        "revokeWhenExpired",
+        formatDate(validUntil, "MM/dd/yyyy", this.i18nService.locale)
+      );
+      this.statusClass = "text-danger";
+    } else if (toDelete) {
+      // They want to delete and we don't have a valid until date so we can
+      // this should only happen on a self-hosted install
+      this.statusMessage = this.i18nService.t("requestRemoved");
+      this.statusClass = "text-danger";
+    } else if (validUntil) {
+      // They don't want to delete and they have a valid until date
+      // that means they are actively sponsoring someone
+      this.statusMessage = this.i18nService.t("active");
+      this.statusClass = "text-success";
+    } else if (selfHosted && lastSyncDate) {
+      // We are on a self-hosted install and it has been synced but we have not gotten
+      // a valid until date so we can't know if they are actively sponsoring someone
+      this.statusMessage = this.i18nService.t("sent");
+      this.statusClass = "text-success";
+    } else if (!selfHosted) {
+      // We are in cloud and all other status checks have been false therefore we have
+      // sent the request but it hasn't been accepted yet
+      this.statusMessage = this.i18nService.t("sent");
+      this.statusClass = "text-success";
+    } else {
+      // We are on a self-hosted install and we have not synced yet
+      this.statusMessage = this.i18nService.t("requested");
+      this.statusClass = "text-success";
+    }
+  }
 }

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/vault/ciphers.component.html

@@ -50,7 +50,8 @@
             organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
             profileName="{{ profileName }}"
             (onOrganizationClicked)="onOrganizationClicked(c.organizationId)"
-          ></app-org-badge>
+          >
+          </app-org-badge>
         </td>
         <td class="table-list-options">
           <button

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

@@ -916,7 +916,7 @@
   },
   "specialCharacters": {
     "message": "Special Characters (!@#$%^&*)"
-  }, 
+  },
   "numWords": {
     "message": "Number of Words"
   },
@@ -3034,10 +3034,10 @@
     "message": "Adjustments to your subscription will result in prorated changes to your billing totals. You cannot invite more than $COUNT$ users without increasing your subscription seats.",
     "placeholders": {
       "count": {
-            "content": "$1",
-            "example": "50"
-          }
-        }
+        "content": "$1",
+        "example": "50"
+      }
+    }
   },
   "seatsToAdd": {
     "message": "Seats To Add"
@@ -4395,10 +4395,10 @@
     "message": "Your Master Password does not meet the policy requirements of this organization. In order to join the organization, you must update your Master Password now. Proceeding will log you out of your current session, requiring you to log back in. Active sessions on other devices may continue to remain active for up to one hour."
   },
   "maximumVaultTimeout": {
-    "message": "Vault Timeout"  
+    "message": "Vault Timeout"
   },
   "maximumVaultTimeoutDesc": {
-    "message": "Configure a maximum vault timeout for all users."  
+    "message": "Configure a maximum vault timeout for all users."
   },
   "maximumVaultTimeoutLabel": {
     "message": "Maximum Vault Timeout"
@@ -4594,7 +4594,7 @@
     "message": "Enter your personal email to redeem Bitwarden Families"
   },
   "sponsoredFamiliesLeaveCopy": {
-    "message": "If you leave or are removed from the sponsoring organization, your Families plan will expire at the end of the billing period."
+    "message": "If you remove an offer or are removed from the sponsoring organization, your Families sponsorship will expire at the next renewal date."
   },
   "acceptBitwardenFamiliesHelp": {
     "message": "Accept offer for an existing organization or create a new Families organization."
@@ -4669,7 +4669,7 @@
     "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"
@@ -4803,6 +4803,75 @@
   "freeWithSponsorship": {
     "message": "FREE with sponsorship"
   },
+  "viewBillingSyncToken": {
+    "message": "View Billing Sync Token"
+  },
+  "generateBillingSyncToken": {
+    "message": "Generate Billing Sync Token"
+  },
+  "copyPasteBillingSync": {
+    "message": "Copy and paste this token into the Billing Sync settings of your self-hosted organization."
+  },
+  "billingSyncCanAccess": {
+    "message": "Your Billing Sync token can access and edit this organization's subscription settings."
+  },
+  "manageBillingSync": {
+    "message": "Manage Billing Sync"
+  },
+  "setUpBillingSync": {
+    "message": "Set Up Billing Sync"
+  },
+  "generateToken": {
+    "message": "Generate Token"
+  },
+  "rotateToken": {
+    "message": "Rotate Token"
+  },
+  "rotateBillingSyncTokenWarning": {
+    "message": "If you proceed, you will need to re-setup billing sync on your self-hosted server."
+  },
+  "rotateBillingSyncTokenTitle": {
+    "message": "Rotating the Billing Sync Token will invalidate the previous token."
+  },
+  "selfHostingTitle": {
+    "message": "Self-Hosting"
+  },
+  "selfHostingEnterpriseOrganizationSectionCopy": {
+    "message": "To set-up your organization on your own server, you will need to upload your license file. To support Free Families plans and advanced billing capabilities for your self-hosted organization, you will need to set up billing sync."
+  },
+  "billingSyncApiKeyRotated": {
+    "message": "Token rotated."
+  },
+  "billingSync": {
+    "message": "Billing Sync"
+  },
+  "billingSyncDesc": {
+    "message": "Billing Sync provides Free Families plans for members and advanced billing capabilities by linking your self-hosted Bitwarden to the Bitwarden cloud server."
+  },
+  "billingSyncKeyDesc": {
+    "message": "A Billing Sync Token from your cloud organization's subscription settings is required to complete this form."
+  },
+  "billingSyncKey": {
+    "message": "Billing Sync Token"
+  },
+  "active": {
+    "message": "Active"
+  },
+  "inactive": {
+    "message": "Inactive"
+  },
+  "sentAwaitingSync": {
+    "message": "Sent (Awaiting Sync)"
+  },
+  "sent": {
+    "message": "Sent"
+  },
+  "requestRemoved": {
+    "message": "Removed (Awaiting Sync)"
+  },
+  "requested": {
+    "message": "Requested"
+  },
   "formErrorSummaryPlural": {
     "message": "$COUNT$ fields above need your attention.",
     "placeholders": {
@@ -4935,6 +5004,43 @@
   "service": {
     "message": "Service"
   },
+  "unknownCipher": {
+    "message": "Unknown Item, you may need to login with another account to access this item."
+  },
+  "cannotSponsorSelf": {
+    "message": "You cannot redeem for the active account. Enter a different email."
+  },
+  "revokeWhenExpired": {
+    "message": "Expires $DATE$",
+    "placeholders": {
+      "date": {
+        "content": "$1",
+        "example": "12/31/2020"
+      }
+    }
+  },
+  "awaitingSyncSingular": {
+    "message": "Token rotated $DAYS$ day ago. Update the billing sync token in your self-hosted organization settings.",
+    "placeholders": {
+      "days": {
+        "content": "$1",
+        "example": "1"
+      }
+    }
+  },
+  "awaitingSyncPlural": {
+    "message": "Token rotated $DAYS$ days ago. Update the billing sync token in your self-hosted organization settings.",
+    "placeholders": {
+      "days": {
+        "content": "$1",
+        "example": "1"
+      }
+    }
+  },
+  "lastSync": {
+    "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\""
+  },
   "billingManagedByProvider": {
     "message": "Managed by $PROVIDER$",
     "placeholders": {
@@ -4960,8 +5066,5 @@
   },
   "apiAccessToken": {
     "message": "API Access Token"
-  },
-  "unknownCipher": {
-    "message": "Unknown Item, you may need to login with another account to access this item."
   }
 }

src/scss/modals.scss

@@ -68,7 +68,6 @@
 }
 
 .modal-footer {
-  border-radius: 0.3rem 0.3rem 0 0;
   justify-content: flex-start;
   @include themify($themes) {
     background-color: themed("footerBackgroundColor");

src/scss/vault-filters.scss

@@ -28,8 +28,6 @@
 
   h3,
   button.filter-button {
-    text-transform: uppercase;
-    text-transform: uppercase;
     margin: 0;
     @include themify($themes) {
       color: themed("textMuted");
@@ -118,6 +116,7 @@
       }
       text-decoration: none;
     }
+    max-width: 90%;
   }
 
   .edit-button {

webpack.config.js

@@ -204,8 +204,60 @@ const devServer =
             return [
               {
                 key: "Content-Security-Policy",
-                value:
-                  "default-src 'self'; script-src 'self' 'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w=' https://js.stripe.com https://js.braintreegateway.com https://www.paypalobjects.com; style-src 'self' https://assets.braintreegateway.com https://*.paypal.com 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4='; img-src 'self' data: https://icons.bitwarden.net https://*.paypal.com https://www.paypalobjects.com https://q.stripe.com https://haveibeenpwned.com https://www.gravatar.com; child-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; frame-src 'self' https://js.stripe.com https://assets.braintreegateway.com https://*.paypal.com https://*.duosecurity.com; connect-src 'self' wss://notifications.bitwarden.com https://notifications.bitwarden.com https://cdn.bitwarden.net https://api.pwnedpasswords.com https://2fa.directory/api/v3/totp.json https://api.stripe.com https://www.paypal.com https://api.braintreegateway.com https://client-analytics.braintreegateway.com https://*.braintree-api.com https://*.blob.core.windows.net https://app.simplelogin.io/api/alias/random/new https://app.anonaddy.com/api/v1/aliases; object-src 'self' blob:;",
+                value: `
+                  default-src 'self'; 
+                  script-src 
+                    'self'
+                    'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
+                    https://js.stripe.com
+                    https://js.braintreegateway.com
+                    https://www.paypalobjects.com;
+                  style-src
+                    'self'
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='
+                    'sha256-JVRXyYPueLWdwGwY9m/7u4QlZ1xeQdqUj2t8OVIzZE4=';
+                    'sha256-0xHKHIT3+e2Gknxsm/cpErSprhL+o254L/y5bljg74U='
+                  img-src
+                    'self'
+                    data:
+                      https://icons.bitwarden.net
+                      https://*.paypal.com
+                      https://www.paypalobjects.com
+                      https://q.stripe.com
+                      https://haveibeenpwned.com
+                      https://www.gravatar.com;
+                  child-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com;
+                  frame-src
+                    'self'
+                    https://js.stripe.com
+                    https://assets.braintreegateway.com
+                    https://*.paypal.com
+                    https://*.duosecurity.com;
+                  connect-src
+                    'self'
+                    wss://notifications.bitwarden.com
+                    https://notifications.bitwarden.com
+                    https://cdn.bitwarden.net
+                    https://api.pwnedpasswords.com
+                    https://2fa.directory/api/v3/totp.json
+                    https://api.stripe.com
+                    https://www.paypal.com
+                    https://api.braintreegateway.com
+                    https://client-analytics.braintreegateway.com
+                    https://*.braintree-api.com
+                    https://*.blob.core.windows.net
+                    https://app.simplelogin.io/api/alias/random/new
+                    https://app.anonaddy.com/api/v1/aliases;
+                  object-src 
+                    'self'
+                    blob:;`,
               },
             ];
           }