"Reveal Password" functionality #84

lmorchard · 2019-02-21T21:26:10Z

New PasswordText widget with hide/show buttons
Tweak hide/show and copy button alignments
Smaller PASSWORD_DOT
Replace hide / show eye icons

Fixes #20

Testing and Review Notes

Viewing an entry should now allow show / hide of password and not just simple dots
Show / hide button should no longer shift position on editing view

To Do

"long password" case does not grow wider in item view, exploring a solution

lmorchard

Calling out a few different points of interest, mainly about my shaky CSS-fu.

lmorchard · 2019-02-21T21:37:03Z

src/widgets/password-text.js

+
+import styles from "./input.css";
+
+const PASSWORD_DOT = "\u2022";


This unicode char "•" more closely matches the Zeplin mock - but the previous value "●" more closely matches the built-in password field dots. This is easy to switch back if we want.

lmorchard · 2019-02-21T21:37:03Z

src/widgets/password-text.js

+    return (
+      <div {...props} className={classNames([
+        styles.monospace,
+        styles.passwordText,


Two issues I ran into here, trying to handle a "long password" case here:

How long is long? (e.g. 15 characters?) We could possibly switch a classname on value length

The whole form is on a shared CSS grid, with the copy buttons aligned. Breaking that alignment calls for a different overall layout for the form, I think? My CSS-fu fails me here.

@mozilla-lockbox/ux some insights here would be helpful

1. How long is long? (e.g. 15 characters?) We could possibly switch a classname on value length

I would start with 15 or 20 personally, too

2. The whole form is on a shared CSS grid, with the copy buttons aligned. Breaking that alignment calls for a different overall layout for the form, I think? My CSS-fu fails me here.

I think the intent of the designs is for the reveal button to be adjacent to the password text, which means it's position could shift based on how long the value is.

To keep the reveal in a fixed spot, I think you're right that it would require changing the CSS grid column count.

Well, I've got the reveal button sitting at the end of the text, which seems to match the spec. It's the unaligned copy button and expanding the width of the field that seems a problem

sorry, I was misunderstanding completely! And it looks like the UX questions are worked out.

lmorchard · 2019-02-21T21:37:03Z

src/widgets/input.css

  background-repeat: no-repeat;
  background-size: 16px 16px;
+  background-position: 0 2px;


This is kind of arbitrary, but seems to get the show/hide icon better aligned with the dots and midpoint of text. Might be worth yanking out.

lmorchard · 2019-02-21T21:37:03Z

src/widgets/input.css

+}
+
+.password-text {
+  width: 136px;


I copied a lot of these properties straight from Zeplin - some of it seems redundant and could probably get scrubbed out.

lmorchard · 2019-02-21T21:37:03Z

src/icons/hide.svg

-    <path fill="#6D6D6E" d="M14.0160542,0.675736079 C14.3979633,1.05764518 14.3979633,1.67684218 14.0160542,2.05875128 L2.95193261,13.1228729 C2.5700235,13.504782 1.95082651,13.504782 1.56891741,13.1228729 C1.1870083,12.7409638 1.1870083,12.1217668 1.56891741,11.7398577 L12.633039,0.675736079 C13.0149481,0.293826977 13.6341451,0.293826977 14.0160542,0.675736079 Z"/>
-    <path fill="#6D6D6E" d="M9.60800171,4.46955872 C9.1423119,4.17216421 8.59352469,4 8,4 C6.34314575,4 5,5.34314575 5,7 C5,7.5968592 5.1629633,8.14651554 5.46343994,8.61383057 L9.60800171,4.46955872 Z"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">


Could probably run some optimization on these SVGs, but I just copied them out of the Zeplin mock

lmorchard · 2019-02-21T21:39:05Z

Doh. Broke a handful of unit tests - handling that right now.

lmorchard · 2019-02-21T21:52:40Z

src/widgets/copy-to-clipboard-button.js

@@ -65,19 +63,18 @@ export default class CopyToClipboardButton extends React.Component {
        </Localized>
      );
    }
-    return (
-      <Stack stretch selectedIndex={selectedIndex} className={className}>


Oh yeah, and I meant to mention in my earlier comments that I found some of the CSS stuff a bit easier after dropping the Stack component (which was the main cause of the failed unit tests, so that reminded me)

- New PasswordText widget with hide/show buttons - Tweak hide/show and copy button alignments - Smaller PASSWORD_DOT - Replace hide / show eye icons Fixes #20

nickbrandt · 2019-02-22T18:28:53Z

After a discussion with @lmorchard regarding following our grid layout with the copy buttons, we have decided to move forward with the copy actions all staying aligned, even when one field is longer than the rest. The designs have been updated to reflect this.

linuxwolf

r+

Looks good to me.

lmorchard requested a review from mozilla-lockwise/desktop-engineering as a code owner Feb 21, 2019

ghost assigned lmorchard Feb 21, 2019

ghost added the in progress label Feb 21, 2019

lmorchard force-pushed the lmorchard:20-reveal-password branch from 0074c9b to 85c5e33 Feb 21, 2019

lmorchard reviewed Feb 21, 2019

View changes

lmorchard force-pushed the lmorchard:20-reveal-password branch from 85c5e33 to fe3b64a Feb 21, 2019

lmorchard reviewed Feb 21, 2019

View changes

"Reveal Password" functionality

6c9457b

- New PasswordText widget with hide/show buttons - Tweak hide/show and copy button alignments - Smaller PASSWORD_DOT - Replace hide / show eye icons Fixes #20

lmorchard force-pushed the lmorchard:20-reveal-password branch from fe3b64a to 6c9457b Feb 22, 2019

linuxwolf approved these changes Feb 22, 2019

View changes

ghost removed the in progress label Feb 22, 2019

linuxwolf mentioned this pull request Apr 23, 2019

Reveal password icon is misaligned #52

Closed

mozilla-lockwise / lockwise-addon

"Reveal Password" functionality #84

"Reveal Password" functionality #84

lmorchard commented Feb 21, 2019

lmorchard left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

lmorchard commented Feb 21, 2019

This comment has been minimized.

nickbrandt commented Feb 22, 2019 •

edited

linuxwolf left a comment


		import styles from "./input.css";

		const PASSWORD_DOT = "\u2022";

mozilla-lockwise / lockwise-addon

"Reveal Password" functionality #84

"Reveal Password" functionality #84

Conversation

lmorchard commented Feb 21, 2019

Testing and Review Notes

To Do

lmorchard left a comment

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

This comment has been minimized.

linuxwolf Feb 22, 2019 Contributor

This comment has been minimized.

lmorchard Feb 22, 2019 Author Contributor

This comment has been minimized.

linuxwolf Feb 22, 2019 Contributor

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

lmorchard commented Feb 21, 2019

This comment has been minimized.

lmorchard Feb 21, 2019 Author Contributor

nickbrandt commented Feb 22, 2019 • edited

linuxwolf left a comment

lmorchard Feb 21, 2019
Author Contributor

lmorchard Feb 21, 2019
Author Contributor

linuxwolf Feb 22, 2019
Contributor

lmorchard Feb 22, 2019
Author Contributor

linuxwolf Feb 22, 2019
Contributor

lmorchard Feb 21, 2019
Author Contributor

lmorchard Feb 21, 2019
Author Contributor

lmorchard Feb 21, 2019
Author Contributor

lmorchard Feb 21, 2019
Author Contributor

nickbrandt commented Feb 22, 2019 •

edited