Hint please: Form item like a PasswordItem that toggles whether real value is visible.

[rodp]

I've been asked to create a form item which is similar to a PasswordItem but which can toggle between displaying the obscured value and displaying the real value. The default is the text is hidden but, if the user is editing the item, they can toggle to see what the value is and edit it as plain text. The usage is not for a password but for a key field which will be long so it will be easy to make a mistake when typing it.
I think creating a FormItemIcon is a neat way to provide the toggle switch but I haven't found a way to code the click event to show/obscure the value. Any hints would be appreciated.
In case it's not clear what I'm after, browsers have similar behaviour for showing stored passwords - the password is initially obscured but clicking an icon next to them reveals them.

Thank you.

[Isomorphic]

What we'd recommend for this case is either:

1. a CanvasItem that consists of a DynamicForm that has both a normal TextItem and a PasswordItem, and alternates which is visible, keeping the value synched between the two as they are hidden and shown

OR

2. a different UE: always use a PasswordItem and masked entry, but have a checkbox to control whether the typed-in value is also shown, read-only, below the Password input. Amazon and other sites use this approach for password entry on mobile, where users are likely to make mistakes.

[rodp]

I've taken the CanvasItem approach as that allows editing of the plain text value, but the Amazon approach was a good alternative. Thank you for your help.