当前位置: 首页 > news >正文

Filament 如何自定义登录页面

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

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

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, 其实就是照搬了官方的文件,登录的逻辑都在这个文件内

<?phpnamespace 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) // 放进去

相关文章:

Filament 如何自定义登录页面

官方的页面太简约了&#xff0c;而且可供修改的范围太少了 通过发布官方资源可以看到 resources/views/vendor/filament-panels/pages/auth/login.blade.php <x-filament-panels::page.simple>if (filament()->hasRegistration())<x-slot name"subheading&…...

百度智能云“千帆大模型平台”最新升级:接入Llama 2等33个模型!

今年3月&#xff0c;百度智能云推出“千帆大模型平台”。作为全球首个一站式的企业级大模型平台&#xff0c;千帆不但提供包括文心一言在内的大模型服务及第三方大模型服务&#xff0c;还提供大模型开发和应用的整套工具链&#xff0c;能够帮助企业解决大模型开发和应用过程中的…...

[保研/考研机试] KY129 简单计算器 浙江大学复试上机题 C++实现

描述 读入一个只包含 , -, *, / 的非负整数计算表达式&#xff0c;计算该表达式的值。 输入描述&#xff1a; 测试输入包含若干测试用例&#xff0c;每个测试用例占一行&#xff0c;每行不超过200个字符&#xff0c;整数和运算符之间用一个空格分隔。没有非法表达式。当一行中…...

推出 Elasticsearch 查询语言 (ES|QL)

作者&#xff1a;Costin Leau 我很高兴地宣布&#xff0c;经过大约一年的开发&#xff0c;Elasticsearch 查询语言 (ES|QL) 已准备好与世界共享&#xff0c;并已登陆 Elasticsearch 存储库。 ES|QL 是 Elasticsearch 原生的强大声明性语言&#xff0c;专为可组合性、表现力和速…...

机器学习 day32(神经网络如何解决高方差和高偏差)

解决高偏差和高方差的新方法 之前&#xff0c;我们需要通过选取多项式次数以及正则化参数λ&#xff0c;来平衡高方差和高偏差 只要训练集不是特别大&#xff0c;那么一个大型的神经网络总能很好的适应训练集&#xff0c;即它的Jtrain很低由此可以得出&#xff0c;若要减小Jt…...

Web前端之NodeJS、Vue

文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue&#xff08;渐进式JS框架&#xff09;4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲…...

冠达管理:银行定增是利好还是利空?

银行定增是指银行经过向特定投资者定向发行股票的方法进行增发。这种方法被认为可认为银行提供本钱充足、拓展融资渠道、增强抵挡危险的才能。但是&#xff0c;关于银行定增是否对商场和投资者带来积极影响的讨论一向存在。本文将从多个角度进行剖析&#xff0c;以讨论银行定增…...

背上小书包准备run之TypeScript篇

这TypeScript我真不知道面试会咋问。。。 哦以前还写过一篇基础⬇️ Typescript 基础易理解-------冲冲冲_ts和js有什么区别_慢谷的博客-CSDN博客 typescript是啥&#xff1f;与javascript的区别&#xff1f; TypeScript是一个强类型的JavaScript超集&#xff0c;可编译为纯…...

什么是绩效管理?绩效管理包括哪些内容?

阅读本文您可以了解&#xff1a;1、绩效管理的定义&#xff1b;2、绩效管理的内容&#xff1b; 一、什么是绩效管理 绩效管理是一种组织和管理方法&#xff0c;旨在确保员工的工作与组织的目标保持一致&#xff0c;以及激励和提高员工的工作表现。它涉及设定明确的目标和标准&…...

Java基础练习八(二维数组)

1.装水问题 有一个 异形 容器&#xff0c;用一个 n * n 的二维数组来表示。其中 1 表示容器实心部分&#xff0c; 0 表示空心部分。现使用此容器装水&#xff0c;能装多少水&#xff08;每个元素都表示一份水&#xff0c;只有有挡板的部分能装水&#xff09;&#xff1f; publi…...

Biopython序列比对

从InterPro网站&#xff08;https://www.ebi.ac.uk/interpro/download/Pfam/&#xff09;下载多序列比对文件Pfam-A.seed.gz&#xff08;含多个多序列比对&#xff09; ​wget https://ftp.ebi.ac.uk/pub/databases/Pfam/current_release/Pfam-A.seed.gz解压&#xff0c;取第一…...

无法坚持运动?解密肠道菌群影响运动积极性

谷禾健康 运动可以说是最有效和可行的生活方式因素&#xff0c;个人可以利用它来保护自己免受各种疾病的侵害&#xff0c;包括代谢性、心血管、神经退行性和肿瘤性疾病。 世界卫生组织建议&#xff0c;每周进行150-300分钟的中等强度运动。 运动的好处具体不用多说了&#xff0…...

4-5-tablewidget

文章目录 添加控件&#xff0c;添加行列数widget.cppwidget.h效果 添加控件&#xff0c;添加行列数 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this)…...

前端基础第一天-html-综合案例

通过综合案例&#xff0c;主要复习&#xff1a; 目录文件夹今日所学标签路径锚点链接 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initia…...

PDF Expert 3.3 for mac

PDF Expert是一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 以下是PDF Expert的特点&#xff1a; PDF编辑&#xff1a;PDF Expert提供了丰富的PDF编辑功能&#xff0c;包括添加、删除、移动、旋转、缩放、裁…...

【腾讯云 Cloud Studio 实战训练营】深度体验 | 使用腾讯云 Cloud Studio 快速构建 Vue + Vite 完成律师 H5 页面

【腾讯云 Cloud Studio 实战训练营】深度体验 | 使用腾讯云 Cloud Studio 快速构建 Vue Vite 完成律师 H5 页面 写在前面的话一、腾讯云 Cloud Studio 介绍1.1 Cloud Studio 应用场景1.2 Cloud Studio 开发优势 二、沉浸式体验开发快速构建 H5 页面2.1 注册与登录 Cloud Studi…...

Word转PDF在线转换如何操作?分享转换技巧

现如今&#xff0c;pdf转换器已成为大家日常办公学习必不可少的工具&#xff0c;市场上的pdf转换器主要有两种类型&#xff0c;一种是需要下载安装的&#xff0c;另一种是网页版&#xff0c;打开就可以使用的&#xff0c;今天小编给大家推荐一个非常好用的网页版pdf转换器&…...

只需5步 真·双开电脑版微信

最近发现&#xff0c;有些小伙伴不仅有双开手机版微信的需求&#xff0c;同时也有电脑版的需求。 今天教大家一个方法&#xff0c;简单好用&#xff0c;只需要跟着图片操作&#xff0c;5步即可&#xff01;快一起来试试吧~ 1.下载安装ProcessExplorer 2.右键以管理员身份运行…...

如何将JSON字符串转化成对象

在这里只能使用ObjiectMapper这个类才能将Json字符串转成对象的格式进行输出 话不多说,直接上代码 实体类 //实体类 Setter Getter public class UserInfo implements Serializable {private Long id;private String name; //昵称private String phone; //手机转换代码 St…...

计算机网络 运输层 UDP和TCP对比

...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...