Login script that checks two users and their corresponding passwords

Question

Please let me know what you think. Is the code well written? Am I using best practices (like when I chose === over ==)? Is my script too verbose?

Note: I'm only asking because the tutorial I'm using is a little old.

/* A login script to that checks two users and their
corresponding passwords and then greets one of them
*/
var input = '',
  guess = '',
  montyPswrd = 'Cheese',
  montyUser = 'Monty',
  chipUser = 'Chip',
  chipPswrd = 'Gadget';

var isMonty = function (name) {
    if (name === montyUser) {
        document.write('<h1>Welcome to the site ' + montyUser + '</h1>');
    } else {
        alert('Your not monty');
    }
};

var isChip = function (name) {
    if (name === chipUser) {
        document.write('<h1>Welcome to the site ' + chipUser + '</h1>');
    } else {
        alert('Your not chip');
    }
};

input = prompt('Enter Username:', 'username');


switch (input) {
    case montyUser:
        guess = prompt('Enter Password','password');
        break;
    case chipUser:
        guess = prompt('Enter Password','password');
    case null:
        break;
    default:
        alert('wrong useranme!');
        break;
}

paswrdCheck:
if (guess === '') {
    // then the user hit ESC or cancel
    // no point in asking for password
    break paswrdCheck;
} else {
    switch (guess) {
    case montyPswrd:
        isMonty(input); // makes sure monty is matched with right password
        break;
    case chipPswrd:
        isChip(input); // makes sure chip is matched with right password
        break;
    case null:
        break;
    default:
        alert('wrong password!');
        break;
    }
}

Answer 1

This is tagged programming-challenge, but just to be sure it's said: This obviously is not secure in any sense; the passwords are in the source.
Anyway, I'm assuming security isn't the point.

First of all: Spellcheck. "useranme" and "Your not chip/monty".

Secondly, my question is "why 2 users?" What if it's 3? Or 6,123,345? Right now you'd have to duplicate everything in your code to accommodate more users. Obviously that'll be extremely cumbersome.

A much better approach is to write code to check any given user/password against a list of users (rather than named variables).

So, first we'll need a list of users (or, in this case, a JS object):

var users = {
  'Monty': 'Cheese',
  'Chip':  'Gadget'
};

Then, some login logic (this can be a function, or several functions, or many other things - this is just a simple implementation)

var username = prompt('Enter Username:', 'username');
if( !username ) { // if username is blank, null or otherwise false'y
  return; // stop here if no name is given
}

// alert and stop if the username doesn't exists
if( !users.hasOwnProperty(username) ) {
  alert('Unknown username');
  return;
}

// now we can get and check the password
var password = prompt('Enter Password:','password');
if( users[username] === password ) {
  document.write('<h1>Welcome to the site ' + username + '</h1>');
} else {
  alert("You're not " + username + "!");
}

And done.

Answer 2

Just wanted to add a bit to Flambino Answer.

His is well written but lets compared to yours as to why since you asked if yours was well written:

1) Spell check please. You are not writing for yourself. You may write code for others that works with you on a larger scale. So please write things without spelling mistakes. Use a IDE that has autocomplete like coda or sublime.

2) Use naming convention that are common. pwd, password are common not pwsrd, it helps legibility.

3) Think portability: will this script work in any situation or just this one. If its just this one, that is fine also but you can broaden it up a bit more so that if you land it in another site you don't need to change it much (like the chip/monty...what if your names are fred and bob?)

4) Extensions: like Flambino said - your limiting it to two people you should use loops and say what if N users needs to be checked on. This will make your code more compact and usable in other projects.

Bonus: Best practice is not about using === or == but formatting code, using conventions that are standard and making sure your code is not spaghetti. Using === and == has different meanings than just best practice.

Answer 3

The code is already well reviewed,

A thing I want to add is document.write, do not use document.write. Instead, put tags in your HTML code and update their content.

Another thing is your label paswrdCheck:, do not use labels, they are like GOTO, GOTO is considered harmful.