<?php
include_once 'includes/processes.php';
$Process = new Login_Process;
$Process->check_status($_SERVER['SCRIPT_NAME']);
$changePassword = $Process->changePassword($_POST,$_POST['submit']); 
?>
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Change Password</title>        
        <link rel="stylesheet" href="change-pass/css/style.css">    
  </head>

  <body>

    <div class="wrapper">
	<div class="container">
		<h1>Please, just before you proceed, change your default Password</h1>
		
		<form class="form" name="ValidationForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
			<input type="password" name="pass1" id="pass1" placeholder="New Password" autocomplete="off">
			<input type="password" name="pass2" id="pass2" placeholder="Confirm Password" autocomplete="off">
			<button type="submit" name="submit" id="login-butto">Proceed</button>
		</form>
	</div>
	
	<ul class="bg-bubbles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="change-pass/js/index.js"></script>

    <script type="text/javascript">
window.onload = function () {
	document.getElementById("pass1").onchange = validatePassword;
	document.getElementById("pass2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("pass2").value;
var pass1=document.getElementById("pass1").value;
if(pass1!=pass2)
	document.getElementById("pass2").setCustomValidity("Passwords Don't Match");
else
	document.getElementById("pass2").setCustomValidity('');	 
//empty string means no validation error
}
</script>
    
    
  </body>
</html>
