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) {

src/scss/vault.scss

@@ -140,90 +140,21 @@
         min-height: 44px;
         max-height: 44px;
         background-color: $brand-primary;
-        color: white;
-        text-align: center;
-        overflow: hidden;
         flex: 0 0 auto;
         border-bottom: 1px solid darken($brand-primary, 7%);
-
-        a, button {
-            color: white !important;
-            text-decoration: none;
-            background: none;
-
-            &:hover, &:focus {
-                background-color: rgba(255, 255, 255, 0.1);
-            }
-
-            &:hover {
-                text-decoration: none;
-            }
-
-            &:focus {
-                text-decoration: underline;
-            }
-        }
-
-        .title {
-            font-weight: bold;
-            display: block;
-            padding: 12px 0;
-            text-align: center;
-        }
-
-        .left {
-            display: block;
-            position: absolute;
-            left: 0;
-            text-align: left;
-
-            a, button {
-                padding: 12px 10px;
-                display: block;
-                float: left;
-            }
-
-            .fa-spinner {
-                padding: 15px;
-                display: block;
-                float: left;
-            }
-        }
-
-        .right {
-            display: block;
-            right: 0;
-            position: absolute;
-            z-index: 99999;
-
-            a, button {
-                padding: 12px 10px;
-                display: block;
-                float: right;
-            }
-
-            .fa-spinner {
-                padding: 15px;
-                display: block;
-                float: right;
-            }
-        }
+        display: flex;
+        align-items: center;
 
         &.header-search {
-            .left, .right, .search {
-                display: table-cell;
-                position: relative;
-            }
-
             .search {
                 padding: 0 7px;
                 width: 100%;
                 text-align: left;
                 position: relative;
 
-                .fa-search {
+                .fa {
                     position: absolute;
-                    top: 15px;
+                    top: 7px;
                     left: 15px;
                     color: lighten($brand-primary, 30%);
                 }
@@ -231,7 +162,6 @@
                 input {
                     width: 100%;
                     margin: 0;
-                    float: none;
                     background: darken($brand-primary, 8%);
                     border: none;
                     color: white;
@@ -249,11 +179,6 @@
                     }
                 }
             }
-
-            a {
-                white-space: nowrap;
-                float: none;
-            }
         }
     }