check if username is available in registration form

app/assets/javascripts/application.js

@@ -35,6 +35,7 @@
 //= require users
 //= require votes
 //= require annotatable
+//= require registration_form
 
 
 var initialize_modules = function() {
@@ -48,6 +49,7 @@ var initialize_modules = function() {
   App.PreventDoubleSubmission.initialize();
   App.IeAlert.initialize();
   App.Annotatable.initialize();
+  App.RegistrationForm.initialize();
 };
 
 $(function(){

app/assets/javascripts/registration_form.js.coffee

@@ -0,0 +1,25 @@
+App.RegistrationForm =
+
+  initialize: ->
+
+    registrationForm = $("form#new_user[action=\"/users\"]")
+    usernameInput = $("input#user_username")
+
+    clearUsernameMessage = ->
+      $("small").remove()
+
+    showUsernameMessage = (response) ->
+      klass = if response.available then "error no-error" else "error error"
+      usernameInput.after $("<small class=\"#{klass}\" style=\"margin-top: -16px;\">#{response.message}</small>")
+
+    validateUsername = (username) ->
+      request = $.post "/user/registrations/check_username?username=#{username}"
+      request.done (response) ->
+        showUsernameMessage(response)
+
+
+    if registrationForm.length > 0
+      usernameInput.on "focusout", ->
+        clearUsernameMessage()
+        username = usernameInput.val();
+        validateUsername(username) if username != ""

app/assets/stylesheets/layout.scss

@@ -843,6 +843,11 @@ span.error, small.error {
   color: $alert-color;
 }
 
+span.error, small.no-error {
+  background: $success-bg;
+  color: $success-color;
+}
+
 .error small.error {
   background: $alert-bg;
   color: $alert-color;

app/controllers/users/registrations_controller.rb

@@ -36,6 +36,14 @@ class Users::RegistrationsController < Devise::RegistrationsController
     end
   end
 
+  def check_username
+    if User.find_by_username params[:username]
+      render json: {available: false, message: t("devise_views.users.registrations.new.username_is_not_available")}
+    else
+      render json: {available: true, message: t("devise_views.users.registrations.new.username_is_available")}
+    end
+  end
+
   private
 
     def sign_up_params