Add password strength gauge to recover password and account settings

[yeraydiazdiaz]

As suggested by @nlhkabu

I couldn't quite test it on the recover password page due to a KeyError: 'token.password.secret' when trying to request a password reset, I'm possibly missing something. I did verify it works on the account settings and on the register form.

I also notice we're starting to use Stimulus and I'd love to try it out, would've probably been a good fit for the password gauge. Not sure if it's something worth reimplementing at this stage given it's working already.

[di]

@yeraydiazdiaz Looks like your local dev environment is missing these new variables which were recently added. It doesn't pull them in automatically when they're changed, so you'll need to do a docker-compose build web (I think you don't need to remove the current container first) to get it working again.

My plan for all the frontend JS is to eventually convert it to using Stimulus. I agree the password reset gauge would be a good fit, so if you're interested in porting it to a Stimulus controller, I think it's definitely worth doing! (In a separate PR though please 🙂)

[di]

Also, writing a jinja2 macro in the base HTML template to remove some of the duplication that is happening in this PR is probably a good idea.

[di]

Is there a reason why we need to pass the field into the macro like this? I was imagining this being something like:

<label class="form-group__label" for="name">New Password</label>
{{ change_password_form.new_password(placeholder="Select a new password", required="required", class_="form-group__input") }}
{{ field_errors(change_password_form.new_password) }}
{{ password_strength_gauge() }}

(Also I think the errors should probably come before the gauge)

[yeraydiazdiaz]

The input field needs to be wrapped in a div tag to properly place the tooltips since they're implemented on pseudo-elements. Since it's not immediately obvious I was trying to avoid having to manually do it on each template but it just makes things less explicit, fixed now.

[di]

Thanks @yeraydiazdiaz!

[nlhkabu]

Just saw this @yeraydiazdiaz - thank you!!!