bitwarden-estensione-browser/apps/web/src/app/tools/vault-export/export.component.html

<app-header></app-header>

<bit-container>
  <form [formGroup]="exportForm" [bitSubmit]="submit">
    <bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
      {{ "personalVaultExportPolicyInEffect" | i18n }}
    </bit-callout>
    <tools-export-scope-callout
      [organizationId]="organizationId"
      *ngIf="!disabledByPolicy"
    ></tools-export-scope-callout>

    <ng-container *ngIf="organizations$ | async as organizations">
      <bit-form-field *ngIf="organizations.length > 0">
        <bit-label>{{ "exportFrom" | i18n }}</bit-label>
        <bit-select formControlName="vaultSelector">
          <bit-option [label]="'myVault' | i18n" value="myVault" icon="bwi-user" />
          <bit-option
            *ngFor="let o of organizations$ | async"
            [value]="o.id"
            [label]="o.name"
            icon="bwi-business"
          />
        </bit-select>
      </bit-form-field>
    </ng-container>

    <bit-form-field>
      <bit-label>{{ "fileFormat" | i18n }}</bit-label>
      <bit-select formControlName="format">
        <bit-option *ngFor="let f of formatOptions" [value]="f.value" [label]="f.name" />
      </bit-select>
    </bit-form-field>

    <ng-container *ngIf="format === 'encrypted_json'">
      <bit-radio-group formControlName="fileEncryptionType" aria-label="exportTypeHeading">
        <bit-label>{{ "exportTypeHeading" | i18n }}</bit-label>

        <bit-radio-button
          id="AccountEncrypted"
          name="fileEncryptionType"
          class="tw-block"
          [value]="encryptedExportType.AccountEncrypted"
          checked="fileEncryptionType === encryptedExportType.AccountEncrypted"
        >
          <bit-label>{{ "accountRestricted" | i18n }}</bit-label>
          <bit-hint>{{ "accountRestrictedOptionDescription" | i18n }}</bit-hint>
        </bit-radio-button>

        <bit-radio-button
          id="FileEncrypted"
          name="fileEncryptionType"
          class="tw-block"
          [value]="encryptedExportType.FileEncrypted"
          checked="fileEncryptionType === encryptedExportType.FileEncrypted"
        >
          <bit-label>{{ "passwordProtected" | i18n }}</bit-label>
          <bit-hint>{{ "passwordProtectedOptionDescription" | i18n }}</bit-hint>
        </bit-radio-button>
      </bit-radio-group>

      <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
        <div class="tw-mb-3">
          <bit-form-field>
            <bit-label>{{ "filePassword" | i18n }}</bit-label>
            <input
              bitInput
              type="password"
              id="filePassword"
              formControlName="filePassword"
              name="password"
            />
            <button
              type="button"
              bitSuffix
              bitIconButton
              bitPasswordInputToggle
              [(toggled)]="showFilePassword"
            ></button>
            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
          </bit-form-field>
          <app-password-strength [password]="filePassword" [showText]="true">
          </app-password-strength>
        </div>
        <bit-form-field>
          <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
          <input
            bitInput
            type="password"
            id="confirmFilePassword"
            formControlName="confirmFilePassword"
            name="confirmFilePassword"
          />
          <button
            type="button"
            bitSuffix
            bitIconButton
            bitPasswordInputToggle
            [(toggled)]="showFilePassword"
          ></button>
        </bit-form-field>
      </ng-container>
    </ng-container>

    <button
      bitButton
      bitFormButton
      type="submit"
      buttonType="primary"
      [disabled]="disabledByPolicy"
    >
      {{ "confirmFormat" | i18n }}
    </button>
  </form>
</bit-container>