Finalizing Login page
In this lesson, we're going to finalize the login page
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:11] Now that our components are ready, we can render them conditionally inside the login page. So if we go inside the login page, we have some test code here.
[00:12 - 00:26] Let's delete everything and start from scratch. Let's create a function and we will call it login page.
[00:27 - 00:37] And we can export it, export default login page. Now we need to conditionally render registered or sign in page.
[00:38 - 00:56] For that on top, let's create an internal state and let's call it register. And set register, we will use the use state hook and the default value will be false.
[00:57 - 01:06] We also need a function called toggle register, which will set register to the opposite of the current state. So if it has false, it will make it true.
[01:07 - 01:15] And if it's true, it will make it false. So here, let me create a function and let me call it toggle register.
[01:16 - 01:32] And this will simply use the set register function and will set it the opposite of the current value. Inside the return statement, we can use content from and design.
[01:33 - 01:46] So let me write return and here I can write content and let's import it from anti layout. So we can give it a class name to give it some custom properties.
[01:47 - 01:53] So I will write class name and let's simply call it login. This will work as a wrapper.
[01:54 - 02:11] Now we can use a ternary operator here to render different components. Let's use curly brackets and if register is true, we will use the register component, which we just created.
[02:12 - 02:20] And if it's false, we will use the sign in component. So let's import sign in.
[02:21 - 02:25] Now you must be asking how will I change the state? How will I make the register to true?
[02:26 - 02:43] Well, we can pass this function as props to both of these components. If we simply write toggle register and let's use the same name and the same value.
[02:44 - 02:56] So toggle register is equal to toggle register and same for the sign in component like this. We will see errors.
[02:57 - 03:09] This is because the components are not expecting this prop. So let's go to the register component first and as props, we can expect this toggle register method.
[03:10 - 03:34] So on top here, let's write the interface and let's call it props. This will be toggle register and let's add E and this will be a function which will not return anything so we can write wide.
[03:35 - 03:45] And now inside, I will write toggle register and destructure it from props. Now same for the sign in component.
[03:46 - 04:06] Let me copy it, go inside the sign in component and on top, I will copy it and paste and inside the same thing, toggle register and destructure it from the props. And now we see the error is gone.
[04:07 - 04:17] Now we can go to the navigation component and add the login navigation as well. So let's go to the navigation here.
[04:18 - 04:43] Let's copy it and paste it and let's call it login. And also, let's copy it and paste it and this one will be login and this will take the user to the login page so I can write slash login.
[04:44 - 05:18] And since we are here, let's wrap the mobile view navigation with link as well. So here, let's import link and cut it and paste it and by the way, this should be home and it will be just slash and the same way if we copy link from here and wrap the login page as well.
[05:19 - 05:28] But this we are good to go to test our login page. So let's open the terminal and let's run the servers.
[05:29 - 05:35] Now that both the servers are running, we can simply open the browser. This is how the login page looks like.
[05:36 - 05:47] We see the login component because the register is false by default. If you click on the button below, it should ideally take us to the register component, but we haven't done that mapping.
[05:48 - 06:09] So let's go back to the code and inside the sign in component, if you go down and here we can use the toggle register function. So let's use the on click event and pass the toggle register function.
[06:10 - 06:35] And the same way, let's copy it and inside the register component, we can paste it here as well. If you go back to the browser and click here, we see we can switch the login page and the register page.
[06:36 - 06:42] Inside the login component, we can now try signing in. If we type something, we see the error.
[06:43 - 07:14] This is until the validation is correct. If we type the email [email protected] and the password to be password@ thereat123, if we open the console and if we click on submit, we see a response, which means the API is working fine.
[07:15 - 07:39] Let's try it for the register component now. So let's open register and username can be super user and email can be super [email protected] and we can keep the password to be the same.
[07:40 - 07:48] So password@thereat123. Let's clear the console and click on submit.
[07:49 - 07:53] We see a response here as well. Now our login components are working fine.
[07:54 - 07:56] What we can do is take it forward in the next lesson.