// store the IDs of all logged in users in here

var loggedusers = [];



// server should handle everything below...

// users array, which contains all users in the system

// on the server-side this could be an array returned by a MySQL database table, for example

var users = [{

  // ID of the user

  id: 1,

  // username of the user

  username: 'user1',

  // password of the user, note that this should obviously be hashed on the server-side

  // for PHP back-end: preferably hashed with 'password_hash' and compared using 'password_verify' if using PHP version 5.5 or newer

  password: 'a',

  // type of the user, currently using 'user', 'admin' and 'supplier', but technically it could be _anything_

  type: 'user'

}, {

  id: 2,

  username: 'admin1',

  password: 'b',

  type: 'admin'

}, {

  id: 3,

  username: 'supplier1',

  password: 'c',

  type: 'supplier'

}];

// ... up to this point, never store this data on the client-side (especially highly sensitive information like hashes, salts, or even worse like plain text passwords like above).



/**

 * null|Object getUserByProperty ( mixed key, mixed value [ , boolean strict = false, boolean multiple = false, boolean case_insensitive = false ] )

 *

 * Gets a user by a property key, value and various settings.

 *

 * @param mixed key Property key to look for.

 * @param mixed value Property value to look for.

 * @param boolean strict (optional) Should the comparison be type strict?

 * @param boolean multiple (optional) Should it return all results, rather than the first result?

 * @param boolean case_insensitive (optional) Should it ignore character case?

 *

 * @return null|Object Returns the user object, or null, if not found.

 */

function getUserByProperty(key, value, strict, multiple, case_insensitive) {

  // prepare a result array

  var result = [];



  // loop through all of our users

  for (var index in users) {

    // get the user we are iterating through now

    var user = users[index];



    // check if the user has the specified property

    if (typeof user[key] != 'undefined') {

      // get the property value

      var compare = user[key];



      // doing something case insensitive

      if (case_insensitive) {

        // if the property value is a string

        if (typeof compare == 'string')

        // we want to turn it to lower case

          compare = compare.toLowerCase();



        // if the specified value is a string

        if (typeof value == 'string')

        // we want to turn it to lower case

          value = value.toLowerCase();

      }



      // if specified value is not defined, or values match

      if (typeof value == 'undefined' || ((strict && compare === value) || (!strict && compare == value))) {

        // if we want multiple results

        if (multiple) {

          // the result will be appended to the result array

          result.push(user);

        } else {

          // otherwise we just return it

          return user;

        }

      }

    }

  }



  // return the results or null, if nothing was found (for single match search)

  return multiple ? result : null;

}



/**

 * null|Object getUserById ( number id )

 *

 * Gets a user with the specified ID.

 *

 * @param number id ID of user to get.

 *

 * @return null|Object Returns the user object, or null, if not found.

 */

function getUserById(id) {

  return getUserByProperty('id', id);

}



/**

 * null|Object getUserByUsername ( string username [ , boolean case_insensitive = false ] )

 *

 * Gets a user with the specified username.

 *

 * @param string username Username of user to get.

 * @param boolean case_insensitive Should character case be ignored?

 *

 * @return null|Object Returns the user object, or null, if not found.

 */

function getUserByUsername(username, case_insensitive) {

  return getUserByProperty('username', username, false, false, case_insensitive);

}



/**

 * boolean|array getUsersByType ( string type [ , boolean case_insensitive = false ] )

 *

 * Gets all users with the specified type.

 *

 * @param string type Type of user to look for.

 * @param boolean case_insensitive Should character case be ignored?

 *

 * @return array Returns the an array of user objects.

 */

function getUsersByType(type, case_insensitive) {

  return getUserByProperty('type', type, false, true, case_insensitive);

}



/**

 * boolean|Object login ( string username, string password )

 *

 * Provides the functionality to be able to log in on a user.

 *

 * @param string username Username of the user to log in on.

 * @param string password Password of the user to log in on.

 *

 * @return boolean|Object Returns the user object, or false, if login was not successful.

 */

function login(username, password) {

  // checks whether username and password have been filled in

  if (typeof username == 'string' && typeof password == 'string' && username.length > 0 && password.length > 0) {

    // prepare a variable to store the user object, if any is received

    var loggeduser;



    // server should handle everything below...

    // iterate through all users in the 'users' array (or database table perhaps, on server-side)

    for (var index in users) {

      // grab the property value with the property

      var user = users[index];



      // check if username and password match

      if (username === user.username && password === user.password)

      // set value of 'loggeduser' to the property value (user)

        loggeduser = user;

    }

    // ... up to this point, and the user returned from the server should be set in to 'loggeduser'

    // make sure highly sensitive information is not returned, such as hash, salt or anything



    // check whether the user is set

    if (typeof loggeduser != 'undefined') {

      // save the ID of the user to the 'loggedusers' array

      loggedusers[loggeduser.id] = true;



      // update the logged in list

      updatelist();



      // return the received user object

      return loggeduser;

    }

  }



  return false;

}



/**

 * boolean logout ( number userid )

 *

 * Provides the functionality to be able to log out from a user.

 *

 * @param number userid ID of the user to log out of.

 *

 * @return boolean Returns a boolean representing whether the log out was successful or not.

 */

function logout(userid) {

  // check whether the ID is actually logged in

  if (loggedusers[userid]) {

    // temporary array, which we will be filling

    var temporary = [];



    // let's loop through logged users

    for (var id in loggedusers)

    // ignore our user

      if (id != userid)

      // let's put this user to the array

        temporary[id] = true;



      // we replace the 'loggedusers' array with our new array

    loggedusers = temporary;



    // update the logged in list

    updatelist();



    // we have successfully logged out

    return true;

  }



  // we have not successfully logged out

  return false;

}



/**

 * boolean updatelist ( void )

 *

 * Provides the functionality to update the #logged-in-list element

 * with the logged in users names and logout links.

 *

 * @return boolean Returns a boolean representing whether the update was successful or not.

 */

function updatelist() {

  // get the #logged-in-list element

  var list_element = document.getElementById('logged-in-list');



  // check the element exists 

  if (list_element) {

    // get the #logged-in element

    var list_container_element = document.getElementById('logged-in');



    // check the element exists and that we should be changing the styles

    if (list_container_element)

    // if there are no logged in users, hide the element, otherwise show it

      list_container_element.style.visibility = loggedusers.length === 0 ? 'hidden' : 'visible';



    // we take the first child with a while loop

    while (list_element.firstChild)

    // remove the child, and it will repeat doing so until there is no firstChild left for the list_element

      list_element.removeChild(list_element.firstChild);



    // we loop through every logged in user

    for (var id in loggedusers) {

      // get the user by ID

      var user = getUserById(id);



      // check if that user is a user

      if (user) {

        // we create necessary elements to cover our logout functionality

        var p = document.createElement('P');

        p.innerText = user.username;

        var a = document.createElement('A');

        a.userid = id;

        a.href = '#';

        a.innerHTML = '(logout)';



        // we bind an onclick event listener to the link

        a.addEventListener('click', function(e) {

          e.preventDefault();



          // we will now execute the logout function for this user ID

          logout(e.srcElement.userid);

        });



        // we append the link to the paragraph element

        p.appendChild(a);



        // we append the paragraph to the list element

        list_element.appendChild(p);

      }

    }



    return true;

  }



  return false;

}



// add a new 'onsubmit' event listener to the '#login-form' node

// this will be triggered each time the form is submitted via any method

document.getElementById('login-form').addEventListener('submit', function(e) {

  // prevent default browser behavior

  e.preventDefault();



  // find the username and password nodes

  var username_element = e.srcElement.elements.username;

  var password_element = e.srcElement.elements.password;



  // check whether these elements return right stuff

  if (username_element && password_element) {

    // get the values of username and password

    username = username_element.value;

    password = password_element.value;



    // execute the 'login' function with the username and password filled in on the client

    var user = login(username, password);



    // check whether the login was successful

    if (user !== false) {

      // reset the username input field

      username_element.value = '';



      // reset the password input field

      password_element.value = '';



      // alert the client that login was successful

      alert('Logged in as ' + user.username + '.');

    } else {

      // reset the password input field

      password_element.value = '';



      // alert the client that login was not successful

      alert('Invalid username and/or password.');

    }

  }

});

<!DOCTYPE html>

<html>



<head>

  <meta charset=utf-8 />

  <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 />

  <meta name=viewport content=width=device-width, initial-scale=1.0 />



  <title>Login Form</title>

</head>



<body>

  <div style=visibility: hidden; id=logged-in>

    <p><strong>Logged in as:</strong>

    </p>

    <div id=logged-in-list></div>

  </div>



  <form id=login-form>

    <h2>Login Form</h2>



    <label for=username>Username:</label>

    <input type=text placeholder=Enter username... id=username />



    <label for=password>Password:</label>

    <input type=password placeholder=Enter password... id=password />



    <input type=submit value=Login />

  </form>



  <!-- the JavaScript code should go as contents of this tag -->

  <script></script>

</body>



</html>