browser/src/app/tools/import.component.html

<div class="page-header">
    <h1>{{'importData' | i18n}}</h1>
</div>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" 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" 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'">
            See detailed instructions on our help site at
            <a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
        </ng-container>
        <ng-container *ngIf="format === 'lastpasscsv'">
            See detailed instructions on our help site at
            <a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/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). Navigate to "Backup" (top right) and find the "Export to .csv File"
            option. Click "Export Now" to save the CSV 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" href="https://help.bitwarden.com/article/import-from-chrome/">https://help.bitwarden.com/article/import-from-chrome/</a>
        </ng-container>
        <ng-container *ngIf="format === 'firefoxcsv'">
            Use the
            <a target="_blank" href="https://github.com/kspearrin/ff-password-exporter/blob/master/README.md#ff-password-exporter">FF Password Exporter</a> application to export your passwords to a CSV file.
        </ng-container>
        <ng-container *ngIf="format === '1password1pif' || format === '1passwordwincsv'">
            See detailed instructions on our help site at
            <a target="_blank" href="https://help.bitwarden.com/article/import-from-1password/">https://help.bitwarden.com/article/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>
    </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">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="fileContents">{{'orCopyPasteFileContents' | i18n}}</label>
        <textarea id="fileContents" class="form-control" name="FileContents" [(ngModel)]="fileContents"></textarea>
    </div>
    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
        <i class="fa fa-spinner fa-spin"></i>
        <span>{{'importData' | i18n}}</span>
    </button>
</form>