directives

src/app/app.module.ts

@@ -9,9 +9,12 @@ import { ServicesModule } from './services/services.module';
 
 import { AppComponent } from './app.component';
 import { CiphersComponent } from './vault/ciphers.component';
+import { FallbackSrcDirective } from './directives/fallback-src.directive';
 import { GroupingsComponent } from './vault/groupings.component';
 import { IconComponent } from './vault/icon.component';
 import { LoginComponent } from './accounts/login.component';
+import { StopClickDirective } from './directives/stop-click.directive';
+import { StopPropDirective } from './directives/stop-prop.directive';
 import { VaultComponent } from './vault/vault.component';
 import { ViewComponent } from './vault/view.component';
 
@@ -25,9 +28,11 @@ import { ViewComponent } from './vault/view.component';
     declarations: [
         AppComponent,
         CiphersComponent,
+        FallbackSrcDirective,
         GroupingsComponent,
         IconComponent,
         LoginComponent,
+        StopClickDirective,
         VaultComponent,
         ViewComponent,
     ],

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

@@ -0,0 +1,20 @@
+import {
+    Directive,
+    ElementRef,
+    HostListener,
+    Input,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appFallbackSrc]'
+})
+export class FallbackSrcDirective {
+    @Input('appFallbackSrc') appFallbackSrc: string;
+
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('error') OnError() {
+        this.el.nativeElement.src = this.appFallbackSrc;
+    }
+}

src/app/directives/stop-click.directive.ts

@@ -0,0 +1,13 @@
+import {
+    Directive,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appStopClick]'
+})
+export class StopClickDirective {
+    @HostListener('click', ['$event']) onClick($event: MouseEvent) {
+        $event.preventDefault();
+    }
+}

src/app/directives/stop-prop.directive.ts

@@ -0,0 +1,13 @@
+import {
+    Directive,
+    HostListener,
+} from '@angular/core';
+
+@Directive({
+    selector: '[appStopProp]'
+})
+export class StopPropDirective {
+    @HostListener('click', ['$event']) onClick($event: MouseEvent) {
+        $event.stopPropagation();
+    }
+}

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"
+            <a *ngFor="let cipher of ciphers" appStopClick (click)="viewCipher(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

@@ -20,4 +20,8 @@ export class CiphersComponent implements OnChanges {
     ngOnChanges() {
         
     }
+
+    viewCipher(cipher: any) {
+        console.log(cipher.id);
+    }
 }

src/app/vault/icon.component.html

@@ -1,4 +1,4 @@
 <div class="icon">
-    <img [src]="image" *ngIf="imageEnabled && image" alt="" />
+    <img [src]="image" appFallbackSrc="{{fallbackImage}}" *ngIf="imageEnabled && image" alt="" />
     <i class="fa fa-fw fa-lg {{icon}}" *ngIf="!imageEnabled || !image"></i>
 </div>

src/app/vault/icon.component.ts

@@ -78,7 +78,7 @@ export class IconComponent implements OnChanges {
                 try {
                     const url = new URL(hostnameUri);
                     this.image = this.iconsUrl + '/' + url.hostname + '/icon.png';
-                    this.fallbackImage = '../images/fa-globe.png'; // TODO?
+                    this.fallbackImage = 'images/fa-globe.png';
                 } catch (e) { }
             }
         } else {

webpack.main.js

@@ -56,6 +56,7 @@ const main = {
         ]),
         new CopyWebpackPlugin([
             './src/package.json',
+            { from: './src/images', to: 'images' },
         ]),
     ],
     externals: [nodeExternals()]