Quick & Easy way to hide and request a password to view a page

hexdj · Post by **hexdj** » Fri Nov 09, 2007 12:18 am

This is a very basic way to password protected a page, it's not meant to be the most secure, but if it's just something that you need to hide from some people, this might be the way for you to do it.

I am going to explain how I implemented it in my site, although it's not the only way to do it.

First off I uploaded a login.html page in my cmsms uploads folder, such file contains the following code:

Code: Select all

<__html>
<head>
<TITLE>Secret Page Login</TITLE>

<__script__ LANGUAGE="JavaScript">
<!--- 
function goForit() {
  var location;
  var password;
  password=this.document.testform.inputbox.value
  location= "../" + password + ".html";
  fetch(location);
  theKeeper=window.close()
}

function fetch(location) {
  var root;
  if (opener.closed) {
    root=window.open('','theKeepersGopher',                  'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no');
    root.location.href = location;
  } else {
    opener.location.href = location;
  }
}

// End hiding --->
</__script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>

</__body bgcolor="#520606">

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD> <div align="center">
  <p>Please enter Password:</p>
</div>
  <CENTER>
  <FORM NAME="testform">
    <p>
      <INPUT TYPE="text" NAME="inputbox" VALUE="" size=20> 
      <INPUT TYPE="button" NAME="button" Value="Submit" onClick="goForit(this.form)">  
	   <br />
    <p>Please note: Password is case sensitive and you <strong>MUST</strong> press the submit button to login.</p>
  </FORM>
</CENTER>
</TABLE>

<__body>

</__html>

I didnt write this script but you can find more about it here:
http://www.pagetutor.com/keeper/index.html
The way this script works is that the password that is entered must match the name of the page that people are going to see. For example if my secret page is called supersecret.html then the password will be "supersecret". Keep this in mind.

Since CMSMS will manage your pages and specially if you have pretty URLS you probably won't be able to create a supersecret.html page as part of your site. Fear not.

What I did was add the following line to my .htaccess file

Code: Select all

Redirect /supersecret.html http://www.mysite.com/index.php/super-secret-page

Remember, index.php/super-secret-page is an actual cmsms content page.

Next go and edit the content page from which you want people to login. Make a regular link with TinyMCE and in the Link URL enter uploads/login.html (or the path you used for your file) and in the Popup tab make sure you check Javascript popup and here you can set the dimmensions for the popup and so on.

That's it, when people click on the link they will get a popup asking for the password.

OTHER USEFUL THINGS
1. if you want to change the password for your page you will simply have to change the first parameter in the Redirect rule of your .htaccess file, for example if I decide I want the password to be area51 I would simply change the Redirect rule to:

Code: Select all

Redirect /area51.html http://www.mysite.com/index.php/super-secret-page

2. You can style your login.html any way you want, I prefered to style it inline, since it's such a simple login page, I have not tried making the login popup page an actual cmsms content page but my guess is it won't work particularly if you use pretty URLs.

3. If you save your login.html to a different location other than the one in this example, make sure the script can find it (look at the LOCATION = .... line below)

Code: Select all

function goForit() {
  var location;
  var password;
  password=this.document.testform.inputbox.value
  
  location= "../" + password + ".html";

  fetch(location);
  theKeeper=window.close()
}