F
Filament•16mo ago
wulfheart

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
toeknee•16mo 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
wulfheart
wulfheartOP•16mo ago
Thanks.
awcodes
awcodes•16mo 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');
          })
  ),
wulfheart
wulfheartOP•16mo 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
awcodes•16mo ago
Yes. But this is the easiest way to accomplish it. 🙂
Dennis Koch
Dennis Koch•16mo ago
I think I have seen a password field plugin from the author of the PR
ejat
ejat•16mo ago
i tried this, but this method only can show the password, but it cant hide back the password
ZedoX
ZedoX•16mo ago
Use $component->getType (could be a different method name), to first get the current type and then set the new type accordingly
ejat
ejat•16mo 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
ZedoX•16mo 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
Wbzy•16mo 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
ejat•16mo ago
thank you for this package, its worked

Did you find this page helpful?