format html files

src/app/accounts/login.component.html

@@ -15,10 +15,9 @@
                             class="monospaced" [(ngModel)]="masterPassword" required>
                     </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/app/accounts/register.component.html

@@ -19,12 +19,12 @@
                                 </strong>
                             </label>
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
-                                   name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword"
+                                name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
-                                   required [appAutofocus]="email !== ''" (input)="updatePasswordStrength()">
+                                [appAutofocus]="email !== ''" (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>
@@ -47,14 +47,12 @@
                     <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>
                     </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/app/accounts/settings.component.html

@@ -43,8 +43,8 @@
                         <div class="form-group">
                             <div class="checkbox">
                                 <label for="enableTray">
-                                    <input id="enableTray" type="checkbox" name="EnableTray"
+                                    <input id="enableTray" type="checkbox" name="EnableTray" [(ngModel)]="enableTray"
-                                           [(ngModel)]="enableTray" (change)="saveTray()">
+                                        (change)="saveTray()">
                                     {{'enableTray' | i18n}}
                                 </label>
                             </div>
@@ -73,8 +73,8 @@
                         <div class="form-group" *ngIf="showMinToTray">
                             <div class="checkbox">
                                 <label for="startToTray">
-                                    <input id="startToTray" type="checkbox" name="StartToTray"
+                                    <input id="startToTray" type="checkbox" name="StartToTray" [(ngModel)]="startToTray"
-                                           [(ngModel)]="startToTray" (change)="saveStartToTray()">
+                                        (change)="saveStartToTray()">
                                     {{'startToTray' | i18n}}
                                 </label>
                             </div>

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

@@ -55,8 +55,7 @@
             </div>
         </div>
         <div class="buttons">
-            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick
+            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
-                    *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo && 
                         selectedProviderType !== providerType.OrganizationDuo">
                 <span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
                 <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>

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

@@ -85,9 +85,8 @@
                         <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">
-                                       [(ngModel)]="cipher.card.code">
                             </div>
                             <div class="action-buttons">
                                 <a class="row-btn" href="#" appStopClick appBlurClick
@@ -211,8 +210,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>
@@ -280,9 +279,9 @@
                                     name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
                                     *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"
-                                   appTrueFalseValue trueValue="true" falseValue="false">
+                                falseValue="false">
                             <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
                                 <a class="row-btn" href="#" appStopClick appBlurClick
                                     title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
@@ -325,8 +324,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">
@@ -348,9 +347,8 @@
                 *ngIf="editMode && cipher && !cipher.organizationId">
                 <i class="fa fa-share-alt fa-lg fa-fw"></i>
             </button>
-            <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger"
+            <button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}"
-                    title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                *ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
-                    [appApiAction]="deletePromise">
                 <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
                 <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
             </button>

src/app/vault/ciphers.component.html

@@ -8,16 +8,13 @@
 <div class="content">
     <ng-container *ngIf="ciphers">
         <div class="list" *ngIf="ciphers.length > 0">
-            <a *ngFor="let c of ciphers" appStopClick (click)="selectCipher(c)"
+            <a *ngFor="let c of ciphers" appStopClick (click)="selectCipher(c)" (contextmenu)="rightClickCipher(c)"
-               (contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
+                href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
-               [ngClass]="{'active': c.id === activeCipherId}">
                 <app-vault-icon [cipher]="c"></app-vault-icon>
                 <span class="text">
                     {{c.name}}
-                    <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId"
+                    <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
-                       title="{{'shared' | i18n}}"></i>
+                    <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
-                    <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments"
-                       title="{{'attachments' | i18n}}"></i>
                 </span>
                 <span class="detail">{{c.subTitle}}</span>
             </a>
@@ -33,8 +30,8 @@
     </ng-container>
 </div>
 <div class="footer">
-    <button appBlurClick (click)="addCipher()" (contextmenu)="addCipherOptions()"
+    <button appBlurClick (click)="addCipher()" (contextmenu)="addCipherOptions()" class="block primary"
-            class="block primary" title="{{'addItem' | i18n}}">
+        title="{{'addItem' | i18n}}">
         <i class="fa fa-plus fa-lg"></i>
     </button>
 </div>

src/app/vault/groupings.component.html

@@ -48,10 +48,8 @@
                     <li *ngFor="let f of folders"
                         [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
                         <a href="#" appStopClick appBlurClick (click)="selectFolder(f.node)">
-                            <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
+                            <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(f.node),
-                                [ngClass]="{'fa-caret-right': isCollapsed(f.node),
+                                    'fa-caret-down': !isCollapsed(f.node)}" (click)="collapse(f.node)" appStopProp></i>
-                                    'fa-caret-down': !isCollapsed(f.node)}"
-                                (click)="collapse(f.node)" appStopProp></i>
                             {{f.node.name}}
                             <span appStopProp appStopClick (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}"
                                 *ngIf="f.node.id">
@@ -59,13 +57,12 @@
                             </span>
                         </a>
                         <ul class="fa-ul" *ngIf="f.children.length && !isCollapsed(f.node)">
-                            <ng-container
+                            <ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }">
-                                *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
+                            </ng-container>
                         </ul>
                     </li>
                 </ng-template>
-                <ng-container
+                <ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
-                    *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
             </ul>
             <div *ngIf="collections && collections.length">
                 <h2>{{'collections' | i18n}}</h2>
@@ -73,10 +70,9 @@
                     <ng-template #recursiveCollections let-collections>
                         <li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
                             <a href="#" appStopClick appBlurClick (click)="selectCollection(c.node)">
-                                <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}"
+                                <i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(c.node),
-                                    [ngClass]="{'fa-caret-right': isCollapsed(c.node),
+                                        'fa-caret-down': !isCollapsed(c.node)}" (click)="collapse(c.node)"
-                                        'fa-caret-down': !isCollapsed(c.node)}"
+                                    appStopProp></i>
-                                    (click)="collapse(c.node)" appStopProp></i>
                                 {{c.node.name}}
                             </a>
                             <ul class="fa-ul" *ngIf="c.children.length && !isCollapsed(c.node)">
@@ -86,8 +82,7 @@
                             </ul>
                         </li>
                     </ng-template>
-                    <ng-container
+                    <ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
-                        *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }">
                     </ng-container>
                 </ul>
             </div>

src/app/vault/password-generator.component.html

@@ -5,12 +5,10 @@
                 <div class="password-block" [innerHTML]="password | colorPassword" appFlexCopy></div>
                 <div class="box">
                     <div class="box-content condensed">
-                        <a class="box-content-row" href="#" appStopClick appBlurClick
+                        <a class="box-content-row" href="#" appStopClick appBlurClick (click)="regenerate()">
-                           (click)="regenerate()">
                             <i class="fa fa-fw fa-refresh"></i> {{'regeneratePassword' | i18n}}
                         </a>
-                        <a class="box-content-row" href="#" appStopClick appBlurClick
+                        <a class="box-content-row" href="#" appStopClick appBlurClick (click)="copy()">
-                           (click)="copy()">
                             <i class="fa fa-fw fa-clipboard"></i> {{'copyPassword' | i18n}}
                         </a>
                     </div>
@@ -55,8 +53,7 @@
                                 <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"
-                                        [(ngModel)]="options.length" (change)="sliderChanged()"
+                                    [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
-                                        (input)="sliderInput()">
                             </div>
                             <div class="box-content-row box-content-row-checkbox" appBoxRow>
                                 <label for="uppercase">A-Z</label>

src/app/vault/vault.component.html

@@ -1,39 +1,24 @@
 <div id="vault">
-    <app-vault-groupings id="groupings"
+    <app-vault-groupings id="groupings" (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"
-                         (onAllClicked)="clearGroupingFilters()"
+        (onCipherTypeClicked)="filterCipherType($event)" (onFolderClicked)="filterFolder($event.id)"
-                         (onFavoritesClicked)="filterFavorites()"
+        (onAddFolder)="addFolder()" (onEditFolder)="editFolder($event.id)"
-                         (onCipherTypeClicked)="filterCipherType($event)"
-                         (onFolderClicked)="filterFolder($event.id)"
-                         (onAddFolder)="addFolder()"
-                         (onEditFolder)="editFolder($event.id)"
         (onCollectionClicked)="filterCollection($event.id)">
     </app-vault-groupings>
-    <app-vault-ciphers id="items"
+    <app-vault-ciphers id="items" [activeCipherId]="cipherId" (onCipherClicked)="viewCipher($event)"
-                       [activeCipherId]="cipherId"
+        (onCipherRightClicked)="viewCipherMenu($event)" (onAddCipher)="addCipher($event)"
-                       (onCipherClicked)="viewCipher($event)"
-                       (onCipherRightClicked)="viewCipherMenu($event)"
-                       (onAddCipher)="addCipher($event)"
         (onAddCipherOptions)="addCipherOptions()">
     </app-vault-ciphers>
-    <app-vault-view id="details"
+    <app-vault-view id="details" *ngIf="cipherId && action === 'view'" [cipherId]="cipherId"
-                    *ngIf="cipherId && action === 'view'"
+        (onEditCipher)="editCipher($event)" (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)">
-                    [cipherId]="cipherId"
-                    (onEditCipher)="editCipher($event)"
-                    (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)">
     </app-vault-view>
-    <app-vault-add-edit id="details"
+    <app-vault-add-edit id="details" *ngIf="action === 'add' || action === 'edit'"
-                        *ngIf="action === 'add' || action === 'edit'"
         [folderId]="action === 'add' && folderId !== 'none' ? folderId : null"
         [organizationId]="action === 'add' ? addOrganizationId : null"
         [collectionIds]="action === 'add' ? addCollectionIds : null"
-                        [type]="action === 'add' ? (addType ? addType : type) : null"
+        [type]="action === 'add' ? (addType ? addType : type) : null" [cipherId]="action === 'edit' ? cipherId : null"
-                        [cipherId]="action === 'edit' ? cipherId : null"
+        (onSavedCipher)="savedCipher($event)" (onDeletedCipher)="deletedCipher($event)"
-                        (onSavedCipher)="savedCipher($event)"
+        (onEditAttachments)="editCipherAttachments($event)" (onCancelled)="cancelledAddEdit($event)"
-                        (onDeletedCipher)="deletedCipher($event)"
+        (onShareCipher)="shareCipher($event)" (onEditCollections)="cipherCollections($event)"
-                        (onEditAttachments)="editCipherAttachments($event)"
-                        (onCancelled)="cancelledAddEdit($event)"
-                        (onShareCipher)="shareCipher($event)"
-                        (onEditCollections)="cipherCollections($event)"
         (onGeneratePassword)="openPasswordGenerator(true)">
     </app-vault-add-edit>
     <div id="logo" *ngIf="action !== 'add' && action !== 'edit' && action !== 'view'">

src/app/vault/view.component.html

@@ -177,8 +177,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}}"
@@ -238,8 +238,8 @@
             </div>
             <div class="box-content">
                 <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
-                   href="#" appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
+                    (click)="downloadAttachment(attachment)">
                     <span class="row-main">{{attachment.fileName}}</span>
                     <small class="row-sub-label">{{attachment.sizeName}}</small>
                     <i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading"></i>