F
Filamentβ€’3mo ago
TK

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
Dennis Kochβ€’3mo ago
I think the reveal icon is separate to the suffix icon so that doesn't work.
TK
TKβ€’3mo ago
@Dennis Koch I figured. It's an action. But can I mutate the color after an action has been defined?
Dennis Koch
Dennis Kochβ€’3mo ago
Not sure whether you can access it from the outside.
TK
TKβ€’3mo 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
Dennis Kochβ€’3mo 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),
]);
TK
TKβ€’3mo 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
Dennis Kochβ€’3mo ago
Yes. Check the source code of ->revealable(). It's pretty much the code I posted above.
TK
TKβ€’3mo 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
Dennis Kochβ€’3mo ago
Why aren't you using the prebuilt Show/HidePasswordActions?
TK
TKβ€’3mo ago
not working when wanting to change the icon and/or color
Dennis Koch
Dennis Kochβ€’3mo ago
ShowPasswordAction::make()->color(...) is not working?
TK
TKβ€’3mo ago
nope
Dennis Koch
Dennis Kochβ€’3mo ago
Hm. That's weird.
TK
TKβ€’3mo ago
I assume its because there is already ->color in that action
Dennis Koch
Dennis Kochβ€’3mo ago
The latter one should overwrite the first one
TK
TKβ€’3mo 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
Dennis Kochβ€’3mo ago
Yes. It's part of configure() which is called immediately after new ... inside make
TK
TKβ€’3mo 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
Dennis Kochβ€’3mo ago
And you can't call it directly because it's protected. I see.
TK
TKβ€’3mo ago
not the nicest solution, but yeah.. thanks for your input and time πŸ‘
Dennis Koch
Dennis Kochβ€’3mo ago
You are welcome
TK
TKβ€’3mo 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;
};
}