Add a "show password" option on Source login

[sssoleileraaa]

Description

A source needs to type a long codename in order to log in. This can easily contain typos, maybe capslock is enabled, and currently there isn't a way to verify what is typed. The source interface login page should have a way to show/hide password (the eye icon is pretty standard now).

[ninavizz]

YES!!! This has been discussed in the past, just never formalized in an Issue. Thank you!! 😸

The SVG code for those icons are also on the Content Inventory Issue for the Workstation Client.

[ninavizz]

Wait @creviera I just realized—this is in the wrong repo, if it's for the Source interface it should be in the regular SecureDrop repo (I know, duh, and you were working late—heehee).

[ninavizz]

Flagging that JS should be disabled by sources, so whatever solution we use has to be non-JS-friendly (via @eloquence)

[ninavizz]

If it is not possible to do the standard pattern of all existing characters in a text field changing from redacted to visible via the clicking of the eyeball icon, I've whipped together the below as an alternate proposal:.

Default View upon loading (ignore the top bit wrt prior session)

...user clicks "Show Password" and the below hide/show div is revealed

Additional change notes:

• It's confusing to re-state a field name within the field, when the only other text on the screen is equivalent to a field label for that one field. For accessibility, it's also a best practice to avoid using hide/show text within fields, instead of field labels.
• Yeah, I wanna kill the button icons, too. 😁
• "Continue" button on this page is 3px taller than the "Cancel" button, which is strange.

[rmol]

I've tried a couple of JavaScript-free approaches. One, using a regular text input with a font where every glyph is a dot, runs afoul of the Tor browser's font handling. The second is uglier as it only shows a line for each character, but allows toggling the visibility of the input while still giving some feedback while typing. And it does use an external hide/show control. Here's the (hideous) proof of concept:

[ninavizz]

:((

Not "offended" by "ugliness," but the visual affordance users recognize and understand, is the dots. So: the issue is not a lack of elegance, but it's just not a recognizable pattern.

Might Arimo, Cousine, Tinos, or Liberation Sans have the dot font as an option? I looked on the Tor ticket, and those are compatible with Tor.

[rmol]

the visual affordance users recognize and understand, is the dots

Agreed. This is the closest approximation I've found. The text-emphasis property looked promising, but I can't get it to position correctly or consistently. I'm still looking for a CSS solution, but am not hopeful, so yeah, we should revisit the font approach.

For it to work, the chosen font has to contain dots in place of the actual characters. If we could somehow display arbitrary Unicode symbols for regular text with CSS, one of the bundled fonts with good Unicode coverage might work, but I haven't found a way to do that. There was an experimental text-replace property about ten years ago, which I'd guess was intended for replacing straight quotes with curly, that sort of thing, but it was dropped.

Since web fonts just don't work at all in the Safest security level, the font would need to be bundled with Tor Browser, and the dot font I found would add about 13k to the distribution. And it would have to be added for all platforms; this isn't a system font anywhere.

Given that the target audience is probably going to be interacting with things like SecureDrop, with long passphrases and no JavaScript, and the difficulty of implementing this usability enhancement without the font, I think it'd be a worthwhile addition.

One last note: the latest version of the dot font doesn't cover whitespace, to fix some problem in IE :roll_eyes:. We'd want the version before that was changed.

[ninavizz]

What does dotfont do with whitespace? The pattern for hiding passwords includes a dot for whitespaces (cough, in case I'm secsplaining to you, my apologies)... does it do the unicode-derp symbol instead, or just bonk the whole field?

[huertanix]

A show password option was implemented for journo and admin interfaces recently: #3713. We'll probably want to standardize around a design pattern for both.

[ninavizz]

@huertanix Newsrooms don't need to use Tor in SAFEST mode... hence, the challenges with this story. That said, I'm ALL for standardization... however if we have to do a horsey workaround to accommodate for the absence of Javascript, I'd (tentatively) rather keep the Newsroom UI patterns to global-standards if possible, to reduce cognitive load on our overworked journalist users.

How much do Journalists find themselves providing guidance to Sources in using SecureDrop—do y'all know?

[rmol]

@ninavizz When you type a space with the latest version of dotfont, you get a space. :slightly_frowning_face: That's what I was trying to say above -- it used to show dots, so if we ask for it to be bundled with Tor Browser, we'll want to make sure we use a fork from an older revision, which does show a dot for everything (more accurately, everything I've tested, but that hasn't been exhaustive -- just the usual punctuation -- so in fact we'll want to do some thorough evaluation to see if we need to do anything else to the font first).

[eloquence]

OK, I'm going to ask to stop further work on this for now (and especially external outreach); this is clearly more complex than anticipated. Let's discuss tomorrow whether it's something we want to prioritize in the next sprint. Thanks @rmol for the initial investigation and findings report. :)