From a52aadd37d208ea0cc91d8924c3dcdb2585334ff Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 6 Jun 2018 23:23:14 -0400 Subject: [PATCH] add/edit cipher modal --- src/app/app.module.ts | 3 + src/app/vault/add-edit.component.html | 560 ++++++++++++-------------- src/app/vault/add-edit.component.ts | 6 +- src/app/vault/vault.component.html | 20 +- src/app/vault/vault.component.ts | 41 +- 5 files changed, 313 insertions(+), 317 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 31021126fd..ef309fcfd9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { RegisterComponent } from './accounts/register.component'; import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component'; import { TwoFactorComponent } from './accounts/two-factor.component'; +import { AddEditComponent } from './vault/add-edit.component'; import { AttachmentsComponent } from './vault/attachments.component'; import { CiphersComponent } from './vault/ciphers.component'; import { FolderAddEditComponent } from './vault/folder-add-edit.component'; @@ -59,6 +60,7 @@ import { Folder } from 'jslib/models/domain'; ToasterModule, ], declarations: [ + AddEditComponent, ApiActionDirective, AppComponent, AttachmentsComponent, @@ -84,6 +86,7 @@ import { Folder } from 'jslib/models/domain'; VaultComponent, ], entryComponents: [ + AddEditComponent, AttachmentsComponent, FolderAddEditComponent, ModalComponent, diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html index 4a619fb88d..51746799f1 100644 --- a/src/app/vault/add-edit.component.html +++ b/src/app/vault/add-edit.component.html @@ -1,309 +1,279 @@ -
-
-
-
-
- {{title}} -
-
-
- - -
-
- - -
- -
-
- - -
-
-
- - +
+
+ +
+
+
+
+
+ {{title}}
-
- - - - - - +
+
+ + +
+
+ + +
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+ + + +
+ + + + +
+
+ + + +
+
+ + + {{'newUri' | i18n}}
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- -
- - - -
- - - - -
-
- - +
+
+
+ + +
+
+ + +
+ +
{{'attachments' | i18n}}
+
- - - {{'newUri' | i18n}} - -
-
-
-
-
- - -
-
- - -
- -
{{'attachments' | i18n}}
- - -
-
-
-
- -
-
-
- -
-
-
-
-
- {{'customFields' | i18n}} -
-
- -
- - - - - -
- - - +
+
+
- -
- - - +
+
+ +
- -
- - {{'newCustomField' | i18n}} - - - +
+
+ {{'customFields' | i18n}} +
+
+ +
+ + + + + +
+ + + +
+ +
+ + + +
+
+ +
+ + {{'newCustomField' | i18n}} + + + +
+
+
+
+
+
+ + +
+
-
+
-
- - -
- -
-
- +
diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts index 132f94d269..6da6dc0670 100644 --- a/src/app/vault/add-edit.component.ts +++ b/src/app/vault/add-edit.component.ts @@ -1,6 +1,6 @@ import { Component, - OnChanges, + OnInit, } from '@angular/core'; import { ToasterService } from 'angular2-toaster'; @@ -19,7 +19,7 @@ import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/componen selector: 'app-vault-add-edit', templateUrl: 'add-edit.component.html', }) -export class AddEditComponent extends BaseAddEditComponent implements OnChanges { +export class AddEditComponent extends BaseAddEditComponent implements OnInit { constructor(cipherService: CipherService, folderService: FolderService, i18nService: I18nService, platformUtilsService: PlatformUtilsService, analytics: Angulartics2, toasterService: ToasterService, @@ -28,7 +28,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges toasterService, auditService, stateService); } - async ngOnChanges() { + async ngOnInit() { await super.load(); } } diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index b3b9d9908f..a7f72cccc1 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -30,20 +30,17 @@
- +
- + +

My Vault

+
@@ -70,3 +67,4 @@
+ diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 4af132f398..37bd305d56 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -18,6 +18,7 @@ import { FolderView } from 'jslib/models/view/folderView'; import { ModalComponent } from '../modal.component'; +import { AddEditComponent } from './add-edit.component'; import { AttachmentsComponent } from './attachments.component'; import { CiphersComponent } from './ciphers.component'; import { FolderAddEditComponent } from './folder-add-edit.component'; @@ -35,6 +36,7 @@ export class VaultComponent implements OnInit { @ViewChild(CiphersComponent) ciphersComponent: CiphersComponent; @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef; @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef; + @ViewChild('cipherAddEdit', { read: ViewContainerRef }) cipherAddEditRef: ViewContainerRef; cipherId: string = null; favorites: boolean = false; @@ -80,14 +82,6 @@ export class VaultComponent implements OnInit { }); } - editCipher(cipher: CipherView) { - console.log(cipher); - } - - addCipher(type: CipherType = null) { - // - } - async clearGroupingFilters() { this.ciphersComponent.searchPlaceholder = this.i18nService.t('searchVault'); await this.ciphersComponent.load(); @@ -194,6 +188,37 @@ export class VaultComponent implements OnInit { }); } + addCipher() { + const component = this.editCipher(null); + component.type = this.type; + component.folderId = this.folderId === 'none' ? null : this.folderId; + } + + editCipher(cipher: CipherView) { + if (this.modal != null) { + this.modal.close(); + } + + const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent); + this.modal = this.cipherAddEditRef.createComponent(factory).instance; + const childComponent = this.modal.show( + AddEditComponent, this.cipherAddEditRef); + + childComponent.cipherId = cipher == null ? null : cipher.id; + childComponent.onSavedCipher.subscribe(async (cipher: CipherView) => { + this.modal.close(); + }); + childComponent.onDeletedCipher.subscribe(async (cipher: CipherView) => { + this.modal.close(); + }); + + this.modal.onClosed.subscribe(() => { + this.modal = null; + }); + + return childComponent; + } + private clearFilters() { this.folderId = null; this.collectionId = null;