-1

I want to create a simple page where the user can type in different passwords that leads to different pages. One password is "dogs" and leads to a dog page. One password is "cats" and leads to a cats page etc. Basically multiple password from one password field.

Here's what I got so far:

    <!DOCTYPE html>
<html>
<head>
    <title>Login page</title>
</head>
<body>
<form>
    <label for="pswd">Enter your password: </label>
    <input type="password" id="pswd">
    <input type="button" value="Submit" onclick="checkPswd();" />
</form>
<!--Function to check password the already set password is dogs-->
<script type="text/javascript">
    function checkPswd() {
        var confirmPassword = "dogs";
        var password = document.getElementById("pswd").value;
        if (password == confirmPassword) {
             window.location="dogs.html";
        }
        else{
            alert("Passwords do not match.");
        }
    }


</script>
</body>
</html>

This code is for dogs.html:


<!DOCTYPE html>
<html>
<head>
    <title>Dogs page</title>
</head>
<body>
<h1>Welcome!! you entered the DOGS password</h1>
</body>
</html>
astraytel
  • 17
  • 2
    I think it looks like a good start. – emilsteen Jun 23 '22 at 22:29
  • why not have a map from passwords to urls, then on click can see if its in map and nav to url if so – matttm Jun 23 '22 at 22:34
  • 2
    If you want actual password protection, you need to implement it in the backend. – Bergi Jun 23 '22 at 23:02
  • People can just use CTRL+U or Inspect (CTRL+SHIFT+I) to see the password, you want to use a backend language like PHP, and then send the request to a page called "login.php" which processes the login. Plus, anyone can just go to dogs.html anyway since there is no proper password protection. https://stackoverflow.com/questions/4115719/easy-way-to-password-protect-php-page – ethry Jun 25 '22 at 00:04
  • If you really need to store passwords in the frontend, store them hashed and then hash the form input in the backend, and check the newly hashed input against the already hashed password. You can hash with `password_hash()` in PHP. – ethry Jun 25 '22 at 00:13

1 Answers1

1

This is not how you safely store passwords. Anyone that has access to your website will have access to all possible passwords.

Here is a nice way you might go about doing this. You could have an array of objects representing each page/password. When a user enters a password, the function will look for the object that matches in the array, and will return the page. If it doesn't exist, your alert will popup.

const passwords = [
    {
        pass: "dogs",
        page: "dogs"
    },
    {
        pass: "cats",
        page: "cats"
    },
    {
        pass: "anotherpassword",
        page: "secretpage"
    }
];

function checkPswd() {
    const passInput = document.getElementById("pswd").value;
    const passMatch = passwords.find(o => o.pass === passInput);
  
    if (passMatch ) {
        console.log(`Redirecting to: "${passMatch.page}"`);
        window.location = `${passMatch.page}.html`;
    } else {
        alert("Passwords do not match.");
    }
}
squidee_
  • 120
  • 9