From 7979953f33b3b655a13577fef286f86f2edac7c4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Wed, 20 Jun 2018 16:28:56 -0400
Subject: [PATCH] export data

---
 src/app/app.component.ts            |  1 -
 src/app/tools/export.component.html | 28 +++++++++++++++++++++++---
 src/app/tools/export.component.ts   | 31 +++++++++++++++++++++++++----
 src/app/vault/vault.component.ts    |  2 +-
 src/locales/en/messages.json        | 15 ++++++++++++++
 src/scss/plugins.scss               |  4 ++++
 6 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bb587e59..63f714e8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -56,7 +56,6 @@ export class AppComponent implements OnDestroy, OnInit {
         mouseoverTimerStop: true,
         animation: 'flyRight',
         limit: 5,
-        positionClass: 'toast-bottom-right',
     });
 
     private lastActivity: number = null;
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index faa180e1..8ca157c3 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -1,3 +1,25 @@
-<div class="page-header">
-    <h1>Export</h1>
-</div>
+<form (ngSubmit)="submit()">
+    <div class="page-header">
+        <h1>{{'exportVault' | i18n}}</h1>
+    </div>
+    <p>{{'exportMasterPassword' | i18n}}</p>
+    <div class="alert alert-warning" role="alert">
+        <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+        <p class="mb-0">{{'exportWarning' | i18n}}</p>
+    </div>
+    <div class="row">
+        <div class="form-group col-6">
+            <label for="masterPassword">{{'masterPass' | i18n}}</label>
+            <div class="d-flex">
+                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword" class="text-monospace form-control"
+                    [(ngModel)]="masterPassword" required appAutofocus>
+                <button type="button" class="ml-1 btn btn-link" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                    <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <button appBlurClick type="submit" class="btn btn-primary">
+        {{'submit' | i18n}}
+    </button>
+</form>
diff --git a/src/app/tools/export.component.ts b/src/app/tools/export.component.ts
index e7ff8d32..5575088a 100644
--- a/src/app/tools/export.component.ts
+++ b/src/app/tools/export.component.ts
@@ -1,9 +1,32 @@
-import {
-    Component,
-} from '@angular/core';
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Component } from '@angular/core';
+
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { ExportService } from 'jslib/abstractions/export.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { ExportComponent as BaseExportComponent } from 'jslib/angular/components/export.component';
 
 @Component({
     selector: 'app-export',
     templateUrl: 'export.component.html',
 })
-export class ExportComponent { }
+export class ExportComponent extends BaseExportComponent {
+    constructor(analytics: Angulartics2, toasterService: ToasterService,
+        cryptoService: CryptoService, userService: UserService,
+        i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        exportService: ExportService) {
+        super(analytics, toasterService, cryptoService, userService, i18nService, platformUtilsService,
+            exportService, window);
+    }
+
+    protected saved() {
+        super.saved();
+        this.masterPassword = null;
+        this.toasterService.popAsync('success', null, this.i18nService.t('exportSuccess'));
+    }
+}
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts
index 1d4365ae..9884e993 100644
--- a/src/app/vault/vault.component.ts
+++ b/src/app/vault/vault.component.ts
@@ -190,7 +190,7 @@ export class VaultComponent implements OnInit {
         }
 
         const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
-        this.modal = this.shareModalRef.createComponent(factory).instance;
+        this.modal = this.collectionsModalRef.createComponent(factory).instance;
         const childComponent = this.modal.show<CollectionsComponent>(CollectionsComponent, this.collectionsModalRef);
 
         childComponent.cipherId = cipher.id;
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 977394c6..5b4fb673 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -717,5 +717,20 @@
   },
   "copyVerificationCode": {
     "message": "Copy Verification Code"
+  },
+  "warning": {
+    "message": "Warning"
+  },
+  "exportWarning": {
+    "message": "This export contains your unencrypted data in .csv format. You should not store or send it over unsecure channels (such as email). Delete it immediately after your are done using it."
+  },
+  "exportMasterPassword": {
+    "message": "Enter your master password to export your vault data."
+  },
+  "exportVault": {
+    "message": "Export Vault"
+  },
+  "exportSuccess": {
+    "message": "Your vault data has been exported."
   }
 }
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index deed4442..9c9e598a 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -1,6 +1,10 @@
 @import "~angular2-toaster/toaster";
 
 #toast-container {
+    &.toast-top-right {
+        top: 76px;
+    }
+
     .toast-close-button {
         right: -0.15em;
     }