UX: show error message when no gravatar is associated

app/assets/javascripts/discourse/controllers/avatar-selector.js.es6

@@ -36,10 +36,17 @@ export default Ember.Controller.extend(ModalFunctionality, {
     refreshGravatar() {
       this.set("gravatarRefreshDisabled", true);
       return ajax(`/user_avatar/${this.get("username")}/refresh_gravatar.json`, { method: "POST" })
-        .then(result => this.setProperties({
+        .then(result => {
+          if (!result.gravatar_avatar_upload_id) {
+            this.set("gravatarFailed", true);
+          } else {
+            this.setProperties({
+              gravatarFailed: false,
               gravatar_avatar_template: result.gravatar_avatar_template,
               gravatar_avatar_upload_id: result.gravatar_upload_id,
-        }))
+            });
+          }
+        })
         .finally(() => this.set("gravatarRefreshDisabled", false));
     }
   }

app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs

@@ -1,16 +1,18 @@
 {{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}}
-  <div>
-    <div>
+  <div class="avatar-choice">
     {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}}
     <label class="radio" for="system-avatar">{{bound-avatar-template system_avatar_template "large"}} {{{i18n 'user.change_avatar.letter_based'}}}</label>
   </div>
-    <div>
+  <div class="avatar-choice">
     {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
     <label class="radio" for="gravatar">{{bound-avatar-template gravatar_avatar_template "large"}} {{{i18n 'user.change_avatar.gravatar'}}} {{email}}</label>
     {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}}
+    {{#if gravatarFailed}}
+      <p class="error">{{I18n 'user.change_avatar.gravatar_failed'}}</p>
+    {{/if}}
   </div>
   {{#if allowAvatarUpload}}
-      <div>
+    <div class="avatar-choice">
       {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}}
       <label class="radio" for="uploaded-avatar">
         {{#if custom_avatar_template}}
@@ -27,7 +29,6 @@
                         done="uploadComplete"}}
     </div>
   {{/if}}
-  </div>
 {{/d-modal-body}}
 
 <div class="modal-footer">

app/assets/stylesheets/common/base/user.scss

@@ -320,6 +320,13 @@
 }
 
 .avatar-selector {
+  padding-bottom: 0 !important;
+  label.radio {
+    padding-left: 10px;
+  }
+  .avatar-choice {
+    min-height: 40px;
+  }
   label {
     display: inline-block;
     margin-right: 10px;
@@ -332,6 +339,9 @@
   .avatar {
     margin: 5px 10px 5px 0;
   }
+  p.error {
+    color: $danger;
+  }
 }
 
 .new-private-message {

app/controllers/user_avatars_controller.rb

@@ -13,10 +13,19 @@ class UserAvatarsController < ApplicationController
         user.create_user_avatar(user_id: user.id) unless user.user_avatar
         user.user_avatar.update_gravatar!
 
-        render json: {
+        gravatar = if user.user_avatar.gravatar_upload_id
+          {
             gravatar_upload_id: user.user_avatar.gravatar_upload_id,
             gravatar_avatar_template: User.avatar_template(user.username, user.user_avatar.gravatar_upload_id)
           }
+        else
+          {
+            gravatar_upload_id: nil,
+            gravatar_avatar_template: nil
+          }
+        end
+
+        render json: gravatar
       end
     else
       raise Discourse::NotFound

config/locales/client.en.yml

@@ -726,6 +726,7 @@ en:
         title: "Change your profile picture"
         gravatar: "<a href='//gravatar.com/emails' target='_blank'>Gravatar</a>, based on"
         gravatar_title: "Change your avatar on Gravatar's website"
+        gravatar_failed: "Could not fetch the Gravatar. Is there one associated to that email address?"
         refresh_gravatar_title: "Refresh your Gravatar"
         letter_based: "System assigned profile picture"
         uploaded_avatar: "Custom picture"