diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bc5eb9e7fa..3dab8590dd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,8 +7,10 @@ import { FormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { ServicesModule } from './services/services.module'; +import { AddComponent } from './vault/add.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'; @@ -27,8 +29,10 @@ import { ViewComponent } from './vault/view.component'; ServicesModule, ], declarations: [ + AddComponent, AppComponent, CiphersComponent, + EditComponent, FallbackSrcDirective, GroupingsComponent, I18nPipe, diff --git a/src/app/vault/add.component.html b/src/app/vault/add.component.html new file mode 100644 index 0000000000..7863790a0e --- /dev/null +++ b/src/app/vault/add.component.html @@ -0,0 +1,35 @@ +
+
+
+
+ {{'itemInformation' | i18n}} +
+
+
+ {{'name' | i18n}} + {{cipher.name}} +
+
+
+ {{'uri' | i18n}} + {{cipher.login.uri}} +
+
+ {{'username' | i18n}} + {{cipher.login.username}} +
+
+ {{'password' | i18n}} + {{cipher.login.password}} +
+
+
+
+ Some footer information for add. +
+
+
+
+
+ {{'editItem' | i18n}} +
diff --git a/src/app/vault/add.component.ts b/src/app/vault/add.component.ts new file mode 100644 index 0000000000..89bc7ad285 --- /dev/null +++ b/src/app/vault/add.component.ts @@ -0,0 +1,27 @@ +import * as template from './add.component.html'; + +import { + Component, + Input, + OnChanges, +} from '@angular/core'; + +import { CipherService } from 'jslib/abstractions/cipher.service'; + +import { CipherView } from 'jslib/models/view/cipherView'; + +@Component({ + selector: 'app-vault-add', + template: template, +}) +export class AddComponent implements OnChanges { + @Input() folderId: string; + cipher: CipherView; + + constructor(private cipherService: CipherService) { + } + + async ngOnChanges() { + this.cipher = new CipherView(); + } +} diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 6662603d80..adfa3a0cb0 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -4,7 +4,9 @@
- + + +
@@ -26,5 +28,5 @@
- {{'addItem' | i18n}} +
diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index 3881ede2b1..7159dce9a7 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -15,9 +15,14 @@ import { CipherView } from 'jslib/models/view/cipherView'; }) export class CiphersComponent { @Input() ciphers: CipherView[]; - @Output() onCipherClicked = new EventEmitter(); + @Output() onCipherClicked = new EventEmitter(); + @Output() onAddCipher = new EventEmitter(); cipherClicked(cipher: CipherView) { - this.onCipherClicked.emit(cipher); + this.onCipherClicked.emit(cipher.id); + } + + addCipher() { + this.onAddCipher.emit(); } } diff --git a/src/app/vault/edit.component.html b/src/app/vault/edit.component.html new file mode 100644 index 0000000000..9644bf6e9c --- /dev/null +++ b/src/app/vault/edit.component.html @@ -0,0 +1,35 @@ +
+
+
+
+ {{'itemInformation' | i18n}} +
+
+
+ {{'name' | i18n}} + {{cipher.name}} +
+
+
+ {{'uri' | i18n}} + {{cipher.login.uri}} +
+
+ {{'username' | i18n}} + {{cipher.login.username}} +
+
+ {{'password' | i18n}} + {{cipher.login.password}} +
+
+
+
+ Some footer information for edit. +
+
+
+
+
+ {{'editItem' | i18n}} +
diff --git a/src/app/vault/edit.component.ts b/src/app/vault/edit.component.ts new file mode 100644 index 0000000000..760c162bd1 --- /dev/null +++ b/src/app/vault/edit.component.ts @@ -0,0 +1,35 @@ +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(); + 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); + } +} diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index 9dbd505560..9c23990d1a 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -1,5 +1,22 @@
- - - + + + + + + + + + +
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 926aee8cf7..190ea81016 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -15,7 +15,7 @@ import { CipherView } from 'jslib/models/view/cipherView'; }) export class VaultComponent implements OnInit { ciphers: CipherView[]; - cipher: CipherView; + cipherId: string; details: string; constructor(private cipherService: CipherService) { @@ -25,8 +25,17 @@ export class VaultComponent implements OnInit { this.ciphers = await this.cipherService.getAllDecrypted(); } - viewCipher(cipher: CipherView) { - this.cipher = cipher; + viewCipher(id: string) { + this.cipherId = id; this.details = 'view'; } + + editCipher(id: string) { + this.cipherId = id; + this.details = 'edit'; + } + + addCipher() { + this.details = 'add'; + } } diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html index 291afd3805..29d73fb4be 100644 --- a/src/app/vault/view.component.html +++ b/src/app/vault/view.component.html @@ -31,5 +31,5 @@
- {{'editItem' | i18n}} +
diff --git a/src/app/vault/view.component.ts b/src/app/vault/view.component.ts index 17c52d9a61..8b12ff3b95 100644 --- a/src/app/vault/view.component.ts +++ b/src/app/vault/view.component.ts @@ -2,8 +2,10 @@ import * as template from './view.component.html'; import { Component, + EventEmitter, Input, OnChanges, + Output, } from '@angular/core'; import { CipherService } from 'jslib/abstractions/cipher.service'; @@ -16,6 +18,7 @@ import { CipherView } from 'jslib/models/view/cipherView'; }) export class ViewComponent implements OnChanges { @Input() cipherId: string; + @Output() onEditCipher = new EventEmitter(); cipher: CipherView; constructor(private cipherService: CipherService) { @@ -25,4 +28,8 @@ export class ViewComponent implements OnChanges { const cipher = await this.cipherService.get(this.cipherId); this.cipher = await cipher.decrypt(); } + + edit() { + this.onEditCipher.emit(this.cipher.id); + } }