Webhook encrypted tokens: UX
Problem
See parent epic: &7970 (closed) When adding a webhook URL, the URL can contain pieces of information that are sensitive and should be encrypted and masked for security reasons. The user should be able to select those sensitive portions of a URL and mark them to be masked in the UI.
Historical design work
There was a proposal to allow for custom header fields where the user would input a key and value to be masked. However, that solution needed to be made more generic. See more information: #361582 (comment 1033168001)
Design proposal
Note: the UI copy in the loom videos has been updated since the videos were made. For all UI copy, refer to the Figma file.
-
🎥 25 second demo: setting up masking -
🎥 21 second demo: editing masking -
🎨 Figma prototype: setting up masking -
🎨 Figma prototype: editing masking -
🖌 Figma file
Logic
- Leaving the right side of the form field blank indicates that the value does not need to be masked
- User can add additional free text pieces of the URL should that should be masked
- When the user enters something in the right column of the form, and then the input loses focus, the read-only preview of the URL updates
- When editing, the previous masked values are hidden by ····· in disabled input.
Edited by Katie Macoy