load item view cipher

src/app/directives/fallback-src.directive.ts

@@ -14,7 +14,7 @@ export class FallbackSrcDirective {
     constructor(private el: ElementRef) {
     }
 
-    @HostListener('error') OnError() {
+    @HostListener('error') onError() {
         this.el.nativeElement.src = this.appFallbackSrc;
     }
 }

src/app/vault/ciphers.component.html

@@ -10,7 +10,7 @@
 <div class="content">
     <div class="list">
         <div class="list-section" style="padding-top: 0; padding-bottom: 0;">
-            <a *ngFor="let cipher of ciphers" appStopClick (click)="viewCipher(cipher)"
+            <a *ngFor="let cipher of ciphers" appStopClick (click)="cipherClicked(cipher)"
                href="#" class="list-section-item condensed" title="View Item">
                 <app-vault-icon [cipher]="cipher"></app-vault-icon>
                 <span class="text">

src/app/vault/ciphers.component.ts

@@ -2,8 +2,10 @@ import * as template from './ciphers.component.html';
 
 import {
     Component,
+    EventEmitter,
     Input,
     OnChanges,
+    Output,
 } from '@angular/core';
 
 @Component({
@@ -12,6 +14,7 @@ import {
 })
 export class CiphersComponent implements OnChanges {
     @Input() ciphers: any[];
+    @Output() onCipherClicked = new EventEmitter<any>();
 
     constructor() {
         
@@ -21,7 +24,7 @@ export class CiphersComponent implements OnChanges {
         
     }
 
-    viewCipher(cipher: any) {
-        console.log(cipher.id);
+    cipherClicked(cipher: any) {
+        this.onCipherClicked.emit(cipher);
     }
 }

src/app/vault/vault.component.html

@@ -1,5 +1,5 @@
 <div id="vault">
     <app-vault-groupings id="groupings"></app-vault-groupings>
-    <app-vault-ciphers id="items" [ciphers]="ciphers"></app-vault-ciphers>
-    <app-vault-view id="details" [cipherId]="null"></app-vault-view>
+    <app-vault-ciphers id="items" [ciphers]="ciphers" (onCipherClicked)="viewCipher($event)"></app-vault-ciphers>
+    <app-vault-view id="details" *ngIf="cipher && details === 'view'" [cipherId]="cipher.id"></app-vault-view>
 </div>

src/app/vault/vault.component.ts

@@ -13,12 +13,18 @@ import { CipherService } from 'jslib/abstractions/cipher.service';
 })
 export class VaultComponent implements OnInit {
     ciphers: any[];
+    cipher: any;
+    details: string;
 
     constructor(private cipherService: CipherService) {
-
     }
 
     async ngOnInit() {
         this.ciphers = await this.cipherService.getAllDecrypted();
     }
+
+    viewCipher(cipher: any) {
+        this.cipher = cipher;
+        this.details = 'view';
+    }
 }

src/app/vault/view.component.html

@@ -4,22 +4,22 @@
             <div class="box-header">
                 Item Information
             </div>
-            <div class="box-content">
+            <div class="box-content" *ngIf="cipher">
                 <div class="box-content-row">
                     <span class="row-label">Name</span>
-                    Google
+                    {{cipher.name}}
                 </div>
                 <div class="box-content-row">
                     <span class="row-label">URI</span>
-                    https://google.com
+                    {{cipher.login.uri}}
                 </div>
                 <div class="box-content-row">
                     <span class="row-label">Username</span>
-                    hello@bitwarden.com
+                    {{cipher.login.username}}
                 </div>
                 <div class="box-content-row">
                     <span class="row-label">Password</span>
-                    JKsiuhfLKJDOsudfhjksdfjk
+                    {{cipher.login.password}}
                 </div>
             </div>
             <div class="box-footer">

src/app/vault/view.component.ts

@@ -6,18 +6,21 @@ import {
     OnChanges,
 } from '@angular/core';
 
+import { CipherService } from 'jslib/abstractions/cipher.service';
+
 @Component({
     selector: 'app-vault-view',
     template: template,
 })
 export class ViewComponent implements OnChanges {
     @Input() cipherId: string;
+    cipher: any;
 
-    constructor() {
-        
+    constructor(private cipherService: CipherService) {
     }
 
-    ngOnChanges() {
-        
+    async ngOnChanges() {
+        const cipher = await this.cipherService.get(this.cipherId);
+        this.cipher = await cipher.decrypt();
     }
 }