Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to password protect a page?

    I need help with a code which should do the following: when clicking on an image the user should be prompted to enter a password that when entered correctly will take the user to that password protected page.

    I have some code already that was done by another person who originally created the website, but I don't want the password to be visible anywhere (not in the code or when entering it in).

    This is what I have so far:

    function whereTo()
    {
    var magic_word = prompt("Enter Password","");
    if(magic_word == "password")
    {window.location = "index.html";}
    else if (magic_word == "letmein")
    {window.location = "staffsite.html";}
    else
    {window.location = "index.html";}
    }

    Then later in the code:
    <a href="staffsite.html" onClick="whereTo();return false"><img src="images/tooth.gif" width="51" height="72" border="0"></a>

    Any help is greatly appreciated.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    JS is not the language for password protection. Looks like you'll be learning a server side language. I recommend php.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2006
    Location
    Idaho
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Option

    Here's a simple option. It let's you "password" protect as many pages as you want since the password(s) is/are actually the page file name minus the .htm extension. Not high security but effective for simple applications. _Aerospace_Eng_ is right if you need anything more advanced.

    Code:
    <script>
    function getPW(){
    var password = ''
    password=prompt('Please enter your password:','');
    if (password != null) {
    location.href= password + ".htm";
    }
    }
    </script>
     
    <a href="javascript:getPW();">Text or Image here</a>
    Not sure if this helps or not.
    Last edited by Scriptbanger; 08-24-2006 at 07:59 AM.
    .
    + Christ is the Rock - Rock On!

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It seems like the code you gave me is doing pretty much the same thing that my code is doing. It does help me a lot to know that I will need a server side language to have it more secured. For now I am going to keep what I have so far but I was wondering if you knew how to make the letters being typed in the password box invisible? (How to hash them)

    Here's my code again:

    function whereTo()
    {
    var magic_word = prompt("Enter Password","");
    if(magic_word == "password")
    {window.location = "index.html";}
    else if (magic_word == "letmein")
    {window.location = "staffsite.html";}
    else
    {window.location = "index.html";}
    }

    <a href="staffsite.html" onClick="whereTo();return false"><img src="images/tooth.gif" width="51" height="72" border="0"></a>

    Thanks for the help in advance.


    Quote Originally Posted by Scriptbanger
    Here's a simple option. It let's you "password" protect as many pages as you want since the password(s) is/are actually the page file name minus the .htm extension. Not high security but effective for simple applications. _Aerospace_Eng_ is right if you need anything more advanced.

    Code:
    <script>
    function getPW(){
    var password = ''
    password=prompt('Please enter your password:','');
    if (password != null) {
    location.href= password + ".htm";
    }
    }
    </script>
     
    <a href="javascript:getPW();">Text or Image here</a>
    Not sure if this helps or not.

  • #5
    New Coder
    Join Date
    Aug 2006
    Location
    Idaho
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you wanting them to appear as ******?

    If so, that works in a '<form><input type="password"></form>'. I don't think you can get a prompt box to do that.

    You will need to either put the login onto the page with '<form><input type="password"></form>' or you will need to put it in a separate page and do a whole window.open routine where you design a pop-up that opens the second page that holds the password form.
    .
    + Christ is the Rock - Rock On!

  • #6
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    If you want to protect, very basicly have a link to your protected page from your image like so:

    <a href="protectedpage.htm"><img src="image.gif"></a>
    ok your protected page looks like this:
    <html>
    <head>
    <title>Pass Protected.</title>
    <script language="javascript" type="text/javascript">
    var password;
    var pass1="test";
    password=prompt('Please Enter Your Password:');
    if (password==pass1) { alert('Correct!'); }
    else
    {
    window.location="index.htm";
    }
    </script>
    </head>
    <body>
    <a href="http://ambitous-spirit.freehostia.com">your hidden content.</a>
    </body>
    </html>
    Explain:

    When you click the image link on 'previouspage.htm', you go to the password protected page, where it prompts for a password. The password that works is
    'test'. You can add more passwords for more people or you can add usernames simply.To this very script in use go to http://www.freewebs.com/jsstest. However my htm and js isn't up-to-scratch so there my be mistakes.
    Let me know for any questions.
    Last edited by GSimpson; 08-26-2006 at 09:23 AM.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #7
    New Coder
    Join Date
    Aug 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your guys' help. I tried your code but the letters are still showing up when you type in the password. I think I got the idea that if I want it protected I will need server side scripts such as php or sql.

    I was also wondering if anybody knows how to get a script or something, to do the following: when the user receives a new email into their inbox I want a small window to pop-up from the bottom right corner of the screen telling them that they have a new email.

    Thanks for your help.
    AR

  • #8
    Regular Coder GSimpson's Avatar
    Join Date
    Aug 2006
    Location
    New Zealand
    Posts
    268
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Like as script banger said, I don't think you can **** a prompt box.
    next,
    if someone has there windows messenger open then it should tell them in outlook express popup, however they would have to be on your website and it would have to be an automatic thing that it displays. It won't have permission to access their gmail or what ever to see if it got a new e-mail.

    So you'll probably find yourself using css on this one.
    if you don't know what css is, its creating layouts and themes for your website.
    The internet is my Sandbox, and notepad is my Spade n' Bucket.

  • #9
    New Coder
    Join Date
    Aug 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually what I want is for example: for me to be able to receive this email notification. If I'm working on a computer at an office I would want to be notified if I have new email in my inbox. Patients send email to schedule an appointment and I would want to know right away if an email came in so I could check my inbox.

    What I want is a small pop-up box to come up from the bottom right corner of the screen saying "You've got mail." I don't know if my email has to be open for this to work. (I want it to be kind of like the box that comes up saying your download is complete).

    Quote Originally Posted by GSimpson
    Like as script banger said, I don't think you can **** a prompt box.
    next,
    if someone has there windows messenger open then it should tell them in outlook express popup, however they would have to be on your website and it would have to be an automatic thing that it displays. It won't have permission to access their gmail or what ever to see if it got a new e-mail.

    So you'll probably find yourself using css on this one.
    if you don't know what css is, its creating layouts and themes for your website.

  • #10
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    THere is a way to pwd protect a page without the password being seen, using javascript, but as others have said. It's not as secure as a server side scripting language.

    First thing you need to do is create a page with 2 frames. ie
    ---
    <frameset rows="100,0" frameborder="NO" border="0" framespacing="0">
    <frame src="./pagewithpicture.html" name="mainFrame">
    <frame src="./secretpasswdpage.htm" name="bottomFrame" scrolling="NO" noresize>
    </frameset>
    <noframes>
    ---
    obviously dont call it 'secretpasswdpage'. otherwise it will be easier to find. Notice i've made the mainFrame 100% of the screen and the bottomFrame 0%. This makes that page impossible to access from your main page. ie Cant right-click to view source or 'View' -> 'Source'


    Now you have this page done. Next make the 'sercretpasswdpage.htm'. Make a basic page layout the same as below but with the passwd or passwords you wish to use.

    ---
    <html>
    <title></title>
    <head>
    </head>

    <body onFocus="window.location="pagewithpicture.html">
    <input name="pwds" type="hidden" id="pwds" value="yourpasswd" >
    </body></noframes>
    </html>
    -----
    Notice the onFocus command. This is so that if someone viewed the source of the main frameloader page they would see the secretpasswdpage.htm and try to load it into the browser so they could view source. This just automatically loads the picture page before it even loads the secretpasswdpage.htm. ( if they really wanted to they could use a download manager to download the html file then edit source. But you can also CHMOD so they dont have download rights.

    Ok just about done. Note that if you wanted to get serious there are a few encryption algorithms floating around for jScript that could make it tough for people to work out.

    Now we just need to put the code for clicking on the picture and entering the password. It looks like this

    <script language="JavaScript1.2">
    var attempts = 0
    var maxattempts = 4
    function startpasswd(){
    status = "You have " + (maxattempts - attempts) + " attempts left!";
    password = prompt("Enter Password to view page","");

    if(attempts == maxattempts){window.location = "denied.html"; return;}

    if(password == parent.bottomFrame.document.all['pwds'].value){ window.location = "done.html";}
    else {
    alert("Password Authentication Failure!");
    ++attempts;
    status = "You have " + (maxattempts - attempts) + " attempts left!";
    startpasswd();
    }

    }
    </script>

    and for the image add the onclick command below.

    onclick="startpasswd()"


    Simple done. It works pretty well and will keep out people who dont have any time to try and get in.

    Sorry about the length of post

  • #11
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Here is a small encryption script i made which works ok. You can add it to the hidden frame page. Ill let you work that one out.

    Code:
    function encryptme(stbase){
    
    var encrypted = new String;
    var tmp = 0.0;
    var str = stbase;
    
    for (var i = 0; i < str.length; i++) {
       tmp = str.charCodeAt(i); 
       tmp ^= 0x0F;       
       encrypted += String.fromCharCode(tmp); 
    }
    
    if(encrypted == document.all['pwds'].value){
    	
    	return(true);
    
    }
    else { return(false);
    }
    }
    </script>
    just put a hidden input field on the page with the id "pwds" and the value will be the encrypted password. To get this value you will have to run a string through the above function. write down the outputed encrypted value then add it. done

    now on the main frame add.
    --
    if(parent.bottomFrame.encryptme(password)) { window.location = "blah.html"}

    obviously you wont put the name of the page you want to load with the correct password. you would have to stuff around with pwd checks and opening new frames so the destination is hidden.
    pretty simple
    Last edited by elfpickle; 08-28-2006 at 01:41 PM.

  • #12
    Registered User
    Join Date
    Oct 2004
    Posts
    592
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by _Aerospace_Eng_
    JS is not the language for password protection. Looks like you'll be learning a server side language. I recommend php.
    I support Mr _Aero's idea. We've discussed about this last year or a long time ago.

    The only way is to encrypt your JavaScript code before planning to protect with password.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •