Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
rawilk committed Jan 22, 2024
1 parent 3e395fe commit dce8a11
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 81 deletions.
122 changes: 41 additions & 81 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,6 @@ if necessary in your application. You may publish the language files with:
php artisan vendor:publish --tag=filament-password-input-translations
```

If you want to override the views from the package, you may publish them with:

```bash
php artisan vendor:publish --tag=filament-password-input-views
```

## Usage

Inside a form schema, you can use the `Password` input like this:
Expand Down Expand Up @@ -74,7 +68,7 @@ public function form(Form $form): Form
// ...
Password::make('password')
->label('Password')
->canRevealPassword(false),
->revealable(false),
]);
}
```
Expand All @@ -92,17 +86,6 @@ Password::make('password')
Like many of the other methods available on this input, you may use a closure to dynamically set the icon instead of passing
in a string to either method.

### Tooltip Text

You can customize the text that shows up in the tooltip for this button by either overriding the `filament-password-input::password.actions.reveal.show`
and `filament-password-input::password.actions.reveal.hide` language keys, or by providing your own text to the `showPasswordText` and `hidePasswordText` methods:

```php
Password::make('password')
->showPasswordText('Show password')
->hidePasswordText('Hide password'),
```

## Copy to Clipboard

You 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`
Expand All @@ -119,36 +102,19 @@ Password::make('password')
If you'd like the copy button to show up as an inline suffix instead, you can simply call the `inlineSuffix()` method on the input.

### Copy Icon

You can easily use a different icon for the copy button like this:

```php
Password::make('password')
->copyable()
->copyIcon('heroicon-o-clipboard'),
```

### Icon Color

You can customize the color of the icon by using the `copyIconColor` method:
You can customize the color of the icon by passing in a color to the `copyable` method:

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

### Tooltip
### Title/Label

When you hover over the copy button, a tooltip saying `Copy to clipboard` will show up. You can customize this text globally
by overriding the `filament-password-input::password.actions.copy.tooltip` language key, or individually by using the `copyTooltip` method:

```php
Password::make('password')
->copyable()
->copyTooltip('Copy password'),
```
When you hover over the copy button, a title saying `Copy to clipboard` will show up. You can customize this text globally
by overriding the `filament-password-input::password.actions.copy.tooltip` language key.

### Confirmation Text

Expand Down Expand Up @@ -197,18 +163,15 @@ on the input.
By default, the password generation is handled with Laravel's `Str::password()` helper method. This will generate a random, strong password that is 32
characters long for you. If you have a `maxLength()` set on the input, that length will be used instead for the character length.

You may also use a completely custom generation method by providing a closure to the `generatePasswordUsing` method:
You may also use a completely custom generation method by providing a closure to the `regeneratePassword` method:

```php
Password::make('password')
->regeneratePassword()
->generatePasswordUsing(function ($state) {
// State is the current value of the input
return 'my-custom-password';
}),
->regeneratePassword(using: fn () => 'my-custom-password'),
```

Now when the button is clicked, `my-custom-password` will be filled into the input instead.
Now 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
filament's utilities into the callback as well.

### Password Max Length

Expand All @@ -224,55 +187,38 @@ Password::make('password')

> **Note:** Due to how Laravel's `Str::password()` helper works, the password max length must be a minimum of 3 characters long.
### Button Icon

You can easily use a different icon for the generate password button using the `regeneratePasswordIcon` method:
If you want to use a different length than the input's max length, you can also use the `newPasswordLength` method as well:

```php
Password::make('password')
Password::make()
->regeneratePassword()
->regeneratePasswordIcon('heroicon-m-arrow-path'),
->newPasswordLength(8),
```

### Icon Color

You can customize the color of the icon by using the `regeneratePasswordIconColor` method:
You can customize the color of the icon by passing a color to the `regeneratePassword` method:

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

### Tooltip
### Title/Label

When you hover the generate password action button, the text `Generate new password` will show up in a tooltip. You can customize this text globally
by overriding the `filament-password-input::password.actions.regenerate.tooltip` language key, or individually by using the `regeneratePasswordTooltip` method:

```php
Password::make('password')
->regeneratePassword()
->regeneratePasswordTooltip('Generate new password'),
```
When you hover the generate password action button, the text `Generate new password` will show up. You can customize this text globally
by overriding the `filament-password-input::password.actions.regenerate.tooltip` language key.

### Confirmation Message

Once 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!`.
You can customize this globally by overriding the `filament-password-input::password.actions.regenerate.success_message` language key, or individually by using the
`passwordRegeneratedMessage` method:
You can customize this globally by overriding the `filament-password-input::password.actions.regenerate.success_message` language key.

```php
Password::make('password')
->regeneratePassword()
->passwordRegeneratedMessage('New password was generated!'),
```

You may also disable this notification all-together by providing a `false` value to `notifyOnPasswordRegenerate`:
You may also disable this notification all-together by providing a `false` value to the `regeneratePassword` method:

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

## Password Managers
Expand All @@ -291,6 +237,23 @@ Password::make('password')
This 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
100% effective, but it should work in most cases. If you know of a better way to handle this, PR's are always welcome.

## Icons

The icons for used in the actions on this component can be customized in a service provider by registering their aliases with filament.

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

Here are the aliases required to modify each icon:

- `filament-password-input::copy` - copy to clipboard action
- `filament-password-input::regenerate` - regenerate password action
- `forms::components.text-input.actions.show-password` - show password reveal button
- `forms::components.text-input.actions.hide-password` - hide password reveal button

## Kitchen Sink Example

Here is an example of an input with all the actions enabled:
Expand All @@ -299,10 +262,8 @@ Here is an example of an input with all the actions enabled:
Password::make('password')
->label('Password')
->inlineSuffix()
->copyable()
->regeneratePassword()
->copyIconColor('warning')
->regeneratePasswordIconColor('primary'),
->copyable(color: 'warning')
->regeneratePassword(color: 'primary'),
```

![kitchen sink](https://github.com/rawilk/filament-password-input/raw/main/docs/images/kitchen-sink.png)
Expand All @@ -323,8 +284,7 @@ class AppServiceProvider extends ServiceProvider
Password::configureUsing(function (Password $password) {
$password
->maxLength(24)
->copyable()
->copyIcon('heroicon-o-clipboard');
->copyable();
// ->...
});
}
Expand Down
Binary file modified docs/images/base-input.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/input-with-copy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/input-with-generate.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/kitchen-sink.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit dce8a11

Please sign in to comment.