folder listing, add/edit components, cleanup

src/popup/settings/export.component.html

@@ -0,0 +1,40 @@
+<form (ngSubmit)="submit()">
+    <header>
+        <div class="left">
+            <button type="button" appBlurClick (click)="close()">
+                <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+                <span>{{'back' | i18n}}</span>
+            </button>
+        </div>
+        <div class="center">
+            <span class="title">{{'exportVault' | i18n}}</span>
+        </div>
+        <div class="right">
+            <button appBlurClick type="submit">{{'submit' | i18n}}</button>
+        </div>
+    </header>
+    <content>
+        <div class="box">
+            <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>
+    </content>
+</form>

src/popup/settings/export.component.ts

@@ -0,0 +1,38 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { FolderService } from 'jslib/abstractions/folder.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,
+        cipherService: CipherService, folderService: FolderService,
+        cryptoService: CryptoService, userService: UserService,
+        i18nService: I18nService, platformUtilsService: PlatformUtilsService,
+        private location: Location) {
+        super(analytics, toasterService, cipherService, folderService, cryptoService, userService, i18nService,
+            platformUtilsService, window);
+    }
+
+    close() {
+        this.location.back();
+    }
+
+    protected saved() {
+        super.saved();
+        this.close();
+    }
+}

src/popup/settings/folder-add-edit.component.html

@@ -0,0 +1,41 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+    <header>
+        <div class="left">
+            <button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
+        </div>
+        <div class="center">
+            <span class="title">{{title}}</span>
+        </div>
+        <div class="right">
+            <button type="submit" appBlurClick [disabled]="form.loading">
+                <span [hidden]="form.loading">{{'save' | i18n}}</span>
+                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading"></i>
+            </button>
+        </div>
+    </header>
+    <content *ngIf="folder">
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row" appBoxRow>
+                    <label for="name">{{'name' | i18n}}</label>
+                    <input id="name" type="text" name="Name" [(ngModel)]="folder.name"
+                           [appAutofocus]="!editMode">
+                </div>
+            </div>
+        </div>
+        <div class="box list" *ngIf="editMode">
+            <div class="box-content single-line">
+                <a class="box-content-row" href="#" appStopClick appBlurClick
+                   (click)="delete()" [appApiAction]="deletePromise" #deleteBtn>
+                    <div class="row-main text-danger">
+                        <div class="icon text-danger">
+                            <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                            <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
+                        </div>
+                        <span>{{'deleteFolder' | i18n}}</span>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </content>
+</form>

src/popup/settings/folder-add-edit.component.ts

@@ -0,0 +1,60 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { FolderService } from 'jslib/abstractions/folder.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import {
+    FolderAddEditComponent as BaseFolderAddEditComponent,
+} from 'jslib/angular/components/folder-add-edit.component';
+
+@Component({
+    selector: 'app-folder-add-edit',
+    templateUrl: 'folder-add-edit.component.html',
+})
+export class FolderAddEditComponent extends BaseFolderAddEditComponent {
+    constructor(folderService: FolderService, i18nService: I18nService,
+        analytics: Angulartics2, toasterService: ToasterService,
+        platformUtilsService: PlatformUtilsService, private location: Location,
+        private router: Router, private route: ActivatedRoute) {
+        super(folderService, i18nService, analytics, toasterService, platformUtilsService);
+    }
+
+    async ngOnInit() {
+        this.route.queryParams.subscribe(async (params) => {
+            if (params.folderId) {
+                this.folderId = params.folderId;
+            }
+            await super.ngOnInit();
+        });
+    }
+
+    async submit(): Promise<boolean> {
+        if (await super.submit()) {
+            this.location.back();
+            return true;
+        }
+
+        return false;
+    }
+
+    cancel() {
+        this.location.back();
+    }
+
+    async delete(): Promise<boolean> {
+        const confirmed = await super.delete();
+        if (confirmed) {
+            this.location.back();
+        }
+        return confirmed;
+    }
+}

src/popup/settings/folders.component.html

@@ -0,0 +1,27 @@
+<header>
+    <div class="left">
+        <button appBlurClick type="button" (click)="close()">
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+            <span>{{'back' | i18n}}</span>
+        </button>
+    </div>
+    <div class="center">
+        <span class="title">{{'folders' | i18n}}</span>
+    </div>
+    <div class="right">
+        <button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
+            <i class="fa fa-plus fa-lg fa-fw"></i>
+        </button>
+    </div>
+</header>
+<content>
+    <div class="box list full-list" *ngIf="folders && folders.length">
+        <div class="box-content">
+            <a href="#" appStopClick (click)="folderSelected(f)" class="box-content-row padded"
+               *ngFor="let f of folders">{{f.name}}</a>
+        </div>
+    </div>
+    <div class="no-items" *ngIf="!folders || !folders.length">
+        <p>{{'noFolders' | i18n}}</p>
+    </div>
+</content>

src/popup/settings/folders.component.ts

@@ -0,0 +1,38 @@
+import { Location } from '@angular/common';
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import { FolderView } from 'jslib/models/view/folderView';
+
+import { FolderService } from 'jslib/abstractions/folder.service';
+
+@Component({
+    selector: 'app-folders',
+    templateUrl: 'folders.component.html',
+})
+export class FoldersComponent implements OnInit {
+    folders: FolderView[];
+
+    constructor(private folderService: FolderService, private location: Location,
+        private router: Router) {
+    }
+
+    async ngOnInit() {
+        this.folders = await this.folderService.getAllDecrypted();
+    }
+
+    folderSelected(folder: FolderView) {
+        this.router.navigate(['/edit-folder'], { queryParams: { folderId: folder.id } });
+    }
+
+    addFolder() {
+        this.router.navigate(['/add-folder']);
+    }
+
+    close() {
+        this.location.back();
+    }
+}