From 0d34caff853629b7e83aa5767996b4246d49af8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Wed, 29 Nov 2017 18:09:44 +0100 Subject: [PATCH] UX: show error message when no gravatar is associated --- .../controllers/avatar-selector.js.es6 | 15 +++-- .../templates/modal/avatar-selector.hbs | 55 ++++++++++--------- app/assets/stylesheets/common/base/user.scss | 10 ++++ app/controllers/user_avatars_controller.rb | 17 ++++-- config/locales/client.en.yml | 1 + 5 files changed, 63 insertions(+), 35 deletions(-) diff --git a/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6 b/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6 index ab30fef1572..170f28fc303 100644 --- a/app/assets/javascripts/discourse/controllers/avatar-selector.js.es6 +++ b/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({ - gravatar_avatar_template: result.gravatar_avatar_template, - gravatar_avatar_upload_id: result.gravatar_upload_id, - })) + .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)); } } diff --git a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs index a01f45c76bb..f974216e931 100644 --- a/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs +++ b/app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs @@ -1,33 +1,34 @@ {{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}} -
-
- {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}} - -
-
- {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}} - - {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}} -
- {{#if allowAvatarUpload}} -
- {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}} - - {{avatar-uploader user_id=id - uploadedAvatarTemplate=custom_avatar_template - uploadedAvatarId=custom_avatar_upload_id - uploading=uploading - done="uploadComplete"}} -
+
+ {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}} + +
+
+ {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}} + + {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}} + {{#if gravatarFailed}} +

{{I18n 'user.change_avatar.gravatar_failed'}}

{{/if}}
+ {{#if allowAvatarUpload}} +
+ {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}} + + {{avatar-uploader user_id=id + uploadedAvatarTemplate=custom_avatar_template + uploadedAvatarId=custom_avatar_upload_id + uploading=uploading + done="uploadComplete"}} +
+ {{/if}} {{/d-modal-body}}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 4719c6c4468..66207fae9cf 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/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 { diff --git a/app/controllers/user_avatars_controller.rb b/app/controllers/user_avatars_controller.rb index 28d7f8c2d15..0a59f9cdd28 100644 --- a/app/controllers/user_avatars_controller.rb +++ b/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_upload_id: user.user_avatar.gravatar_upload_id, - gravatar_avatar_template: User.avatar_template(user.username, user.user_avatar.gravatar_upload_id) - } + 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 diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index cfde3d76e18..48cca6e3c5c 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -726,6 +726,7 @@ en: title: "Change your profile picture" gravatar: "Gravatar, 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"