Password Protected Pages - Easy and Flexible

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Password Protected Pages - Easy and Flexible

Post by 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
Last edited by kees on Wed Jun 18, 2008 10:50 pm, edited 3 times in total.
Post Reply