icon component updates for all cipher types

src/popup/app/components/iconComponent.js

@@ -3,25 +3,76 @@ angular
 
     .component('icon', {
         bindings: {
-            uri: '<'
+            cipher: '<'
         },
-        template: '<div class="icon" ng-if="$ctrl.enabled()"><img src="{{$ctrl.url}}"></div>',
-        controller: function (stateService) {
-            this.$onInit = (function () {
-                this.enabled = function () {
-                    return stateService.getState('faviconEnabled');
-                };
-            }).bind(this);
+        template: '<div class="icon" ng-if="$ctrl.enabled">' +
+        '<img src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.image" alt="" />' +
+        '<i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.image"></i>' +
+        '</div>',
+        controller: function (stateService, constantsService) {
+            var ctrl = this;
 
-            this.$onChanges = (function () {
-                var hostname;
-                try {
-                    hostname = new URL(this.uri).hostname;
-                    this.url = 'https://icons.bitwarden.com/' + hostname + '/icon.png';
-                } catch (e) {
-                    // Invalid URL.
-                    this.url = chrome.extension.getURL('images/fa-globe.png');
+            ctrl.$onInit = function () {
+                ctrl.enabled = stateService.getState('faviconEnabled');
+                if (ctrl.enabled) {
+                    switch (ctrl.cipher.type) {
+                        case constantsService.cipherType.login:
+                            setLoginIcon(ctrl.cipher);
+                            break;
+                        case constantsService.cipherType.secureNote:
+                            ctrl.icon = 'fa-sticky-note-o';
+                            break;
+                        case constantsService.cipherType.card:
+                            ctrl.icon = 'fa-credit-card';
+                            break;
+                        case constantsService.cipherType.identity:
+                            ctrl.icon = 'fa-id-card-o';
+                            break;
+                        default:
+                            break;
+                    }
                 }
-            }).bind(this);
+            };
+
+            ctrl.$onChanges = function () {
+                if (ctrl.cipher.type === constantsService.cipherType.login) {
+                    setLoginIcon(ctrl.cipher);
+                }
+            };
+
+            function setLoginIcon() {
+                if (ctrl.cipher.login.uri) {
+                    var hostnameUri = ctrl.cipher.login.uri,
+                        isWebsite = false;
+
+                    if (hostnameUri.indexOf('androidapp://') === 0) {
+                        ctrl.icon = 'fa-android';
+                    }
+                    else if (hostnameUri.indexOf('iosapp://') === 0) {
+                        ctrl.icon = 'fa-apple';
+                    }
+                    else if (hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('http://') !== 0 &&
+                        hostnameUri.indexOf('https://') !== 0) {
+                        hostnameUri = "http://" + hostnameUri;
+                        isWebsite = true;
+                    }
+                    else {
+                        isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > 0;
+                    }
+
+                    if (isWebsite) {
+                        try {
+                            var url = new URL(hostnameUri);
+                            ctrl.image = 'https://icons.bitwarden.com/' + url.hostname + '/icon.png';
+                            ctrl.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
+                        }
+                        catch (e) { }
+                    }
+                }
+
+                if (!ctrl.icon) {
+                    ctrl.icon = 'fa-globe';
+                }
+            }
         }
     });

src/popup/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/popup/app/vault/views/vault.html

@@ -55,7 +55,7 @@
                           ng-class="{'disabled': !cipher.uri}">
                         <i class="fa fa-lg fa-share-square-o"></i>
                     </span>
-                    <icon uri="cipher.uri"></icon>
+                    <icon cipher="cipher"></icon>
                     <span class="text">
                         {{cipher.name}}
                         <i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>
@@ -88,7 +88,7 @@
                           ng-class="{'disabled': !cipher.uri}">
                         <i class="fa fa-lg fa-share-square-o"></i>
                     </span>
-                    <icon uri="cipher.uri"></icon>
+                    <icon cipher="cipher"></icon>
                     <span class="text">
                         {{cipher.name}}
                         <i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>

src/popup/index.html

@@ -58,6 +58,7 @@
     <script src="app/directives/formDirective.js"></script>
     <script src="app/directives/stopClickDirective.js"></script>
     <script src="app/directives/stopPropDirective.js"></script>
+    <script src="app/directives/fallbackSrcDirective.js"></script>
 
     <script src="app/components/componentsModule.js"></script>
     <script src="app/components/iconComponent.js"></script>

src/popup/less/components.less

@@ -357,6 +357,7 @@
             height: 36px;
             width: 34px;
             margin-left: -5px;
+            color: @text-muted;
 
             img {
                 border-radius: 3px;