Reset password — Password reset flow with live rule checks and helpful error states

A work in progress exploration of a password reset screen, about one question: how can the form guide people to a good password instead of only telling them they got it wrong?

The rules sit under the fields and check themselves off while you type. The capital A ticks the uppercase rule, the 1 ticks the number rule, and the eighth character ticks the length rule, so you can see what is done and what is still missing before you press anything.

When something is wrong, the error says what to do next. Saving too early marks the empty repeat field in red with a plain message, “You forgot to repeat your password”, and turns the one rule still missing red too. Adding a ”!” turns that rule green, typing the password again clears the error, and the new password saves.