Improve UX of sign up validation

[ErnWong]

User Story
As a user
I want a clearer message when I try to sign up and haven't filled out the passwords
So that I don't get stuck thinking that my username is wrong.

Priority

• High
• Medium
• Low

Describe the solution you want to implement

• Errors to show:
  1. Username exists
  2. Passwords do not match
• To show when 'Sign Up' button is pressed or when focus is moved away from field

Describe alternatives you've considered
TODO

Issue Dependencies
TODO

Additional context
TODO

[ErnWong]

Moreover, the error message says "Invalid Username or Password. Cannot be empty or in use. Passwords must match." Yet, the message disappears after filling an existing username and password that's already in use (until the sign-up button is pressed).

Also, a related UI-polish note for a separate issue: the error message pushes the form components outside of the box the form is in.