combine edit into add/edit component

src/app/app.module.ts

@@ -10,10 +10,9 @@ import { NgModule } from '@angular/core';
 import { ServicesModule } from './services/services.module';
 import { ToasterModule } from 'angular2-toaster';
 
-import { AddComponent } from './vault/add.component';
+import { AddEditComponent } from './vault/add-edit.component';
 import { AppComponent } from './app.component';
 import { CiphersComponent } from './vault/ciphers.component';
-import { EditComponent } from './vault/edit.component';
 import { FallbackSrcDirective } from './directives/fallback-src.directive';
 import { GroupingsComponent } from './vault/groupings.component';
 import { I18nPipe } from './pipes/i18n.pipe';
@@ -38,10 +37,9 @@ import { ViewComponent } from './vault/view.component';
         ToasterModule,
     ],
     declarations: [
-        AddComponent,
+        AddEditComponent,
         AppComponent,
         CiphersComponent,
-        EditComponent,
         FallbackSrcDirective,
         GroupingsComponent,
         I18nPipe,

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

@@ -5,7 +5,7 @@
                 {{'itemInformation' | i18n}}
             </div>
             <div class="box-content">
-                <div class="box-content-row">
+                <div class="box-content-row" *ngIf="!editMode">
                     <label for="type">{{'type' | i18n}}</label>
                     <select id="type" name="Type" [(ngModel)]="cipher.type">
                         <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
@@ -176,6 +176,10 @@
                     <label for="favorite">{{'favorite' | i18n}}</label>
                     <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
                 </div>
+                <a class="box-content-row" href="#" appStopClick (click)="attachments()" *ngIf="editMode">
+                    {{'attachments' | i18n}}
+                    <i class="fa fa-chevron-right icon-right"></i>
+                </a>
             </div>
         </div>
         <div class="box">
@@ -233,7 +237,7 @@
     <button (click)="cancel()" title="{{'cancel' | i18n}}">
         {{'cancel' | i18n}}
     </button>
-    <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}">
+    <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}" *ngIf="editMode">
         <i class="fa fa-trash-o fa-lg"></i>
     </button>
 </div>

src/app/vault/add-edit.component.ts

@@ -1,9 +1,11 @@
-import * as template from './add.component.html';
+import * as template from './add-edit.component.html';
 
 import {
     Component,
+    EventEmitter,
     Input,
     OnChanges,
+    Output,
 } from '@angular/core';
 
 import { Angulartics2 } from 'angulartics2';
@@ -27,11 +29,17 @@ import { LoginView } from 'jslib/models/view/loginView';
 import { SecureNoteView } from 'jslib/models/view/secureNoteView';
 
 @Component({
-    selector: 'app-vault-add',
+    selector: 'app-vault-add-edit',
     template: template,
 })
-export class AddComponent implements OnChanges {
+export class AddEditComponent implements OnChanges {
     @Input() folderId: string;
+    @Input() cipherId: string;
+    @Output() onSavedCipher = new EventEmitter<CipherView>();
+    @Output() onCancelled = new EventEmitter<CipherView>();
+    @Output() onEditAttachments = new EventEmitter<CipherView>();
+
+    editMode: boolean = false;
     cipher: CipherView;
     folders: FolderView[];
     cipherType = CipherType;
@@ -94,6 +102,13 @@ export class AddComponent implements OnChanges {
     }
 
     async ngOnChanges() {
+        this.editMode = this.cipherId != null;
+
+        if (this.editMode) {
+            this.editMode = true;
+            const cipher = await this.cipherService.get(this.cipherId);
+            this.cipher = await cipher.decrypt();
+        } else {
             this.cipher = new CipherView();
             this.cipher.folderId = null; // TODO
             this.cipher.type = CipherType.Login;
@@ -102,6 +117,7 @@ export class AddComponent implements OnChanges {
             this.cipher.identity = new IdentityView();
             this.cipher.secureNote = new SecureNoteView();
             this.cipher.secureNote.type = SecureNoteType.Generic;
+        }
 
         this.folders = await this.folderService.getAllDecrypted();
     }
@@ -115,8 +131,9 @@ export class AddComponent implements OnChanges {
 
         const cipher = await this.cipherService.encrypt(this.cipher);
         await this.cipherService.saveWithServer(cipher);
-        this.analytics.eventTrack.next({ action: 'Added Cipher' });
+        this.analytics.eventTrack.next({ action: this.editMode ? 'Edited Cipher' : 'Added Cipher' });
-        this.toasterService.popAsync('success', null, this.i18nService.t('addedItem'));
+        this.toasterService.popAsync('success', null, this.i18nService.t(this.editMode ? 'editedItem' : 'addedItem'));
+        this.onSavedCipher.emit(this.cipher);
     };
 
     addField() {
@@ -135,4 +152,12 @@ export class AddComponent implements OnChanges {
             this.cipher.fields.splice(i, 1);
         }
     };
+
+    cancel() {
+        this.onCancelled.emit(this.cipher);
+    };
+
+    attachments() {
+        this.onEditAttachments.emit(this.cipher);
+    };
 }

src/app/vault/ciphers.component.ts

@@ -15,11 +15,11 @@ import { CipherView } from 'jslib/models/view/cipherView';
 })
 export class CiphersComponent {
     @Input() ciphers: CipherView[];
-    @Output() onCipherClicked = new EventEmitter<string>();
+    @Output() onCipherClicked = new EventEmitter<CipherView>();
     @Output() onAddCipher = new EventEmitter();
 
     cipherClicked(cipher: CipherView) {
-        this.onCipherClicked.emit(cipher.id);
+        this.onCipherClicked.emit(cipher);
     }
 
     addCipher() {

src/app/vault/edit.component.html

@@ -1,32 +0,0 @@
-<div class="content">
-    <div class="inner-content">
-        <div class="box">
-            <div class="box-header">
-                {{'itemInformation' | i18n}}
-            </div>
-            <div class="box-content" *ngIf="cipher">
-                <div class="box-content-row">
-                    <span class="row-label">{{'name' | i18n}}</span>
-                    {{cipher.name}}
-                </div>
-                <div *ngIf="cipher.login">
-                    <div class="box-content-row">
-                        <span class="row-label">{{'uri' | i18n}}</span>
-                        {{cipher.login.uri}}
-                    </div>
-                    <div class="box-content-row">
-                        <span class="row-label">{{'username' | i18n}}</span>
-                        {{cipher.login.username}}
-                    </div>
-                    <div class="box-content-row">
-                        <span class="row-label">{{'password' | i18n}}</span>
-                        {{cipher.login.password}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="footer">
-    {{'editItem' | i18n}}
-</div>

src/app/vault/edit.component.ts

@@ -1,35 +0,0 @@
-import * as template from './edit.component.html';
-
-import {
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    Output,
-} from '@angular/core';
-
-import { CipherService } from 'jslib/abstractions/cipher.service';
-
-import { CipherView } from 'jslib/models/view/cipherView';
-
-@Component({
-    selector: 'app-vault-edit',
-    template: template,
-})
-export class EditComponent implements OnChanges {
-    @Input() cipherId: string;
-    @Output() onEditCipherClicked = new EventEmitter<string>();
-    cipher: CipherView;
-
-    constructor(private cipherService: CipherService) {
-    }
-
-    async ngOnChanges() {
-        const cipher = await this.cipherService.get(this.cipherId);
-        this.cipher = await cipher.decrypt();
-    }
-
-    editCipherClicked(id: string) {
-        this.onEditCipherClicked.emit(id);
-    }
-}

src/app/vault/vault.component.html

@@ -11,12 +11,12 @@
                     [cipherId]="cipherId"
                     (onEditCipher)="editCipher($event)">
     </app-vault-view>
-    <app-vault-edit id="details"
+    <app-vault-add-edit id="details"
-                    *ngIf="cipherId && action === 'edit'"
+                        *ngIf="action === 'add' || action === 'edit'"
-                    [cipherId]="cipherId">
+                        [folderId]="null"
-    </app-vault-edit>
+                        [cipherId]="action === 'edit' ? cipherId : null"
-    <app-vault-add id="details"
+                        (onSavedCipher)="savedCipher($event)"
-                   *ngIf="action === 'add'"
+                        (onEditAttachments)="editCipherAttachments($event)"
-                   [folderId]="null">
+                        (onCancelled)="cancelledAddEdit($event)">
-    </app-vault-add>
+    </app-vault-add-edit>
 </div>

src/app/vault/vault.component.ts

@@ -34,10 +34,12 @@ export class VaultComponent implements OnInit {
 
         this.route.queryParams.subscribe((params) => {
             if (params['cipherId']) {
+                const cipherView = new CipherView();
+                cipherView.id = params['cipherId'];
                 if (params['action'] === 'edit') {
-                    this.editCipher(params['cipherId']);
+                    this.editCipher(cipherView);
                 } else {
-                    this.viewCipher(params['cipherId']);
+                    this.viewCipher(cipherView);
                 }
             } else if (params['action'] === 'add') {
                 this.addCipher();
@@ -45,24 +47,24 @@ export class VaultComponent implements OnInit {
         });
     }
 
-    viewCipher(id: string) {
+    viewCipher(cipher: CipherView) {
-        if (this.action === 'view' && this.cipherId === id) {
+        if (this.action === 'view' && this.cipherId === cipher.id) {
             return;
         }
 
-        this.cipherId = id;
+        this.cipherId = cipher.id;
         this.action = 'view';
-        this.go({ action: this.action, cipherId: id });
+        this.go({ action: this.action, cipherId: this.cipherId });
     }
 
-    editCipher(id: string) {
+    editCipher(cipher: CipherView) {
-        if (this.action === 'edit' && this.cipherId === id) {
+        if (this.action === 'edit' && this.cipherId === cipher.id) {
             return;
         }
 
-        this.cipherId = id;
+        this.cipherId = cipher.id;
         this.action = 'edit';
-        this.go({ action: this.action, cipherId: id });
+        this.go({ action: this.action, cipherId: this.cipherId });
     }
 
     addCipher() {
@@ -71,7 +73,28 @@ export class VaultComponent implements OnInit {
         }
 
         this.action = 'add';
-        this.go({ action: this.action });
+        this.cipherId = null;
+        this.go({ action: this.action, cipherId: this.cipherId });
+    }
+
+    savedCipher(cipher: CipherView) {
+        this.cipherId = cipher.id;
+        this.action = 'view';
+        this.go({ action: this.action, cipherId: this.cipherId });
+    }
+
+    deletedCipher(cipher: CipherView) {
+        
+    }
+
+    editCipherAttachments(cipher: CipherView) {
+
+    }
+
+    cancelledAddEdit(cipher: CipherView) {
+        this.cipherId = cipher.id;
+        this.action = this.cipherId != null ? 'view' : null;
+        this.go({ action: this.action, cipherId: this.cipherId });
     }
 
     private go(queryParams: any) {

src/app/vault/view.component.ts

@@ -32,7 +32,7 @@ import { FieldView } from 'jslib/models/view/fieldView';
 })
 export class ViewComponent implements OnChanges, OnDestroy {
     @Input() cipherId: string;
-    @Output() onEditCipher = new EventEmitter<string>();
+    @Output() onEditCipher = new EventEmitter<CipherView>();
     cipher: CipherView;
     showPassword: boolean;
     isPremium: boolean;
@@ -75,7 +75,7 @@ export class ViewComponent implements OnChanges, OnDestroy {
     }
 
     edit() {
-        this.onEditCipher.emit(this.cipher.id);
+        this.onEditCipher.emit(this.cipher);
     }
 
     togglePassword() {

src/scss/box.scss

@@ -47,7 +47,7 @@
                 border-radius: $border-radius;
             }
 
-            &:last-child {
+            &:last-child:not(.box-content-row-cf) {
                 &:before {
                     border: none;
                     height: 0;

src/scss/styles.scss

@@ -73,6 +73,7 @@ a {
 
 input, select, textarea, button {
     font-size: $font-size-base;
+    font-family: $font-family-sans-serif;
 }
 
 textarea {