Create Password Generator and Strength Checker in Django

By Faraz - July 29, 2024

Learn how to create a password generator and strength checker using Django with step-by-step instructions, enhancing security and user experience on your web app.

Join us on Telegram

create-password-generator-and-strength-checker-in-django.webp

Read Also Creating Login Form with Captcha using HTML, CSS, and JavaScript.jpg

Creating a secure password is crucial for protecting user data and maintaining the integrity of web applications. In this tutorial, we will guide you through the process of building a password generator and strength checker using Django. By the end of this tutorial, you will have a functional web application that generates strong passwords and assesses their strength, providing a robust security feature for your users.

Setting Up Your Django Project

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject password_project

Setting up the project structure

Navigate into your project directory:

cd password_project

Create a Django App

Create a new app within your project:

python manage.py startapp password_app

Adding the app to the project

Add password_app to INSTALLED_APPS in password_project/settings.py:

INSTALLED_APPS = [
    'password_app',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Step 2: Create a Password Generator and Strength Checker

Create Forms

In password_app, create a new file named forms.py and add the following function:

from django import forms

class PasswordForm(forms.Form):
    length = forms.IntegerField(label='Password Length', min_value=8, max_value=128)

Create Views

In views.py of password_app, add a view to use the password generator and check password strength:

from django.shortcuts import render
from .forms import PasswordForm
import random
import string

def generate_password(length):
    characters = string.ascii_letters + string.digits + string.punctuation
    password = ''.join(random.choice(characters) for _ in range(length))
    return password

def check_strength(password):
    strength = {'length': len(password) >= 12,
                'lowercase': any(c.islower() for c in password),
                'uppercase': any(c.isupper() for c in password),
                'digits': any(c.isdigit() for c in password),
                'special': any(c in string.punctuation for c in password)}
    return strength

def home(request):
    password = None
    strength = None
    if request.method == 'POST':
        form = PasswordForm(request.POST)
        if form.is_valid():
            length = form.cleaned_data['length']
            password = generate_password(length)
            strength = check_strength(password)
    else:
        form = PasswordForm()
    return render(request, 'home.html', {'form': form, 'password': password, 'strength': strength})

Create Templates

Create a new directory named password_app/templates/ and add a template file home.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator and Strength Checker</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .strength-bar {
            height: 10px;
        }
        .strength-weak {
            background-color: red;
        }
        .strength-medium {
            background-color: orange;
        }
        .strength-strong {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Password Generator and Strength Checker</h1>
        <div class="card mt-4">
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        {{ form.length.label_tag }}
                        {{ form.length }}
                    </div>
                    <button type="submit" class="btn btn-primary">Generate Password</button>
                </form>

                {% if password %}
                    <h2 class="mt-4">Generated Password</h2>
                    <p class="font-weight-bold">{{ password }}</p>
                    <h2>Password Strength</h2>
                    <div class="progress strength-bar mb-2">
                        <div id="strength-bar" class="progress-bar"></div>
                    </div>
                    <ul>
                        <li>Length (at least 12 characters): {{ strength.length }}</li>
                        <li>Contains lowercase letters: {{ strength.lowercase }}</li>
                        <li>Contains uppercase letters: {{ strength.uppercase }}</li>
                        <li>Contains digits: {{ strength.digits }}</li>
                        <li>Contains special characters: {{ strength.special }}</li>
                    </ul>
                {% endif %}
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            function calculateStrength() {
                var strength = 0;
                {% if password %}
                    {% if strength.length %} strength += 1; {% endif %}
                    {% if strength.lowercase %} strength += 1; {% endif %}
                    {% if strength.uppercase %} strength += 1; {% endif %}
                    {% if strength.digits %} strength += 1; {% endif %}
                    {% if strength.special %} strength += 1; {% endif %}
                {% endif %}

                var strengthBar = $('#strength-bar');
                strengthBar.removeClass('strength-weak strength-medium strength-strong');
                if (strength <= 2) {
                    strengthBar.addClass('strength-weak');
                    strengthBar.css('width', '33%');
                } else if (strength == 3 || strength == 4) {
                    strengthBar.addClass('strength-medium');
                    strengthBar.css('width', '66%');
                } else if (strength == 5) {
                    strengthBar.addClass('strength-strong');
                    strengthBar.css('width', '100%');
                }
            }
            calculateStrength();
        });
    </script>
</body>
</html>

Configure URLs

In password_app, create a new file named urls.py and define the URL pattern:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

Include the app URLs in your project’s password_project/urls.py:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('password_app.urls')),
]

Step 3: Run the Django Server

Apply Migrations:

Apply migrations to set up the database (necessary even if not using a database for this app):

python manage.py migrate

Run the Development Server:

Start the Django development server:

python manage.py runserver

Visit Your App:

Now, visit http://127.0.0.1:8000/ in your browser, and you should see the Password Generator and Strength Checker in action.

Full Project Structure

password_project/
│
├── password_project/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
│   ├── asgi.py
│   ├── __pycache__/
│
├── password_app/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── models.py
│   ├── tests.py
│   ├── views.py
│   ├── urls.py
│   ├── templates/
│   │       └── home.html
│   └── __pycache__/
│
├── db.sqlite3
├── manage.py

Conclusion

By following this tutorial, you have successfully created a password generator and strength checker using Django. This application not only generates secure passwords but also provides users with immediate feedback on the strength of their passwords, enhancing overall security. Implementing such features in your web applications is a significant step towards safeguarding user data and ensuring a secure online experience.

Read Also Ad Blocker Detection How to Implement Using HTML, CSS, and JavaScript.jpg

Ad Blocker Detection: How to Implement Using HTML, CSS, and JavaScript