<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/_global/dir_root.php'); ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'].'/_ps2020/config/cfg_loggedUser.php'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'] ."/_ps2020/config/connect.php"); ?>

<!DOCTYPE html>
<html>
<head>

	<!-- animation -->
		<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate.css" />
		<link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_fade.css" />

	<!-- css -->
		<link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/main.css" />

	<!-- css (custom) -->
		<link rel="stylesheet" href="<?php echo dir_root; ?>css/henry_style.css" />

		<style type="text/css">
			
			@media screen and (max-width: 480px) {
				html, body {
					min-width: unset;
				}
			}

			.content_inner{
				padding: 0 5px;
			}
				@media all and (max-width: 768px) {
					.content_inner{
						padding: 0;
					}
				}

			.error{
				display: inline-block;
				color: red;
			}

			.button{
				text-transform: none;
			}

			.btnCustomised{
				text-transform: unset;

				border-radius: 5px;
				
				transform: scale(.9);
			}
				.btnCustomised:hover{
					background-color: #989898 !important;
				}
		</style>
</head>

<body>
	<div id="form_addUser" class="content_inner">
	<!-- Password -->
		<div style="display: block; width: 100%;">
			<!-- Password -->
				<div class="12u" style="display: inline-block; margin-bottom: 30px;">
					<!-- label -->
					<label for="password" style="display: inline-block; width: max-content;">Password: </label>
					<!-- error -->
					<div id="password_error" class="animated fadeInDown error"></div>
					<!-- txtfield -->
					<input type="password" id="password" name="password" class="form-control mb-4" style="display: inline-block;" placeholder="password" value="" />
				</div>

			<!-- Confirm Password -->
				<div class="12u" style="display: inline-block;">
					<!-- label -->
					<label for="passwordConfirm" style="display: inline-block; width: max-content;">Confirm Password: </label>
					<!-- error -->
					<div id="passwordConfim_error" class="animated fadeInDown error"></div>
					<!-- txtfield -->
					<input type="password" id="passwordConfirm" name="passwordConfirm" class="form-control mb-4" style="display: inline-block;" placeholder="confirm password" value="" />
				</div>
		</div>

	</div>

	<!-- Scripts -->
		<script src="<?php echo dir_root; ?>js/template-hielo/jquery.min.js"></script>
		<script src="<?php echo dir_root; ?>js/template-hielo/jquery.scrollex.min.js"></script>
		<script src="<?php echo dir_root; ?>js/template-hielo/skel.min.js"></script>
		<script src="<?php echo dir_root; ?>js/template-hielo/util.js"></script>
		<script src="<?php echo dir_root; ?>js/template-hielo/main.js"></script>

	<script type="text/javascript">
		var test= true;
		
		var error_password = false,error_passwordConfirm = false;

	/* =============================================== 01. Password  =============================================== */
		
		// (check) Password
			$('#password').keyup(function(){
				error_inPassword();
			});
				function error_inPassword(){
					var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

					if ( re.test($('#password').val()) == false ) {
						$('#password_error').html('Password must contain at least 8 characters, 1 lowercase, 1 uppercase letter');
						$('#password_error').show();
						// $('#passwordConfirm').val('').addClass('ctm-disable');

						error_password = true;
						return true;
				    }
				    else{
				    	$('#password_error').hide();
						// $('#passwordConfirm').removeClass('ctm-disable');
						error_password = false;
						return false;
				    }
				}

	/* =============================================== 02. Confirm-Password  =============================================== */
		
		// (check) Confirm-Password
			$('#passwordConfirm').keyup(function(){
				error_inPasswordConfirm();
			});
				function error_inPasswordConfirm(){
					
					if ( $('#passwordConfirm').val() != $('#password').val() ){
						$('#passwordConfim_error').html('Password does not match');
						$('#passwordConfim_error').show();
						
						error_passwordConfirm = true;
						return true;
				    }
				    else{
				    	$('#passwordConfim_error').hide();
						error_passwordConfirm = false;
						return false;
				    }
				}

	</script>

</body>
</html>