Build a Starter Kit With Inertia and Fortify
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
18. Creating an account layout

Episodes

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress
01. Setting up
01. Introduction and demo
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
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
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

Transcript

00:00
Okay, so to get started on our account management area, including our security features like our
00:05
password and two-factor authentication, we're going to go ahead and create an overall account layout, but we're going to introduce the checks for our features as well. So we're going to hide and show our menu options based on the features that are enabled. If we just remind ourselves of that, if we go over to our Fortify config, we might not have the update passwords feature available,
00:29
which means we will need to hide the menu item for that, and the same for two-factor authentication as well. And this is going to get slightly trickier, because if you think about it, these are grouped. So we've got update passwords and two-factor authentication. They're kind of within the same security feature section. So we'll deal with that in a second, but let's go ahead and
00:49
create a page out and build our layout first of all. Okay, so we'll start out with a controller. So let's go ahead and make out a controller in here, and let's put this under account, and we'll just call this account index controller. So this will be where our default profile information shows. Okay, so if we head over to our root section, let's go ahead and register this controller out down here,
01:13
and we'll just set that to account, and that will be our account index controller, and we'll call this account and index. Great, so over here let's go ahead and return out an inertia view, making sure we also add in our middleware in here. So let's say auth middleware, and in here let's return an inertia response, and we'll render out account, and let's just call this account just to
01:41
keep it simple. Okay, so let's build this page out. So over in our pages section, let's create a new account section, and let's create that account.view file in there, and we'll just put a template in here with account for now. Okay, so let's hook this up. We know that this is called account index, so we'll head over to our navigation, and let's look at where we have this account section here,
02:05
and we know that we can now bind this in with our root and account index. Okay, so if we come over and click on account now, it looks like that's not working. I think this is getting in the way of that right now. I'm going to go ahead and get rid of this. We can fix this up a little bit later. We will see the menu still appear, but let's at least get this working for now. Okay, so we've gone through
02:27
to our account area, and now we need a layout for this account area. So let's go over to our layout section under default. We'll copy this over, and we'll create a new account layout just out here, and let's just review just to make sure we've got everything in here that we need. So we're still going to include our toast. We still need our modal functionality in here,
02:49
so there's a little bit of duplication, but I think that's absolutely fine. Okay, so for our account page, let's open this up, and much like we had on the rest of our pages like our home page, we're going to go ahead and pull in the template that we need. So let's do that up here in our script section, and this is now going to be our account layout, and we'll swap that over for
03:16
account, and then in here we'll have our account details. So account, or let's call this profile information. Okay, great. So our account layout at the moment is going to look exactly the same if we just name this properly. It's going to look exactly the same as our main pages, but now we want to go over to our account layout and set this up so it looks a little bit different.
03:43
So what we're going to have in here is a slot still, but we're going to have a menu on the left-hand side, and then we're going to have the slot content on the right-hand side in another container. So this overall container here is going to be a grid, but we only want that to happen on a small viewport because on an even smaller viewport like an extra small mobile, we want
04:03
this to all be underneath each other. So we'll set that as a small grid, and we'll set the grid columns to say four and a gap of eight, and we'll do a space on the y-axis of eight as well, and then when we get out to a larger viewport, we'll get rid of that extra spacing. So we kind of want a gap on between each of these things. So this will be the menu, and this will be the content, and then
04:28
we want to get rid of the gap when we go down to a smaller viewport. So that's basically what that's going to look like. Okay, so for the overall thing then, let's set a margin on the x-axis to auto, and we'll set a maximum width of, let's bump this down to a 4xl, and we have something like this. So we've got a menu here and our profile information here. Now if we just open up our responsive view
04:48
again, this is what I mean. When we pull this down, we don't want the grid, we want these to sit underneath each other, and then the spacing for the menu on the right-hand side to the space x of eight will disappear when we have a smaller viewport, and it will only show that here. Now we can kind of demonstrate that by setting a background of blue 500 here, and then setting a
05:11
background of blue 900 here, and you can see we've got that gap, but when we pull this down, we don't. It's full width, so we only have that space between here on a larger viewport. Okay, so let's go and get rid of these backgrounds. We're not going to need these, and let's set the column size for each of these. So we could set a colspan of one for this, and a colspan
05:34
three for this to make up the max of four here. That's just going to make our menu a little bit smaller, and then inside of our menu, we can just start to create out a nav. We'll create an unordered list with some list items, and let's style this up. So for our navigation, let's on a small viewport set a border on the right hand side, and we'll set the border to just slate 100,
05:58
and we'll set a height of full. So that's going to give us a border just here. It's really difficult to see, but it separates the content out nicely, and for this unordered list, let's go and set a space y of one, and then for each of these navigation items, we are going to have a link in here. Let's make sure we import that from Inertia, like so, and then each of these links are going to
06:26
go through to whatever we want to hook up to. So this is going to be our account profile information. Let's call this profile information, and then we're going to have another list item for our security section, which will be our password and our two-factor authentication. So we've got them two in there now. Okay, so we just need to style these up now. So let's go and apply some
06:50
color to the text. Let's set this to flex with a padding of two, and we'll specifically set the padding on the left to three, and let's set the text to small and the font to semi-bold. So we end up with the following, and let's do exactly the same thing for the link just here, and we'll set an href in here to be empty just for now. So we'll do that for both of these, and let's head over, and
07:17
there we go. Great. So what we want to do is maybe just space this stuff out a little bit more. So let's set a padding on the x-axis to four, and padding on the y-axis to six for this overall thing, just so it pulls in a little bit more, and we've got that border down here. Let's check this out on a smaller viewport just to make sure this looks good, and we could probably do with getting
07:41
rid of that on a small viewport. So let's set this to small. Actually, let's bring that back to normal so it lines up, and then on a larger viewport we'll go ahead and set this to say a padding y of eight, and I think that should be enough. So let's pull this out, and there we go. So we get a little bit more spacing at the top. Okay, so let's go down to each of these links, and we'll check what the
08:12
background color looks like when these are selected. So I'm going to set a background of grey 100, and yeah, so that all nicely lines up with the small border we've got down here. So when that is active, we can show the grey background. We're not going to get to that just yet, but we'll look at how we do that in a moment. Okay, so now that we've got this, we can go ahead and just build out
08:35
the security page. We're not going to put anything in there. We'll just see how this template works, and then we're going to do a slight refact this template so we don't have the duplication that we have just inside of here. So we don't have, well, if we come over to the actual layout, we don't have all of this toast and navigation duplication in here, and I'll show you how to do
08:55
that. Okay, so let's build out our security page, and then at least that's done. We'll get the boring stuff out of the way and done with. So we're going to create our security index controller, and that's going to be responsible for showing that security page. So let's go and say account slash security, and security index controller, and let's get rid of that, and then let's call
09:21
this account and security dot index. Okay, so let's grab this. We'll hook this up to our navigation, so we'll find security, and we should be able to click through to that and see that. Okay, so let's go over and build that page out. So under our accounts section here, let's pretty much copy this over because it uses the same template, and let's say security dot view,
09:51
paste that in, and that's going to be our security section. So let's hook up our navigation items within this template first of all. So let's go over to our account template, our layout, and let's hook these up. So this is going to be account index, and this one's going to be account and security index. Okay, so we should have everything hooked up now. Let's just check
10:17
this out. Okay, so yeah, invalid root action for our security index controller. Let's just fill these in really quickly. So we'll add our middleware of course, because we want to be authenticated, and then invoke is just going to return an inertia response with that account security component we've just built. Okay, so let's just check this out. So if I click on security,
10:41
we go over to the security section, and of course up here we can click on that as well to go through, and we'll figure out the navigation issue later. Okay, so now that we have got this page in here, let's talk about the template. If we go over to our account layout, we've got all of this duplication of our toast in here, and we've got our modal stuff down here as well. How can we
11:04
improve this? Well, in inertia what we can do is have sub layouts that are injected into the slot content, so we don't have to duplicate all of this stuff. If you think about it, we've got this overall template which has our navigation. If we just created a really simple layout for our account information, we could have that injected into the slot, and then we could have this injected into
11:29
that inner slot. Now this sounds more complicated than it is, but if we head over to for example just our account page here, what we can do is we can swap this out for an array, and what we can do is import our default layout from here. We can set that as the first layout and account as the second layout which gets injected into the slot. So now that we've changed this over, if we head
11:56
over to our profile information section, technically now because our account has our navigation in it, this is duplicating our navigation. So now that we have injected the account layout into the default slot, and then the content into the account slot, we can go over to our account layout and we can get rid of the modal, we can get rid of the toast, and we can get rid of the navigation. So we can get
12:19
rid of these two here, and we can get rid of the modal down here. So if we come over, there we go, we get exactly the same thing. So inertia is really good in this regard. It allows you to inject our sub layouts into each other. So that works in exactly the same way, we just need to figure out changing over our security section. So we can just go and do the same thing here,
12:41
add in our default layout, and then go ahead and do the same thing. So we want to start with our default layout, account gets injected into the default layout slot, and then our content here gets injected into the slot within account, and we end up with the following, nice and tidy without any duplication within our layouts. Okay, so that is our account layout working. In the next episode,
13:05
we're just going to take a little bit of a diversion to look at our selected items, because we kind of want these to be selected, and there's a way that we can do that really neatly by hooking into our Ziggy routes, and we can do the same for the pages just up here as well. So let's take a look at that in the next episode, and then we'll get the rest of our profile stuff done.

Episode overview

In this episode, we set up the basic structure for the account management area of our app! You’ll see how we create the main account and security pages, making sure the layout is clean and ready for all the user profile and security features we’ll add later (like updating passwords and enabling two-factor authentication).

We start by creating controllers and routes for the account area. Next, we add basic pages for profile information and security, then hook them up to the navigation. After that, we focus on building an account-specific layout using a responsive grid that adapts to desktop or mobile views. The left side is a sidebar menu, while the right side shows the selected section (e.g. profile or security).

As we develop the layout, we also make it visually nice with good spacing, borders, and active styles. We touch on how to conditionally show menu options depending on which features are enabled in our config—some items are hidden if the user doesn’t have access.

To keep things DRY, we refactor the structure using Inertia layouts: we nest the account layout inside the main default layout, so we don’t duplicate shared elements like navigation or toast messages. This makes the code much tidier and easier to maintain.

By the end of the episode, you’ll have a solid reusable account section with a responsive sidebar navigation and no duplicated components. In the next episode, we’ll tackle making our menu show which section is active, and then keep building out the actual account management functionality!

Episode discussion

No comments, yet. Be the first!