CODEWITHSUNDEEP
javascripthtml
LouTrev
LouTrev

Reputation: 49

Password Protect Page

I took the following code from another webpage "http://www.javascriptkit.com/script/cut10.shtml".

<SCRIPT>
function passWord() {
    var testV = 1;
    var pass1 = prompt('Please Enter Your Password',' ');
    while (testV < 3) {
        if (!pass1) history.go(-1);
        if (pass1.toLowerCase() == "letmein") {
            alert('You Got it Right!');
            window.open('protectpage.html');
            break;
        } 
        testV+=1;
        var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
    }
    if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1);
    return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>

It works only in case the password is entered a second time, but not when it is entered the first time. When you enter the password it says the wrong password prompting you to enter the password again and then it goes through. I need a script that shall prompt me of the correct password, in case I enter the wrong password. Can anyone help me with the code as I am a beginner in JavaScript?

Upvotes: 2

Views: 32871

Answers (5)

Eugene P.
Eugene P.

Reputation: 1814

If you use a library to render the UI, you can use this function:

export function setPasswordToEnter({
  password,
  localStorageKey,
  errorMessage,
}) {
  if (
    !password ||
    (localStorageKey && localStorage.getItem(localStorageKey) === password)
  ) {
    return;
  }

  const input = prompt('Enter the password to continue:');

  if (input !== password) {
    alert(errorMessage || 'Incorrect password');
    throw new Error(errorMessage || 'Incorrect password');
  }

  if (localStorageKey) {
    localStorage.setItem(localStorageKey, input);
  }
}

Run before the render function:

setPasswordToEnter({
  password: 'password',
  localStorageKey: '[myapp] password to enter'
});

React Example: https://stackblitz.com/edit/password-to-enter-react?file=src/index.js

P.S. You should definitely get your password from env variable if possible.

Upvotes: 0

user6928690
user6928690

Reputation:

I used the same exact code that you have and the problem is the the first time for don't know what reason it added one space in front of the input. Just make sure that you don't have that and it will be fine.

Upvotes: 0

user8199654
user8199654

Reputation: 

//Add this to you script
function run(){
var password = prompt("Password Please");
//Change to your own Password
if(password != 'Sameer'){
document.body.innerHTML = '';
document.body.innerHTML = 'Password Failed! Reload to Renter Password';
}else{
alert('Success');
}
}
run();

Upvotes: 3

Luke
Luke

Reputation: 14128

Your code appears to work when visiting the link.

I know you're learning. Still, you shouldn't be doing authentication like this though as you're not really protecting anything. Anyone can read the source code by using the "View Page Code" option in any browser (typically right click on the page). This means anyone can easily get your password.

For true authentication you should be using either a server side language (like PHP), or HTTP Digest authentication configured by your web server. Digest is a bit out of date as it uses MD5, but it's a million times better than what you're doing.

For more information about setting up HTTP Digest with Apache web server see:

http://httpd.apache.org/docs/2.2/mod/mod_auth_digest.html

For doing the same with Nginx:

http://wiki.nginx.org/HttpAuthDigestModule

The HTTP Basic authentication works too, but it transmits the password from the user's browser in plain text. With HTTP digest the password is hashed.

Knowing that you're learning JavaScript, your best bet is to configure the web server you're using. Since most web hosting services use Apache, you can most likely use an .htaccess file. You can search ".htaccess http digest" for tutorials on how to set this up.

Some web hosting services have control panels that have a feature to protect directories using Digest/Basic auth. In cPanel, which is quite common, it's called "Password Protect Directories".

If you were more advanced I would suggest doing it in PHP, but thats a rather complicated subject.

Upvotes: 5

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Try this.. Just add access denied prompt inside the false case...

  function passWord() 
    {
             var testV = 1;
             var pass1 = prompt('Please Enter Your Password',' ');
             while (testV < 3) 
             {
                    if (!pass1) 
                    {
                           history.go(-1);
                           var pass1 = prompt('Access Denied - Password Incorrect, Please Try     
                           Again.','Password');
                    }
                    else if (pass1.toLowerCase() == "letmein") 
                    {
                         alert('You Got it Right!');
                         window.open('protectpage.html');
                         break;
                    } 
                    testV+=1;

              }
              if (pass1.toLowerCase()!="password" & testV ==3) 
              history.go(-1);
              return " ";
    }

Upvotes: 0

Related Questions