<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : IdAndPwdFindFormWeb.html
 * @desc    : 아이디 비번 찾기 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   jsshin     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
<div id="container" class="container mb">
	<div class="wrap">
		<div class="content find"> <!-- 페이지특정 클래스 = find -->
			<div class="cont_head">
				<h4>아이디&#47;비밀번호 찾기</h4>
			</div>
			<div class="cont_body">
				<div class="form_wrap form_col_c">
					<div class="registration_nav">
						<ul>
							<li th:class="${pageGb == 'custId'? 'active' : ''}"><a href="javascript:void(0)">아이디 찾기</a></li>
							<li th:class="${pageGb == 'custPwd'? 'active' : ''}"><a href="javascript:void(0)">비밀번호 찾기</a></li>
						</ul>
					</div>
					<!-- new -->
					<div class="registration_tap">
						<div class="form_group">
							<!-- 아이디찾기일경우 -->
							<div id="searchCustIdDiv" class="form_field">
								<div>
									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify11" value="1" checked/>
									<label for="rdi-mbCertify11"><span>회원정보인증</span></label>
								</div>
								<div>
									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify12" value="2"/>
									<label for="rdi-mbCertify12"><span>휴대폰인증</span></label>
								</div>
								<div>
									<input type="radio" name="rdi-mbCertify1" id="rdi-mbCertify13" value="3"/>
									<label for="rdi-mbCertify13"><span>아이핀인증</span></label>
								</div>
							</div>
							<div class="registration_cont">
								<!-- 회원정보인증 -->
								<div class="regist_box on">
									<form id="searchCustId" name="searchCustId" method="post">
										<div class="form_field">
											<label class="input_label sr-only">이름</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
												</div>
											</div>
										</div>
										<div class="form_field">
											<label class="input_label sr-only">생년월일 8자리 (예:19880912)</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control" maxlength="8" data-valid-type="numeric">
<!--													<input type="number" pattern="\d*" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control" maxlength="8" data-valid-type="numeric"/>-->
												</div>
											</div>
										</div>
										<div class="form_field">
											<label class="input_label sr-only">이메일</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="email" placeholder="이메일" class="form_control"/>
												</div>
											</div>
										</div>
										<div class="btn_group_block ui_row mt20">
											<div class="ui_col_12">
												<button type="button" id="btnCustIdConfirm" class="btn btn_dark btn_block">
													<span>확인</span>
												</button>
											</div>
										</div>
									</form>
								</div>
								<!-- //회원정보인증 -->
								<!-- 휴대폰인증 -->
								<div class="regist_box">
									<div class="txt">
										<p>회원님의 명의로 등록된 휴대폰으로 본인확인을 진행합니다.</p>
									</div>
									<div class="ui_row mt20">
										<div class="ui_col_12">
											<button type="button" id="btnIdPhoneCertify" class="btn btn_dark btn_block" onclick="fnCellPhoneCertify('custId');">
												<span>본인명의 휴대폰으로 인증</span>
											</button>
										</div>
									</div>
								</div>
								<!-- //휴대폰인증 -->
								<!-- 아이핀인증 -->
								<div class="regist_box">
									<div class="txt">
										<p>아이핀 인증을 통해 찾을 수 있습니다.</p>
									</div>
									<div class="ui_row mt20">
										<div class="ui_col_12">
											<button type="button" id="btnIdIpinCertify" class="btn btn_dark btn_block" onclick="fnIpinCertify('custId');">
												<span>아이핀 인증</span>
											</button>
										</div>
									</div>
								</div>
								<!-- //아이핀인증 -->
							</div>
							<!-- //아이디찾기일경우 -->
							<!-- 아이디찾기 성공일경우 -->
							<div id="succeedCustId" class="find_result clear hide">
								<div class="form_info">
									<span class="ico_content_find"></span>
									<p>아이디 찾기 결과 안내</p>
								</div>
								<div class="form_print_bar mt40">
									<ul>
										<li>
											<span class="t_span">아이디</span>
											<span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
										</li>
										<li>
											<span class="t_span">가입일자</span>
											<span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
										</li>
										<li id="liJoinPath" class="hide">
											<span class="t_span">가입경로</span>
											<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
										</li>
									</ul>
								</div>
								<div class="btn_group_block btn_group_md ui_row">
									<div class="ui_col_12">
										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">
											<span>로그인 하기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- 회원정보로 아이디찾기 실패일경우 -->
							<div id="failCustInfoId" class="find_result clear hide">
								<div class="form_info">
									<span class="ico_content_none"></span>
									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
									<p class="t_info mt10">
										정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
									</p>
								</div>
								<div class="btn_group_block btn_group_md ui_row">
									<div class="ui_col_6">
										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
											<span>회원가입</span>
										</button>
									</div>
									<div class="ui_col_6">
										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
											<span>다시 찾기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //회원정보로 아이디찾기 실패일경우 -->
							<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
							<div id="failAuthenticationId" class="find_result clear hide">
								<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_TYPE);">
											<span>회원가입</span>
										</button>
									</div>
								</div>
							</div>
						</div>
						<div class="form_group">
							<!-- 비밀번호찾기일경우 -->
							<div id="searchPwdDiv" class="form_field">
								<div>
									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify21" value="" checked="">
									<label for="rdi-mbCertify21"><span>회원정보인증</span></label>
								</div>
								<div>
									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify22" value="">
									<label for="rdi-mbCertify22"><span>휴대폰인증</span></label>
								</div>
								<div>
									<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify23" value="">
									<label for="rdi-mbCertify23"><span>아이핀인증</span></label>
								</div>
							</div>
							<div class="registration_cont">
								<!-- 회원정보인증 -->
								<div class="regist_box on">
									<form id="searchCustPwd" name="searchCustPwd" method="post">
										<div class="form_field form_full">
											<label class="input_label sr-only">아이디</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="custId" placeholder="아이디" id="custId" class="form_control" minlength="4" maxlength="12"/>
												</div>
											</div>
										</div>
										<div class="form_field">
											<label class="input_label sr-only">이름</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="custNm" placeholder="이름" class="form_control"maxlength="30"/>
												</div>
											</div>
										</div>
										<div class="form_field">
											<label class="input_label sr-only">이메일</label>
											<div class="ui_col_12">
												<div class="input_wrap">
													<input type="text" name="email" placeholder="이메일"  class="form_control"maxlength="30"/>
												</div>
											</div>
										</div>
										<div class="btn_group_block ui_row mt20">
											<div class="ui_col_12">
												<button type="button" id="btnCustPwdConfirm" class="btn btn_dark btn_block"><span>확인</span></button>
											</div>
										</div>
									</form>
								</div>
								<!-- //회원정보인증 -->
								<!-- 휴대폰인증 -->
								<div class="regist_box">
									<div class="txt">
										<p>회원님의 명의로 등록된 휴대폰으로<br>본인확인을 진행합니다.</p>
									</div>
									<div class="ui_row mt20">
										<div class="ui_col_12">
											<button type="button" id="btnPwdPhoneCertify" class="btn btn_dark btn_block" onclick="fnCellPhoneCertify('custPwd');">
												<span>본인명의 휴대폰으로 인증</span>
											</button>
										</div>
									</div>
								</div>
								<!-- //휴대폰인증 -->
								<!-- 아이핀인증 -->
								<div class="regist_box">
									<div class="txt">
										<p>아이핀 인증을 통해 찾을 수 있습니다.</p>
									</div>
									<div class="ui_row mt20">
										<div class="ui_col_12">
											<button type="button" id="btnPwdIpinCertify" class="btn btn_dark btn_block" onclick="fnIpinCertify('custPwd');">
												<span>아이핀 인증</span>
											</button>
										</div>
									</div>
								</div>
								<!-- //아이핀인증 -->
							</div>
							<!-- 임시비밀번호 발급 -->
							<div id="sendEmailDiv" class="find_result clear hide">
								<div class="form_info">
									<span class="ico_content_mail"></span>
									<p>아래의 이메일로 임시비밀번호가 발급되었습니다.</p>
									<p class="t_info mt10">
										로그인 시 비밀번호를 새로 설정하신 후 이용하실 수 있습니다.
									</p>
								</div>
								<div class="form_print_bar mt40">
									<p id="sendEmail" class="c_primary bold" data-font="lato"></p>
								</div>
								<div class="btn_group_block btn_group_md ui_row">
									<div class="ui_col_12">
										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">
											<span>로그인 하기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //임시비밀번호 발급 -->
							<!-- 회원정보로 아이디찾기 실패일경우 -->
							<div id="failCustInfoPwd" class="find_result clear hide">
								<div class="form_info">
									<span class="ico_content_none"></span>
									<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
									<p class="t_info mt10">
										정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
									</p>
								</div>
								<div class="btn_group_block btn_group_md ui_row">
									<div class="ui_col_6">
										<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
											<span>회원가입</span>
										</button>
									</div>
									<div class="ui_col_6">
										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">
											<span>다시 찾기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //회원정보로 아이디찾기 실패일경우 -->
							<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
							<div id="failAuthenticationPwd" class="find_result clear hide">
								<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_TYPE);">
											<span>회원가입</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
						</div>
						<!-- //비밀번호찾기일경우 -->
					</div>
			</div>
		</div>
	</div>
</div>
<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	const pageGb = [[${pageGb}]];
	let findGb;

	// 회원정보로 아이디 찾기
	$('#btnCustIdConfirm').on('click', function() {
		let custInfo = $('#searchCustId').serializeObject();

		if (gagajf.isNull(custInfo.custNm)) {
			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
			return;
		}

		if (gagajf.isNull(custInfo.email)) {
			mcxDialog.alert('이메일을 입력하여 주세요.');
			return;
		}

		if (!fnCheckValidationEmail(custInfo.email)) {
			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
			return;
		}
		custInfo.authMethod = 'custInfo';

		let jsonData = JSON.stringify(custInfo);
		//console.log('jsonData', jsonData);
		gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack);
	});

	// 아이디 찾기결과
	var fnCustIdConfirmCallBack = function (result) {
		$('#btnCustIdConfirm').hide();
		$('#searchCustIdDiv').hide();
		$('#searchCustId').hide();
		$('.form_group').eq(0).find('.regist_box').removeClass('on');
		if (result.isFind) {
			fnGetDisplayCustIdSucc(result.authMethod, result);
		} else {
			fnGetDisplayCustIdFail(result.authMethod);
		}
	};

	// 아이디 찾기성공
	var fnGetDisplayCustIdSucc = function (authMethod, custInfo) {
		$('#resultId').text(custInfo.maskingCustId);
		$('#joinDt').text(fnToDateFormat(custInfo.joinDt));
		let joinPath = fnSnsJoinPath(custInfo); // 가입경로 : 직접이면 표시 안함, 간편가입 연동 표시
		if (!gagajf.isNull(joinPath)) {
			$('#liJoinPath').show();
			$('#joinPath').text(joinPath);
		}
		$('#succeedCustId').show();
	};

	// 아이디 찾기실패
	var fnGetDisplayCustIdFail = function (authMethod) {
		$('.registration_nav').hide();
		if (authMethod === 'custInfo') {
			$('#failCustInfoId').show();
		}
		if (authMethod === 'mobile' || authMethod === 'ipin') {
			$('#failAuthenticationId').show();
		}
	};

	$('#btnCustPwdConfirm').on('click', function () {
		let custInfo = $('#searchCustPwd').serializeObject();

		if(gagajf.isNull(custInfo.custId)) {
			mcxDialog.alert("아이디를 입력해주세요.");
			return;
		}

		if (gagajf.isNull(custInfo.custNm)) {
			mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
			return;
		}

		if (gagajf.isNull(custInfo.email)) {
			mcxDialog.alert('이메일을 입력하여 주세요.');
			return;
		}

		if (!fnCheckValidationEmail(custInfo.email)) {
			mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
			return;
		}

		custInfo.authMethod = 'custInfo';
		let jsonData = JSON.stringify(custInfo);
		//console.log('jsonData', jsonData);
		gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
	});

	// 패스워드 찾기결과
	var fnCustPwdConfirmCallBack = function (result) {
		$('#btnCustPwdConfirm').hide();
		$('#searchPwdDiv').hide();
		$('#searchCustPwd').hide();
		$('.form_group').eq(1).find('.regist_box').removeClass('on');
		if (result.isFind) {
			fnGetDisplayCustPwdSucc(result.authMethod, result);
		} else {
			fnGetDisplayCustPwdFail(result.authMethod);
		}
	};

	// 패스워드 찾기성공
	var fnGetDisplayCustPwdSucc = function (authMethod, custInfo) {
		if (custInfo.authMethod === 'custInfo') {
			$('#sendEmail').text(custInfo.maskingEmail)
			$('#sendEmailDiv').show();
		}
		if (authMethod === 'mobile' || authMethod === 'ipin') {
			cfnGoToPage(_PAGE_CUSTOMER_PWD_CHANGE_FIND);
		}
	};

	// 패스워드 찾기실패
	var fnGetDisplayCustPwdFail = function (authMethod) {
		$('.registration_nav').hide();
		if (authMethod === 'custInfo') {
			$('#failCustInfoPwd').show();
		}
		if (authMethod === 'mobile' || authMethod === 'ipin') {
			$('#failAuthenticationPwd').show();
		}
	};

	// 휴대폰 인증
	var fnCellPhoneCertify = function (param) {
		findGb = param;
		cfnOpenCellphoneCertify();
	};

	// 아이핀 인증
	var fnIpinCertify = function (param) {
		findGb = param;
		cfnOpenIpinCertify();
	};


	// 나이스 본인인증 후 콜백
	var fnNiceCallBack = function(encData, authMethod) {
		if (!gagajf.isNull(encData)) {
			let custInfo = {};
			custInfo.encData = encData;
			custInfo.authMethod = authMethod;
			let jsonData = JSON.stringify(custInfo);
			if (findGb === 'custId') {
				gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack)
			} else if (findGb === 'custPwd') {
				gagajf.ajaxJsonSubmit('/customer/password/find/certify', jsonData, fnCustPwdConfirmCallBack)
			}

		}
	};

	// 가입경로
	var fnSnsJoinPath = function (custInfo) {
		let snsType = '';
		if (!gagajf.isNull(custInfo.ysJoinDt)) {
			snsType += 'YES24';
		}
		if (!gagajf.isNull(custInfo.nvJoinDt)) {
			if (!gagajf.isNull(snsType)) {
				snsType += '/'
			}
			snsType = 'NAVER'
		}
		if (!gagajf.isNull(custInfo.kkJoinDt)) {
			if (!gagajf.isNull(snsType)) {
				snsType += '/'
			}
			snsType += 'KAKAO';
		}
		if (!gagajf.isNull(snsType)) {
			snsType += '연동';
		} else {
			snsType += 'STYLE24';
		}
		return snsType;
	};


	$(document).ready( function() {
		let index = pageGb !== 'custId' ? 1 : 0;
		$('.registration_tap > .form_group').hide();
		$('.registration_tap > .form_group').eq(index).show();

		$(document).on('click','.registration_nav > ul > li',function(e){
			$('#searchCustId')[0].reset();
			$('#searchCustPwd')[0].reset();
		});

		$(document).on('click','.mb .registration_tap > .form_group > .form_field > div',function(e){
			// form 데이터 리셋
			$('#searchCustId')[0].reset();
			$('#searchCustPwd')[0].reset();
			$(this).find('input').prop('checked', true);
			$(this).parents('.form_group').find('.regist_box').removeClass('on');
			$(this).parents('.form_group').find('.regist_box').eq($(this).index()).addClass('on');
			return false;
		});
	});

/*]]>*/
</script>

</th:block>

</body>
</html>
