style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!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  : PasswordFindFormWeb.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">
					<form id="searchCustInfo" name="searchCustInfo" class="form_wrap form_col_c" role="form" method="post">
						<div class="registration_nav">
							<ul>
								<li><a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">아이디 찾기</a></li>
								<li class="active"><a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">비밀번호 찾기</a></li>
							</ul>
						</div>
						<!-- new -->
						<div class="registration_tap">
							<div class="form_group" style="display: block;">
								<!-- 비밀번호찾기일경우 -->
								<div class="form_field">
									<div>
										<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify21" checked="checked"/>
										<label for="rdi-mbCertify21"><span>회원정보인증</span></label>
									</div>
									<div>
										<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify22"/>
										<label for="rdi-mbCertify22"><span>휴대폰인증</span></label>
									</div>
									<div>
										<input type="radio" name="rdi-mbCertify2" id="rdi-mbCertify23"/>
										<label for="rdi-mbCertify23"><span>아이핀인증</span></label>
									</div>
								</div>
								<div class="registration_cont">
									<!-- 회원정보인증 -->
									<div class="regist_box on">
										<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="이름" id="custNm" 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="이메일" id="email" 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="btnInfoConfirm" class="btn btn_dark btn_block">
													<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="btnCellPhoneCertify" class="btn btn_dark btn_block">
													<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="btnIpinCertify" class="btn btn_dark btn_block">
													<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="failCustId" 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);">
												<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="failAuthentication" 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>
						<!-- //new -->
					</form>
				</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[*/

		$('#btnInfoConfirm').on('click', function () {
			let custInfo = $('#searchCustInfo').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, fnInfoConfirmCallBack);
		});

		// 휴대폰 인증
		$('#btnCellPhoneCertify').on('click', function () {
			cfnOpenCellphoneCertify();
		});

		// 아이핀 인증
		$('#btnIpinCertify').on('click', function () {
			cfnOpenIpinCertify();
		});

		// 찾기결과
		var fnInfoConfirmCallBack = function (result) {
			$('.form_field').hide();
			$('.registration_cont').hide();
			$('.registration_nav').hide();
			$('#searchDiv').hide();
			if (result.isFind) {
				fnGetDisplaySucc(result.authMethod, result);
			} else {
				fnGetDisplayFail(result.authMethod);
			}
		};

		// 찾기성공
		var fnGetDisplaySucc = 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 fnGetDisplayFail = function (authMethod) {
			$('.form_head').hide();
			$('.registration_nav').hide();
			if (authMethod === 'custInfo') {
				$('#failCustId').show();
			}
			if (authMethod === 'mobile' || authMethod === 'ipin') {
				$('#failAuthentication').show();
			}

		};

		// 나이스 본인인증 후 콜백
		var fnNiceCallBack = 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, fnInfoConfirmCallBack)
			}
		};

		$(document).ready( function() {
			$('#searchCustInfo')[0].reset();
		});


		/*]]>*/
	</script>

</th:block>

</body>
</html>