F
Filament•2y 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•2y 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•2y ago
Thanks.
awcodes
awcodes•2y 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•2y 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•2y ago
Yes. But this is the easiest way to accomplish it. 🙂
Dennis Koch
Dennis Koch•2y ago
I think I have seen a password field plugin from the author of the PR
ejat
ejat•2y ago
i tried this, but this method only can show the password, but it cant hide back the password
ZedoX
ZedoX•2y 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•2y 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•2y 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•2y 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•2y ago
thank you for this package, its worked

Did you find this page helpful?