All language subtitles for 022 Updating User Data_Downloadly.ir_en

Let's now use the user account page

in order to allow users to update their data.

So what we're gonna do is to allow the user

to update both the name and the email address for now.

And we will add the user photo here

a bit later in the next section.

Okay, now there are two ways in which we can do this.

The first one is to submit a post request to our API

just like we did with the login form, remember that?

And actually, we're gonna do that in the next lecture.

But in this one, I want to show you another way

which is a more traditional normal way.

So in this more traditional way,

we specify the post method right on the form,

along with the URL where the post request should be sent to.

So basically, using this method, we don't need JavaScript

for doing the request, it automatically happens

with the HTML form which will then post the data

to the URL endpoint in our backend that we specified.

Now personally, I don't really like this solution,

because it forces a page reload,

and it also requires us to create

yet another route and route handler in our backend.

And finally, it also makes it a bit

more difficult to handle errors.

However, I still believe that it's very important

that you know how to work with forms in this way,

because it might make more sense

in the application that you're building.

For example, your application might not even need an API,

and so in that case, when you're only building

a rendered website, then of course it doesn't make sense

to submit forms using an API call,

and instead, you will do it the way

that we're gonna do it in this video.

Alright, and so that's why we're doing it this way

in this lecture, and then using

the API way in the next lecture.

So, what we need to do in our form

in order to submit it automatically,

without having to go through JavaScript

as I mentioned before, so basically

automatically posting the data to our endpoint,

is to specify that endpoint, and so we do that here

in the form, where we specify the action attribute.

So the action, and so let's say that we're gonna create

an end point called submit user data, like this.

Okay, and then we also specify the method,

which is post, okay, so this always needs to happen

on the form element that we are submitting, okay.

Let's give it some more space here,

in order to make it easier to understand,

and so all of this here is our form,

and so when we click on this button element,

automatically the form will get submitted, and the data

will be sent using a post request to this URL, alright.

There are also different ways in which the data

is actually sent, but the default one is called

URL encoded, and so that's the one we're using here.

And so basically what that's gonna do

is to encode all the data that we're submitting

in the URL a bit like a query string.

Okay, but more on that when we are actually working

on getting the data on the server and working with it.

So, this here is the first step in making this method work,

and the second one is to specify the name properties

on the fields that we actually want to send.

So it's this input and this input,

and their values will be sent with a request

based on their name attributes.

Okay, so let's say here, name equals to name,

okay, so that's the username, and then this one here

will have the name equal to email.

Okay, and so this will then be the name of this field,

and the body that our application receives.

Alright, and so right now when we submit the form,

the body that we will then receive

will only have the name and the email,

because these are the only two fields

which actually have a name attribute.

Alright, so let's now implement this route here,

okay, so as I said with this method,

we need to implement yet another route.

Okay, so router, and remember that this is a post request.

Okay, and so this one will be in viewsController,

and let's say updateUserData, alright, give it a save,

and now let's actually create this handler.

So here in this file.

And the first thing that I want to do here

is to actually take a look at the body.

.body, okay, and so basically in this case,

just to show you that it actually won't work just like this.

Okay, and I'm going to tell you why after we

experiment it, okay, so for now let's just see

if we're actually connected already.

So if submitting that form will actually trigger

this handler here, okay, let's also

add a string here just to make sure.

Alright, so let's reload this here

so that we get our new form, and just

to make sure, let's take a look at that.

Alright, so you see here, the action and the method

that we added, and of course also these names,

okay, and so let's add some middle name here,

I don't know, let's say Sarah,

then here the email let's add the last name to it,

now we get this error, please provide email and password,

and so this kind of comes from the

login form, right, so that's weird.

So let's take a look at our form here,

and indeed, this form here has the form class.

And I think that's the one that

we used also in our index.js, right.

So here we basically got that form

using the form class, and when that exists,

and it is submitted, then we try to log in, right here.

Okay, and so that is of course not correct,

and so we should select our log in form in some other way.

So let's very quickly fix that,

here we have login, so let's just add another class here,

form login, and that's a bit weird

because we already have login form here,

but it's not really on a form element.

So we shouldn't use that, and so let's create here

form with a modifier of login, okay.

So let's put that here, give it a save,

and so now this should no longer be happening,

because now we no longer have that

event handler attached to this form.

So let's quickly reload it again, and try this again,

and now you see that it's actually doing something,

but of course it will never stop spinning here,

because we actually did not send any response back,

and so the request response cycle is never ended.

But anyway, I just wanted to look

at the request body, remember that?

And so as I mentioned before, it's now actually MT.

Okay, so as I was saying, this will not really work

just like this, because we need to add another middleware

in order to parse data coming from a form.

So let's do that in our app.js.

But first, let's actually close some of these files here.

Alright, this one as well, and now, going to app.js,

let's add that clause to our body parser,

so here we are, because actually it is very similar.

So app.use, and it's still a Express built in middleware,

so express.urlencoded, okay, and it's called this way

because remember, the way that the form sends data

to the server is actually also called URL encoded,

and so here, we need that middleware

to basically parse data coming from a URL encoded form.

Then we pass in some settings, and we can say

extended true, and that will simply allow us

to pass some more complex data,

which in this case is not really necessary,

but still let's use it here, and we can also set

the limit property as we did in the body parser,

so up here, and so let's again say 10 kilobyte.

Alright, and so if we try this now again here,

we should indeed get this data, and this data.

Let's again add this different data here,

so just so we're sure they're actually getting

not the current user, but really

the data coming from the form,

okay, and again it keeps spinning forever here,

or until it times out, but what we're interested in,

is to actually get this new data here now in our body.

Great, so that works, and so we now have our HTML form

really connected to this route handler here.

And so now we can go ahead and actually update the user

based on this new data, alright.

So, let's get rid of this, and then update the user

as we already know how to do it.

Now, first of all, we're going to have to

import the user model, so let's do that.

User, here with a small U, alright,

and so now let's say the user is equal to

await User.findByIdAndUpdate.

Right, then of course as always, mark this one

as async, and catch all the errors.

Now alright, so what is the ID that we're looking for?

And I hope that at this point you know where it is,

it will be at request.user.id.

Oh, and one important thing that we need to do,

which I didn't do yet, is to actually protect

this route here as well, okay,

'cause only then we actually have this user

on the request, right, and of course also

we only want to be able to access this route

if we are logged in, otherwise anyone could

simply go ahead and update some data.

So, here in the route, let's of course

add authController.protect.

Alright, so, that is the ID, then we need

the new data, and so let's say that we want

a name equal to request.body.name,

and the email set to request.body.email.

And remember that these are the names of the fields,

because we gave them the name attribute in the HTML form.

Remember, now before when we updated some data,

we used to pass in the entire request

here into the update method, right,

but in this case, we really only want to update the name

and the email, and so like this, we are sure

that anything else basically is being stripped away

from the body, 'cause some hacker could of course

now go ahead and add some additional fields

to the HTML and then for example submit

data like passwords and stuff like that,

and so of course we do not want to store

that malicious data into our database, right.

Also, passwords are once more handled separately,

because remember that we can never never update

passwords using findByIdAndUpdate.

Again, because that's not going to run the safe middleware

which will take care of encrypting our passwords.

Okay, and so that's why we have a separate route

for that in our API, and also we have a separate from

for that in our user interface.

And so usually that's what you always see

in web applications when you want

to update your passwords, you usually

have a separate form only for that, okay.

Anyway, let's now continue here with our options,

where we say that we want to get the new,

so basically the updated document as a result,

and also that we want to run the validators.

So this is just like we did it before in our API.

Great, so let's actually call it updatedUser.

Okay, and so what do we want to do now?

Well, after submitting the data on our website,

basically what we want is to simply come back

to this page here, but of course then

with the updated data here, okay.

So that's easy, all we will have to do

is to basically render the account page again.

And so that's similar to this one,

let's just copy it, okay, but now

there's actually one important difference,

because right now, we actually also

need to pass in the user, so the updated user,

because otherwise, the user that the template

is going to use, is the one that's coming from

the protect middleware, remember,

and so that one is not going to be the updated user.

Right, and so we need to pass in user is updatedUser.

Alright, and so, that should be enough.

So if we now reload this, or actually if now save this here,

then you see that we actually came back

to the exact same page and the data is still the same.

So let's prove that, go to some other page,

and then go back to the settings page.

And so, this proves that the data

has now effectively been updated.

So if we now log out, then let's try

to log in with this new email.

So I wanted to log out, alright, and now log in again.

And so now, we're going to use this new email,

and of course still the old password, test1234,

and indeed, this is now the new email address

that we need to use in order to log in.

Now let's just see what happens

when we pass in some wrong data here.

For example, Google Chrome allows us

to submit an email address like this,

but of course, our Mongoose model

does not allow an email with this format.

And so we should now get an error,

and so indeed, we get this error,

please provide a valid email, but that's kind of

a terrible user experience, right,

so we were just submitting our data,

and then all of a sudden, we went to a completely new page.

And actually we see that we also got to this new URL,

so the one where we submitted the data to.

And so yeah, that's a bit terrible,

and so as I was saying right in the beginning,

this way of doing things is actually a bit worse

for handling errors, which is one of the reasons

why I personally prefer to use the API

that we already created in order to update the user data,

and in general to do this kind of stuff.

Alright, so let's actually do exactly that

in the next video.