<!-- this is the login template for the login.php -->
  <fieldset>
    <legend>User Login</legend>
    <p id="msg" class="message">Please fill out the following fields:</p>
    <div>
      <label for="username">Username</label>
      <input id="username" type="text" name="username" />
    </div>

    <div>
      <label for="password">Password</label>
      <input id="password" type="password" name="password" />
    </div>
    <div class="buttonrow">
	<button onclick="send()">Login</button>
	</div>
	<div id="valid_info">Waiting for authentication...</div>
  </fieldset>

   <script type="text/javascript">

function login_username()
{
var form = $('logger');
var input = form['username'];
var uname = Form.Element.getValue(input);
new Ajax.valider('valid_info', '/valid.php?username='+uname, { method: 'get' });
  }


   function send()
   {
   	username=document.getElementById('username').value;
password=hex_md5(document.getElementById('password').value);


 	if (username.length <5 )
  {
document.getElementById('username').style.border = '1px solid red';

$('valid_info').update('The user name is too short. Min 5 char!');
$('username').focus();
var nyufi = false;
  	return false
  }else if (password.length <5 )
  {
document.getElementById('password').style.border = '1px solid red';

$('valid_info').update('The password is too short. Min 5 char!');
$('password').focus();
var nyufi = false;
  	return false
  }
  if (nyufi!=false)
  {
  	document.getElementById('username').style.border = '1px solid black';
  	document.getElementById('password').style.border = '1px solid black';
 new Ajax.Updater('valid_info', 'valid.php', 
 { method: 'get',parameters: {uname: username, pass: password}
 });
 }else
 {
 	return false
 }
}
  //////////////////////
  
   
    $('username').focus();
  </script>

<!--
///var element = '/valid.php?username=' + username + '&password='+password;
document.getElementById('valid_info').value='The user name is too short. Min 5 char!';-->