README

filament-password-input 是为 Filament 构建的包，提供增强密码输入表单组件，使您能够将以下功能添加到您的密码输入中

显示密码切换
复制到剪贴板
生成新密码按钮

安装

从 1.x 升级到 2.0？请确保遵循升级指南以了解重大更改。

您可以通过 composer 安装此包

composer require rawilk/filament-password-input

这就完成了。此包不需要配置文件或迁移。任何自定义都是直接在输入本身或全局在服务提供者中进行的，但如有必要，可以在您的应用程序中覆盖一些语言行。您可以使用以下命令发布语言文件

php artisan vendor:publish --tag=filament-password-input-translations

用法

在表单模式内部，您可以使用 Password 输入如下所示

use Rawilk\FilamentPasswordInput\Password;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            Password::make('password')
                ->label('Password'),
        ]);
}

上面的代码将在表单内渲染一个密码输入，并带有切换按钮来显示和隐藏密码。

如果您想渲染一个不带切换按钮的正常密码输入，您也可以使用此字段。以下代码将渲染一个不带切换按钮的密码输入

use Rawilk\FilamentPasswordInput\Password;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            // ...
            Password::make('password')
                ->label('Password')
                ->revealable(false),
        ]);
}

复制到剪贴板

您可以通过在输入上调用 copyable() 方法轻松使任何密码输入可复制。这将合并一个操作按钮与您在输入上定义的任何其他 suffixActions。

Password::make('password')
    ->copyable(),

注意：如果输入被禁用，则此按钮不会显示。

如果您想将复制按钮显示为行内后缀，可以在输入上调用 inlineSuffix() 方法。

图标颜色

您可以通过传递颜色到 copyable 方法来自定义图标的颜色

Password::make('password')
    ->copyable(color: 'success'),

标题/标签

当您将鼠标悬停在复制按钮上时，将显示一个标题为 复制到剪贴板 的文本。您可以通过覆盖 filament-password-input::password.actions.copy.tooltip 语言键来全局自定义此文本。

确认文本

一旦点击，将出现一个包含文本 Copied 的工具提示。您可以通过覆盖 filament::components/copyable.messages.copied 语言键全局自定义此文本，或通过使用 copyMessage 方法单独自定义。

Password::make('password')
    ->copyable()
    ->copyMessage('Copied'),

复制消息持续时间

点击复制按钮后出现的确认文本默认会在 1 秒后消失。您可以使用 copyMessageDuration 方法自定义此。

Password::make('password')
    ->copyable()
    ->copyMessageDuration(3000), // 3 seconds

注意：持续时间应以毫秒为单位，并且为整数值。

密码生成

此组件提供的另一个功能是密码生成。通过在输入上调用 regeneratePassword() 方法，将合并一个按钮与您在输入上定义的任何其他 suffixActions。

Password::make('password')
    ->label('Password')
    ->regeneratePassword(),

注意：如果输入被禁用或为只读，则此按钮不会显示。

与复制到剪贴板操作按钮一样，您也可以通过在输入上调用 inlineSuffix() 方法将此操作以行内方式渲染在输入上。

密码生成方法

默认情况下，密码生成由Laravel的Str::password()辅助方法处理。这将为您生成一个长度为32个字符的随机、强密码。如果您在输入上设置了maxLength()，则将使用该长度而不是字符长度。

您也可以通过向regeneratePassword方法提供一个闭包来使用完全定制的生成方法。

Password::make('password')
    ->regeneratePassword(using: fn () => 'my-custom-password'),

现在当按钮被点击时，my-custom-password将被填充到输入框中。与filament中的大多数回调一样，您也可以将filament的实用工具注入到回调中。

密码最大长度

当使用默认密码生成器（Str::password()）时，我们将通知它使用输入上设置的maxLength()。这意味着如果您设置了10个字符的最大长度，则通过此操作生成的密码长度为10个字符。如果没有设置最大长度，则默认为32个字符。

Password::make('password')
    ->regeneratePassword()
    ->maxLength(10),

注意：由于Laravel的Str::password()辅助方法的工作方式，密码最大长度必须至少为3个字符。

如果您想使用比输入的最大长度不同的长度，您也可以使用newPasswordLength方法。

Password::make()
    ->regeneratePassword()
    ->newPasswordLength(8),

图标颜色

您可以通过向regeneratePassword方法传递一个颜色来自定义图标的颜色。

Password::make('password')
    ->regeneratePassword(color: 'success'),

标题/标签

当您悬停在生成密码操作按钮上时，将显示文本生成新密码。您可以通过重写filament-password-input::password.actions.regenerate.tooltip语言键来全局自定义此文本。

确认信息

一旦生成了新密码并将其返回到UI，组件将使用filament的Notification并显示文本新密码已生成！。您可以通过重写filament-password-input::password.actions.regenerate.success_message语言键来全局自定义此信息。

您还可以通过向regeneratePassword方法提供一个false值来完全禁用此通知。

Password::make('password')
    ->regeneratePassword(notify: false),

密码管理器

如果您安装了密码管理器，如1Password或LastPass，您会知道它们会自动将按钮注入到密码输入中。通常这是好事，但有时可能不希望这样，例如在本地开发或在输入非您自己的密码的表单中。

要禁用密码管理器将自身注入到您的密码输入中，您可以使用hidePasswordManagerIcons()方法。

Password::make('password')
    ->hidePasswordManagerIcons(),

这将向输入添加data-1p-ignore和data-lpignore="true"属性，以尝试阻止密码管理器注入它们的按钮。这并不总是100%有效，但在大多数情况下应该有效。如果您知道更好的处理方法，PR总是受欢迎的。

图标

用于此组件操作上的图标的自定义可以在服务提供商中完成，通过将它们的别名注册到filament。

\Filament\Support\Facades\FilamentIcon::register([
    'filament-password-input::regenerate' => 'heroicon-o-key',
])

以下是修改每个图标的别名

filament-password-input::copy - 复制到剪贴板操作
filament-password-input::regenerate - 生成密码操作
forms::components.text-input.actions.show-password - 显示密码显示按钮
forms::components.text-input.actions.hide-password - 隐藏密码显示按钮

厨房水槽示例

这是一个具有所有操作都已启用的输入示例。

Password::make('password')
    ->label('Password')
    ->copyable(color: 'warning')
    ->regeneratePassword(color: 'primary')
    ->inlineSuffix(),

全局配置

与filament中的大多数事物一样，您可以使用configureUsing在服务提供商中使用来自定义此输入的许多默认行为。

use Rawilk\FilamentPasswordInput\Password;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Password::configureUsing(function (Password $password) {
            $password
                ->maxLength(24)
                ->copyable();
                // ->...
        });
    }
}

在这里定义的任何行为都可以根据需要覆盖到单个输入。

脚本

设置

为了方便，您可以运行设置二进制脚本以轻松进行本地开发安装。

./bin/setup.sh

格式化

虽然格式化是通过工作流程自动完成的，但您可以在提交之前使用composer脚本来本地格式化php代码。

composer format

测试

composer test

rawilk / filament-password-input

维护者

详细信息

README

安装

用法

复制到剪贴板

图标颜色

标题/标签

确认文本

复制消息持续时间

密码生成

密码生成方法

密码最大长度

图标颜色

标题/标签

确认信息

密码管理器

图标

厨房水槽示例

全局配置

脚本

设置

格式化

测试

更改日志

贡献

安全

致谢

替代方案

许可协议