Tiny File Manager

Back Back Up Advanced Editor

<!--

https://www.geeksforgeeks.org/create-a-password-validator-using-bootstrap-javascript/

-->

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,
								initial-scale=1.0">
	<title>Password Strength Checker</title>
	
	<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
	
	<link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>

<body>
	<div class="container mt-5">
		<div class="row justify-content-center">
			<div class="col-md-6">
				<div class="card">
					<div class="card-body">
						<h2 class="mb-4">
							Checking Password Strength in JavaScript
						</h2>
						<div class="form-group">
							<label for="password">Enter Password:</label>
							<div class="input-group">
								<input type="password" class="form-control"
									id="password"
									oninput="validatePassword(this.value)">
								<div class="input-group-append">
									<button class="btn btn-outline-secondary"
											type="button" id="togglePassword">
										<i class="fas fa-eye"></i>
									</button>
								</div>
							</div>
						</div>
						<div class="form-group">
							<ul>
								<li id="minLength"><i class="fas fa-times
									text-danger"></i> Minimum 8 characters</li>
								<li id="uppercase"><i class="fas fa-times
									text-danger"></i> At least one uppercase
									letter</li>
								<li id="lowercase"><i class="fas fa-times
									text-danger"></i> At least one lowercase
									letter</li>
								<li id="symbol"><i class="fas fa-times
									text-danger"></i> 
									At least one symbol (@$!%*?&)
								</li>
							</ul>
						</div>
						<span id="errorMessage" class="font-weight-bold
						text-danger"></span>
					</div>
				</div>
			</div>
		</div>
	</div>

<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js">
	</script>
	
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js">
	</script>

if (passwordInput.type === 'password') {
				passwordInput.type = 'text';
				icon.classList.remove('fa-eye');
				icon.classList.add('fa-eye-slash');
			} else {
				passwordInput.type = 'password';
				icon.classList.remove('fa-eye-slash');
				icon.classList.add('fa-eye');
			}
		});

function validatePassword(password) {
			const strongPasswordRegex = 
				/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
			const errorMessage = document.getElementById('errorMessage');

// Check each condition and update the corresponding label
			document.getElementById('minLength').innerHTML = 
				password.length >= 8 ?
				'<i class="fas fa-check text-success"></i> Minimum 8 characters' :
				'<i class="fas fa-times text-danger"></i> Minimum 8 characters';
			document.getElementById('uppercase').innerHTML = 
				/[A-Z]/.test(password) ?
				'<i class="fas fa-check text-success"></i> At least one uppercase letter' :
				'<i class="fas fa-times text-danger"></i> At least one uppercase letter';
			document.getElementById('lowercase').innerHTML = 
				/[a-z]/.test(password) ?
				'<i class="fas fa-check text-success"></i> At least one lowercase letter' :
				'<i class="fas fa-times text-danger"></i> At least one lowercase letter';
			document.getElementById('symbol').innerHTML = 
				/[@$!%*?&]/.test(password) ?
				'<i class="fas fa-check text-success"></i> At least one symbol (@$!%*?&)' :
				'<i class="fas fa-times text-danger"></i> At least one symbol (@$!%*?&)';

// Check overall validity and update the error message
			if (strongPasswordRegex.test(password)) {
				errorMessage.textContent = 'Strong Password';
				errorMessage.classList.remove('text-danger');
				errorMessage.classList.add('text-success');
			} else {
				errorMessage.textContent = 'Weak Password';
				errorMessage.classList.remove('text-success');
				errorMessage.classList.add('text-danger');
			}
		}
	</script>
</body>

</html>