All language subtitles for 024 Updating User Password with Our API_Downloadly.ir_en

And now, to wrap up this section,

let's again use our API,

this time to also update the user's password.

Basically, what we're gonna do,

is to make this form here work.

We already created the

update data function in the last lecture,

and now we can go ahead and create

an update password function as well.

But that function would basically look exactly the same.

And so, instead of doing that,

I will change this function a little bit,

and allow it to update both the data and the password.

So let's call this one update settings.

And then here, what we will pass in is,

instead of name and email,

an object containing all the data that we want to update,

and then also a string for the type.

Which can then either be data or password.

Here, we will have data, which again will be an

object of all the data to update, and then the type.

So let's write that here.

Type is either

password or

data.

Then here, the data that we're sending

is actually just the data object.

Because when we call this function,

we will then already create an object similar to this one.

And so here, we simply need to then use data.

And so, all we need to do is really this.

Then of course,

when we're updating the passwords,

we also use another URL.

And so let's just use a ternary operator

in order to determine which URL we want to call

depending on the type string.

Let's go to Postman and actually copy

the update password URL.

Down here in authentication,

we have update current user password.

And so that one requires the password current,

the passwords, so basically the new one,

and then password confirm.

And the route here is update my password.

Similar to this one,

and so, let's find a URL here and say

if the type is equal to password,

then let the URL be

well, all of this, and then slash update my password.

And else, it will be this one here.

And so that's what we use this type parameter here.

Here, then, we simply need the URL,

and that's it.

And also down here in the success string,

we should probably then put whether the passwords

or the data was successfully updated.

And so basically here, we're going to put the type now.

Oh and let's also convert it to uppercase here,

because otherwise the type will be lowercase, like this.

This already looks good to me like this.

Let's now, just to see if it works,

actually use this update settings here

to update the data.

So what we did in the last lecture,

but now with this new function.

First of all, what we need to import here

is now the update settings function.

And in here, we need to call update settings,

with of course and object now.

And so that's this one.

And now the type string which is data.

Let's test that very quick.

Let's again add here

some name

save to settings

and data updated successfully.

Just a quick reload,

and indeed everything is working.

And so now all we need to do is read the data

from these three input fields,

and then also pass them into the update settings function.

Let's first of all select the password form,

and so back in our account template,

this one is called the form user settings.

Let's select based on that.

So just duplicating.

Form user settings, and probably

that should be called password now.

Yeah, let's actually call that password here.

That makes a bit more sense.

So user password form,

and so now here we have something very similar.

Let's just copy it,

user password form,

and now we simply need to get the three passwords.

And they are called password current, password,

and password confirm with the dashes.

Password current is here called

with the ID password current,

and now just duplicating it three times.

Confirm.

And here, confirm as well.

And now let's just go very quickly to Postman again,

just to really make sure that this is the variable names

that our API expects.

Let's just copy these here to quickly compare them.

And so indeed they are called password current,

so the exact same name here,

then password, and password confirm.

And so if we now create an object with these three,

then that will be exactly the data that's

gonna be sent to the API, and so our handler

will then be able to read that data correctly.

Password current, password, and password confirm.

And now just to finish,

here of course it has to be password.

Let's now test that.

And so the current password is test1234,

and now I will create a new password,

called newpassword.

Newpassword again, and so as I already mentioned,

we need to put in the current password,

so that in case that someone finds your

computer open, for example,

they cannot simply change your password

without knowing your current one.

And then of course we need to confirm the password,

just so we don't make any mistake in the original one.

So let's save it now,

and password updated correctly.

Great.

Let's actually take a look at the cookie now,

because we should have gotten a new one right away.

And actually, that is exactly right now.

That's the time I'm recording this video,

and so that means that we are now still logged in.

Just to remember why this happens,

it is because here in the auth controller,

down here at update password,

we in the end actually logged user in,

so here in create sent token,

we send a new cookie right away.

And so that means that we are still logged in.

If we are now to reload this page,

and I will actually not reload it,

I will just open it in a new tab,

'cause I want to show you something else,

but, what matters here is that we are still logged in.

What I wanted to show you is that

we now still have the passwords here.

And we actually don't want that.

After the API call was successful,

we should then go ahead and delete

the content from this input fields.

That's something that we should do also here in this file,

because we said that right here is where we handle

everything related to user interface.

Now, remember that this update settings function here

is actually an asynchronous function.

And so it's going to return a promise.

As you already know, at this point we can then await

that promise right here.

And in this case, it's not really to save the result

of the promise to anything,

it's only to wait until it's finished,

so that after that, we can do some other stuff.

And in this case, that is to clear these

input fields that I just showed you.

Now of course, in order to be able to use await,

we need to mark this function here as async,

but that's very easy.

So now all we need to do is to select these fields again,

and then clear them.

So let's just grab

this here.

And then set them to empty.

And that's it.

So that's really simple.

And let's just duplicate this,

and confirm.

So let's try that again.

And so now let's keep in mind that the password

is currently newpassword,

and now let's go back to test1234,

test1234.

And now actually the fields are cleared.

But maybe you also noticed, just like me,

that it took quite some time until we

actually got our alert here.

And that's because setting a new password

sets some time because of the encryption process.

And so we should give the user some kind of feedback that

there is actually something happening in the background.

And typically you see some loading spinners

somewhere on the page,

but let's keep it very simple here,

and all I'm going to do is to update the text here

as soon as we click it,

and then when the API call is finished,

we will set it back to save password.

That's a very nice little touch that

we can add to our user interfaces,

and we could do the same here for the user data form,

but that one is usually very quick,

and so we don't need that.

I'm going back to this template here again,

because I need to select this button here.

None of them here is really unique,

so let's add yet another one.

So button save password.

And so let's do that right here,

right at the beginning,

document.queryselector, that was the wrong one,

so queryselector.forlcass.value

and set it to "Updating..."

And then, once we are done, so after this await,

we set it back to update,

or save I believe it is,

yeah, it's actually save password.

Give it save, and see if that works,

and if it does, then we're actually done.

And so again, now the password is test1234,

and I'm setting it back to newpassword,

and now let's take a look here at our button,

ah, that didn't work, and I already know why that is.

And that's because, of course,

we cannot use value to change the

content of some html elements.

So for that, we use inner html, or also text content.

So we could use text content as well,

so let's do that.

And so one last time, and so now we can actually

set it back to the default password.

The current password is now newpassword,

and then test1234,

test1234.

And now let's see,

ah, and now it works.

Beautiful.

And again, you will see that we are still logged in.

Perfect.

And with this, we actually wrap up this section.

Congratulations, one more time, for making it this far,

and all this amazing progress that you've been doing.

We're actually almost finished with our project,

but in the next section,

we will continue adding some more stuff to it.

We will have file uploads,

we will create some really cool email templates,

and also, we will even include

payments into this application.

There's still a ton of awesome content ahead

to make this project even better.