Gregory's Server
Having some fun with Web Components to toggle password input text visibility and check password rules as a user types: https://codepen.io/hexagoncircle/pen/LYKKjmj
- Sets attributes and CSS variables for score and total. This helps style the meter as rules are matched.
- The visual score/total is rendered in a pseudo element. I pass the score and total vars into a CSS counter().
- Added a rule index attribute to each list item so that a checkmark can be displayed when its corresponding rule matches.
@hexagoncircle It's lovely! Probably spent 5 minutes watchin' the loop.
New companion article about my experimentation with Web Components and password inputs: https://ryanmulligan.dev/blog/password-input-components/
@hexagoncircle Interesting use of web components, thanks for sharing! However there's a typo on the aria-cont(r)ols attribute used on the toggle component :)