Hi I have created the code below to check if a user is valid to login to a database, I am using SSL to secure the connection, but I dont know if this is still a good way in which I have done it. Could anyone give advice? Thanks.
(sorry its abit long)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="login_styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="../jquery/ui/effects.core.js"></script>
<script src="../jquery/ui/effects.shake.js"></script>
<title>Login</title>
</head>
<body>
<script type="text/javascript" >
var clicked = 0;
$(document).ready(function()
{
document.form.username.focus();
})
function make_request()
{
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false; }
}
}
}
function checkCanSubmit()
{
if (fnameok && lnameok && emailok && projectnameok && descriptionok)
{
document.getElementById("button").disabled= false;
}
else
{
document.getElementById("button").disabled= true;
}
}
function counting()
{
clicked++;
}
function check_login(username, password)
{
make_request()
$("#login_loading").show();
var parameters = 'username=' + document.getElementById("username").value + '&password=' + document.getElementById("password").value;
httpxml.onreadystatechange = stateck;
httpxml.open('POST', 'login.php', true);
httpxml.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
httpxml.setRequestHeader('Content-Length', parameters.length);
httpxml.send(parameters);
function stateck()
{
if(httpxml.readyState==4)
{
if (httpxml.responseText.indexOf("Login Successful") >= 0)
{
$("#login_loading").hide("fast");
$("#login_error").hide("slow");
$("#forgot").hide("slow");
$("#button").fadeOut("slow");
$("#loading_big").fadeIn("slow");
setTimeout( "window.location.href = '../members'", 2000);
}
else
{
focus();
if (clicked > 1)
{
$("#login_error").effect("shake", { times:2 }, 100);
$("#login_loading").fadeOut(1000);
$("#forgot").show("slow");
}
else
{
$("#login_loading").fadeOut(1000);
$("#login_successful").hide("normal");
$("#login_error").show("slow");
}
}
}
}
}
function focus()
{
document.form.username.focus();
}
</script>
<div class="login_loading" id="login_loading"><img src="images/login_loader.gif" alt="loading1" id="loading1" /></div>
<div class="loading_big" id="loading_big"> Login successful please wait . . .<br /><img src="images/loading_big.gif" alt="loading" /></div>
<div class="form">
<table class="form" id="form" cellpadding="10" >
<form id="form" name="form" method="post" action="login.php" />
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username" size="26" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" size="26"/>
<div id="login_error" class="login_error" ><img src="images/error.png" alt="Error" id="error" />Username or password incorrect.</div>
<div id="forgot" class="login_error">Forgot Password?<a href="forgotpass.php"></a></div>
<div id="login_successful" class="login_successful" >Login successful please wait . . . </div></td>
</tr>
<tr>
<td>
<input type="submit" name="button" id="button" value="Submit" onclick="check_login(username, password); counting(); return false;"/>
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
Code formatting goes abit of a mess on here :p
Thanks again.