Changing user passwords: Build a Starter Kit With Inertia and Fortify

00:02

This is going to be pretty straightforward because we've seen pretty much everything that is involved here. We just need to create out a form, go ahead and find out which route we need to pass the data through to, and then we're pretty much done. We'll also change over the confirmation message as well by creating out a new response.

00:20

So the page that we've got here is the security page. Now on this page, we're going to have both the two-factor authentication and the ability to update a password. So I'm going to go ahead and just split this out into a separate form just to keep things nice and tidy. And we'll call this change password form.

00:37

And we'll just go ahead and write everything in here and then just include this on the page. So let's go ahead and build out our template real quick. And we will say change password. And then just over in that security section, let's go ahead and import this in and then just add this on the page.

00:51

So change password form. And let's just leave that like that. And we'll just add this in here. So change password form.

00:59

And that's pretty much it. So we should now just see on the page change password. Great. Okay, so our two-factor stuff is going to go down here.

01:06

So just while we're on this page, let's go ahead and add in a space on the y-axis of 12 just to split these out. And also while we're here, let's go ahead and add in our head with a title. We probably will forget some of them. But let's just add this in now and just make sure that we import this here from Inertia.

01:27

Let's pull that in from Inertia view 3. Okay, so there we go. We've got our change password and our two-factor stuff. Obviously, the spacing isn't taking effect yet because we don't have a div inside of here.

01:37

But we will do in a second. Okay, so inside of here, we're obviously going to need a form. And let's wrap that form in a div so we can introduce a header just up here. And this is going to be pretty much the same as our account section.

01:50

So why don't we just go ahead and try and steal as much as we can from here just to save a little bit of time. So let's put that header up there. And we'll say change password. And let's go ahead and build out our form here.

02:03

And again, we'll just kind of take all of the styling and everything that we have from here, just so we don't have to write all this out. Submit doesn't exist. So let's just get rid of that.

02:12

And then let's just go ahead and pull in these fields here and add them into our form. I'll go ahead and grab the button now as well, just so we've got this in here. And then we'll just duplicate them inputs down. So that's the button.

02:27

And it's going to be change password. We don't have a form yet, but we'll add that in just a second. So let's go ahead and just swap this over for the current password. So the three things that we're going to need is the current password, the new password,

02:40

and the new password confirmation. And we'll dive into the source just to check that out in a minute. Okay, so this is going to be for password. And let's just call that current password.

02:51

In fact, let's dive now into what we need to do. It's always good to do this. So phpArtisan root list. And let's head over where our password gets changed.

03:01

So it's this one just here, user password update. And that is using just the password controller. So let's go ahead and open up the password controller from Fortify. And let's look for the update method here.

03:13

And you can see here that we have this update user password action. If we open that up, not the interface, that is just inside of here. So there it is. Perfect.

03:24

So it's actually an action in our own application. So this requires a current password and a password which needs to be confirmed. It uses the same password rules that are shared between registration as well. So now that we know that, we can just go ahead and fill these in.

03:38

So current password, this is going to be now current password. We'll have form.currentpassword and form.errors.currentpassword. And we'll change that there as well. So now that we've got that on the page, it's not going to work at the moment

03:52

because we don't have that form. We can just go ahead and duplicate this down. So let's grab all of this, pop this down here. This is now going to change to just password.

04:04

And let's make sure all of that is OK. All of these need to be a type of password as well, of course. And let's just grab this again and go ahead and copy it down here. And we'll change password now to password confirmation.

04:21

And that will have changed that type. So let's switch that back to password. OK, so that's pretty much it. We can always tidy this up as we go.

04:28

Let's go ahead and add in our form, which we're going to use to post down. So we'll go ahead and add in our script in here. We will import use form from Inertia. And let's go ahead and create our form now.

04:40

So use form. And we know exactly what we need. We need the current password. We'll just set that to, yeah, let's do a null on that.

04:48

We need the actual password. And then we need the password confirmation. OK, so now we see our form. OK, we'll change this over because that replaced that.

05:00

So let's get rid of this and just say current password again. Yeah, they're all current password. We didn't change the label. So let's say password.

05:11

And let's say confirm password. We'll get there eventually. Confirm password. OK, so that's pretty much it.

05:18

And when we click on this, of course, we want to submit that form through. We've already looked at our route. So we know where to pass this down to. So let's go and do this in an action just up here.

05:29

So this function will form. And if we remind ourselves, this is going to put through to user hyphen password update. So form put. And we can use our route helper here to go through to user password update.

05:44

And we might want to go ahead and set something like preserve scroll to true. So we don't bump the user to the top of the page. OK, so now we can hook this up to actually submit this through. Let's give it a go with our console open and just see what happens.

06:00

This is usually how I work with Fortify. Just send the request. If it's worked, it's worked. OK, so again, we've got the same issue here with the named error bag.

06:08

We can either change this over on the client side. Or as we know, we've got our action now. So we could just go ahead and change this over. So you can see here we are validating with this bag.

06:19

If we just switch this over to validate and get rid of this key, we should now see these on the page. Let's just go ahead and hit this again. And there we go.

06:28

Sure enough, it works. So my current password that I registered with is literally the word password. So I'm going to go ahead and enter in something that is not correct and just check that all the validation rules are working.

06:39

Sure enough, they are. And let's now try and change my password to something else. So I'm going to say password. And I'm going to change this to password one.

06:47

So let's go ahead and click change. And the password confirmation field does not match. Let's try that again. And there we go.

06:53

So that looks like we have a successful request. And my password has been changed. I'm just going to double check this before we go any further. And we should be good.

07:02

So let's enter the new password. And sure enough, we're in. Great. OK, so if we come over to our security section again,

07:09

I'm just going to change my password back. So it's a little bit easier to sign in again. And let's submit that through. And we are good.

07:18

So the next thing that we want to do is change over the response. So we can let the user know that their password has been changed. Because at the moment, it just doesn't look like anything is really happening. We're also not resetting the form state.

07:30

So we could reset the form state. Or we could redirect maybe the user back over to another page. I think we'll stay on this page, reset the form state. And then we'll flash a message like we've been doing.

07:41

So to reset the form state, that's pretty straightforward. What we want to do is on success of this. So we just use this on success callback. We want to go ahead and just say form reset.

07:52

And that will just reset everything back to the default values for us. So now I'm just going to change my password to my current password. And hit change password. And when that's successful, sure enough, that gets reset back.

08:03

And all of these values are now null. Now we just want to go and set up a custom response. So again, if we head over to that change password controller, or password controller, you can see that we get this password update response.

08:17

So we know what to do. We've done this a couple of times already. We're going to go over to our responses section. And we're going to create out a password update response of our own.

08:26

And then we're going to go ahead and update that password update response with the current one. So that's this one just here. Let's just check that.

08:35

And we'll open up our own and update that now. So we just paste all of this in. We would just get rid of this and return back with. And of course, we're not using status.

08:47

We're using toast. So I'm going to say your password was updated. OK, let's just try this out one more time. And go ahead and update our password with the same password.

08:58

And that is password updates complete. Nothing we haven't seen before. But it's good to go through this just so we can get used to customizing the behavior of them responses.

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Episodes

Transcript

Episode summary

Episode discussion