I want components that responds to a users security level. If they are unauthenticated red background, no write permissions, and disabled. Looking into style classes / element states I found two that are undocumented. What do the “required” and “valid” states monitor? Any additional insight on this and styling on security would be helpful.
Two things before we start:
- Style/theming is one aspect of your request.
- Preventing interaction is something else.
The best option here is to have a Style Class for each possible state you expect a user could have. If we assume that you’ll only ever need either authenticated or not-authenticated, then we can continue as if no extra styling is “authenticated”, which means we only need to worry about not-authenticated. Let’s make a new Perspective Named Style named “RequiresAuth”.
Styling:
Within the RequiresAuth named style, supply all of the appearance changes you want someone who is not authenticated to see.
Bind ComponentX.props.style.classes with an expression binding: if(len({session.props.auth.user.userName}) > 0, "", "RequiresAuth"). Note that this expression is on classes - not style; also, if you already have classes attached to this component, you should supply those instead of the empty string.
Permissions:
Every input component should have some sort of enabled property. You’ll want to bind this property against a similar expression: len({session.props.auth.user.userName}) > 0. Now, if a user is not logged in, they are unable to interact with the input.
Styling
First, is there any benefit to using the ‘session.props.auth.user.username’ vs. ‘session.props.auth.authentiated’?
Second, style classes can only be applied to components on a view. When does a “required” or “valid” element state play its part?
Permissions
That makes sense.
Nope, I just forgot that property was there, and the example I pulled from was actually checking for usernames so it was an easy copy/paste.
These only come into play if you've configured the web element in the DOM to be required, or you've marked it as valid, neither of which is possible in Perspective short of incredibly niche and heavy-handed one off custom theming.
No need for red background. Be subtle, man. Be subtle!
Most GUIs change disabled controls to light grey or some themed style with lower contrast than an enabled control. Red means "danger" and there is no danger if the control is disabled. Good design will be consistent with what your users are used to on well designed websites. Use of color should be judicious, themed and consistent. Your users will appreciate the lower burden on their visual cortex and will soon learn to interpret the screen. You will also look more professional.
5 Likes