This episode is for members only
Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.
Get started
Already a member? Sign in to continue
Playing
20. Updating profile details
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
Okay let's go ahead and work on our profile information and updating the email address and the user's name. So this is going to be pretty easy to structure out because we've already got some form stuff that we can just copy over and then we're obviously just going to submit this
00:14
through to the Fortify endpoint and everything should be updated. So let's make a start here, we're going to go ahead and just swap out this profile information with a header and let's just say profile information. Just while we're here as well let's add in a head element before we forget, we'll probably forget some of them at some point but let's go ahead and pull this in and just to
00:38
find this out down here with the title so we can say profile information and that should show now if we just open up a new tab, there we go great and let's start this header up real quick. So this is just going to be font bold, text grey 900 and font mono, there we go. So the form itself we can just steal from the login form it doesn't really matter too much. So let's go ahead and
01:04
just grab this entire thing here for our email address and we'll put this into a form which of course we'll submit. So we don't have any errors at the moment because we don't have a form but we can easily just add one in. So this is the email address and then we're going to have another one for the name which we can grab from our register modal. So let's find that name and let's pull this
01:30
over, great. So let's pull this into here and let's go ahead and pull in our form just so we don't see any errors. So let's pull in use form and down here let's create out our form with use form and the only details at the moment we need to submit through is the email address and the name. So let's pull them both in there and we shouldn't see any errors, great. Okay so we can style this form up really
01:59
quickly. Let's go ahead and set a margin on the top of 10 and a space y of 6 and that's nicely separated out and then we just need a button which again we can steal from one of our pages just here. So let's grab the login one and we'll put that down the bottom just underneath the last one and just call this update or something and the same will be for the disabled state, the form
02:22
when it's getting processed we want to disable that. So the next thing we need to do is get the user's details into this form because of course these are existing details. Once again we can go ahead and use use page for this. So let's go and put this down here, we'll call this page and we'll invoke use page and then from this we can say page props auth user and email. So we can do that
02:50
directly in here and we can do the same thing for the name as well. So they will be added directly into there for us which is great. Okay so now that we've done this when we submit this form we want to send a request through. So let's go ahead and say v on submit prevent and this is going to be a little bit longer so let's go ahead and just call this submit and then just up here let's go ahead
03:15
and create out a submit method to submit this form. So we want to post through to a location. Now once again we're just going to go ahead and bring up our root list so we can find out where this is within fortify. So we've got this put user profile information here so this is named user profile information dot update so we know that we can just go and reference this as a root
03:39
directly in here. Now with this we want to be careful with our modals it didn't really matter too much but we want to send some options through to this like preserve scroll and that will stop the page from jumping to the top when this gets submitted if you have a longer page. So let's try this out we'll bring up our console in our network tab just to make sure this is going through and
04:04
the post method is not supported for this route so this is a put route so let's go ahead and change that to put we should have seen that but that's fine and let's hit update and there we go that looks like it was updated. Now we can test this out by going ahead and just changing the name over and what should happen is obviously when we update this this is going to be updating the back end
04:28
but then it's going to come through and refresh the data that we're sending down globally with inertia so when we hit update you can see sure enough that has changed over and everything looks good. With the email address obviously all of this is validated and let's just remind ourselves that we have this actions folder up here and we've got this update user profile information action so
04:49
this will validate everything for you and it will go ahead and update the user as you would expect if you have more details in here you can just add these in here now we've got one issue with this and that is if I get rid of one of these and hit update notice that we don't get our validation rules coming through now let's just inspect the network request when this happens just to see
05:09
what's going on so you can see that we do get errors but these are under a named error bag so this is named under update profile information now there's a couple of ways that you can get around this the first way would be to reference these properly within your template so just an example let's use the name as an example we could say form dot errors dot user profile information
05:31
so let's grab that from there and then you could reference that like that if you wanted to and that would give you what you would expect the other option is just to leave this like you'd normally find and then over in your update profile information get rid of the validate with bag and just validate it so that just names it so you can keep these separate if you have multiple errors on
05:56
a page but in our case it's just on one page so I'm just going to get rid of that from there and validate it like normal but if you have multiple forms on a page validating with a specific error message bag and the name of that being specific helps so you can have separate errors but we're going to go ahead and just leave that as it is and you can see that the errors now come through
06:17
properly which is great now the last thing that we're going to do is look at flashing a message like we built earlier with our toast functionality and tell the user that their profile information has been updated at the moment it just doesn't really do much so how do we do this well once again we're going to kind of dive into the source here check out the response we get back when we
06:37
update our profile information and then we're going to create our own response and then tack in that flash message so if we go over to our root list again you can see that this is using the profile information controller so let's open up the profile information controller from fortify and let's just look for response and see what we get so you can see here is returning a profile
07:00
information updated response so if we go ahead and open that up and have a look at the actual implementation for that you can see sure enough it just redirects back with this status now that's not what we want we want to change this over to use our own flash functionality so again we're going to copy this entire response and we're going to hook that up to our own response so if we come
07:23
over to http and our responses let's create out a new file in here called profile information updated response dot php paste this in we will go ahead and change over the namespace because that now exists under our app and we can just go ahead and hook this up so over in our fortify service provider we're going to do the same thing here but we're going to hook up the profile
07:51
information updated response to our own response directly from our app and that's it so now we can just modify this version of our response to do what we want so i'm just going to get rid of all of this json stuff again because we're not going to need that and i'm going to redirect back with a toast and we're going to say your profile information has been updated or whatever you
08:17
want to say so now when i click this there we go now we didn't actually change over the body here so let's go over to our toast here and switch this over to actually use the body we kind of missed that earlier you probably noticed that if you're following along and there we go so we get our flash message out there and then of course that goes and also the body kind of goes before
08:39
the flash message goes so let's fix that now let's go over to our toast plugin that we created earlier that's under use toast and what do we want to do when this finishes well we want to maybe just keep the body as the previous body just so it stays in there it's always going to be reset anyway so let's just get rid of that from in there and now at least the body stays while that is being hidden
09:05
and then of course the next time around it's going to be set to a different message that's absolutely fine so there we go profile information updating really really easily changing over the response so we can use our own functionality for that toast message and that's pretty much it we're done with updating our profile information
40 episodes•5 hrs 21 mins•1 year ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!