<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<script language=javascript>
$(document).ready(function(){
	$('#exPassword').focusout(function() {
		var pw = $('#exPassword').val();
		selectInputPwAjax(pw)
	});
	
	//비밀번호 확인 체크
	$("#newPassword1").on("propertychange change keyup paste input", function() {
		var pw = $("#newPassword1").val();
		var pwCheck = $("#newPassword2").val();
		if(pw == pwCheck){
			$(".pwPass").css("display", "");
			$(".pwPass_no").css("display", "none");
		}else{
			$(".pwPass_no").css("display", "");
			$(".pwPass").css("display", "none");
		}
		if(pwCheck == ''){
			$(".pwPass").css("display", "none");
			$(".pwPass_no").css("display", "none");
		}
	});
	
	//비밀번호 안전도 체크
		$("#newPassword1").on("propertychange change keyup paste input", function() {
		 var pw = $("#newPassword1").val();
		 var pwCheck = $("#newPassword2").val();
		 var exPw = $('#exPassword').val();
		 var num = pw.search(/[0-9]/g);
		 var eng = pw.search(/[a-z]/ig);
		 var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
		//영문자, 특수문자, 숫자를 포함한 8자이상 20자이하인지 체크
		 if(num < 0 || eng < 0 ||  spe < 0 || pw.search(/\s/) != -1 || pw.length < 8 || pw.length > 20 || exPw == pw){
			 $(".password_pass_no").css("display", "");
			 $(".password_pass").css("display", "none");
		 }else{
			 $(".password_pass").css("display", "");
			 $(".password_pass_no").css("display", "none");
		 }		
		 
		 if(pw == ''){
			 $(".password_pass").css("display", "none");
			 $(".password_pass_no").css("display", "none");
		 }
		 //비밀번호 확인 비교
		 if(pwCheck != ''){
 			if(pw == pwCheck){
 				$(".pwPass").css("display", "");
 				$(".pwPass_no").css("display", "none");
 			}else{
 				$(".pwPass_no").css("display", "");
 				$(".pwPass").css("display", "none");
 			}		
 			
		 }
	});

	//비밀번호 확인 체크
		$("#newPassword2").on("propertychange change keyup paste input", function() {
			var pw = $("#newPassword1").val();
			var pwCheck = $("#newPassword2").val();
			if(pw == pwCheck){
				$(".pwPass").css("display", "");
				$(".pwPass_no").css("display", "none");
			}else{
				$(".pwPass_no").css("display", "");
				$(".pwPass").css("display", "none");
			}
			if(pwCheck == ''){
				$(".pwPass").css("display", "none");
				$(".pwPass_no").css("display", "none");
			}
		});
	
	
});

//현재 비밀번호 입력 후 맞는지 조회
function selectInputPwAjax(pw){
	
	var form = document.selectPasswordCheckForm;
	form.password.value = pw;
	var data = new FormData(form);
	$.ajax({
		cache : false
		,url : "<c:url value='/web/user/selectPasswordCheckAjax.do'/>"
		,async:false
		,type : 'POST'
		,data : data
		,dataType:'json'
		,processData: false
		,contentType: false
		,success : function(returnData, status){
			if(returnData.result == "success") {
				if(returnData.pwCheck == "1"){
					$("#passwordCheck").val("Y")
					$(".oldPassChkNo").css("display", "none");
					$(".oldPassChkYes").css("display", "block");
				}else{
					$("#passwordCheck").val("N")
					$(".oldPassChkNo").css("display", "block");
					$(".oldPassChkYes").css("display", "none");
				}
			} else{ 
				alert(returnData.message);
				return;
			}
		}
		,error : function(request , status, error){
			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}

function insertPw(){
	
	if($("#exPassword").val() == ""){
		alert("현재 비밀번호를 입력해 주세요.");
		return false;
	}
	
	if($("#newPassword1").val() == ""){
		alert("새 비밀번호를 입력해 주세요.");
		return false;
	}
	
	if($("#newPassword2").val() == ""){
		alert("새 비밀번호 확인을 입력해 주세요.");
		return false;
	}
	
	if($("#passwordCheck").val() == "N"){
		alert("현재 비밀번호를 확인해 주세요.");
		return false;
	}
	
	if($("#newPassword1").val() != $("#newPassword2").val()){
		alert("새 비밀번호와 새 비밀번호 확인과 맞지 않습니다. 확인해 주세요");
		$('#newPassword2').val("");
		$('#newPassword2').focus();
		return false;
	}
	
	var form = document.updatePasswordForm;
	form.oldPassword.value = $("#exPassword").val();
	form.password.value = $("#newPassword1").val();
	form.rsaPasswd.value = $("#newPassword2").val();
	var data = new FormData(form);
	
	$.ajax({
		cache : false
		,url : "<c:url value='/web/user/updatePasswordCheckAjax.do'/>"
		,async:false
		,type : 'POST'
		,data : data
		,dataType:'json'
		,processData: false
		,contentType: false
		,success : function(returnData, status){
			if(returnData.result == "success") {
				alert("비밀번호가 정상적으로 변경되었습니다. 다시 로그인해주세요.");
				location.href='/web/uat/uia/actionLogout.do'
			} else{ 
				alert(returnData.message);
				
				if(returnData.errType == "01") {
					$('#exPassword').val("");
					$('#exPassword').focus();
					return;	
				}
				
				if(returnData.errType == "02") {
					$('#newPassword1').val("");
					$('#newPassword2').val("");
					$('#newPassword1').focus();
					return;	
				}
				
				if(returnData.errType == "03") {
					$('#newPassword1').val("");
					$('#newPassword2').val("");
					$('#newPassword1').focus();
					return;	
				}				
			}
		}
		,error : function(request , status, error){
			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}
</script>
<div class="inner">
	<!-- send top -->
	<div class="send_top">
		<!-- tab button -->
		<%@include file="/WEB-INF/jsp/web/user/mypageHeader.jsp" %>
		<!--// tab button -->
		<!-- 마이페이지 - 비밀번호 변경 -->
		<form id="selectPasswordCheckForm" name="selectPasswordCheckForm" method="post">
			<input type="hidden" name="password" id="password">
			<input type="hidden" name="userTy" id="userTy" value="">
		</form>
		
		<!-- 마이페이지 - 비밀번호 변경 -->
		<form id="updatePasswordForm" name="updatePasswordForm" method="post">
			<input type="hidden" name="oldPassword" id="oldPassword">
			<input type="hidden" name="password" id="password">
			<input type="hidden" name="rsaPasswd" id="rsaPasswd">
		</form>
		
		<div class="mypage_content current" id="tab5_3">
			<div class="heading">
				<h2>비밀번호 변경</h2>
			</div>
			<div class="mem_cont_in">
				<div class="text_top">
					<p>
						안전한 서비스 이용을 위해<span> 비밀번호</span>를 주기적으로 <span>변경</span>해주세요!
					</p>
				</div>
				<div class="input_list">
					<div class="input_list_item">
						<input type="hidden" id="passwordCheck" name="passwordCheck" value = "N">
						<div class="input_left">현재 비밀번호</div>
						<div class="input_right">
							<label for="" class="label">비밀번호</label>
							<input type="password" class="list_inputType1" id="exPassword" name="exPassword">
						</div>
						<div class="list_alert pass_no oldPassChkNo" style="display: none;">
							<i></i> <span>비밀번호가 일치하지 않습니다.</span>
						</div>
						<div class="list_alert pass oldPassChkYes" style="display:none;">
							<i></i> <span>비밀번호가 일치합니다.</span>
						</div>
					</div>
					<div class="mem_noti">비밀번호는 영문자, 특수문자, 숫자를 조합하여 8자 이상, 20자 이하로 사용해야 합니다.</div>
					<div class="input_list_item">
						<div class="input_left">새 비밀번호</div>
						<div class="input_right">
							<label for="" class="label">새 비밀번호</label>
							<input type="password" class="list_inputType1" id="newPassword1" maxlength="20">
						</div>
						<div class="list_alert password_pass_no" style="display: none;">
							<ul>
								<li><span class="step1"></span></li>
								<li><span class="step2"></span></li>
								<li><span class="step3"></span></li>
							</ul>
							<span>안전도 낮음</span>
						</div>
						<div class="list_alert password_pass" style="display: none;">
							<ul>
								<li><span class="step1"></span></li>
								<li><span class="step2"></span></li>
								<li><span class="step3"></span></li>
							</ul>
							<span>안전함</span>
						</div>
					</div>
					
					<div class="input_list_item">
						<div class="input_left">새 비밀번호 확인</div>
						<div class="input_right">
							<label for="" class="label">새 비밀번호 확인</label>
							<input type="password" class="list_inputType1" id="newPassword2" maxlength="20">
						</div>
						<div class="list_alert pass_no pwPass_no"
							style="display: none;">
							<i></i> <span>비밀번호가 일치하지 않습니다.</span>
						</div>
						<div class="list_alert pass pwPass" style="display: none;">
							<i></i> <span>비밀번호가 일치합니다.</span>
						</div>
					</div>
					<div class="mem_btnWrap2">
						<button type="button" class="mem_btn3" style="width: 100%;" onclick="insertPw();">변경</button>
					</div>
				</div>
			</div>
		</div>
		<!--// 마이페이지 - 비밀번호 변경 -->
	</div>
	<!--// send top -->
</div>
<!--// content 영역 -->
