{"id":15650576,"url":"https://github.com/rawilk/filament-password-input","last_synced_at":"2025-04-05T02:08:28.248Z","repository":{"id":200826606,"uuid":"706332075","full_name":"rawilk/filament-password-input","owner":"rawilk","description":"Enhanced password input component for filament.","archived":false,"fork":false,"pushed_at":"2025-02-25T14:11:33.000Z","size":294,"stargazers_count":44,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T01:11:55.264Z","etag":null,"topics":["filamentphp","forms","password-input","ui"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rawilk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"rawilk"}},"created_at":"2023-10-17T18:32:06.000Z","updated_at":"2025-03-05T16:09:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4f8e43f-8c9a-412e-a891-321f3c82ce02","html_url":"https://github.com/rawilk/filament-password-input","commit_stats":null,"previous_names":["rawilk/filament-password-input"],"tags_count":11,"template":false,"template_full_name":"rawilk/package-skeleton-laravel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Ffilament-password-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Ffilament-password-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Ffilament-password-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Ffilament-password-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rawilk","download_url":"https://codeload.github.com/rawilk/filament-password-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276164,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["filamentphp","forms","password-input","ui"],"created_at":"2024-10-03T12:35:08.767Z","updated_at":"2025-04-05T02:08:28.232Z","avatar_url":"https://github.com/rawilk.png","language":"PHP","funding_links":["https://github.com/sponsors/rawilk"],"categories":["Plugins"],"sub_categories":["Administration \u0026 Management"],"readme":"# filament-password-input\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/rawilk/filament-password-input.svg?style=flat-square)](https://packagist.org/packages/rawilk/filament-password-input)\n![Tests](https://github.com/rawilk/filament-password-input/workflows/Tests/badge.svg?style=flat-square)\n[![Total Downloads](https://img.shields.io/packagist/dt/rawilk/filament-password-input.svg?style=flat-square)](https://packagist.org/packages/rawilk/filament-password-input)\n[![PHP from Packagist](https://img.shields.io/packagist/php-v/rawilk/filament-password-input?style=flat-square)](https://packagist.org/packages/rawilk/filament-password-input)\n[![License](https://img.shields.io/github/license/rawilk/filament-password-input?style=flat-square)](https://github.com/rawilk/filament-password-input/blob/main/LICENSE.md)\n\n![social image](https://banners.beyondco.de/Filament%20Password%20Input.png?theme=light\u0026packageManager=composer+require\u0026packageName=rawilk%2Ffilament-password-input\u0026pattern=architect\u0026style=style_1\u0026description=Enhanced+password+input+component+for+filament.\u0026md=1\u0026showWatermark=0\u0026fontSize=100px\u0026images=lock-closed)\n\n`filament-password-input` is a package built for [Filament](https://filamentphp.com) that provides an enhanced password input form component that offers you the ability to add the following\nfeatures to your password inputs:\n\n- Reveal password toggle\n- Copy to clipboard\n- Generate new password button\n\n## Installation\n\n\u003e Upgrading to 2.0 from 1.x? Be sure to follow the [Upgrade](https://github.com/rawilk/filament-password-input/blob/main/upgrade.md) guide for breaking changes.\n\nYou can install the package via composer:\n\n```bash\ncomposer require rawilk/filament-password-input\n```\n\nThat's it. There is no configuration file or migrations necessary for the package. Any customization is done directly on\nthe input itself, or [globally](#global-configuration) in a service provider, however there are a few language lines that can be overridden\nif necessary in your application. You may publish the language files with:\n\n```bash\nphp artisan vendor:publish --tag=filament-password-input-translations\n```\n\n## Usage\n\nInside a form schema, you can use the `Password` input like this:\n\n```php\nuse Rawilk\\FilamentPasswordInput\\Password;\nuse Filament\\Forms\\Form;\n\npublic function form(Form $form): Form\n{\n    return $form\n        -\u003eschema([\n            // ...\n            Password::make('password')\n                -\u003elabel('Password'),\n        ]);\n}\n```\n\nThe code above will render a password input inside the form with a toggle button to show and hide the password.\n\n![base input](https://github.com/rawilk/filament-password-input/raw/main/docs/images/base-input.png)\n\nIf you want to render a normal password input without the toggle, you may also do that with this field. The following code\nwill render the password input without the toggle button inside it:\n\n```php\nuse Rawilk\\FilamentPasswordInput\\Password;\nuse Filament\\Forms\\Form;\n\npublic function form(Form $form): Form\n{\n    return $form\n        -\u003eschema([\n            // ...\n            Password::make('password')\n                -\u003elabel('Password')\n                -\u003erevealable(false),\n        ]);\n}\n```\n\n## Copy to Clipboard\n\nYou can easily make any password input copyable by calling the `copyable()` method on the input. This will merge an action button in with any other `suffixActions`\nyou have defined on the input.\n\n```php\nPassword::make('password')\n    -\u003ecopyable(),\n```\n\n![copyable input](https://github.com/rawilk/filament-password-input/raw/main/docs/images/input-with-copy.png)\n\n\u003e **Note:** This button will not show up if the input is disabled.\n\nIf you'd like the copy button to show up as an inline suffix instead, you can simply call the `inlineSuffix()` method on the input.\n\n### Icon Color\n\nYou can customize the color of the icon by passing in a color to the `copyable` method:\n\n```php\nPassword::make('password')\n    -\u003ecopyable(color: 'success'),\n```\n\n### Title/Label\n\nWhen you hover over the copy button, a title saying `Copy to clipboard` will show up. You can customize this text globally\nby overriding the `filament-password-input::password.actions.copy.tooltip` language key.\n\n### Confirmation Text\n\nOnce clicked, a tooltip will appear with the text `Copied`. You can customize this text globally by overriding the `filament::components/copyable.messages.copied`\nlanguage key, or individually by using the `copyMessage` method:\n\n```php\nPassword::make('password')\n    -\u003ecopyable()\n    -\u003ecopyMessage('Copied'),\n```\n\n### Copy Message Duration\n\nThe confirmation text that appears after clicking the copy button will disappear after 1 second by default. You can customize this with\nthe `copyMessageDuration` method:\n\n```php\nPassword::make('password')\n    -\u003ecopyable()\n    -\u003ecopyMessageDuration(3000), // 3 seconds\n```\n\n\u003e **Note:** The duration should be in milliseconds, and as an integer value.\n\n## Password Generation\n\nAnother feature offered by this component is password generation. By calling the `regeneratePassword()` method on the input, a button will be\nmerged in with any other `suffixActions` you have defined on the input.\n\n```php\nPassword::make('password')\n    -\u003elabel('Password')\n    -\u003eregeneratePassword(),\n```\n\n![regenerate password](https://github.com/rawilk/filament-password-input/raw/main/docs/images/input-with-generate.png)\n\n\u003e **Note:** This button will not show up if the input is disabled or readonly.\n\nAs with the copy to clipboard action button, you can have this action rendered inline on the input as well by calling the `inlineSuffix()` method\non the input.\n\n### Password Generation Method\n\nBy default, the password generation is handled with Laravel's `Str::password()` helper method. This will generate a random, strong password that is 32\ncharacters long for you. If you have a `maxLength()` set on the input, that length will be used instead for the character length.\n\nYou may also use a completely custom generation method by providing a closure to the `regeneratePassword` method:\n\n```php\nPassword::make('password')\n    -\u003eregeneratePassword(using: fn () =\u003e 'my-custom-password'),\n```\n\nNow when the button is clicked, `my-custom-password` will be filled into the input instead. Like with most callbacks in filament, you are able to inject\nfilament's utilities into the callback as well.\n\n### Password Max Length\n\nWhen using the default password generator (`Str::password()`), we will tell it to use the `maxLength()` that is set on the input. This means that\nif you set a maximum length of 10 characters, the password generated by this action will be 10 characters long. By default, it is 32 characters long\nif a max length is not set.\n\n```php\nPassword::make('password')\n    -\u003eregeneratePassword()\n    -\u003emaxLength(10),\n```\n\n\u003e **Note:** Due to how Laravel's `Str::password()` helper works, the password max length must be a minimum of 3 characters long.\n\nIf you want to use a different length than the input's max length, you can also use the `newPasswordLength` method as well:\n\n```php\nPassword::make()\n    -\u003eregeneratePassword()\n    -\u003enewPasswordLength(8),\n```\n\n### Icon Color\n\nYou can customize the color of the icon by passing a color to the `regeneratePassword` method:\n\n```php\nPassword::make('password')\n    -\u003eregeneratePassword(color: 'success'),\n```\n\n### Title/Label\n\nWhen you hover the generate password action button, the text `Generate new password` will show up. You can customize this text globally\nby overriding the `filament-password-input::password.actions.regenerate.tooltip` language key.\n\n### Confirmation Message\n\nOnce a new password is generated and returned to the UI, the component will make use of a filament `Notification` with the text `New password was generated!`.\nYou can customize this globally by overriding the `filament-password-input::password.actions.regenerate.success_message` language key.\n\nYou may also disable this notification all-together by providing a `false` value to the `regeneratePassword` method:\n\n```php\nPassword::make('password')\n    -\u003eregeneratePassword(notify: false),\n```\n\n## Password Managers\n\nIf you have a password manager installed, like 1Password or LastPass, you'll know that they automatically inject a button into password inputs.\nNormally, this is a good thing, but there can be times when this is not desired, such as in local development or on a form where you're\ninputting something other than your own password.\n\nTo disable password managers from injecting themselves into your password inputs, you may use the `hidePasswordManagerIcons()` method:\n\n```php\nPassword::make('password')\n    -\u003ehidePasswordManagerIcons(),\n```\n\nThis will add `data-1p-ignore` and `data-lpignore=\"true\"` attributes to the input to attempt to block password managers from injecting their buttons. This isn't always\n100% effective, but it should work in most cases. If you know of a better way to handle this, PR's are always welcome.\n\n## Icons\n\nThe icons for used in the actions on this component can be customized in a service provider by registering their aliases with filament.\n\n```php\n\\Filament\\Support\\Facades\\FilamentIcon::register([\n    'filament-password-input::regenerate' =\u003e 'heroicon-o-key',\n])\n```\n\nHere are the aliases required to modify each icon:\n\n- `filament-password-input::copy` - copy to clipboard action\n- `filament-password-input::regenerate` - regenerate password action\n- `forms::components.text-input.actions.show-password` - show password reveal button\n- `forms::components.text-input.actions.hide-password` - hide password reveal button\n\n## Kitchen Sink Example\n\nHere is an example of an input with all the actions enabled:\n\n```php\nPassword::make('password')\n    -\u003elabel('Password')\n    -\u003ecopyable(color: 'warning')\n    -\u003eregeneratePassword(color: 'primary')\n    -\u003einlineSuffix(),\n```\n\n![kitchen sink](https://github.com/rawilk/filament-password-input/raw/main/docs/images/kitchen-sink.png)\n\n## Global Configuration\n\nLike most things in filament, you can customize a lot of the default behavior of this input in a service provider\nusing `configureUsing`:\n\n```php\nuse Rawilk\\FilamentPasswordInput\\Password;\nuse Illuminate\\Support\\ServiceProvider;\n\nclass AppServiceProvider extends ServiceProvider\n{\n    public function boot(): void\n    {\n        Password::configureUsing(function (Password $password) {\n            $password\n                -\u003emaxLength(24)\n                -\u003ecopyable();\n                // -\u003e...\n        });\n    }\n}\n```\n\nAny behavior defined here can still be overridden on individual inputs as needed.\n\n## Scripts\n\n### Setup\n\nFor convenience, you can run the setup bin script for easy installation for local development.\n\n```bash\n./bin/setup.sh\n```\n\n### Formatting\n\nAlthough formatting is done automatically via workflow, you can format php code locally before committing with a composer script:\n\n```bash\ncomposer format\n```\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](https://github.com/rawilk/filament-password-input/blob/main/CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/rawilk/filament-password-input/blob/main/.github/CONTRIBUTING.md) for details.\n\n## Security\n\nPlease review [my security policy](https://github.com/rawilk/filament-password-input/blob/main/.github/SECURITY.md) on how to report security vulnerabilities.\n\n## Credits\n\n- [Randall Wilk](https://github.com/rawilk)\n- [All Contributors](https://github.com/rawilk/filament-password-input/graphs/contributors)\n\n## Alternatives\n\n- [papalardo/filament-password-input](https://github.com/papalardo/filament-password-input)\n- [phpsa/filament-password-reveal](https://github.com/phpsa/filament-password-reveal)\n\n## License\n\nThe MIT License (MIT). Please see [License File](https://github.com/rawilk/filament-password-input/blob/main/LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Ffilament-password-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frawilk%2Ffilament-password-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Ffilament-password-input/lists"}