6
\$\begingroup\$

I have built a "reset and confirm password" section on a site. It works great. I just have this suspicion that maybe it isn't the most efficient way. I am relatively new to jQuery but I can usually make things work well. I am just wanting to make sure I am doing them right.

Any suggestions are appreciated.

/////////////// RESET PASSWORD  /////////////////////
$('#reset_password').click(function reset_password(){
    //Enter a password input field a button
    $('#new_pass_field').html('<input type="text" id="new_password" name="new_password"><button id="submit_new_pass">Submit New Password</button>');
    // Bind a click to the button
    $('#submit_new_pass').bind('click', function submit_new_pass (){
        // When clicked get val of the new_password field. 
        $get_val = $("#new_password").val();
        // Hide the new_pass field and button so the confirm field and button can be entered. 
        $('#new_pass_field').hide("fast").html('<input type="text" id="password" name="password"><button id="confirm_new_pass">Confirm New Password</button>');
        // Bind click to that confirm button
        $('#confirm_new_pass').bind('click', function confirm_new(){ 
            // Get val of the confirm pass field
            $get_confirm_val = $("#password").val();
            // Check valdation if 2 passwords match
            if($get_val == $get_confirm_val){
                // If they match send to DB and encrypt. 
                $.get(uri_base +'/AJAX/update_password/admin_users/'+$get_confirm_val+'/'+Math.random(), function(msg){
                    //If returns true then send msg password changed. and hide the password row. 
                    if(msg){
                        $("#err_password").html("Your Password has been changed.").queue(function(){
                            setTimeout(function(){
                                $("#err_password").dequeue();
                            }, 3000);
                        })
                        $('#reset_pass_results').slideUp("slow");
                        $('#new_pass_field').hide("fast").html('');
                    }else{
                        // Error in the DB
                        $("#err_password").html("There was an error. Your password was not changed.");
                    }
                });
            }else{
                // Passwords didn't match now reset the clicks to try again and hide the error
                $("#err_password").html("Your Passwords didn't match!").delay(3000).fadeOut("slow");
                $('#confirm_new_pass').bind('click', confirm_new);
                $('#reset_password').bind('click', reset_password);
            }
            return false;
        });
        // Show the password field
        $('#new_pass_field').show("fast");
        return false;
    });
    // Show initial field and button. 
    $('#reset_pass_results').slideDown("slow", function(){
        $('#new_pass_field').show("fast");                          
    });
    return false;
});
\$\endgroup\$
1
  • 4
    \$\begingroup\$ Just in glancing, I would not use a GET request to change a user's password - this leaves you open for CSRF attacks. Use a POST and pass along a user-specific 'secret' token, as shown in the Prevention section. \$\endgroup\$ Mar 27 '11 at 2:06
4
\$\begingroup\$

Looks fine to me but one way to write a lot less code for these relatively simple ajax calls is to use the Jquery Form plugin that converts a form tag to an ajax call. I believe you'll find it a huge time save going forward.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.