Warehouse: Add JS validation when passwords do not match

[nlhkabu]

It would be nice to use JavaScript to indicate whether or not the passwords match:

1. show a message
2. conditionally enable the button

---

---

@yeraydiazdiaz would this be something you might enjoy working on?

[yeraydiazdiaz]

Sure, I'll take the opportunity to rewrite the feature in Stimulus.

Disabling the submit button was something we explored before and decided against it. We are now using a pattern where feedback is given when clicking on the submit button in the form of tooltips.

Do we want to mix both feedback flows?

[di]

@yeraydiazdiaz Great question. The submit button disabling was a problem on the registration form because there wasn't a way to provide feedback if the user was missing one of the required fields.

I think here it's OK, since it should be pretty clear to the user that they need to fill out the password field in order to be able to change their password, and we'll be able to conditionally show the "passwords match"/"don't match" message when the first field is filled out.

[yeraydiazdiaz]

@nlhkabu which CSS classes are you using for the messages? The closest thing I'm finding are badges and don't quite look the same

[nlhkabu]

@yeraydiazdiaz you could use warehouse/static/sass/blocks/_form-errors.scss to display the error.
For the green, you could create a .form-error--valid modifier on this component. Let me know if you need a hand with that - if you prefer you could push the PR unstyled and I can add a commit for this :)