Question

I am a Rails newbie.

I am using has_secure_password in the user controller. I realize it applies blowfish to store the password securely, but I want to have the password encrypted before it leaves the browser client. If this means the password is encrypted twice – that’s fine by me.

So, in a simple login form like the one below, how to I call a Javascript function I have already to apply MD5 to the password, before the form is submitted? Sure – I could just send ‘standard’ HTML and a onSubmit() javascript call, but surely there is a way to do this the ‘Rails Way’. How?

Thanks in advance!

<h1>Log In</h1>

<%= form_tag sessions_path do %>
  <div class="field">
    <%= label_tag :email %><br />
    <%= text_field_tag :email, params[:email] %>
  </div>
  <div class="field">
    <%= label_tag :password %><br />
    <%= password_field_tag :password %>
  </div>
  <div class="actions"><%= submit_tag "Log In" %></div>
<% end %>

UPDATE:

It seems like there is no ‘Rails Way’ to do this, so following the suggestion from Samar, I simply added a listener to the form click event using jQuery, after explicitly giving the form an id. Below is the complete code segment with changes and typo corrections included. Note that I am using my own MD5 library.

<h1>Log In</h1>

<%= form_tag sessions_path, :id => 'user_login_form' do %>
    <div class="field">
        <%= label_tag :email %><br />
        <%= text_field_tag :email, params[:email] %>
     </div>
    <div class="field">
        <%= label_tag :password %><br />
        <%= password_field_tag :password %>
    </div>
    <div class="actions"><%= submit_tag "Log In" %></div>
<% end %>

<script type="text/javascript">
    $("#user_login_form").click(function(){
        $("#password").val(EncryptMD5($("#password").val()));
    });
</script>

Answer 1

Download cryptojs from http://code.google.com/p/crypto-js/ . If your password field has id “password” and submit button has id “form_submit”. Then do the following:

<script type="text/javascript" src="crypto.js">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
    <script>
    $("#form_submit").click(function){
    $("#password").val(CryptoJS.MD5($("#password").val()));
    });
    </script>