How do…
It’s time for script number two in our run of Script Tips dealing with passwords. This time around we play with a script by Alex Keene he calls PW33. It was first sent to JavaScript Goodies for pasting back in 1997. It’s a clever script that not only works as a password system, but the author has put in a lot of status bar commenting so the script appears to be prompting you as you work with it.
Since this script deals with form elements, we’ll hit them first.
<BODY BGCOLOR=”#00FF00″ onLoad=”window.status=(‘You will need a password and username to proceed further…’);”>
<P ALIGN=”CENTER”><BR><FONT SIZE=”5″ FACE=”Arial”><U><B>Login</B></U></FONT></P>
<FORM NAME=”iAccInput”>
<TABLE
BORDER=”3″>
<TR>
<TD ALIGN=”RIGHT”><FONT SIZE=”3″ COLOR=”#FF0000″ FACE=”Arial”><B>User
Name:</B></FONT><BR><BR>
<FONTSIZE=”3″ COLOR=”#FF0000″ FACE=”Arial”><B>Password:</B></FONT></TD>
<TD><INPUT TYPE=”TEXT” NAME=”iName” MAXLENGTH=”15″><br>
<INPUT NAME=”iAccID” MAXLENGTH=”15″ HEIGHT=”50″></TD>
<TD><INPUT TYPE=”BUTTON” VALUE=” Login ” onClick=”Getstats()” HEIGHT=”40″ WIDTH=”50″><BR>
<INPUT TYPE=”RESET” VALUE=” Reset ” onClick=”window.status=(‘RESET: Please enter your USERNAME and ACCOUNT ID.’)” WIDTH=”50″>
</TD></TR></TABLE></CENTER>
The BODY portion of the script starts, of course, with the BODY flag. Inside that flag is the first window.status statement. The text is “You will need a password and username to proceed further…”. It is posted to the status bar through an onLoad Event Handler. It has nothing to do with the script, but it’s a nice helper application to better the effect.
A form containing two text boxes and two buttons is contained within a three-celled table.
The form itself is named “iAccInput”. The text box that will contain the username is named “iName”. The text box that will contain the password is named “iAccID”.
The Login button is set to trigger a function called Getstats().
The Reset button will reset the form of course, but in addition it will also post text to the status bar through an onClick Event Handler. Again, nothing to do with the script, but a nice little addition nonetheless.
The Function
The function Getstats() is the engine that does the work here. Again, it could be a lot smaller than this but the author has set up a few more status bar statements to add to the effect.
function Getstats()
{
window.status=(‘Attempting to Login to user area.’)
var AccId;
var iName;
AccId = document.iAccInput.iAccID.value
iName = document.iAccInput.iName.value
First, when you click the button, the status bar notes that you’re trying to log in. See that right under the function statement?
Next, the variables “AccId” and “iName” are brought into play. No value is assigned just yet. We’re just bringing them into the script for later use.
Now we give them values. “AccId” will get the value of the first text box and “iName” will get the value of the second. Notice the hierarchy statements are there to assign value.
Now we need to test it.
if (AccId == “” || iName == “”)
{
alert(‘nERRORnYou must enter ALL Details,nto View your statistics.n’);
window.status=(‘Missing data or Invalid. Check spelling and Ensure Names are in Correct Case.’)
}
else
{
var location=(“pw” + iName + AccId + “.html”);
this.location.href = location;
window.status=(‘ Verifying: ‘ + iName + ‘-‘ + AccId + ‘ Please wait……..’);
}
}
As with any of these password scripts, the password is either right, wrong, or nothing’s been entered so we need to prepare for all three.
We start by asking if the value of “AccId” or (||) “iName” is empty. Note the empty quote marks. Yes, we could have checked if both were empty by using && instead of ||, but what if one was and the other wasn’t? This is the method that will cover the most ground in one line.
If that’s the case, then an alert pops up proclaiming that you must enter All Details. The n within the text are escape characters that represent a new line. Each one starts a new line of text with what follows it.
Plus you get another status bar warning to try again.
But if the user enters text in both text boxes, the else statement is enacted.
First a variable “location” (which isn’t a good one by the way – never name a variable after an actual JavaScript command – I left it just to say that) is given the value of “pw” plus what the user wrote in the “iName” and the “AccId” text boxes.
Then the value of “location” is used as the location of the next page. Of course then you get another status bar statement that doesn’t help the script but looks good anyway.
See what happened? We built the address of the page that is password protected. In the case of the example offered here, the login was “script” and the password was “tip”. Using this script we went to a page titled “pwscripttip.html”.
The pw was entered by the script and the rest of it was entered by the user. If the user doesn’t get the login and password right, then they get a 404 error that the page they’re trying to reach doesn’t exist. Now, with servers being so picky about even capitalization, the script is even a little more effective.
I actually like this type of password script. You can’t get the password from the script itself and the browser takes care of the bad logins for you.
The one downfall of this script is that the password and login are the name of the page. But what if we could make the password different from the page name? Next time we’ll get into another script that works much like this one except the password is encrypted using arrays. The password is entered and altered into the page name
by the script. It works a lot like this script but its far harder to crack.
Next Week: Array Password Protection
Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at: jburns@htmlgoodies.com. |
