Description
a12n-server should include a re-usable web component that shows password strength as the user types in their password. This indicator should be entirely client-side and is just meant as a hint that the entered password isn't that good.
A first version should work simply by including 1 script, and using the is attribute:
<script src="https://a12n-installation-somewhere.example/assets/components/strong-password.mjs" type="module" />
<input type="password" is="strong-password" />This has the advantage that it's drop in, and will fall back to a normal password field if it didn't work.
For a v1 of this, I think it would be enough to show a colored line under the password field, like this without the words:
https://www.researchgate.net/figure/An-example-of-password-strength-indicators_fig2_325557154
I think it would be great if the whole thing can be loaded with 1 HTTP request, 2 HTTP request at most to load zxcvbn.min.js, written in Javascript with no build step. Right now things in the /assets directory are plain Javascript and would be cool to keep it that way! We can still get Typescript checks with // @ts-check at the start of the file.
I think we should use the original zxcvbn. Include it as a devDependency, and create Makefile target to copy the minified file (https://github.com/dropbox/zxcvbn/blob/master/dist/zxcvbn.js) in the assets directory, just like:
https://github.com/curveball/a12n-server/blob/main/Makefile#L64
It should also use whatever styles were already in place for input fields. So if somebody wants to use the component, and all their <input> fields had a custom border, it should not force any styles of its own.
After this work is done, let's use it on the /register and /reset-password/change-password routes, and usage instructions for other devs in /doc would be great as well!