‫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.