Allow editing in input_copy_toggle_visibility

What does this MR do and why?

Extends the shared input_copy_toggle_visibility component to allow editing with a new readonly prop.

Makes the new readonly prop false by default, and updates all current usages of the component to preserve current behaviour.

This change is split out from larger MR here: !121343 (merged)

Screenshots or screen recordings

Before	After

Empty value behaviour

Previously, if the input had no value, it would default to showing 20x **********

Now, if there is no value, it will show an empty input instead. This is so that editable inputs can specify a standard placeholder attribute and have that show up.

Before	After

New behaviour when component is in new editable mode:

Input is not "grayed out" when editable, as it no longer has "readonly" attribute applied:

Value becomes visible when clicking into the component:

Note that the position that was clicked is preserved after the value is revealed, your cursor is not jumped to the end. This also works with selections.

After editing, the right number of *** are used when hiding again:

Focusing via keyboard does not reveal the value. User will need to tab to the reveal button and select it

How to set up and validate locally

• Verify the shared component still works as expected in existing places in the app, are still readonly e.g.:
• user -> preferences -> access tokens -> feed tokens
• user -> preferences -> access tokens -> new access token
• user -> preferences -> applications -> new -> secret

New editable behaviour not yet used anywhere, but can be verified in Storybook.

• From your gitlab directory, cd storybook && yarn start
• Wait for Storybook to launch, browse to the component
• Verify non-readonly behaviour

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #408755