Mini Kabibi Habibi

Current Path : C:/Users/ITO/Desktop/From USB/fts/
Upload File :
Current File : C:/Users/ITO/Desktop/From USB/fts/update passwod.html

<!DOCTYPE html>
<?php
	session_start();
	require_once '../conn.php';
	
	if(!ISSET($_SESSION['username_head'])){
		header('location: ../index.php');
	}
?>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="home.php">Dashboard</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Update Password</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<div class="alert alert-warning" id="user_form">
				<?php
					$query = mysqli_query($conn, "SELECT * FROM `accounts` WHERE `username` = '$_SESSION[username_head]'") or die();
					$fetch = mysqli_fetch_array($query);
				?>
				<h3>User Account</h3>
				<br />
				<h4>Username</h4>
				<h5 class="text-primary"><?php echo $fetch['username']?></h5>
				
				<br />
				<button type="button" class="btn btn-default pull-left" id="setting"><span class="glyphicon glyphicon-cog"></span> Password Setting</button>
				<a type="button" class="btn btn-danger pull-right" href="../logout.php"><span class="glyphicon glyphicon-arrow-right"></span> Logout</a>
			</div>
			<div class="alert alert-warning" id="pass_form">
				<h3>Password Setting</h3>
				<form method="POST">
					<div class="form-group">
						<input type="password" class="form-control" id="old_pass" placeholder="Old Password" />
					</div>
					<div class="form-group">
						<input type="password" class="form-control" id="new_pass"  placeholder="New Password"/>
					</div>
					<div class="form-group">
						<input type="password" class="form-control" id="confirm_pass"  placeholder="Confirm Password"/>
					</div>
				</form>
				
				<div id="display"></div>
				<br />
				<button type="button" class="btn btn-default pull-left" id="change"><span class="glyphicon glyphicon-save"></span> Change Password</button>
				<button type="button" class="btn btn-success pull-right" id="back">Back</button>
			</div>
		</div>
	</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#pass_form').hide();
		
		$('#setting').on('click', function(){
			$('#user_form').hide();
			$('#pass_form').fadeIn(1000);
		});
		
		$('#back').on('click', function(){
			$('#pass_form').hide();
			$('#user_form').fadeIn(1000);
		});
		
		$('#change').on('click', function(){
			var old_pass = $('#old_pass').val();
			var new_pass = $('#new_pass').val();
			var confirm_pass = $('#confirm_pass').val();
			
			if(old_pass == "" || new_pass == "" || confirm_pass == ""){
				alert("Please complete the required field!");
			}else{
				$.ajax({
					url: 'change_password.php',
					type: 'POST',
					data: {old_pass: old_pass, new_pass: new_pass, confirm_pass: confirm_pass, username_head: <?php echo $_SESSION['username_head']?>},
					success: function(data){
						if(data == "success"){
							$("#display").html("<center class='alert-success'>You successfully change the password</center>");
							$('#old_pass').val('');
							$('#new_pass').val('');
							$('#confirm_pass').val('');
						}else if(data == "error1"){
							$("#display").html("<center class='alert-danger'>Current password does not match</center>");
						}else if(data == "error2"){
							$("#display").html("<center class='alert-danger'>New password does not match</center>");
						}
					}
				});
			}
		});
	});
</script>	
</body>	
</html>