Input Password - Githubissues

jsdrupal / drupal-admin-ui

This is an admin UI for Drupal, built with JavaScript & React. ⬅️✌️➡️

Other

235 stars 91 forks source link

Input Password #660

Open antonellasevero opened 5 years ago

antonellasevero commented 5 years ago

Design link: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system?node-id=5653%3A13262

MDN Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

input-password-anatomy

input-password-progress-bar-states

input-password-states

Technical details

[ ] Create a InputPassword component inside packages/components/FormElements/InputPassword/InputPassword.js
[ ] Implement the component following the design from above
[ ] Add a storybook entry: packages/components/FormElements/InputPassword/InputPassword.stories.js
[ ] Ensure to export to packages/components/src/index.js:6
[ ] Please ask when you questions :)
[ ] Enjoy

anevins12 commented 5 years ago

We ought to move the "Recommendations to make your password stronger" above the fields to create a password to position those instructions in a more predictable and in turn helpful place. Assistive technologies for example read the page in a linear and sequential fashion and someone using a screen reader would get to the "recommendations" section only after they've filled out the password fields. Ideally they would need this information before filling out the password fields so that they don't have to go back and re-do their password.

anevins12 commented 5 years ago

The "Show password" button will not be implemented as an anchor tag (a Link) and therefore we shouldn't be using the Link styling for it. The "Show password" button will be implemented as a Button tag and we need to instead use one of the button styles conveyed in this ticket: https://github.com/jsdrupal/drupal-admin-ui/issues/658