Merge pull request #1391 from ZogStriP/fix-avatar-thumbnail-wont-save-after-upload

FIX: avatar thumbnail won't save after upload

app/assets/javascripts/discourse/controllers/avatar_selector_controller.js

@@ -8,7 +8,15 @@
   @module Discourse
 **/
 Discourse.AvatarSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, {
-  toggleUseUploadedAvatar: function(toggle) {
-    this.set("use_uploaded_avatar", toggle);
-  }
+  useUploadedAvatar: function() {
+    this.set("use_uploaded_avatar", true);
+  },
+
+  useGravatar: function() {
+    this.set("use_uploaded_avatar", false);
+  },
+
+  avatarTemplate: function() {
+    return this.get("use_uploaded_avatar") ? this.get("uploaded_avatar_template") : this.get("gravatar_template");
+  }.property("use_uploaded_avatar", "uploaded_avatar_template", "gravatar_template")
 });

app/assets/javascripts/discourse/models/user.js

@@ -28,7 +28,11 @@ Discourse.User = Discourse.Model.extend({
 
 
   searchContext: function() {
-    return ({ type: 'user', id: this.get('username_lower'), user: this });
+    return {
+      type: 'user',
+      id: this.get('username_lower'),
+      user: this
+    };
   }.property('username_lower'),
 
   /**
@@ -101,7 +105,7 @@ Discourse.User = Discourse.Model.extend({
     @returns Result of ajax call
   **/
   changeUsername: function(newUsername) {
-    return Discourse.ajax("/users/" + (this.get('username_lower')) + "/preferences/username", {
+    return Discourse.ajax("/users/" + this.get('username_lower') + "/preferences/username", {
       type: 'PUT',
       data: { new_username: newUsername }
     });
@@ -115,7 +119,7 @@ Discourse.User = Discourse.Model.extend({
     @returns Result of ajax call
   **/
   changeEmail: function(email) {
-    return Discourse.ajax("/users/" + (this.get('username_lower')) + "/preferences/email", {
+    return Discourse.ajax("/users/" + this.get('username_lower') + "/preferences/email", {
       type: 'PUT',
       data: { email: email }
     });
@@ -173,9 +177,7 @@ Discourse.User = Discourse.Model.extend({
   changePassword: function() {
     return Discourse.ajax("/session/forgot_password", {
       dataType: 'json',
-      data: {
-        login: this.get('username')
-      },
+      data: { login: this.get('username') },
       type: 'POST'
     });
   },
@@ -266,11 +268,14 @@ Discourse.User = Discourse.Model.extend({
     Change avatar selection
 
     @method toggleAvatarSelection
+    @param {Boolean} useUploadedAvatar true if the user is using the uploaded avatar
     @returns {Promise} the result of the toggle avatar selection
   */
-  toggleAvatarSelection: function() {
-    var data = { use_uploaded_avatar: this.get("use_uploaded_avatar") };
-    return Discourse.ajax("/users/" + this.get("username") + "/preferences/avatar/toggle", { type: 'PUT', data: data });
+  toggleAvatarSelection: function(useUploadedAvatar) {
+    return Discourse.ajax("/users/" + this.get("username_lower") + "/preferences/avatar/toggle", {
+      type: 'PUT',
+      data: { use_uploaded_avatar: useUploadedAvatar }
+    });
   }
 
 });

app/assets/javascripts/discourse/routes/preferences_routes.js

@@ -18,35 +18,29 @@ Discourse.PreferencesRoute = Discourse.RestrictedUserRoute.extend({
   events: {
     showAvatarSelector: function() {
       Discourse.Route.showModal(this, 'avatarSelector');
-      var user = this.modelFor("user");
-      console.log(user);
-      this.controllerFor("avatarSelector").setProperties(user.getProperties(
-        "username",
-        "email",
-        "has_uploaded_avatar",
-        "use_uploaded_avatar",
-        "gravatar_template",
-        "uploaded_avatar_template"
-      ));
+      // all the properties needed for displaying the avatar selector modal
+      var avatarSelector = this.modelFor('user').getProperties(
+        'username', 'email',
+        'has_uploaded_avatar', 'use_uploaded_avatar',
+        'gravatar_template', 'uploaded_avatar_template');
+      this.controllerFor('avatarSelector').setProperties(avatarSelector);
     },
 
     saveAvatarSelection: function() {
-      var user = this.modelFor("user");
-      var avatar = this.controllerFor("avatarSelector");
+      var user = this.modelFor('user');
+      var avatarSelector = this.controllerFor('avatarSelector');
       // sends the information to the server if it has changed
-      if (avatar.get("use_uploaded_avatar") !== user.get("use_uploaded_avatar")) { user.toggleAvatarSelection(); }
-      // saves the data back
-      user.setProperties(avatar.getProperties(
-        "has_uploaded_avatar",
-        "use_uploaded_avatar",
-        "gravatar_template",
-        "uploaded_avatar_template"
-      ));
-      if (avatar.get("use_uploaded_avatar")) {
-        user.set("avatar_template", avatar.get("uploaded_avatar_template"));
-      } else {
-        user.set("avatar_template", avatar.get("gravatar_template"));
+      if (avatarSelector.get('use_uploaded_avatar') !== user.get('use_uploaded_avatar')) {
+        user.toggleAvatarSelection(avatarSelector.get('use_uploaded_avatar'));
       }
+      // saves the data back
+      user.setProperties(avatarSelector.getProperties(
+        'has_uploaded_avatar',
+        'use_uploaded_avatar',
+        'gravatar_template',
+        'uploaded_avatar_template'
+      ));
+      user.set('avatar_template', avatarSelector.get('avatarTemplate'));
     }
   }
 });

app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars

@@ -1,12 +1,12 @@
 <div class="modal-body">
   <div>
     <div>
-      <input type="radio" id="avatar" name="avatar" value="gravatar" {{action toggleUseUploadedAvatar false}}>
+      <input type="radio" id="avatar" name="avatar" value="gravatar" {{action useGravatar}}>
       <label class="radio" for="avatar">{{avatar controller imageSize="large" template="gravatar_template"}} {{{i18n user.change_avatar.gravatar}}} {{email}}</label>
       <a href="//gravatar.com/emails" target="_blank" title="{{i18n user.change_avatar.gravatar_title}}" class="btn"><i class="icon-pencil"></i></a>
     </div>
     <div>
-      <input type="radio" id="uploaded_avatar" name="avatar" value="uploaded_avatar" {{action toggleUseUploadedAvatar true}}>
+      <input type="radio" id="uploaded_avatar" name="avatar" value="uploaded_avatar" {{action useUploadedAvatar}}>
       <label class="radio" for="uploaded_avatar">
         {{#if has_uploaded_avatar}}
           {{boundAvatar controller imageSize="large" template="uploaded_avatar_template"}} {{i18n user.change_avatar.uploaded_avatar}}

test/javascripts/controllers/avatar_selector_controller_test.js

@@ -0,0 +1,28 @@
+var avatarSelector = Em.Object.create({
+  use_uploaded_avatar: false,
+  gravatar_template: "//www.gravatar.com/avatar/c6e17f2ae2a215e87ff9e878a4e63cd9.png?s={size}&r=pg&d=identicon",
+  uploaded_avatar_template: "//cdn.discourse.org/uploads/meta_discourse/avatars/093/607/185cff113e/{size}.jpg"
+});
+
+module("Discourse.AvatarSelectorController");
+
+test("avatarTemplate", function() {
+  var avatarSelectorController = controllerFor("avatarSelector");
+  avatarSelectorController.setProperties(avatarSelector);
+
+  equal(avatarSelectorController.get("avatarTemplate"),
+        avatarSelector.get("gravatar_template"),
+        "we are using gravatar by default");
+
+  avatarSelectorController.useUploadedAvatar();
+
+  equal(avatarSelectorController.get("avatarTemplate"),
+        avatarSelector.get("uploaded_avatar_template"),
+        "calling useUploadedAvatar switches to using the uploaded avatar");
+
+  avatarSelectorController.useGravatar();
+
+  equal(avatarSelectorController.get("avatarTemplate"),
+        avatarSelector.get("gravatar_template"),
+       "calling useGravatar switches to using gravatar");
+});