Filament•13mo ago

Option to show password field

Hey, how can I make the TextInput::make()->password show the password on user request (the classic password-toggle)? I know how to achieve this with AlpineJS normally, but not in the context of filament.

Solution:

It's not possible out of the box last time a checked, there is a PR under review for added hidden / reveal ability to textinputs

Jump to solution

12 Replies

Solution

toeknee•13mo ago

It's not possible out of the box last time a checked, there is a PR under review for added hidden / reveal ability to textinputs

wulfheartOP•13mo ago

Thanks.

awcodes•13mo ago

Forms\Components\TextInput::make('password')
  ->type('password')
  ->suffixAction(
      Forms\Components\Actions\Action::make('toggle-password-visibility')
          ->icon('heroicon-o-eye')
          ->iconSize('md')
          ->action(function ($component) {
              $component->type('text');
          })
  ),

Forms\Components\TextInput::make('password')
  ->type('password')
  ->suffixAction(
      Forms\Components\Actions\Action::make('toggle-password-visibility')
          ->icon('heroicon-o-eye')
          ->iconSize('md')
          ->action(function ($component) {
              $component->type('text');
          })
  ),

wulfheartOP•13mo ago

@awcodes Thanks for your response. But that does not do it directly in the browser. It has a full trip to the server, doesn't it?

awcodes•13mo ago

Yes. But this is the easiest way to accomplish it. 🙂

Dennis Koch•13mo ago

I think I have seen a password field plugin from the author of the PR

ejat•13mo ago

i tried this, but this method only can show the password, but it cant hide back the password

ZedoX•13mo ago

Use $component->getType (could be a different method name), to first get the current type and then set the new type accordingly

ejat•13mo ago

Forms\Components\TextInput::make('password')->label('Password')
                            ->placeholder('Password')
                            ->type('password')
                            ->live()
                            ->suffixAction(
                                Forms\Components\Actions\Action::make('toggle-password-visibility')
                                    ->icon('heroicon-o-eye')
                                    ->iconSize('md')
                                    ->action(function ($component) {
                                        if ($component->gettype('password')) {
                                            $component->type('text');
                                        } else {
                                            $component->type('password');
                                        }
                                    })
                            )

Forms\Components\TextInput::make('password')->label('Password')
                            ->placeholder('Password')
                            ->type('password')
                            ->live()
                            ->suffixAction(
                                Forms\Components\Actions\Action::make('toggle-password-visibility')
                                    ->icon('heroicon-o-eye')
                                    ->iconSize('md')
                                    ->action(function ($component) {
                                        if ($component->gettype('password')) {
                                            $component->type('text');
                                        } else {
                                            $component->type('password');
                                        }
                                    })
                            )

i tried this, still same

ZedoX•13mo ago

Weird, why the value of getType() doesn't seem to be updated... Not the most ideal but you can have to actions, one to hide and one to show

Forms\Components\TextInput::make('password')->label('Password')
    ->placeholder('Password')
    ->type('password')
    ->live()
    ->suffixActions([
        Forms\Components\Actions\Action::make('toggle-password-visible')
            ->icon('heroicon-o-eye')
            ->iconSize('md')
            ->action(fn ($component) => $component->type('text')),

        Forms\Components\Actions\Action::make('toggle-password-invisible')
            ->icon('heroicon-o-eye-slash')
            ->iconSize('md')
            ->action(fn ($component) => $component->type('password'))
    ]),

Forms\Components\TextInput::make('password')->label('Password')
    ->placeholder('Password')
    ->type('password')
    ->live()
    ->suffixActions([
        Forms\Components\Actions\Action::make('toggle-password-visible')
            ->icon('heroicon-o-eye')
            ->iconSize('md')
            ->action(fn ($component) => $component->type('text')),

        Forms\Components\Actions\Action::make('toggle-password-invisible')
            ->icon('heroicon-o-eye-slash')
            ->iconSize('md')
            ->action(fn ($component) => $component->type('password'))
    ]),

Wbzy•13mo ago

https://github.com/phpsa/filament-password-reveal im using this package

GitHub

GitHub - phpsa/filament-password-reveal

Contribute to phpsa/filament-password-reveal development by creating an account on GitHub.

ejat•13mo ago

thank you for this package, its worked

Gaming

Programming

Option to show password field