[MUSIC] Application settings. As we understood from the previous lecture, it is a way that native script provides for us to store small amounts of information related to the settings of our app within the application. Now it provides a way of storing information using the key value based storage and then enables us to retrieve the information and use it when required. In this exercise, we'll look at the use of application settings as a way of storing the login credentials for our application. Also, we will see the use of the login dialog as a way of allowing the users to type in their login credentials and log into other application. Of course since we don't have a full-fledged server side at this moment, we will not do the entire login processing but we will show how we can capture the login credentials within our application. When we build that server side in the last course we will hook this up to the server side authentication in that course. To get started on this exercise, go into the code, we will configure where login dialog in the drawer component in our application, because the drawer component is presented in all the remaining pages of our application. So, going into the drawer.component.ts file here, in the drawer component, let me import login and then LoginResult from ui/dialogs. So the login allows us to open a login dialog, the LoginResult is in object but stores the return value from that login dialog that we passed back to our component. Also, let's import the { getstring, setstring } matters from, Application-settings. So this is where we will employ application settings to store the user name and password for the user within our application and then configure the login dialog automatically before we open it. So once we import this tool in our drawer component, let's include a method called displayLoginDialog which as the name implies is a way of presenting the login dialog to the user. So in here, let's set up the options for that login dialogue. So the options include title, which I will present as Login. And, Message, Let's say, Type Your Login Credentials, let me a bit more, Verbose here. And then the third setting is the userName. Note, userName with a capital N in between. So you have to be very careful to make sure that that has a capital N here, as shown here, userName. This is the setting that is used in the login dialog, and also the login result will return the value accordingly. And here, we will use the getString method from application settings. So in the getString method, I will return the value by retrieving it using the key userName. So I'm using exactly the same as here just for convenience. You can of course specify anything else you want here, but It makes more sense to specify exactly the same thing so that we remember what we are trying to retrieve from the application settings. And the default value would be an empty string here. And let's set up the password also. And in case we store the password, We'll retrieve the password also from our, Application settings. Of course, in real life you should be encrypting the password before you store it. Because this is a simple exercise I'm just like illustrating without encrypting the password, but, We will be able to store the password like this here. That should be a comma. And OK button should display and instead saying OK button will say Login here. And the cancel button. So as you, Expect, the login dialog will show two buttons here. The login and the cancel, the OK and the Cancel buttons here. Now once the, Options are configured we can open a login dialog by saying login and then pass in the options as a parameter to the login. And this login will obviously return a promise. And inside here, we will handle the promise accordingly. So inside, where in the promise, we will get a parameter for the call back here for the resolve function of the promise of the type login result. So when this parameter was delivered, so that means that our application is passing back information to us. So we will handle it inside the bend here. And then we'll say at this moment, we'll simply save the values of the userName and password here. So, when you start out your application, your username and password will be empty. But then, the first time the user logs in we will save that value and subsequently the user will not have to type in this information in our application. It will automatically fill in the information here. So by doing this we are prefilling the login dialog with the saved username and password for the user, and where do we save the values? This is where we save the values, using the setString method of the application settings. And so here I will save the password also accordingly and then, From the loginResult.password here. So the loginResult object will contain the username and password as we see here. So if this is successful, then this is where we handle the result. We can of course handle that situation where it is cancelled so we can present the other option here. And we can say, At this moment we'll simply do, A console.log of this. In a real application, you don't need to do this actually, but this is just a way for us to recognize that the user cancelled the login here. And close that login configuration here. So with this my drawer component is configured to show the login dialog. Now in order to initiate the showing of the login dialog I need to go into the draw component and configure one of the options in the side drawer here. So let me copy this configuration here for the grid layout from the earlier version, and I will display the login button right here at the top of the remaining options in the menu. So right there I will say GridLayout sidedrawer, all this just like before. And then orientation horizontal nsRouterLink. So this nsRouterLink doesn't exist here, instead we will be opening the login dialog here. So I'm going to cut out these two, so these two are irrelevant here. And then orientation=horizontal. And then when this is tapped I'm going to call the display LoginDialog() method that I just implemented in the drawer.component.ts file. And then for the icon here, we will use the icon as fa-sign-in, as the icon here. And the text for the button here. The label will be Login. So this should show that Login option right at the top of that menu there. With this, we have completed all the updates. Let's save the changes and go and take a look at our application on the device. When our application is shown on the device and when you open the side drop, you now see the new option here for the login. Clicking on the login should bring up the login dialog as shown here. So when we type in our login credentials, let me just type in my User ID and then the password, and, Let me just type in a password here. And then click on the Login button here, then the login credentials will be saved in our application. So when I click on the Login, then the login credentials will be saved. So that subsequently when I again open the login dialog, you would see that the login dialog will be prefilled with the saved credentials that I have done before. If I cancel then of course the login will be cancelled. Again, one more time. Presenting the login dialog you can see that the login credentials are now saved in my application and will always be prefilled into the login dialog whenever I open it. With this, we complete this exercise. In this exercise, we have seen how we can make use of the application settings to store small amounts of information within our application. We also saw the use of the login dialog for enabling the user to type in their login credentials into our application. This is a good time for you to do a git commit with the message application settings.
