folder listing, add/edit components, cleanup

jslib

@@ -1 +1 @@
-Subproject commit 2782ae33fcd60f9b84396e54a7d08cfa583f47be
+Subproject commit df9074a0e58a1b4a499a0682e964013b546d786f

src/popup/app-routing.animations.ts

@@ -129,6 +129,12 @@ export const routerTransition = trigger('routerTransition', [
     transition('tabs => export', inSlideLeft),
     transition('export => tabs', outSlideRight),
 
+    transition('tabs => folders', inSlideLeft),
+    transition('folders => tabs', outSlideRight),
+
+    transition('folders => edit-folder, folders => add-folder', inSlideUp),
+    transition('edit-folder => folders, add-folder => folders', outSlideDown),
+
     transition('tabs => lock', inSlideDown),
     transition('lock => tabs', outSlideUp),
 ]);

src/popup/app-routing.module.ts

@@ -16,11 +16,13 @@ import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
+import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
+import { PasswordGeneratorComponent } from './generator/password-generator.component';
+import { ExportComponent } from './settings/export.component';
+import { FolderAddEditComponent } from './settings/folder-add-edit.component';
+import { FoldersComponent } from './settings/folders.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TabsComponent } from './tabs.component';
-import { ExportComponent } from './tools/export.component';
-import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
-import { PasswordGeneratorComponent } from './tools/password-generator.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -134,6 +136,24 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'export' },
     },
+    {
+        path: 'folders',
+        component: FoldersComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'folders' },
+    },
+    {
+        path: 'add-folder',
+        component: FolderAddEditComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'add-folder' },
+    },
+    {
+        path: 'edit-folder',
+        component: FolderAddEditComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'edit-folder' },
+    },
     {
         path: 'tabs',
         component: TabsComponent,

src/popup/app.module.ts

@@ -24,11 +24,13 @@ import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
+import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
+import { PasswordGeneratorComponent } from './generator/password-generator.component';
+import { ExportComponent } from './settings/export.component';
+import { FolderAddEditComponent } from './settings/folder-add-edit.component';
+import { FoldersComponent } from './settings/folders.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TabsComponent } from './tabs.component';
-import { ExportComponent } from './tools/export.component';
-import { PasswordGeneratorHistoryComponent } from './tools/password-generator-history.component';
-import { PasswordGeneratorComponent } from './tools/password-generator.component';
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -83,6 +85,8 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         EnvironmentComponent,
         ExportComponent,
         FallbackSrcDirective,
+        FolderAddEditComponent,
+        FoldersComponent,
         GroupingsComponent,
         HomeComponent,
         HintComponent,

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