JavaScript Login Username & Password-CodePudding

I am making a website for a school project, and in it, there is a login page. Right now, there is only 1 login username and password. How can I have TWO username and TWO passwords? I have tried the else if, but it didn't work. Any ideas? The code for the login is below. Thanks

function check(form) {
  if (form.userid.value == "admin" && form.pwd.value == "noahgrocery") {
    return true;
  } else {
    alert("Incorrect Password or Username")
    return false;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">

  <title>Login to Noah Grocery</title>
</head>

<body>
  <a href="index.html" >Home</a>
  <a href="contactus.html" >Contact Us!</a>
  <a href="products.html" >Products</a>
  <a href="cart.html">
    <img src="https://codehs.com/uploads/d1091610e3a63fb99a6d5608b94a0fa8" width="50px" height="50px" style="float:right; margin-right: 15px">
  </a>
  <a href="userlogin.html">
    <img src="https://codehs.com/uploads/a4a800a1e73c30e0f37382731c3b1234" width="50px" height="50px" style="float:right; margin-right: 15px; background-color: white;">
  </a>
  <center><img src="https://drive.google.com/uc?export=view&id=1NKWr5CjLNa7tYtO8a49xQ_mcWzMoWGg_" style="width:300px;height:300px;"></center>

  <form name="loginForm" method="post" action="admin.html">
    <table width="20%" align="center">

      <tr>
        <td colspan=2>
          <center>
            <font size=4><b>Login to Noah Grocery</b></font>
          </center>
        </td>
      </tr>

      <tr>
        <td>Username:</td>
        <td><input type="text" size=25 name="userid"></td>
      </tr>

      <tr>
        <td>Password:</td>
        <td><input type="Password" size=25 name="pwd"></td>
      </tr>

      <tr>
        <td><input type="Reset"></td>
        <td><input type="submit" onclick="return check(this.form)" value="Login"></td>
      </tr>

    </table>
  </form>


</body>


</html>

CodePudding user response：

There are multiple ways to do this, as you are new and its a school project I just kept it simple.

I wrapped each user/pass in () and added || as or between the two groups and added them on separate lines to make it obvious.

function check(form) {

  if (form.userid.value == "admin" && form.pwd.value == "noahgrocery"){
      form.action = "#";
      return true;
  }
  else if(form.userid.value == "admin2" && form.pwd.value == "noahgrocery2"){
      form.action = "#";
      return true;
  } else {
    alert("Incorrect Password or Username")
    return false;
  }
}

<a href="index.html" >Home</a>
<a href="contactus.html" >Contact Us!</a>
<a href="products.html" >Products</a>
<a href="cart.html">
  <img src="https://codehs.com/uploads/d1091610e3a63fb99a6d5608b94a0fa8" width="50px" height="50px" style="float:right; margin-right: 15px">
</a>
<a href="userlogin.html">
  <img src="https://codehs.com/uploads/a4a800a1e73c30e0f37382731c3b1234" width="50px" height="50px" style="float:right; margin-right: 15px; background-color: white;">
</a>
<center><img src="https://drive.google.com/uc?export=view&id=1NKWr5CjLNa7tYtO8a49xQ_mcWzMoWGg_" style="width:300px;height:300px;"></center>

<form name="loginForm" method="post" action="admin.html">
  <table width="20%" align="center">

    <tr>
      <td colspan=2>
        <center>
          <font size=4><b>Login to Noah Grocery</b></font>
        </center>
      </td>
    </tr>

    <tr>
      <td>Username:</td>
      <td><input type="text" size=25 name="userid"></td>
    </tr>

    <tr>
      <td>Password:</td>
      <td><input type="Password" size=25 name="pwd"></td>
    </tr>

    <tr>
      <td><input type="Reset"></td>
      <td><input type="submit" onclick="return check(this.form)" value="Login"></td>
    </tr>

  </table>
</form>

CodePudding user response：

I assume this is just for fun and you are not doing authorization authentication this way.

but make an array of password objects.

const users =
  [
    {userid: 'admin', password: 'noahgrocery' }, 
    {userid: 'joe', password: 'secret' }
  ];

then use find to see if it exists.

const user = users.find(
  x => x.userid === form.userid.value &&
       x.password === form.password.value);

then just check and see if user exists.