search ciphers and cleanup ciphers header

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { IconComponent } from './vault/icon.component';
 import { LoginComponent } from './accounts/login.component';
 import { ModalComponent } from './modal.component';
 import { PasswordGeneratorComponent } from './vault/password-generator.component';
+import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
 import { StopClickDirective } from './directives/stop-click.directive';
 import { StopPropDirective } from './directives/stop-prop.directive';
 import { VaultComponent } from './vault/vault.component';
@@ -51,6 +52,7 @@ import { ViewComponent } from './vault/view.component';
         LoginComponent,
         ModalComponent,
         PasswordGeneratorComponent,
+        SearchCiphersPipe,
         StopClickDirective,
         StopPropDirective,
         VaultComponent,

src/app/pipes/search-ciphers.pipe.ts

@@ -0,0 +1,36 @@
+import {
+    Pipe,
+    PipeTransform,
+} from '@angular/core';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+@Pipe({
+    name: 'searchCiphers',
+})
+export class SearchCiphersPipe implements PipeTransform {
+    transform(ciphers: CipherView[], searchText: string): CipherView[] {
+        if (ciphers == null || ciphers.length === 0) {
+            return [];
+        }
+
+        if (searchText == null || searchText.length < 2) {
+            return ciphers;
+        }
+
+        searchText = searchText.toLowerCase();
+        return ciphers.filter(c => {
+            if (c.name != null && c.name.toLowerCase().indexOf(searchText) > -1) {
+                return true;
+            }
+            if (c.subTitle != null && c.subTitle.toLowerCase().indexOf(searchText) > -1) {
+                return true;
+            }
+            if (c.login && c.login.uri != null && c.login.uri.toLowerCase().indexOf(searchText) > -1) {
+                return true;
+            }
+
+            return false;
+        });
+    }
+}

src/app/vault/ciphers.component.html

@@ -1,17 +1,12 @@
 <div class="header header-search">
     <div class="search">
-        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search" />
+        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search" [(ngModel)]="searchText" />
         <i class="fa fa-search"></i>
     </div>
-    <div class="right">
-        <a href="" title="{{'addItem' | i18n}}" appBlurClick appStopClick (click)="addCipher()">
-            <i class="fa fa-plus fa-lg"></i>
-        </a>
-    </div>
 </div>
 <div class="content">
     <div class="list">
-        <a *ngFor="let c of ciphers" appStopClick (click)="cipherClicked(c)"
+        <a *ngFor="let c of ciphers | searchCiphers: searchText" appStopClick (click)="cipherClicked(c)"
            href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
             <app-vault-icon [cipher]="c"></app-vault-icon>
             <span class="text">

src/app/vault/ciphers.component.ts

@@ -22,6 +22,7 @@ export class CiphersComponent implements OnInit {
     @Output() onAddCipher = new EventEmitter();
 
     ciphers: CipherView[] = [];
+    searchText: string;
     private filter: (cipher: CipherView) => boolean = null;
 
     constructor(private cipherService: CipherService) {