FB username: Picture preview

static/js/app.js

@@ -371,7 +371,7 @@ $(document).ready(function() {
         var user_id = event.target.value;
         if(user_id.trim().length === 0) {
             $(input_selector).parent().removeClass('has-success has-feedback has-error');
-            $(input_selector).parent().find(".form-control-feedback").hide();
+            $(input_selector).parent().find(".facebook-image img").hide();
             return;
         }
         var pictureUrl= "https://graph.facebook.com/" + user_id + "/picture";
@@ -381,14 +381,15 @@ $(document).ready(function() {
                 200: function() {
                     $(input_selector).parent().addClass('has-success has-feedback');
                     $(input_selector).parent().removeClass('has-error');
-                    $(input_selector).parent().find(".form-control-feedback").show().removeClass("glyphicon-remove").addClass("glyphicon-ok");
+                    $(input_selector).parent().find(".facebook-image").show().html('<img src='+pictureUrl+' />')
+                    
                 },
                 404: function() {
                     $(input_selector).parent().addClass('has-error has-feedback');
                     $(input_selector).parent().removeClass('has-success');
-                    $(input_selector).parent().find(".form-control-feedback").show().removeClass("glyphicon-ok").addClass("glyphicon-remove");
+                    $(input_selector).parent().find(".facebook-image img").hide();
                 }
             }
         });
-    }, 400)); // Only every 400ms
+    }, 300)); // Only every 300ms
 }); 

static/sass/screen.scss

@@ -130,3 +130,8 @@ body {
 .alert-error {
     @extend .alert-danger;
 }
+.facebook-image {
+    img {
+        height: 32px;
+    }
+}

static/stylesheets/screen.css

@@ -7861,3 +7861,8 @@ body .glyphicon .white {
 #footer .credits .love {
   color: #faafba;
 }
+
+/* line 134, ../sass/screen.scss */
+.facebook-image img {
+  height: 32px;
+}