(upbeat music) Okay, now that we have our basic app working, we've got the enums working. Let's go ahead and do some configuration of the Filament panel itself. Let's make it look nicer, and let's figure out what we're gonna do with our users. (whooshing) So, first of all, I have my database cedar open. This is a standard file in a Laravel project,

So, first of all, I have my database cedar open. This is a standard file in a Laravel project, and I just made sure to update the user to be myself. I'm also factoring up 10 features. So if I go to my terminal and I want to artisan, migrate fresh seed, I will do that, and this will give me the data I need. I also like to give myself an alias, PA, migrate fresh seed. So, we're gonna be running this a lot.

PA, migrate fresh seed. So, we're gonna be running this a lot. Now, if I go back to the sign-in page, so again, this is at a roadmap.test/admin, and that's gonna redirect me to the login page. So that's where we are right now. And the first thing I might wanna do, and this is gonna apply not just here on the login page, but everywhere, is maybe I wanna add my logo in here,

on the login page, but everywhere, is maybe I wanna add my logo in here, and maybe I wanna change the colors. So let's do some of that configuration, just some look and feel stuff. I'm gonna go into PHP Storm, and I gotta find my admin panel provider. Again, this is here in the filament directory. And so first, let's talk about the logos. I'm going to add a couple things here.

And so first, let's talk about the logos. I'm going to add a couple things here. I've got a brand logo, and I've got dark mode, brand logo, which is really nice, either provided by filament. And I can just put a directory. So this is in my images file and the public directory. I've got a dark and a light mode images. So I've got logos here, and all you have to do is,

So I've got logos here, and all you have to do is, let's go back to our admin panel provider, chain on to the panel, and you could have different logos for different panels, if you like, 'cause this is panel specific, the brand logo and the dark mode brand logo. So now that I've done that, I'm going to refresh the page here,

So now that I've done that, I'm going to refresh the page here, and you can see I have my logo. This will also show up once we get logged in. Okay, so that works. What about the colors? So the primary color here is amber, and I could change it to like blue, and if we look at the browser, it's blue, except I don't like this blue,

and if we look at the browser, it's blue, except I don't like this blue, because this blue doesn't match this blue here. And so I wanna kinda make the primary color my own primary color that matches my logo. So when I do that, I've got a brand color in hex right here. And so I can use this color class, and you can see, one of the things this does

and you can see, one of the things this does is gives you a bunch of predefined colors. But another thing, if we come all the way down here, is we can actually take an RGB color and convert it to, let's see, oh, okay. Let's convert to, yeah, okay, oh. So we can convert our hex color to this. So let's go ahead and do that.

So we can convert our hex color to this. So let's go ahead and do that. Let's go to the admin panel provider, and instead of color blue, I'm going to say convert to this, and I'm just going to paste in this string right here. Okay, so now if I come back and refresh, this blue is a different blue, it's my blue. So this allows me to customize it how far I like it. So this is not just the primary color,

So this allows me to customize it how far I like it. So this is not just the primary color, we can do this to other colors as well. I can get rid of that comment now. If I want the gray, which is really the background that a lot of stuff uses, we'll just do color and I like the slate gray better than the one that comes by default. And so this is a little bit more of a bluish gray,

better than the one that comes by default. And so this is a little bit more of a bluish gray, and it matches, I think, since I have a primary color of blue, I really like this. So you can change any color you want as well. If you wanted the, we'll probably change the info color later and you want it to be sky, we can do that. Whatever colors you want to change, you can do that there.

and you want it to be sky, we can do that. Whatever colors you want to change, you can do that there. So let's log in. I'm going to use my name and password. And now that I'm logged in, you can see I've got my logo over here. If I change to light mode, now the letters are dark because I have the dark mode light mode. So that's all working really well. And if I go to features here,

So that's all working really well. And if I go to features here, I've got my primary color is now this blue. And then the enums that we use, there are different colors, but like planned and in progress are almost the same color because one of them is using primary and one of them is using info. So this is why maybe for info, I want something crazy, like violet. And if I do that,

I want something crazy, like violet. And if I do that, now this plan is violet and in progress is primary, which is my new blue. And so you just may need to play with these colors to make it work for you. Okay, before we get into some of the user stuff I want to handle, there are a couple of things that Filament gives us that are really, really nice. So I've got this new feature.

that Filament gives us that are really, really nice. So I've got this new feature. So if I wanted to create a new feature, it's going to open this form. And if I start typing in here, and then I click over here, all my progress is lost. And I might want a warning. Maybe I did want to leave that form or maybe I accidentally clicked that link and I wanted to save all of my data.

or maybe I accidentally clicked that link and I wanted to save all of my data. So if I go back to features, I click new feature, let's go into our admin panel. And right here, let's do it below the path. We can say unsafe changes alerts right here. So if we do that, now when I am here, if I start typing and then I go to the dashboard, oh, I'm going to need to refresh one more time. So start typing and go to the dashboard.

oh, I'm going to need to refresh one more time. So start typing and go to the dashboard. Now I get this warning that makes sure I don't leave because I might lose all my changes. So this is a really nice feature. You also may notice that this didn't have anything to do with a live wire request. This field is not live. So they're actually using JavaScript to determine if something has been changed.

So they're actually using JavaScript to determine if something has been changed. Like this form input, it's defaulted to proposed, but I can still navigate away. And it's not going to think that I changed this. But if I do change it to planned and now I try to navigate away, it's very smart to know whether it should warn you or not. So I definitely like to turn that on. One other thing I like to turn on,

So I definitely like to turn that on. One other thing I like to turn on, and I'm not going to demo it for you, but I think it's really useful is database transactions. So by default, every time we're going to make a change to a film and action, it's going to wrap it in a database transaction. And if you're not familiar with what that means, it means let's say we have a pretty complicated form and we're going to maybe create a model,

it means let's say we have a pretty complicated form and we're going to maybe create a model, associate it to some other relationship, and maybe that throws an exception as I'm trying to associate it to the relationship. But the model was already created at the beginning. When you have a database transaction wrapping everything, if something fails, all of it rolls back. And so it's really important. I love to turn this on just to make sure

And so it's really important. I love to turn this on just to make sure if I am doing something really complicated and something happens part way through, it'll be resolved. So these are the main configurations I'm going to do in my panel. And the one other thing that we can configure here a lot is all the things related to users. So if I come out of the app, I'm going to sign out.

is all the things related to users. So if I come out of the app, I'm going to sign out. Yup, I am happy to leave the site. And if I want to sign in, I can do that here. There's a lot of things I can't do right now. I can't reset my password. I can't sign up. Let's see if Filament can help us with that. It's pretty simple. So I'm going to show you everything that we have

It's pretty simple. So I'm going to show you everything that we have and we'll look for them together. First, registration. So let's see, we'll comment all those out. If I turn on registration, refresh, now I get the sign up for an account. If I do that, I can create my account. Pretty easy. Okay, next is password reset.

Pretty easy. Okay, next is password reset. If I want to do this, now I get the forgot password link. If I do that, I'll put my email here, click send. You're going to want to make sure in your local that you have your queue driver working or set it to sync. And I've got heard, let's see. I'll need the mail from heard and there we go. I've got a reset password notification that came through. So that's all working really well also.

I've got a reset password notification that came through. So that's all working really well also. All right, let's go back to login. And then let's look at our code. Other things we have are email verification. So this is when you sign up. If you want to make sure the user verifies their email, you can do that. And then this one's really nice. Email change verification.

And then this one's really nice. Email change verification. So if you're going to change your email from one to another, you want to make sure that they actually own that other email. So I'll show you that in a minute. And to show you that, I need to enable the profile. So now that I've got the profile enabled, we'll go back here, we'll log in again. And when we get in here, now because we have profile right here, when I click here, I can see profile.

And when we get in here, now because we have profile right here, when I click here, I can see profile. And so this gives me a really simple profile with my name, my email. And if I want to change my password, I can type a new one. Well, what if I want to change my email to Kevin too? Now for security, it's saying I have to confirm the password. So if you want to change your email, it's making you confirm. So that's fine. Password, I'll save it, and an email address change request was sent. So you can see my email is still Kevin without the two,

Password, I'll save it, and an email address change request was sent. So you can see my email is still Kevin without the two, because it's not actually persisting this to the database yet. I have to confirm that I own that email before it allows me to do it. So now if I open up heard and I see now I've got an email that says your email address is being changed. So if I did not request this, I can block it, or if I did request it, and now it's coming to my new email, I can verify it. So let's go ahead and verify it. And now that it's changed, you can see now the database has persisted it.

So let's go ahead and verify it. And now that it's changed, you can see now the database has persisted it. And I can actually access the account with my new email. So really, really nice. There's some great security features built into Filament that are very nice. Now the last thing I want to do is, for whatever reason, I want to capture a phone number for each user here. So how would I do that? Well, if I come back to this profile, you can see it actually takes a class that would be a Filament page.

Well, if I come back to this profile, you can see it actually takes a class that would be a Filament page. So if I want to customize it, I can actually create my own. So let's do that now. Let's go here to the terminal. I'm going to ours and make a Filament page. We'll call it Edit Profile. And I don't need it in a resource. So it's just going to create the page there. Let's find Edit Profile.

So it's just going to create the page there. Let's find Edit Profile. In my app, I don't actually need this view. So if we look at our get changes, we have this Edit Profile blade. I don't need that. So let's go to Edit Profile blade. I'm just going to delete this. And so now I don't need this. But what I'm going to do is extend Filament's default Edit Profile. So Edit Profile from the Filament off pages here.

But what I'm going to do is extend Filament's default Edit Profile. So Edit Profile from the Filament off pages here. OK, so now that I'm extending theirs, I haven't made any changes yet. And if I click Refresh the Edit Profile, it's still exactly the same. Let's say I want a phone number here. Let's go into this, and let's find the form. And so this is what the form looks like. We're just going to override this method because we're extending this one. And right after name and email, let's just do a text input. And we're going to make a phone field.

And right after name and email, let's just do a text input. And we're going to make a phone field. OK, so if I come here and refresh, it's not showing up here. And I think I know why because in my admin panel provider, I didn't pass in my new class. So if I pass in, I need to make sure it's in my app namespace, the Edit Profile class, I'll refresh. And now we've got the phone here. Let's go ahead and make a few changes to it. We-- right now, let's just say we want it to be required.

Let's go ahead and make a few changes to it. We-- right now, let's just say we want it to be required. Or, yeah. So now if we go back here, we have the phone. Let's type in some random stuff. And I click Save Changes. I'm getting an exception here, unknown column, phone, and field list. So it's ready to update the database. I just haven't changed my database yet. So if we go back to the migration for Create Users table,

I just haven't changed my database yet. So if we go back to the migration for Create Users table, we have the users here. Right after email, I'm just going to add a string for a phone. And we'll make it nullable. I did make it required. But let's say it doesn't have to be nullable. I also have my user factory. So we should probably add that as well. We'll say phone is a fake phone number.

So we should probably add that as well. We'll say phone is a fake phone number. OK, so if I come back and refresh now, if I put something in here, I didn't migrate fresh seed. So let's do that. Migrate fresh seed. I will have to log in again. So log in. And now I've got the phone number that was seeded. Let's just do something random here.

And now I've got the phone number that was seeded. Let's just do something random here. And I'm able to save it to the database. So now our phone number field is working. However, look what I can do here. I can put anything I want. And this is not so good. So let's figure out how we can make sure that the phone field actually works properly. So we're going to edit profile.

that the phone field actually works properly. So we're going to edit profile. We have this new text input for a phone. One of the first things we can do is actually chain on this tell method. And this actually does a reg X to make sure that it actually looks like a phone number. So if I come back here and try to save this again, the phone field format is invalid, which is really nice. So we have that right out of the box with filament.

the phone field format is invalid, which is really nice. So we have that right out of the box with filament. Another thing we have is we have the ability to use a mask in filament. And this is really nice. So if I just say mask, I can actually define exactly how I want this to look. So I can just say 999. So this is my US based phone number. And I can use this.

So this is my US based phone number. And I can use this. So now if I come back, refresh the page, it's actually going to mask the data as I type and give me exactly how I want it formatted in the UI. And right now in the database as well. So that one's really nice. Let's add a few more things. Let's make sure this mask actually has 14 characters. So we'll just say, men length is 14.

Let's make sure this mask actually has 14 characters. So we'll just say, men length is 14. And the max length is also 14. And if we want to make it look nicer, we can also do a nice little prefix icon. And we'll just use the phone icon from heroic comes. So now you can see I've got my prefix icon. I'm masking. So as I type, I'm typing a bunch of numbers here. It won't let me do any more.

So as I type, I'm typing a bunch of numbers here. It won't let me do any more. It's kind of forcing me into the format that you want. And if I click Save Changes, now that is saved to the database. I refresh. Everything is working and our phone works really nicely.