VladPolskiy/webmin
1
0
Fork 0
mirror of https://github.com/webmin/webmin.git synced 2025-07-20 16:48:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add UI API to mask sensitive text unless specifically hovered

Browse Source
This commit is contained in:
Ilia Ross
2025-06-18 16:53:55 +03:00
parent 01867c86e0
commit 7c05368e8f
3 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WebminCore.pm
View File

File diff suppressed because one or more lines are too long

2
mysql/root_form.cgi
View File

@ -18,7 +18,7 @@ else {
$mysql_login ? "<tt>$mysql_login</tt>"
: "<label>$text{'root_auto'}</label>");
print &ui_table_row($text{'root_pass'},
$mysql_pass ? "<tt>$mysql_pass</tt>"
$mysql_pass ? "<tt>".&ui_text_mask($mysql_pass)."</tt>"
: &ui_text_color($text{'root_none'}, 'danger'));
print &ui_table_row($text{'root_newpass1'},
&ui_password("newpass1", undef, 20));

51
ui-lib.pl
View File

@ -3760,5 +3760,56 @@ my ($content, $attrs) = @_;
return ui_tag('p', $content, $attrs);
}
=head2 ui_text_mask(text, [tag], [extra_class])
Returns an HTML string with the given text hidden inside a tag that only shows
on hover. If a second parameter is given, it is used as the outer tag that
triggers the hover (default is "td"). If a third parameter is provided,
it is added as an extra class to both the tag and its style.
=cut
sub ui_text_mask
{
return &theme_ui_text_mask(@_) if (defined(&theme_ui_text_mask));
my ($text, $tag, $extra_class) = @_;
my $class = 'hover-mask';
my $classcss = ".$class";
if ($extra_class) {
$class .= " $extra_class";
$classcss .= ".$extra_class";
}
$tag ||= 'td';
my $style_content = <<"CSS";
x-ui-text-mask${classcss} {
position: relative;
display: inline-block;
color: transparent;
transition:color .25s ease;
}
x-ui-text-mask${classcss}::after{
content: attr(data-mask);
position: absolute;
inset: 0;
color: var(--ui-password-mask-color, #000);
pointer-events: none;
transition: opacity .25s ease;
}
$tag:has(>*>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss},
$tag:has(>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}{
color: inherit;
}
$tag:has(>*>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}::after,
$tag:has(>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}::after{
opacity: 0;
}
CSS
my $rv = '';
$rv .= &ui_tag('style', $style_content, { type => 'text/css' })
if (!$main::ui_text_mask_donecss->{"$tag$class"}++);
$rv .= &ui_tag('x-ui-text-mask', $text,
{ 'class' => $class, 'data-mask' => '••••••••' });
return $rv;
}
1;