export data

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;

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>

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'));
+    }
+}

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;

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."
   }
 }

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;
     }