Move web to apps/web and bitwarden_license/bit-web

apps/web/src/app/tools/export.component.html

@@ -0,0 +1,42 @@
+<form
+  #form
+  (ngSubmit)="submit()"
+  ngNativeValidate
+  [appApiAction]="formPromise"
+  [formGroup]="exportForm"
+>
+  <div class="page-header">
+    <h1>{{ "exportVault" | i18n }}</h1>
+  </div>
+
+  <app-callout type="error" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
+    {{ "personalVaultExportPolicyInEffect" | i18n }}
+  </app-callout>
+  <app-export-scope-callout
+    [organizationId]="organizationId"
+    *ngIf="!disabledByPolicy"
+  ></app-export-scope-callout>
+
+  <div class="row">
+    <div class="form-group col-6">
+      <label for="format">{{ "fileFormat" | i18n }}</label>
+      <select class="form-control" id="format" name="Format" formControlName="format">
+        <option *ngFor="let f of formatOptions" [value]="f.value">{{ f.name }}</option>
+      </select>
+    </div>
+  </div>
+  <div class="row">
+    <div class="form-group col-6">
+      <app-user-verification ngDefaultControl formControlName="secret" name="secret">
+      </app-user-verification>
+    </div>
+  </div>
+  <button
+    type="submit"
+    class="btn btn-primary btn-submit"
+    [disabled]="form.loading || exportForm.disabled"
+  >
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <span>{{ "exportVault" | i18n }}</span>
+  </button>
+</form>

apps/web/src/app/tools/export.component.ts

@@ -0,0 +1,50 @@
+import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+
+import { ExportComponent as BaseExportComponent } from "jslib-angular/components/export.component";
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
+import { EventService } from "jslib-common/abstractions/event.service";
+import { ExportService } from "jslib-common/abstractions/export.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+
+@Component({
+  selector: "app-export",
+  templateUrl: "export.component.html",
+})
+export class ExportComponent extends BaseExportComponent {
+  organizationId: string;
+
+  constructor(
+    cryptoService: CryptoService,
+    i18nService: I18nService,
+    platformUtilsService: PlatformUtilsService,
+    exportService: ExportService,
+    eventService: EventService,
+    policyService: PolicyService,
+    logService: LogService,
+    userVerificationService: UserVerificationService,
+    formBuilder: FormBuilder
+  ) {
+    super(
+      cryptoService,
+      i18nService,
+      platformUtilsService,
+      exportService,
+      eventService,
+      policyService,
+      window,
+      logService,
+      userVerificationService,
+      formBuilder
+    );
+  }
+
+  protected saved() {
+    super.saved();
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("exportSuccess"));
+  }
+}

apps/web/src/app/tools/generator.component.html

@@ -0,0 +1,400 @@
+<div class="page-header">
+  <h1>{{ "generator" | i18n }}</h1>
+</div>
+<app-callout type="info" *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'">
+  {{ "passwordGeneratorPolicyInEffect" | i18n }}
+</app-callout>
+<div class="card card-generated bg-light my-4">
+  <div class="card-body">
+    <div
+      *ngIf="type === 'password'"
+      class="generated-wrapper"
+      [innerHTML]="password | colorPassword"
+      appSelectCopy
+    ></div>
+    <div
+      *ngIf="type === 'username'"
+      class="generated-wrapper"
+      [innerHTML]="username | colorPassword"
+      appSelectCopy
+    ></div>
+  </div>
+</div>
+<div class="form-group" role="radiogroup" aria-labelledby="typeHeading">
+  <label id="typeHeading" class="d-block">{{ "whatWouldYouLikeToGenerate" | i18n }}</label>
+  <div class="form-check form-check-inline" *ngFor="let o of typeOptions">
+    <input
+      class="form-check-input"
+      type="radio"
+      [(ngModel)]="type"
+      name="Type"
+      id="type_{{ o.value }}"
+      [value]="o.value"
+      (change)="typeChanged()"
+      [checked]="type === o.value"
+    />
+    <label class="form-check-label" for="type_{{ o.value }}">
+      {{ o.name }}
+    </label>
+  </div>
+</div>
+<ng-container *ngIf="type === 'password'">
+  <div aria-labelledby="passwordTypeHeading" class="form-group" role="radiogroup">
+    <label id="passwordTypeHeading" class="d-block">{{ "passwordType" | i18n }}</label>
+    <div class="form-check form-check-inline" *ngFor="let o of passTypeOptions">
+      <input
+        class="form-check-input"
+        type="radio"
+        [(ngModel)]="passwordOptions.type"
+        name="PasswordType"
+        id="passwordType_{{ o.value }}"
+        [value]="o.value"
+        (change)="savePasswordOptions()"
+        [checked]="passwordOptions.type === o.value"
+      />
+      <label class="form-check-label" for="passwordType_{{ o.value }}">
+        {{ o.name }}
+      </label>
+    </div>
+  </div>
+  <ng-container *ngIf="passwordOptions.type === 'passphrase'">
+    <div class="row">
+      <div class="form-group col-4">
+        <label for="num-words">{{ "numWords" | i18n }}</label>
+        <input
+          id="num-words"
+          class="form-control"
+          type="number"
+          min="3"
+          max="20"
+          [(ngModel)]="passwordOptions.numWords"
+          (blur)="savePasswordOptions()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="word-separator">{{ "wordSeparator" | i18n }}</label>
+        <input
+          id="word-separator"
+          class="form-control"
+          type="text"
+          maxlength="1"
+          [(ngModel)]="passwordOptions.wordSeparator"
+          (blur)="savePasswordOptions()"
+        />
+      </div>
+    </div>
+    <label class="d-block">{{ "options" | i18n }}</label>
+    <div class="form-group">
+      <div class="form-check">
+        <input
+          id="capitalize"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.capitalize"
+          [disabled]="enforcedPasswordPolicyOptions?.capitalize"
+        />
+        <label for="capitalize" class="form-check-label">{{ "capitalize" | i18n }}</label>
+      </div>
+      <div class="form-check">
+        <input
+          id="include-number"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.includeNumber"
+          [disabled]="enforcedPasswordPolicyOptions?.includeNumber"
+        />
+        <label for="include-number" class="form-check-label">{{ "includeNumber" | i18n }}</label>
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="passwordOptions.type === 'password'">
+    <div class="row">
+      <div class="form-group col-4">
+        <label for="length">{{ "length" | i18n }}</label>
+        <input
+          id="length"
+          class="form-control"
+          type="number"
+          min="5"
+          max="128"
+          [(ngModel)]="passwordOptions.length"
+          (blur)="savePasswordOptions()"
+          (change)="lengthChanged()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="min-number">{{ "minNumbers" | i18n }}</label>
+        <input
+          id="min-number"
+          class="form-control"
+          type="number"
+          min="0"
+          max="9"
+          (blur)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.minNumber"
+          (change)="minNumberChanged()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="min-special">{{ "minSpecial" | i18n }}</label>
+        <input
+          id="min-special"
+          class="form-control"
+          type="number"
+          min="0"
+          max="9"
+          (blur)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.minSpecial"
+          (change)="minSpecialChanged()"
+        />
+      </div>
+    </div>
+    <label class="d-block">{{ "options" | i18n }}</label>
+    <div class="form-group">
+      <div class="form-check">
+        <input
+          id="uppercase"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.uppercase"
+          [disabled]="enforcedPasswordPolicyOptions?.useUppercase"
+          attr.aria-label="{{ 'uppercase' | i18n }}"
+        />
+        <label for="uppercase" class="form-check-label">A-Z</label>
+      </div>
+      <div class="form-check">
+        <input
+          id="lowercase"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.lowercase"
+          [disabled]="enforcedPasswordPolicyOptions?.useLowercase"
+          attr.aria-label="{{ 'lowercase' | i18n }}"
+        />
+        <label for="lowercase" class="form-check-label">a-z</label>
+      </div>
+      <div class="form-check">
+        <input
+          id="numbers"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.number"
+          [disabled]="enforcedPasswordPolicyOptions?.useNumbers"
+          attr.aria-label="{{ 'numbers' | i18n }}"
+        />
+        <label for="numbers" class="form-check-label">0-9</label>
+      </div>
+      <div class="form-check">
+        <input
+          id="special"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="passwordOptions.special"
+          [disabled]="enforcedPasswordPolicyOptions?.useSpecial"
+          attr.aria-label="{{ 'specialCharacters' | i18n }}"
+        />
+        <label for="special" class="form-check-label">!@#$%^&amp;*</label>
+      </div>
+      <div class="form-check">
+        <input
+          id="ambiguous"
+          class="form-check-input"
+          type="checkbox"
+          (change)="savePasswordOptions()"
+          [(ngModel)]="avoidAmbiguous"
+        />
+        <label for="ambiguous" class="form-check-label">{{ "ambiguous" | i18n }}</label>
+      </div>
+    </div>
+  </ng-container>
+  <div class="d-flex">
+    <div>
+      <button type="button" class="btn btn-primary" (click)="regenerate()">
+        {{ "regeneratePassword" | i18n }}
+      </button>
+      <button type="button" class="btn btn-outline-secondary" (click)="copy()">
+        {{ "copyPassword" | i18n }}
+      </button>
+    </div>
+    <div class="ml-auto">
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        (click)="history()"
+        appA11yTitle="{{ 'passwordHistory' | i18n }}"
+      >
+        <i class="bwi bwi-clock bwi-lg" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</ng-container>
+<ng-container *ngIf="type === 'username'">
+  <div aria-labelledby="usernameTypeHeading" class="form-group" role="radiogroup">
+    <div class="d-block">
+      <label id="usernameTypeHeading">{{ "usernameType" | i18n }}</label>
+      <a
+        class="ml-auto"
+        href="https://bitwarden.com/help/generator/#username-types"
+        target="_blank"
+        rel="noopener"
+        appA11yTitle="{{ 'learnMore' | i18n }}"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      </a>
+    </div>
+    <div class="form-check" *ngFor="let o of usernameTypeOptions">
+      <input
+        class="form-check-input"
+        type="radio"
+        [(ngModel)]="usernameOptions.type"
+        name="UsernameType"
+        id="usernameType_{{ o.value }}"
+        [value]="o.value"
+        (change)="saveUsernameOptions()"
+        [checked]="usernameOptions.type === o.value"
+      />
+      <label class="form-check-label" for="usernameType_{{ o.value }}">
+        {{ o.name }}
+        <div class="small text-muted">{{ o.desc }}</div>
+      </label>
+    </div>
+  </div>
+  <ng-container *ngIf="usernameOptions.type === 'forwarded'">
+    <div class="form-group">
+      <label class="d-block">{{ "service" | i18n }}</label>
+      <div class="form-check" *ngFor="let o of forwardOptions">
+        <input
+          class="form-check-input"
+          type="radio"
+          [(ngModel)]="usernameOptions.forwardedService"
+          name="ForwardType"
+          id="forwardtype_{{ o.value }}"
+          [value]="o.value"
+          (change)="saveUsernameOptions()"
+          [checked]="usernameOptions.forwardedService === o.value"
+        />
+        <label class="form-check-label" for="forwardtype_{{ o.value }}">
+          {{ o.name }}
+        </label>
+      </div>
+    </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'simplelogin'">
+      <div class="form-group col-4">
+        <label for="simplelogin-apikey">{{ "apiKey" | i18n }}</label>
+        <input
+          id="simplelogin-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedSimpleLoginApiKey"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'anonaddy'">
+      <div class="form-group col-4">
+        <label for="anonaddy-apikey">{{ "apiAccessToken" | i18n }}</label>
+        <input
+          id="anonaddy-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedAnonAddyApiToken"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+      <div class="form-group col-4">
+        <label for="anonaddy-domain">{{ "domainName" | i18n }}</label>
+        <input
+          id="anonaddy-domain"
+          class="form-control"
+          type="text"
+          [(ngModel)]="usernameOptions.forwardedAnonAddyDomain"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+    <div class="row" *ngIf="usernameOptions.forwardedService === 'firefoxrelay'">
+      <div class="form-group col-4">
+        <label for="firefox-apikey">{{ "apiAccessToken" | i18n }}</label>
+        <input
+          id="firefox-apikey"
+          class="form-control"
+          type="password"
+          [(ngModel)]="usernameOptions.forwardedFirefoxApiToken"
+          (blur)="saveUsernameOptions()"
+        />
+      </div>
+    </div>
+  </ng-container>
+  <div class="row" *ngIf="usernameOptions.type === 'subaddress'">
+    <div class="form-group col-4">
+      <label for="subaddress-email">{{ "emailAddress" | i18n }}</label>
+      <input
+        id="subaddress-email"
+        class="form-control"
+        type="text"
+        [(ngModel)]="usernameOptions.subaddressEmail"
+        (blur)="saveUsernameOptions()"
+      />
+    </div>
+  </div>
+  <div class="row" *ngIf="usernameOptions.type === 'catchall'">
+    <div class="form-group col-4">
+      <label for="catchall-domain">{{ "domainName" | i18n }}</label>
+      <input
+        id="catchall-domain"
+        class="form-control"
+        type="text"
+        [(ngModel)]="usernameOptions.catchallDomain"
+        (blur)="saveUsernameOptions()"
+      />
+    </div>
+  </div>
+  <ng-container *ngIf="usernameOptions.type === 'word'">
+    <label class="d-block">{{ "options" | i18n }}</label>
+    <div class="row">
+      <div class="form-group">
+        <div class="form-check">
+          <input
+            id="capitalizeUsername"
+            type="checkbox"
+            (change)="saveUsernameOptions()"
+            [(ngModel)]="usernameOptions.wordCapitalize"
+          />
+          <label for="capitalizeUsername" class="form-check-label">{{ "capitalize" | i18n }}</label>
+        </div>
+        <div class="form-check">
+          <input
+            id="includeNumberUsername"
+            type="checkbox"
+            (change)="saveUsernameOptions()"
+            [(ngModel)]="usernameOptions.wordIncludeNumber"
+          />
+          <label for="includeNumberUsername" class="form-check-label">{{
+            "includeNumber" | i18n
+          }}</label>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <div #form [appApiAction]="usernameGeneratingPromise">
+    <button
+      type="button"
+      class="btn btn-submit btn-primary"
+      (click)="regenerate()"
+      [disabled]="form.loading"
+    >
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <span>{{ "regenerateUsername" | i18n }}</span>
+    </button>
+    <button type="button" class="btn btn-outline-secondary" (click)="copy()">
+      {{ "copyUsername" | i18n }}
+    </button>
+  </div>
+</ng-container>
+<ng-template #historyTemplate></ng-template>

apps/web/src/app/tools/generator.component.ts

@@ -0,0 +1,67 @@
+import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { GeneratorComponent as BaseGeneratorComponent } from "jslib-angular/components/generator.component";
+import { ModalService } from "jslib-angular/services/modal.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+import { UsernameGenerationService } from "jslib-common/abstractions/usernameGeneration.service";
+
+import { PasswordGeneratorHistoryComponent } from "./password-generator-history.component";
+
+@Component({
+  selector: "app-generator",
+  templateUrl: "generator.component.html",
+})
+export class GeneratorComponent extends BaseGeneratorComponent {
+  @ViewChild("historyTemplate", { read: ViewContainerRef, static: true })
+  historyModalRef: ViewContainerRef;
+
+  constructor(
+    passwordGenerationService: PasswordGenerationService,
+    usernameGenerationService: UsernameGenerationService,
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    logService: LogService,
+    route: ActivatedRoute,
+    private modalService: ModalService
+  ) {
+    super(
+      passwordGenerationService,
+      usernameGenerationService,
+      platformUtilsService,
+      stateService,
+      i18nService,
+      logService,
+      route,
+      window
+    );
+    if (platformUtilsService.isSelfHost()) {
+      // Cannot use Firefox Relay on self hosted web vaults due to CORS issues with Firefox Relay API
+      this.forwardOptions.splice(
+        this.forwardOptions.findIndex((o) => o.value === "firefoxrelay"),
+        1
+      );
+    }
+  }
+
+  async history() {
+    await this.modalService.openViewRef(PasswordGeneratorHistoryComponent, this.historyModalRef);
+  }
+
+  lengthChanged() {
+    document.getElementById("length").focus();
+  }
+
+  minNumberChanged() {
+    document.getElementById("min-number").focus();
+  }
+
+  minSpecialChanged() {
+    document.getElementById("min-special").focus();
+  }
+}

apps/web/src/app/tools/import.component.html

@@ -0,0 +1,323 @@
+<div class="page-header">
+  <h1>{{ "importData" | i18n }}</h1>
+</div>
+<app-callout type="info" *ngIf="importBlockedByPolicy">
+  {{ "personalOwnershipPolicyInEffectImports" | i18n }}
+</app-callout>
+<form #form (ngSubmit)="submit()" ngNativeValidate>
+  <div class="row">
+    <div class="col-6">
+      <div class="form-group">
+        <label for="type">1. {{ "selectFormat" | i18n }}</label>
+        <select
+          id="type"
+          name="Format"
+          [(ngModel)]="format"
+          class="form-control"
+          [disabled]="importBlockedByPolicy"
+          required
+        >
+          <option *ngFor="let o of featuredImportOptions" [ngValue]="o.id">{{ o.name }}</option>
+          <ng-container *ngIf="importOptions && importOptions.length">
+            <option value="-" disabled></option>
+            <option *ngFor="let o of importOptions" [ngValue]="o.id">{{ o.name }}</option>
+          </ng-container>
+        </select>
+      </div>
+    </div>
+  </div>
+  <app-callout type="info" title="{{ getFormatInstructionTitle() }}" *ngIf="format">
+    <ng-container *ngIf="format === 'bitwardencsv' || format === 'bitwardenjson'">
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/export-your-data/">
+        https://bitwarden.com/help/export-your-data/</a
+      >
+    </ng-container>
+    <ng-container *ngIf="format === 'lastpasscsv'">
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/import-from-lastpass/">
+        https://bitwarden.com/help/import-from-lastpass/</a
+      >
+    </ng-container>
+    <ng-container *ngIf="format === 'keepassxcsv'">
+      Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and
+      save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'aviracsv'">
+      In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the
+      CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'blurcsv'">
+      In the Blur web vault, click your username at the top and go to "Settings" &rarr; "Export
+      Data", then click "Export CSV" for your "Accounts".
+    </ng-container>
+    <ng-container *ngIf="format === 'safeincloudxml'">
+      Using the SaveInCloud desktop application, navigate to "File" &rarr; "Export" &rarr; "As XML"
+      and save the XML file.
+    </ng-container>
+    <ng-container *ngIf="format === 'padlockcsv'">
+      Using the Padlock desktop application, click the hamburger icon in the top left corner and
+      navigate to "Settings" &rarr; "Export" button and save the file "As CSV".
+    </ng-container>
+    <ng-container *ngIf="format === 'keepass2xml'">
+      Using the KeePass 2 desktop application, navigate to "File" &rarr; "Export" and select the
+      "KeePass XML (2.x)" option.
+    </ng-container>
+    <ng-container *ngIf="format === 'upmcsv'">
+      Using the Universal Password Manager desktop application, navigate to "Database" &rarr;
+      "Export" and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'saferpasscsv'">
+      Using the SaferPass browser extension, click the hamburger icon in the top left corner and
+      navigate to "Settings". Click the "Export accounts" button to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'meldiumcsv'">
+      Using the Meldium web vault, navigate to "Settings". Locate the "Export data" function and
+      click "Show me my data" to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'keepercsv'">
+      Log into the Keeper web vault (keepersecurity.com/vault). Click on your "account email" (top
+      right) and select "Settings". Go to "Export" and find the "Export to .csv File" option. Click
+      "Export" to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'keeperjson'">
+      Log into the Keeper web vault (keepersecurity.com/vault). Click on your "account email" (top
+      right) and select "Settings". Go to "Export" and find the "Export to .json File" option. Click
+      "Export" to save the JSON file.
+    </ng-container>
+    <ng-container
+      *ngIf="format === 'chromecsv' || format === 'operacsv' || format === 'vivaldicsv'"
+    >
+      <span *ngIf="format !== 'chromecsv'">
+        The process is exactly the same as importing from Google Chrome.
+      </span>
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/import-from-chrome/">
+        https://bitwarden.com/help/import-from-chrome/</a
+      >
+    </ng-container>
+    <ng-container *ngIf="format === 'firefoxcsv'">
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/import-from-firefox/">
+        https://bitwarden.com/help/import-from-firefox/</a
+      >.
+    </ng-container>
+    <ng-container *ngIf="format === 'safaricsv'">
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/import-from-safari/">
+        https://bitwarden.com/help/import-from-safari/</a
+      >.
+    </ng-container>
+    <ng-container
+      *ngIf="
+        format === '1password1pux' ||
+        format === '1password1pif' ||
+        format === '1passwordwincsv' ||
+        format === '1passwordmaccsv'
+      "
+    >
+      See detailed instructions on our help site at
+      <a target="_blank" rel="noopener" href="https://bitwarden.com/help/import-from-1password/">
+        https://bitwarden.com/help/import-from-1password/</a
+      >.
+    </ng-container>
+    <ng-container *ngIf="format === 'passworddragonxml'">
+      Using the Password Dragon desktop application, navigate to "File" &rarr; "Export" &rarr; "To
+      XML". In the dialog that pops up select "All Rows" and check all fields. Click the "Export"
+      button and save the XML file.
+    </ng-container>
+    <ng-container *ngIf="format === 'enpasscsv'">
+      Using the Enpass desktop application, navigate to "File" &rarr; "Export" &rarr; "As CSV".
+      Select "OK" to the warning alert and save the CSV file. Note that the importer only supports
+      files exported while Enpass is set to the English language, so adjust your settings
+      accordingly.
+    </ng-container>
+    <ng-container *ngIf="format === 'enpassjson'">
+      Using the Enpass 6 desktop application, click the menu button and navigate to "File" &rarr;
+      "Export". Select the ".json" file format option and save the JSON file.
+    </ng-container>
+    <ng-container *ngIf="format === 'pwsafexml'">
+      Using the Password Safe desktop application, navigate to "File" &rarr; "Export To" &rarr; "XML
+      format..." and save the XML file.
+    </ng-container>
+    <ng-container *ngIf="format === 'dashlanecsv'">
+      Log in to Dashlane, click on "My Account" &rarr; "Settings" &rarr; "Export file" and select
+      "Export as a CSV file". This will download a zip archive containing various CSV files. Unzip
+      the archive and import each CSV file individually.
+    </ng-container>
+    <ng-container *ngIf="format === 'dashlanejson'">
+      Dashlane no longer supports the JSON format. Only use this if you have an existing JSON for
+      import. Use the CSV importer when creating new exports.
+    </ng-container>
+    <ng-container *ngIf="format === 'msecurecsv'">
+      Using the mSecure desktop application, navigate to "File" &rarr; "Export" &rarr; "CSV File..."
+      and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'stickypasswordxml'">
+      Using the Sticky Password desktop application, navigate to "Menu" (top right) &rarr; "Export"
+      &rarr; "Export all". Select the unencrypted format XML option and save the XML file.
+    </ng-container>
+    <ng-container *ngIf="format === 'truekeycsv'">
+      Using the True Key desktop application, click the gear icon (top right) and then navigate to
+      "App Settings". Click the "Export" button, enter your password and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'clipperzhtml'">
+      Log into the Clipperz web application (clipperz.is/app). Click the hamburger menu icon in the
+      top right to expand the navigation bar. Navigate to "Data" &rarr; "Export". Click the
+      "download HTML+JSON" button to save the HTML file.
+    </ng-container>
+    <ng-container *ngIf="format === 'roboformcsv'">
+      Using the RoboForm Editor desktop application, navigate to "RoboForm" (top left) &rarr;
+      "Options" &rarr; "Account &amp; Data" and click the "Export" button. Select all of your data,
+      change the "Format" to "CSV file" and then click the "Export" button to save the CSV file.
+      Note: RoboForm only allows you to export Logins. Other items will not be exported.
+    </ng-container>
+    <ng-container *ngIf="format === 'passboltcsv'">
+      Log into the Passbolt web vault and navigate to the "Passwords" listing. Select all of the
+      passwords you would like to export and click the "Export" button at the top of the listing.
+      Choose the "csv (lastpass)" export format and click the "Export" button.
+    </ng-container>
+    <ng-container *ngIf="format === 'ascendocsv'">
+      Using the Ascendo DataVault desktop application, navigate to "Tools" &rarr; "Export". In the
+      dialog that pops up, select the "All Items (DVX, CSV)" option. Click the "Ok" button to save
+      the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'passwordbossjson'">
+      Using the Password Boss desktop application, navigate to "File" &rarr; "Export data" &rarr;
+      "Password Boss JSON - not encrypted" and save the JSON file.
+    </ng-container>
+    <ng-container *ngIf="format === 'zohovaultcsv'">
+      Log into the Zoho web vault (vault.zoho.com). Navigate to "Tools" &rarr; "Export Secrets".
+      Select "All Secrets" and click the "Zoho Vault Format CSV" button. Highlight and copy the data
+      from the textarea. Open a text editor like Notepad and paste the data. Save the data from the
+      text editor as
+      <code>zoho_export.csv</code>.
+    </ng-container>
+    <ng-container *ngIf="format === 'splashidcsv'">
+      Using the SplashID Safe desktop application, click on the SplashID blue lock logo in the top
+      right corner. Navigate to "Export" &rarr; "Export as CSV" and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'passkeepcsv'">
+      Using the PassKeep mobile app, navigate to "Backup/Restore". Locate the "CSV Backup/Restore"
+      section and click "Backup to CSV" to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'gnomejson'">
+      Make sure you have python-keyring and python-gnomekeyring installed. Save the
+      <a target="_blank" rel="noopener" href="https://bit.ly/2GpOMTg"
+        >GNOME Keyring Import/Export</a
+      >
+      python script to your desktop as <code>pw_helper.py</code>. Open terminal and run
+      <code>chmod +rx Desktop/pw_helper.py</code> and then
+      <code>python Desktop/pw_helper.py export Desktop/my_passwords.json</code>. Then upload the
+      resulting <code>my_passwords.json</code> file here to Bitwarden.
+    </ng-container>
+    <ng-container *ngIf="format === 'passwordagentcsv'">
+      Using the Password Agent desktop application navigate to "File" &rarr; "Export", select the
+      "Fields to export" button and check all of the fields, change the "Output format" to "CSV",
+      and then click the "Start" button to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'passpackcsv'">
+      Log into the Passpack website vault and navigate to "Settings" &rarr; "Export", then click the
+      "Download" button to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'passmanjson'">
+      Open your Passman vault and click on "Settings" in the bottom left corner. In the "Settings"
+      window switch to the "Export credentials" tab and choose "JSON" as the export type. Enter your
+      vault's passphrase and click the "Export" button to save the JSON file.
+    </ng-container>
+    <ng-container *ngIf="format === 'avastcsv'">
+      Open the Avast Passwords desktop application and navigate to "Settings" &rarr; "Import/export
+      data". Select the "Export" button for the "Export to CSV file" option to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'avastjson'">
+      Open the Avast Passwords desktop application and navigate to "Settings" &rarr; "Import/export
+      data". Select the "Export" button for the "Export to JSON file" option to save the JSON file.
+    </ng-container>
+    <ng-container *ngIf="format === 'fsecurefsk'">
+      Open the F-Secure KEY desktop application and navigate to "Settings" &rarr; "Export
+      Passwords". Select the "Export" button, enter your master password, and save the FSK file.
+    </ng-container>
+    <ng-container *ngIf="format === 'kasperskytxt'">
+      Open the Kaspersky Password Manager desktop application and navigate to "Settings" &rarr;
+      "Import/Export". Locate the "Export to text file" section and select the "Export" button to
+      save the TXT file.
+    </ng-container>
+    <ng-container *ngIf="format === 'remembearcsv'">
+      Open the RememBear desktop application and navigate to "Settings" &rarr; "Account" &rarr;
+      "Export". Enter your master password and select the "Export Anyway" button to save the CSV
+      file.
+    </ng-container>
+    <ng-container *ngIf="format === 'passwordwallettxt'">
+      Open the PasswordWallet desktop application and navigate to "File" &rarr; "Export" &rarr;
+      "Visible entries to text file". Enter your password and select the "Ok" button to save the TXT
+      file.
+    </ng-container>
+    <ng-container *ngIf="format === 'mykicsv'">
+      Open the Myki desktop browser extension and navigate to "Advanced" &rarr; "Export Accounts"
+      and then scan the QR code with your mobile device. Various CSV files will then be saved to
+      your computer's downloads folder.
+    </ng-container>
+    <ng-container *ngIf="format === 'securesafecsv'">
+      Export your SecureSafe password safe to a CSV file with a comma delimiter.
+    </ng-container>
+    <ng-container *ngIf="format === 'logmeoncecsv'">
+      Open the LogMeOnce browser extension, then navigate to "Open Menu" &rarr; "Export To" and
+      select "CSV File" to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'blackberrycsv'">
+      Open the BlackBerry Password Keeper application, then navigate to "Settings" &rarr;
+      "Import/Export". Select "Export Passwords" and follow the instructions on screen to save the
+      unencrypted CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'buttercupcsv'">
+      Open the Buttercup desktop application and unlock your vault. Right click on your vault's icon
+      and select "Export" to save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'codebookcsv'">
+      Open the Codebook desktop application and log in. Navigate to "File" &rarr; "Export all", then
+      click "Yes" on the dialog and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'encryptrcsv'">
+      Open the newest version of the Encryptr desktop application and allow all of your data to
+      sync. Once syncing of your data is complete, the download icon in the top right corner will
+      turn pink. Click the download icon and save the CSV file.
+    </ng-container>
+    <ng-container *ngIf="format === 'yoticsv'">
+      From the Yoti browser extension, click on "Settings", then "Export Saved Logins" and save the
+      CSV file.
+    </ng-container>
+  </app-callout>
+  <div class="row">
+    <div class="col-6">
+      <div class="form-group">
+        <label for="file">2. {{ "selectImportFile" | i18n }}</label>
+        <input
+          type="file"
+          id="file"
+          class="form-control-file"
+          name="file"
+          [disabled]="importBlockedByPolicy"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="fileContents">{{ "orCopyPasteFileContents" | i18n }}</label>
+    <textarea
+      id="fileContents"
+      class="form-control"
+      name="FileContents"
+      [(ngModel)]="fileContents"
+      [disabled]="importBlockedByPolicy"
+    ></textarea>
+  </div>
+  <button
+    type="submit"
+    class="btn btn-primary btn-submit"
+    [disabled]="loading || importBlockedByPolicy"
+    [ngClass]="{ manual: importBlockedByPolicy }"
+  >
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <span>{{ "importData" | i18n }}</span>
+  </button>
+</form>

apps/web/src/app/tools/import.component.ts

@@ -0,0 +1,228 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import * as JSZip from "jszip";
+import Swal, { SweetAlertIcon } from "sweetalert2";
+
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { ImportService } from "jslib-common/abstractions/import.service";
+import { LogService } from "jslib-common/abstractions/log.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { PolicyService } from "jslib-common/abstractions/policy.service";
+import { ImportOption, ImportType } from "jslib-common/enums/importOptions";
+import { PolicyType } from "jslib-common/enums/policyType";
+
+@Component({
+  selector: "app-import",
+  templateUrl: "import.component.html",
+})
+export class ImportComponent implements OnInit {
+  featuredImportOptions: ImportOption[];
+  importOptions: ImportOption[];
+  format: ImportType = null;
+  fileContents: string;
+  formPromise: Promise<Error>;
+  loading = false;
+  importBlockedByPolicy = false;
+
+  protected organizationId: string = null;
+  protected successNavigate: any[] = ["vault"];
+
+  constructor(
+    protected i18nService: I18nService,
+    protected importService: ImportService,
+    protected router: Router,
+    protected platformUtilsService: PlatformUtilsService,
+    protected policyService: PolicyService,
+    private logService: LogService
+  ) {}
+
+  async ngOnInit() {
+    this.setImportOptions();
+
+    this.importBlockedByPolicy = await this.policyService.policyAppliesToUser(
+      PolicyType.PersonalOwnership
+    );
+  }
+
+  async submit() {
+    if (this.importBlockedByPolicy) {
+      this.platformUtilsService.showToast(
+        "error",
+        null,
+        this.i18nService.t("personalOwnershipPolicyInEffectImports")
+      );
+      return;
+    }
+
+    this.loading = true;
+
+    const importer = this.importService.getImporter(this.format, this.organizationId);
+    if (importer === null) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("selectFormat")
+      );
+      this.loading = false;
+      return;
+    }
+
+    const fileEl = document.getElementById("file") as HTMLInputElement;
+    const files = fileEl.files;
+    if (
+      (files == null || files.length === 0) &&
+      (this.fileContents == null || this.fileContents === "")
+    ) {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("selectFile")
+      );
+      this.loading = false;
+      return;
+    }
+
+    let fileContents = this.fileContents;
+    if (files != null && files.length > 0) {
+      try {
+        const content = await this.getFileContents(files[0]);
+        if (content != null) {
+          fileContents = content;
+        }
+      } catch (e) {
+        this.logService.error(e);
+      }
+    }
+
+    if (fileContents == null || fileContents === "") {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("selectFile")
+      );
+      this.loading = false;
+      return;
+    }
+
+    try {
+      this.formPromise = this.importService.import(importer, fileContents, this.organizationId);
+      const error = await this.formPromise;
+      if (error != null) {
+        this.error(error);
+        this.loading = false;
+        return;
+      }
+      this.platformUtilsService.showToast("success", null, this.i18nService.t("importSuccess"));
+      this.router.navigate(this.successNavigate);
+    } catch (e) {
+      this.logService.error(e);
+    }
+
+    this.loading = false;
+  }
+
+  getFormatInstructionTitle() {
+    if (this.format == null) {
+      return null;
+    }
+
+    const results = this.featuredImportOptions
+      .concat(this.importOptions)
+      .filter((o) => o.id === this.format);
+    if (results.length > 0) {
+      return this.i18nService.t("instructionsFor", results[0].name);
+    }
+    return null;
+  }
+
+  protected setImportOptions() {
+    this.featuredImportOptions = [
+      {
+        id: null,
+        name: "-- " + this.i18nService.t("select") + " --",
+      },
+      ...this.importService.featuredImportOptions,
+    ];
+    this.importOptions = [...this.importService.regularImportOptions].sort((a, b) => {
+      if (a.name == null && b.name != null) {
+        return -1;
+      }
+      if (a.name != null && b.name == null) {
+        return 1;
+      }
+      if (a.name == null && b.name == null) {
+        return 0;
+      }
+
+      return this.i18nService.collator
+        ? this.i18nService.collator.compare(a.name, b.name)
+        : a.name.localeCompare(b.name);
+    });
+  }
+
+  private async error(error: Error) {
+    await Swal.fire({
+      heightAuto: false,
+      buttonsStyling: false,
+      icon: "error" as SweetAlertIcon,
+      iconHtml: `<i class="swal-custom-icon bwi bwi-error text-danger"></i>`,
+      input: "textarea",
+      inputValue: error.message,
+      inputAttributes: {
+        readonly: "true",
+      },
+      titleText: this.i18nService.t("importError"),
+      text: this.i18nService.t("importErrorDesc"),
+      showConfirmButton: true,
+      confirmButtonText: this.i18nService.t("ok"),
+      onOpen: (popupEl) => {
+        popupEl.querySelector(".swal2-textarea").scrollTo(0, 0);
+      },
+    });
+  }
+
+  private getFileContents(file: File): Promise<string> {
+    if (this.format === "1password1pux") {
+      return this.extract1PuxContent(file);
+    }
+
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsText(file, "utf-8");
+      reader.onload = (evt) => {
+        if (this.format === "lastpasscsv" && file.type === "text/html") {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString((evt.target as any).result, "text/html");
+          const pre = doc.querySelector("pre");
+          if (pre != null) {
+            resolve(pre.textContent);
+            return;
+          }
+          reject();
+          return;
+        }
+
+        resolve((evt.target as any).result);
+      };
+      reader.onerror = () => {
+        reject();
+      };
+    });
+  }
+
+  private extract1PuxContent(file: File): Promise<string> {
+    return new JSZip()
+      .loadAsync(file)
+      .then((zip) => {
+        return zip.file("export.data").async("string");
+      })
+      .then(
+        function success(content) {
+          return content;
+        },
+        function error(e) {
+          return "";
+        }
+      );
+  }
+}

apps/web/src/app/tools/password-generator-history.component.html

@@ -0,0 +1,58 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="passHistoryTitle">
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="passHistoryTitle">{{ "passwordHistory" | 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" *ngIf="history.length">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item d-flex" *ngFor="let h of history">
+            <div class="password-row">
+              <div
+                class="text-monospace generated-wrapper"
+                [innerHTML]="h.password | colorPassword"
+                appSelectCopy
+              ></div>
+              <small class="text-muted">{{ h.date | date: "medium" }}</small>
+            </div>
+            <div class="ml-auto">
+              <button
+                class="btn btn-link"
+                appA11yTitle="{{ 'copyPassword' | i18n }}"
+                (click)="copy(h.password)"
+              >
+                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="modal-body" *ngIf="!history.length">
+        {{ "noPasswordsInList" | i18n }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "close" | i18n }}
+        </button>
+        <div class="ml-auto">
+          <button
+            type="button"
+            (click)="clear()"
+            class="btn btn-outline-danger"
+            appA11yTitle="{{ 'clear' | i18n }}"
+          >
+            <i class="bwi bwi-trash bwi-lg bwi-fw" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/web/src/app/tools/password-generator-history.component.ts

@@ -0,0 +1,20 @@
+import { Component } from "@angular/core";
+
+import { PasswordGeneratorHistoryComponent as BasePasswordGeneratorHistoryComponent } from "jslib-angular/components/password-generator-history.component";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+
+@Component({
+  selector: "app-password-generator-history",
+  templateUrl: "password-generator-history.component.html",
+})
+export class PasswordGeneratorHistoryComponent extends BasePasswordGeneratorHistoryComponent {
+  constructor(
+    passwordGenerationService: PasswordGenerationService,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService
+  ) {
+    super(passwordGenerationService, platformUtilsService, i18nService, window);
+  }
+}

apps/web/src/app/tools/tools.component.html

@@ -0,0 +1,23 @@
+<div class="container page-content">
+  <div class="row">
+    <div class="col-3">
+      <div class="card mb-4">
+        <div class="card-header">{{ "tools" | i18n }}</div>
+        <div class="list-group list-group-flush">
+          <a routerLink="generator" class="list-group-item" routerLinkActive="active">
+            {{ "generator" | i18n }}
+          </a>
+          <a routerLink="import" class="list-group-item" routerLinkActive="active">
+            {{ "importData" | i18n }}
+          </a>
+          <a routerLink="export" class="list-group-item" routerLinkActive="active">
+            {{ "exportVault" | i18n }}
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="col-9">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

apps/web/src/app/tools/tools.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from "@angular/core";
+
+import { MessagingService } from "jslib-common/abstractions/messaging.service";
+import { StateService } from "jslib-common/abstractions/state.service";
+
+@Component({
+  selector: "app-tools",
+  templateUrl: "tools.component.html",
+})
+export class ToolsComponent implements OnInit {
+  canAccessPremium = false;
+
+  constructor(private stateService: StateService, private messagingService: MessagingService) {}
+
+  async ngOnInit() {
+    this.canAccessPremium = await this.stateService.getCanAccessPremium();
+  }
+
+  premiumRequired() {
+    if (!this.canAccessPremium) {
+      this.messagingService.send("premiumRequired");
+      return;
+    }
+  }
+}