<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- https://markcrowe-com.github.io/website-bootstrap-examples/password-reset.html -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"
integrity="sha256-4RctOgogjPAdwGbwq+rxfwAmSpZhWaafcZR9btzUk18="
crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Change Password</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div><a href="https://github.com/markcrowe-com/website-bootstrap-examples">See Source on GitHub</a></div>
</div>
</div> <div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p class="text-center">Use the form below to change your password. Your password cannot be the same as your username.</p>
<form method="post" id="passwordForm">
<div class="password-container">
<input type="password"
class="input-lg form-control"
name="password1" id="password1"
placeholder="New Password"
autocomplete="off">
<span class="password-button">Show</span>
</div>
<div class="row">
<div class="col-sm-6">
<div><span id="lowercase-notice" class="bi bi-x" style="color:#FF0004;"/>One Lowercase Letter</div>
<div><span id="uppercase-notice" class="bi bi-x" style="color:#FF0004;"/>One Uppercase Letter</div>
</div>
<div class="col-sm-6">
<div><span id="number-notice" class="bi bi-x" style="color:#FF0004;"/>One Number</div>
<div><span id="length-notice" class="bi bi-x" style="color:#FF0004;"/>8-20 Characters Long</div>
</div>
<div class="col-sm-12">
<div>
<span id="special-character-notice" class="bi bi-x" style="color:#FF0004;"/><span>One Special Character !, @, #, $, %, ^, &, *, (, ), _, +</span>
</div>
</div>
</div>
<div class="password-container">
<input type="password"
class="input-lg form-control"
name="password2" id="password2"
placeholder="Repeat Password"
autocomplete="off">
<span class="password-button">Show</span>
</div>
<div class="row">
<div class="col-sm-12">
<div><span id="match-notice" class="bi bi-x" style="color:#FF0004;"></span>Passwords Match</div>
</div>
</div>
<input type="submit" class="col-xs-12 btn btn-primary btn-load btn-lg" data-loading-text="Changing Password..." value="Change Password">
</form>
</div><!--/col-sm-6-->
</div><!--/row-->
</div>
.password-container {
position: relative
}
.password-container .password-button {
position: absolute;
top: 50%;
right: 10px;
z-index: 1;
color: #f36c01;
margin-top: -10px;
cursor: pointer;
transition: .3s ease all;
}
.password-container .password-button:hover {
color: #333333;
}
// https://markcrowe-com.github.io/website-bootstrap-examples/src/js/password-reset-form-validation.js
function validatePasswordResetForm() {
const LOWERCASE_NOTICE = "#lowercase-notice";
const LENGTH_NOTICE = "#length-notice";
const MATCH_NOTICE = "#match-notice";
const PASSWORD1 = "#password1";
const PASSWORD2 = "#password2";
const NUMBER_NOTICE = "#number-notice";
const SPECIAL_CHARACTER_NOTICE = "#special-character-notice";
const UPPERCASE_NOTICE = "#uppercase-notice";
const PASSWORD_LENGTH = 8;
let lowerCaseRegExp = /[a-z]+/;
let upperCaseRegExp = /[A-Z]+/;
let numberRegExp = /\d+/;
let specialCharacterRegExp = /[!@#$%^&*()_+]+/;
setGlyphIcon($(LOWERCASE_NOTICE), lowerCaseRegExp.test($(PASSWORD1).val()));
setGlyphIcon($(LENGTH_NOTICE), $(PASSWORD1).val().length >= PASSWORD_LENGTH);
setGlyphIcon($(MATCH_NOTICE), $(PASSWORD1).val() == $(PASSWORD2).val());
setGlyphIcon($(NUMBER_NOTICE), numberRegExp.test($(PASSWORD1).val()));
setGlyphIcon($(SPECIAL_CHARACTER_NOTICE), specialCharacterRegExp.test($(PASSWORD1).val()));
setGlyphIcon($(UPPERCASE_NOTICE), upperCaseRegExp.test($(PASSWORD1).val()));
}
function setGlyphIcon(element, isValid) {
if (isValid) {
$(element).removeClass("bi-x").addClass("bi-check").css("color", "#00A41E");
} else {
$(element).removeClass("bi-check").addClass("bi-x").css("color", "#FF0004");
}
}
function toggleShowPassword() {
$(this).text($(this).text() == "Show" ? "Hide" : "Show");
$(this).prev().attr('type', function (index, attr) { return attr == 'password' ? 'text' : 'password'; });
}
$(document).ready(function () {
$("input[type=password]").keyup(validatePasswordResetForm);
});
$(document).on('click', '.password-container .password-button', toggleShowPassword);
