export vault

src/app/app.module.ts

@@ -43,6 +43,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
+import { ExportComponent } from './vault/export.component';
 import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { PasswordGeneratorHistoryComponent } from './vault/password-generator-history.component';
@@ -75,6 +76,7 @@ import { ViewComponent } from './vault/view.component';
         BoxRowDirective,
         CiphersComponent,
         EnvironmentComponent,
+        ExportComponent,
         FallbackSrcDirective,
         FolderAddEditComponent,
         GroupingsComponent,
@@ -102,6 +104,7 @@ import { ViewComponent } from './vault/view.component';
     entryComponents: [
         AttachmentsComponent,
         EnvironmentComponent,
+        ExportComponent,
         FolderAddEditComponent,
         ModalComponent,
         PasswordGeneratorComponent,

src/app/vault/export.component.html

@@ -0,0 +1,40 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <form class="modal-content" #form (ngSubmit)="submit()">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">
+                        {{'exportVault' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <div class="box-content-row box-content-row-flex" appBoxRow>
+                            <div class="row-main">
+                                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                    name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
+                                    appAutofocus>
+                            </div>
+                            <div class="action-buttons">
+                                <a class="row-btn" href="#" appStopClick appBlurClick
+                                    title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    <i class="fa fa-lg"
+                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box-footer">
+                        <p>{{'exportMasterPassword' | i18n}}</p>
+                        <strong>{{'warning' | i18n}}</strong>: {{'exportWarning' | i18n}}
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button appBlurClick type="submit" class="primary" title="{{'submit' | i18n}}">
+                    <i class="fa fa-download fa-lg fa-fw"></i>
+                </button>
+                <button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/vault/export.component.ts

@@ -0,0 +1,26 @@
+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 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);
+    }
+}

src/app/vault/folder-add-edit.component.html

@@ -20,7 +20,7 @@
                     <i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
                 </button>
-                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="right">
                     <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
                             title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"

src/app/vault/password-generator.component.html

@@ -78,7 +78,7 @@
                         title="{{'select' | i18n}}">
                     <i class="fa fa-lg fa-fw fa-check"></i>
                 </button>
-                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" data-dismiss="modal">{{(showSelect ? 'cancel' : 'close') | i18n}}</button>
             </div>
         </div>
     </div>

src/app/vault/vault.component.html

@@ -43,4 +43,5 @@
     <ng-template #attachments></ng-template>
     <ng-template #folderAddEdit></ng-template>
     <ng-template #passwordHistory></ng-template>
+    <ng-template #exportVault></ng-template>
 </div>

src/app/vault/vault.component.ts

@@ -26,6 +26,7 @@ import { ModalComponent } from 'jslib/angular/components/modal.component';
 import { AddEditComponent } from './add-edit.component';
 import { AttachmentsComponent } from './attachments.component';
 import { CiphersComponent } from './ciphers.component';
+import { ExportComponent } from './export.component';
 import { FolderAddEditComponent } from './folder-add-edit.component';
 import { GroupingsComponent } from './groupings.component';
 import { PasswordGeneratorComponent } from './password-generator.component';
@@ -56,6 +57,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
     @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
     @ViewChild('passwordHistory', { read: ViewContainerRef }) passwordHistoryModalRef: ViewContainerRef;
+    @ViewChild('exportVault', { read: ViewContainerRef }) exportVaultModalRef: ViewContainerRef;
 
     action: string;
     cipherId: string = null;
@@ -102,6 +104,9 @@ export class VaultComponent implements OnInit, OnDestroy {
                     case 'openPasswordGenerator':
                         await this.openPasswordGenerator(false);
                         break;
+                    case 'exportVault':
+                        await this.openExportVault();
+                        break;
                     case 'syncVault':
                         try {
                             await this.syncService.fullSync(true);
@@ -434,6 +439,24 @@ export class VaultComponent implements OnInit, OnDestroy {
         });
     }
 
+    async openExportVault() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.exportVaultModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<ExportComponent>(ExportComponent, this.exportVaultModalRef);
+
+        childComponent.onSaved.subscribe(() => {
+            this.modal.close();
+        });
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+    }
+
     async addFolder() {
         if (this.modal != null) {
             this.modal.close();