icons for vault listing

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);
+            });
+        };
+    });

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.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;

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>
@@ -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>

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>

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>

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;
     }