JSFiddle - React, Tailwind, and code Playground

by subsari

HTML

<html>

  <body>
    <form>
      <label>FirstName</label>
      <input placeholder="FirstName" id="firstname" /><br/>
      <label>LastName</label>
      <input placeholder="LastName" id="lastname" /><br/>
    </form>
    <button id="button"> Submit</button>
  </body>

</html>

JavaScript

// GOAL - Fix the bug
// Description: When I click "Submit", the alert is undefined
// 							Why? And How Do We Fix It? 
var users = [
	{ userId: 1, userName: "user1", password: "pass1" },
  { userId: 2, userName: "jimmy", password: "welcome" }
];
var roles = [
	{ roleId: 1, roleName: "administrator" },
  { roleId: 2, roleName: "normal" },
	{ roleId: 3, roleName: "other"}
];
var userRoles = [
	{ userId: 1, roleId: 2 },
  { userId: 1, roleId: 1 },
  { userId: 2, roleId: 3 }
];

$("#button").on("click", function() {
  var isAuthenticated = authenticateUser("user1", "pass1");
  alert(isAuthenticated);
});

function authenticateUser(username, password) {
  setTimeout(function() {
    var isValidUserName = false;
    var isValidPassword = false;

    if (username == "user1") {
      isValidUserName = true;
    }

    if (password == "pass1") {
      isValidPassword = true;
    }

    return isValidUserName && isValidPassword;
  }, 2000);
}