In today’s digital age, keeping track of multiple passwords for various accounts can become a daunting task. Whether you’re logging into email, social media, or banking apps, remembering strong, unique passwords for each account is crucial for security. This is where a password manager can help. A password manager stores your passwords securely, eliminating the need to remember them all. In this article, we will walk through building a simple password manager application using jQuery.
What is a Password Manager?
A password manager is a tool that securely stores and manages your passwords for different accounts. It helps you generate, store, and retrieve passwords, ensuring that you have strong and unique credentials for every service you use. These applications often use encryption to keep your data safe, making it a much safer alternative than reusing passwords or storing them in insecure places like text files or browsers.
Follow this video for complete guidance :
Password Manager – Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Manager</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
min-height: 100vh;
padding: 2rem 0;
}
.card {
border: none;
border-radius: 16px;
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.card-header {
background: linear-gradient(120deg, #2b5876 0%, #4e4376 100%);
color: white;
border-radius: 16px 16px 0 0 !important;
padding: 1.25rem;
}
.form-control {
border: 2px solid #eef2f7;
border-radius: 10px;
padding: 0.6rem 1rem;
transition: all 0.3s;
}
.form-control:focus {
border-color: #4e4376;
box-shadow: 0 0 0 3px rgba(78, 67, 118, 0.15);
}
.btn {
border-radius: 10px;
padding: 0.6rem 1.2rem;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(120deg, #2b5876 0%, #4e4376 100%);
border: none;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-light {
background: white;
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.btn-light:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.table {
margin: 0;
}
.table th {
background: #f8fafc;
font-weight: 600;
color: #2b5876;
padding: 1rem;
}
.table td {
padding: 1rem;
vertical-align: middle;
}
.table tr:hover {
background-color: #f8fafc;
}
.input-group .btn {
border: 2px solid #eef2f7;
background: white;
}
.btn-danger {
background: linear-gradient(120deg, #ff6b6b 0%, #ff4757 100%);
border: none;
}
.btn-danger:hover {
background: linear-gradient(120deg, #ff4757 0%, #ff6b6b 100%);
transform: translateY(-2px);
}
.table-responsive {
border-radius: 0 0 16px 16px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container" style="max-width: 800px;">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Password Manager</h5>
<div>
<input type="file" id="fileInput" accept=".pwd" class="d-none">
<button class="btn btn-sm btn-light me-2" id="openFile">Open</button>
<button class="btn btn-sm btn-light" id="saveFile">Save</button>
</div>
</div>
<div class="card-body">
<form id="entryForm" class="row g-2 mb-4">
<div class="col-md-3">
<input type="text" id="title" class="form-control" placeholder="Title" required>
</div>
<div class="col-md-3">
<input type="text" id="username" class="form-control" placeholder="Username" required>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="password" id="password" class="form-control" placeholder="Password" required>
<button type="button" class="btn btn-outline-secondary" id="togglePassword">👁️</button>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary w-100">Add</button>
</div>
</form>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Title</th>
<th>Username</th>
<th>Password</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="passwordList">
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
let passwords = [];
$('#openFile').click(() => $('#fileInput').click());
$('#fileInput').change(function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
try {
passwords = JSON.parse(e.target.result);
renderPasswordList();
} catch (error) {
alert('Invalid file format');
}
};
reader.readAsText(file);
});
$('#saveFile').click(function() {
const content = JSON.stringify(passwords, null, 2);
const blob = new Blob([content], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'passwords.pwd';
a.click();
URL.revokeObjectURL(url);
});
$('#togglePassword').click(function() {
const pwd = $('#password');
pwd.attr('type', pwd.attr('type') === 'password' ? 'text' : 'password');
});
$('#entryForm').submit(function(e) {
e.preventDefault();
const entry = {
id: Date.now().toString(),
title: $('#title').val(),
username: $('#username').val(),
password: $('#password').val()
};
passwords.push(entry);
renderPasswordList();
this.reset();
});
function renderPasswordList() {
const list = $('#passwordList');
list.empty();
passwords.forEach(entry => {
const row = $(`
<tr>
<td>${entry.title}</td>
<td>${entry.username}</td>
<td>
<div class="input-group">
<input type="password" class="form-control" value="${entry.password}" readonly>
<button class="btn btn-outline-secondary toggle-pwd" type="button">👁️</button>
<button class="btn btn-outline-secondary copy-pwd" type="button">📋</button>
</div>
</td>
<td>
<button class="btn btn-danger delete-entry" data-id="${entry.id}">Delete</button>
</td>
</tr>
`);
list.append(row);
});
}
$('#passwordList').on('click', '.toggle-pwd', function() {
const input = $(this).prev('input');
input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
});
$('#passwordList').on('click', '.copy-pwd', function() {
const input = $(this).prev().prev('input');
input.attr('type', 'text');
input.select();
document.execCommand('copy');
input.attr('type', 'password');
});
$('#passwordList').on('click', '.delete-entry', function() {
if (confirm('Delete this entry?')) {
const id = $(this).data('id');
passwords = passwords.filter(p => p.id !== id);
renderPasswordList();
}
});
renderPasswordList();
});
</script>
</body>
</html>
The Application Design
Our password manager app is built using HTML, CSS, and jQuery, and it allows users to add, view, and delete their password entries. It also supports the ability to save and load password entries from a file, providing an easy backup solution. Let’s dive into the main features of this application.
Core Features of the Password Manager App
- Adding Password Entries: The main functionality of the app is allowing users to add their passwords along with a title (such as the name of the service) and username. This is achieved through a simple form that captures the required information.
- Password Visibility Toggle: A common feature in password managers is the ability to toggle the visibility of passwords. Our app includes a button next to each password entry that allows users to toggle between the obfuscated (hidden) and visible password text. This is particularly useful when reviewing your entries.
- Deleting Entries: Users can remove any saved entry they no longer need. The app provides a delete button next to each entry, and the user is prompted with a confirmation message to ensure they want to delete the data.
- Import and Export Data: For additional functionality, the app includes the ability to import and export password entries via a JSON file. Users can save their passwords to a file for backup or transfer purposes and load them back into the app when needed.
User Interface Design
The user interface (UI) of the app is designed to be simple and intuitive. It consists of a clean and modern design using Bootstrap for responsive styling. The UI includes:
- A form for adding new passwords.
- A table to display saved password entries.
- Buttons to toggle password visibility, copy passwords, and delete entries.
- Options to save the password data to a file or open a file to load existing entries.
How It Works
When the user inputs a password and presses the “Add” button, the password is added to an in-memory array of password entries. The app dynamically generates rows in the table, displaying the title, username, and password for each entry.
The password entries are stored in an array, and every time the user interacts with the app (e.g., adding, deleting, or toggling a password), the table is re-rendered. This ensures that the displayed data is always up to date.
Security Considerations
While this app provides a way to manage passwords locally, it is important to remember that proper security measures should always be followed. For this application:
- Passwords are stored as plain text in the browser memory, which is fine for a simple local app but not suitable for production-grade password management tools. Ideally, passwords should be encrypted before storage.
- The app does not implement authentication or encryption, so it should not be used for storing highly sensitive information.
This simple password manager app, built using jQuery, is a great starting point for anyone looking to understand how password managers work or wanting to create their own basic solution. By utilizing essential features like adding and deleting entries, toggling password visibility, and importing/exporting data, this app serves as a solid foundation for a more sophisticated password management tool.
Remember, when building such applications, always prioritize security and explore advanced features like encryption and password strength analysis for a more robust solution. Happy coding!
