All language subtitles for 020 Sending a _Change Password_ Request From The Frontend_Downloadly.ir_en

So, let's now connect the front end

to the back end by sending a request

to this Change Password API route.

For this, we got this user profile component

and there the profile form component,

which is responsible for rendering this form,

and it's here where I now

wanna handle the forum submission,

extract the entered values, and then send the HTTP request

or send that extracted data to the parent component.

So to the user profile component,

and then they are send the HTTP requests

depending on where we wanna do that.

So let's start with handling form submission

and getting the entered data,

for this we can add a new function here in the profile form

component, the Submit handler, or however you wanna call it

there we get to the event object

and we can call event prevent default to prevent the browser

default of sending a request automatically

which we don't want.

We wanna control that with JavaScript

and send our own request.

And then we can point

at this submit handler on the, on submit prop on the forum.

That is step number one.

Now for extracting the entered values

we could use use state and listen to changes

on these inputs with every keystroke

with the on change event.

Or we use refs to extract the values

right when we need them.

And I'll do that ladder approach

I'll use that ladder approach.

Hence I'll call use ref here.

And of course, import use ref from react.

To set up a reference

and create a old password ref here

and then duplicate this to also create

a new password to ref.

And now we need to connect these refs to the inputs.

So here with the ref Prop

we connect the new password field to the new password ref

and the old password field to the old password ref.

And now we can use these refs

and submit handler to get the entered values.

So the entered old password can be extracted

by using the old password ref then dot current

as we always do, unwrap stored value

and the same for the entered new password

here we use the new password ref and get the value.

Now we could add validation here.

So we could check if the values are valid.

So that is something we can do here,

but just as before I'll not do it here

because we, in the end

don't proceed on the service side anyways

if the input is wrong and I wanna focus

on that authentication and service side part here.

So I will just assume that the entered inputs are correct,

and with that assumption

we now can send the HTTP request or pass that data

to a parent component, which then sends the HTTP request.

It's up to you, what you wanna do.

I will go for the parent component here

and they offer in the profile form component function.

I'll accept this props argument.

And then here call, let's say a function which we get

on the on Change Password Prop.

The prop name is of course

up to you since it's your component.

And as a argument to dysfunction

which I expect to get on this prop

I pass an object with the old password, which is set equal

to the entered old password and the new password

which all set equal to the entered new password.

Now we just need to make sure

that we set such a on Change Password Prop

on the profile form component when we use it.

And that is something we do

in the user profile component

here we use the profile form component

here We add the on Change Password Prop

and then point out a function which will be passed

into the profile form through that prop.

So here we can add the let's say

Change Password handler function

and pass this as a value into profile form.

And here we get the password data.

So there's object with the old and new password.

We get that here.

And then in here, we can send this HTTP request

and we do this with the fetch function again.

And the URL is slash API slash user

to target this user folder

in the API folder slash changed dash password

to target this change password file.

Now we need to configure this request

with this second argument.

And for example, change the request method.

Here we expect to get a patch request.

Otherwise we don't continue.

And hence, when we sent this request

we need to set the method here to patch.

Then we wanna add a body.

So data to that request in JSON format

And you're all just forward my password data

which is this object

with an old password and new password field.

And you have to make sure that you have old password

and new password written like this in his object.

So did you use these property names

because it's old password and new password

which I try to extract

in my API route on that incoming body.

So if you picked different names here in this object

which you create in the profile form component

then you need to extract that same, these same names

in the API route .

Here, I'm using equal names everywhere

and they offer this should work

now last but not least

I'll add my headers here

and set the content type to application JSON,

to make it clear that this request carries JSON data.

Now that returns a promise and to use sync await all

turn this into an sync function

and await this and get my response here.

And then here, I will simply get my response data

by a waiting response thought, JSON

and then I'll just log that data here.

And of course we typically want to give the user

more feedback.

Logging to the console is not something we wanna do

because the user will and see this.

But this is only for us

as a developer here to check whether it works.

So now, if we save all of that, this should work.

And if we now go to this profile page and reload it

if I open the developer tools,

we can test this now.

For this, I'll enter a new password

and I'll start by entering an incorrect old password.

If I now click on change password

I get a four Oh three error, which says invalid password

which makes sense

because I entered an incorrect old password.

Now I wanna try the correct old password.

But before I do that, let's go to MongoDB Atlas

and find those documents here, again, to update this.

And let's try to memorize this string

of course not the entire string

but we see that it starts with this strange part

has a dot then lower case C K

uppercase AP ends with w eight,

these are things we can memorize.

And if everything works

now that I update the password with a correct old password

this string should change now because we override

that existing password with a new hashed password.

So for now click Change Password

with the correct old password

I get back password updated, which looks good.

And if I now find documents again here,

indeed that is a new hash password.

And if I now log out here and I try to log in again

with the old password, that should fail

and it looks like it does because I'm not redirected.

If I would still be logging my, my data here, we should see

that we have an error there, but I'm not logging it anymore.

We're not handling this case that it fails.

Hence we get no feedback on the UI

but we clearly are not locked

in because we're not redirected.

But if I now try the correct new password

and I click log in, now I am redirected.

So now logging indeed work

and I can then navigate around

as I did before reload this page.

And that all works.

And that's now how we can also work

with our protected API route

which also requires authentication

but which now checks authentication

on the server site instead of on the client side

or for the client side pages as we did it before.