Skip to content

Commit

Permalink
Added password strength validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jvkousthub
jvkousthub committed Oct 11, 2024
1 parent db47338 commit 9e17086
Show file tree
Hide file tree
Showing 5 changed files with 264 additions and 14 deletions.
52 changes: 51 additions & 1 deletion about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,9 @@ <h2>Signup</h2>

<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>

<div class="form-group position-relative">
Expand Down Expand Up @@ -198,6 +199,46 @@ <h2>Signup</h2>
togglePassword.classList.add('bi-eye');
}
}
function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}
</script>

<style>
Expand Down Expand Up @@ -258,6 +299,15 @@ <h2>Signup</h2>
background-color: #6c757d;
border-color: #6c757d;
}
.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: black;
font-size: 12px;
}
</style>

<script src="signup.js"></script> <!-- Link to your JavaScript file -->
Expand Down
58 changes: 54 additions & 4 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,11 @@ <h2>Signup</h2>
</div>

<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
</div>
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>

<div class="form-group position-relative">
<label for="confirmPsw"><b>Confirm Password</b></label>
Expand Down Expand Up @@ -141,6 +142,46 @@ <h2>Forgot Password</h2>
togglePassword.classList.remove('bi-eye-slash');
togglePassword.classList.add('bi-eye');
}
function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}
}
</script>

Expand Down Expand Up @@ -202,6 +243,15 @@ <h2>Forgot Password</h2>
background-color: #6c757d;
border-color: #6c757d;
}
.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: black;
font-size: 12px;
}
</style>

<script src="signup.js"></script> <!-- Link to your JavaScript file -->
Expand Down
56 changes: 53 additions & 3 deletions category.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,11 @@ <h2>Signup</h2>
<label for="signupEmail"><b>Email</b></label>
<input type="email" id="signupEmail" placeholder="Enter Email" name="email" required>
</div>
<div class="form-group">
<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<span id="togglePassword" class="toggle-button">Show</span>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>
<div class="form-group">
<label for="confirmPsw"><b>Confirm Password</b></label>
Expand All @@ -120,6 +121,55 @@ <h2>Signup</h2>
<button type="button" class="btn cancel" onclick="closeForm('signup')">CLOSE</button>
</form>
</div>
<style>.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: black;
font-size: 12px;
}</style>
<script>function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}</script>
<script src="signup.js"></script> <!-- Link to your JavaScript file -->

<!-- Forgot Password Modal -->
Expand Down
60 changes: 55 additions & 5 deletions contact_us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,10 +152,11 @@ <h2>Signup</h2>
</div>

<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
</div>
<label for="signupPsw"><b>Password</b></label>
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>

<div class="form-group position-relative">
<label for="confirmPsw"><b>Confirm Password</b></label>
Expand Down Expand Up @@ -197,6 +198,46 @@ <h2>Forgot Password</h2>
togglePassword.classList.add('bi-eye');
}
}
function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}
</script>

<style>
Expand All @@ -209,7 +250,7 @@ <h2>Forgot Password</h2>
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
margin-bottom: 20px;
color: #333;
Expand Down Expand Up @@ -257,6 +298,15 @@ <h2>Forgot Password</h2>
background-color: #6c757d;
border-color: #6c757d;
}
.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: white;
font-size: 12px;
}
</style>

<script src="signup.js"></script>
Expand Down
52 changes: 51 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,9 @@ <h2 class="text-center">Signup</h2>
</div>
<div class="form-group position-relative">
<label for="signupPsw"><b>Password</b></label>
<input type="password" class="form-control" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6">
<input type="password" id="signupPsw" placeholder="Enter Password" name="psw" required minlength="6" oninput="checkPasswordStrength()">
<i class="bi bi-eye eye-icon" id="toggleSignupPassword" onclick="togglePasswordVisibility('signupPsw', 'toggleSignupPassword')"></i>
<div id="passwordStrength" class="strength-meter"></div>
</div>
<div class="form-group position-relative">
<label for="confirmPsw"><b>Confirm Password</b></label>
Expand Down Expand Up @@ -286,6 +287,46 @@ <h2>Forgot Password</h2>
togglePassword.classList.add('bi-eye');
}
}
function checkPasswordStrength() {
var strengthMeter = document.getElementById('passwordStrength');
var password = document.getElementById('signupPsw').value;
var strength = 0;

if (password.length >= 6) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[\W]+/)) strength++;

switch (strength) {
case 0:
case 1:
strengthMeter.style.width = '20%';
strengthMeter.style.backgroundColor = 'red';
strengthMeter.textContent = 'Weak';
break;
case 2:
strengthMeter.style.width = '40%';
strengthMeter.style.backgroundColor = 'orange';
strengthMeter.textContent = 'Fair';
break;
case 3:
strengthMeter.style.width = '60%';
strengthMeter.style.backgroundColor = 'yellow';
strengthMeter.textContent = 'Good';
break;
case 4:
strengthMeter.style.width = '80%';
strengthMeter.style.backgroundColor = 'blue';
strengthMeter.textContent = 'Strong';
break;
case 5:
strengthMeter.style.width = '100%';
strengthMeter.style.backgroundColor = 'green';
strengthMeter.textContent = 'Very Strong';
break;
}
}
</script>

<!-- Styles -->
Expand Down Expand Up @@ -354,6 +395,15 @@ <h2>Forgot Password</h2>
.btn-secondary:hover {
background-color: #6c757d;
}
.strength-meter {
height: 10px;
width: 0;
transition: width 0.3s;
margin-top: 5px;
text-align: center;
color: white;
font-size: 12px;
}
</style>

<!-- Bootstrap Icons -->
Expand Down

0 comments on commit 9e17086

Please sign in to comment.