Filament improvements (#114)

* Use custom theme

* Remove top bar

* Fix user passwords not saving in Filament

* Use badge column for user roles

* Add filters to users table

* Wrap user form in section

* Update LoginControllerTest.php

Author: SebKay

app/Filament/Resources/Users/Pages/CreateUser.php

@@ -4,8 +4,16 @@
 
 use App\Filament\Resources\Users\UserResource;
 use Filament\Resources\Pages\CreateRecord;
+use Illuminate\Support\Facades\Hash;
 
 class CreateUser extends CreateRecord
 {
     protected static string $resource = UserResource::class;
+
+    protected function mutateFormDataBeforeCreate(array $data): array
+    {
+        $data['password'] = Hash::make($data['password']);
+
+        return $data;
+    }
 }

app/Filament/Resources/Users/Pages/EditUser.php

@@ -5,6 +5,7 @@
 use App\Filament\Resources\Users\UserResource;
 use Filament\Actions\DeleteAction;
 use Filament\Resources\Pages\EditRecord;
+use Illuminate\Support\Facades\Hash;
 
 class EditUser extends EditRecord
 {
@@ -16,4 +17,15 @@ protected function getHeaderActions(): array
             DeleteAction::make(),
         ];
     }
+
+    protected function mutateFormDataBeforeSave(array $data): array
+    {
+        $password = $data['password'] ?? null;
+
+        if ($password) {
+            $data['password'] = Hash::make($password);
+        }
+
+        return $data;
+    }
 }

app/Filament/Resources/Users/Schemas/UserForm.php

@@ -5,43 +5,50 @@
 use Filament\Forms\Components\DateTimePicker;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\TextInput;
+use Filament\Schemas\Components\Section;
 use Filament\Schemas\Schema;
 
 class UserForm
 {
     public static function configure(Schema $schema): Schema
     {
-        return $schema
+        return $schema->columns(6)
             ->components([
-                TextInput::make('first_name')
-                    ->autofocus()
-                    ->required()
-                    ->maxLength(255),
-
-                TextInput::make('last_name')
-                    ->required()
-                    ->maxLength(255),
-
-                TextInput::make('email')
-                    ->required()
-                    ->email()
-                    ->maxLength(255),
-
-                TextInput::make('password')
-                    ->required(fn (string $operation): bool => $operation === 'create')
-                    ->password()
-                    ->afterStateHydrated(function (TextInput $component, $state) {
-                        $component->state('');
-                    })
-                    ->dehydrated(fn (?string $state): bool => filled($state))
-                    ->maxLength(255),
-
-                DateTimePicker::make('email_verified_at'),
-
-                Select::make('roles')
-                    ->preload()
-                    ->multiple()
-                    ->relationship('roles', 'name'),
+
+                Section::make('Settings')
+                    ->columnSpanFull()
+                    ->columns(2)
+                    ->schema([
+                        TextInput::make('first_name')
+                            ->autofocus()
+                            ->required()
+                            ->maxLength(255),
+
+                        TextInput::make('last_name')
+                            ->required()
+                            ->maxLength(255),
+
+                        TextInput::make('email')
+                            ->required()
+                            ->email()
+                            ->maxLength(255),
+
+                        TextInput::make('password')
+                            ->required(fn (string $operation): bool => $operation === 'create')
+                            ->password()
+                            ->afterStateHydrated(function (TextInput $component, $state) {
+                                $component->state('');
+                            })
+                            ->dehydrated(fn (?string $state): bool => filled($state))
+                            ->maxLength(255),
+
+                        DateTimePicker::make('email_verified_at'),
+
+                        Select::make('roles')
+                            ->preload()
+                            ->multiple()
+                            ->relationship('roles', 'name'),
+                    ]),
             ]);
     }
 }

app/Filament/Resources/Users/Tables/UsersTable.php

@@ -2,11 +2,15 @@
 
 namespace App\Filament\Resources\Users\Tables;
 
+use App\Enums\Role;
+use App\Models\User;
 use Filament\Actions\BulkActionGroup;
 use Filament\Actions\DeleteBulkAction;
 use Filament\Actions\EditAction;
-use Filament\Tables\Columns\IconColumn;
+use Filament\Support\Icons\Heroicon;
 use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Filters\SelectFilter;
+use Filament\Tables\Filters\TernaryFilter;
 use Filament\Tables\Table;
 
 class UsersTable
@@ -21,28 +25,46 @@ public static function configure(Table $table): Table
                     ->sortable(),
 
                 TextColumn::make('email')
+                    ->tooltip(fn (User $user) => $user->hasVerifiedEmail() ? 'Email Verified' : 'Email Not Verified')
+                    ->icon(fn (User $user) => match ($user->hasVerifiedEmail()) {
+                        true => Heroicon::OutlinedCheckCircle,
+                        false => Heroicon::OutlinedXCircle,
+                    })
+                    ->iconColor(fn (User $user) => match ($user->hasVerifiedEmail()) {
+                        true => 'success',
+                        false => 'danger',
+                    })
                     ->searchable()
                     ->sortable(),
 
-                IconColumn::make('email_verified')
-                    ->getStateUsing(fn ($record) => $record->email_verified_at)
-                    ->boolean()
-                    ->sortable(),
-
                 TextColumn::make('roles')
-                    ->getStateUsing(fn ($record) => $record->roles->pluck('name')->join(', '))
+                    ->badge()
+                    ->getStateUsing(fn ($record) => $record->roles->pluck('name'))
                     ->searchable()
                     ->sortable(),
 
                 TextColumn::make('created_at')
-                    ->dateTime()
-                    ->sortable()
-                    ->toggleable(isToggledHiddenByDefault: true),
+                    ->toggleable(isToggledHiddenByDefault: true)
+                    ->sortable(),
 
                 TextColumn::make('updated_at')
-                    ->dateTime()
-                    ->sortable()
-                    ->toggleable(isToggledHiddenByDefault: true),
+                    ->toggleable(isToggledHiddenByDefault: true)
+                    ->sortable(),
+            ])
+            ->filters([
+                TernaryFilter::make('email_verified_at')
+                    ->label('Email Verification')
+                    ->nullable()
+                    ->placeholder('All')
+                    ->trueLabel('Verified')
+                    ->falseLabel('Unverified'),
+
+                SelectFilter::make('roles')
+                    ->label('Roles')
+                    ->relationship('roles', 'name')
+                    ->options(Role::values())
+                    ->multiple()
+                    ->preload(),
             ])
             ->recordActions([
                 EditAction::make(),

app/Http/Controllers/RegisterController.php

@@ -7,6 +7,7 @@
 use App\Http\Requests\Register\RegisterStoreRequest;
 use App\Models\User;
 use Filament\Auth\Events\Registered;
+use Illuminate\Support\Facades\Hash;
 
 class RegisterController extends Controller
 {
@@ -24,7 +25,7 @@ public function store(RegisterStoreRequest $request)
     {
         $user = new User($request->only('first_name', 'last_name', 'email'));
 
-        $user->password = $request->validated('password');
+        $user->password = Hash::make($request->validated('password'));
         $user->save();
 
         $user->assignRole(Role::USER->value);

app/Http/Controllers/ResetPasswordController.php

@@ -7,6 +7,7 @@
 use App\Models\User;
 use Illuminate\Auth\Events\PasswordReset;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Password;
 use Illuminate\Support\Str;
 use Illuminate\Validation\ValidationException;
@@ -43,9 +44,9 @@ public function edit(Request $request, string $token)
 
     public function update(ResetPasswordUpdateRequest $request)
     {
-        $status = Password::reset($request->only('token', 'email', 'password', 'token'), function (User $user, string $password) {
+        $status = Password::reset($request->only('token', 'email', 'password', 'password_confirmation'), function (User $user, string $password) {
             $user->forceFill([
-                'password' => $password,
+                'password' => Hash::make($password),
             ])->setRememberToken(Str::random(60));
 
             $user->save();

app/Models/User.php

@@ -42,13 +42,6 @@ protected function casts(): array
         ];
     }
 
-    protected function password(): Attribute
-    {
-        return Attribute::make(
-            set: fn ($value) => Hash::make($value),
-        );
-    }
-
     protected function fullName(): Attribute
     {
         return Attribute::make(
@@ -71,7 +64,7 @@ protected function scopeHasRoles(Builder $query, array $roles): void
     public function updatePassword(?string $new_password = '')
     {
         if ($new_password && $new_password != $this->password) {
-            $this->password = $new_password;
+            $this->password = Hash::make($new_password);
 
             $this->save();
         }

app/Providers/Filament/AdminPanelProvider.php

@@ -25,10 +25,12 @@ public function panel(Panel $panel): Panel
             ->default()
             ->id('admin')
             ->path('admin')
-            ->login(Login::class)
+            ->topbar(false)
+            ->viteTheme('resources/css/filament/admin/theme.css')
             ->colors([
                 'primary' => '#1e293b',
             ])
+            ->login(Login::class)
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
             ->pages([

resources/css/filament/admin/theme.css

@@ -0,0 +1,4 @@
+@import '../../../../vendor/filament/filament/resources/css/theme.css';
+
+@source '../../../../app/Filament/**/*';
+@source '../../../../resources/views/filament/**/*';

tests/Feature/Controllers/LoginControllerTest.php

@@ -2,6 +2,7 @@
 
 use App\Enums\Environment;
 use App\Models\User;
+use Illuminate\Support\Facades\Hash;
 use Inertia\Testing\AssertableInertia as Assert;
 
 use function Pest\Faker\fake;
@@ -54,7 +55,7 @@
     test('Can login', function () {
         $password = fake()->password();
         $user = User::factory()->create([
-            'password' => $password,
+            'password' => Hash::make($password),
         ]);
 
         assertGuest();
@@ -72,7 +73,7 @@
     test('Can be redirected after login', function () {
         $password = fake()->password();
         $user = User::factory()->create([
-            'password' => $password,
+            'password' => Hash::make($password),
         ]);
 
         $redirectUrl = 'https://www.google.com/';
@@ -93,7 +94,7 @@
 
     test("Can't login with invalid credentials", function () {
         $user = User::factory()->create([
-            'password' => fake()->password(),
+            'password' => Hash::make(fake()->password()),
         ]);
 
         assertGuest();