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
Go to the login page
Click the register button
Any information you had filled out on the login page is filled into the registration form
Fill in the remaining information
Submit
You'll be redirected to the login page
Click login to login for the first time
Login
Go to the login page
Fill in the information
Click login
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.
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
register
buttonLogin
login
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