From 9b67f6e39849e1d1ce4cfc263c7c42f16400b8ee Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 25 Jun 2018 15:47:05 -0400
Subject: [PATCH] improt instructions

---
 src/app/tools/import.component.html | 23 +++++++++++++++++++++++
 src/app/tools/import.component.ts   | 12 ++++++++++++
 src/locales/en/messages.json        | 10 ++++++++++
 3 files changed, 45 insertions(+)

diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index fce6908e..06af2d4a 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -12,6 +12,29 @@
                     <option *ngFor="let o of importOptions" [ngValue]="o.id">{{o.name}}</option>
                 </select>
             </div>
+        </div>
+    </div>
+    <div class="alert alert-info" role="alert" *ngIf="format">
+        <h4 class="alert-heading">{{'instructionsFor' | i18n : getFormatName()}}</h4>
+        <p class="mb-0">
+            <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>
+        </p>
+    </div>
+    <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">
diff --git a/src/app/tools/import.component.ts b/src/app/tools/import.component.ts
index 8fecc665..a68595fc 100644
--- a/src/app/tools/import.component.ts
+++ b/src/app/tools/import.component.ts
@@ -165,6 +165,18 @@ export class ImportComponent {
         }
     }
 
+    getFormatName() {
+        if (this.format == null) {
+            return null;
+        }
+
+        const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
+        if (results.length > 0) {
+            return results[0].name;
+        }
+        return null;
+    }
+
     private getFileContents(file: File): Promise<string> {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 9a3640ef..a7c240ec 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -883,5 +883,15 @@
   },
   "orCopyPasteFileContents": {
     "message": "or copy/paste the import file contents"
+  },
+  "instructionsFor": {
+    "message": "$NAME$ Instructions",
+    "description": "The title for the import tool instructions.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "LastPass (csv)"
+      }
+    }
   }
 }