Displaying and editing sensitive information (password, API keys, activation keys, ...)
Usage
- general pattern for saving sensitive information e.g. password, API key, activation key
- requires indication if a field is filled or empty
- allows a user to change the value
- forbids to expose a saved password
Typical usage is adding credentials to connect to another service.
DO USE
To allow a user to change the value and save sensitive information (e.g. password, API key, activation key).
DO NOT USE
For general login of Inspire applications, where user needs to enter a login verification.
User Flow
Submitting a Form
1. Default Empty Input
Input type: Password with placeholder.
2. Password Input
Input type: Password with an eye icon button for unmasking a password. When a user starts typing a password, the mask with 9 stars appears.
Editing a Form
3. Read-Only Text Input with Inline Edit
After submitting the form, input changes to read-only with a text button to change the password.
4. Changing Password
When a user clicks on the Change Password button, a default empty input type password appears, as in step 1, followed by step 2.
Default state
Attachments:
MicrosoftTeams-image (21).png (image/png)
MicrosoftTeams-image (21).png (image/png)
Frame.png (image/png)
image2020-4-14_11-52-24.png (image/png)
Frame (1).png (image/png)
Frame (2).png (image/png)
Frame (3).png (image/png)
Group 10.png (image/png)
Group 11.png (image/png)