We will input login from LoginComponent and then we'll go down here and
then set up the login component as a navigator here.
So, let me copy that and then paste that in here.
We'll say const.
This one is LoginNavigator and
the login, screen is
login and all this remains exactly the same as before, no different.
So, we'll leave it as such and then let's integrate the login into our application.
So, we will put the login at the top before the home.
Typically you will see the login button right at the top, so,
that's why I'm going to put that there and then change this
to login and the screen is as you
expect LoginNavigator and title is login.
DrawerLabel is login and the icon would be sign-in.
So, that will remain as such but since the login component is put on top of
the home component the default way that this MainNavigator,
DrawerNavigator works is that this would become
the first screen that will be shown on the screen.
But, we don't want the login screen to be shown first.
Instead, when your user opens the app,
you want to just show the home screen.
The login should be something that the user explicitly does.
So, that's why I will set up the initialRouteName here to point to the home component.
So that when the app opens the home component is the first one that will be rendered.
Now, the login should be an optional thing.
So, when a user logs in maybe you want to show
his or her favorites within the app and so on,
but right now since we don't have all that on our server site so we are
not going to be doing that here but we will do that in the Node.js course.
Let's save the changes to the main component and go and take a look at our application.
Going to our application,
let me now open the side draw.
You can see that in the side draw we now have the login option available to us.
Let's click on that and then we will go to
the login page and here you can see the login form here.
So, you can see the username,
password, and the remember me.
Let me type in a username and
password and then click on the "Remember Me" and then when I click on the "Login",
you will note that this information will be submitted to the system.
To show you that the login was actually delivered to my login system, so,
here I'm showing the console here and you can see at the bottom here,
the information, the username,
password has been put right down below here.
So, you can see that the login form is actually working as expected.
Going back to our application.
Now if I navigate out to a different component, so,
let me just go to the menu component
and then if I come back again to the login component,
you will see that my information is still there in the login component.
Well, that's the way you'd expect it to behave.
Now let me uncheck the "Remember Me" box,
and then click on the "Login".
Now, let me go off to another component.