shadcn.io is not affiliated with official shadcn/ui
Self-Service Password Reset Login Block for Svelte
A reset page for an HR portal with a new password and confirm field, a five-segment strength meter, and a list of requirements that each show a glyph and words, never colour alone.
Installation
Overview
Show what a password needs while it is typed, with this self-service password reset login block for Svelte with Ark UI. It's the page a reset link opens in Kettleworks, an HR portal: the page's side rails run the full height and one band crosses it, split in two. At the start, the heading, the account being reset, and a form with a Password Input for the new password, a meter under it (five segments and a word) and a second one to confirm that says live whether the two match. At the end, beside a divider, the list of requirements: twelve characters, upper and lower case, a number, no name or common word, and a symbol as a bonus. Each line is a check or a minus glyph with its words, so no state is colour alone, and on a phone the list sits under the button. Set password is never disabled: pressed with a rule missing it names the rule and puts focus in the field. It's built from Password Input, Field, Button, Shine Button and Guides, with a CSS entrance only. For reset pages, new-password steps and anywhere a policy needs to be visible.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The new password never leaves the field's state, a good press waits 700 milliseconds and shows "Password changed" in the form's place, and nothing is stored, sent or checked against a server. In a product, send the new password and the single-use token from the link to your endpoint over HTTPS, check the rules again on the server (a page can be edited), compare the password with a breached-password list there, and end the other sessions of the account.
How is the strength worked out?
By counting rules, not by guessing entropy. Each of the four required rules met fills a segment (twelve or more characters, upper and lower case letters, a number, none of the account's own words or a few common ones), and a symbol adds a fifth only when all four are met. The word under the bar follows the count: None yet, Weak, Fair, Good (all four required rules) and Strong (with the symbol). It is a plain local rule set and says nothing about whether a password has been leaked.
Why a glyph and words on every line?
Because a ticked requirement and a missing one must not differ by colour alone. A met rule is a filled circle with a check and the words in a heavier weight; a missing one is an empty circle with a minus. A hidden sentence after each line reads "Met" or "Not met yet", and the meter's segments are filled or outlined, with the word beside them.
What happens when a rule is missing and I press Set password?
The button stays enabled. The first missing required rule is named under the new password ("Add a number.") and in the status line, and focus goes to that field; the confirm field is checked too, and says "The two passwords don't match." or "Type it again to confirm." The symbol is a bonus, so leaving it out never blocks.
Is the strength read out as I type?
Only after a pause. The page waits 600 milliseconds after the last key and then says the verdict once ("Strength: Good. 4 of 5 required rules met."), and says nothing again until the verdict changes, so a screen reader isn't talking over every keystroke. The confirm line is a visible note, not a live region.
Where does the requirements list go on a phone?
Under the form, after the button. The meter stays under the new password field so the feedback is beside what is being typed, and the problem line names the rule that blocks the press, so the list is a reference rather than a step you have to scroll to.