CodingForums.com - Password Protection Code modification

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Password Protection Code modification (http://www.codingforums.com/showthread.php?t=283814)

Password Protection Code modification

I am using a password protect code from http://javascriptkit.com/script/cut34.shtml . The code works perfect for me since i need to have different passwords to access different pages in the same interface, and here the password is the name of the html files.

Concept Used: The pop up window asks for password and then looks for an html file with the same name in the root folder. If there is no such file then the pop up stays and the base page returns again.

Modification Needed: I want to make the code look for the html file in a specific folder instead of in the root.

I changed the 5th line of the following code to make it location=\/folder\/password +".html"

But it does not work. Kindly suggest me my mistake. needless to say that I am a beginner. Your help shall be highly appreciated. Thanks

Code:

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;

  }

}

location='foldername/'+password + ".html"

or

location='/anotherfoldername/'+password + ".html"

Thank you so much. The first one worked.

By entering the wrong password it tries to open the respective non existent html file in the folder in the directory. and stays there with a file not found page. Is there any way in using javascript, the page can be redirected to a predefined page when the user enters a password(wrong), and no such html file exists in the folder ?

Please guide.

A thought occurs that you could try to load the page in a hidden iframe, using onload to try to reference an element on the page, even document.body, and if this fails redirect to another page. But I don't know without a little googling whether onload fires if the page is not found(?).

[I think there might be another way to do this using ajax or some other similar technology.]

But given that this is not secure at all.. you could store the passwords in an array and check if the one they've entered exists in the array.

Thank you Andrew. That seems to be a clever idea. I do not have adequate know how to execute that though. I am getting the files hosted and hopefully configuring a 404 not found page might help. I will continue to investigate. Thank you again.

Yes I was reading a little further. If you provide your own 404 page then there will be something on the page that you can refer to that identifies it. Or, of course, this 404 page could offer to redirect the user.

I had what I thought was a clever idea, which was to wait for onload to complete and just read the location (the address); if it's different then the page they were seeking doesn't exist. But I don't know if this would work. Something like:

Code:

var oIframe = document.getElementById("secretIframe");

oIframe.onload = function () {

    // for compatibility

    var oDoc = oIframe.contentWindow || oIframe.contentDocument;

    if (oDoc.document) {

        oDoc = oDoc.document;

    }

    alert(oDoc.location.href);

    if (oDoc.location.href != thePasswordAddress) {

        // that is, having stripped out 'http://'

        // 404 - out of luck!

    }

};

Anyway, good luck. Andy.

Andy I would like to test this idea. Please correct me

So I need to put an i frame with id=secretIframe

and then put the contents of the above code in the password seeking pop up window.
What else do i need to do to achieve the redirection back to the predefined page.. where in the code does it define the predefined page.

You could play with the following. But, erm...., it's not quite working?! Added: actually, I think it is working, if uploaded to a server.

Code:

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>



<script>

    var thePasswordAddress = "not_carousel.html";

    window.onload = function () {

        var oIframe = document.getElementById("secretIframe");

        oIframe.onload = function () {

            // for compatibility

            var oDoc = oIframe.contentWindow || oIframe.contentDocument;

            if (oDoc.document) {

                oDoc = oDoc.document;

            }

            var newLoc = oDoc.location.href;

            //console.log(oDoc);

            alert(newLoc);

            if (newLoc.indexOf(thePasswordAddress) + 1) {

                alert('Yes, it is the correct page!');

            } else {

                // 404 - out of luck!

                alert('Doh! Not found!');

                window.location = "dragto.html";

            }

        };

        oIframe.src = "carousel.html";

    };



</script>

</head>

<body>

<h1>Just a Heading</h1>

<iframe id="secretIframe">Hello</iframe>



</body>

</html>

I tested the code in dropbox using the web address.. and it seems to be working.. but I am not able to use the code with the password pop up page i am using...

@Andy, Please see this link https://dl.dropbox.com/u/25512757/Sand-Box/index.html (note for others who are seeing this link at a later date : it has been taken off. Sorry)

Currently since it is in dropbox server, it is giving a 404 page, but i want it to redirect to a predefined /dragto.html page if it is not leading the user to /Codebox/xyz.html

I understand that you are saying to put your code in the popup page. bur then where should I put the secretIframe, in the resulting page (treasure) ? Please help me..

nb. I am following you in another post in an alternative to make this happen in google app engine.

Haven't looked in detail but I'm guessing you can put the hidden iframe in the popup. If it succeeds then reload the same page in the main window, via window.opener.

I don't know what treasure refers to, unless it is a compliment :D

:D @Andy

I am not sure.. When I put the code in the popup then it shows a messagebox in the pop up itself, as soon as it loads and on clicking ok, takes me to the dump (dragto.html)... but the user never gets to input the password...

Here is the file structure I am using



Webroot

-index.html (the homepage)

-dragto.html ( refered to as dump)

-gate.html (the pop up )

-Codebox

--xyz.html (refered to as treasure)

The desired behavior is on clicking a button in index.html it opens the gate.html as a pop up. Then if you put xyz as the password in the popup, it takes you to /Codebox/xyz.html but entering anything else should take you to dragto.html.

The codes of pages without your code are the following.

Code of Index.html

Code:

<html>

<head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>The Home Page</title>

<SCRIPT LANGUAGE="javascript">

                <!--- Hide from tired old browsers

                var nifty_little_window = null; 

                function gateKeeper() {

                                nifty_little_window = window.open('gate.html', 'theKeeper',

                'width=390,height=200,top=450,left=500,resizable=no');

                }

                // End hiding --->

                </SCRIPT>

</head>

<body>

<div>

<h1>This is the homepage</h1></br><h2>If you enter password xyz in the following pop up you will get the trasure</h2></br><h3>giving any other password will take you to the Dump page</h3>

</div>





<form>

<input type="button" value="Submit" onClick="gateKeeper()" class="button">

</form>        

</body>

The code of gate.html

Code:

<HTML>

<HEAD>

<TITLE>Match Documents</TITLE>



<SCRIPT LANGUAGE="JavaScript">

function goForit() {

  var location;

  var password;

  password=this.document.testform.inputbox.value

  location='Codebox/'+password + ".html"

  fetch(location)

  theKeeper=window.close()

}



function fetch(location) {

  var root;

  if (opener.closed) {

    root=window.open('','theKeepersGopher','height=500,width=400,left=100,top=100,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no');

    root.location.href = location;

  } else {

    opener.location.href = location;

  }

}



// End hiding --->

</SCRIPT>





</HEAD>



<BODY>

<iframe id="secretIframe">Hello</iframe>

<FONT FACE="ARIAL" SIZE=2 color=#000><B>password xyz for treasure for any other password you will be taken to dump</B></FONT><BR>

&nbsp;





<CENTER>

<FORM NAME="testform">

<INPUT TYPE="password" NAME="inputbox" VALUE="" size=20 class="pass"><p>

<INPUT TYPE="button" NAME="button" Value="get treasure" onClick="goForit(this.form)" class="button">



</FORM>

</CENTER>



</BODY>



</HTML>

Sorry for pasting crude codes... right now if you go to the https://dl.dropbox.com/u/25512757/Sand-Box/index.html I have added your code in the pop up and it is not functioning desirably... Here are all the files you can test easily https://dl.dropbox.com/u/25512757/Sand-Box.rar Please guide me... Thank you...

Code:

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>



<script>

    var thePasswordAddress = "not_carousel.html"; // this is your variable named 'password'

    window.onload = function () {

        var oIframe = document.getElementById("secretIframe");

        oIframe.onload = function () {

            // for compatibility

            var oDoc = oIframe.contentWindow || oIframe.contentDocument;

            if (oDoc.document) {

                oDoc = oDoc.document;

            }

            var newLoc = oDoc.location.href;

            //console.log(oDoc);

            alert(newLoc);

            if (newLoc.indexOf(thePasswordAddress) + 1) {

                alert('Yes, it is the correct page!');

            } else {

                // 404 - out of luck!

                alert('Doh! Not found!');

                window.location = "dragto.html";

            }

        };

        oIframe.src = "carousel.html"; // take this line out

        // when you've obtained the password then use..

       // oIframe.src = "Codebox/" + password + ".html";

       // ..which will start the loading of the iframe.

    };



</script>

</head>

<body>

<h1>Just a Heading</h1>

<iframe id="secretIframe">Hello</iframe>



</body>

</html>

The alerts or only there for testing. And carousel and dragto are just .html files that I happened to have to hand :p

Aaaaaarggh!! Just seen the FONT FACE and CENTER tags in your HTML.. That is a very old script :mad:

FWIW carousel.html (not my work!!)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Carousel Slideshow</title>

<script type='text/javascript'>



function carousel(params){

  if(!(params.width>0&&isFinite(params.width)))params.width=100;

  if(!(params.height>0&&isFinite(params.height)))params.height=100;

  if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;

  if(!(params.steps>0&&params.steps<100&&isFinite(params.steps)))params.steps=20;

  if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;

  if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;

  if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();

  

  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");

  var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))

  cdiv.style.width=params.width+'px';

  cdiv.style.height=params.height+'px';

  cdiv.style.border=params.border;

  cdiv.style.position='relative';

  cdiv.style.overflow='hidden';

  cdiv.title=params.id;

    

  var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;

  interval=isNaN(interval)?200:interval;

  var img_position=[],images=[],img_dimension=[];

  var img_index=params.images.length+1,img_index_cap=2*params.images.length;

  var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;



  function init(){

    if(params.direction=="left" || params.direction=="right"){

      direction=params.direction;

      dimension="width";

      }

    else if(params.direction=="top" || params.direction=="bottom"){

      direction=params.direction;

      dimension="height";

      }

    else {

      direction="left";

      dimension="width";

      }      

    faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';

    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';

    var img=new Image();

    img.style.position='absolute';

    img.style[direction]=faraway;

    img.style.width=params.width-2*params.image_border_width+'px';

    img.style.height=params.height-2*params.image_border_width+'px';

    img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;

  

    for(var i=0;i<params.images.length;i++){

      images[i]=img.cloneNode(true);

      images[i].src=params.images[i];

      if(params.links&&params.links[i]&&params.links[i]!=''){

        targ=params.lnk_targets&&params.lnk_targets[i]||params.lnk_base||'new';

        if(targ=="_blank"){

          attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";

          images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");

          }

        else if(targ.substr(0,1)=="_"){

          images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");

          }

        else{

          attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";

          images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");

          }

        images[i].style.cursor=document.all?'hand':'pointer';

        }



      if(params.titles&&params.titles[i]&&params.titles[i]!='')

        images[i].title=params.titles[i];

      if(document.all)

        images[i].alt=images[i].title;

      images[i+params.images.length]=images[i];

      if(params.images.length==faces)

        images[i+2*params.images.length]=images[i];

      cdiv.appendChild(images[i]);

      }

  

    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);

    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;

    var pi_piece=2*Math.PI/params.steps/params.sides;

    for(i=0;i<=params.steps*faces;i++){

      img_dimension[i]=face_size*Math.sin(pi_piece*i);

      img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;

      img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';

      }

    }

  init();



  cdiv.rotate = function(){

    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);

    if(!spinning) return;

    if(++counter>=params.steps){

      counter=0;

      if(++img_index>=img_index_cap)

        img_index=params.images.length;

      }

    images[img_index-faces].style[direction]=faraway;

    for(var i=faces-1;i>=0;i--){

      images[img_index-i].style[direction]=img_position[counter+i*params.steps];

      images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];

      }

    }

  cdiv.onmouseover=function(){

    spinning=false;

    }

  cdiv.onmouseout=function(){

    spinning=true;

    }

  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);

  }

</script>

</head><body>

<div id='jake' style='width:180px;float:left;'>

<h4>Linkage</h4>All of these images will open a google search in single (reused) window.

<script type='text/javascript'>

carousel({id:'carousel_2',

          border:'',

          size_mode:'carousel',

          width:144,

          height:100,

          sides:4,

          steps:20,

          speed:8,

          direction:'right',

          images:['http://www.codingforums.com/images/icons/icon7.gif',

                  'http://www.codingforums.com/images/icons/icon8.gif',

                  'http://www.codingforums.com/images/icons/icon9.gif',

                  'http://www.codingforums.com/images/icons/icon10.gif',

                  'http://www.codingforums.com/images/icons/icon2.gif',

                  'http://www.codingforums.com/images/icons/icon3.gif',

                  'http://www.codingforums.com/images/icons/icon4.gif',

                  'http://www.codingforums.com/images/icons/icon5.gif',

                  'http://www.codingforums.com/images/icons/icon6.gif'],

          links: ['http://www.google.com/search?q=happy',

                  'http://www.google.com/search?q=angry',

                  'http://www.google.com/search?q=sad',

                  'http://www.google.com/search?q=big+grin',

                  'http://www.google.com/search?q=look+here',

                  'http://www.google.com/search?q=bright+idea',

                  'http://www.google.com/search?q=caution',

                  'http://www.google.com/search?q=question',

                  'http://www.google.com/search?q=cool'],

          lnk_base:'google',

          titles:['Happy',

                  'Angry',

                  'Sad',

                  'Big Grin',

                  'Look Here',

                  'Bright Idea',

                  'Caution',

                  'Question',

                  'Cool!'],

          image_border_width:1,

          image_border_color:'red'

          });

</script></div>

<div id='wendel' style="width:300px;float:right">

<h4>More Linkage</h4>Two photos share a single window, closing/reopening it with each click to allow the attributes to change. One photo opens in a _blank window, with another window added each click. The last photo opens in an iframe.

<script type='text/javascript'>

carousel({id:'Photos Courtesy of Dynamic Drive',

          border:'',

          size_mode:'image',

          width:140,

          height:225,

          sides:6,

          steps:20,

          speed:5,

          direction:'left',

          images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',

                  'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',

                  'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',

                  'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],

          links:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',

                 'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',

                 'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',

                 'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],

          lnk_base:'',

          lnk_targets:['photo',

                       'photo',

                       '_blank',

                       '_steve' ],

          lnk_attr:['width=200,height=300,top=200,menubar=yes',

                    'width=300,height=200,left=400,scrollbars=yes',

                    'width=150,height=250,left=300,top=100',

                    ''],

          titles:['Opens in \'photo\' window',

                  'Opens in \'photo\' window',

                  'Opens in blank window',

                  'Opens in iframe'],

          image_border_width:0,

          image_border_color:'blue'

          });

</script></div>

<iframe name='steve' style="margin-top:20px;width:300px;height:300px;border:0px solid white"></iframe>

</body></html>

I added the above code to the pop up file and placed a carousel.html in the root drive. But I am not getting the desired result. It does not give a chance to enter the password and then takes to the dragto.html everytime... May be I am missing something here. :(

Did you delete the line

Code:

oIframe.src = "carousel.html";

from its current location? Sounds like you've put code in the wrong place. Post the current js code.