Email or username:

Password:

Forgot your password?
Ryan's posts Post Back to profile
Ryan Mulligan

Having some fun with Web Components to toggle password input text visibility and check password rules as a user types: codepen.io/hexagoncircle/pen/L

- 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.

19 September at 15:15 | Open on fosstodon.org
6 comments
Ryan Mulligan

Might be a silly way to go about this, but it was a fun experiment. I'm mostly here to have a good time 🙌

19 September at 15:16 | Open on fosstodon.org
Geoff

@hexagoncircle It's lovely! Probably spent 5 minutes watchin' the loop.

19 September at 15:23 | Open on front-end.social
Ryan Mulligan

New companion article about my experimentation with Web Components and password inputs: ryanmulligan.dev/blog/password

21 September at 12:58 | Open on fosstodon.org
Vadim Makeev

@hexagoncircle Thank you for sharing! I’m wondering why you used data attributes for your custom elements. Since they’re already custom, you’re free to choose any custom attributes as well. At least, that’s my way of thinking usually.

22 September at 13:50 | Open on mastodon.social
Ryan Mulligan

@pepelsbey Yeah, good callout! There are a few reasons influencing my decision to prefix with `data-` that @scottjehl outlines in this post: mstdn.social/@scottjehl/112683

22 September at 14:32 | Open on fosstodon.org
Guillaume Deblock

@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 :)

22 September at 5:45 | Open on mastodon.social
Go Up