3
\$\begingroup\$

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;
    }
}
\$\endgroup\$
2
  • \$\begingroup\$ I would add a bit of information in your post. What are looking for in a review (We do general stuff but is there something specific) ? Having a comment in the code explaining what your code is about is not the best for a question here, could you write an explanation outside of the code block ? IMO, this would help your question a bit. \$\endgroup\$
    – Marc-Andre
    Mar 13, 2014 at 15:21
  • \$\begingroup\$ Can you provide a link to the programming challenge? \$\endgroup\$
    – konijn
    Mar 14, 2014 at 12:47

3 Answers 3

7
\$\begingroup\$

This is tagged , 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.

\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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.

\$\endgroup\$
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.