Merging master into branch

apps/web/src/app/core/broadcaster-messaging.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from "@angular/core";
+
+import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
+import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
+
+@Injectable()
+export class BroadcasterMessagingService implements MessagingService {
+  constructor(private broadcasterService: BroadcasterService) {}
+
+  send(subscriber: string, arg: any = {}) {
+    const message = Object.assign({}, { command: subscriber }, arg);
+    this.broadcasterService.send(message);
+  }
+}

apps/web/src/app/core/core.module.ts

@@ -0,0 +1,148 @@
+import { CommonModule } from "@angular/common";
+import { APP_INITIALIZER, NgModule, Optional, SkipSelf } from "@angular/core";
+
+import {
+  JslibServicesModule,
+  SECURE_STORAGE,
+  STATE_FACTORY,
+  STATE_SERVICE_USE_CACHE,
+  LOCALES_DIRECTORY,
+  SYSTEM_LANGUAGE,
+  MEMORY_STORAGE,
+} from "@bitwarden/angular/services/jslib-services.module";
+import {
+  ModalService as ModalServiceAbstraction,
+  ModalConfig as ModalConfigAbstraction,
+  ModalConfig,
+} from "@bitwarden/angular/services/modal.service";
+import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
+import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/abstractions/cipher.service";
+import { CollectionService as CollectionServiceAbstraction } from "@bitwarden/common/abstractions/collection.service";
+import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
+import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/abstractions/cryptoFunction.service";
+import { ExportService as ExportServiceAbstraction } from "@bitwarden/common/abstractions/export.service";
+import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FolderService as FolderServiceAbstraction } from "@bitwarden/common/abstractions/folder/folder.service.abstraction";
+import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service";
+import { ImportService as ImportServiceAbstraction } from "@bitwarden/common/abstractions/import.service";
+import { MessagingService as MessagingServiceAbstraction } from "@bitwarden/common/abstractions/messaging.service";
+import { PasswordRepromptService as PasswordRepromptServiceAbstraction } from "@bitwarden/common/abstractions/passwordReprompt.service";
+import { PlatformUtilsService as PlatformUtilsServiceAbstraction } from "@bitwarden/common/abstractions/platformUtils.service";
+import { StateService as BaseStateServiceAbstraction } from "@bitwarden/common/abstractions/state.service";
+import { StateMigrationService as StateMigrationServiceAbstraction } from "@bitwarden/common/abstractions/stateMigration.service";
+import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.service";
+import { StateFactory } from "@bitwarden/common/factories/stateFactory";
+import { ExportService } from "@bitwarden/common/services/export.service";
+import { ImportService } from "@bitwarden/common/services/import.service";
+import { MemoryStorageService } from "@bitwarden/common/services/memoryStorage.service";
+
+import { BroadcasterMessagingService } from "./broadcaster-messaging.service";
+import { EventService } from "./event.service";
+import { HtmlStorageService } from "./html-storage.service";
+import { I18nService } from "./i18n.service";
+import { InitService } from "./init.service";
+import { ModalService } from "./modal.service";
+import { PasswordRepromptService } from "./password-reprompt.service";
+import { PolicyListService } from "./policy-list.service";
+import { RouterService } from "./router.service";
+import { Account, GlobalState, StateService } from "./state";
+import { StateMigrationService } from "./state-migration.service";
+import { WebFileDownloadService } from "./web-file-download.service";
+import { WebPlatformUtilsService } from "./web-platform-utils.service";
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, JslibServicesModule],
+  providers: [
+    InitService,
+    RouterService,
+    EventService,
+    PolicyListService,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (initService: InitService) => initService.init(),
+      deps: [InitService],
+      multi: true,
+    },
+    {
+      provide: STATE_FACTORY,
+      useValue: new StateFactory(GlobalState, Account),
+    },
+    {
+      provide: STATE_SERVICE_USE_CACHE,
+      useValue: false,
+    },
+    {
+      provide: I18nServiceAbstraction,
+      useClass: I18nService,
+      deps: [SYSTEM_LANGUAGE, LOCALES_DIRECTORY],
+    },
+    { provide: AbstractStorageService, useClass: HtmlStorageService },
+    {
+      provide: SECURE_STORAGE,
+      // TODO: platformUtilsService.isDev has a helper for this, but using that service here results in a circular dependency.
+      // We have a tech debt item in the backlog to break up platformUtilsService, but in the meantime simply checking the environement here is less cumbersome.
+      useClass: process.env.NODE_ENV === "development" ? HtmlStorageService : MemoryStorageService,
+    },
+    {
+      provide: MEMORY_STORAGE,
+      useClass: MemoryStorageService,
+    },
+    {
+      provide: PlatformUtilsServiceAbstraction,
+      useClass: WebPlatformUtilsService,
+    },
+    { provide: MessagingServiceAbstraction, useClass: BroadcasterMessagingService },
+    { provide: ModalServiceAbstraction, useClass: ModalService },
+    { provide: ModalConfigAbstraction, useClass: ModalConfig },
+    {
+      provide: ImportServiceAbstraction,
+      useClass: ImportService,
+      deps: [
+        CipherServiceAbstraction,
+        FolderServiceAbstraction,
+        ApiServiceAbstraction,
+        I18nServiceAbstraction,
+        CollectionServiceAbstraction,
+        PlatformUtilsServiceAbstraction,
+        CryptoServiceAbstraction,
+      ],
+    },
+    {
+      provide: ExportServiceAbstraction,
+      useClass: ExportService,
+      deps: [
+        FolderServiceAbstraction,
+        CipherServiceAbstraction,
+        ApiServiceAbstraction,
+        CryptoServiceAbstraction,
+        CryptoFunctionServiceAbstraction,
+      ],
+    },
+    {
+      provide: StateMigrationServiceAbstraction,
+      useClass: StateMigrationService,
+      deps: [AbstractStorageService, SECURE_STORAGE, STATE_FACTORY],
+    },
+    StateService,
+    {
+      provide: BaseStateServiceAbstraction,
+      useExisting: StateService,
+    },
+    {
+      provide: PasswordRepromptServiceAbstraction,
+      useClass: PasswordRepromptService,
+    },
+    {
+      provide: FileDownloadService,
+      useClass: WebFileDownloadService,
+    },
+  ],
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {
+    if (parentModule) {
+      throw new Error("CoreModule is already loaded. Import it in the AppModule only");
+    }
+  }
+}

apps/web/src/app/core/event.service.ts

@@ -0,0 +1,571 @@
+import { Injectable } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { PolicyService } from "@bitwarden/common/abstractions/policy.service";
+import { DeviceType } from "@bitwarden/common/enums/deviceType";
+import { EventType } from "@bitwarden/common/enums/eventType";
+import { PolicyType } from "@bitwarden/common/enums/policyType";
+import { EventResponse } from "@bitwarden/common/models/response/eventResponse";
+
+@Injectable()
+export class EventService {
+  constructor(private i18nService: I18nService, private policyService: PolicyService) {}
+
+  getDefaultDateFilters() {
+    const d = new Date();
+    const end = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59);
+    d.setDate(d.getDate() - 30);
+    const start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0);
+    return [this.toDateTimeLocalString(start), this.toDateTimeLocalString(end)];
+  }
+
+  formatDateFilters(filterStart: string, filterEnd: string) {
+    const start: Date = new Date(filterStart);
+    const end: Date = new Date(filterEnd + ":59.999");
+    if (isNaN(start.getTime()) || isNaN(end.getTime()) || end < start) {
+      throw new Error("Invalid date range.");
+    }
+    return [start.toISOString(), end.toISOString()];
+  }
+
+  async getEventInfo(ev: EventResponse, options = new EventOptions()): Promise<EventInfo> {
+    const appInfo = this.getAppInfo(ev.deviceType);
+    const { message, humanReadableMessage } = await this.getEventMessage(ev, options);
+    return {
+      message: message,
+      humanReadableMessage: humanReadableMessage,
+      appIcon: appInfo[0],
+      appName: appInfo[1],
+    };
+  }
+
+  private async getEventMessage(ev: EventResponse, options: EventOptions) {
+    let msg = "";
+    let humanReadableMsg = "";
+    switch (ev.type) {
+      // User
+      case EventType.User_LoggedIn:
+        msg = humanReadableMsg = this.i18nService.t("loggedIn");
+        break;
+      case EventType.User_ChangedPassword:
+        msg = humanReadableMsg = this.i18nService.t("changedPassword");
+        break;
+      case EventType.User_Updated2fa:
+        msg = humanReadableMsg = this.i18nService.t("enabledUpdated2fa");
+        break;
+      case EventType.User_Disabled2fa:
+        msg = humanReadableMsg = this.i18nService.t("disabled2fa");
+        break;
+      case EventType.User_Recovered2fa:
+        msg = humanReadableMsg = this.i18nService.t("recovered2fa");
+        break;
+      case EventType.User_FailedLogIn:
+        msg = humanReadableMsg = this.i18nService.t("failedLogin");
+        break;
+      case EventType.User_FailedLogIn2fa:
+        msg = humanReadableMsg = this.i18nService.t("failedLogin2fa");
+        break;
+      case EventType.User_ClientExportedVault:
+        msg = humanReadableMsg = this.i18nService.t("exportedVault");
+        break;
+      case EventType.User_UpdatedTempPassword:
+        msg = humanReadableMsg = this.i18nService.t("updatedMasterPassword");
+        break;
+      case EventType.User_MigratedKeyToKeyConnector:
+        msg = humanReadableMsg = this.i18nService.t("migratedKeyConnector");
+        break;
+      // Cipher
+      case EventType.Cipher_Created:
+        msg = this.i18nService.t("createdItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("createdItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_Updated:
+        msg = this.i18nService.t("editedItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("editedItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_Deleted:
+        msg = this.i18nService.t("permanentlyDeletedItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "permanentlyDeletedItemId",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_SoftDeleted:
+        msg = this.i18nService.t("deletedItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("deletedItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_Restored:
+        msg = this.i18nService.t("restoredItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("restoredItemId", this.formatCipherId(ev, options));
+        break;
+      case EventType.Cipher_AttachmentCreated:
+        msg = this.i18nService.t("createdAttachmentForItem", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "createdAttachmentForItem",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_AttachmentDeleted:
+        msg = this.i18nService.t("deletedAttachmentForItem", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "deletedAttachmentForItem",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_Shared:
+        msg = this.i18nService.t("movedItemIdToOrg", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("movedItemIdToOrg", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_ClientViewed:
+        msg = this.i18nService.t("viewedItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("viewedItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_ClientToggledPasswordVisible:
+        msg = this.i18nService.t("viewedPasswordItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("viewedPasswordItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_ClientToggledHiddenFieldVisible:
+        msg = this.i18nService.t("viewedHiddenFieldItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "viewedHiddenFieldItemId",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_ClientToggledCardCodeVisible:
+        msg = this.i18nService.t("viewedSecurityCodeItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "viewedSecurityCodeItemId",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_ClientCopiedHiddenField:
+        msg = this.i18nService.t("copiedHiddenFieldItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "copiedHiddenFieldItemId",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_ClientCopiedPassword:
+        msg = this.i18nService.t("copiedPasswordItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("copiedPasswordItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_ClientCopiedCardCode:
+        msg = this.i18nService.t("copiedSecurityCodeItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "copiedSecurityCodeItemId",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      case EventType.Cipher_ClientAutofilled:
+        msg = this.i18nService.t("autofilledItemId", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t("autofilledItemId", this.getShortId(ev.cipherId));
+        break;
+      case EventType.Cipher_UpdatedCollections:
+        msg = this.i18nService.t("editedCollectionsForItem", this.formatCipherId(ev, options));
+        humanReadableMsg = this.i18nService.t(
+          "editedCollectionsForItem",
+          this.getShortId(ev.cipherId)
+        );
+        break;
+      // Collection
+      case EventType.Collection_Created:
+        msg = this.i18nService.t("createdCollectionId", this.formatCollectionId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "createdCollectionId",
+          this.getShortId(ev.collectionId)
+        );
+        break;
+      case EventType.Collection_Updated:
+        msg = this.i18nService.t("editedCollectionId", this.formatCollectionId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "editedCollectionId",
+          this.getShortId(ev.collectionId)
+        );
+        break;
+      case EventType.Collection_Deleted:
+        msg = this.i18nService.t("deletedCollectionId", this.formatCollectionId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "deletedCollectionId",
+          this.getShortId(ev.collectionId)
+        );
+        break;
+      // Group
+      case EventType.Group_Created:
+        msg = this.i18nService.t("createdGroupId", this.formatGroupId(ev));
+        humanReadableMsg = this.i18nService.t("createdGroupId", this.getShortId(ev.groupId));
+        break;
+      case EventType.Group_Updated:
+        msg = this.i18nService.t("editedGroupId", this.formatGroupId(ev));
+        humanReadableMsg = this.i18nService.t("editedGroupId", this.getShortId(ev.groupId));
+        break;
+      case EventType.Group_Deleted:
+        msg = this.i18nService.t("deletedGroupId", this.formatGroupId(ev));
+        humanReadableMsg = this.i18nService.t("deletedGroupId", this.getShortId(ev.groupId));
+        break;
+      // Org user
+      case EventType.OrganizationUser_Invited:
+        msg = this.i18nService.t("invitedUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "invitedUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_Confirmed:
+        msg = this.i18nService.t("confirmedUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "confirmedUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_Updated:
+        msg = this.i18nService.t("editedUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "editedUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_Removed:
+        msg = this.i18nService.t("removedUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "removedUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_UpdatedGroups:
+        msg = this.i18nService.t("editedGroupsForUser", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "editedGroupsForUser",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_UnlinkedSso:
+        msg = this.i18nService.t("unlinkedSsoUser", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "unlinkedSsoUser",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_ResetPassword_Enroll:
+        msg = this.i18nService.t("eventEnrollPasswordReset", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "eventEnrollPasswordReset",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_ResetPassword_Withdraw:
+        msg = this.i18nService.t("eventWithdrawPasswordReset", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "eventWithdrawPasswordReset",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_AdminResetPassword:
+        msg = this.i18nService.t("eventAdminPasswordReset", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "eventAdminPasswordReset",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_ResetSsoLink:
+        msg = this.i18nService.t("eventResetSsoLink", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "eventResetSsoLink",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_FirstSsoLogin:
+        msg = this.i18nService.t("firstSsoLogin", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "firstSsoLogin",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_Revoked:
+        msg = this.i18nService.t("revokedUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "revokedUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      case EventType.OrganizationUser_Restored:
+        msg = this.i18nService.t("restoredUserId", this.formatOrgUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "restoredUserId",
+          this.getShortId(ev.organizationUserId)
+        );
+        break;
+      // Org
+      case EventType.Organization_Updated:
+        msg = humanReadableMsg = this.i18nService.t("editedOrgSettings");
+        break;
+      case EventType.Organization_PurgedVault:
+        msg = humanReadableMsg = this.i18nService.t("purgedOrganizationVault");
+        break;
+      case EventType.Organization_ClientExportedVault:
+        msg = humanReadableMsg = this.i18nService.t("exportedOrganizationVault");
+        break;
+      case EventType.Organization_VaultAccessed:
+        msg = humanReadableMsg = this.i18nService.t("vaultAccessedByProvider");
+        break;
+      case EventType.Organization_EnabledSso:
+        msg = humanReadableMsg = this.i18nService.t("enabledSso");
+        break;
+      case EventType.Organization_DisabledSso:
+        msg = humanReadableMsg = this.i18nService.t("disabledSso");
+        break;
+      case EventType.Organization_EnabledKeyConnector:
+        msg = humanReadableMsg = this.i18nService.t("enabledKeyConnector");
+        break;
+      case EventType.Organization_DisabledKeyConnector:
+        msg = humanReadableMsg = this.i18nService.t("disabledKeyConnector");
+        break;
+      case EventType.Organization_SponsorshipsSynced:
+        msg = humanReadableMsg = this.i18nService.t("sponsorshipsSynced");
+        break;
+      // Policies
+      case EventType.Policy_Updated: {
+        msg = this.i18nService.t("modifiedPolicyId", this.formatPolicyId(ev));
+
+        const policies = await this.policyService.getAll();
+        const policy = policies.filter((p) => p.id === ev.policyId)[0];
+        let p1 = this.getShortId(ev.policyId);
+        if (policy != null) {
+          p1 = PolicyType[policy.type];
+        }
+
+        humanReadableMsg = this.i18nService.t("modifiedPolicyId", p1);
+        break;
+      }
+      // Provider users:
+      case EventType.ProviderUser_Invited:
+        msg = this.i18nService.t("invitedUserId", this.formatProviderUserId(ev));
+        humanReadableMsg = this.i18nService.t("invitedUserId", this.getShortId(ev.providerUserId));
+        break;
+      case EventType.ProviderUser_Confirmed:
+        msg = this.i18nService.t("confirmedUserId", this.formatProviderUserId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "confirmedUserId",
+          this.getShortId(ev.providerUserId)
+        );
+        break;
+      case EventType.ProviderUser_Updated:
+        msg = this.i18nService.t("editedUserId", this.formatProviderUserId(ev));
+        humanReadableMsg = this.i18nService.t("editedUserId", this.getShortId(ev.providerUserId));
+        break;
+      case EventType.ProviderUser_Removed:
+        msg = this.i18nService.t("removedUserId", this.formatProviderUserId(ev));
+        humanReadableMsg = this.i18nService.t("removedUserId", this.getShortId(ev.providerUserId));
+        break;
+      case EventType.ProviderOrganization_Created:
+        msg = this.i18nService.t("createdOrganizationId", this.formatProviderOrganizationId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "createdOrganizationId",
+          this.getShortId(ev.providerOrganizationId)
+        );
+        break;
+      case EventType.ProviderOrganization_Added:
+        msg = this.i18nService.t("addedOrganizationId", this.formatProviderOrganizationId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "addedOrganizationId",
+          this.getShortId(ev.providerOrganizationId)
+        );
+        break;
+      case EventType.ProviderOrganization_Removed:
+        msg = this.i18nService.t("removedOrganizationId", this.formatProviderOrganizationId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "removedOrganizationId",
+          this.getShortId(ev.providerOrganizationId)
+        );
+        break;
+      case EventType.ProviderOrganization_VaultAccessed:
+        msg = this.i18nService.t("accessedClientVault", this.formatProviderOrganizationId(ev));
+        humanReadableMsg = this.i18nService.t(
+          "accessedClientVault",
+          this.getShortId(ev.providerOrganizationId)
+        );
+        break;
+      default:
+        break;
+    }
+    return {
+      message: msg === "" ? null : msg,
+      humanReadableMessage: humanReadableMsg === "" ? null : humanReadableMsg,
+    };
+  }
+
+  private getAppInfo(deviceType: DeviceType): [string, string] {
+    switch (deviceType) {
+      case DeviceType.Android:
+        return ["bwi-android", this.i18nService.t("mobile") + " - Android"];
+      case DeviceType.iOS:
+        return ["bwi-apple", this.i18nService.t("mobile") + " - iOS"];
+      case DeviceType.UWP:
+        return ["bwi-windows", this.i18nService.t("mobile") + " - Windows"];
+      case DeviceType.ChromeExtension:
+        return ["bwi-chrome", this.i18nService.t("extension") + " - Chrome"];
+      case DeviceType.FirefoxExtension:
+        return ["bwi-firefox", this.i18nService.t("extension") + " - Firefox"];
+      case DeviceType.OperaExtension:
+        return ["bwi-opera", this.i18nService.t("extension") + " - Opera"];
+      case DeviceType.EdgeExtension:
+        return ["bwi-edge", this.i18nService.t("extension") + " - Edge"];
+      case DeviceType.VivaldiExtension:
+        return ["bwi-puzzle", this.i18nService.t("extension") + " - Vivaldi"];
+      case DeviceType.SafariExtension:
+        return ["bwi-safari", this.i18nService.t("extension") + " - Safari"];
+      case DeviceType.WindowsDesktop:
+        return ["bwi-windows", this.i18nService.t("desktop") + " - Windows"];
+      case DeviceType.MacOsDesktop:
+        return ["bwi-apple", this.i18nService.t("desktop") + " - macOS"];
+      case DeviceType.LinuxDesktop:
+        return ["bwi-linux", this.i18nService.t("desktop") + " - Linux"];
+      case DeviceType.ChromeBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Chrome"];
+      case DeviceType.FirefoxBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Firefox"];
+      case DeviceType.OperaBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Opera"];
+      case DeviceType.SafariBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Safari"];
+      case DeviceType.VivaldiBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Vivaldi"];
+      case DeviceType.EdgeBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Edge"];
+      case DeviceType.IEBrowser:
+        return ["bwi-globe", this.i18nService.t("webVault") + " - IE"];
+      case DeviceType.UnknownBrowser:
+        return [
+          "bwi-globe",
+          this.i18nService.t("webVault") + " - " + this.i18nService.t("unknown"),
+        ];
+      default:
+        return ["bwi-globe", this.i18nService.t("unknown")];
+    }
+  }
+
+  private formatCipherId(ev: EventResponse, options: EventOptions) {
+    const shortId = this.getShortId(ev.cipherId);
+    if (ev.organizationId == null || !options.cipherInfo) {
+      return "<code>" + shortId + "</code>";
+    }
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/organizations/" +
+        ev.organizationId +
+        "/vault?search=" +
+        shortId +
+        "&viewEvents=" +
+        ev.cipherId
+    );
+    return a.outerHTML;
+  }
+
+  private formatGroupId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.groupId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/organizations/" + ev.organizationId + "/manage/groups?search=" + shortId
+    );
+    return a.outerHTML;
+  }
+
+  private formatCollectionId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.collectionId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/organizations/" + ev.organizationId + "/manage/collections?search=" + shortId
+    );
+    return a.outerHTML;
+  }
+
+  private formatOrgUserId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.organizationUserId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/organizations/" +
+        ev.organizationId +
+        "/manage/people?search=" +
+        shortId +
+        "&viewEvents=" +
+        ev.organizationUserId
+    );
+    return a.outerHTML;
+  }
+
+  private formatProviderUserId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.providerUserId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/providers/" +
+        ev.providerId +
+        "/manage/people?search=" +
+        shortId +
+        "&viewEvents=" +
+        ev.providerUserId
+    );
+    return a.outerHTML;
+  }
+
+  private formatProviderOrganizationId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.providerOrganizationId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute("href", "#/providers/" + ev.providerId + "/clients?search=" + shortId);
+    return a.outerHTML;
+  }
+
+  private formatPolicyId(ev: EventResponse) {
+    const shortId = this.getShortId(ev.policyId);
+    const a = this.makeAnchor(shortId);
+    a.setAttribute(
+      "href",
+      "#/organizations/" + ev.organizationId + "/manage/policies?policyId=" + ev.policyId
+    );
+    return a.outerHTML;
+  }
+
+  private makeAnchor(shortId: string) {
+    const a = document.createElement("a");
+    a.title = this.i18nService.t("view");
+    a.innerHTML = "<code>" + shortId + "</code>";
+    return a;
+  }
+
+  private getShortId(id: string) {
+    return id?.substring(0, 8);
+  }
+
+  private toDateTimeLocalString(date: Date) {
+    return (
+      date.getFullYear() +
+      "-" +
+      this.pad(date.getMonth() + 1) +
+      "-" +
+      this.pad(date.getDate()) +
+      "T" +
+      this.pad(date.getHours()) +
+      ":" +
+      this.pad(date.getMinutes())
+    );
+  }
+
+  private pad(num: number) {
+    const norm = Math.floor(Math.abs(num));
+    return (norm < 10 ? "0" : "") + norm;
+  }
+}
+
+export class EventInfo {
+  message: string;
+  humanReadableMessage: string;
+  appIcon: string;
+  appName: string;
+}
+
+export class EventOptions {
+  cipherInfo = true;
+}

apps/web/src/app/core/html-storage.service.ts

@@ -0,0 +1,70 @@
+import { Injectable } from "@angular/core";
+
+import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.service";
+import { HtmlStorageLocation } from "@bitwarden/common/enums/htmlStorageLocation";
+import { StorageOptions } from "@bitwarden/common/models/domain/storageOptions";
+
+@Injectable()
+export class HtmlStorageService implements AbstractStorageService {
+  get defaultOptions(): StorageOptions {
+    return { htmlStorageLocation: HtmlStorageLocation.Session };
+  }
+
+  get<T>(key: string, options: StorageOptions = this.defaultOptions): Promise<T> {
+    let json: string = null;
+    switch (options.htmlStorageLocation) {
+      case HtmlStorageLocation.Local:
+        json = window.localStorage.getItem(key);
+        break;
+      case HtmlStorageLocation.Session:
+      default:
+        json = window.sessionStorage.getItem(key);
+        break;
+    }
+
+    if (json != null) {
+      const obj = JSON.parse(json);
+      return Promise.resolve(obj as T);
+    }
+    return Promise.resolve(null);
+  }
+
+  async has(key: string, options: StorageOptions = this.defaultOptions): Promise<boolean> {
+    return (await this.get(key, options)) != null;
+  }
+
+  save(key: string, obj: any, options: StorageOptions = this.defaultOptions): Promise<any> {
+    if (obj == null) {
+      return this.remove(key, options);
+    }
+
+    if (obj instanceof Set) {
+      obj = Array.from(obj);
+    }
+
+    const json = JSON.stringify(obj);
+    switch (options.htmlStorageLocation) {
+      case HtmlStorageLocation.Local:
+        window.localStorage.setItem(key, json);
+        break;
+      case HtmlStorageLocation.Session:
+      default:
+        window.sessionStorage.setItem(key, json);
+        break;
+    }
+    return Promise.resolve();
+  }
+
+  remove(key: string, options: StorageOptions = this.defaultOptions): Promise<any> {
+    switch (options.htmlStorageLocation) {
+      case HtmlStorageLocation.Local:
+        window.localStorage.removeItem(key);
+        break;
+      case HtmlStorageLocation.Session:
+      default:
+        window.sessionStorage.removeItem(key);
+        break;
+    }
+    return Promise.resolve();
+  }
+}

apps/web/src/app/core/i18n.service.ts

@@ -0,0 +1,72 @@
+import { I18nService as BaseI18nService } from "@bitwarden/common/services/i18n.service";
+
+export class I18nService extends BaseI18nService {
+  constructor(systemLanguage: string, localesDirectory: string) {
+    super(systemLanguage || "en-US", localesDirectory, async (formattedLocale: string) => {
+      const filePath =
+        this.localesDirectory +
+        "/" +
+        formattedLocale +
+        "/messages.json?cache=" +
+        process.env.CACHE_TAG;
+      const localesResult = await fetch(filePath);
+      const locales = await localesResult.json();
+      return locales;
+    });
+
+    // Please leave 'en' where it is, as it's our fallback language in case no translation can be found
+    this.supportedTranslationLocales = [
+      "en",
+      "af",
+      "az",
+      "be",
+      "bg",
+      "bn",
+      "bs",
+      "ca",
+      "cs",
+      "da",
+      "de",
+      "el",
+      "en-GB",
+      "en-IN",
+      "eo",
+      "es",
+      "et",
+      "fi",
+      "fil",
+      "fr",
+      "he",
+      "hi",
+      "hr",
+      "hu",
+      "id",
+      "it",
+      "ja",
+      "ka",
+      "km",
+      "kn",
+      "ko",
+      "lv",
+      "ml",
+      "nb",
+      "nl",
+      "nn",
+      "pl",
+      "pt-PT",
+      "pt-BR",
+      "ro",
+      "ru",
+      "si",
+      "sk",
+      "sl",
+      "sr",
+      "sv",
+      "tr",
+      "uk",
+      "vi",
+      "zh-CN",
+      "zh-TW",
+    ];
+  }
+}

apps/web/src/app/core/index.ts

@@ -0,0 +1,5 @@
+export * from "./core.module";
+export * from "./event.service";
+export * from "./policy-list.service";
+export * from "./router.service";
+export * from "./state/state.service";

apps/web/src/app/core/init.service.ts

@@ -0,0 +1,58 @@
+import { Inject, Injectable } from "@angular/core";
+
+import { WINDOW } from "@bitwarden/angular/services/jslib-services.module";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
+import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
+import {
+  EnvironmentService as EnvironmentServiceAbstraction,
+  Urls,
+} from "@bitwarden/common/abstractions/environment.service";
+import { EventService as EventLoggingServiceAbstraction } from "@bitwarden/common/abstractions/event.service";
+import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service";
+import { NotificationsService as NotificationsServiceAbstraction } from "@bitwarden/common/abstractions/notifications.service";
+import { StateService as StateServiceAbstraction } from "@bitwarden/common/abstractions/state.service";
+import { TwoFactorService as TwoFactorServiceAbstraction } from "@bitwarden/common/abstractions/twoFactor.service";
+import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from "@bitwarden/common/abstractions/vaultTimeout.service";
+import { ContainerService } from "@bitwarden/common/services/container.service";
+import { EventService as EventLoggingService } from "@bitwarden/common/services/event.service";
+import { VaultTimeoutService as VaultTimeoutService } from "@bitwarden/common/services/vaultTimeout.service";
+
+import { I18nService } from "./i18n.service";
+
+@Injectable()
+export class InitService {
+  constructor(
+    @Inject(WINDOW) private win: Window,
+    private environmentService: EnvironmentServiceAbstraction,
+    private notificationsService: NotificationsServiceAbstraction,
+    private vaultTimeoutService: VaultTimeoutServiceAbstraction,
+    private i18nService: I18nServiceAbstraction,
+    private eventLoggingService: EventLoggingServiceAbstraction,
+    private twoFactorService: TwoFactorServiceAbstraction,
+    private stateService: StateServiceAbstraction,
+    private cryptoService: CryptoServiceAbstraction,
+    private themingService: AbstractThemingService
+  ) {}
+
+  init() {
+    return async () => {
+      await this.stateService.init();
+
+      const urls = process.env.URLS as Urls;
+      urls.base ??= this.win.location.origin;
+      this.environmentService.setUrls(urls);
+
+      setTimeout(() => this.notificationsService.init(), 3000);
+      (this.vaultTimeoutService as VaultTimeoutService).init(true);
+      const locale = await this.stateService.getLocale();
+      await (this.i18nService as I18nService).init(locale);
+      (this.eventLoggingService as EventLoggingService).init(true);
+      this.twoFactorService.init();
+      const htmlEl = this.win.document.documentElement;
+      htmlEl.classList.add("locale_" + this.i18nService.translationLocale);
+      await this.themingService.monitorThemeChanges();
+      const containerService = new ContainerService(this.cryptoService);
+      containerService.attachToGlobal(this.win);
+    };
+  }
+}

apps/web/src/app/core/modal.service.ts

@@ -0,0 +1,58 @@
+import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from "@angular/core";
+import * as jq from "jquery";
+import { first } from "rxjs/operators";
+
+import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
+import { ModalService as BaseModalService } from "@bitwarden/angular/services/modal.service";
+import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
+import { Utils } from "@bitwarden/common/misc/utils";
+
+@Injectable()
+export class ModalService extends BaseModalService {
+  el: any = null;
+  modalOpen = false;
+
+  constructor(
+    componentFactoryResolver: ComponentFactoryResolver,
+    applicationRef: ApplicationRef,
+    injector: Injector,
+    private messagingService: MessagingService
+  ) {
+    super(componentFactoryResolver, applicationRef, injector);
+  }
+
+  protected setupHandlers(modalRef: ModalRef) {
+    modalRef.onCreated.pipe(first()).subscribe(() => {
+      const modals = Array.from(document.querySelectorAll(".modal"));
+      if (modals.length > 0) {
+        this.el = jq(modals[0]);
+        this.el.modal("show");
+
+        this.el.on("show.bs.modal", () => {
+          modalRef.show();
+          this.messagingService.send("modalShow");
+        });
+        this.el.on("shown.bs.modal", () => {
+          modalRef.shown();
+          this.messagingService.send("modalShown");
+          if (!Utils.isMobileBrowser) {
+            this.el.find("*[appAutoFocus]").focus();
+          }
+        });
+        this.el.on("hide.bs.modal", () => {
+          this.messagingService.send("modalClose");
+        });
+        this.el.on("hidden.bs.modal", () => {
+          modalRef.closed();
+          this.messagingService.send("modalClosed");
+        });
+      }
+    });
+
+    modalRef.onClose.pipe(first()).subscribe(() => {
+      if (this.el != null) {
+        this.el.modal("hide");
+      }
+    });
+  }
+}

apps/web/src/app/core/password-reprompt.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from "@angular/core";
+
+import { PasswordRepromptService as BasePasswordRepromptService } from "@bitwarden/angular/services/passwordReprompt.service";
+
+import { PasswordRepromptComponent } from "../components/password-reprompt.component";
+
+@Injectable()
+export class PasswordRepromptService extends BasePasswordRepromptService {
+  component = PasswordRepromptComponent;
+}

apps/web/src/app/core/policy-list.service.ts

@@ -0,0 +1,13 @@
+import { BasePolicy } from "../organizations/policies/base-policy.component";
+
+export class PolicyListService {
+  private policies: BasePolicy[] = [];
+
+  addPolicies(policies: BasePolicy[]) {
+    this.policies.push(...policies);
+  }
+
+  getPolicies(): BasePolicy[] {
+    return this.policies;
+  }
+}

apps/web/src/app/core/router.service.ts

@@ -0,0 +1,56 @@
+import { Injectable } from "@angular/core";
+import { Title } from "@angular/platform-browser";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
+import { filter } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+@Injectable()
+export class RouterService {
+  private previousUrl: string = undefined;
+  private currentUrl: string = undefined;
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private titleService: Title,
+    i18nService: I18nService
+  ) {
+    this.currentUrl = this.router.url;
+
+    router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => {
+        this.currentUrl = event.url;
+
+        let title = i18nService.t("pageTitle", "Bitwarden");
+        let child = this.activatedRoute.firstChild;
+        while (child.firstChild) {
+          child = child.firstChild;
+        }
+
+        const titleId: string = child?.snapshot?.data?.titleId;
+        const rawTitle: string = child?.snapshot?.data?.title;
+        const updateUrl = !child?.snapshot?.data?.doNotSaveUrl ?? true;
+
+        if (titleId != null || rawTitle != null) {
+          const newTitle = rawTitle != null ? rawTitle : i18nService.t(titleId);
+          if (newTitle != null && newTitle !== "") {
+            title = newTitle + " | " + title;
+          }
+        }
+        this.titleService.setTitle(title);
+        if (updateUrl) {
+          this.setPreviousUrl(this.currentUrl);
+        }
+      });
+  }
+
+  getPreviousUrl() {
+    return this.previousUrl;
+  }
+
+  setPreviousUrl(url: string) {
+    this.previousUrl = url;
+  }
+}

apps/web/src/app/core/state-migration.service.ts

@@ -0,0 +1,13 @@
+import { StateMigrationService as BaseStateMigrationService } from "@bitwarden/common/services/stateMigration.service";
+
+import { Account } from "./state/account";
+import { GlobalState } from "./state/global-state";
+
+export class StateMigrationService extends BaseStateMigrationService<GlobalState, Account> {
+  protected async migrationStateFrom1To2(): Promise<void> {
+    await super.migrateStateFrom1To2();
+    const globals = (await this.get<GlobalState>("global")) ?? this.stateFactory.createGlobal(null);
+    globals.rememberEmail = (await this.get<boolean>("rememberEmail")) ?? globals.rememberEmail;
+    await this.set("global", globals);
+  }
+}

apps/web/src/app/core/state/account.ts

@@ -0,0 +1,20 @@
+import {
+  Account as BaseAccount,
+  AccountSettings as BaseAccountSettings,
+} from "@bitwarden/common/models/domain/account";
+
+export class AccountSettings extends BaseAccountSettings {
+  vaultTimeout: number = process.env.NODE_ENV === "development" ? null : 15;
+}
+
+export class Account extends BaseAccount {
+  settings?: AccountSettings = new AccountSettings();
+
+  constructor(init: Partial<Account>) {
+    super(init);
+    Object.assign(this.settings, {
+      ...new AccountSettings(),
+      ...this.settings,
+    });
+  }
+}

apps/web/src/app/core/state/global-state.ts

@@ -0,0 +1,7 @@
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+import { GlobalState as BaseGlobalState } from "@bitwarden/common/models/domain/globalState";
+
+export class GlobalState extends BaseGlobalState {
+  theme?: ThemeType = ThemeType.Light;
+  rememberEmail = true;
+}

apps/web/src/app/core/state/index.ts

@@ -0,0 +1,3 @@
+export * from "./account";
+export * from "./global-state";
+export * from "./state.service";

apps/web/src/app/core/state/state.service.ts

@@ -0,0 +1,131 @@
+import { Inject, Injectable } from "@angular/core";
+
+import {
+  MEMORY_STORAGE,
+  SECURE_STORAGE,
+  STATE_FACTORY,
+  STATE_SERVICE_USE_CACHE,
+} from "@bitwarden/angular/services/jslib-services.module";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { StateMigrationService } from "@bitwarden/common/abstractions/stateMigration.service";
+import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.service";
+import { StateFactory } from "@bitwarden/common/factories/stateFactory";
+import { CipherData } from "@bitwarden/common/models/data/cipherData";
+import { CollectionData } from "@bitwarden/common/models/data/collectionData";
+import { FolderData } from "@bitwarden/common/models/data/folderData";
+import { SendData } from "@bitwarden/common/models/data/sendData";
+import { StorageOptions } from "@bitwarden/common/models/domain/storageOptions";
+import { StateService as BaseStateService } from "@bitwarden/common/services/state.service";
+
+import { Account } from "./account";
+import { GlobalState } from "./global-state";
+
+@Injectable()
+export class StateService extends BaseStateService<GlobalState, Account> {
+  constructor(
+    storageService: AbstractStorageService,
+    @Inject(SECURE_STORAGE) secureStorageService: AbstractStorageService,
+    @Inject(MEMORY_STORAGE) memoryStorageService: AbstractStorageService,
+    logService: LogService,
+    stateMigrationService: StateMigrationService,
+    @Inject(STATE_FACTORY) stateFactory: StateFactory<GlobalState, Account>,
+    @Inject(STATE_SERVICE_USE_CACHE) useAccountCache = true
+  ) {
+    super(
+      storageService,
+      secureStorageService,
+      memoryStorageService,
+      logService,
+      stateMigrationService,
+      stateFactory,
+      useAccountCache
+    );
+  }
+
+  async addAccount(account: Account) {
+    // Apply web overrides to default account values
+    account = new Account(account);
+    await super.addAccount(account);
+  }
+
+  async getRememberEmail(options?: StorageOptions) {
+    return (
+      await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskLocalOptions()))
+    )?.rememberEmail;
+  }
+
+  async setRememberEmail(value: boolean, options?: StorageOptions): Promise<void> {
+    const globals = await this.getGlobals(
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+    globals.rememberEmail = value;
+    await this.saveGlobals(
+      globals,
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+  }
+
+  async getEncryptedCiphers(options?: StorageOptions): Promise<{ [id: string]: CipherData }> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.getEncryptedCiphers(options);
+  }
+
+  async setEncryptedCiphers(
+    value: { [id: string]: CipherData },
+    options?: StorageOptions
+  ): Promise<void> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.setEncryptedCiphers(value, options);
+  }
+
+  async getEncryptedCollections(
+    options?: StorageOptions
+  ): Promise<{ [id: string]: CollectionData }> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.getEncryptedCollections(options);
+  }
+
+  async setEncryptedCollections(
+    value: { [id: string]: CollectionData },
+    options?: StorageOptions
+  ): Promise<void> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.setEncryptedCollections(value, options);
+  }
+
+  async getEncryptedFolders(options?: StorageOptions): Promise<{ [id: string]: FolderData }> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.getEncryptedFolders(options);
+  }
+
+  async setEncryptedFolders(
+    value: { [id: string]: FolderData },
+    options?: StorageOptions
+  ): Promise<void> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.setEncryptedFolders(value, options);
+  }
+
+  async getEncryptedSends(options?: StorageOptions): Promise<{ [id: string]: SendData }> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.getEncryptedSends(options);
+  }
+
+  async setEncryptedSends(
+    value: { [id: string]: SendData },
+    options?: StorageOptions
+  ): Promise<void> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.setEncryptedSends(value, options);
+  }
+
+  override async getLastSync(options?: StorageOptions): Promise<string> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.getLastSync(options);
+  }
+
+  override async setLastSync(value: string, options?: StorageOptions): Promise<void> {
+    options = this.reconcileOptions(options, await this.defaultInMemoryOptions());
+    return await super.setLastSync(value, options);
+  }
+}

apps/web/src/app/core/web-file-download.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from "@angular/core";
+
+import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
+import { FileDownloadBuilder } from "@bitwarden/common/abstractions/fileDownload/fileDownloadBuilder";
+import { FileDownloadRequest } from "@bitwarden/common/abstractions/fileDownload/fileDownloadRequest";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+
+@Injectable()
+export class WebFileDownloadService implements FileDownloadService {
+  constructor(private platformUtilsService: PlatformUtilsService) {}
+
+  download(request: FileDownloadRequest): void {
+    const builder = new FileDownloadBuilder(request);
+    const a = window.document.createElement("a");
+    if (builder.downloadMethod === "save") {
+      a.download = request.fileName;
+    } else if (!this.platformUtilsService.isSafari()) {
+      a.target = "_blank";
+    }
+    a.href = URL.createObjectURL(builder.blob);
+    a.style.position = "fixed";
+    window.document.body.appendChild(a);
+    a.click();
+    window.document.body.removeChild(a);
+  }
+}

apps/web/src/app/core/web-platform-utils.service.ts

@@ -0,0 +1,254 @@
+import { Injectable } from "@angular/core";
+import Swal, { SweetAlertIcon } from "sweetalert2";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { ClientType } from "@bitwarden/common/enums/clientType";
+import { DeviceType } from "@bitwarden/common/enums/deviceType";
+
+@Injectable()
+export class WebPlatformUtilsService implements PlatformUtilsService {
+  private browserCache: DeviceType = null;
+
+  constructor(
+    private i18nService: I18nService,
+    private messagingService: MessagingService,
+    private logService: LogService
+  ) {}
+
+  getDevice(): DeviceType {
+    if (this.browserCache != null) {
+      return this.browserCache;
+    }
+
+    if (
+      navigator.userAgent.indexOf(" Firefox/") !== -1 ||
+      navigator.userAgent.indexOf(" Gecko/") !== -1
+    ) {
+      this.browserCache = DeviceType.FirefoxBrowser;
+    } else if (navigator.userAgent.indexOf(" OPR/") >= 0) {
+      this.browserCache = DeviceType.OperaBrowser;
+    } else if (navigator.userAgent.indexOf(" Edg/") !== -1) {
+      this.browserCache = DeviceType.EdgeBrowser;
+    } else if (navigator.userAgent.indexOf(" Vivaldi/") !== -1) {
+      this.browserCache = DeviceType.VivaldiBrowser;
+    } else if (
+      navigator.userAgent.indexOf(" Safari/") !== -1 &&
+      navigator.userAgent.indexOf("Chrome") === -1
+    ) {
+      this.browserCache = DeviceType.SafariBrowser;
+    } else if ((window as any).chrome && navigator.userAgent.indexOf(" Chrome/") !== -1) {
+      this.browserCache = DeviceType.ChromeBrowser;
+    } else if (navigator.userAgent.indexOf(" Trident/") !== -1) {
+      this.browserCache = DeviceType.IEBrowser;
+    } else {
+      this.browserCache = DeviceType.UnknownBrowser;
+    }
+
+    return this.browserCache;
+  }
+
+  getDeviceString(): string {
+    const device = DeviceType[this.getDevice()].toLowerCase();
+    return device.replace("browser", "");
+  }
+
+  getClientType() {
+    return ClientType.Web;
+  }
+
+  isFirefox(): boolean {
+    return this.getDevice() === DeviceType.FirefoxBrowser;
+  }
+
+  isChrome(): boolean {
+    return this.getDevice() === DeviceType.ChromeBrowser;
+  }
+
+  isEdge(): boolean {
+    return this.getDevice() === DeviceType.EdgeBrowser;
+  }
+
+  isOpera(): boolean {
+    return this.getDevice() === DeviceType.OperaBrowser;
+  }
+
+  isVivaldi(): boolean {
+    return this.getDevice() === DeviceType.VivaldiBrowser;
+  }
+
+  isSafari(): boolean {
+    return this.getDevice() === DeviceType.SafariBrowser;
+  }
+
+  isMacAppStore(): boolean {
+    return false;
+  }
+
+  isViewOpen(): Promise<boolean> {
+    return Promise.resolve(false);
+  }
+
+  launchUri(uri: string, options?: any): void {
+    const a = document.createElement("a");
+    a.href = uri;
+    if (options == null || !options.sameWindow) {
+      a.target = "_blank";
+      a.rel = "noreferrer noopener";
+    }
+    a.classList.add("d-none");
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  getApplicationVersion(): Promise<string> {
+    return Promise.resolve(process.env.APPLICATION_VERSION || "-");
+  }
+
+  supportsWebAuthn(win: Window): boolean {
+    return typeof PublicKeyCredential !== "undefined";
+  }
+
+  supportsDuo(): boolean {
+    return true;
+  }
+
+  showToast(
+    type: "error" | "success" | "warning" | "info",
+    title: string,
+    text: string | string[],
+    options?: any
+  ): void {
+    this.messagingService.send("showToast", {
+      text: text,
+      title: title,
+      type: type,
+      options: options,
+    });
+  }
+
+  async showDialog(
+    body: string,
+    title?: string,
+    confirmText?: string,
+    cancelText?: string,
+    type?: string,
+    bodyIsHtml = false
+  ) {
+    let iconClasses: string = null;
+    if (type != null) {
+      // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
+      switch (type) {
+        case "success":
+          iconClasses = "bwi-check text-success";
+          break;
+        case "warning":
+          iconClasses = "bwi-exclamation-triangle text-warning";
+          break;
+        case "error":
+          iconClasses = "bwi-error text-danger";
+          break;
+        case "info":
+          iconClasses = "bwi-info-circle text-info";
+          break;
+        default:
+          break;
+      }
+    }
+
+    const bootstrapModal = document.querySelector("div.modal");
+    if (bootstrapModal != null) {
+      bootstrapModal.removeAttribute("tabindex");
+    }
+
+    const iconHtmlStr =
+      iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined;
+    const confirmed = await Swal.fire({
+      heightAuto: false,
+      buttonsStyling: false,
+      icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
+      iconHtml: iconHtmlStr,
+      text: bodyIsHtml ? null : body,
+      html: bodyIsHtml ? body : null,
+      titleText: title,
+      showCancelButton: cancelText != null,
+      cancelButtonText: cancelText,
+      showConfirmButton: true,
+      confirmButtonText: confirmText == null ? this.i18nService.t("ok") : confirmText,
+    });
+
+    if (bootstrapModal != null) {
+      bootstrapModal.setAttribute("tabindex", "-1");
+    }
+
+    return confirmed.value;
+  }
+
+  isDev(): boolean {
+    return process.env.NODE_ENV === "development";
+  }
+
+  isSelfHost(): boolean {
+    return process.env.ENV.toString() === "selfhosted";
+  }
+
+  copyToClipboard(text: string, options?: any): void | boolean {
+    let win = window;
+    let doc = window.document;
+    if (options && (options.window || options.win)) {
+      win = options.window || options.win;
+      doc = win.document;
+    } else if (options && options.doc) {
+      doc = options.doc;
+    }
+    if ((win as any).clipboardData && (win as any).clipboardData.setData) {
+      // IE specific code path to prevent textarea being shown while dialog is visible.
+      (win as any).clipboardData.setData("Text", text);
+    } else if (doc.queryCommandSupported && doc.queryCommandSupported("copy")) {
+      const textarea = doc.createElement("textarea");
+      textarea.textContent = text;
+      // Prevent scrolling to bottom of page in MS Edge.
+      textarea.style.position = "fixed";
+      let copyEl = doc.body;
+      // For some reason copy command won't work when modal is open if appending to body
+      if (doc.body.classList.contains("modal-open")) {
+        copyEl = doc.body.querySelector<HTMLElement>(".modal");
+      }
+      copyEl.appendChild(textarea);
+      textarea.select();
+      let success = false;
+      try {
+        // Security exception may be thrown by some browsers.
+        success = doc.execCommand("copy");
+        if (!success) {
+          this.logService.debug("Copy command unsupported or disabled.");
+        }
+      } catch (e) {
+        // eslint-disable-next-line
+        console.warn("Copy to clipboard failed.", e);
+      } finally {
+        copyEl.removeChild(textarea);
+      }
+      return success;
+    }
+  }
+
+  readFromClipboard(options?: any): Promise<string> {
+    throw new Error("Cannot read from clipboard on web.");
+  }
+
+  supportsBiometric() {
+    return Promise.resolve(false);
+  }
+
+  authenticateBiometric() {
+    return Promise.resolve(false);
+  }
+
+  supportsSecureStorage() {
+    return false;
+  }
+}

apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html

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

apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.ts

@@ -0,0 +1,66 @@
+import { Component } from "@angular/core";
+
+import { ModalConfig } from "@bitwarden/angular/services/modal.service";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { OrganizationUserBulkRequest } from "@bitwarden/common/models/request/organizationUserBulkRequest";
+
+import { BulkUserDetails } from "./bulk-status.component";
+
+@Component({
+  selector: "app-bulk-restore-revoke",
+  templateUrl: "bulk-restore-revoke.component.html",
+})
+export class BulkRestoreRevokeComponent {
+  isRevoking: boolean;
+  organizationId: string;
+  users: BulkUserDetails[];
+
+  statuses: Map<string, string> = new Map();
+
+  loading = false;
+  done = false;
+  error: string;
+
+  constructor(
+    protected apiService: ApiService,
+    protected i18nService: I18nService,
+    config: ModalConfig
+  ) {
+    this.isRevoking = config.data.isRevoking;
+    this.organizationId = config.data.organizationId;
+    this.users = config.data.users;
+  }
+
+  get bulkTitle() {
+    const titleKey = this.isRevoking ? "revokeUsers" : "restoreUsers";
+    return this.i18nService.t(titleKey);
+  }
+
+  async submit() {
+    this.loading = true;
+    try {
+      const response = await this.performBulkUserAction();
+
+      const bulkMessage = this.isRevoking ? "bulkRevokedMessage" : "bulkRestoredMessage";
+      response.data.forEach((entry) => {
+        const error = entry.error !== "" ? entry.error : this.i18nService.t(bulkMessage);
+        this.statuses.set(entry.id, error);
+      });
+      this.done = true;
+    } catch (e) {
+      this.error = e.message;
+    }
+
+    this.loading = false;
+  }
+
+  protected async performBulkUserAction() {
+    const request = new OrganizationUserBulkRequest(this.users.map((user) => user.id));
+    if (this.isRevoking) {
+      return await this.apiService.revokeManyOrganizationUsers(this.organizationId, request);
+    } else {
+      return await this.apiService.restoreManyOrganizationUsers(this.organizationId, request);
+    }
+  }
+}

apps/web/src/main.ts

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

apps/web/src/polyfills.ts

@@ -0,0 +1,15 @@
+import "core-js/stable";
+require("zone.js/dist/zone");
+
+if (process.env.NODE_ENV === "production") {
+  // Production
+} else {
+  // Development and test
+  Error["stackTraceLimit"] = Infinity;
+  require("zone.js/dist/long-stack-trace-zone");
+}
+
+// Other polyfills
+require("whatwg-fetch");
+require("webcrypto-shim");
+require("date-input-polyfill");