File: /home/rtbrisc/public_html/admin/main/password/index.php
<?php include("../general/header.php"); ?>
<body class="">
<?php include("../general/navbar.php"); ?>
<!-- BEGIN CONTENT -->
<div class="page-container row-fluid">
<?php include("../general/password_sidebar.php"); ?>
<!-- BEGIN PAGE CONTAINER-->
<div class="page-content">
<div class="content">
<!-- BEGIN PAGE TITLE -->
<?php include("../general/customer_name.php"); ?>
<!-- END PAGE TITLE -->
<ul class="breadcrumb">
<li>
<p>CHANGE PASSWORD</p>
</li>
<li><a href="../dashboard" class="active">DASHBOARD</a> </li>
</ul>
<!-- BEGIN PlACE PAGE CONTENT HERE -->
<div class="row">
<div class="col-md-12 col-vlg-12 col-sm-12">
<div class="grid simple form-grid vertical green">
<div class="grid-title no-border">
<h3>Change Password</h3>
<h5><span class="semi-bold">Note: All fields with <span class="text-danger">*</span> are required!!!</span></h5>
</div>
<span class="text-danger">
<?php
echo @$_SESSION['err'];
?>
</span>
<!-- <script type="text/javascript" src="pull/requesttype.js"></script> -->
<?php
require_once("../worker/workers/server/utilities.php");
?>
<div class="grid-body no-border">
<form method="post" action="../worker/" enctype="multipart/form-data" id="form_traditional_validation" name="form_traditional_validation" role="form" autocomplete="off" class="validate">
<input type="hidden" id="txtCustomerID" name="txtCustomerID" value="<?php echo $customerID; ?>">
<div class="form-group row">
<label for="devicebrand" class="control-label col-lg-3 text-right">New Password: <span class="text-danger">*</span></label>
<div class="col-lg-9">
<input type="password" name="txtPassword" id="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" class="form-control" placeholder="Type New Password Here..." required>
</div>
</div>
<div class="form-group row">
<div class="col-lg-3"></div>
<div class="col-lg-9" id="message">
<h4>Password must contain the following:</h4>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
</div>
<div class="form-group row">
<label for="devicebrand" class="control-label col-lg-3 text-right">Confirm Password: <span class="text-danger">*</span></label>
<div class="col-lg-9">
<input type="password" name="txtConfirmPassword" id="txtConfirmPassword" class="form-control" placeholder="Confirm Password..." required>
</div>
</div>
<div class="form-group row">
<div class="col-lg-3"></div>
<div class="col-lg-9" id="message2">
<p id="invalid" class="invalid">Password do not match</p>
<p id="valid" class="valid">Password Match</p>
</div>
</div>
<div class="form-actions">
<input type="submit" name="submit" class="btn btn-primary btn-cons col-lg-3 col-sm-12 pull-right" style="background-color: #C7100E;" value="Change Password">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END DASHBOARD TILES -->
<!-- END PLACE PAGE CONTENT HERE -->
</div>
</div>
<!-- END PAGE CONTAINER -->
<?php include("../general/chat_bar.php"); ?>
</div>
<!-- END CONTENT -->
<?php include("../general/footer.php"); ?>
<script type="text/javascript">
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var myConfirm = document.getElementById("txtConfirmPassword");
var dsame = document.getElementById("dsame");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user clicks on the confirm password field, show the message box
myConfirm.onfocus = function(){
document.getElementById("message2").style.display = "block";
}
// When the user clicks outside the confirm password field, hide the message box
myConfirm.onblur = function(){
document.getElementById("message2").style.display = "none";
}
//When the user starts to type something inside the confirm password field
myConfirm.onkeyup = function(){
var pass = myConfirm.value;
//alert(pass);
if (myConfirm.value !== myInput.value) {
document.getElementById("valid").style.display = "none";
document.getElementById("invalid").style.display = "block";
// dsame.classList.remove("valid");
// dsame.classList.add("invalid");
} else {
document.getElementById("invalid").style.display = "none";
document.getElementById("valid").style.display = "block";
// dsame.classList.remove("invalid");
// dsame.classList.add("valid");
}
}
// When the user starts to type something inside the password field
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
</script>
</body>
</html>