🔐 Building a Simple Password Generator with FastHTML
Paul Contreras
Posted on August 24, 2024
Are you looking to build a lightweight web application that’s both functional and stylish? In this tutorial, we’ll walk through creating a simple password generator using FastHTML — a minimalist Python-based HTML templating engine — and Tailwind CSS for sleek and responsive design.
🚀 What You’ll Build
We’ll create a web application that allows users to input the desired length of a password and generate a strong, random password on the fly. This tutorial is perfect for developers who want to explore FastHTML and HTMX, combined with the power of Tailwind CSS for simple front-end styling.
👨💻 Prerequisites
Before we dive in, make sure you have Python installed on your machine. We’ll be using the following libraries:
FastHTML: For our application.
You can install the required library with:
pip install python-fasthtml
🛠️ Step 1: Setting Up Your FastHTML App
Let’s start by setting up our FastHTML application. FastHTML is a lightweight HTML templating engine that allows you to create HTML elements directly in Python, making your code clean and easy to manage.
Here, we import the necessary libraries and initialize our FastHTML app, embedding Tailwind CSS directly via CDN for rapid styling.
🎨 Step 2: Creating the User Interface
Next, we’ll design a simple form where users can input the desired password length. Tailwind CSS will make our form both functional and visually appealing.
@app.route('/')
def home():
title = "Password Generator - With FastHTML"
form = Form(
Input(id="length_input", type="number", placeholder="Enter the length",
cls="border-2 border-gray-400 rounded-md p-2"),
Button("Generate", cls="bg-slate-900 text-white p-2 rounded-md mt-2"),
cls="flex flex-col items-center mt-10",
hx_post="/generate",
target_id="result",
hx_swap="innerHTML"
)
result = Div(id="result", cls="text-center mt-10")
return Title(title), Main(H1(title, cls="text-3xl text-center mt-10"), form, result)
This function renders our homepage, which includes a form for password generation. The form leverages HTMX to send the input data to the server and dynamically update the result without a full page reload. This makes the user experience seamless and responsive.
🔒 Step 3: Implementing the Password Generator Logic
Now, let’s implement the logic to generate a secure password based on the user’s input.
alph = string.ascii_letters + string.digits + string.punctuation
@app.route("/generate")
def post(length_input: int):
length = length_input
if length < 8:
return "Password length should be greater than 8 characters"
password = ''.join(secrets.choice(alph) for i in range(length))
return password
In this snippet, we define the character set for our password and implement the generator logic. We ensure the password length is secure (minimum of 8 characters) and then generate a random password using Python’s secrets module, which is designed for cryptographic applications.
▶️ Step 4: Running Your Application
To get your app up and running, simply run the following command:
if '__main__' == __name__:
serve()
Now, visit http://127.0.0.1:5001 in your browser, and you'll be greeted with your new password generator!
🎉 Conclusion
Congratulations! You’ve just built a fully functional password generator using FastHTML and Tailwind CSS. This project is a fantastic way to get acquainted with Python-based web development, HTMX for dynamic content, and Tailwind CSS for modern, responsive design.
💾 Check Out the Full Source Code
Want to dive deeper into the code or contribute to the project? The full source code is available on GitHub. Feel free to clone, fork, or star the repository:
This repository contains a simple password generator web application built using FastHTML and styled with Tailwind CSS. The application allows users to generate secure, random passwords based on a user-defined length.
🚀 Features
Secure Password Generation: Uses Python's secrets module for cryptographic randomness.
Responsive Design: Styled with Tailwind CSS for a clean and modern look.
Dynamic Updates: Utilizes HTMX for seamless, asynchronous password generation.
📦 Prerequisites
Make sure you have Python installed on your machine. You can install the necessary dependencies with: