task(settings): Display password requirements inline #17605
Conversation
|
Just responding to the additional comments about the jumpy experience for now - @LZoog had brought this up in design reviews a long time ago, and UX team at the time had said the experience would be okay. Seeing it in action and with different team members on board now the decision might be different. At some point there had been exploration done on removing the confirm password field but that option had been tabled - if we wanted to revisit this, we could consider having the password requirements always shown and the "passwords do not match" error would not come up. From what I recall, there is some research in the UX industry showing that the password confirmation field is not needed if the user has the option of viewing their entered password. |
| @@ -0,0 +1,20 @@ | |||
| ## FormPasswordInline | |||
There was a problem hiding this comment.
Should this be FormPasswordInlineCriteria?
|
|
||
| import React from 'react'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import FormPasswordInline, { PasswordFormType } from '.'; |
There was a problem hiding this comment.
nit: Looks like this exports FormPasswordWithInlineCriteria
| decorators: [withLocalization], | ||
| } as Meta; | ||
|
|
||
| export const ResetPassword = () => ( |
There was a problem hiding this comment.
Is it possible to show the error state of passwords not matching in storybook?
Because: - We are improving UX - Balloon UI pattern were problematic on mobile This Commit: - Adds new components that dispay password criteria inline - Removes info about passwords and encryption
Because
This pull request
Issue that this pull request solves
Closes: FXA-7896
Checklist
Put an
xin the boxes that applyScreenshots (Optional)
RTL
Other information (Optional)
The component with the 'balloon' UI pattern was shared by several pages. So in attempt do what this tickets asks, I just applied these changes to the password reset page; however, they could easily be applied to other pages such as the sign up page.
The code is largely the same as the FormPasswordWithBalloon. Notable differences involve
onChangeinteractions. These are hard to specify in Figma, and when manually testing the component, I realized on change events tied to key presses could easily create a very jumpy user experience. This was not a problem with the balloon UI pattern, because it didn't actually alter the layout, where as the inline criteria and warnings, when displayed, will push text boxes downward. Please take an extra look / test of this and make sure it's acceptable. I can see some of this being subject to opinion.