Ok, so I need some help here. I"m not a good web developer and I've been tasked with helping a team I'm on figure something out.
I need to create a HTML password field that responds to the key down event of the enter button. When that is done, it should make a call to a javascript function which takes in the username and a hashed version of the password and validate the user's info.
If the credentials are valid the users is forwarded to a permissions-appropriate page, if invalid they are sent to a page to re-try the log in.
When done in the debugger in chrome and FF, this works perfectly. When I run it in real time nothing happens. Below is the script that calls the event, and the javascript itself that's doing all the logic. As a kicker, I'll mention that the javascript works perfectly at any time, if we click on the log-in button.
I need to create a HTML password field that responds to the key down event of the enter button. When that is done, it should make a call to a javascript function which takes in the username and a hashed version of the password and validate the user's info.
If the credentials are valid the users is forwarded to a permissions-appropriate page, if invalid they are sent to a page to re-try the log in.
When done in the debugger in chrome and FF, this works perfectly. When I run it in real time nothing happens. Below is the script that calls the event, and the javascript itself that's doing all the logic. As a kicker, I'll mention that the javascript works perfectly at any time, if we click on the log-in button.
HTML:
<script>
$(document).ready(function()
{
$("#topnav_login").keypress(function(event)
{
if(event.keyCode == 13)
{
doLogin();
if (event.preventDefault)
event.preventDefault();
else event.returnValue = false;
}
});
});
</script>
Code:
function doLogin() {
// Getting the hashed value of the password from the form
var uhash = document.getElementById('f_pw_hashed').value;
// Getting the username entered into the login form
var uname = document.getElementById('f_username').value;
// Var to track the success or failure of login
var valid = true;
// Checking to see if a username was entered
if(uname == "" || uname.length < 1) {
valid = false;
// TODO: Display error message of invalid username
} else if(uhash == "" || uhash.length <= 0) {
valid = false;
// TODO: Display password error
} else {
// TODO: AJAX Call to check if valid login
// Get uname hashed pw from API
// Compare the hashed value from form to response from API
// If success, then setLoginCookie(uname, hashed, utype)
// Otherwise display error message.
// API Implementation to create user
var url = getGURL() + "/validateAccount?userName=" + uname + "&password=" + uhash;
// readyState is now 0 - Uninitialized
xhr.open("GET", url, true); // true means async
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
// readyState is now 1 - Loading
xhr.send(null);
// readyState is now 2 - Loaded
xhr.onreadystatechange = function() {
switch( xhr.readyState ) {
case 3: // Interactive
// readyState is now 2
break;
case 4: // Completed
if( xhr.status == 200 ) {
var jsonObject = JSON.parse(xhr.responseText);
if(jsonObject.status) {
// Successful login - get user info so cookies can be set
// TODO: NEED A WAY TO POST UserId here from datastore
setAccountInfo(uname, uhash);
} else {
// Login Failed - Forward to login page
window.location.replace("login.html");
}
} else if( xhr.status == 404 ) {
// Display error message in case of 404 error returned
} else {
// Display error message in case of any other error returned
}
break;
} // end switch
};
