diff --git a/ghost/admin/app/components/gh-profile-image.js b/ghost/admin/app/components/gh-profile-image.js index a48786d0d4..1556b9a413 100644 --- a/ghost/admin/app/components/gh-profile-image.js +++ b/ghost/admin/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`; - style = `background-image: url(${url})`; + let gravatarUrl = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=404`; + + 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); }), diff --git a/ghost/admin/app/mirage/config.js b/ghost/admin/app/mirage/config.js index e40b99895a..b8ad82f9cc 100644 --- a/ghost/admin/app/mirage/config.js +++ b/ghost/admin/app/mirage/config.js @@ -357,4 +357,6 @@ export function testConfig() { user: record }; }); + + this.passthrough('http://www.gravatar.com/avatar/**'); } diff --git a/ghost/admin/app/templates/components/gh-profile-image.hbs b/ghost/admin/app/templates/components/gh-profile-image.hbs index 876767bab6..0a3ca9b4b1 100644 --- a/ghost/admin/app/templates/components/gh-profile-image.hbs +++ b/ghost/admin/app/templates/components/gh-profile-image.hbs @@ -1,12 +1,9 @@
{{#unless hasUploadedImage}}
- - {{#if displayGravatar}}
User image
- {{/if}} {{/unless}}
diff --git a/ghost/admin/tests/integration/components/gh-profile-image-test.js b/ghost/admin/tests/integration/components/gh-profile-image-test.js index 6c53ada401..e5aadce495 100644 --- a/ghost/admin/tests/integration/components/gh-profile-image-test.js +++ b/ghost/admin/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); - }); } );