Building Login and Register Component

[00:00 - 00:23] As we discussed in the last lecture, rather than having two different pages for sign-in and register, they will rather create one page and show the different components conditionally. So what we can do is, first of all, I will close this and inside components, I will create a new component and let's call it sign-in dot psx.

[00:24 - 00:47] Let's start with creating a function and let's call it sign-in and below, let's export it as well. Well this sign-in component will have a control state, which means we will use u-state hook to store the state.

[00:48 - 01:45] So here, let's create a new state, let's call it values and the method to change it will be set values as it is a convention and this will be equal to the u-state hook, which will be imported automatically and the default value will have email, which will be an empty string and a password, which will be empty string as well. Now below, let's destructure the email and the password so that anytime you want to use it, you don't have to write values dot email or values dot password and our state will be of type log-in so we can import it using the models and this should be inside the function here.

[01:46 - 02:02] We will use ant-d here since it will save us some time to design the page. So let's use our return statement and let's start with a card because I want to create a white card on the center, which will have our form.

[02:03 - 02:29] So what we can do is write card imported from ant design and let's give it a class name and the class name can be log-in card giving it a class name will help us giving some custom design to it. Now on top, we can create a dev which will carry some text before showing the form.

[02:30 - 02:48] So here, let me create a dev and this will have a class name of same log-in card and underscore underscore intro. Inside we will use typography from ant design.

[02:49 - 02:58] So let's import typography and it will be imported automatically. This will have a title on top.

[02:59 - 03:13] So let's write title and rather than importing it directly, we will destructure it from typography because this is a part of typography. So let's not import it right now but use a title.

[03:14 - 03:18] This title will be level two. Level two is basically kind of a header.

[03:19 - 03:48] So header two. We can also give it a class name of log-in card, underscore underscore intro title and the title can be log-in to learnify.

[03:49 - 04:02] For this, we can write a simple text saying use your email and password to log- in. Again text, it is a part of ant D but we won't import it directly because it's a part of typography.

[04:03 - 04:30] So the text here can be use your email and password to log-in. And now let's destructure text and title from typography.

[04:31 - 04:41] We can now start writing the form. So below this div, we can start writing the form and let's wrap the form inside content.

[04:42 - 04:49] We're using content here to give our form some alignment. Now let's give it a class name also.

[04:50 - 05:01] Class name can be log-in underscore underscore form. And now we can import form from ant D.

[05:02 - 05:12] So here let's use the form from ant D. Our form will have a name which is log-in.

[05:13 - 05:30] A label call which is basically the size of the label and we can give it value span 8. And wrap a call which is for wrap a column, it can have span 16.

[05:31 - 05:42] It should be 16. Now here we can turn the auto complete to off.

[05:43 - 05:58] And inside the form we will have two labels for email and for password. And for using the labels we need to use form.item and let's move it a bit on top.

[05:59 - 06:12] And let me write it again since it should be capital. So here I can write form.item and form.item will have the label.

[06:13 - 06:20] So let's write the label here. And the first label is for the email.

[06:21 - 06:29] Let's call it email. And also the name will be email but we won't make it capital.

[06:30 - 06:45] Also we can give it some rules for validation because it takes an array with the rules object. So what I can do is I can write rules which will take an array of object and inside we can write the rules.

[06:46 - 06:58] So our email is required so I can write the required property and make it true. And if it's not valid it will give it a message.

[06:59 - 07:12] So we can write the message as well. So let me write the message and it should be please enter a valid email.

[07:13 - 07:21] And finally it also takes a pattern. So we can use a regular expression pattern and I have shared a pattern in the code below.

[07:22 - 07:37] You can simply copy it and paste it inside this pattern property. So once you copy it just paste it here and remove the semicolon and below this label we can create our input.

[07:38 - 07:50] So let me write input from and design and okay it should be here. So let's use it here.

[07:51 - 07:58] The input which is being imported from and design. So this input is more or less like the input from the HTML.

[07:59 - 08:04] We have to pass some values and some properties. So let's start with the value.

[08:05 - 08:15] The value will be email coming from our state and the name of this input is again email. And that's it.

[08:16 - 08:21] Now what we can do is we can copy it one more time for the password. So let's copy it and paste it below.

[08:22 - 08:26] Now we have to change it. The label should be password.

[08:27 - 08:41] The name should be password. Write the rules it's required so we can keep it true and the message can be please enter a valid password and we don't need the pattern.

[08:42 - 08:53] So rather we can use a min property which decides the minimum number of characters which are valid to make this password work. So we can make it six.

[08:54 - 09:00] This min property will check the length of the value. If it's less than the min property here it will give us this error.

[09:01 - 09:23] So inside the input we need to make it input dot password because it has some different properties the value will be password and the name will be password as well. Let's move it a bit top and below this we want a button which will submit the form.

[09:24 - 09:29] It should be a part of the form as well. So let's wrap it inside form dot item.

[09:30 - 09:37] Let's use form dot item. We can give it some properties as well.

[09:38 - 09:56] So like the wrapper call which will have an offset of four and span value of 16 . Again I have tried these numbers before putting it here.

[09:57 - 10:05] Now we can use a button component from anti. Well let me write button and import it from and design.

[10:06 - 10:31] It will be of type primary so I can give it a property type primary and since it will submit I can give it HTML type submit and this button will simply say submit nothing fancy here. Now in the bottom I want to create a text which will change the mood from login to register.

[10:32 - 11:09] So outside the content outside the form I will create a new div and let's give it a class name login card toggle since it will toggle the mood login card underscore toggle and it will have a text not a user yet register here. So if you click on this button we will give it a function as well.

[11:10 - 11:16] So if you click on this button it will change the mood to the register mode. Now our form is complete.

[11:17 - 11:36] Now we need two functions one for storing the form values and another one for submitting the form. Let's start with the handle change function so let's go on top and here let's make a function let's call it handle change.

[11:37 - 11:55] This will take an event and this event will have a type which will be change event. And the type of this change event will be HTML input element.

[11:56 - 12:13] Now our event has a target method which has value and the name which we need to set the values. So what we can do is here let me destructure the name and the value from e.

[12:14 - 12:38] target. Finally we can set values so I will use set values and use destructure values after this I can use the name which will be the name of the input field and here will be the value. So this is dynamic whatever the name of the input field is it will take that and pass that value to that event.

[12:39 - 12:57] Finally let's create a submit function and let's call it submit user. This will have an event as well but this time it will be synthetic event so let 's give it a type.

[12:58 - 13:12] Sin. That event and it will be imported automatically on top we will disable the default behavior of the form to submit it so let's write e.prevent default.

[13:13 - 13:35] Now we want to submit the form if the email is valid and the password is more than six character. So what we can do is we can put an if condition so if email.match and the match can accept a regular expression pattern so we can copy the same pattern we used here.

[13:36 - 14:07] And paste it inside so if the email matches this pattern and the length of the password is equal to or more than six then we can submit the form and for submitting the form we need agent so let's import agent.users.login and that will take the values. Which we have created here.

[14:08 - 14:34] This is an asynchronous method so we can await it also we can store the value so const response is equal to this and we see the error because we haven't made this method asynchronous so I will add asynchronous. And after we submit the form and it is successful we can set all the values and let's use.

[14:35 - 14:49] This and email can be an empty string and the password can be an empty string as well. And let's add one more dot because we need three dots.

[14:50 - 15:02] And finally we can log the response for now so that we know that our request is successful. Now let's add these methods inside the form component.

[15:03 - 15:21] So let's go to the form and it has on submit capture so what we can do is we can pass on submit capture and we can pass the submit user function. So if the user clicks enter after filling the fields it will submit the form.

[15:22 - 15:51] We also want to pass the handle change functions to the inputs. So what we can do is let's copy the name handle change and we can go to the form dot item here I can use on change event and give it handle change function and same for the password fields so I can copy it and paste it for the password field.

[15:52 - 16:14] We want to pass the submit user function to this button so what I can do is use on click and pass the submit user function. So we can submit the form if the user clicks on submit or if the user presses enter after filling the email and the password.

[16:15 - 16:59] We have written the class names here and inside the code which I have added you can just copy it from below and you can paste it inside SAS folder inside the pages. So from the code below copy this login dot sess file code and go to sass and inside pages create a new file call it login dot sess and paste the code there and finally inside the main dot sass file just import it so that it's available to use pages slash login and that's it.

[17:00 - 17:14] The styling is very easy to understand if you're comfortable with CSS and it won't be much of a problem to understand it. The functionality of this sign in component is more or less the same for the register component.

[17:15 - 17:31] So what we can do is inside components we can create another component and let 's call it register dot tss simply copy the sign in code and paste it here. Let's make some changes.

[17:32 - 18:11] First of all let's change the name and let's change sign in to register component and here is well change sign in to register component. Now inside the state we also need to add the username so we can use username which will be an empty string PC and error because we need to change the model from login to register and we can remove the login import here.

[18:12 - 18:57] Now let's look at the conditions the email should match the password length and we need to add one more property if username sorry we need to add the add if we don't see username because we haven't destructure it so let's do it here username and we now we can check if username dot length is equal to or more than five so that is an additional check. Now here we want to call agent dot users dot register not the login and after we submit the form we also need to make the username an empty string.

[18:58 - 19:31] Now inside the return statement we need to change it to sign up with learnify so sign up with learnify and inside text let's also add use your username username email and password to register. And now we have two fields one for the email and another one for the password but we need three we need one more for the username.

[19:32 - 20:37] What we can do is we can copy one form item and paste it on top because we need username field on top let's change the label username name username it is required and the message can be please enter valid username we don't need the pattern but we want minimum five characters so I can write min five the value should be username and the name should be username as well and the on change even can stay the same. Now let's see what's left in the bottom we want to change the text to let's make it already user and rather than saying register here we can say sign in.

[20:38 - 20:43] Well that's it let's move it to the login page and render it conditionally in the next lecture.