An example of a password strength meter

[vursen]

Would be good to have an example of a password strength meter that would real-time update you on how secure your password is and whether all the constraints are met. This can be recommended as a better UX alternative to error messages in some cases like passwords. Showing just one error message at a time you leave the field – "must have at least 6 characters", “must have at least 1 special symbol” – can be annoying as you have to switch between fields back and forth to get to know what else you should do to make the field happy.

The example could be added to the cookbook.

[tomivirkki]

There is an example that shows the password strength in real-time at https://vaadin.com/docs/latest/components/password-field/#best-practices

[vursen]

There is an example that shows the password strength

Right, thanks for pointing it out. It is yet quite simple and is only based on the password length. I meant something more sophisticated, based on several constraints, e.g.:

• Using at least 1 special character ✅
• Using at least 1 capital letter ❌
• Having more than N characters ❌

[joelpop]

I have a "ChangePassword" set of components I have developed as an AddOn I will be adding to the Directory soon. For the sophistication I think you're looking for, it is more complicated than a simple cookbook recipe.

The AddOn's API is such that its usage is fairly simple. For instance, the above dialog (and a view with the button that opens it) was generated via the following code:

@Route(value = ChangePasswordDialogView.ROUTE, layout = ChangePasswordLayout.class)
public class ChangePasswordDialogView extends Composite<Div> {
    public static final String ROUTE = "change-password/dialog";

    private final transient Zxcvbn zxcvbn;

    private final ChangePasswordDialog changePasswordDialog;

    public ChangePasswordDialogView() {
        zxcvbn = new Zxcvbn();
        Function<CharSequence, String> passwordEncoder = CharSequence::toString;

        changePasswordDialog = new ChangePasswordDialog();
        changePasswordDialog.setInfoText(new Html("""
                    <span>
                        Instructions
                        <ol>
                            <li>Enter the current password.
                            <li>Provide a new password that satisfies the following complexity rules.
                            <li>Verify its strength with the meter.
                            <li>Repeat the new password to confirm.
                        </ol>
                    </span>"""));

        changePasswordDialog.addRule(PasswordRule.length(8));
        changePasswordDialog.addRule(PasswordRule.length(10, 64));
        changePasswordDialog.addRule(PasswordRule.hasUppercaseLetters(1));
        changePasswordDialog.addRule(PasswordRule.hasLowercaseLetters(1));
        changePasswordDialog.addRule(PasswordRule.hasDigits(1));
        changePasswordDialog.addRule(PasswordRule.hasSpecials(1));
        changePasswordDialog.addRule(PasswordRule.hasCharacterGroups(3));
        changePasswordDialog.addRule(PasswordRule.different(passwordEncoder,
                passwordEncoder.apply("user")));
        changePasswordDialog.addRule(PasswordRule.notPreviousOf(passwordEncoder,
                passwordEncoder.apply("first"),
                passwordEncoder.apply("second"),
                passwordEncoder.apply("third")));
        changePasswordDialog.addRule(PasswordRule.strengthOf(ChangePassword.PasswordStrengthLevel.STRONG,
                changePasswordDialog.getChangePasswordDialogI18n(),
                this::onRuling));

        changePasswordDialog.setScorer(this::onScoring);
        changePasswordDialog.addOkListener(e -> Notification.show("New password is \"%s\"".formatted(e.getDesiredPassword())));
        changePasswordDialog.open();

        var button = new Button("Change Password", this::onChangePasswordClick);

        getContent().add(button);
    }

    private void onChangePasswordClick(ClickEvent<Button> event) {
        changePasswordDialog.reset();
        changePasswordDialog.open();
    }

    private ChangePassword.PasswordStrengthLevel onRuling(String desiredPassword) {
        var strength = zxcvbn.measure(desiredPassword);
        return guessesToPasswordStrengthLevel(strength.getGuesses());
    }

    private ChangePassword.PasswordStrength onScoring(String desiredPassword) {
        var strength = zxcvbn.measure(desiredPassword);
        return new ChangePassword.PasswordStrength(guessesToPasswordStrengthLevel(strength.getGuesses()),
                "Could take %s to crack. %s".formatted(
                        strength.getCrackTimesDisplay().getOfflineSlowHashing1e4perSecond(),
                        strength.getFeedback().getWarning()));
    }

    private static ChangePassword.PasswordStrengthLevel guessesToPasswordStrengthLevel(double guesses) {
        final double DELTA = 5;
        var guessesDelta = guesses - DELTA;

        if (guessesDelta < 1e3) {
            return ChangePassword.PasswordStrengthLevel.VERY_WEAK;
        }
        else if (guessesDelta < 1e6) {
            return ChangePassword.PasswordStrengthLevel.WEAK;
        }
        else if (guessesDelta < 1e9) {
            return ChangePassword.PasswordStrengthLevel.MEDIOCRE;
        }
        else if (guessesDelta < 1e12) {
            return ChangePassword.PasswordStrengthLevel.STRONG;
        }
        else {
            return ChangePassword.PasswordStrengthLevel.VERY_STRONG;
        }
    }
}

And it supports internationalization (because the strength scorer I used is one for English words, its messages are still in English):

[joelpop]

I came up with an example I will be putting into the cookbook: How do I display more than one validation message at a time?