Password Protected Pages - Easy and Flexible

[kees]

This article describes two methods of Password Protected Pages using JavaScript. The methods work almost identically: the filename is the password. For example: your secret page is 'ABC123.html', then the password is 'ABC123'.
The code is placed on the calling page. Only when the visitor types the correct filename/password he gets the secret page.

Method I

The first method uses a prompt box for asking the password. It can be added to any WWB-object that can act as a link: Text, Image, Shape, GoMenu, Menubar, Navigationbar, etc.

1. Bring up the Page HTML dialogue, select 'Between Head Tag' and insert this:

Code: Select all

<script type="text/javascript">
  function PPPage_I(target){
    if (!target){
      target = '_self'
    }
    var password = prompt('Password required:','');
    if (password){
      NewWin = window.open(password+'.html',target);
      window['NewWin'].focus()
    }
  }
</script>

2. Bring up the concerning Object Properties dialogue and change it to:
Link To: Web Side
URL: javascript:PPPage_I('_self')
Target: Open in the same browser window

In the URL-line you can set the 'target' (the window/frame/iframe where the new page will appear). You can change '_self' to the aimed target. If you keep '_self', then the new page will replace the current page.

Method II

The second method uses an editbox for asking the password.

1. Bring up the Page HTML dialogue, select 'Between Head Tag' and insert this:

Code: Select all

<script type="text/javascript">
  function PPPage_II(password,target){
    if (!target){
      target = '_self'
    }
    if (password){
      NewWin = window.open(password+'.html',target);
      window['NewWin'].focus()
    }
  }
</script>

2. Create a Form Area. Bring up its HTML dialogue, select 'Inside Tag' and insert this:

Code: Select all

onSubmit="PPPage_II(this.secretpage.value,'_self');return false"

3. Put an Editbox in the Form Area. Bring up the Editbox Properties dialogue and change it to:
Name: secretpage
Password Field: Yes (if you wish)
4. Put a Push Button to the Form Area. Bring up the Button Properties dialogue and change it to:
Button type: Submit

In step 2 you can set the 'target' (the window/frame/iframe where the new page will appear). You can change '_self' to the aimed target. If you keep '_self', then the new page will replace the current page.
The Push Button (step 4) can be omitted, then a visitor has to press Enter on the keyboard.

Notes:
- The filename/password is visible when using the prompt box.
- The filename/password is visible in the URL-bar of the browser, except when using a frame/iframe.
- There is no error trapping. Asking for a non-existing page gives a 'not found' error.
- Be sure there is always an 'index.html' in the folder, otherwise a visitor can call up a file list (including your secret file).
- If the protected page contains some hyperlinks, these hyperlinks are protected too!

Updates:
19-06-2008: Step I-2 (Target:) adapted to WebBuilder 5