Enforcing strong passwords can be challenging, but by providing users with an automated password generation feature, you can enhance both security and user experience.
HTML Structure
<p>
<input type="text" name="password" id="password" placeholder="Password" value="">
<a href="#" id="password-generate">Generate</a>
</p>Note: The input type is set to “text” for illustrative purposes. When creating a new account and generating a password, it may be appropriate to use “password” as the input type to mask the characters.
JavaScript Implementation
// Function to generate a random password
function generatePassword(length = 12) {
// Define character sets
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()-_=+[]{}|;:,.<>?';
// Combine all character sets
const allChars = lowercaseChars + uppercaseChars + numberChars + symbolChars;
let password = '';
// Ensure the password includes at least one character from each set
password += lowercaseChars.charAt(Math.floor(Math.random() * lowercaseChars.length));
password += uppercaseChars.charAt(Math.floor(Math.random() * uppercaseChars.length));
password += numberChars.charAt(Math.floor(Math.random() * numberChars.length));
password += symbolChars.charAt(Math.floor(Math.random() * symbolChars.length));
// Fill the remaining characters
for (let i = password.length; i < length; i++) {
password += allChars.charAt(Math.floor(Math.random() * allChars.length));
}
// Shuffle the password to prevent predictable patterns
password = password.split('').sort(() => 0.5 - Math.random()).join('');
return password;
}
// Event listener for the "Generate" link
document.getElementById('password-generate').addEventListener('click', function(e) {
e.preventDefault(); // Prevent default link behavior
const passwordField = document.getElementById('password');
const newPassword = generatePassword(12); // Generate a 12-character password
passwordField.value = newPassword; // Set the generated password in the input field
});
Character Sets: The function defines separate strings for lowercase letters, uppercase letters, numbers, and symbols. This allows for easy customization of the character sets used in password generation.
Ensuring Character Variety: To enhance password strength, the function ensures that the generated password includes at least one character from each character set.
Random Selection: The Math.random() function is used to select random characters from the combined character sets.
Shuffling: After assembling the password, the characters are shuffled to prevent any predictable patterns, especially since the first few characters are chosen from specific sets.
Event Handling: An event listener is attached to the “Generate” link, which, when clicked, generates a new password and populates the input field.
You can adjust the generatePassword function to:
- Change the default password length by modifying the
lengthparameter. - Include or exclude specific character sets based on your requirements.
- Enhance randomness by using the Web Crypto API for cryptographically secure random values.
