Filament Edit Profile Plugin

repository·3.x·Indexed 42 days ago

https://github.com/joaopaulolndev/filament-edit-profile

A Filament plugin providing a comprehensive user profile management interface. Features include avatar uploads, locale selection, theme color customization, password changes, session management, Sanctum token management, and MFA integration. Supports custom fields via JSON columns and custom Livewire components. Compatible with Filament 3.x, 4.x, and 5.x.

Tokens
7.4K
Snippets
19
Records
30
Agent score
53%

What's inside Filament Edit Profile

  1. How Email Change Verification works

    3.x

    The plugin is compatible with Filament's native emailChangeVerification. When enabled, changing an email address does not update the database immediately. Instead, a verification email is sent to the new address. The database is only updated once the user clicks the signed link in that email. This prevents account lockout due to typos and protects against unauthorized email changes.

    To enable this, add emailChangeVerification() to your Panel Provider configuration:

    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->emailChangeVerification();
    }
  2. Register the FilamentEditProfilePlugin

    3.x

    To use the plugin, register it in your AdminPanelProvider.php (or your specific Filament Panel Provider) using the plugins() method.

    use Joaopaulolndevilamentilament-edit-profile\
    FilamentEditProfilePlugin;
    
    ->plugins([
        FilamentEditProfilePlugin::make()
    ])
  3. Enable Multi-Factor Authentication (MFA) in Profile

    3.x

    The plugin integrates with Filament's native MFA system.

    Required Setup: You must first configure MFA in your Filament panel following the Official Filament MFA Documentation. This typically requires running migrations and adding the TwoFactorAuthenticatable trait to your User model.

    Controlling Visibility: By default, the MFA section is visible if the setup is complete. You can control this using shouldShowMultiFactorAuthentication() in your Panel Provider:

    • Conditional visibility: Pass a Closure returning a boolean.
    • Disable completely: Pass false.
    • Default behavior: If the method is not called, it defaults to true (visible).
    ->plugins([
        FilamentEditProfilePlugin::make()
            ->shouldShowMultiFactorAuthentication(
                fn() => auth()->user()->id === 1, // optional
                // OR
                false // optional
            )
     ])
  4. Setup Profile Avatar

    3.x

    To enable profile photo management, follow these steps:

    1. Migration: Publish and run the avatar migration: php artisan vendor:publish --tag="filament-edit-profile-avatar-migration" followed by php artisan migrate.
    2. Model: Add avatar_url to your User model's $fillable array.
    3. Contract: Implement Filament\Models\Contracts\HasAvatar in your User model and define getFilamentAvatarUrl():
      public function getFilamentAvatarUrl(): ?string
      {
          $avatarColumn = config('filament-edit-profile.avatar_column', 'avatar_url');
          return $this->$avatarColumn ? Storage::url($this->$avatarColumn) : null;
      }
    4. Plugin Configuration: Enable the form in the plugin setup:
      ->shouldShowAvatarForm(
          value: true,
          directory: 'avatars',
          rules: 'mimes:jpeg,png|max:1024'
      )
    5. Storage: Run php artisan storage:link.
    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;
        }
    }
  5. Setup Profile Locale

    3.x

    To allow users to change their language preference:

    1. Migration: Publish and run the locale migration: php artisan vendor:publish --tag="filament-edit-profile-locale-migration" followed by php artisan migrate.
    2. Model: Add locale to your User model's $fillable array.
    3. Plugin Configuration: Enable the form and define available options in your Panel Provider:
      ->shouldShowLocaleForm(
          options: [
              'pt_BR' => '🇧🇷 Português',
              'en' => '🇺🇸 Inglês',
              'es' => '🇪🇸 Espanhol',
          ],
          rules: 'required'
      )
  6. Manage Browser Sessions

    3.x

    The plugin can list active browser sessions for the user.

    Requirements:

    1. Session Driver: Your SESSION_DRIVER must be set to database in your .env file to list individual sessions. If using any other driver, only the "Log Out Other Browser Sessions" action will be visible.
    2. Middleware: To ensure the "Log Out Other Sessions" action works, you must register the Illuminate\Session\Middleware\AuthenticateSession middleware in your Filament panel.

    Configuration: Use shouldShowBrowserSessionsForm() to enable or disable this feature via a Closure or Boolean.

    SESSION_DRIVER=database
    use Illuminate\Session\Middleware\AuthenticateSession;
    
    $panel->authMiddleware([
        AuthenticateSession::class,
    ]);
    
    // In your plugin registration:
    ->plugins([
        FilamentEditProfilePlugin::make()
            ->shouldShowBrowserSessionsForm(
                fn() => auth()->user()->id === 1, // optional
                // OR
                false // optional
            )
    ])
  7. Setup Profile Theme Color

    3.x

    To allow users to customize their theme color:

    1. Migration: Publish and run the theme color migration: php artisan vendor:publish --tag="filament-edit-profile-theme-color-migration" followed by php artisan migrate.
    2. Model: Add theme_color to your User model's $fillable array.
    3. Plugin Configuration: Enable the form in your Panel Provider:
      ->shouldShowThemeColorForm(rules: 'required')
  8. Publish assets and migrations

    3.x

    You can publish various assets from the package to your application:

    • Views: php artisan vendor:publish --tag="filament-edit-profile-views"
    • Translations: php artisan vendor:publish --tag="filament-edit-profile-translations"
    • Migrations: php artisan vendor:publish --tag="filament-edit-profile-migrations" (followed by php artisan migrate)
    • Config: php artisan vendor:publish --tag="filament-edit-profile-config"
  9. Add Custom Fields to Profile Form

    3.x

    You can extend the profile form with custom fields stored in a JSON custom_fields column on the users table.

    Setup Steps:

    1. Database: Publish and run the migration: php artisan vendor:publish --tag="filament-edit-profile-custom-field-migration" followed by php artisan migrate.
    2. User Model: Add custom_fields to the $fillable array and cast it to array in the casts() method.
    3. Configuration: Publish the config file: php artisan vendor:publish --tag="filament-edit-profile-config".
    4. Define Fields: Edit config/filament-edit-profile.php to set 'show_custom_fields' => true and define your fields in the 'custom_fields' array.
    php artisan vendor:publish --tag="filament-edit-profile-custom-field-migration"
    php artisan migrate
    php artisan vendor:publish --tag="filament-edit-profile-config"
    // User Model
    protected $fillable = [
        'name',
        'email',
        'password',
        'custom_fields',
    ];
    
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
            'custom_fields' => 'array'
        ];
    }
  10. Create Custom Profile Components

    3.x

    If the standard custom fields are insufficient, you can create full Livewire components to handle profile logic.

    Steps:

    1. Generate Component: Run php artisan make:edit-profile-form CustomProfileComponent. This creates a Livewire component in app/Livewire/ and a view in resources/views/livewire/.
    2. Register Component: Add the class to your Panel Provider using customProfileComponents().
    php artisan make:edit-profile-form CustomProfileComponent
    ->plugins([
        FilamentEditProfilePlugin::make()
            ->customProfileComponents([
                \App\Livewire\CustomProfileComponent::class,
            ]);
    ])
  11. Install filament-edit-profile via Composer

    3.x

    Install the package using Composer. Ensure you are using the version compatible with your Filament installation:

    • Filament 5.x: Use version ^3.0.
    • Filament 4.x: Use the 2.x branch.
    • Filament 3.x: Use the main branch.
    composer require joaopaulolndev/filament-edit-profile:^3.0
  12. Manage active browser sessions

    3.x

    The BrowserSessionsForm component allows users to view and manage their active web sessions. It displays a list of devices, browsers, and platforms currently logged into the user's account, along with their IP addresses and last activity timestamps.

    Requirements:

    • This feature requires the Laravel session driver to be set to database (config('session.driver') === 'database'). If using other drivers (like file or redis), the session list will be unavailable.

    Functionality:

    • View Sessions: Displays device details (browser, platform, device type) and activity info.
    • Logout Other Sessions: Users can log out of all other active browser sessions by providing their current password for verification. This action uses Auth::guard()->logoutOtherDevices($password) and cleans up the database session records.