format html files

src/popup/accounts/lock.component.html

@@ -14,8 +14,8 @@
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main" *ngIf="pinLock">
                         <label for="pin">{{'pin' | i18n}}</label>
-                        <input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN"
+                        <input id="pin" type="{{showPassword ? 'text' : 'password'}}" name="PIN" class="monospaced"
-                               class="monospaced" [(ngModel)]="pin" required appInputVerbatim>
+                            [(ngModel)]="pin" required appInputVerbatim>
                     </div>
                     <div class="row-main" *ngIf="!pinLock">
                         <label for="masterPassword">{{'masterPass' | i18n}}</label>
@@ -23,10 +23,9 @@
                             class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            (click)="togglePassword()">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
                 </div>

src/popup/accounts/login.component.html

@@ -18,8 +18,8 @@
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="email">{{'emailAddress' | i18n}}</label>
-                    <input id="email" type="text" name="Email" [(ngModel)]="email" required
+                    <input id="email" type="text" name="Email" [(ngModel)]="email" required inputmode="email"
-                           inputmode="email" appInputVerbatim="false">
+                        appInputVerbatim="false">
                 </div>
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main">
@@ -28,10 +28,9 @@
                             class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            (click)="togglePassword()">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
                 </div>

src/popup/accounts/register.component.html

@@ -36,8 +36,8 @@
                                 [appAutofocus]="email !== ''" appInputVerbatim (input)="updatePasswordStrength()">
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                                title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                (click)="togglePassword(false)">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </a>
@@ -60,14 +60,13 @@
                     <div class="row-main">
                         <label for="masterPasswordRetype">{{'reTypeMasterPass' | i18n}}</label>
                         <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
-                               name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword"
+                            name="MasterPasswordRetype" class="monospaced" [(ngModel)]="confirmMasterPassword" required
-                               required appInputVerbatim>
+                            appInputVerbatim>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword(true)">
+                            (click)="togglePassword(true)">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
                 </div>

src/popup/accounts/two-factor-options.component.html

@@ -10,8 +10,7 @@
 <content>
     <div class="box">
         <div class="box-content">
-            <a href="#" appStopClick *ngFor="let p of providers" class="box-content-row"
+            <a href="#" appStopClick *ngFor="let p of providers" class="box-content-row" (click)="choose(p)">
-               (click)="choose(p)">
                 <span class="text">{{p.name}}</span>
                 <span class="detail">{{p.description}}</span>
             </a>

src/popup/accounts/two-factor.component.html

@@ -7,8 +7,7 @@
             <span class="title">{{title}}</span>
         </div>
         <div class="right">
-            <button type="submit" appBlurClick [disabled]="form.loading"
+            <button type="submit" appBlurClick [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
-                    *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
                         selectedProviderType !== providerType.OrganizationDuo &&
                         (selectedProviderType !== providerType.U2f || form.loading)">
                 <span [hidden]="form.loading">{{'continue' | i18n}}</span>

src/popup/components/action-buttons.component.html

@@ -2,30 +2,26 @@
     <i class="fa fa-lg fa-list-alt"></i>
 </span>
 <ng-container *ngIf="cipher.type === cipherType.Login">
-    <span class="row-btn" appStopClick appStopProp title="{{'launch' | i18n}}" (click)="launch()"
+    <span class="row-btn" appStopClick appStopProp title="{{'launch' | i18n}}" (click)="launch()" *ngIf="!showView"
-          *ngIf="!showView" [ngClass]="{disabled: !cipher.login.canLaunch}">
+        [ngClass]="{disabled: !cipher.login.canLaunch}">
         <i class="fa fa-lg fa-share-square-o"></i>
     </span>
     <span class="row-btn" appStopClick appStopProp title="{{'copyUsername' | i18n}}"
-          (click)="copy(cipher.login.username, 'username', 'Username')"
+        (click)="copy(cipher.login.username, 'username', 'Username')" [ngClass]="{disabled: !cipher.login.username}">
-          [ngClass]="{disabled: !cipher.login.username}">
         <i class="fa fa-lg fa-user"></i>
     </span>
     <span class="row-btn" appStopClick appStopProp title="{{'copyPassword' | i18n}}"
-          (click)="copy(cipher.login.password, 'password', 'Password')"
+        (click)="copy(cipher.login.password, 'password', 'Password')" [ngClass]="{disabled: !cipher.login.password}">
-          [ngClass]="{disabled: !cipher.login.password}">
         <i class="fa fa-lg fa-key"></i>
     </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.Card">
     <span class="row-btn" appStopClick appStopProp title="{{'copyNumber' | i18n}}"
-          (click)="copy(cipher.card.number, 'number', 'Card Number')"
+        (click)="copy(cipher.card.number, 'number', 'Card Number')" [ngClass]="{disabled: !cipher.card.number}">
-          [ngClass]="{disabled: !cipher.card.number}">
         <i class="fa fa-lg fa-hashtag"></i>
     </span>
     <span class="row-btn" appStopClick appStopProp title="{{'copySecurityCode' | i18n}}"
-          (click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
+        (click)="copy(cipher.card.code, 'securityCode', 'Security Code')" [ngClass]="{disabled: !cipher.card.code}">
-          [ngClass]="{disabled: !cipher.card.code}">
         <i class="fa fa-lg fa-key"></i>
     </span>
 </ng-container>

src/popup/components/ciphers-list.component.html

@@ -1,5 +1,5 @@
-<a *ngFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="doubleSelectCipher(c)"
+<a *ngFor="let c of ciphers" (click)="selectCipher(c)" (dblclick)="doubleSelectCipher(c)" href="#" appStopClick
-   href="#" appStopClick title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
+    title="{{title}} - {{c.name}}" class="box-content-row box-content-row-flex">
     <div class="row-main">
         <app-vault-icon [cipher]="c"></app-vault-icon>
         <div class="row-main-content">

src/popup/generator/password-generator.component.html

@@ -63,8 +63,8 @@
                     <label for="length">{{'length' | i18n}}</label>
                     <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
                         (blur)="saveOptions()">
-                    <input id="lengthRange" type="range" min="5" max="128" step="1"
+                    <input id="lengthRange" type="range" min="5" max="128" step="1" [(ngModel)]="options.length"
-                        [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
+                        (change)="sliderChanged()" (input)="sliderInput()">
                 </div>
                 <div class="box-content-row box-content-row-checkbox" appBoxRow>
                     <label for="uppercase">A-Z</label>

src/popup/settings/export.component.html

@@ -30,10 +30,9 @@
                             class="monospaced" [(ngModel)]="masterPassword" required appInputVerbatim appAutofocus>
                     </div>
                     <div class="action-buttons">
-                        <a class="row-btn" href="#" appStopClick appBlurClick
+                        <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                           title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                            (click)="togglePassword()">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                     </div>
                 </div>

src/popup/settings/folder-add-edit.component.html

@@ -18,15 +18,14 @@
             <div class="box-content">
                 <div class="box-content-row" appBoxRow>
                     <label for="name">{{'name' | i18n}}</label>
-                    <input id="name" type="text" name="Name" [(ngModel)]="folder.name"
+                    <input id="name" type="text" name="Name" [(ngModel)]="folder.name" [appAutofocus]="!editMode">
-                           [appAutofocus]="!editMode">
                 </div>
             </div>
         </div>
         <div class="box list" *ngIf="editMode">
             <div class="box-content single-line">
-                <a class="box-content-row" href="#" appStopClick appBlurClick
+                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
-                   (click)="delete()" [appApiAction]="deletePromise" #deleteBtn>
+                    [appApiAction]="deletePromise" #deleteBtn>
                     <div class="row-main text-danger">
                         <div class="icon text-danger">
                             <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>

src/popup/settings/settings.component.html

@@ -35,13 +35,13 @@
                 <label for="pin">{{'unlockWithPin' | i18n}}</label>
                 <input id="pin" type="checkbox" (change)="updatePin()" [(ngModel)]="pin">
             </div>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="lock()">
+                (click)="lock()">
                 <div class="row-main">{{'lockNow' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="twoStep()">
+                (click)="twoStep()">
                 <div class="row-main">{{'twoStepLogin' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
@@ -57,18 +57,18 @@
                 </div>
                 <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="changePassword()">
+                (click)="changePassword()">
                 <div class="row-main">{{'changeMasterPassword' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="fingerprint()">
+                (click)="fingerprint()">
                 <div class="row-main">{{'fingerprintPhrase' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="logOut()">
+                (click)="logOut()">
                 <div class="row-main">{{'logOut' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
@@ -77,23 +77,23 @@
     <div class="box list">
         <div class="box-header">{{'tools' | i18n}}</div>
         <div class="box-content single-line">
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="import()">
+                (click)="import()">
                 <div class="row-main">{{'importItems' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="export()">
+                (click)="export()">
                 <div class="row-main">{{'exportVault' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="share()">
+                (click)="share()">
                 <div class="row-main">{{'shareVault' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="webVault()">
+                (click)="webVault()">
                 <div class="row-main">{{'bitWebVault' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
@@ -106,18 +106,18 @@
                 <div class="row-main">{{'options' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="about()">
+                (click)="about()">
                 <div class="row-main">{{'about' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="help()">
+                (click)="help()">
                 <div class="row-main">{{'helpFeedback' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>
-            <a class="box-content-row box-content-row-flex text-default" href="#"
+            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
-               appStopClick appBlurClick (click)="rate()">
+                (click)="rate()">
                 <div class="row-main">{{'rateExtension' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon"></i>
             </a>

src/popup/settings/sync.component.html

@@ -12,8 +12,8 @@
 </header>
 <content>
     <div class="content center-content">
-        <button type="button" class="btn block primary" (click)="sync()" #syncBtn
+        <button type="button" class="btn block primary" (click)="sync()" #syncBtn [disabled]="syncBtn.loading"
-                [disabled]="syncBtn.loading" [appApiAction]="syncPromise">
+            [appApiAction]="syncPromise">
             <span [hidden]="syncBtn.loading">{{'syncVaultNow' | i18n}}</span>
             <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!syncBtn.loading"></i>
         </button>

src/popup/vault/add-edit.component.html

@@ -33,15 +33,14 @@
                 <div *ngIf="cipher.type === cipherType.Login">
                     <div class="box-content-row" appBoxRow>
                         <label for="loginUsername">{{'username' | i18n}}</label>
-                        <input id="loginUsername" type="text" name="Login.Username"
+                        <input id="loginUsername" type="text" name="Login.Username" [(ngModel)]="cipher.login.username"
-                               [(ngModel)]="cipher.login.username" inputmode="email" appInputVerbatim>
+                            inputmode="email" appInputVerbatim>
                     </div>
                     <div class="box-content-row box-content-row-flex" appBoxRow>
                         <div class="row-main">
                             <label for="loginPassword">{{'password' | i18n}}</label>
-                            <input id="loginPassword" class="monospaced"
+                            <input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}"
-                                   type="{{showPassword ? 'text' : 'password'}}" name="Login.Password"
+                                name="Login.Password" [(ngModel)]="cipher.login.password" appInputVerbatim>
-                                   [(ngModel)]="cipher.login.password" appInputVerbatim>
                         </div>
                         <div class="action-buttons">
                             <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
@@ -50,13 +49,13 @@
                                 <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
                                 <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
                             </button>
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                               title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                (click)="togglePassword()">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </a>
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'generatePassword' | i18n}}"
-                               title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
+                                (click)="generatePassword()">
                                 <i class="fa fa-lg fa-refresh"></i>
                             </a>
                         </div>
@@ -99,13 +98,12 @@
                     <div class="box-content-row box-content-row-flex" appBoxRow>
                         <div class="row-main">
                             <label for="cardCode">{{'securityCode' | i18n}}</label>
-                            <input id="cardCode" class="monospaced"
+                            <input id="cardCode" class="monospaced" type="{{showCardCode ? 'text' : 'password'}}"
-                                   type="{{showCardCode ? 'text' : 'password'}}" name="Card.Code"
+                                name="Card.Code" [(ngModel)]="cipher.card.code" appInputVerbatim>
-                                   [(ngModel)]="cipher.card.code" appInputVerbatim>
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                               title="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
+                                (click)="toggleCardCode()">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                             </a>
@@ -142,8 +140,7 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idCompany">{{'company' | i18n}}</label>
-                        <input id="idCompany" type="text" name="Identity.Company"
+                        <input id="idCompany" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
-                               [(ngModel)]="cipher.identity.company">
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idSsn">{{'ssn' | i18n}}</label>
@@ -199,8 +196,7 @@
                     </div>
                     <div class="box-content-row" appBoxRow>
                         <label for="idCountry">{{'country' | i18n}}</label>
-                        <input id="idCountry" type="text" name="Identity.Country"
+                        <input id="idCountry" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
-                               [(ngModel)]="cipher.identity.country">
                     </div>
                 </div>
             </div>
@@ -216,8 +212,7 @@
                         <div class="row-main">
                             <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                             <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
-                                   placeholder="{{'ex' | i18n}} https://google.com" inputmode="url"
+                                placeholder="{{'ex' | i18n}} https://google.com" inputmode="url" appInputVerbatim>
-                                   appInputVerbatim>
                             <label for="loginUriMatch{{i}}" class="sr-only">
                                 {{'matchDetection' | i18n}} {{(i + 1)}}
                             </label>
@@ -228,8 +223,8 @@
                             </select>
                         </div>
                         <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleOptions' | i18n}}"
-                               title="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
+                                (click)="toggleUriOptions(u)">
                                 <i class="fa fa-lg fa-cog"></i>
                             </a>
                         </div>
@@ -298,12 +293,11 @@
                                 name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
                                 *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
                         </div>
-                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
+                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
-                               [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean"
+                            *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
-                               appTrueFalseValue trueValue="true" falseValue="false">
                         <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
-                            <a class="row-btn" href="#" appStopClick appBlurClick
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                               title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
+                                (click)="toggleFieldValue(f)">
                                 <i class="fa fa-lg"
                                     [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                             </a>
@@ -343,8 +337,8 @@
                 {{'noCollectionsInList' | i18n}}
             </div>
             <div class="box-content" *ngIf="collections && collections.length">
-                <div class="box-content-row box-content-row-checkbox"
+                <div class="box-content-row box-content-row-checkbox" *ngFor="let c of collections; let i = index"
-                    *ngFor="let c of collections; let i = index" appBoxRow>
+                    appBoxRow>
                     <label for="collection_{{i}}">{{c.name}}</label>
                     <input id="collection_{{i}}" type="checkbox" [(ngModel)]="c.checked"
                         name="Collection[{{i}}].Checked">
@@ -362,8 +356,8 @@
                         <span>{{'shareItem' | i18n}}</span>
                     </div>
                 </a>
-                <a class="box-content-row" href="#" appStopClick appBlurClick
+                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
-                   (click)="delete()" [appApiAction]="deletePromise" #deleteBtn>
+                    [appApiAction]="deletePromise" #deleteBtn>
                     <div class="row-main text-danger">
                         <div class="icon text-danger">
                             <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>

src/popup/vault/ciphers.component.html

@@ -23,8 +23,8 @@
                 {{'folders' | i18n}}
             </div>
             <div class="box-content single-line">
-                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row"
+                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
-                    appStopClick appBlurClick (click)="selectFolder(f.node)">
+                    (click)="selectFolder(f.node)">
                     <div class="row-main">
                         <div class="icon">
                             <i class="fa fa-fw fa-lg"
@@ -41,8 +41,8 @@
                 {{'collections' | i18n}}
             </div>
             <div class="box-content single-line">
-                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
+                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
-                appStopClick appBlurClick (click)="selectCollection(c.node)">
+                    (click)="selectCollection(c.node)">
                     <div class="row-main">
                         <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
                         <span class="text">{{c.node.name}}</span>
@@ -62,17 +62,16 @@
                 </button>
             </ng-container>
         </div>
-        <div class="box list only-list" *ngIf="filteredCiphers.length > 0"
+        <div class="box list only-list" *ngIf="filteredCiphers.length > 0" infiniteScroll [infiniteScrollDistance]="1"
-            infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollContainer]="'content'" [fromRoot]="true"
+            [infiniteScrollContainer]="'content'" [fromRoot]="true" [infiniteScrollDisabled]="!isPaging()"
-            [infiniteScrollDisabled]="!isPaging()" (scrolled)="loadMore()">
+            (scrolled)="loadMore()">
             <div class="box-header">
                 {{groupingTitle}}
                 <span class="flex-right">{{isSearching() ? filteredCiphers.length : ciphers.length}}</span>
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="filteredCiphers" title="{{'viewItem' | i18n}}"
-                                  (onSelected)="selectCipher($event)"
+                    (onSelected)="selectCipher($event)" (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
-                                  (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
             </div>
         </div>
     </ng-container>

src/popup/vault/current-tab.component.html

@@ -6,8 +6,8 @@
         </button>
     </div>
     <div class="search">
-        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search"
+        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search" [(ngModel)]="searchText"
-               [(ngModel)]="searchText" (input)="searchVault()">
+            (input)="searchVault()">
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
@@ -28,8 +28,8 @@
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="loginCiphers" title="{{'autoFill' | i18n}}" [showView]="true"
-                                  (onSelected)="fillCipher($event)" (onView)="viewCipher($event)"
+                    (onSelected)="fillCipher($event)" (onView)="viewCipher($event)" *ngIf="loginCiphers.length">
-                                  *ngIf="loginCiphers.length"></app-ciphers-list>
+                </app-ciphers-list>
                 <div class="box-content-row padded no-hover" *ngIf="!loginCiphers.length">
                     <p class="text-center">{{'autoFillInfo' | i18n}}</p>
                     <button type="button" class="btn primary link block" (click)="addCipher()">

src/popup/vault/groupings.component.html

@@ -3,8 +3,8 @@
         <app-pop-out></app-pop-out>
     </div>
     <div class="search">
-        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search"
+        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search" [(ngModel)]="searchText"
-               [(ngModel)]="searchText" (input)="search(200)" appAutofocus>
+            (input)="search(200)" appAutofocus>
         <i class="fa fa-search"></i>
     </div>
     <div class="right">
@@ -30,8 +30,7 @@
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="favoriteCiphers" title="{{'viewItem' | i18n}}"
-                                  (onSelected)="selectCipher($event)"
+                    (onSelected)="selectCipher($event)" (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
-                                  (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
             </div>
         </div>
         <div class="box list">
@@ -40,8 +39,7 @@
                 <span class="flex-right">4</span>
             </div>
             <div class="box-content single-line">
-                <a href="#" class="box-content-row" appStopClick appBlurClick
+                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
-                   (click)="selectType(cipherType.Login)">
                     <div class="row-main">
                         <div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
                         <span class="text">{{'typeLogin' | i18n}}</span>
@@ -49,8 +47,7 @@
                     <span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
                     <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                 </a>
-                <a href="#" class="box-content-row" appStopClick appBlurClick
+                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
-                   (click)="selectType(cipherType.Card)">
                     <div class="row-main">
                         <div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
                         <span class="text">{{'typeCard' | i18n}}</span>
@@ -58,8 +55,7 @@
                     <span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
                     <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
                 </a>
-                <a href="#" class="box-content-row" appStopClick appBlurClick
+                <a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
-                   (click)="selectType(cipherType.Identity)">
                     <div class="row-main">
                         <div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
                         <span class="text">{{'typeIdentity' | i18n}}</span>
@@ -84,8 +80,8 @@
                 <span class="flex-right">{{folderCount}}</span>
             </div>
             <div class="box-content single-line">
-                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row"
+                <a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
-                   appStopClick appBlurClick (click)="selectFolder(f.node)">
+                    (click)="selectFolder(f.node)">
                     <div class="row-main">
                         <div class="icon">
                             <i class="fa fa-fw fa-lg"
@@ -104,8 +100,8 @@
                 <span class="flex-right">{{nestedCollections.length}}</span>
             </div>
             <div class="box-content single-line">
-                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row"
+                <a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
-                   appStopClick appBlurClick (click)="selectCollection(c.node)">
+                    (click)="selectCollection(c.node)">
                     <div class="row-main">
                         <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
                         <span class="text">{{c.node.name}}</span>
@@ -122,8 +118,7 @@
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="noFolderCiphers" title="{{'viewItem' | i18n}}"
-                                  (onSelected)="selectCipher($event)"
+                    (onSelected)="selectCipher($event)" (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
-                                  (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
             </div>
         </div>
     </ng-container>
@@ -133,8 +128,7 @@
         </div>
         <div class="box list full-list" *ngIf="ciphers && ciphers.length > 0">
             <div class="box-content">
-                <app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}"
+                <app-ciphers-list [ciphers]="ciphers" title="{{'viewItem' | i18n}}" (onSelected)="selectCipher($event)"
-                                  (onSelected)="selectCipher($event)"
                     (onDoubleSelected)="launchCipher($event)"></app-ciphers-list>
             </div>
         </div>

src/popup/vault/share.component.html

@@ -40,8 +40,8 @@
                 {{'noCollectionsInList' | i18n}}
             </div>
             <div class="box-content" *ngIf="collections && collections.length">
-                <div class="box-content-row box-content-row-checkbox"
+                <div class="box-content-row box-content-row-checkbox" *ngFor="let c of collections; let i = index"
-                    *ngFor="let c of collections; let i = index" appBoxRow>
+                    appBoxRow>
                     <label for="collection_{{i}}">{{c.name}}</label>
                     <input id="collection_{{i}}" type="checkbox" [(ngModel)]="c.checked"
                         name="Collection[{{i}}].Checked">

src/popup/vault/view.component.html

@@ -50,8 +50,7 @@
                         </button>
                         <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
                             (click)="togglePassword()">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                               [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                         </a>
                         <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"
                             (click)="copy(cipher.login.password, 'password', 'Password')">
@@ -118,8 +117,7 @@
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
                             (click)="toggleCardCode()">
-                            <i class="fa fa-lg"
+                            <i class="fa fa-lg" [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
-                               [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                         </a>
                         <a class="row-btn" href="#" appStopClick title="{{'copySecurityCode' | i18n}}"
                             (click)="copy(cipher.card.code, 'securityCode', 'Security Code')">
@@ -187,8 +185,8 @@
                     <span title="{{u.uri}}">{{u.hostnameOrUri}}</span>
                 </div>
                 <div class="action-buttons">
-                    <a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}"
+                    <a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}" *ngIf="u.canLaunch"
-                       *ngIf="u.canLaunch" (click)="launch(u)">
+                        (click)="launch(u)">
                         <i class="fa fa-lg fa-share-square-o"></i>
                     </a>
                     <a class="row-btn" href="#" appStopClick title="{{'copyUri' | i18n}}"
@@ -247,8 +245,7 @@
             {{'attachments' | i18n}}
         </div>
         <div class="box-content">
-            <a class="box-content-row box-content-row-flex text-default"
+            <a class="box-content-row box-content-row-flex text-default" *ngFor="let attachment of cipher.attachments"
-               *ngFor="let attachment of cipher.attachments"
                 href="#" appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
                 <span class="row-main">{{attachment.fileName}}</span>
                 <small class="row-sub-label">{{attachment.sizeName}}</small>
@@ -269,8 +266,8 @@
             </div>
             <div *ngIf="cipher.hasPasswordHistory">
                 <b class="font-weight-semibold">{{'passwordHistory' | i18n}}:</b>
-                <a routerLink="/cipher-password-history" [queryParams]="{cipherId: cipher.id}"
+                <a routerLink="/cipher-password-history" [queryParams]="{cipherId: cipher.id}" appStopClick
-                   appStopClick title="{{'passwordHistory' | i18n}}">
+                    title="{{'passwordHistory' | i18n}}">
                     {{cipher.passwordHistory.length}}
                 </a>
             </div>