비밀번호 찾기 수정 중

src/main/java/com/style24/front/biz/thirdparty/NiceCertify.java

@@ -51,10 +51,10 @@ public class NiceCertify {
 		ipinPwd = env.getProperty("certify.ipin.pwd");
 		ipinCallback = env.getProperty("certify.ipin.callback");
 		domain = env.getProperty("domain.front");
-		log.info("\n\n---- NiceCertify initialization started ----");
-		log.info("나이스휴대폰인증(ID: {}, PWD: {}, callback: {})", niceId, nicePwd, domain + niceCallback);
-		log.info("나이스아이핀인증(ID: {}, PWD: {}, callback: {})", ipinId, ipinPwd, domain + ipinCallback);
-		log.info("\n--- NiceCertify initialization completed ----\n");
+		log.debug("\n\n---- NiceCertify initialization started ----");
+		log.debug("나이스휴대폰인증(ID: {}, PWD: {}, callback: {})", niceId, nicePwd, domain + niceCallback);
+		log.debug("나이스아이핀인증(ID: {}, PWD: {}, callback: {})", ipinId, ipinPwd, domain + ipinCallback);
+		log.debug("\n--- NiceCertify initialization completed ----\n");
 	}
 
 	/**

src/main/java/com/style24/front/biz/web/TsfCustomerController.java

@@ -240,6 +240,7 @@ public class TsfCustomerController extends TsfBaseController {
 		if (custInfo != null) {
 			isFind = true;
 			TscSession.setAttribute("custNo", String.valueOf(custInfo.getCustNo()));
+			result.setString("custId", custInfo.getCustId());
 		}
 
 		result.setString("authMethod", customer.getAuthMethod()); // 인증방법

src/main/webapp/WEB-INF/views/web/customer/FindPwdFormWeb.html

@@ -42,7 +42,7 @@
 							<div id="searchDiv" class="foldGroup checkcase">
 								<ul>
 									<li>
-										<form id="searchCustInfo" name="searchCustInfo" class="form_wrap" role="form">
+										<form id="searchCustInfo" name="searchCustInfo" class="form_wrap" role="form" method="post">
 											<div class="fold_head">
 												<a href="javascript:void(0)">
 													<div>
@@ -60,7 +60,7 @@
 													<label class="input_label sr-only">아이디</label>
 													<div class="ui_col_12">
 														<div class="input_wrap">
-															<input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" maxlength="30"/>
+															<input type="text" name="custId" placeholder="아이디" class="form_control" maxlength="30"/>
 															<button type="button" id="btnSearchId" class="btn btn_primary">
 																<span>확인</span>
 															</button>
@@ -109,7 +109,7 @@
 											</div>
 											<div class="ui_row mt20">
 												<div class="ui_col_12">
-													<button type="button" class="btn btn_dark btn_block">
+													<button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_block">
 														<span>본인명의 휴대폰으로 인증</span>
 													</button>
 												</div>
@@ -132,7 +132,7 @@
 											</div>
 											<div class="ui_row mt20">
 												<div class="ui_col_12">
-													<button type="button" class="btn btn_dark btn_block">
+													<button type="button" id="btnIpinCertify" class="btn btn_dark btn_block">
 														<span>아이핀 인증</span>
 													</button>
 												</div>
@@ -143,76 +143,77 @@
 							</div>
 							<!-- //비밀번호찾기일경우 -->
 							<!-- 비밀번호 재설정 -->
-							<div id="divNewPassword" class="find_result clear" style="display: none;">
-								<div class="form_info">
-									<span class="ico_content_security"></span>
-									<p>안전을 위해 비밀번호를 변경하신 후 이용이 가능합니다.</p>
-								</div>
-								<div class="form_field mt40">
-									<label class="input_label sr-only">신규 비밀번호</label>
-									<div class="ui_col_12">
-										<input type="password" id="password" name="password" placeholder="신규 비밀번호" >
-										<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
-										<div class="help_block">
-											<!-- 사용불가 비밀번호일경우 -->
-											<p class="mt10">
-												<span class="c_black2">
-													<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)
-												</span>
-												<br/>
-												<span class="c_red2">
-													<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외
-												</span>
-												<br/>
-												<span class="c_gray">
-													<i class="ico ico_check gray mr5"></i>아이디 제외
-												</span>
-											</p>
-											<!-- //사용불가 비밀번호일경우 -->
-											<!-- 사용가능한 비밀번호일경우 -->
-											<p class="mt10">
-												<span class="c_black2">
-													<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
-												</span>
-											</p>
-											<!-- //사용가능한 비밀번호일경우 -->
+							<div id="resetPasswordDiv" class="find_result clear" style="display: none;">
+								<form id="resetPasswordForm" name="resetPasswordForm" method="post">
+									<input type="hidden" name="custId"/>
+									<div class="form_info">
+										<span class="ico_content_security"></span>
+										<p>안전을 위해 비밀번호를 변경하신 후 이용이 가능합니다.</p>
+									</div>
+									<div class="form_field mt40">
+										<label class="input_label sr-only">신규 비밀번호</label>
+										<div class="ui_col_12">
+											<input type="password" id="password" name="password" placeholder="신규 비밀번호" >
+											<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
+											<div class="help_block">
+												<!-- 사용불가 비밀번호일경우 -->
+												<p class="mt10">
+													<span id="firstFailed" class="c_black2 hide">
+														<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자) <br/>
+													</span>
+													<span id="secondFailed" class="c_red2 hide">
+														<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외 <br/>
+													</span>
+													<span id="thirdFailed" class="c_gray hide">
+														<i class="ico ico_check gray mr5"></i>아이디 제외
+													</span>
+												</p>
+												<!-- //사용불가 비밀번호일경우 -->
+												<!-- 사용가능한 비밀번호일경우 -->
+												<p class="mt10 hide">
+													<span id="avlPwd" class="c_black2">
+														<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다
+													</span>
+												</p>
+												<!-- //사용가능한 비밀번호일경우 -->
+											</div>
+											<!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
 										</div>
-										<!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
 									</div>
-								</div>
-								<div class="form_field">
-									<label class="input_label sr-only">비밀번호 확인</label>
-									<div class="ui_col_12">
-										<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인">
-										<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
-										<div class="help_block">
-											<!-- 비밀번호확인 틀렸을경우 -->
-											<p class="t_err">
-												새 비밀번호가 일치하지 않습니다.
-											</p>
-											<!-- //비밀번호확인 틀렸을경우 -->
-											<!-- 비밀번호 일치할경우 -->
-											<p class="mt10">
-												<span class="c_black2">
-													<i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
-												</span>
-											</p>
-											<!-- //비밀번호 일치할경우 -->
+									<div class="form_field">
+										<label class="input_label sr-only">비밀번호 확인</label>
+										<div class="ui_col_12">
+											<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인">
+											<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
+											<div class="help_block">
+												<!-- 비밀번호확인 틀렸을경우 -->
+												<p id="misPwd" class="t_err hide">
+													새 비밀번호가 일치하지 않습니다.
+												</p>
+												<!-- //비밀번호확인 틀렸을경우 -->
+												<!-- 비밀번호 일치할경우 -->
+												<p id="avlConPwd" class="mt10 hide">
+													<span class="c_black2">
+														<i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
+													</span>
+												</p>
+												<!-- //비밀번호 일치할경우 -->
+											</div>
+											<!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
 										</div>
-										<!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
 									</div>
-								</div>
-								<div class="btn_group_block btn_group_md ui_row">
-									<div class="ui_col_12">
-										<button type="button" id="btnSavePassword" class="btn btn_dark btn_block">
-											<span>변경 후 다시 로그인</span>
-										</button>
+									<div class="btn_group_block btn_group_md ui_row">
+										<div class="ui_col_12">
+											<button type="button" id="btnSavePassword" class="btn btn_dark btn_block">
+												<span>변경 후 다시 로그인</span>
+											</button>
+										</div>
 									</div>
-								</div>
+								</form>
 							</div>
 							<!-- //비밀번호 재설정 -->
 							<!-- 임시비밀번호 발급 -->
-							<div id="divSendEmail" class="find_result clear" style="display: none">
+							<div id="sendEmailDiv" class="find_result clear" style="display: none">
 								<div class="form_info">
 									<span class="ico_content_mail"></span>
 									<p>아래의 이메일로 임시비밀번호가 발급되었습니다.</p>
@@ -232,6 +233,24 @@
 								</div>
 							</div>
 							<!-- //임시비밀번호 발급 -->
+							<!-- 비밀번호 찾기 결과안내 실패일경우 -->
+							<div id="failAuthentication" class="find_result clear" style="display: none;">
+								<div class="form_info">
+									<span class="ico_content_none"></span>
+									<p>입력한 정보와 일치하는 정보가 존재하지 않습니다.</p>
+									<p class="t_info mt10">
+										<span class="c_primary">STYLE24의 새로운 가족이 되어 주세요!</span>
+									</p>
+								</div>
+								<div class="btn_group_block btn_group_md ui_row">
+									<div class="ui_col_12">
+										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN);">
+											<span>회원가입</span>
+										</button>
+									</div>
+								</div>
+							</div>
+							<!-- //비밀번호 찾기 결과안내 실패일경우 -->
 						</div>
 					</div>
 				</div>
@@ -247,7 +266,7 @@
 
 	// 아이디 확인
 	$('#btnSearchId').on('click', function () {
-		let custId = $('#custId').val();
+		let custId = $('#searchCustInfo input[name=custId]').val();
 		if(gagajf.isNull(custId)) {
 			alert("아이디를 입력해주세요.");
 			return;
@@ -293,15 +312,25 @@
 			return;
 		}
 		custInfo.authMethod = 'custInfo';
-
 		let jsonData = JSON.stringify(custInfo);
-		console.log('jsonData', jsonData);
+		//console.log('jsonData', jsonData);
 		ajaxJsonSubmit('/customer/pwd/find/custinfo', jsonData, fnInfoConfirmCallBack);
 	});
 
+	// 휴대폰 인증
+	$('#btnCellPhoneCertify').on('click', function () {
+		cfnOpenCellphoneCertify();
+	});
+
+	// 아이핀 인증
+	$('#btnIpinCertify').on('click', function () {
+		cfnOpenIpinCertify();
+	});
+
 	// 찾기결과
 	var fnInfoConfirmCallBack = function (result) {
-		console.log('result', result);
+		$('.form_head').hide();
+		$('.registration_nav').hide();
 		$('#searchDiv').hide();
 		if (result.isFind) {
 			fnGetDisplaySucc(result.authMethod, result);
@@ -314,103 +343,150 @@
 	var fnGetDisplaySucc = function (authMethod, custInfo) {
 		if (custInfo.authMethod === 'custInfo') {
 			$('#sendEmail').text(custInfo.maskingEmail)
-			$('#divSendEmail').show();
+			$('#sendEmailDiv').show();
+		}
+		if (authMethod === 'mobile' || authMethod === 'ipin') {
+			$('#resetPasswordForm input[name=custId]').val(custInfo.custId);
+			$('#resetPasswordDiv').show();
 		}
-
-
 	};
 
 	// 찾기실패
 	var fnGetDisplayFail = function (authMethod) {
 		$('.form_head').hide();
 		$('.registration_nav').hide();
-		if (authMethod === 'custInfo') {
-			$('#failCustId').show();
-		}
-		if (authMethod === 'mobile' || authMethod === 'ipin') {
-			$('#failAuthentication').show();
+		$('#failAuthentication').show();
+	};
+
+	// 나이스 본인인증 후 콜백
+	var fnNiceCallBack = function(encData, authMethod) {
+		if (!gagajf.isNull(encData)) {
+			let custInfo = {};
+			custInfo.encData = encData;
+			custInfo.authMethod = authMethod;
+			let jsonData = JSON.stringify(custInfo);
+			ajaxJsonSubmit('/customer/pwd/find/certify', jsonData, fnInfoConfirmCallBack)
 		}
 	};
 
-var fnCheckPassword = function () {
-	let custId = $('#custId').val();
-	let password = $('#password').val();
-	let confirmPassword = $('#confirmPassword').val();
+	// 패스워드 입력
+	$("#resetPasswordForm input[name=password]").on('focus focusout keyup keydown', function () {
+		let password = $(this).val();
+		fnCheckPassword(password)
+	});
 
-	// 길이
-	if(!/^[a-zA-Z0-9!@#$%^&*()?_~]{6,15}$/.test(password)) {
-		console.log("비밀번호는 숫자, 영문, 특수문자 조합으로 6~15자리를 사용해야 합니다.");
-		return false;
-	}
 
-	// 영문, 숫자, 특수문자 2종 이상 혼용
-	var count = 0;
-	if(password.search(/[0-9]/g) != -1 ) count ++;
-	if(password.search(/[a-zA-Z]/ig)  != -1 ) count ++;
-	if(password.search(/[!@#$%^&*()?_~]/g)  != -1  ) count ++;
-	if(count < 2) {
-		console.log("비밀번호는 숫자, 영문, 특수문자를 두가지이상 혼용하여야 합니다.");
-		return false;
-	}
+	var fnCheckPassword = function (password) {
+		let custId = $('#resetPasswordForm input[name=custId]').val();
+		let $firstFailed = $('#firstFailed');
+		let $secondFailed = $('#secondFailed');
+		let $thirdFailed = $('#thirdFailed');
+		let $avlPwd = $('#avlPwd');
+		let pwdCheck = true;
 
-	// 동일한 문자/숫자 4이상, 연속된 문자
-	if(/(\w)\1\1\1/.test(password) || isContinuedValue(password)) {
-		console.log("비밀번호에 4자 이상의 연속 또는 반복 문자 및 숫자를 사용하실 수 없습니다.");
-		return false;
-	}
+		// 길이
+		if(!/^[a-zA-Z0-9!@#$%^&*()?_~]{8,20}$/.test(password)) {
+			$firstFailed.show();
+			pwdCheck = false;
+		} else {
+			$firstFailed.hide();
+			pwdCheck = true;
+		}
 
-	// 아이디 포함 여부
-	if(password.search(custId)>-1) {
-		console.log("ID가 포함된 비밀번호는 사용하실 수 없습니다.");
-		return false;
-	}
+		// 영문, 숫자, 특수문자 2종 이상 혼용
+		let count = 0;
+		if(password.search(/[0-9]/g) != -1 ) count ++;
+		if(password.search(/[a-zA-Z]/ig)  != -1 ) count ++;
+		if(password.search(/[!@#$%^&*()?_~]/g)  != -1  ) count ++;
+		if(count < 2) {
+			$firstFailed.show();
+			pwdCheck = false;
+		} else {
+			$firstFailed.hide();
+			pwdCheck = true;
+		}
 
-	// 재입력 일치 여부
-	if (password != confirmPassword) {
-		console.log("입력한 두 개의 비밀번호가 서로  일치하지 않습니다.");
-		return false;
-	}
+		// 동일한 문자/숫자 4이상, 연속된 문자
+		if(/(\w)\1\1\1/.test(password) || isContinuedValue(password)) {
+			$secondFailed.show();
+			pwdCheck = false;
+		} else {
+			$secondFailed.hide();
+			pwdCheck = true;
+		}
 
-}
-
-function isContinuedValue(password) {
-	console.log("password = " + password);
-	var intCnt1 = 0;
-	var intCnt2 = 0;
-	var temp0 = "";
-	var temp1 = "";
-	var temp2 = "";
-	var temp3 = "";
-
-	for (var i = 0; i < password.length-3; i++) {
-		console.log("=========================");
-		temp0 = password.charAt(i);
-		temp1 = password.charAt(i + 1);
-		temp2 = password.charAt(i + 2);
-		temp3 = password.charAt(i + 3);
-
-		console.log(temp0)
-		console.log(temp1)
-		console.log(temp2)
-		console.log(temp3)
-
-		if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == 1
-			&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == 1
-			&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == 1) {
-			intCnt1 = intCnt1 + 1;
+		// 아이디 포함 여부
+		if(password.search(custId)>-1) {
+			$thirdFailed.show();
+			pwdCheck = false;
+		} else {
+			$thirdFailed.hide();
+			pwdCheck = true;
 		}
 
-		if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == -1
-			&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == -1
-			&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == -1) {
-			intCnt2 = intCnt2 + 1;
+		if (pwdCheck) {
+			$avlPwd.show();
+		} else {
+			$avlPwd.hide();
 		}
-		console.log("=========================");
+
+
 	}
 
-	console.log(intCnt1 > 0 || intCnt2 > 0);
-	return (intCnt1 > 0 || intCnt2 > 0);
-}
+	var fnConfirmPassword = function () {
+		let $misPwd = $('#misPwd');
+		let $avlConPwd = $('#avlConPwd');
+		let password = $("#resetPasswordForm input[name=password]").val();
+		let confirmPassword = $('#confirmPassword').val();
+		// 재입력 일치 여부
+		if (password != confirmPassword) {
+			$avlConPwd.hide();
+			$misPwd.show()
+		} else {
+			$misPwd.hide();
+			$avlConPwd.show();
+		}
+	}
+
+	// 연속되는 문자
+	var isContinuedValue = function (password) {
+		console.log("password = " + password);
+		var intCnt1 = 0;
+		var intCnt2 = 0;
+		var temp0 = "";
+		var temp1 = "";
+		var temp2 = "";
+		var temp3 = "";
+
+		for (var i = 0; i < password.length-3; i++) {
+			console.log("=========================");
+			temp0 = password.charAt(i);
+			temp1 = password.charAt(i + 1);
+			temp2 = password.charAt(i + 2);
+			temp3 = password.charAt(i + 3);
+
+			console.log(temp0)
+			console.log(temp1)
+			console.log(temp2)
+			console.log(temp3)
+
+			if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == 1
+				&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == 1
+				&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == 1) {
+				intCnt1 = intCnt1 + 1;
+			}
+
+			if (temp0.charCodeAt(0) - temp1.charCodeAt(0) == -1
+				&& temp1.charCodeAt(0) - temp2.charCodeAt(0) == -1
+				&& temp2.charCodeAt(0) - temp3.charCodeAt(0) == -1) {
+				intCnt2 = intCnt2 + 1;
+			}
+			console.log("=========================");
+		}
+
+		console.log(intCnt1 > 0 || intCnt2 > 0);
+		return (intCnt1 > 0 || intCnt2 > 0);
+	}
 
 
 /*]]>*/