MVP #1: User Auth

[RosemaryGonzaga]

Below is the checklist that I will use to review your first MVP, User Authentication. I will check the functionality tomorrow 11/18, and the styling on 11/19.

User Auth

Functionality

• The main button with logo should link to /
• Has working demo login
• Smooth, bug free navigation

Before Login

• The /login page should not display a link to Log In. Same for /signup
• Going to a random route /#/oweiniouewbrviuwebv should redirect or display a 404 page
• Errors should display for both /signup and /login.
• Errors should clear when moving between /signup and /login.
• Can sign up a user
• Can sign in as a user
• Can log out a user
• Can't sign up with the same username/email
• Pressing enter after filling out the session form should use the form data, not the demo user

After Login

• Should not be able to visit /login or /signup
• Should be able to refresh the page and still be logged in

Style

• The site should look exactly like the actual site
• All relevant elements should have cursor: pointer on hover
• When errors are displayed, most elements should not move around the page (particularly input boxes)
• Remove Redux logger and all console.log()'s from production

Seeds

• Adequate and appropriate seeds

Comments (11/18):

Hooray, most of the core functionality is here. :) I organized my comments below by priority:

• High priority (quick fixes):

  • Instead of labels, the inputs in the Trello signup and login forms have placeholders (grayish text that appears inside the input), e.g. "Enter email address", "Enter full name", or "Create password"
  • The button text also differs between the forms. On the login page, the text is "Log in"; on the signup form, the text is "Sign up"

• Medium priority:

  • Add some styling: while the ultimate goal is for the styling to be pixel-perfect, for these first two weeks I won't emphasize that as much as the functionality. For tomorrow, it just needs to look professional instead of completely unstyled.

• Low priority (save for after the intial 2-week sprint, or only if you'll have time to implement along with some basic styling by lunch tomorrow):

  • Errors: Try to emulate how Trello renders errors - both in the content of the error messages and in the format that they're displayed in.
    • These are the error messages that I see on Trello when I try to log in or sign up with any missing or invalid params.
      • Login: Missing email
      • Login: Incorrect email address and / or password. Do you need help logging in?
      • Signup: Please enter an email address
      • Signup: Please enter a name
      • Signup: Please enter a password
    • You may want to implement these using frontend validation (validating the inputs and generating any error messages before deciding whether to send the AJAX request) instead of sending a request and trying to validate on the backend. This will require additional code in your component (or maybe the util folder if you make a form_validation_util file). It can take some time to implement so I recommend saving this for after the initial two-week sprint.

[jasminellok]

My site won't look exactly like trello auth because I don't have all their image assets and their sign in / sign up forms have functionality (like sign in with google) that I am not incorporating. Also, for the errors not moving input, it is fine the way it is because trello's input moves when rendering error as well.