Adds Facebook username picture check

static/js/app.js

@@ -365,4 +365,30 @@ $(document).ready(function() {
         get_products_realtime_data();
 
     }
+    var input_selector = "#id_facebook_username";
+    /* Facebook username check */
+    $(input_selector).on('keyup', _.debounce(function(event) {
+        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();
+            return;
+        }
+        var pictureUrl= "https://graph.facebook.com/" + user_id + "/picture";
+        $.ajax({
+            url: pictureUrl,
+            statusCode: {
+                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");
+                },
+                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");
+                }
+            }
+        });
+    }, 400)); // Only every 400ms
 }); 

templates/registration/create_user.html

@@ -29,8 +29,14 @@
                     <div class="form-group">
                         <label for="id_first_name">{{ form.first_name.label }}</label>{{ form.first_name|add_class:"form-control"}}{{ form.first_name.error }}
                         <label for="id_last_name">{{ form.last_name.label }}</label>{{ form.last_name|add_class:"form-control"}}{{ form.last_name.error }}
+                    </div>
+                    <div class="form-group">
                         <label for="id_email">{{ form.email.label }}</label>{{ form.email|add_class:"form-control"}}{{ form.email.error }}
-                        <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}}
+                    </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>
                     <input type="submit" value="Legg til" class="btn btn-primary btn-lg" />