官方的页面太简约了,而且可供修改的范围太少了
通过发布官方资源可以看到
resources/views/vendor/filament-panels/pages/auth/login.blade.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
<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搬过来,如果你懒的话也可以直接用原来的
@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
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
return $panel
->default()
->id('admin')
->path('admin')
->login(Login::class) // 放进去