Filament 如何自定义登录页面

官方的页面太简约了，而且可供修改的范围太少了

通过发布官方资源可以看到

resources/views/vendor/filament-panels/pages/auth/login.blade.php

php 复制代码

<x-filament-panels::page.simple>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ __('filament-panels::pages/auth/login.actions.register.before') }}

            {{ $this->registerAction }}
        </x-slot>
    @endif

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

        <x-filament-panels::form.actions
            :actions="$this->getCachedFormActions()"
            :full-width="$this->hasFullWidthFormActions()"
        />
    </x-filament-panels::form>
</x-filament-panels::page.simple>

你能修改的只有这个form的样式，一般我们都想把登录页面的整体布局修改下，比如加个大背景图啥的

可以看到他继承的是这个文件resources/views/vendor/filament-panels/components/layout/simple.blade.php

但是这个页面可能会被其他地方使用，为了不影响其他组件，我们就只能重写这一块了

首先自定义layout.blade.php

php 复制代码

<x-filament-panels::layout.base :livewire="$livewire">

    <div class="flex flex-row h-screen w-screen full-body">
        <div class="left-body col- h-screen w-screen">
            <!-- 左侧内容 -->
        </div>
        <div class="right-body ">

            <div class="bg-white p-6 login-form shadow-xl rounded-xl md:max-w-lg">
                {{ $slot }}
            </div>
            <!-- 右侧内容 -->
        </div>
    </div>
    <style>
        .left-body{
            width: 70%;
            background: url("/img/bg.jpg") center;
            background-size: cover;
            opacity: 0.8;
        }
        .right-body{
            width: 25%;
        }
        .full-body{
            justify-content: space-between;
            align-items: center;
        }
        .login-form{
            margin-right: 5rem;
        }
    </style>
</x-filament-panels::layout.base>

然后是login.blade.php,就是把原来的form搬过来，如果你懒的话也可以直接用原来的

php 复制代码

@props([
'heading' => null,
'subheading' => null,
])
    <div {{ $attributes->class(['fi-simple-page']) }}>
        <section class="grid auto-cols-fr gap-y-6">
            <x-filament-panels::header.simple
                :heading="$heading ??= $this->getHeading()"
                :logo="$this->hasLogo()"
                :subheading="$subheading ??= $this->getSubHeading()"
            />
            <div>
                @if (filament()->hasRegistration())
                    <x-slot name="subheading">
                        {{ __('filament-panels::pages/auth/login.actions.register.before') }}

                        {{ $this->registerAction }}
                    </x-slot>
                @endif

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

                    <x-filament-panels::form.actions
                        :actions="$this->getCachedFormActions()"
                        :full-width="$this->hasFullWidthFormActions()"
                    />
                </x-filament-panels::form>
            </div>
        </section>
    </div>

然后是 Login, 其实就是照搬了官方的文件，登录的逻辑都在这个文件内

php 复制代码

<?php

namespace App\Filament\Pages;

use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
use DanHarrin\LivewireRateLimiting\WithRateLimiting;
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Facades\Filament;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Http\Responses\Auth\Contracts\LoginResponse;
use Filament\Notifications\Notification;
use Filament\Pages\BasePage;
use Filament\Pages\Concerns\InteractsWithFormActions;
use Filament\Pages\Page;
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
use Illuminate\Validation\ValidationException;

/**
 * @property Form $form
 */
class Login extends BasePage
{
    use InteractsWithFormActions;
    use WithRateLimiting;
    protected static string $view = 'filament.pages.login';

    protected static string $layout = 'components.filament.pages.layout';
    /**
     * @var array<string, mixed> | null
     */
    public ?array $data = [];


    public function hasLogo(): bool
    {
        return true;
    }


    public function mount(): void
    {
        if (Filament::auth()->check()) {
            redirect()->intended(Filament::getUrl());
        }

        $this->form->fill();
    }

    public function authenticate(): ?LoginResponse
    {
        try {
            $this->rateLimit(5);
        } catch (TooManyRequestsException $exception) {
            Notification::make()
                ->title(__('filament-panels::pages/auth/login.notifications.throttled.title', [
                    'seconds' => $exception->secondsUntilAvailable,
                    'minutes' => ceil($exception->secondsUntilAvailable / 60),
                ]))
                ->body(array_key_exists('body', __('filament-panels::pages/auth/login.notifications.throttled') ?: []) ? __('filament-panels::pages/auth/login.notifications.throttled.body', [
                    'seconds' => $exception->secondsUntilAvailable,
                    'minutes' => ceil($exception->secondsUntilAvailable / 60),
                ]) : null)
                ->danger()
                ->send();

            return null;
        }

        $data = $this->form->getState();

        if (! Filament::auth()->attempt($this->getCredentialsFromFormData($data), $data['remember'] ?? false)) {
            throw ValidationException::withMessages([
                'data.email' => __('filament-panels::pages/auth/login.messages.failed'),
            ]);
        }

        session()->regenerate();

        return app(LoginResponse::class);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                $this->getEmailFormComponent(),
                $this->getPasswordFormComponent(),
                $this->getRememberFormComponent(),
            ])
            ->statePath('data');
    }

    protected function getEmailFormComponent(): Component
    {
        return TextInput::make('email')
            ->label(__('filament-panels::pages/auth/login.form.email.label'))
            ->email()
            ->required()
            ->autocomplete()
            ->autofocus();
    }

    protected function getPasswordFormComponent(): Component
    {
        return TextInput::make('password')
            ->label(__('filament-panels::pages/auth/login.form.password.label'))
            ->hint(filament()->hasPasswordReset() ? new HtmlString(Blade::render('<x-filament::link :href="filament()->getRequestPasswordResetUrl()"> {{ __(\'filament-panels::pages/auth/login.actions.request_password_reset.label\') }}</x-filament::link>')) : null)
            ->password()
            ->required();
    }

    protected function getRememberFormComponent(): Component
    {
        return Checkbox::make('remember')
            ->label(__('filament-panels::pages/auth/login.form.remember.label'));
    }

    public function registerAction(): Action
    {
        return Action::make('register')
            ->link()
            ->label(__('filament-panels::pages/auth/login.actions.register.label'))
            ->url(filament()->getRegistrationUrl());
    }

    public function getTitle(): string | Htmlable
    {
        return __('filament-panels::pages/auth/login.title');
    }

    public function getHeading(): string | Htmlable
    {
        return __('filament-panels::pages/auth/login.heading');
    }

    /**
     * @return array<Action | ActionGroup>
     */
    protected function getFormActions(): array
    {
        return [
            $this->getAuthenticateFormAction(),
        ];
    }

    protected function getAuthenticateFormAction(): Action
    {
        return Action::make('authenticate')
            ->label(__('filament-panels::pages/auth/login.form.actions.authenticate.label'))
            ->submit('authenticate');
    }

    protected function hasFullWidthFormActions(): bool
    {
        return true;
    }

    /**
     * @param  array<string, mixed>  $data
     * @return array<string, mixed>
     */
    protected function getCredentialsFromFormData(array $data): array
    {
        return [
            'name' => $data['name'],
            'password' => $data['password'],
        ];
    }
}

最后把Login注册进去就行了Providers/Filament/AdminPanelProvider.php

php 复制代码

        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login(Login::class) // 放进去