Fix Transparent Background in Gravatar Showing Background Image

Closes #5882

* If a gravatar image is available, remove the default image behind it
* If gravatar image is not available, keep or replace the default image

core/client/app/components/gh-profile-image.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import AjaxService from 'ember-ajax/services/ajax';
 
 const {
     Component,
@@ -30,6 +31,8 @@ export default Component.extend({
     validEmail: '',
     hasUploadedImage: false,
     fileStorage: true,
+    ajax: AjaxService.create(),
+    config: service(),
 
     ghostPaths: service(),
     displayGravatar: notEmpty('validEmail'),
@@ -61,11 +64,22 @@ export default Component.extend({
     imageBackground: computed('validEmail', 'size', function () {
         let email = this.get('validEmail');
         let size = this.get('size');
-
         let style = '';
+
         if (email) {
-            let url = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=blank`;
+            let gravatarUrl = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=404`;
-            style = `background-image: url(${url})`;
+
+            this.get('ajax').request(gravatarUrl)
+                .catch((data) => {
+                    let defaultImageUrl = `url("${this.get('ghostPaths.subdir')}/ghost/img/user-image.png")`;
+
+                    if (data.errors !== undefined && Number(data.errors[0].status) === 404) {
+                        this.$('.placeholder-img')[0].style.backgroundImage = Ember.String.htmlSafe(defaultImageUrl);
+                    } else {
+                        this.$('.placeholder-img')[0].style.backgroundImage = 'url()';
+                    }
+                });
+            style = `background-image: url(${gravatarUrl})`;
         }
         return Ember.String.htmlSafe(style);
     }),

core/client/app/mirage/config.js

@@ -357,4 +357,6 @@ export function testConfig() {
             user: record
         };
     });
+
+    this.passthrough('http://www.gravatar.com/avatar/**');
 }

core/client/app/templates/components/gh-profile-image.hbs

@@ -1,12 +1,9 @@
 <figure class="account-image js-file-upload">
     {{#unless hasUploadedImage}}
         <div class="placeholder-img" style={{defaultImage}}></div>
-
-        {{#if displayGravatar}}
             <div id="account-image" class="gravatar-img" style={{imageBackground}}>
                 <span class="sr-only">User image</span>
             </div>
-        {{/if}}
     {{/unless}}
 
     <div class="js-img-preview"></div>

core/client/tests/integration/components/gh-profile-image-test.js

@@ -56,7 +56,7 @@ describeComponent(
 
         it('immediately renders the gravatar if valid email supplied', function () {
             let email = 'test@example.com';
-            let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=blank`;
+            let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
 
             this.set('email', email);
 
@@ -67,37 +67,5 @@ describeComponent(
             expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
                 .to.equal(`background-image: url(${expectedUrl})`);
         });
-
-        it('throttles gravatar loading as email is changed', function (done) {
-            let email = 'test@example.com';
-            let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=blank`;
-
-            this.set('email', 'test');
-
-            this.render(hbs`
-                {{gh-profile-image email=email size=100 debounce=300}}
-            `);
-
-            expect(this.$('.gravatar-img').length, '.gravatar-img not shown for invalid email')
-                .to.equal(0);
-
-            run(() => {
-                this.set('email', email);
-            });
-
-            expect(this.$('.gravatar-img').length, '.gravatar-img not immediately changed on email change')
-                .to.equal(0);
-
-            Ember.run.later(this, function () {
-                expect(this.$('.gravatar-img').length, '.gravatar-img still not shown before throttle timeout')
-                    .to.equal(0);
-            }, 250);
-
-            Ember.run.later(this, function () {
-                expect(this.$('.gravatar-img').attr('style'), '.gravatar-img style after timeout')
-                    .to.equal(`background-image: url(${expectedUrl})`);
-                done();
-            }, 400);
-        });
     }
 );