Filament•7mo ago

Change color of reveal password icon

How to change the color of the 'reveal password' icon? Simply calling ->suffixIconColor(...) after ->revealable() does not work. Not sure if this is a bug or not. Anyone got an idea on how to fix this?

22 Replies

Dennis Koch•7mo ago

I think the reveal icon is separate to the suffix icon so that doesn't work.

TKOP•7mo ago

@Dennis Koch I figured. It's an action. But can I mutate the color after an action has been defined?

Dennis Koch•7mo ago

Not sure whether you can access it from the outside.

TKOP•7mo ago

Just looking for a way to gain control over this icon... color/change it/etc.. Can I override the icon itself and leaving the action intact?

Dennis Koch•7mo ago

Just looking at the code: You can try to set the actions manually:

$this->suffixActions([
  TextInput\Actions\ShowPasswordAction::make()->visible($condition),
  TextInput\Actions\HidePasswordAction::make()->visible($condition),
]);

$this->suffixActions([
  TextInput\Actions\ShowPasswordAction::make()->visible($condition),
  TextInput\Actions\HidePasswordAction::make()->visible($condition),
]);

TKOP•7mo ago

@Dennis Koch you mean not using ->revealable() but just copy the action of reveable and use it manually, and then change the icon color? Guess that's a way to do it. Maybe a good idea to put this on the roadmap "gain more control over password revealable"?

Dennis Koch•7mo ago

Yes. Check the source code of ->revealable(). It's pretty much the code I posted above.

TKOP•7mo ago

yeah I saw it.. was trying to prevent that, but for now ill do it like that

/**
 * @mixin TextInput
 */
class TextInputMixin
{
    public function revealablePasswordAction()
    {
        return function (string $fieldIconColor) {
            $this->isRevealable = true;

            $this->suffixActions([
                Action::make('showPassword')
                      ->icon('heroicon-m-eye')
                      ->color(Color::hex($fieldIconColor))
                      ->defaultView(StaticAction::BUTTON_VIEW)
                      ->extraAttributes([
                          'x-show' => '! isPasswordRevealed',
                      ], merge: true)
                      ->alpineClickHandler('isPasswordRevealed = true')
                ,
                Action::make('hidePassword')
                      ->icon('heroicon-m-eye-slash')
                      ->color(Color::hex($fieldIconColor))
                      ->defaultView(StaticAction::BUTTON_VIEW)
                      ->extraAttributes([
                          'x-cloak' => true,
                          'x-show'  => 'isPasswordRevealed',
                      ], merge: true)
                      ->alpineClickHandler('isPasswordRevealed = false')
                ,
            ]);

            return $this;
        };
    }
}

/**
 * @mixin TextInput
 */
class TextInputMixin
{
    public function revealablePasswordAction()
    {
        return function (string $fieldIconColor) {
            $this->isRevealable = true;

            $this->suffixActions([
                Action::make('showPassword')
                      ->icon('heroicon-m-eye')
                      ->color(Color::hex($fieldIconColor))
                      ->defaultView(StaticAction::BUTTON_VIEW)
                      ->extraAttributes([
                          'x-show' => '! isPasswordRevealed',
                      ], merge: true)
                      ->alpineClickHandler('isPasswordRevealed = true')
                ,
                Action::make('hidePassword')
                      ->icon('heroicon-m-eye-slash')
                      ->color(Color::hex($fieldIconColor))
                      ->defaultView(StaticAction::BUTTON_VIEW)
                      ->extraAttributes([
                          'x-cloak' => true,
                          'x-show'  => 'isPasswordRevealed',
                      ], merge: true)
                      ->alpineClickHandler('isPasswordRevealed = false')
                ,
            ]);

            return $this;
        };
    }
}

@Dennis Koch made a mixin.. this works fine! One thing though, $this->isRevealable is protected. It works fine, but it isn't nice. I suggest making this public.

Dennis Koch•7mo ago

Why aren't you using the prebuilt Show/HidePasswordActions?

TKOP•7mo ago

not working when wanting to change the icon and/or color

Dennis Koch•7mo ago

ShowPasswordAction::make()->color(...) is not working?

TKOP•7mo ago

nope

Dennis Koch•7mo ago

Hm. That's weird.

TKOP•7mo ago

I assume its because there is already ->color in that action

Dennis Koch•7mo ago

The latter one should overwrite the first one

TKOP•7mo ago

Thats what I tought, but for some reason it doesnt it actually removes the icon completely are you sure setup() is being called when we use TextInput\Actions\ShowPasswordAction::make()

Dennis Koch•7mo ago

Yes. It's part of configure() which is called immediately after new ... inside make

TKOP•7mo ago

this is the problem with your solution:

$this->extraAttributes([
    'x-show' => '! isPasswordRevealed',
], merge: true);

$this->extraAttributes([
    'x-show' => '! isPasswordRevealed',
], merge: true);

its correct, but its now hiding the icon with your solution $this->isRevealable = true isnt called because that lives in the ->revealable()

    public function revealable(bool | Closure $condition = true): static
    {
        $this->isRevealable = $condition;
        $this->suffixActions([
            TextInput\Actions\ShowPasswordAction::make()->visible($condition),
            TextInput\Actions\HidePasswordAction::make()->visible($condition),
        ]);

        return $this;
    }

    public function revealable(bool | Closure $condition = true): static
    {
        $this->isRevealable = $condition;
        $this->suffixActions([
            TextInput\Actions\ShowPasswordAction::make()->visible($condition),
            TextInput\Actions\HidePasswordAction::make()->visible($condition),
        ]);

        return $this;
    }

got it working now.. like you said, the latter overwrites the previous, so you should do:

->revealable()
->suffixActions([
    TextInput\Actions\ShowPasswordAction::make()->color('red'),
    TextInput\Actions\HidePasswordAction::make()->color('red'),
])

->revealable()
->suffixActions([
    TextInput\Actions\ShowPasswordAction::make()->color('red'),
    TextInput\Actions\HidePasswordAction::make()->color('red'),
])

Dennis Koch•7mo ago

And you can't call it directly because it's protected. I see.

TKOP•7mo ago

not the nicest solution, but yeah.. thanks for your input and time 👍

Dennis Koch•7mo ago

You are welcome

TKOP•7mo ago

@Dennis Koch still like making a mixin for it:

    public function revealablePassword()
    {
        return function (string $fieldIconColor) {      
            $this->revealable()
                 ->suffixActions([
                     TextInput\Actions\ShowPasswordAction::make()->color(Color::hex($fieldIconColor)),
                     TextInput\Actions\HidePasswordAction::make()->color(Color::hex($fieldIconColor)),
                 ]);

            return $this;
        };
    }

    public function revealablePassword()
    {
        return function (string $fieldIconColor) {      
            $this->revealable()
                 ->suffixActions([
                     TextInput\Actions\ShowPasswordAction::make()->color(Color::hex($fieldIconColor)),
                     TextInput\Actions\HidePasswordAction::make()->color(Color::hex($fieldIconColor)),
                 ]);

            return $this;
        };
    }

Gaming

Programming

Change color of reveal password icon