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