Building Login and Register Component
In this lesson, we're going to build the login and register component
Building Login and Register components#
As we discussed in the last lesson; rather than having two different pages for sign in and register, we will create one page and show them conditionally. Let's start with Signin component. Inside components, we can create a new file called
Signin.tsx. Let's create Signin function and export it. This Signin component will have a controlled state which means we will use useState hook to store the state; we can create a state called values and setValues, which will be equal to the useState hook. Our state will be of type Login which has an email and a password. The initial values will contain an object with email which will be an empty string; same goes for the password. Let's destructure them from values. We will use antd here since it will save us some time in designing the page.
I want to create a white card at the center which will have our form. Let's use return and React fragments as a parent. I want to start with a card; let's import it from antd, and let's give it a className,
login-in-card. We can give it some custom design doing that. Now on top, we can create a div which will carry some text before the form; let's give it a className,
log-in-card__intro. Inside, we will use Typography from antd. This will have a title on top; let's make it level 2, and the className can be
log-in-card__intro-title. We can write the title,
Log in to Learnify! Below this, we can write a simple text saying
Use your Email and Password to Login. Text and Title are part of Typography, so we can destructure it on top.
We can now start writing the form. We can wrap it inside Content to give it some alignment; let's give it a className,
log-in__form, and now we can import Form from antd. This will have a name
login, labelCol will be span 8, and wrapperCol will be span 16. These are not arbitrary numbers; I have tried a few before to make a decent form, just to save some time. Now we can turn the autoComplete off. Inside the form, we will have labels for both email and password. We can use Form.Item for that; label will be Email, name will be email as well, and we can give it some rules for validation. It takes an array with rules object. First one will be required and it is required so we can make it true. If it's not valid, we can give it a message,
Please enter a valid email!, and it also accepts a regex pattern; I have shared a pattern in the code below (You can simply copy it and paste it inside pattern property.)
Regex(don't copy the semicolon in the end)
Now we can create Input which we can import from antd; the value of this will be the email because this is a controlled form, and the name will be email. Let's copy it one more time for the password, and change label and name to password. Inside rules, we can change message to
Please enter a valid password!, and we can use a min property which checks the length of the value. If it's less than the min property, it will give us an error. Also, inside the Input, we need to change it to password and change the name and value to password as well.
Below this, we want a button which will submit the form. It should be a part of the form as well, so let's wrap it inside Form.Item. In wrapperCol, we can provide the offset to be 4, and the span to be 16. Again, I have tried these numbers before putting it here. We can now use the Button component from antd. It will be of type primary and htmlType submit. At the bottom, I want to create a text which will change the mode from login to register, so let's create a new div and give it a className of
log-in-card__toggle. It will have a text,
Not a user yet? Register here.
Now we need two functions; one for storing the form values, and another one for submitting the form. Let's start with the handleChange function. It will take an event; let's call it e and it will be of type ChangeEvent of type HTMLInputElement. Let's import it from React. Our event has a target method which has value and name that we need, so we can destructure it. Finally, we can setValues and use spread operator for making changes to the existing state which is called values. After this, we can use the name which will be the input, name email or password, and value will be the value.