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.