0:00
[MUSIC]
We have just learned that ionic storage provides a easy way of
storing data in the form of t value pairs, and adjacent objects.
We also learned that storage provides a way of dealing with
the variety of underlying storage engines that are available on various platforms,
but still providing a uniform API for our application to make use of.
In this exercise, we will employ storage to store data and
in the process learn how to use the ionic storage within our application.
0:43
To help us understand how to make use of storage, we will create a new page
within our ionic application called the login page which enables users to log in.
The way we will use storage is to remember the username and password for
the user within our application, and automatically fill in
this data if the information has been saved by the user in our application.
1:09
So to get started, at the prompt type Ionic
g page login, and
once the page is created then they will move onto update our application.
Going to our application in the editor.
The first step is to go in and
update the app module.ts file to include the U page,
so we will import the login page,
2:14
We want to use the login page as a module within our application and
display it when the user needs to log into our application.
So to set that up, we will go into the app component to our TS files.
And then import that login page into our app component.
So, Import the login page from,
2:51
From the login page, and then we note that the support for modal is already
included within our app component, because we already created other modal,
so we had the modal controller already Important into our application.
So all that we need to do is to setup a function here called,
openLogin, which will open the login page as a modal.
So within this we'll say, Let modal,
this, ModalCtrl.create,
3:35
LoginPage and, Modal.present.
And of course we go to app.html and
add in a button which will trigger the showing of the modal.
So going into that app.html page right there at the top,
I will add in the new button.
3:59
Let me simply copy the reserve table button there, and
then paste it in there, because the basic functionality is still the same.
So button color, primary-pale, menuClose,
ion-item, and this will open the login page.
And the ion icon and the main icon is log-in.
And then we will use Login as the text within that.
But so with this our app component and app module are all set up.
Our next step is to add in the support for using storage within our application.
So to do that we'll, again, switch to the app module.ts.
And then right there I
will import the IonicStorage
from @ionic/storage.
Now as part of the IonicStorageModule from ionic storage.
As part of the scaffolding out of initial application via ionic CLI,
the ionic storage is automatically included into our application.
So you can check the package.json file that notice that is
already included and installed within our node module.
And so, once we configure that then,
going into NG modules in the imports after the ionic module,
we will import the ionic storage module.
6:01
And for root, now once we are done with that,
then we need to setup our login page to show the information.
So to setup the login page,
let me go into the shared folder and
then create a new file named user.ts.
And this will export an interface named
user which at the moment will contain username and password.
6:51
Then switching to the login.ts file, so
going to login.ts file, here.
We will update at log.ts file to serve as our modal for
letting the users login to our application.
So in here, along with the component, we have important IonicPage,
the NavController, NavParameters.
And since this is going to act as a modal, so
I will import the view controller also into our application and then,
7:27
Since I'm going to be using forms within this application,
so I will set up for the reactive forms.
So I'll import Validators,
FormBuilder, FormGroup,
from angular forms And
then, in order to use this storage module,
we need to import Storage from ionic/storage.
8:26
Shared user.
Then, going down into our application,
let's start configuring our application to display the fall.
So, going into that login page, I'm going to create
a LoginForm of the type FormGroup.
So this is the one that stores the form that we use in our application.
And then a User which will be of the type User, and
then I will initialize this to username and
empty string password and empty string.
10:54
And, we will use a Boolean variable called remember, which we will set to true.
And this would be linked to a check box in our phone,
which when click will enable our application to save
the username and password, within our storage.
Now, also if the application is already
having the information about the user.
Then, we want to be able to fix the information from the storage.
So this is where we will see storage.get ('user').
And since this supports a promise interface,
so I will say .then and inside of then,
we will either get the user value.
If you get the user value,
then you can act upon the available information about that user.
Now, if the user turns out to be not null,
then of course, we have the user what is obtained from storage.
So if it so happens that your application is just starting out,
then the user value is not in your storage.
And will return a null value.
Then, that means that the users information is not within our storage.
Similarly, if the user decides not to store the username and
password withing your application,
then the username information will not be available within the storage.
So we should deem to the fact that the user information,
is not available and correspondingly, not initialize the font.
But if the user information is available within our storage, and
it is fetched by the storage kit method.
Then, we will setup the two fields within
our form, the login form, the username and
password to be equal to the value that we get from our storage.
So, within this storage, so
we'll say if (user), which means that the user is available.
So, then we'll say this.user = user.
And then, we will use the patch.
13:28
Reactive form, to patch in the new values for our application.
So, in the previous course, we had talked about the setValue and
the patchValue, as way of setting up the initial values written the form.
So we'll say, patchValue username this.user.username.
So notice that we are setting up that username.
And then, we'll set up the password
also as this.user.password.
14:16
The user value is not available.
So, just to remind myself,
let me do a console.log.
This is not essential.
You can delete this, once you know that your application is working correctly.
Sometimes I used the console.log just to keep tract,
to see how my application is responding in this situation.
So that's the reason why I'm using console.log.
So, within the storage.get method, notice that their promise that this return
is handled Inside here, so the promise will return the user value.
And then, if the user is not null then we will patch in the value to the forms and
if not, then we'll just do a console log saying user not defined.
And then, we need a way of dismissing the form,
so we'll say dismiss and
this.viewCtrl.dismiss.
So this is a way of dismissing the modal.
And also, we'll have to.
15:33
Implement in onSubmit method, which will handle the form submission.
So when the form is submitted, what are we do?
So we'll say, this.user.username
= this.loginForm.get('username').
So you know that this is how we can get.
The username field from the loginForm, so value.
And this.user.password,
this.loginForm.get('password').
16:18
And value, and, Now,
we will also have a checkbox within our form which
when ticked by the user will tell us that we need to see the username and
password within our application.
So, this is where the remember that we created here within our form.
So in our form, we have the this Boolean variable remember,
it should be tied to a check box.
So, if that is true then, I need to store this,
17:04
User information within our storage.
So we'll say, this.storage.set('user').
So recall that this is the way that you will save values to your storage.
So and save this.user,
so if the information needs to be stored
then we store the user and also the else part.
So if the check box is not ticked, then I should also remove,
17:48
The user information from my storage.
So if the check box is not ticked,
then I will dribble the user information from the storage.
So notice that how we handle the case where the check box for
the remember is ticked or not ticked here.
And then once we are done with this then we'll say this.viewCtrl.dismiss and
then close that model at this point.
So with this, my login form is set up in my application.
So all that we are left with is going into the login.html page and
set up the login form within this page.
So, for the login form, let me set up the button
in the nav bar to close the module.
So what I'm going to do is I'm going to copy this part from
the reservation.html page.
So this is where we setup our toolbar for our module.
So I'm going to copy that part going to login and paste that in there.
19:46
Is tied to that formGroup,
the loginForm formGroup in our TypeScript code,
and then we'll say ngSubmit, which should
be tied in to onSubmit method that we have implemented.
Inside our application and then close off the form here.
Now this form as you expect, Contains three items.
So I'm going to create, one, just
copy that, two and three items.
So the first one would be a,
23:59
We'll now notice that within the side menu,
we now see a new button called Login button.
When we click on that, the Login form will open up.
And as you expect, you see the Username and Password, and
the check box here called Remember Me set up here and
the Login button which will become active only when the form is valid.
So let me type a username.
24:35
And we'll leave the Remember Me as checked in, and
you'll notice that the Login button becomes valid.
And when you click on the Login button,
the login information is submitted to our application.
In order to be sure that it is submitted and
saved in our storage, we can go to the developer tools.
25:01
And within the developer tools, let me drag the developer tools up here.
And within the developer tools we can go into the application and
then on the left side you will see the storage being shown here.
In the storage for the browser,
the Ionic storage will make use of the IndexedDB storage.
So if you click on the ionickv here, you will notice that inside
this storage here, in the IndexDB storage here you will see the key,
user, and the value, object, being stored here.
And you'll see the username and
password information being stored within our database.
Of course, if you are implementing this as a real application,
I would strongly suggest that you encrypt the password and store it there.
You should not be storing it as a text file.
But again, since I'm just illustrating this to you,
I am storing it as an unencrypted password there.
Similarly, on the iOS site you see that when you bring up
the form you see the information within the form is already filled in for you.
Because our application has retrieved this information from the storage and
automatically filled the form for you.
Same thing on the Android side, when you now click the login form,
you see that the username and password is automatically filled in for us.
Now, if I click on don't remember and then I turn off this,
and then do a submission of the font.
If I bring up the form now, you will notice that the form is unfilled here.
So clicking on the, Checkbox
here ensures that the form information is stored in your storage.
If you uncheck the box,
then the form information is not stored within your local storage.