Plain error messages

[tracey-le]

Awesome that we have descriptive error messages coming up to notify users 👍

Some of them come out as plain on a separate HTML page. It's not a bug - it's done intentionally - but @liamcal suggested we could add to the UX for those 🙂

Here is a pic:

List of error messages that come out as plain on a separate HTML page:

• Username already exists after you choose a username that is already taken/if you choose a username that is not unique, on sign up page (user.py).
  
  Thanks to @Jackywathy on set up ajax on serverside and just-in-time testing for unique usernames

• Email is already registered if the email you use is already in the db
  
  Again thanks to Jack! here in this commit 1f59c7e

• Username and password do not match from sign in (user.py)

• Username cannot be found from sign in (user.py)

• Uploaded file type not supported when image type for uploaded profile pic or post image is not valid (user.py, ask.py)
  
  signup page fix e09d7d9 & ask page fix 7f73aeb

• We couldn't find an uploaded file if no image is uploaded to post (user.py, ask.py)
  
  edit: profile pic isn't necessary on sign up. fixed for ask page 7f73aeb

• You are not logged in if you try to post a comment without being logged in (view.py)
  
  Yay d19d596 It prevents you from posting a comment in the first place if you're not logged in.
  
  Actually something we could do here is not allow the user to post a comment front end (disable input field or anything) if there is no user_cookie, I'll look into that.

• Username is not in db if you try to go to a URL of a profile that doesn't exist (profile.py)

The file name in brackets for items in the list indicates in which file(s) the message is being written. (I haven't actually gotten to verify these yet, I've only gone and looked in the files under /back-end)

These come from the lines request.write(). For example, in back_end/user.py:

I quite like the idea of live error messages that display right when you make the mistake, hehe.

For example, I had changed it so that error messages appear live for the signup page, but that was adding onto @jackfrench's code using jQuery for validation of signup details 😃 I just found out that using JavaScript it's possible to change the text in the elements with class=error

I'm not sure how to take into consideration things from the database though — for example, to display an error message saying that a username is already taken on the sign up page, we need to check in the database.

And then if we wanted to make it a live error message (personal taste hehe), we'd need to be able to change the content on the HTML page, and I think there would be a way to do that...? but I am not sure hmm. Maybe sounds like using template language can do that? I'll have to look around for using the template language 🙂 (haven't gotten to see it in action much actually 😛)

EDIT:

Places where we could add an error message:

• When you go to the url of a post id that doesn't exist (for example /view/10000 won't exist unless you create 10,000 posts), it should redirect to /404. That would require checking the largest post_id in the db though before redirecting

(e.g. if the largest post_id is only 10, there won't be more than 10 posts. So if someone tries to go to `/view/10000` it should take them to `/404` instead)

[tracey-le]

I think it's awesome that we can put up these issues here, I might not have an idea for approaching a challenge but I'm able to document some thoughts and help keep track of things, it's great to be able to contribute in some way still hehe. And others can see it, and they might have some of their own ideas 😃

[tracey-le]

Wow ooh being able to reorder the items in the checklist, that's pretty nifty 😎

[tracey-le]

oh hmm I noticed that we can use render(context) using the template engine render func before passing it into request.write() 🤔

[liamcal]

There's certainly a few different ways of doing most of them. Some might be able to be done entirely in the backend (eg, if the user isn't logged in, just don't show them the comment box. Otherwise, using some AJAX techniques might be the way to go for a few of them (create a python script to fulfil a specific purpose such as checking if a username already exists, then when the user starts typing, use jquery to send a POST request to that python script, retrieve the result and then continue validating using js). It might be a little complicated at first, but it's a cool thing to try and figure out.

[tracey-le]

that does sound really cool 😄 ooh I hadn't thought about that — not showing the comment box on posts if you're not logged in, or maybe we could also have a message saying "You need to be logged in to add a comment" too.

With the AJAX techniques, is it possible to check the username as soon as it's typed (e.g. in jQuery we can use the blur() event to check if something has lost focus) rather than wait until Submit is clicked? It sounds like it would be possible, since we've used an event for checking if Submit has been clicked too.

Oh wait, I think that was just for length validation and character validation, hmm. I think what I'm looking for there is at the bottom of server.py. edit: ohhh is it what you mean with the POST request? like the post part here?:

I'll have to keep looking around :) thank you for the ideas! and yep it is interesting to think about 😃

[Jackywathy]

Maybe putting a handler on "keyup" which waits a few seconds before sending an Ajax request (http://stackoverflow.com/questions/4220126/run-javascript)

[tracey-le]

hmm how do I reference a commit like 4831b08
oh okay, it does it automatically ^_^

[tracey-le]

I'm gonna try applying @Jackywathy's ajax techniques for some other error messages :D

[tracey-le]

@Jackywathy hey Jack :D I was just wondering for the keys in this dictionary:

are the same ones as here on this reference site? http://api.jquery.com/jquery.ajax/

[Jackywathy]

yep should be, i just copied it off the book

[Jackywathy]

but make sure your passing $input.val(), not $input, cuz it gives you max recursion error if you dont
💥
Took me ages to find out why it wasn't working before.

[tracey-le]

cool thank you! oh do you mean the rapid web dev book? I should check that!

oohh, oh noes thanks for the heads up! 👍

[tracey-le]

for the method we put in post= argument in server.register(), is that method called automatically whenever we do something like click a Submit button? (that sounds like magic 😯) I couldn't find on Tornado cheatsheet but maybe it'll be in web dev workbook.

[Jackywathy]

yep!
it sends it to post if you tell it to

<form class="sign-in" action="/signup" method="post" enctype = "multipart/form-data">

&&

$.ajax("/ajax/user_validate", {datatype: "json", type: "post", data: {username: $username.val()}

I think its get by default though

[tracey-le]

oooh okay thank you so much!! :DD

[tracey-le]

@Jackywathy oh noes I think I'm getting plain error message for username already exists! again on latest dev branch version... 🤔 ❔ your things seem to be there still, hmm

[tracey-le]

I remembered to check console

(not sure what it means but looks interesting, and strange ^_^)

I tried commenting out what I did in latest commit 90dabcb for #34 but it didn't affect anything (it was just using a var in template language)

[Jackywathy]

ooo thats not good :( it means that the handler is not returning anything. Ill have a look at it in a sec

[tracey-le]

oh @Jackywathy I just saw this 🤔

check the changes in @ninjaprawn's latest commit to db maybe looks like merging problem ahaha (oh dear)

(I would link and take a closer look but I'm off for now 😴 night!)

[tracey-le]

got the link! see here 153542b

hehe sorry if this is appearing in everyone's mail, whoops... 😅

[tracey-le]

I have another idea

- [ ] showing positive feedback when you have a valid username/nickname/email/password on the signup page (moved to bottom of page)

(see sign up page here for idea https://try.discourse.org :P)

e.g. 'Username is available' 'Valid password' 'Valid nickname'

[tracey-le]

wew I was just about to redirect /view/12345 to the 404 page (did it in commit a4ccecb) but just saw your changes in be33400 @Jackywathy Great idea with the error page :DD

oh I think the changes don't clash though yay :))

[tracey-le]

yay did the same for profile pages — redirects to 404 when you go to a profile that doesn't exist commit 01fbde5

@StiffKelly I love our 404 page by the way hehe 😛 👌

[tracey-le]

@Jackywathy thanks for all the ajax help :DD

[tracey-le]

@Jackywathy I love this error page :)

[tracey-le]

weew recent commits to dev have been addressing the stuff for the sign in page

[tracey-le]

okay I think the main things are done ☺️ 😊 so I will close for now. but I will collect ideas for enhancements here

• showing positive feedback when you have a valid username/nickname/email/password on the signup page
  
  (see sign up page here for idea https://try.discourse.org :P) e.g. 'Username is available' 'Valid password' 'Valid nickname'

• if reload page for an error message, retain values of any other input fields.
  
  (For example, if you started filling in the username, nickname or email fields on signup, it should get that information and set the value of the input fields to it. Same with for asking question: if the page reloads because file not uploaded or because file type not supported, if you started entering a post title and description, we could make re-set the value of the input fields to keep those.)

• Would be great to change the flow so that you can start a comment without being logged in, and then post it once you do log in. (again, retaining the value of the input fields)

should I store these in a new issue? maybe I will

also would like to add that @Jackywathy error pages are very cool :DD