Ancestors

Toot

Written by Ryan Mulligan on 2024-09-19 at 15:15

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.

=> View attached media

=> More informations about this toot | More toots from hexagoncircle@fosstodon.org

Descendants

Written by Ryan Mulligan on 2024-09-19 at 15:16

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

=> More informations about this toot | More toots from hexagoncircle@fosstodon.org

Written by Ryan Mulligan on 2024-09-21 at 12:58

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

=> More informations about this toot | More toots from hexagoncircle@fosstodon.org

Written by Geoff on 2024-09-19 at 15:23

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

=> More informations about this toot | More toots from geoff@front-end.social

Written by Vadim Makeev on 2024-09-22 at 13:50

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

=> More informations about this toot | More toots from pepelsbey@mastodon.social

Written by Ryan Mulligan on 2024-09-22 at 14:32

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

=> More informations about this toot | More toots from hexagoncircle@fosstodon.org

Written by Daniel Fisher(lennybacon) on 2024-09-22 at 15:38

@hexagoncircle Nice work. Regarding the rules… If I remember correctly, @rmondello did some awesome work, and probably a standard, that defines password rules, so that password managers can generate as required. That might probably be a nice addition/change to your web component.

=> More informations about this toot | More toots from lennybacon@infosec.exchange

Written by Guillaume Deblock on 2024-09-22 at 05:45

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

=> More informations about this toot | More toots from blokche@mastodon.social

Written by Ryan Mulligan on 2024-09-22 at 14:09

@blokche 🫣 Ah, good catch! That's fixed now, thank you

=> More informations about this toot | More toots from hexagoncircle@fosstodon.org

Written by Guillaume Deblock on 2024-09-22 at 14:38

@hexagoncircle 👌🏼you're welcome :)

=> More informations about this toot | More toots from blokche@mastodon.social