More progress on signup and login

Changes:

Designed the username form
Created the username form in signup
Changed useRef to useState to store signup data
Adjusted the backend to receive and store username
Add login functionality
Fixed required attribute not working in both signup and login form

Designing the username form wasn’t that hard as it’s just the signup page but will less things. I looked at how chess.com was doing things during signup and thought it’s better to split the email and password into one form and username form into another. There’s also a back button to go to the email and password form.

Coding the username form was a little frustrating as I had some issue positioning the back button. Now it’s working but now I am facing the old issue of img-container and form container not being the same width. I’ll fix that next. Also the way username form is display is by just toggling a state into true or false in the singup page.

After adding the username form there was an error telling that email and password was null. This was because while entering the username I wouldn’t be able to access the email and password input using the useRef hook. The fix was simple, I just changed the useRef into useState and store the data on input change.

Now that was extra data (username) that needed to be stored. I sent the username along with email and password to the backend and changed the userSchema to accept username.

I worked on the signup functionality last time so this time I worked on the login functionality. In short, now during login the backend verifies the email and password and gives the user a jsonwebtoken as a cookie or an error.

I wanted the input to display “field is required” when user tries to login or signup without filling in the form. I just couldn’t get this working and it was so frustrating because the issue was so simple. Later I found out that I was using e.preventDefault on the button instead of the form causing the input to not show “field is required”

Okay enough yapping. Gotta go and work on the project. Hope your project is going smoothly. Bie…👋