How do I create a Real Time Password Strength Checker for my forms which have PasswordField in Django?

Using Django Templates & Frontend
1

Hi there,

I want to create a real time (live) Password Strength Checker which shows Weak, Normal and Strong etc or any kind of live strength-bar under the password fields on front-end while I type the password.

I tried this plugin here, but it does not seem to work as it has not been updated.

Can anyone tell me how do I accomplish it?

2

Hey there!
If you take a closer look into the code from the plugin, you will notice that they used Js to do the Job.

3

I am not good at js, can you tell me how do I implement the plugin? I was earlier getting some errors related to ugettext() method as it’s been depreciated. So what I did is to manually enter the code of widgets.py from plugin to my own forms.py, and implemented PasswordStrengthField as told in the plugin instructions. It’s working but it;s just showing a static and same message that is This password can be cracked, the message does not update as I start to type password, it just never changes.

So I guess it has to do with the JS. Can you help me in implementing the JS. I have put all the JS files provided in the plugin package into my project-folder/static/django_password_strength/js and my settings.py has following code:

STATIC_URL = "/static/"

STATICFILES_DIRS = [BASE_DIR / "static"]

Will this work?

4

I just checked the app and it did not work.

5

I’m not really good at Js as well. The package is failing cause it’s not compatible with your version of django.
But one thing that can work it’s to fork the repository and make it compatible with the django version, and install from your github.

About the error you’re facing is because:
The ugettext_lazy / ugettext was replaced by gettext_lazy / gettext.
Maybe there will be more errors.

1 Like
6

To create a real-time password strength checker for the PasswordField in Django forms, you can follow these steps:

  1. Include the necessary JavaScript library: You’ll need to include a password strength library in your Django template. There are various libraries available, but for this example, let’s use the “zxcvbn” library, which is widely used and provides a good balance between simplicity and accuracy. You can include the library by adding the following script tag in your template:

htmlCopy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
  1. Add an event listener: In your template, add an event listener to the password input field. This listener will trigger a function to calculate the password strength and update the UI accordingly. Assuming you have a form field with the id “id_password”, add the following script in your template:

htmlCopy code

<script>
  const passwordInput = document.getElementById('id_password');
  passwordInput.addEventListener('input', updatePasswordStrength);

  function updatePasswordStrength() {
    const password = passwordInput.value;
    const strength = zxcvbn(password).score; // Using zxcvbn to calculate password strength
    const strengthMeter = document.getElementById('password-strength-meter');
    const strengthText = document.getElementById('password-strength-text');

    // Update the strength meter and text based on the password strength
    strengthMeter.value = strength;
    strengthText.textContent = ['Very Weak', 'Weak', 'Fair', 'Strong', 'Very Strong'][strength];
  }
</script>
  1. Add the password strength meter and text: In your Django form template, add the elements that will display the password strength. For example, you can add an HTML meter element and a text element:

htmlCopy code

<input type="password" id="id_password" name="password" required>
<meter id="password-strength-meter" min="0" max="4" low="2" high="3" optimum="4"></meter>
<p id="password-strength-text"></p>

The meter element is used to visually represent the strength of the password, while the p element will display the password strength text.

Also you can use this password strength checker