<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/LoginLayoutMob">
<!--
 *******************************************************************************
 * @source  : IdAndPwdFindFormMob.html
 * @desc    : 아이디 & 비밀번호 찾기 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.12   jsshin     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
	<main class="container mb">
		<!-- ★ 컨텐츠 시작 -->
		<section class="content mb_idInquiry_1">
			<div class="inner">
				<div class="close">
					<a class="btn_close"><span></span><span></span></a>
				</div>
			</div>
			<div class="inner">
				<h2 class="title">아이디/비밀번호찾기</h2>
			</div>
			<div class="inner">
				<div class="registration_nav">
					<ul class="tab_btn">
						<li th:class="${pageGb == 'custId'? 'active' : ''}">아이디찾기</li>
						<li th:class="${pageGb == 'custPwd'? 'active' : ''}">비밀번호찾기</li>
					</ul>
				</div>
				<div class="registration_tap">
					<!-- 아이디찾기 -->
					<div class="form_group">
						<!-- 라디오탭 -->
						<div id="searchCustIdDiv" class="radio_nav">
							<ul class="form_field">
								<li class="ui_col_4 active">
									<input type="radio" name="radio1" id="rdi1-1" value="1" checked><label for="rdi1-1"> <span>회원정보인증</span> </label>
								</li>
								<li class="ui_col_4">
									<input type="radio" name="radio1" id="rdi1-2" value="2"><label for="rdi1-2"> <span>휴대폰인증</span> </label>
								</li>
								<li class="ui_col_4">
									<input type="radio" name="radio1" id="rdi1-3" value="3"><label for="rdi1-3"> <span>아이핀인증</span> </label>
								</li>
							</ul>
						</div>
						<!-- //라디오탭 -->
						<!-- 라디오탭 -->
						<div class="radio_tap">
							<div class="form_group">
								<form id="searchCustId" name="searchCustId" class="form_wrap form_full" method="post">
									<div>
										<div class="form_field mt0">
											<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
										</div>
										<div class="form_field">
											<input type="number" pattern="\d*" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control" maxlength="8" data-valid-type="numeric"/>
										</div>
										<div class="form_field">
											<input type="text" name="email" placeholder="이메일" class="form_control"/>
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnCustIdConfirm" class="btn btn_dark">확인</button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="form_group" style="display: none;">
								<div class="form_wrap form_full">
									<div>
										<div class="txt">
												회원님의 명의로 등록된 휴대폰으로<br>
												본인확인을 진행합니다.
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnIdPhoneCertify" class="btn btn_dark" onclick="fnCellPhoneCertify('custId');">
													본인명의 휴대폰으로 인증
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form_group" style="display: none;">
								<div class="form_wrap form_full">
									<div>
										<div class="txt">
											아이핀 인증을 통해 찾을 수 있습니다.
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnIdIpinCertify" class="btn btn_dark" onclick="fnIpinCertify('custId');">
													아이핀 인증
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 아이디찾기 결과 -->
						<div class="form_wrap form_full">
							<div id="succeedCustId"  class="find_result clear" style="display: none;">
								<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">
											<span class="t_span">가입경로</span>
											<span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
										</li>
									</ul>
								</div>
								<div class="btn_group_flex">
									<div>
										<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인 하기</button>
									</div>
								</div>
							</div>
							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
							<div id="failCustInfoId" class="form_wrap form_full" style="display: none;">
								<div class="find_result clear">
									<div class="form_info">
										<span class="ico_content_none"></span>
										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
										<p class="t_info mt10">
											정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
										</p>
									</div>
									<div class="btn_group_flex">
										<div>
											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
												<span>회원가입</span>
											</button>
										</div>
										<div>
											<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
												<span>다시 찾기</span>
											</button>
										</div>
									</div>
								</div>
							</div>
							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
							<!-- 휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
							<div id="failAuthenticationId" class="form_wrap form_full" style="display: none;">
								<div class="find_result clear">
									<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_flex">
										<div>
											<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 class="form_group" style="display: none;">
						<!-- 라디오탭 -->
						<div id="searchPwdDiv" class="radio_nav">
							<ul class="form_field">
								<li class="ui_col_4">
									<input type="radio" name="radios" id="rdi-4" value="4" checked><label for="rdi-4"> <span>회원정보인증</span> </label>
								</li>
								<li class="ui_col_4">
									<input type="radio" name="radios" id="rdi-5" value="5"><label for="rdi-5"> <span>휴대폰인증</span> </label>
								</li>
								<li class="ui_col_4">
									<input type="radio" name="radios" id="rdi-6" value="6"><label for="rdi-6"> <span>아이핀인증</span> </label>
								</li>
							</ul>
						</div>
						 <!-- //라디오탭 -->
						  <!-- 라디오탭 -->
						<div class="radio_tap">
							<div class="form_group">
								<form id="searchCustPwd" name="searchCustPwd" class="form_wrap form_full" method="post">
									<div>
										<div class="form_field mt0">
											<input type="text" name="custId" placeholder="아이디" class="form_control" minlength="4" maxlength="12"/>
										</div>
										<div class="form_field">
											<input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
										</div>
										<div class="form_field">
											<input type="text" name="email" placeholder="이메일" class="form_control" maxlength="30"/>
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnCustPwdConfirm" class="btn btn_dark">확인</button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="form_group">
								<form class="form_wrap form_full">
									<div>
										<div class="txt">
											회원님의 명의로 등록된 휴대폰으로<br>
											본인확인을 진행합니다.
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnPwdPhoneCertify" class="btn btn_dark btn_block" onclick="fnCellPhoneCertify('custPwd');">
													<span>본인명의 휴대폰으로 인증</span>
												</button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="form_group">
								<form class="form_wrap form_full">
									<div>
										<div class="txt">
											아이핀 인증을 통해 찾을 수 있습니다.
										</div>
										<div class="btn_group_flex">
											<div>
												<button type="button" id="btnPwdIpinCertify" class="btn btn_dark btn_block" onclick="fnIpinCertify('custPwd');">
													<span>아이핀 인증</span>
												</button>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
						 <!-- //라디오탭 -->
						<!-- 임시비밀번호 발급 -->
						<div class="form_wrap form_full">
							<div id="sendEmailDiv" class="find_result clear" style="display: none;">
								<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">
									<span id="sendEmail" class="c_primary bold" data-font="lato"></span>
								</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="form_wrap form_full" style="display: none;">
								<div class="find_result clear">
									<div class="form_info">
										<span class="ico_content_none"></span>
										<p>입력한 정보와 일치하는 아이디가 존재하지 않습니다.</p>
										<p class="t_info mt10">
											정확한 확인을 위해 휴대폰 인증/아이핀 인증을 통한<br>아이디 찾기를 진행해 주세요.
										</p>
									</div>
									<div class="btn_group_flex">
										<div>
											<button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
												<span>회원가입</span>
											</button>
										</div>
										<div>
											<button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">
												<span>다시 찾기</span>
											</button>
										</div>
									</div>
								</div>
							</div>
							<!-- 회원정보로 아이디, 비밀번호 찾기 실패일경우 -->
							<!-- 휴대폰,아이핀 본인인증으로 아이디, 비밀번호찾기 실패일경우 -->
							<div id="failAuthenticationPwd" class="form_wrap form_full" style="display: none;">
								<div class="find_result clear">
									<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_flex">
										<div>
											<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>
		</section>
		<!-- ★ 컨텐츠 종료 -->
	</main>
<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	const sEncData = [[${sEncData}]];   //인증 후 해당 페이지로 리다이렉트함
	const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
	const custParams = [[${custParams}]];
	const pageGb = [[${pageGb}]];

	// 회원정보로 아이디 찾기
	$('#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();
		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();
		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 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;
	};

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

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

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

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

	$('.btn_close').on('click', function () {
		let referrer = document.referrer;
		if (referrer.indexOf('/customer/nice/certify/callback') > -1 ) {
			cfnGoToPage(_PAGE_LOGIN);
		} else {
			history.back(-1);
		}
	});

	$(document).ready(function () {
		if (!gagajf.isNull(sEncData) && 'custId' === custParams) {
			fnCustIdNiceCallBack(sEncData, authMethod);
		}

		if (!gagajf.isNull(sEncData) && 'custPwd' === custParams) {
			fnCustPwdNiceCallBack(sEncData, authMethod);
		}
		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();
			$(this).addClass('active').siblings().removeClass('active');
			$('.registration_tap > .form_group').hide();
			$('.registration_tap > .form_group').eq($(this).index()).show();
			return false;
		});

		/* 회원정보인증/휴대폰인증/아이핀인증_taps */
		$('.radio_tap > .form_group').hide();
		$('.radio_tap > .form_group').eq(0).show();
		$('.radio_tap').each(function(){
			$(this).find('.form_group').hide();
			$(this).find('.form_group').eq(0).show();
		});

		$(document).on('click','.radio_nav > ul > li',function(e){
			$(this).addClass('active').siblings().removeClass('active');
			$(this).find('input').prop("checked", true);
			$(this).parent().parent().parent().find('.radio_tap > .form_group').hide();
			$(this).parent().parent().parent().find('.radio_tap > .form_group').eq($(this).index()).show();
			return false;
		});
	});

/*]]>*/
</script>

</th:block>
</body>
</html>