Custom Profile Page for logged in user

So I've followed the docs to create a custom EditProfile page: https://filamentphp.com/docs/3.x/panels/users#customizing-the-authentication-features But I can't figure out how to do 2 things: - how to add a link to this page to the sidebar - make it a regular page instead of being a modal Thank you
47 Replies
Andrew Wallo
Andrew Wallo16mo ago
@diogogomes I was having issues as well because the documentation showed the wrong way (at least for a tenant/panel) to provide a custom profile page: 1. Make a regular page for your profile. 2. Use this in your panel:
->userMenuItems([
'profile' => MenuItem::make()
->label('Profile')
->icon('heroicon-o-user-circle')
->url(static fn () => EditProfile::getUrl()) // my custom page
])
->userMenuItems([
'profile' => MenuItem::make()
->label('Profile')
->icon('heroicon-o-user-circle')
->url(static fn () => EditProfile::getUrl()) // my custom page
])
Log1x
Log1x16mo ago
I did this earlier. What I did was extend Filament\Pages\Auth\EditProfile like this:
<?php

namespace App\Filament\Pages;

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Pages\Auth\EditProfile as BaseEditProfile;

class EditProfile extends BaseEditProfile
{
/**
* The layout that the page should use.
*/
protected static string $layout = 'filament-panels::components.layout.index';

/**
* The view that the page should render.
*/
protected static string $view = 'filament.pages.edit-profile';

/**
* Get the label for the page.
*/
public static function getLabel(): string
{
return 'Profile';
}

/**
* Get the title for the page.
*/
public function getTitle(): string
{
return '';
}

/**
* Get the form for the page.
*/
public function form(Form $form): Form
{
return $form
->schema([
$this->getNameFormComponent(),
$this->getEmailFormComponent(),
$this->getPasswordFormComponent(),
$this->getPasswordConfirmationFormComponent(),
]);
}
}
<?php

namespace App\Filament\Pages;

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Pages\Auth\EditProfile as BaseEditProfile;

class EditProfile extends BaseEditProfile
{
/**
* The layout that the page should use.
*/
protected static string $layout = 'filament-panels::components.layout.index';

/**
* The view that the page should render.
*/
protected static string $view = 'filament.pages.edit-profile';

/**
* Get the label for the page.
*/
public static function getLabel(): string
{
return 'Profile';
}

/**
* Get the title for the page.
*/
public function getTitle(): string
{
return '';
}

/**
* Get the form for the page.
*/
public function form(Form $form): Form
{
return $form
->schema([
$this->getNameFormComponent(),
$this->getEmailFormComponent(),
$this->getPasswordFormComponent(),
$this->getPasswordConfirmationFormComponent(),
]);
}
}
This gives you the default form and sets the layout back to being a normal panel page instead of the empty layout used by default. For your view, you can do:
<x-filament-panels::page.simple>
<x-slot name="subheading">
{{ $this->backAction }}
</x-slot>

<x-filament-panels::form wire:submit="save">
{{ $this->form }}

<x-filament-panels::form.actions
:actions="$this->getCachedFormActions()"
:full-width="$this->hasFullWidthFormActions()"
/>
</x-filament-panels::form>
</x-filament-panels::page.simple>
<x-filament-panels::page.simple>
<x-slot name="subheading">
{{ $this->backAction }}
</x-slot>

<x-filament-panels::form wire:submit="save">
{{ $this->form }}

<x-filament-panels::form.actions
:actions="$this->getCachedFormActions()"
:full-width="$this->hasFullWidthFormActions()"
/>
</x-filament-panels::form>
</x-filament-panels::page.simple>
which would be the default. You can probably just remove the subheading containing the back button. In my class, I set title to an empty string to get rid of the default header. Otherwise, just pass your new class to $panel->profile() like:
$panel->profile(EditProfile::class)
$panel->profile(EditProfile::class)
Andrew Wallo
Andrew Wallo16mo ago
I’m not sure if this is the correct way to do it, but just making a regular page and replacing the profile page in the user menu worked…
Log1x
Log1x16mo ago
i wanted to take advantage of how they handle some some of the components in core and its really just a normal page under neath if you look at its extends EditProfile is a BasePage the big thing is just changing the $layout to not be the empty one it uses by default
Andrew Wallo
Andrew Wallo16mo ago
I wasn’t a big fan of the base edit profile page. It’s almost like the login page layout, which I don’t understand really. Plus the new password component updating visibility seemed weird to me. So I replaced all of it
Log1x
Log1x16mo ago
i do agree the password component is weird, but yeah you can do it 100% custom by just extending it and changing the layout
Andrew Wallo
Andrew Wallo16mo ago
Alright cool because with the way I was doing it, which I think is the documented way, it would return me to the login page after changing my data.
Log1x
Log1x16mo ago
GitHub
filament/packages/panels/src/Pages/Auth/EditProfile.php at 3.x · fi...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
Andrew Wallo
Andrew Wallo16mo ago
But like it wouldn’t show my data being saved, I would refresh the page and I would get an error saying login route not found…
Log1x
Log1x16mo ago
yeah just extend it like my example and then call it on $panel->profile() should work a treat. you dont need to use the default forms if you dont want too. and it will do it with the menu bar properly, etc.
Andrew Wallo
Andrew Wallo16mo ago
Yeah the GitHub link you sent didn’t work either But okay will try this soon and let you know Thanks
Log1x
Log1x16mo ago
np let me know how it goes. my profile is pretty custom at this point and haven't had any issues
Andrew Wallo
Andrew Wallo16mo ago
Can you send me a pic of what it looks like? Is it in the panel?
Log1x
Log1x16mo ago
removed logo/data cuz i dont wanna get yelled at but yeah just a normal page now with some sections
Andrew Wallo
Andrew Wallo16mo ago
Looks nice! Very good
Log1x
Log1x16mo ago
ty
Andrew Wallo
Andrew Wallo16mo ago
Have you figured out how to separate the save action to be for each form section?
Log1x
Log1x16mo ago
hmm – i do that on a few of my custom apps but dont really need to on this. it looks like handleRecordUpdate() handles the default update behavior on the EditProfile class that you extend. generally, you could probably just do this with basic livewire since you have access to the user with $record and just plop your buttons in and wire them up. although i do see $data gets passed to handleRecordUpdate, not sure where it comes from i assume its on the class somewhere or the attributes exist under the hood? i haven't used filament long enough to know the inner workings yet but the whole page is a livewire component so you can generally do whatever you want
Andrew Wallo
Andrew Wallo16mo ago
Yeah might have to do that for myself. For me, I would think it would confuse the user to have that many separate sections for one save button. Like imagine having to change a password only and everything else is empty
Log1x
Log1x16mo ago
that or theres probably a custom action or something oh nevermind i read it wrong, so yeah – i think you'd just .. do it with livewire lol
Log1x
Log1x16mo ago
GitHub
filament/packages/panels/src/Pages/Auth/EditProfile.php at 3.x · fi...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
Log1x
Log1x16mo ago
but whether its necessary idk sorry fixed my link
Andrew Wallo
Andrew Wallo16mo ago
I gotcha. Thanks again
Log1x
Log1x16mo ago
np
Diogo Gomes
Diogo GomesOP16mo ago
Hey thank you for the help. I'm still stuck with it. Seems that I need to overwrite a lot of things just to have a simple edit profile page
Andrew Wallo
Andrew Wallo16mo ago
Yep
Diogo Gomes
Diogo GomesOP16mo ago
I already have a edit profile page. I've follow the documentation but the link is on the top nav bar I just want to have another link on the main sidebar to trigger that edit profile
Andrew Wallo
Andrew Wallo16mo ago
Wont work the way I want it to. Well I got it working but not the way I wanted to because since it was a custom page the tenant ID has to be attached to the url…
Diogo Gomes
Diogo GomesOP16mo ago
seems that it should be simpler than this
Andrew Wallo
Andrew Wallo16mo ago
Do you have tenancy in the panel you have the profile page in? If not then you should have no problems with it… I can give you what I did if you want
Diogo Gomes
Diogo GomesOP16mo ago
Nop, I don't have tenancy. This panel is specific to the logged in user. Let me try to add the link first. I already have the edit profile page working. But thank you 🙏
Andrew Wallo
Andrew Wallo16mo ago
Wait so what are you having problems with then?
Diogo Gomes
Diogo GomesOP16mo ago
I'm a noob with filament 🙂
Diogo Gomes
Diogo GomesOP16mo ago
I've already have the custom edit profile page.
No description
Diogo Gomes
Diogo GomesOP16mo ago
But I would like to also add a link for editing the profile on the sidebar navigation
Diogo Gomes
Diogo GomesOP16mo ago
No description
Diogo Gomes
Diogo GomesOP16mo ago
Thank you. I've just found out that I was adding user menu items instead of a navigation item 🤦‍♂️ Problem solved. Thank you
awcodes
awcodes16mo ago
Cool. Please mark this as answered to help our support team.
Diogo Gomes
Diogo GomesOP16mo ago
Yes, I was trying to figure out how to mark yours
Hasith
Hasith15mo ago
I'm getting this error when i try to type inside new password field.
No description
No description
Hasith
Hasith15mo ago
I figured out the error. if you using multiple panels you need to create EditProfile.php inside App\Filament\[Your-Panel-Name\Pages\Auth
code jam
code jam15mo ago
This page looks great. May be you should write a blog post explaining how you built it. I am sure it will help a lot of us 🫡
GavTheDev
GavTheDev9mo ago
This profile page feels so un-filament-like 🤨 . Most likely there's thought behind it but I don't get it 😅
Want results from more Discord servers?
Add your server