Option to show password field

wulfheart · 2023-10-25T13:12:10.875Z

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

T

toeknee•10/25/23, 1:33 PM

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

W

wulfheartOP•10/25/23, 1:37 PM

Thanks.

A

awcodes•10/25/23, 3:58 PM

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');
          })
  ),

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');
          })
  ),

W

wulfheartOP•10/26/23, 8:03 AM

@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?

A

awcodes•10/26/23, 11:05 AM

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

D

Dennis Koch•10/26/23, 12:26 PM

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

Aawcodes ```php Forms\Components\TextInput::make('password') ->type('password') ->suf...

E

ejat•10/27/23, 4:14 AM

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

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

Z

ZedoX•10/27/23, 4:36 AM

Use

$component->getType

$component->getType

$component->getType

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

E

ejat•10/27/23, 4:38 AM

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');
                                        }
                                    })
                            )

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');
                                        }
                                    })
                            )

ZZedoX Use `$component->getType` (could be a different method name), to first get the c...

E

ejat•10/27/23, 4:39 AM

i tried this, still same

Z

ZedoX•10/27/23, 4:53 AM

Weird, why the value of getType() doesn't seem to be updated...

Z

ZedoX•10/27/23, 4:54 AM

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'))
    ]),

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'))
    ]),

W

Wbzy•10/27/23, 5:22 AM

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.

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

E

ejat•10/27/23, 6:47 AM

thank you for this package, its worked

Option to show password field

Similar Threads

Similar Threads

Similar Threads