UI mocks for masking paste input

[jotaen4tinypilot]

Related https://github.com/tiny-pilot/tinypilot/issues/1739.

This PR demonstrates a few potential approaches regarding the UI of masking paste input.

Note that this branch contains functional mock-ups, which don’t work 100% correctly yet. You can ignore the code completely for now. The localhost URLs below refer to this branch, which contains feature toggles that respond to the variant query param.

[invisible] Making the text invisible

http://localhost:8000/?goto=paste-dialog&variant=invisible

https://github.com/tiny-pilot/tinypilot/assets/83721279/8a4ed35c-f542-464a-b7f1-d0bce13963ee

[asterisk] Substituting with asterisks

http://localhost:8000/?goto=paste-dialog&variant=asterisk

https://github.com/tiny-pilot/tinypilot/assets/83721279/9df28286-6ad1-464f-97e6-c7486119ab79

[hidden] Hiding the text altogether

http://localhost:8000/?goto=paste-dialog&variant=hidden

https://github.com/tiny-pilot/tinypilot/assets/83721279/18255821-abbd-4573-bfe1-6c9c35062d05

Discussion

What I like about [asterisk] is that you have full feedback when you type in. This is also somewhat true for [invisible], because at least the cursor moves while you type, and you can verify your input by selecting all text. With [hidden], you don’t have any feedback at all (like with a password prompt on the terminal), which feels strange to me.

With [hidden], it’s impossible to tell whether the input box is empty or not. For [invisible], it’s possible but potentially cumbersome, since you have to select all text first. I think this might cause subtle yet annoying usability issues.

[hidden] and [invisible] allow for a maximum of security, because they don’t give away the info how long the input text is.

My personal preference is [asterisk] – I think it’s a good compromise between usability and security.

Thoughts, @mtlynch?

[mtlynch]

My personal preference is [asterisk] – I think it’s a good compromise between usability and security.

Yeah, agree. I anticipate users mainly using this for passwords, so it's a familiar experience to passwords.

[jotaen4tinypilot]

I’ve encountered one obstacle with the “asterisk” technique, unfortunately: if we naively substitute all characters of the copy with asterisks, then the copy itself of course ends up only consisting of asterisks – so the original copy is lost. I don’t think it’s trivially possible to display asterisks in the text field while still preserving a shadow copy of the original text. (This is because the user cannot just type in new text, but they can also backspace, move the cursor, select and replace text, paste, etc.)

I’ve researched and experimented with different approaches, and found one workaround that would look viable to me, albeit not as elegant as asterisks admittedly:

https://github.com/tiny-pilot/tinypilot/assets/83721279/60ee7899-3dde-48de-98ef-063da62910e1

This basically uses a line-through text decoration (~technically like this~), and sets the stroke width to be equal to the line height. The appearance is reminiscent of redacted text in confidential documents. It still allows for all usual text operations, and since it’s merely styling, it doesn’t touch the actual text on a “logical” level. Toggling “Mask Input” on and off is simply applying and un-applying a few CSS rules.

Alternatives would be to try to blur the text to make it unreadable, but I found that rather tricky, because (a) it looks quite weird and is hard to work with, and (b) it might only be pseudo-safe, since the degree to which blurred or pixelated text can be restored from e.g. a photo or screenshot is quite astonishing.

If we are good with the proposed UI, I could break up this draft PR into separate ones.

[mtlynch]

The redacted text looks fine, so I'm good with that.

Is it an option to use <input type="password">?

[jotaen4tinypilot]

Is it an option to use <input type="password">?

I’m not sure, because we would lose multiline capabilities then. Unfortunately, neither does <input type="..."> support multiline values, nor is there something like <textarea type="password">.

While I’d suspect that many people use the paste feature for passwords or other shorter snippets, we also put in some effort into supporting larger texts, for which multiline has better UX.

[mtlynch]

Ah, in that case, I think the most recent line-through solution sounds best.

Related: "CIA Realizes It's Been Using Black Highlighters All These Years"

[jotaen4tinypilot]

Superseded by https://github.com/tiny-pilot/tinypilot/pull/1764 and friends (https://github.com/tiny-pilot/tinypilot/pull/1765, https://github.com/tiny-pilot/tinypilot/pull/1766).