UX issue with ghosted values in fields

[ccallawa]

Describe the bug

Grayed out (ghosted) text in fields can be interpreted either as defaults or examples.

To Reproduce

1. Go to Configuration > Modules > monitoring > Security
2. For "Protected Custom Variables", the "pw,pass,community" string is shown in gray if it has not been configured

Expected behavior

It should be more clear whether it is an example or a default. My suggestion in this case is that you should see "Ex: pw,pass,community" so the user knows it is an example. Without the "Ex:" it might be a default value.

Your Environment

• Icinga Web 2 2.6.2

[ccallawa]

Updates:

• The official documentation does not mention that the regex is case insensitive
• The phrase "string patterns" sounds like it's a regular expression, but it seems that * is the only operator available
• The standard definition of "Comma separated list" allows for optional spaces after the comma. If you use them here, they are included as part of the string pattern.

I think the above are important because if you are unaware of these limitations, the result is failure to hide a password, which is a security problem.

For the UX issue, I think you should use a tooltip like this attached screenshot to explain the details.

[lippserd]

Adding something like "Example: " to the placeholder absolutely makes sense.
But should we also change the styles of our placeholders @flourish86?

[1] Placeholder

[2] Real value

[flourish86]

Maybe setting placeholder in italics would help to distinguish it better from real values. If we do this globally for placeholders, this should be recognizable to users after some time.

Introducing a prefix like »Ex: « or »Example: « would require us to do that for every input placeholder for consistency reasons.

That would make input crowded views confusing. Users would get fatigued to read the placeholders because of the repetitive prefixes (esp. with the longer »Example: «.

I'd rather opt for a distinctive style (like grayed italics) for all input placeholders, which is consistent throughout the UI.