PHPackages                             joaopaulolndev/filament-edit-profile - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. joaopaulolndev/filament-edit-profile

ActiveLibrary

joaopaulolndev/filament-edit-profile
====================================

Filament package to edit profile

v3.0.2(2mo ago)250258.1k↓15.4%6820MITPHPPHP ^8.2CI passing

Since May 17Pushed 1mo ago5 watchersCompare

[ Source](https://github.com/joaopaulolndev/filament-edit-profile)[ Packagist](https://packagist.org/packages/joaopaulolndev/filament-edit-profile)[ Docs](https://github.com/joaopaulolndev/filament-edit-profile)[ GitHub Sponsors](https://github.com/joaopaulolndev)[ RSS](/packages/joaopaulolndev-filament-edit-profile/feed)WikiDiscussions 3.x Synced 1mo ago

READMEChangelog (10)Dependencies (21)Versions (69)Used By (20)

Filament package to edit profile
================================

[](#filament-package-to-edit-profile)

[![Latest Version on Packagist](https://camo.githubusercontent.com/d87b725d7e24a54e481d2690c83cc65d637063c4e16852111f489dda6872d4b1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a6f616f7061756c6f6c6e6465762f66696c616d656e742d656469742d70726f66696c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/joaopaulolndev/filament-edit-profile)[![GitHub Tests Action Status](https://camo.githubusercontent.com/77a9d87965bd33f0783fede95145eb4ae5a1728ad6b7f8421b6359310c142c44/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6a6f616f7061756c6f6c6e6465762f66696c616d656e742d656469742d70726f66696c652f72756e2d74657374732e796d6c3f6272616e63683d322e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/joaopaulolndev/filament-edit-profile/actions?query=workflow%3Arun-tests+branch%3A2.x)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/ad3be45e6332c896820eadfcedf79c0280efa4e1e81d1329abe3275def0d76c9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6a6f616f7061756c6f6c6e6465762f66696c616d656e742d656469742d70726f66696c652f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d322e78266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/joaopaulolndev/filament-edit-profile/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3A2.x)[![Total Downloads](https://camo.githubusercontent.com/95075d53109cd40c169a9bc3e284d9a70530ee92456315aa6e0efa28f31ecfb8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a6f616f7061756c6f6c6e6465762f66696c616d656e742d656469742d70726f66696c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/joaopaulolndev/filament-edit-profile)

The Filament library is a user-friendly tool that simplifies profile editing, offering an intuitive interface and robust features to easily customize and manage user information.

[![Screenshot of Application Feature](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/joaopaulolndev-filament-edit-profile.jpg)](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/joaopaulolndev-filament-edit-profile.jpg)

Features & Screenshots
--------------------------

[](#features--screenshots)

- **Edit Information:** Manage your information such as email, password, locale, theme color.
- **Change Password:** Change your password.
- **Profile Photo:** Upload and manage your profile photo.
- **Delete Account:** Manage your account, such as delete account.
- **Sanctum Personal Access tokens:** Manage your personal access tokens.
- **Multi Factor Authentication:** Manage multi factor authentication.
- **Browser Sessions** Manage and log out your active sessions on other browsers and devices.
- **Custom Fields:** Add custom fields to the form.
- **Custom Components:** Add custom component to the page.
- **Support**: [Laravel 11](https://laravel.com) and [Filament 5.x](https://filamentphp.com)

Compatibility
-------------

[](#compatibility)

Package VersionFilament Version1.x3.x2.x4.x3.x5.xInstallation
------------

[](#installation)

You can install the package via composer:

```
composer require joaopaulolndev/filament-edit-profile:^3.0
```

**Filament V4** - if you are using Filament v4.x, you can use [this section](https://github.com/joaopaulolndev/filament-edit-profile/tree/2.x)

**Filament V3** - if you are using Filament v3.x, you can use [this section](https://github.com/joaopaulolndev/filament-edit-profile/tree/main)

You can publish and run the migrations with:

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="filament-edit-profile-views"
```

Optionally, you can publish the translations using

```
php artisan vendor:publish --tag="filament-edit-profile-translations"
```

You can publish and run all the migrations with:

```
php artisan vendor:publish --tag="filament-edit-profile-migrations"
php artisan migrate
```

You can publish the config file with:

```
php artisan vendor:publish --tag="filament-edit-profile-config"
```

Usage
-----

[](#usage)

Add in AdminPanelProvider.php

```
use Joaopaulolndev\FilamentEditProfile\FilamentEditProfilePlugin;

->plugins([
    FilamentEditProfilePlugin::make()
])
```

if you want to show for specific parameters to sort, icon, title, navigation group, navigation label and can access, you can use the following example:

```
use Joaopaulolndev\FilamentEditProfile\FilamentEditProfilePlugin;

 ->plugins([
     FilamentEditProfilePlugin::make()
        ->slug('my-profile')
        ->setTitle('My Profile')
        ->setNavigationLabel('My Profile')
        ->setNavigationGroup('Group Profile')
        ->setIcon('heroicon-o-user')
        ->setSort(10)
        ->canAccess(fn () => auth()->user()->id === 1)
        ->shouldRegisterNavigation(false)
        ->shouldShowEmailForm()
        ->shouldShowLocaleForm(
            options: [
                'pt_BR' => '🇧🇷 Português',
                'en' => '🇺🇸 Inglês',
                'es' => '🇪🇸 Espanhol',
            ],
            rules: 'required' // optional validation rules for the locale field
        )
        ->shouldShowThemeColorForm(rules: 'required') // optional validation rules for the theme color field
        ->shouldShowDeleteAccountForm(false)
        ->shouldShowSanctumTokens()
        ->shouldShowMultiFactorAuthentication()
        ->shouldShowBrowserSessionsForm()
        ->shouldShowAvatarForm()
        ->customProfileComponents([
            \App\Livewire\CustomProfileComponent::class,
        ])
 ])
```

Optionally, you can add a user menu item to the user menu in the navigation bar:

```
use Filament\Actions\Action;
use Joaopaulolndev\FilamentEditProfile\Pages\EditProfilePage;

->userMenuItems([
    'profile' => Action::make('profile')
        ->label(fn() => auth()->user()->name)
        ->url(fn (): string => EditProfilePage::getUrl())
        ->icon('heroicon-m-user-circle')
        //If you are using tenancy need to check with the visible method where ->company() is the relation between the user and tenancy model as you called
        ->visible(function (): bool {
            return auth()->user()->company()->exists();
        }),
])
```

If needed you can define the disk and visibility of the avatar image. In the config file add the following:

[config/filament-edit-profile.php](config/filament-edit-profile.php)

```
return [
    'disk' => env('FILESYSTEM_DISK', 'public'),
    'visibility' => 'public', // or replace by filesystem disk visibility with fallback value
];
```

Profile Avatar
--------------

[](#profile-avatar)

[![Screenshot of avatar Feature](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/profile-avatar.png)](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/profile-avatar.png)Show the user avatar form using `shouldShowAvatarForm()`. This package follows the [Filament user avatar](https://filamentphp.com/docs/4.x/users/overview#setting-up-user-avatars) to manage the avatar.

To show the avatar form, you need the following steps:

1. Publish the migration file to add the avatar\_url field to the users table:

```
php artisan vendor:publish --tag="filament-edit-profile-avatar-migration"
php artisan migrate
```

2. Add in your User model the avatar\_url field in the fillable array:

```
protected $fillable = [
    'name',
    'email',
    'password',
    'avatar_url', // or column name according to config('filament-edit-profile.avatar_column', 'avatar_url')
];
```

3. Set the getFilamentAvatarUrlAttribute method in your User model:

```
use Filament\Models\Contracts\HasAvatar;
use Illuminate\Support\Facades\Storage;

class User extends Authenticatable implements HasAvatar
{
    // ...
    public function getFilamentAvatarUrl(): ?string
    {
        $avatarColumn = config('filament-edit-profile.avatar_column', 'avatar_url');
        return $this->$avatarColumn ? Storage::url($this->$avatarColumn) : null;
    }
}
```

4. Optionally, you can specify the image directory path and file upload rules. :

```
->shouldShowAvatarForm(
    value: true,
    directory: 'avatars', // image will be stored in 'storage/app/public/avatars
    rules: 'mimes:jpeg,png|max:1024' //only accept jpeg and png files with a maximum size of 1MB
)
```

5. Don't forget to run the command `php artisan storage:link`

Profile Locale
--------------

[](#profile-locale)

Show the user locale form using `shouldShowLocaleForm()`. You can now customize validation rules for this field using the `rules` parameter (e.g., 'required'). If you don't set rules, the field is not required by default.

To show the locale form, you need the following steps:

1. Publish the migration file to add the locale field to the users table:

```
php artisan vendor:publish --tag="filament-edit-profile-locale-migration"
php artisan migrate
```

2. Update the options array with the languages you want to show:

```
->shouldShowLocaleForm(
    options: [
        'pt_BR' => '🇧🇷 Português',
        'en' => '🇺🇸 Inglês',
        'es' => '🇪🇸 Espanhol',
    ],
    rules: 'required' // optional validation rules, e.g. 'required|in:pt_BR,en,es'
)
```

3. Add in your User model the locale field in the fillable array:

```
protected $fillable = [
    'name',
    'email',
    'password',
    'locale', // or column name according to config('filament-edit-profile.locale_column', 'locale')
];
```

Profile Theme Color
-------------------

[](#profile-theme-color)

Show the user theme\_color form using `shouldShowThemeColorForm()`. You can now customize validation rules for this field using the `rules` parameter (e.g., 'required'). If you don't set rules, the field is not required by default.

To show the theme\_color form, you need the following steps:

1. Publish the migration file to add the theme\_color field to the users table:

```
php artisan vendor:publish --tag="filament-edit-profile-theme-color-migration"
php artisan migrate
```

2. Update the primary color default value:

```
->shouldShowThemeColorForm(rules: 'required') // optional validation rules, e.g. 'required|regex:/^#?[0-9a-fA-F]{6}$/'
```

3. Add in your User model the locale field in the fillable array:

```
protected $fillable = [
    'name',
    'email',
    'password',
    'theme_color', // or column name according to config('filament-edit-profile.theme_color_column', 'theme_color')
];
```

Email Change Verification
-------------------------

[](#email-change-verification)

The `filament-edit-profile` plugin is fully compatible with the `emailChangeVerification` feature introduced in Filament.

When this feature is enabled in your Panel Provider, the plugin ensures that an email address change is only finalized after the user confirms ownership of the new email address.

### How It Works

[](#how-it-works)

1. A user navigates to the edit profile page provided by this plugin.
2. They change their email address and click "Save".
3. The plugin, using Filament's core logic, **does not update the email in the database immediately**.
4. Instead, a verification email with a signed link is sent to the **new** email address.
5. The user's email in the database is only updated after they click the confirmation link sent to the new address.

This prevents users from being locked out of their accounts if they enter an incorrect email address, and it stops malicious attempts to take over an account by changing the owner's email without permission.

### How to Enable

[](#how-to-enable)

You don't need to change any code within the `filament-edit-profile` plugin to enable this feature. Simply follow the official Filament documentation steps:

1. **Enable verification in your Panel Provider:**

    In your Panel Provider file (e.g., `app/Providers/Filament/AdminPanelProvider.php`), add the `emailChangeVerification()` method to the panel configuration:

    ```
    use Filament\Panel;
    use Filament\PanelProvider;

    class AdminPanelProvider extends PanelProvider
    {
        public function panel(Panel $panel): Panel
        {
            return $panel
                // ...
                ->emailChangeVerification();
        }
    }
    ```

That's it! The `filament-edit-profile` plugin will now respect this configuration and trigger the email verification flow automatically.

Sanctum Personal Access tokens
------------------------------

[](#sanctum-personal-access-tokens)

Show the Sanctum token management component:

Please review [Laravel Sanctum Docs](https://laravel.com/docs/11.x/sanctum)

You may install Laravel Sanctum via the `install:api` Artisan command:

```
php artisan install:api
```

Sanctum allows you to issue API tokens / personal access tokens that may be used to authenticate API requests to your application. When making requests using API tokens, the token should be included in the Authorization header as a Bearer token.

```
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
}
```

[![Screenshot of Application Feature](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/sanctum_tokens.png)](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/sanctum_tokens.png)

If you want to control access, you can use `condition`, passing Closure or Boolean

Sanctum allows you to assign "abilities" to tokens. by default we have \['create', 'view', 'update', 'delete'\] use `permissions` to customize

```
 ->plugins([
    FilamentEditProfilePlugin::make()
        ->shouldShowSanctumTokens(
            condition: fn() => auth()->user()->id === 1, //optional
            permissions: ['custom', 'abilities', 'permissions'] //optional
        )
 ])
```

Browser Sessions
----------------

[](#browser-sessions)

[![Screenshot of Application Feature](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/browser-sessions.png)](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/browser-sessions.png)

To utilize browser session, ensure that your session configuration's driver (or SESSION\_DRIVER environment variable) is set to `database`.

```
SESSION_DRIVER=database
```

If you want to control access or disable browser sessions, you can pass a Closure or Boolean

```
 ->plugins([
    FilamentEditProfilePlugin::make()
        ->shouldShowBrowserSessionsForm(
            fn() => auth()->user()->id === 1, //optional
                //OR
            false //optional
        )
 ])
```

Multi-Factor Authentication (MFA)
---------------------------------

[](#multi-factor-authentication-mfa)

This plugin integrates with Filament's native Multi-Factor Authentication (MFA) system, allowing your users to manage their MFA settings directly from the profile edit page.

### Required Setup

[](#required-setup)

For the MFA functionality to be available on the profile page, **you must first set up MFA in your Filament panel** by following the official documentation.

This typically involves running a database migration and adding the `TwoFactorAuthenticatable` trait to your `User` model. You can find the detailed instructions at the link below:

➡️ **[Official Filament MFA Documentation](https://filamentphp.com/docs/4.x/users/multi-factor-authentication)**

### Controlling the MFA Section's Visibility

[](#controlling-the-mfa-sections-visibility)

After setting up MFA in your project, the MFA section will be displayed by default for all users. However, this plugin provides a method to dynamically control who can see and manage the MFA options.

In your panel provider file (usually `app/Providers/Filament/AdminPanelProvider.php`), you can use the `shouldShowMultiFactorAuthentication()` method in two ways:

#### 1. Display based on a condition (Closure)

[](#1-display-based-on-a-condition-closure)

You can pass a `Closure` that returns `true` or `false`. The MFA section will only be displayed if the condition is met. In the example below, only the user with ID `1` will be able to see the MFA options.

```
 ->plugins([
    FilamentEditProfilePlugin::make()
        ->shouldShowMultiFactorAuthentication(
            // The section will only be visible to the user with ID 1.
            fn() => auth()->user()->id === 1, //optional
                //OR
            false //optional
        )
 ])
```

#### 2. Disable it completely

[](#2-disable-it-completely)

If you want to hide the MFA section for all users through the profile page, simply pass `false` as the argument.

```
 ->plugins([
    FilamentEditProfilePlugin::make()
        ->shouldShowMultiFactorAuthentication(false)
 ])
```

> **Note:** If the `shouldShowMultiFactorAuthentication()` method is not called, the default behavior is to display the MFA section for all users (equivalent to passing `true`), provided that the required setup has been completed correctly.

Custom Fields
-------------

[](#custom-fields)

[![Screenshot of Application Feature](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/custom_fields.png)](https://raw.githubusercontent.com/joaopaulolndev/filament-edit-profile/2.x/art/custom_fields.png)Optionally, you can add custom fields to the form. To create custom fields you need to follow the steps below:

1. Publish the migration file to add the custom fields to the users table:

```
php artisan vendor:publish --tag="filament-edit-profile-custom-field-migration"
php artisan migrate
```

2. Add in your User model the custom field in the fillable array:

```
protected $fillable = [
    'name',
    'email',
    'password',
    'custom_fields',
];
```

3. Add in your User model the custom field in the casts array:

```
protected function casts(): array
{
    return [
        'email_verified_at' => 'datetime',
        'password' => 'hashed',
        'custom_fields' => 'array'
    ];
}
```

5. Publish the config file using this command:

```
php artisan vendor:publish --tag="filament-edit-profile-config"
```

6. Edit the config file `config/filament-edit-profile.php` to add the custom fields to the form as example below:

```