Password strength gauge stimulus

[yeraydiazdiaz]

This builds on #3219 addressing #3197 and #3223

More importantly includes a refactor of the password gauge functionality to Stimulus.

There's a few decisions I made around the ability to compose components using JS "mixins" which I'm not sure it's "idiomatic Stimulus" if there is such a thing. Here's three captures of the end results in three areas:

• Reset password:
  

• Register:
  

• Update password:
  

Hopefully it makes sense and we can move forwards with Stimulus using this pattern.

[di]

Although it's probably too soon to call something "idiomatic stimulus", I think it would be more idiomatic to make these separate controllers than controllers that inherit from each other. There's not much to share between them and I think it would generally be cleaner.

That said, I have not given this PR a super close look, so if there's a good reason why that's wrong I could probably be convinced.

[di]

Accidental comment?

[yeraydiazdiaz]

eslint appeaser 😄

[di]

Also, thank you for tackling this!

[yeraydiazdiaz]

I've updated this to a much simpler approach of adding multiple controllers to the form.

I feel like some lines are getting a big too wide to read comfortably. I'd be in favor of something like:

{{ form.password_confirm(
    placeholder="Confirm password",
    required="required",
    class_="form-group__input",
    data_target="password.password password-match.passwordMatch",
    data_action="keyup->password-match#checkPasswordsMatch") }}

Would we consider disabling the template linting rule around single line echo statements to allow that?

[di]

@yeraydiazdiaz I think that'd be fine.

[yeraydiazdiaz]

Seems it's not something we can disable in the html_lint command line 😞