Login function JavaScript

Question

I have difficulties making a login validation function that will validate from the hardcoded users from my Localstorage. My idea is to redirect two different types of users (therefore the authentication level constructor) to different html pages. For now i cant even redirect to 1 page, nothing happens when i click my "login" button. Any idea what i am doing wrong here? :)

//Users
class userLogin{
    constructor(username, password, authLevel){
        this.username = username;
        this.password = password;
        this.authlevel = authLevel;
    }
}
// Localstorage logins
if(localStorage.getItem("userLogin") == null){
    var userLogins = [];
    userLogins.push(new userLogin("Benjamin", 4321,"1" ));
    userLogins.push(new userLogin("Mads",12345,"1"));
    userLogins.push(new userLogin("Simon",1234,"1"));
    userLogins.push(new userLogin("Jessica", 54321,"1"));
    // Logins for Projectmanagers
    userLogins.push(new userLogin("Oliver",1234,"2"));
    userLogins.push(new userLogin("Sara",4321,"2"));

    var userLoginstring = JSON.stringify("userLogin")
    localStorage.setItem("userLogin", userLoginstring)
} else {

}
var employeeList = JSON.parse(localStorage.getItem("userLogin"))

// login auth
var uname = document.getElementById("uname");
var pass = document.getElementById("pass");

function validate() {
    var userLogins = JSON.parse(localStorage.getItem("userLogin"));
    if (!userLogins) {
        userLogins = [
            //Logins for Employee
            new userLogin("Benjamin", 4321,"1" ),
            new userLogin("Mads",12345,"1"),
            new userLogin("Simon",1234,"1"),
            new userLogin("Jessica", 54321,"1"),
            // Logins for Projectmanagers
            new userLogin("Oliver",1234,"2"),
            new userLogin("Sara",4321,"2"),
        ];
        localStorage.setItem("userLogin", JSON.stringify(userLogins));

        for (let i = 0; i < userLogin.length; i++){
            if (uname.value == userLogin[i] && pass.value == userLogin[i]){
                alert("You have been logged in");
                document.location = "Employeesite.html";
                return false
            }
        }
    }
}

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eksamensprojekt</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h2>Welcome to EPM!</h2>
<form id="form_id">
    <div class="image">
        <img src="EPM.png" alt="Logo" class="logo"><x></x>
    </div>
    <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" id="uname" value="">

        <label for="pass"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" id="pass" value="">

        <button type="button" value="Login" onclick="validate()">Login</button>
    </div>
</form>
</div>
<script src="Login.js"></script>
<script src="Users.js"></script>
</body>
</html>

Answer 1

I figured out 2 main problems in the sample, here is what I found. Use this code and it should work

In the sample you provided the code would trigger only if there are no userLogins (perhaps the if statement brackets are palced at the wrong place?)
In the instruction if(uname.value == userLogins[i]) compares a value to an object of type UserLogin, this can't be equal. Perhaps you need to compare it to userLogins[i].username instead?

    function validate() {
      var userLogins = JSON.parse(localStorage.getItem("userLogin"));
      if (!userLogins) {
        userLogins = [
          //Logins for Employee
          new userLogin("Benjamin", 4321, "1"),
          new userLogin("Mads", 12345, "1"),
          new userLogin("Simon", 1234, "1"),
          new userLogin("Jessica", 54321, "1"),
          // Logins for Projectmanagers
          new userLogin("Oliver", 1234, "2"),
          new userLogin("Sara", 4321, "2")
        ];
        localStorage.setItem("userLogin", JSON.stringify(userLogins));
      }

      for (let i = 0; i < userLogins.length; i++) {
        if (
          uname.value === userLogins[i].username &&
          pass.value == userLogins[i].password
        ) {
          alert("You have been logged in");
          document.location = "Employeesite.html";
          return false;
        }
      }
    };

Login function JavaScript

Question

1 answers

solution1
0 2019-11-05 15:40:29

Login function JavaScript

Question

1 answers

solution1 0 2019-11-05 15:40:29

solution1
0 2019-11-05 15:40:29