From f828288b84fb1fdf3d073cc594a1c6a108fe088c Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 10 Oct 2017 21:55:58 -0400
Subject: [PATCH] icons for vault listing

---
 src/app/directives/fallbackSrcDirective.js |  11 ++++++++
 src/app/services/cipherService.js          |  31 ++++++++++++++++++++-
 src/app/vault/views/vault.html             |  10 +++++--
 src/app/vault/views/vaultShared.html       |   5 ++++
 src/images/fa-globe.png                    | Bin 0 -> 344 bytes
 src/index.html                             |   2 ++
 src/less/vault.less                        |   7 +++++
 7 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 src/app/directives/fallbackSrcDirective.js
 create mode 100644 src/images/fa-globe.png

diff --git a/src/app/directives/fallbackSrcDirective.js b/src/app/directives/fallbackSrcDirective.js
new file mode 100644
index 0000000000..1df1015e71
--- /dev/null
+++ b/src/app/directives/fallbackSrcDirective.js
@@ -0,0 +1,11 @@
+angular
+    .module('bit.directives')
+
+    .directive('fallbackSrc', function () {
+        return function (scope, element, attrs) {
+            var el = $(element);
+            el.bind('error', function (event) {
+                el.attr('src', attrs.fallbackSrc);
+            });
+        };
+    });
diff --git a/src/app/services/cipherService.js b/src/app/services/cipherService.js
index d99b4c6a0b..2d42e6081f 100644
--- a/src/app/services/cipherService.js
+++ b/src/app/services/cipherService.js
@@ -220,7 +220,36 @@ 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';
+                        cipher.meta.uri = _service.decryptProperty(cipherData.Uri, key, true, true);
+
+                        if (cipher.meta.uri) {
+                            var hostnameUri = cipher.meta.uri;
+
+                            if (hostnameUri.indexOf('androidapp://') === 0) {
+                                cipher.icon = 'fa-android';
+                            }
+                            else if (hostnameUri.indexOf('iosapp://') === 0) {
+                                cipher.icon = 'fa-apple';
+                            }
+                            else if (hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('http://') !== 0 &&
+                                hostnameUri.indexOf('https://') !== 0) {
+                                hostnameUri = "http://" + hostnameUri;
+                            }
+
+                            if (!cipher.icon && hostnameUri.indexOf('.') > 0) {
+                                try {
+                                    var url = new URL(hostnameUri);
+                                    if (url && url.hostname) {
+                                        cipher.meta.image = 'https://icons.bitwarden.com?url=' + url.hostname;
+                                    }
+                                }
+                                catch (e) { }
+                            }
+                        }
+
+                        if (!cipher.icon) {
+                            cipher.icon = 'fa-globe';
+                        }
                         break;
                     case constants.cipherType.secureNote:
                         cipher.subTitle = null;
diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index c9c8e668a6..8778d851a8 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -119,7 +119,9 @@
                                 <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>
+                                <i class="fa fa-fw fa-lg {{::cipher.icon}}" ng-if="!cipher.meta.image"></i>
+                                <img alt="" ng-if="cipher.meta.image" ng-src="{{cipher.meta.image}}"
+                                     fallback-src="images/fa-globe.png" />
                             </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
@@ -186,7 +188,7 @@
             <div class="table-responsive" ng-show="folderCiphers.length">
                 <table class="table table-striped table-hover table-vmiddle">
                     <tbody>
-                        <tr ng-repeat="cipher in folderCiphers = (ciphers | filter: { folderId: folder.id } | 
+                        <tr ng-repeat="cipher in folderCiphers = (ciphers | filter: { folderId: folder.id } |
                             filter: cipherFilter | filter: (main.searchVaultText || '')) track by cipher.id">
                             <td style="width: 70px;">
                                 <div class="btn-group" data-append-to="body">
@@ -232,7 +234,9 @@
                                 <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>
+                                <i class="fa fa-fw fa-lg {{::cipher.icon}}" ng-if="!cipher.meta.image"></i>
+                                <img alt="" ng-if="cipher.meta.image" ng-src="{{cipher.meta.image}}"
+                                     fallback-src="images/fa-globe.png" />
                             </td>
                             <td ng-click="select($event)">
                                 <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
diff --git a/src/app/vault/views/vaultShared.html b/src/app/vault/views/vaultShared.html
index b543d9e341..5969acf79b 100644
--- a/src/app/vault/views/vaultShared.html
+++ b/src/app/vault/views/vaultShared.html
@@ -87,6 +87,11 @@
                                     </ul>
                                 </div>
                             </td>
+                            <td class="vault-icon">
+                                <i class="fa fa-fw fa-lg {{::cipher.icon}}" ng-if="!cipher.meta.image"></i>
+                                <img alt="" ng-if="cipher.meta.image" ng-src="{{cipher.meta.image}}"
+                                     fallback-src="images/fa-globe.png" />
+                            </td>
                             <td>
                                 <a href="#" stop-click ng-click="editCipher(cipher)">{{cipher.name}}</a>
                                 <i class="fa fa-star text-muted" title="Favorite" ng-show="cipher.favorite"></i>
diff --git a/src/images/fa-globe.png b/src/images/fa-globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ba709fd1ae2a7f467f948e9c3a9d69c2da3afef
GIT binary patch
literal 344
zcmV-e0jK_nP)<h;3K|Lk000e1NJLTq000pH000pP1ONa4kz|i?0003WNkl<ZD9>e(
zze@u_5QX2JLgEilk#L|QLO>A_1jR~8Zy{(asnSHW{~8NRI}t2`h5taX3)l%_pGG7g
zB4Tj}M+&hB62e$yx$MPP&CGuL_RUI8gzQqIMa%=IL>d;$B((XYj?uv|t{L%xLyR&r
zjFV@TI}F2kAwO_1)?7V-(V;+{9>zUEKSRQa=Qzg=fy5TS7zdIlVZ5f6k_aWHsnW$r
z2*fRhksFF%ae0hL#2Cgx1~^LrV_R;;52oC4K!I-$DT!xSHdv9kq)W{MjCFCIHa~>y
zP|g6xq$qlAlYJr{y~$Jm^+x7aiz^mca*>ODBu|ooz9fk;VvYw(&hq9VRYFR%A^TOM
qT%<@$k9RioU*y>2hzfhm`}03sXXm+tt9(EJ0000<MNUMnLSTZve~bD6

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index 70bf618716..710d5ac8d9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,6 +25,7 @@
           img-src
             'self'
             data:
+            https://icons.bitwarden.com
             https://*.paypal.com
             https://www.paypalobjects.com
             https://q.stripe.com
@@ -173,6 +174,7 @@
     <script src="app/directives/stopClickDirective.js"></script>
     <script src="app/directives/stopPropDirective.js"></script>
     <script src="app/directives/totpDirective.js"></script>
+    <script src="app/directives/fallbackSrcDirective.js"></script>
 
     <script src="app/filters/filtersModule.js"></script>
     <script src="app/filters/enumNameFilter.js"></script>
diff --git a/src/less/vault.less b/src/less/vault.less
index e88335ca15..b965e400fd 100644
--- a/src/less/vault.less
+++ b/src/less/vault.less
@@ -432,6 +432,7 @@ form .btn .loading-icon {
 .table td.action-select {
     text-align: center;
     width: 30px;
+    max-width: 30px;
 
     @media (max-width: @screen-sm-max) {
         display: none;
@@ -441,8 +442,14 @@ form .btn .loading-icon {
 .table td.vault-icon {
     text-align: center;
     width: 41px;
+    max-width: 41px;
     color: @text-muted;
 
+    img {
+        max-width: 24px;
+        height: auto;
+    }
+
     @media (max-width: @screen-sm-max) {
         display: none;
     }