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! 👍