add a warning whenever the uploaded image is not a square

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

@@ -21,6 +21,9 @@
       {{#if view.uploading}}
         <span>{{i18n upload_selector.uploading}} {{view.uploadProgress}}%</span>
       {{/if}}
+      {{#if view.imageIsNotASquare}}
+        <div class="warning">{{i18n user.change_avatar.image_is_not_a_square}}</div>
+      {{/if}}
     </div>
   </div>
 </div>

app/assets/javascripts/discourse/views/modal/avatar_selector_view.js

@@ -15,6 +15,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
   useGravatar: Em.computed.not("controller.use_uploaded_avatar"),
   canSaveAvatarSelection: Em.computed.or("useGravatar", "controller.has_uploaded_avatar"),
   saveDisabled: Em.computed.not("canSaveAvatarSelection"),
+  imageIsNotASquare : false,
 
   didInsertElement: function() {
     var view = this;
@@ -40,7 +41,10 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
 
     // when a file has been selected
     $upload.on("fileuploadadd", function (e, data) {
-      view.set("uploading", true);
+      view.setProperties({
+        uploading: true,
+        imageIsNotASquare: false
+      });
     });
 
     // when there is a progression for the upload
@@ -56,6 +60,8 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
         has_uploaded_avatar: true,
         use_uploaded_avatar: true
       });
+      // display a warning whenever the image is not a square
+      view.set("imageIsNotASquare", data.result.width !== data.result.height);
       // in order to be as much responsive as possible, we're cheating a bit here
       // indeed, the server gives us back the url to the file we've just uploaded
       // often, this file is not a square, so we need to crop it properly

app/assets/stylesheets/application/modal.css.scss

@@ -178,8 +178,9 @@
     .archetype-option {
       margin-bottom: 20px;
     }
-
-
+    .warning {
+      color: lighten($red, 10%) !important;
+    }
   }
   .password-confirmation {
     display: none;

config/locales/client.en.yml

@@ -230,6 +230,7 @@ en:
         uploaded_avatar: "Custom picture"
         uploaded_avatar_empty: "Add a custom picture"
         upload_title: "Upload your picture"
+        image_is_not_a_square: "Warning: we've cropped your image as it's not a square."
 
       email:
         title: "Email"

config/locales/client.fr.yml

@@ -226,6 +226,7 @@ fr:
         uploading: "Image en cours d'envois..."
         gravatar: "Gravatar"
         uploaded_avatar: "Image envoyée"
+        image_is_not_a_square: "Attention : nous avons coupé l'image pour en faire un carré."
 
       email:
         title: "Email"