How to create a JavaScript Password Protected Area

How to create a JavaScript Password Protected Area

Simple

The simple password example is not only one fo the more secure type of JavaScript password protection (because people cannot just view the code and read the password) but also the easiest to implement.

The way this script works is it takes whatever the user imputs into the Password box and adds .htm onto the end of it. So, if I wanted my password to be "david" I would create a page, or rename one of my existing pages, to david.htm. When the password box pops up, I type in david and the script adds on to it .htm and off I am taken to that page. As you can see the scipt knows nothing about the password, it only takes what the person inputs and adds .htm ot the end.

Here is what you need to do:

Step 1: Copy this code:

<!-- Begin

var password = ''

password=prompt('Please enter your password:','');

if (password != null) {

location.href= password + ".htm";

}

// End -->

</script>

Step 2: Open FrontPage and create a new page

Step 3: Switch from normal view to HTML view

Step 4: Paste the code you copied above into the <body> portion of a new page you have created in FrontPage

Step 5: Either create a new page to be your password protected page or use one of your existing pages as your passwrod page.

Trouble-shooting:

If your page is not working be sure that your file is named .htm and not .html. It won't find it unless it is named exactly right.

Multi User

The multi user password is much less secure. To find out the password all a user needs to do is to view the source of a page and read the user names and passwords from the source. However, most people do not know this and this is still an O.K. type of password protection. It also looks better in that you can set up multiple passwrords and user names.

How to use this:

Step 1: Copy this code into the <head> portion of a new document

<!-- Begin

function Login(){

var done=0;

var username=document.login.username.value;

username=username.toLowerCase();

var password=document.login.password.value;

password=password.toLowerCase();

if (username=="david" && password=="pass") { window.location="index.html"; done=1; }

if (username=="member2" && password=="password2") { window.location="page2.html"; done=1; }

if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; }

if (done==0) { alert("Invalid login!"); }

}

// End -->

</script>

Step 2: Change the username and password fields to the ones you wish to use and the location of where you want to send people. You can also add in addtional passwords and usernames by coping the line below and pasting it below the last password line in the script. For example:

if (username=="david" && password=="pass") { window.location="index.html"; done=1; }

If I wanted my username to be bill I would change david above to bill. If I wanted the password to be HKOL I would change pass to HKOL. If I wanted to send people to another page than the index.html page I would change that to the page I wanted people to go to.

Step 3: Paste this code into the <body> portion of your page:

<tr>

<td colspan="2"><div align="center"><center><p><font size="+2"><b>Members-Only Area!</b></font></td>

</tr>

<td>Username:</td>

</tr>

<td>Password:</td>

</tr>

</tr>

</table>

</form>

Step 4: Modify the button names and labels if you wish to read something else. You can edit these in the normal FrontPage mode by just double clicking the button and changing the name or deleting the text and inserting new text for the labels.

That's all there is to it.