for i in infinity

Here is a simple tutorial to demonstrate the use of prototype Window login form with RubyOnRails and Ajax. The idea behind this is to override Ok event of Dialog.confirm() form and send Ajax request to controller. The demo application makes use of RJS for Ajax callbacks.

See Live Demo

To begin with, download prototype windows library, copy javascripts in your public/javascripts folder and themes to stylesheets folder.

Include the javascripts and stylesheets in layout header.Look at our application.rhtml layout for complete details.

The logindemo controller has index action, which contains window code: (views/logindemo/index.rhtml)

<div id="login" style="display:none">
<form action="/" id="ajax-login-form" method="post">
<p><span id='login_error_msg' class="login_error" style="display:none"> </span></p>
<div style="clear:both"></div>
<p><span class="login_label">login</span> <span class="login_input"><input name="login" type="text"/></span></p>
<div style="clear:both"></div>
<p><span class="login_label">password</span> <span class="login_input"><input name="password" type="password"/></span></p>
<div style="clear:both"></div>
</form>
<div id="error-msg" style="margin-bottom: 0px;"></div>
</div>

Additionally, we need javascript code to call and render this div as prototype window login form.

<script>

function submitform()
{
r = new Ajax.Request('/logindemo/login', {asynchronous:true, evalScripts:true, parameters:Form.serialize(document.getElementById('ajax-login-form'))});
return false;
}

function showform(){
Dialog.confirm($('login').innerHTML, {windowParameters: {className:"alphacube", width:400, height:200},
okLabel: "login", cancelLabel: "cancel",
ok:function(win)
{
submitform();
}
});
}

</script>

Finally we call the window through the url <a xhref=”http://www.anup.info/#” mce_href=”http://www.anup.info/#” onclick=”javascript:showform();”><h2>Click Here to Login</h2></a>

With addition of login action, our code looks like this:

class LogindemoController < ApplicationController  

  before_filter :check_login, :except => [:index, :login]    

  def index
  end     

  def login
    if authenticate(params[:login],params[:password])
      render :update do |page|
        page.redirect_to '/logindemo/success'
      end
    else
      render :update do |page|
        page.replace_html 'error-msg', :partial => 'message'
        page.visual_effect :highlight, 'error-msg', :duration => '3'
      end
    end
  end

  def success

  end

  private

  def authenticate(user,password)
    if ((user == 'anup') and (password == 'demo'))
      session[:login] = true
      return true
    else
      return false
    end
  end
end

We have used a simple session flag for user authentication. The code in application.rb does the check:

class ApplicationController < ActionController::Base
    def check_login
      if session[:login].blank?
        redirect_to :controller => 'logindemo', :action => 'index'
      end
    end
end

Check out working demo here