
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM

Search Site:

Home » Javascript » Article

Javascript Scripted Password Entry Login

Article by:

Drew Bowman (1/6/2003)

	Add to Favourites
	Tell a friend

Summary:

Create a password protected page using this neat javascript prompt.

Viewed: 179821 times

Rating (107 votes):

3.9 out of 5

Rate this Article

Read Comments

Post Comments

Javascript Scripted Password Entry Login

Live Demo

This javascript provides a way for internet users to login to a "secure page". This is achieved by sending a user to a filename based upon their username and password. If an incorrect username or password is entered the page is not loaded that sends the user to the "secure page".

Code

This is the code that should be placed on the initial webpage that you would like your users to login from:
<?xml version="1.0" encoding="iso-8859-1"?><title>Javascript User Login</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript" type="text/javascript"> // // Javascript User Login 3.0 // Some Rights Reserved // http://webdeveloper.50webs.com // var userFolder = ""; // Folder where userfile (e.g. PizzaMan127~Cheese.htm) is located (e.g "users/") var HTMLextention = "/.htm"; // Extension of the user-file (usually .htm or .html) var inProgressMSG = "Attempting login..."; // Message displayed during a login var userFailMSG = "Invalid username or password"; // Message displayed after failed attempt // Do not edit function login(){ var username= document.getElementById('username').value; // location of username var password= document.getElementById('password').value; // location of password username= username.toLowerCase(); // convert to lowercase for case-sensitive servers password= password.toLowerCase(); // convert to lowercase for case-sensitive servers var fullURL= ""; fullURL= userFolder + username + "~" + password + HTMLextention; // compiled filename the loads user-file setTimeout("failEvents();", 15000); // after 15 seconds display error message document.getElementById('errorDisplay').value = inProgressMSG; // show in-progress message showMSG(); setTimeout("showMSG();", 5000); // hide in-progress message after 5 seconds verifWin.document.open(); verifWin.document.location.href = fullURL; // trys to find user-file verifWin.document.close(); } function passEvents(data){ // Events that occur for valid login var URL = data; location.href=URL; } function failEvents(){ // Events that occur for invalid login document.getElementById('errorDisplay').value = userFailMSG; showMSG(); } function showMSG() { // Controls the opening/closing of messages if ((document.getElementById("isShown_errorConsole").value)=="N") { document.getElementById("errorConsole").style.display=''; document.getElementById("isShown_errorConsole").value="Y";} else if ((document.getElementById("isShown_errorConsole").value)=="Y") { document.getElementById("errorConsole").style.display='none'; document.getElementById("isShown_errorConsole").value="N";} } </script><table width="250" border="0" cellpadding="1" cellspacing="5" bgcolor="#9FB8FF"> <tr> <td bgcolor="#9FB8FF" align="center"><b><font size="4" color="#FFFFFF">Authorization Required</font></b></td> </tr> <tr> <td bgcolor="#FFFFFF"><form action="javascript:login();" method="get" name="LoginScript" id="LoginScript"> <table border="0" cellspacing="10" cellpadding="0" width="100%"> <tr> <td> Username</td> <td align="right"> <input name="username" id="username" type="text" style="border:1px solid #828177;" value=""> </td> </tr> <tr> <td> Password</td> <td align="right"> <input name="password" id="password" type="password" style="border:1px solid #828177;" value=""> </td> </tr> <tr> <td><iframe name="verifWin" src="" width="1" height="1" frameborder="0" border="0"></iframe></td> <td align="right"><input name="submit" type="submit" style="border:1px solid #9FB8FF;color:#FFFFFF;background-color:#9FB8FF;" value="Login"></td> </tr> </table> </form></td> </tr> <tr> <td bgcolor="#FFFFFF"> <input type="hidden" id="isShown_errorConsole" value="Y"><span id="errorConsole" style="display:;"> <input type="button" id="errorDisplay" style="width:100%;background-color:#FFFFFF;border:0px;" value="Error: Please enable Javascript"></span><script language="javascript" type="text/javascript">showMSG();</script> </td> </tr> </table>