nextcloud-libraries
[DESIGN] Design and add copy value field
Current design
- We have a new copy value button design introduced in: https://github.com/nextcloud-libraries/nextcloud-vue/issues/7124
Issues
- It always shows the value
- It cannot be used to sensitive data like passwords, tokens, keys
- Only acts as a button for action without the raw value
- Not possible to select and copy the value manually
- No good fallback in the context without clipboard access
Classic design + alternatives (custom, different in every place)
- Allows manually selecting and copying the value
- Allows hiding the value as a password
cc @kra-mo
Not possible to select and copy the value manually No good fallback in the context without clipboard access
Here, my question would be: Can we know whether we have access to the clipboard beforehand or is that something that we can only try and can fail?
If we know it ahead of time, I would make it so that if there is no access to the clipboard, the value is selectable, the clipboard icon is not shown, and when the button is clicked, just select the content allowing the user to right-click and copy.
If we can only know it once we try to copy and it fails, once it does, I would present a dialog containing something like:
Copying failed
Clipboard access denied. Copy the following text manually.
{value}
Done
It always shows the value It cannot be used to sensitive data like passwords, tokens, keys
This is a bit more tricky. One possible solution would be:
If the data is sensitive, show an eye instead to reveal it. Once it is revealed, then replace the eye with a copy button. Once the user copies it, then hide the value, and after a bit, show the eye again. So basically:
••••••••••• 👁️
Click ↓
password123 📑
Click ↓
••••••••••• ✔️
Timeout ↓
••••••••••• 👁️
Or to be able to copy it without revealing it (although this would probably be less clear, but maybe not that bad since it is presumably safer):
••••••••••• 📑
Click ↓
Copied. Click to reveal. 👁️
Click ↓
password123 🫣
Click ↓
••••••••••• 📑
A harder, but probably more expected one would be a split design:
An easier way to do it would be with just two buttons:
But this would require a separate box for each piece of sensitive data.
Yet another is to not give the user the option to show the sensitive data at all, only allowing for copy. Then they would need somewhere to paste it to be able to view it.
Can we know whether we have access to the clipboard beforehand or is that something that we can only try and can fail?
In most of the cases: yes - when protocol is http.
In a general case: no - it can be blocked by user browser settings or some other user-specific edge case.
If we can only know it once we try to copy and it fails, once it does, I would present a dialog
Doable, but it would be good to avoid user flow blocking and complex solutions.
Having no clipboard access is an edge case, and having a workaround large than the original solution seems too overhead.
If the data is sensitive, show an eye instead to reveal it.
That is what we have in the old design with the password fields (a custom example on the second screenshot).
Another would be a split design An easier way to do it would be with just two buttons:
Looks good, but it is basically implementing a new design for the password field in addition 🥲