DayInReview / day-in-review

Full Day In Review application
http://dayinreview.org
Apache License 2.0
2 stars 0 forks source link

Login & Registration Forms #37

Closed JimothyGreene closed 3 years ago

JimothyGreene commented 3 years ago

Problem

There was a very bad login form that was only used to allow us to test the client-side authentication. We need a better form for login. We also needed a registration form to allow new users to sign up on the site itself.

Solution

Using Material UI, I created a form for the Login and Registration pages. Each one is simplistic and has only the required fields. Here are the two different flows: Register

  1. Go to the login page
  2. Click the register button
  3. Any information you had filled out on the login page is filled into the registration form
  4. Fill in the remaining information
  5. Submit
  6. You'll be redirected to the login page
  7. Click login to login for the first time

Login

  1. Go to the login page
  2. Fill in the information
  3. Click login
  4. You will be redirected to whichever page you came from

In both forms, any errors that are sent back from the server will be displayed under their respective fields in the form.

Testing

I tested this by registering as a new user to test the flow and logging in as that user after logging out. I also tested the error handling by inputting bad data into the form in multiple different ways.

Notes

There is a decent amount of duplicate code between the Login and Register components, but there are a lot of minute differences that made it difficult to see a way to make a shared component or shared code in some way. @ishan0102 if you see a way to reduce duplicate code here, let me know.

Closes #36