From fe9e29a0577e7928681cbd66de2ba4098eaff937 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 9 Oct 2017 10:42:26 -0400
Subject: [PATCH] cipher type icons

---
 src/app/services/cipherService.js        | 14 ++++++++++++--
 src/app/vault/views/vault.html           | 10 ++++++++--
 src/app/vault/views/vaultAddCipher.html  |  2 +-
 src/app/vault/views/vaultEditCipher.html |  2 +-
 src/less/vault.less                      | 10 ++++++++++
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/app/services/cipherService.js b/src/app/services/cipherService.js
index 19d826e741..7e2213408f 100644
--- a/src/app/services/cipherService.js
+++ b/src/app/services/cipherService.js
@@ -86,7 +86,8 @@ angular
                 favorite: encryptedCipher.Favorite,
                 edit: encryptedCipher.Edit,
                 organizationUseTotp: encryptedCipher.OrganizationUseTotp,
-                attachments: null
+                attachments: null,
+                icon: null
             };
 
             var cipherData = encryptedCipher.Data;
@@ -103,10 +104,12 @@ angular
                         dataObj.password = _service.decryptProperty(cipherData.Password, key, true, false);
                         dataObj.totp = _service.decryptProperty(cipherData.Totp, key, true, false);
                         cipher.login = dataObj;
+                        cipher.icon = 'fa-globe';
                         break;
                     case constants.cipherType.secureNote:
                         dataObj.type = cipherData.Type;
                         cipher.secureNote = dataObj;
+                        cipher.icon = 'fa-sticky-note-o';
                         break;
                     case constants.cipherType.card:
                         dataObj.cardholderName = _service.decryptProperty(cipherData.CardholderName, key, true, false);
@@ -116,6 +119,7 @@ angular
                         dataObj.expYear = _service.decryptProperty(cipherData.ExpYear, key, true, false);
                         dataObj.code = _service.decryptProperty(cipherData.Code, key, true, false);
                         cipher.card = dataObj;
+                        cipher.icon = 'fa-credit-card';
                         break;
                     case constants.cipherType.identity:
                         dataObj.title = _service.decryptProperty(cipherData.Title, key, true, false);
@@ -135,6 +139,7 @@ angular
                         dataObj.ssn = _service.decryptProperty(cipherData.SSN, key, true, false);
                         dataObj.username = _service.decryptProperty(cipherData.Username, key, true, false);
                         cipher.identity = dataObj;
+                        cipher.icon = 'fa-id-card-o';
                         break;
                     default:
                         break;
@@ -200,7 +205,8 @@ angular
                 edit: encryptedCipher.Edit,
                 organizationUseTotp: encryptedCipher.OrganizationUseTotp,
                 hasAttachments: !!encryptedCipher.Attachments && encryptedCipher.Attachments.length > 0,
-                meta: {}
+                meta: {},
+                icon: null
             };
 
             var cipherData = encryptedCipher.Data;
@@ -212,9 +218,11 @@ angular
                     case constants.cipherType.login:
                         cipher.subTitle = _service.decryptProperty(cipherData.Username, key, true, true);
                         cipher.meta.password = _service.decryptProperty(cipherData.Password, key, true, true);
+                        cipher.icon = 'fa-globe';
                         break;
                     case constants.cipherType.secureNote:
                         cipher.subTitle = null;
+                        cipher.icon = 'fa-sticky-note-o';
                         break;
                     case constants.cipherType.card:
                         cipher.subTitle = '';
@@ -229,6 +237,7 @@ angular
                             }
                             cipher.subTitle += ('*' + cipher.meta.number.substr(cipher.meta.number.length - 4));
                         }
+                        cipher.icon = 'fa-credit-card';
                         break;
                     case constants.cipherType.identity:
                         var firstName = _service.decryptProperty(cipherData.FirstName, key, true, true);
@@ -243,6 +252,7 @@ angular
                             }
                             cipher.subTitle += lastName;
                         }
+                        cipher.icon = 'fa-id-card-o';
                         break;
                     default:
                         break;
diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index 47b014cea9..c9c8e668a6 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -115,8 +115,11 @@
                                     </ul>
                                 </div>
                             </td>
-                            <td class="action-select">
-                                <input type="checkbox" value="{{::cipher.id}}" name="cipherSelection" />
+                            <td class="action-select" ng-click="select($event)">
+                                <input type="checkbox" value="{{::cipher.id}}" name="cipherSelection" stop-prop />
+                            </td>
+                            <td class="vault-icon" ng-click="select($event)">
+                                <i class="fa fa-fw fa-lg {{::cipher.icon}}"></i>
                             </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
@@ -228,6 +231,9 @@
                             <td class="action-select" ng-click="select($event)">
                                 <input type="checkbox" value="{{::cipher.id}}" name="cipherSelection" stop-prop />
                             </td>
+                            <td class="vault-icon" ng-click="select($event)">
+                                <i class="fa fa-fw fa-lg {{::cipher.icon}}"></i>
+                            </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
                                 <i class="fa fa-star text-muted" title="Favorite" ng-show="cipher.favorite" stop-prop></i>
diff --git a/src/app/vault/views/vaultAddCipher.html b/src/app/vault/views/vaultAddCipher.html
index 251e8fd041..5bcb2e1636 100644
--- a/src/app/vault/views/vaultAddCipher.html
+++ b/src/app/vault/views/vaultAddCipher.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    <h4 class="modal-title"><i class="fa fa-globe"></i> Add New Item</h4>
+    <h4 class="modal-title"><i class="fa fa-plus-circle"></i> Add New Item</h4>
 </div>
 <form name="form" ng-submit="form.$valid && save()" api-form="savePromise" autocomplete="off">
     <div class="modal-body">
diff --git a/src/app/vault/views/vaultEditCipher.html b/src/app/vault/views/vaultEditCipher.html
index 2ab25d9da5..5f70fc1a7b 100644
--- a/src/app/vault/views/vaultEditCipher.html
+++ b/src/app/vault/views/vaultEditCipher.html
@@ -1,7 +1,7 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="modal-title">
-        <i class="fa fa-globe"></i> Item Information <small>{{cipher.name}}</small>
+        <i class="fa {{cipher.icon}}"></i> Item Information <small>{{cipher.name}}</small>
     </h4>
 </div>
 <form name="form" ng-submit="form.$valid && save(cipher)" api-form="savePromise" autocomplete="off">
diff --git a/src/less/vault.less b/src/less/vault.less
index bb1861b529..e88335ca15 100644
--- a/src/less/vault.less
+++ b/src/less/vault.less
@@ -437,6 +437,16 @@ form .btn .loading-icon {
         display: none;
     }
 }
+
+.table td.vault-icon {
+    text-align: center;
+    width: 41px;
+    color: @text-muted;
+
+    @media (max-width: @screen-sm-max) {
+        display: none;
+    }
+}
 /* Callouts */
 .callout.callout-default {
     background-color: #fff;