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;
+}

templates/registration/create_user.html

@@ -35,8 +35,10 @@
                     </div>
                     <div class="form-group">
                         <label for="id_facebook_username">{{ form.facebook_username.label }}</label>
-                        {{ form.facebook_username|add_class:"form-control"|attr:"placeholder: F.eks simbras"}}{{form.facebook_username.error}}
-                        <span class="glyphicon glyphicon-ok form-control-feedback" style="display: none;"></span>
+                        <div class="input-group">
+                            {{ form.facebook_username|add_class:"form-control input-lg"|attr:"placeholder: F.eks simbras"}}{{form.facebook_username.error}}
+                            <span class="input-group-addon facebook-image"></span>
+                        </div>
 
                     </div>
                     <input type="submit" value="Legg til" class="btn btn-primary btn-lg" />