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 => {
-          gravatar_avatar_template: result.gravatar_avatar_template,
+          if (!result.gravatar_avatar_upload_id) {
-          gravatar_avatar_upload_id: result.gravatar_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,33 +1,34 @@
 {{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}}
-  <div>
+  <div class="avatar-choice">
-    <div>
+    {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}}
-      {{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>
-      <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">
-    <div>
+    {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
-      {{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>
-      <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"}}
-      {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}}
+    {{#if gravatarFailed}}
-    </div>
+      <p class="error">{{I18n 'user.change_avatar.gravatar_failed'}}</p>
-    {{#if allowAvatarUpload}}
-      <div>
-        {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}}
-        <label class="radio" for="uploaded-avatar">
-          {{#if custom_avatar_template}}
-            {{bound-avatar-template custom_avatar_template "large"}}
-            {{i18n 'user.change_avatar.uploaded_avatar'}}
-          {{else}}
-            {{i18n 'user.change_avatar.uploaded_avatar_empty'}}
-          {{/if}}
-        </label>
-        {{avatar-uploader user_id=id
-                          uploadedAvatarTemplate=custom_avatar_template
-                          uploadedAvatarId=custom_avatar_upload_id
-                          uploading=uploading
-                          done="uploadComplete"}}
-      </div>
     {{/if}}
   </div>
+  {{#if allowAvatarUpload}}
+    <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}}
+          {{bound-avatar-template custom_avatar_template "large"}}
+          {{i18n 'user.change_avatar.uploaded_avatar'}}
+        {{else}}
+          {{i18n 'user.change_avatar.uploaded_avatar_empty'}}
+        {{/if}}
+      </label>
+      {{avatar-uploader user_id=id
+                        uploadedAvatarTemplate=custom_avatar_template
+                        uploadedAvatarId=custom_avatar_upload_id
+                        uploading=uploading
+                        done="uploadComplete"}}
+    </div>
+  {{/if}}
 {{/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)
+            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"