Improve styling of password advice #607
Comments
|
Note that this extra margin should only apply on desktop (the sideview), not on the mobile view. |
|
@shane-tomlinson Seeing how this disappears so abruptly on blur makes me think this design could be improved. Any opinions? |
Can you post a screencap? The password balloon should only go away if the password doesn't match one of the criterion. Once the password becomes valid, the balloon goes away after I think it's 1.5 seconds.
|
Use a font weight of 300, add a 21px margin between the list items and the first "lock" item. fixes #6448
Use a font weight of 300, add a 21px margin between the list items and the first "lock" item. fixes #6448
|
@shane-tomlinson Did extra padding get added above the top line? |
|
@shane-tomlinson I just worry that user will not get a chance to read the 🔒 bullet points as they'll be satisfying the others. What's the URL again? Perhaps I can run this through user testing. Oh, also are we measuring password strength again? Did you dust off the bloom filter? Would be cool to see if password complexity improved meaningfully. |
That screen cap was taken prematurely, here's a better one:
https://accounts.firefox.com?service=sync&action=email, then use a mozilla.com email
We are not measuring password strength, logging password strength would enable attackers who have access to our logs to know which accounts would be the easiest to brute force. |
|
@shane-tomlinson How's this? Remove the headline, and put the first 🔒 icon at the top. |
|
@ryanfeeley You had also proposed to make the "Repeat" field un-editable until the first password met requirements. Did you still want to do that too? Lastly, do we believe that this copy is relevant for people registering on AMO or Discourse? Should we call out "Sync data"? |
We realized that it can automatically go away when both passwords match. Seemed like a better design than requiring an extra step.
Yes, my instructions above mention "enabling" the repeat password field, I should have called out that it was disabled to begin with. I forget if we have a disabled field style. Do we @shane-tomlinson ?
It also includes local Lockbox data… maybe I can rewrite more generically following @MeridelW’s copy here: mozilla/fxa-content-server#6213 (comment) |
|
@shane-tomlinson Great news, Michelle is in town and we had a minute to go over a new design with much more concise copy! Here it is!
And then the original second 🔒 point
|
|
@shane-tomlinson Tiny detail. The ' in don’t should be a curly apostrophe. |
|
Remember this password — it encrypts your data! If forgotten you will lose access to Sync data. |
|
@shane-tomlinson @ryanfeeley what remains to be done for this bug? |
all of the suggestions from here down. |
|
from mtg: @shane-tomlinson should we move this to train-127? |
|
Thanks @ryanfeeley for the link! |
Really, this is blocked until #6572 and #6573 are fixed. 127 might be too ambitious with other things going on. Putting into blocked. |
|
from mtg: still blocked on change password |
1 similar comment
|
from mtg: still blocked on change password |
|
@shane-tomlinson Can we at least have the updated copy reflected inside the first bubble? A much better use of space, especially on the cramped change password section. Current: Proposed: |
|
This is a carryover from past quarters. We know it leads to less password resets which is a good thing. Seems to me that updating both bubbles is low hanging fruit. |
We can update the first bubble, but we don't yet have the 2nd bubble. Now that all of signup/change_password/reset_password all have the password strength advice, we should be able to add the 2nd bubble with relatively minimal fuss. As an interim step, we could pretty easily update the first bubble to @ryanfeeley's proposal and add the 2nd bubble as a 2nd step. |
|
My concern with not doing them both at the same time is that we would be removing any mention of why it's important to remember the password. There would no longer be a mention that a password reset has the potential of losing data. |
|
Starting to take a look at this issue as a baby step into FxA. Something I noticed that seems confusing - possibly because I don't have all the UX context yet: With "email-first" sign-up flow ( Sign-up flow without email-first ( Should both of these flows use the same bubble - and thus both updated as requested here? |
|
Hi @lmorchard I think it's only an issue of the engineering being incomplete. Feel free to finish it! In fact, both of those are deprecated. The latest last updated mid-December is here: https://mozilla.invisionapp.com/share/5UM3J3TXWMR#/316338169_Artboard |
|
Note, any implementation will need to take mobile into account where the vpassword bubble will display above or below the vpassword field, ensuring we do not obscure the submit button. |
|
As designed, the message on the password field disappears when the requirements are met, and the message on the repeat password field disappears once the passwords match. https://mozilla.invisionapp.com/share/5UM3J3TXWMR#/316338169_Artboard |
|
@dannycoates - Can this be closed with the merge of #2404? |
|
With Danny's PR mentioned above, will you comment back here with any remaining changes? This issue is quite old and seeing as we've standardized Trailhead styles/flow, I'm not sure any work remains here. |
|
@LZoog the desired design is here https://mozilla.invisionapp.com/share/5UM3J3TXWMR#/screens/316338169_Artboard Would love your eyes on making this this is durable (can survive switching between fields). |
|
@ryanfeeley it looks like all we lack here is updated copy + the key image for the "repeat password" popup in desktop, and then to make the "repeat password" popup occur in mobile. But I'll need you to elaborate on making the pop up persist between switching fields - we hide the first password input popup after all of the stipulations are met, and then hide the "repeat password" pop up after the user places focus on something else...
Which one are you suggesting should stay when switching fields? |
|
Related? |
|
@LZoog Thinking out loud (in the worst possible place) … Simply because the user has satisfied the minimum requirements, it doesn't mean they are done creating their password. Once the requirements are met, we could do a few things: A1. Disappear the first bubble as we do today In terms of the Repeat password field, we could: B1. Keep it enable always like today The tricky part is that removing characters from the first field could prevent the user from meeting the minimum requirements, so that has to work as well. @LZoog How do you feel about A2 +B2? |
We are certainly considering that |
|
@ryanfeeley I like A2 as well. It looks like @shane-tomlinson grabbed #3051, I'll make a comment over there regarding B2. |
|
@LZoog Realizing that keeping the bubble until blur on mobile is a bad idea, because it prevents you from blurring. I'm not averse to treating mobile differently. |
|
@LZoog Note from meeting to return focus to last focused password field after 👁 is toggled on. |
|
Sounds like the fix for this issue should include:
|
feat(content-server): Improve password advice functionality
I started my own PR here, but didn’t find an elegant way to fix this, and didn't want to just hack it in. The password advice list items should only be 300 font weight, with 21px margin below the first section (as opposed to 7px). Reads more easily, don't you think @shane-tomlinson ?
Current
Proposed
┆Issue is synchronized with this Jira Task
┆Issue Number: FXA-743
The text was updated successfully, but these errors were encountered: