Cleanup src folder for web and move ts code into src/app per angular convention (#3127)

apps/web/src/app/accounts/login.component.ts

@@ -19,8 +19,8 @@ import { Policy } from "@bitwarden/common/models/domain/policy";
 import { ListResponse } from "@bitwarden/common/models/response/listResponse";
 import { PolicyResponse } from "@bitwarden/common/models/response/policyResponse";
 
-import { StateService } from "../../abstractions/state.service";
 import { RouterService } from "../services/router.service";
+import { StateService } from "../services/state.service";
 
 @Component({
   selector: "app-login",

apps/web/src/app/main.ts

@@ -1,17 +0,0 @@
-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.module";
-
-if (process.env.NODE_ENV === "production") {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true });

apps/web/src/app/models/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/models/globalState.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/polyfills.ts

@@ -1,15 +0,0 @@
-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");

apps/web/src/app/services/broadcasterMessaging.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/services/htmlStorage.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/services/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/services/init.service.ts

@@ -17,7 +17,7 @@ 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 as I18nService } from "../../services/i18n.service";
+import { I18nService } from "./i18n.service";
 
 @Injectable()
 export class InitService {

apps/web/src/app/services/passwordReprompt.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/services/services.module.ts

@@ -13,7 +13,6 @@ import {
 import { ModalService as ModalServiceAbstraction } from "@bitwarden/angular/services/modal.service";
 import { FileDownloadService } from "@bitwarden/common/abstractions/fileDownload/fileDownload.service";
 import { I18nService as I18nServiceAbstraction } from "@bitwarden/common/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/abstractions/log.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";
@@ -23,26 +22,25 @@ import { AbstractStorageService } from "@bitwarden/common/abstractions/storage.s
 import { StateFactory } from "@bitwarden/common/factories/stateFactory";
 import { MemoryStorageService } from "@bitwarden/common/services/memoryStorage.service";
 
-import { StateService as StateServiceAbstraction } from "../../abstractions/state.service";
-import { Account } from "../../models/account";
-import { GlobalState } from "../../models/globalState";
-import { BroadcasterMessagingService } from "../../services/broadcasterMessaging.service";
-import { HtmlStorageService } from "../../services/htmlStorage.service";
-import { I18nService } from "../../services/i18n.service";
-import { PasswordRepromptService } from "../../services/passwordReprompt.service";
-import { StateService } from "../../services/state.service";
-import { StateMigrationService } from "../../services/stateMigration.service";
-import { WebPlatformUtilsService } from "../../services/webPlatformUtils.service";
 import { HomeGuard } from "../guards/home.guard";
+import { Account } from "../models/account";
+import { GlobalState } from "../models/globalState";
 import { PermissionsGuard as OrgPermissionsGuard } from "../organizations/guards/permissions.guard";
 import { NavigationPermissionsService as OrgPermissionsService } from "../organizations/services/navigation-permissions.service";
 
+import { BroadcasterMessagingService } from "./broadcasterMessaging.service";
 import { EventService } from "./event.service";
+import { HtmlStorageService } from "./htmlStorage.service";
+import { I18nService } from "./i18n.service";
 import { InitService } from "./init.service";
 import { ModalService } from "./modal.service";
+import { PasswordRepromptService } from "./passwordReprompt.service";
 import { PolicyListService } from "./policy-list.service";
 import { RouterService } from "./router.service";
+import { StateService } from "./state.service";
+import { StateMigrationService } from "./stateMigration.service";
 import { WebFileDownloadService } from "./webFileDownload.service";
+import { WebPlatformUtilsService } from "./webPlatformUtils.service";
 
 @NgModule({
   imports: [ToastrModule, JslibServicesModule],
@@ -95,22 +93,10 @@ import { WebFileDownloadService } from "./webFileDownload.service";
       useClass: StateMigrationService,
       deps: [AbstractStorageService, SECURE_STORAGE, STATE_FACTORY],
     },
-    {
-      provide: StateServiceAbstraction,
-      useClass: StateService,
-      deps: [
-        AbstractStorageService,
-        SECURE_STORAGE,
-        MEMORY_STORAGE,
-        LogService,
-        StateMigrationServiceAbstraction,
-        STATE_FACTORY,
-        STATE_SERVICE_USE_CACHE,
-      ],
-    },
+    StateService,
     {
       provide: BaseStateServiceAbstraction,
-      useExisting: StateServiceAbstraction,
+      useExisting: StateService,
     },
     {
       provide: PasswordRepromptServiceAbstraction,

apps/web/src/app/services/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 "../models/account";
+import { GlobalState } from "../models/globalState";
+
+@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 overides 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/services/stateMigration.service.ts

@@ -0,0 +1,13 @@
+import { StateMigrationService as BaseStateMigrationService } from "@bitwarden/common/services/stateMigration.service";
+
+import { Account } from "../models/account";
+import { GlobalState } from "../models/globalState";
+
+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/services/webPlatformUtils.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/settings/settings.component.ts

@@ -6,7 +6,7 @@ import { OrganizationService } from "@bitwarden/common/abstractions/organization
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { TokenService } from "@bitwarden/common/abstractions/token.service";
 
-import { StateService } from "../../abstractions/state.service";
+import { StateService } from "../services/state.service";
 
 const BroadcasterSubscriptionId = "SettingsComponent";