Realtime Password Confimation & Strength Checker for sign ups

API & Custom Code Show & Tell
1

To make your UI a little more friendly and helpful for your users, I have added some code here to show the strength of a password and then confirmation it matches.

First up when you start writing your password the indicator tells you the strength, showing Weak, Medium or Strong

Screenshot 2023-04-15 at 16.20.44
Screenshot 2023-04-15 at 16.20.441186Ă—294 10.1 KB

Then you have your confirmation checker showing you then if the confirmation password matches or not

Screenshot 2023-04-15 at 16.23.21
Screenshot 2023-04-15 at 16.23.211186Ă—342 12.2 KB

There is nothing you need to add in the builder or add/change the code so just a copy & paste job. This is only applied to the register pages.

Javascript

$(document).on('knack-view-render.any', function() {
  $('div.kn-register .kn-input-password').append('<div id="password-match"></div><div id="password-strength-container"><div id="password-strength"><div id="password-strength-bar"></div></div><div id="password-strength-text"></div></div>') 
  $('div.kn-register input[name="password"]').on('keyup', function() {
    var password = $(this).val();
    var strength = checkPasswordStrength(password);
    var strengthText = '';

    switch (strength) {
      case 'weak':
        strengthText = 'Weak';
        $('#password-strength-bar, #password-strength-text').removeClass().addClass('weak');
        break;
      case 'medium':
        strengthText = 'Medium';
        $('#password-strength-bar ,#password-strength-text').removeClass().addClass('medium');
        break;
      case 'strong':
        strengthText = 'Strong';
        $('#password-strength-bar ,#password-strength-text').removeClass().addClass('strong');
        break;
    }
    $('#password-strength-text').text(strengthText);
  });

  $('div.kn-register input[name="password_confirmation"], div.kn-register input[name="password"]').on('keyup', function() {
    var password = $('div.kn-register input[name="password"]').val();
    var confirmPassword = $('div.kn-register input[name="password_confirmation"]').val();

    if (confirmPassword === '') {
      $('#password-match').slideUp(500);
      return;
    }

    if (password !== confirmPassword) {

      $('#password-match').removeClass().addClass('password-mismatch').text('❌ Passwords do not match').slideDown(500);
    } else {
      $('#password-match').removeClass().addClass('password-match').text('âś… Passwords match').slideDown(500);
    }
  });
});

function checkPasswordStrength(password) {
  var strength = 0;

  if (password.length < 8) {
    return 'weak';
  }

  if (password.length >= 8) {
    strength += 1;
  }

  if (password.match(/[a-z]+/)) {
    strength += 1;
  }

  if (password.match(/[A-Z]+/)) {
    strength += 1;
  }

  if (password.match(/[0-9]+/)) {
    strength += 1;
  }

  if (password.match(/[$@#&!]+/)) {
    strength += 1;
  }

  if (strength < 3) {
    return 'weak';
  }

  if (strength === 3) {
    return 'medium';
  }

  return 'strong';
}

CSS


#password-strength-container {
  display: flex;
  align-items: center;
}

#password-strength {
    height: 10px;
    background-color: #ddd;
    border-radius: 1em;
    overflow: auto;
    width: 60%;
}

#password-strength-bar {
  height: 100%;
  transition: width 0.2s ease-in-out;
}

#password-strength-bar.weak {
  background-color: #dc3545;
  width:33%;
}

#password-strength-text.weak {
  color: #dc3545;
}

#password-strength-bar.medium {
  background-color: #ffc107;
  width:66%;
}

#password-strength-text.medium  {
  color: orange;
}

#password-strength-bar.strong {
  background-color: #28a745;
  width:100%;
}

#password-strength-text.strong  {
  color: #28a745;
}

#password-strength-text {
  font-weight:bold;
  padding: 0px 15px;
}```
1 Like
2

You’re on fire @Johnny_Appknowledged_UK thanks again.

Where a register page is for a specific account type the form id is linked to the Account object number, so to make this great code work swapping all references of #register_all_users to div.kn-register gets the registration form selector correctly for me - might work in all user type scenarios too.

1 Like
3

An aside question @Johnny_Appknowledged_UK that might be a dumb one - how did you enter the symbols used int he JS code here? (The tick and cross)

1 Like
4

Thanks @BradStevens

Ah I didn’t see know that see I just fired up a test account and assumed it applied 1 ID to all. Looking back not quite sure why I didn’t use .kn-register. I’ll update the code to make it easier for people.

5

@BradStevens they are just text icons can find them most places but you can find them with emoji’s here

6

@Johnny_Appknowledged_UK Nice one, Johnny. Have you thought about extracting the password criteria from the Knack object e.g. “must contain numbers” etc to make the validation criteria dynamic?

1 Like
7

Thanks @KnackPros I didn’t think to include anything more as further stuff like this can be handled in the builder.

8

Hey everyone, I hope you’ve been enjoying these code snippets. I wanted to let you know that all of my code is now available on my new platform, Appknowledged. Appknowledged has taken over from KnackMods. I encourage all of you to sign up—it’s completely free—and you’ll have access to all of my free content.