IDとパスワードを入力する。パスワードの強度を5段階で評価してカラーバーで表示する。パスワードを強力にさせるのに文字種を複数混在させる必要はない。パスワードが英語辞書に含まれる単語でないこともチェックする。IDとパスワードの組が漏洩していないかどうかネット検索して結果を表示する。
Password Strength Checker
Password Strength Checker
<!DOCTYPE html>
<html>
<head>
<title>Password Strength Checker</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #F4F4F4;
}
.container {
margin: auto;
max-width: 600px;
padding: 20px;
background-color: #FFFFFF;
box-shadow: 0px 0px 10px #BBBBBB;
border-radius: 5px;
text-align: center;
}
h1 {
color: #333333;
margin-top: 0;
margin-bottom: 20px;
}
input[type="text"], input[type="password"] {
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: none;
margin-bottom: 20px;
width: 100%;
}
#password-strength {
height: 20px;
border-radius: 4px;
margin-bottom: 20px;
}
#password-strength .bar {
height: 100%;
float: left;
}
#password-strength-1 .bar {
background-color: #FF4136;
width: 20%;
}
#password-strength-2 .bar {
background-color: #FF851B;
width: 40%;
}
#password-strength-3 .bar {
background-color: #FFDC00;
width: 60%;
}
#password-strength-4 .bar {
background-color: #2ECC40;
width: 80%;
}
#password-strength-5 .bar {
background-color: #0074D9;
width: 100%;
}
.error-message {
color: #FF4136;
font-size: 14px;
font-style: italic;
margin-bottom: 20px;
}
#search-results {
margin-top: 20px;
}
.result-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
padding: 10px;
background-color: #EEEEEE;
border-radius: 5px;
}
.result-row h3, .result-row a {
margin: 0;
flex-basis: 100%;
text-align: center;
}
.result-row h3 {
font-size: 18px;
color: #333333;
margin-bottom: 5px;
}
.result-row a {
font-size: 16px;
color: #0074D9;
text-decoration: none;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>Password Strength Checker</h1>
<form id="password-form">
<label for="id-input">ID:</label>
<input type="text" id="id-input" name="id" required>
<label for="password-input">Password:</label>
<input type="password" id="password-input" name="password" oninput="checkPassword()" required>
<div id="password-strength">
<div class="bar" id="password-strength-1"></div>
<div class="bar" id="password-strength-2"></div>
<div class="bar" id="password-strength-3"></div>
<div class="bar" id="password-strength-4"></div>
<div class="bar" id="password-strength-5"></div>
</div>
<div id="password-error"></div>
<button type="submit" id="submit-button">Check Password</button>
</form>
<div id="search-results"></div>
</div>
<script>
function checkPassword() {
// Get the password input and strength bars
let passwordInput = document.getElementById('password-input');
let strengthBars = document.querySelectorAll('#password-strength .bar');
// Get the password strength
let passwordStrength = getPasswordStrength(passwordInput.value);
// Update the strength bars
for (let i = 0; i < strengthBars.length; i++) {
if (i < passwordStrength) {
strengthBars[i].style.opacity = 1;
} else {
strengthBars[i].style.opacity = 0.5;
}
}
// Get the password error message div
let passwordError = document.getElementById('password-error');
// Check if the password is in the dictionary
if (passwordInDictionary(passwordInput.value)) {
passwordError.innerHTML = 'Password cannot be a dictionary word.';
return;
}
// Check if the password meets the length requirement
if (passwordInput.value.length < 8 || passwordInput.value.length > 16) {
passwordError.innerHTML = 'Password length must be between 8 and 16 characters.';
return;
}
// Check if the password has at least one uppercase letter, one lowercase letter, and one number
let uppercaseRegex = /[A-Z]/;
let lowercaseRegex = /[a-z]/;
let numberRegex = /[0-9]/;
if (!uppercaseRegex.test(passwordInput.value) || !lowercaseRegex.test(passwordInput.value) || !numberRegex.test(passwordInput.value)) {
passwordError.innerHTML = 'Password must contain at least one uppercase letter, one lowercase letter, and one number.';
return;
}
// Clear the password error message div
passwordError.innerHTML = '';
}
function getPasswordStrength(password) {
let strength = 0;
// Check if the password meets the length requirement
if (password.length >= 8 && password.length <= 10) {
strength = 1;
} else if (password.length >= 11 && password.length <= 12) {
strength = 2;
} else if (password.length >= 13 && password.length <= 14) {
strength = 3;
} else if (password.length == 15) {
strength = 4;
} else if (password.length >= 16) {
strength = 5;
}
// Return the password strength
return strength;
}
function passwordInDictionary(password) {
let dictionary = ['password', '123456', 'qwerty', 'letmein', 'monkey', 'football', 'iloveyou', 'admin', 'welcome', 'starwars'];
return dictionary.includes(password.toLowerCase());
}
document.getElementById('password-form').addEventListener('submit', function(event) {
event.preventDefault();
// Get the ID and password inputs
let idInput = document.getElementById('id-input');
let passwordInput = document.getElementById('password-input');
// Get the search results div
let searchResults = document.getElementById('search-results');
// Clear any previous search results
searchResults.innerHTML = '';
// Create the search query URL
let searchQuery = 'https://www.google.com/search?q=' + encodeURIComponent(idInput.value + ' ' + passwordInput.value + ' leaked');
// Send the request to Google
fetch(searchQuery)
.then(response => response.text())
.then(function(result) {
// Create a div to hold the search results
let searchResultsDiv = document.createElement('div');
searchResultsDiv.setAttribute('id', 'search-results-div');
// Add the search results to the div
let resultRegex = /<h3 class="r"><a href="\/url\?q=(.*?)&/g;
let match;
while ((match = resultRegex.exec(result)) != null) {
let resultLink = decodeURIComponent(match[1]);
let resultTitle = resultLink.match(/\/\/[^\/]+(.*)/)[1];
let resultRow = document.createElement('div');
resultRow.setAttribute('class', 'result-row');
resultRow.innerHTML = '<h3>' + resultTitle + '</h3><a href="' + resultLink + '" target="_blank">View Result</a>';
searchResultsDiv.appendChild(resultRow);
}
// Add the search results div to the search results div
searchResults.appendChild(searchResultsDiv);
});
});
</script>
</body>
</html>