<div dir="ltr">Hello,<div><br></div><div>I came across BrowserQuest a few days ago and thought I might try contributing something to it. I need some practice with JavaScript and also wanted to learn Node.js, and this seems like a great way to do it.</div>
<div><br></div><div>I was going to start with something simple, and thought <a href="https://github.com/browserquest/BrowserQuest/issues/53">issue #53</a> might be a good candidate (show a more helpful error message when logging in with an incorrect password). However, after looking into it a bit more, I think the issue runs a bit deeper than just the unhelpful error message - the fact is, if the username/password are not correct, we're still effectively launching a non-functional game with a broken UI, and no possibility of navigating back to the login form without refreshing the browser. I think a proper solution here would be, in client/js/main.js, before calling app.tryStartingGame, to make a separate call to the server to check the username/password. If that call returns that the username/password are not correct, then we show an error message right within the login form, without navigating away. This should result in a more intuitive behavior for the user, but would require a bit more effort.</div>
<div><br></div><div>Besides this, I noticed there were a handful of other issues with login and new character creation which weren't documented yet. I'm writing these up at the bottom of this email. I wanted to get everyone's thoughts on all of these before I start coding away - let me know if anything that I'm proposing sounds like it might be a bad idea.</div>
<div><br></div><div>Also, do you prefer that I write these up as actual issues in the main repo? Or maybe just a single generic issue? Or just add all of this to issue #53? Let me know what the preferred documentation style is.</div>
<div><br></div><div>Finally, let me know if there's anything else I need to know about contributing. Otherwise, I'll just fork the repo and make a pull request.</div><div><br></div><div>Thanks,</div><div>Sergey</div>
<div><br></div><div><div style="direction:ltr">
<div style="direction:ltr;margin-top:0in;margin-left:0in;width:7.6256in">
<div style="direction:ltr;margin-top:0in;margin-left:0in;width:7.6256in">
<p style="margin:0in;font-family:Calibri;font-size:11pt">P.S., the actual issues I found follow. I'm lettering rather than number these so as not to confuse them with actual issue numbers in the repo.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue A: Logging in with incorrect password is not
intuitive</span>.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem:</span></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><i>(Part of this is documented in issue #53, but as described below, I think the problem is more general than just the actual error message itself.)</i></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><i><br></i></p><p style="margin:0in;font-family:Calibri;font-size:11pt">W<span style="font-size:11pt">hen you try to log in with an existing character
but supply an incorrect password, you get a generic "Could not connect to
server" error.</span><span style="font-size:11pt"> </span></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">For one thing, it
would be better if the message was more descriptive. Furthermore, and perhaps
even worse, you cannot return back to the login screen at that point. It appears chat is functional at that point,
as well as achievements, help, etc. But
if you want to try logging in again, you basically have to refresh the page and
start over.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Proposed solution</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Rather than
navigating away from the login form and immediately attempting to launch the
game, it would be better to make a separate request to the server to check the
password. If it is incorrect, then we display a validation error right in the
login form (rather than shutting down the game and redisplaying the login
form). I think this would be better than
launching a non-functional game window (with broken chat, etc).</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Technical details</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">The login form is
located in client/index.html. For
logging in as an existing user, there is an <article> with id
"loadcharacter" which contains the login form (note that for new
character creation, there is a separate <article> with id
"createcharacter"). This form
will be updated with some additional placeholders for loading/validation
messages. In <span style="font-size:11pt">client/js/main.js, r</span><span style="font-size:11pt">ather than calling
app.tryStartingGame, which will navigate away from the login form and launch
the game, we'll add a separate call to check the username/password and show an error message within the login form if these are not correct.</span><span style="font-size:11pt"> </span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue B: Login form (for existing users) allows
creation of new users</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem:</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">On the login form,
if you specify a user name that does not exist (and enter something for the
password), the game will launch and a new user will automatically be
created. A message will get displayed at
the bottom saying "welcome back", even though it's a new character
(and as such, the "How to play" dialog is what should actually get
displayed).</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">While it may be
argued that this is a convenience feature rather than a bug, I think it's a bug
because:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">- It's just not
intuitive - the user might be misled to believe they had already created a
character previously and forgot about it.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">- The password was
only entered once and may have been mistyped, but now the user is stuck with it
(and probably won't be able to ever log in again). There's a reason
registration forms generally have you type the password twice.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Proposed Solution</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Don't allow creation
of new characters from the login form.
If the username does not exist, show a message in the form indicating
this (and optionally include a convenience link to the create new user form in
the message).</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Technical Details:</span></p><p style="margin:0in;font-family:Calibri;font-size:11pt">
[ TO DO ]</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue C: New user form does not give clear indication
if password does not match between the two password fields</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">On the new user
form, if the password the user enters in the "Confirm Password" field
does not match what was entered in the "Password" field, and the user
then clicks "Create", no clear indication is shown that the password
was mistyped - it simply refuses to create the new character, but doesn't say
why. This may be confusing, especially
if the user is not aware they mistyped the password.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Proposed Solution</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Show an error
message if the passwords do not match. Ideally, we would show the message next
to the field immediately after leaving focus from the Confirm Password field;
alternatively, we could show the message after user clicks "Create".</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Technical Details:</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">[ TO DO ]</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue D: No way to go back to the Login form from the
New User form</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Minor usability
quirk: If you click "New Character" at the bottom of the login form
(and the Continue to accept the terms), there is no obvious way to go back to
the login form (other than refreshing the window).</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Proposed Solution</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Allow the user to
navigate back to the Login form from the New User form (include a link
somewhere).</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue E: 'a' and 'f' keys do not work in login form.</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">If you try to type
'a' or 'f' in the login form, nothing shows up (as if you hadn't pressed the
key). As a result, it's impossible to specify a user name (and possibly
password?) containing 'a' or 'f'.</p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><b>Proposed Solution</b>:</p><p style="margin:0in;font-family:Calibri;font-size:11pt">
Fix this.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Technical details</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Search main.js for:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">$(document).bind("keydown",
function</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">It contains handlers
for 'a' and 'f'. It looks like it's intended to only run when the chat input
has focus, but it's probably running when we're in login context. (Haven't
confirmed this yet, but looks very likely to be the culprit). Note that the aforementioned event handler is
bound at the $(document) level - is this really a reasonable thing to do if
it's meant to affect only the chat window?</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue F: Create New Character form is too long to fit
within the "parchment" container</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem:</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">The
"Create" link at the bottom of the Create New Character form
partially falls off the parchment because the form is too long to fit:</p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> <img src="cid:ii_140d63dd109bbcc0" alt="Inline image 1" width="420" height="296"></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Proposed Solution</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Probably make the field
height for Character Name, Password, etc. a little bit smaller. If that looks bad, then just decrease the spacing between the fields.</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Issue G:</span> <span style="font-weight:bold">"Privacy"
and "Legal Notices" links may overlap with the "Create New
Character" form on small screens (e.g., iPhone)</span></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"> </p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><span style="font-weight:bold">Problem</span>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">When trying to
register as a new user from mobile device, the "Privacy" and
"Legal Notices" links, which are meant to be at the very bottom of
the form, can actually float above the form:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><br></p><p style="margin:0in;font-family:Calibri;font-size:11pt"><img src="cid:ii_140d63f4e07fdf88" alt="Inline image 2" width="420" height="278"> </p><p style="margin:0in;font-family:Calibri;font-size:11pt">
<br></p>
<p style="margin:0in;font-family:Calibri;font-size:11pt"><b>Proposed Solution</b>:</p>
<p style="margin:0in;font-family:Calibri;font-size:11pt">Fix this by moving
the Privacy and Legal Notices links to the bottom (below
"Create"). I also think it may
look a bit better if those links did not appear on top of the wood background,
but rather made even more separate (since those shouldn't really be part of the
game surface at all).</p>
</div>
</div>
</div></div></div>