style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
							<!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  : FindIdFormWeb.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">
			<div class="cont_head">
				<h3>style24</h3>
			</div>
			<div class="cont_body">
				<div class="form_wrap form_col_c">
					<div class="form_head">
						<h4>아이디&#47;비밀번호 찾기</h4>
					</div>
					<div class="registration_nav">
						<ul>
							<li class="active"><a href="javascript:void(0)">아이디 찾기</a></li>
							<li><a href="javascript:void(0)">비밀번호 찾기</a></li>
						</ul>
					</div>
					<div class="registration_tap">
						<div class="form_group" style="display: block;">
							<!-- 아이디찾기일경우 -->
							<div id="searchDiv" class="foldGroup checkcase">
								<ul>
									<li>
										<form id="searchCustInfo" name="searchCustInfo" class="form_wrap" method="post">
											<div class="fold_head">
												<a href="javascript:void(0)">
													<div>
														<div class="fold_tit">
															<span>회원정보로 찾기</span>
														</div>
													</div>
												</a>
											</div>
											<div class="fold_cont">
												<div class="txt mb30">
													<p>등록된 내 회원정보로 찾을 수 있습니다.</p>
												</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">생년월일 8자리 (예:19880912)</label>
													<div class="ui_col_12">
														<div class="input_wrap">
															<input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" 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" 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>
										</form>
									</li>
									<li>
										<form id="certifyPhone" name="certifyPhone" class="form_wrap" role="form">
											<div class="fold_head">
												<a href="javascript:void(0)">
													<div>
														<div class="fold_tit" style="width: inherit;">
															<span style="width: inherit;">휴대폰 본인인증으로 찾기</span>
														</div>
													</div>
												</a>
											</div>
											<div class="fold_cont">
												<div class="txt">
													<p>회원님의 명의로 등록된 휴대폰으로 본인확인을 진행합니다.</p>
												</div>
												<div class="ui_row mt20">
													<div class="ui_col_12">
														<button type="button" id="btnPhoneConfirm" class="btn btn_dark btn_block">
															<span>본인명의 휴대폰으로 인증</span>
														</button>
													</div>
												</div>
											</div>
										</form>
									</li>
									<li>
										<form id="certifyIpin" name="certifyIpin" class="form_wrap" role="form">
											<div class="fold_head">
												<a href="javascript:void(0)">
													<div>
														<div class="fold_tit" style="width: inherit;">
															<span style="width: inherit;">아이핀 인증으로 찾기</span>
														</div>
													</div>
												</a>
											</div>
											<div class="fold_cont">
												<div class="txt">
													<p>아이핀 인증을 통해 찾을 수 있습니다.</p>
												</div>
												<div class="ui_row mt20">
													<div class="ui_col_12">
														<button type="button" id="btnIpinConfirm" class="btn btn_dark btn_block">
															<span>아이핀 인증</span>
														</button>
													</div>
												</div>
											</div>
										</form>
									</li>
								</ul>
							</div>
							<!-- //아이디찾기일경우 -->
							<!-- 아이디찾기 성공일경우 -->
							<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" style="display: none;">
											<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">
											<span>로그인 하기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //아이디찾기 성공일경우 -->
							<!-- 회원정보로 아이디찾기 실패일경우 -->
							<div id="failCustId" class="find_result clear" style="display: none;">
								<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">
											<span>회원가입</span>
										</button>
									</div>
									<div class="ui_col_6">
										<button type="button" class="btn btn_dark btn_block">
											<span>다시 찾기</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //회원정보로 아이디찾기 실패일경우 -->
							<!-- 휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
							<div id="failCertification" 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 class="btn btn_primary btn_block">
											<span>회원가입</span>
										</button>
									</div>
								</div>
							</div>
							<!-- //휴대폰,아이핀 본인인증으로 아이디찾기 실패일경우 -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/

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

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

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

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

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


	// 찾기 결과
	var fnInfoConfirmCallBack = function (result) {
		console.log(result);
		$('#searchDiv').hide();
		// 1. 성공여부
		if (result.isFind) {
			fnDataBinding(result.authType, result, result.isFind);
		} else {
			fnDataBinding(result.authType, result, result.isFind);
		}
	};

	var fnDataBinding = function (authType, custInfo, isFind) {
		$('#resultId').text(custInfo.maskingCustId);
		$('#joinDt').text(toDateFormat(custInfo.joinDt).replaceAll('-','.'));
		let joinPath = fnSnsJoinPath(custInfo); // 가입경로 : 직접이면 표시 안함, 간편가입 연동 표시
		if (!gagajf.isNull(joinPath)) {
			$('#liJoinPath').show();
			$('#joinPath').text(joinPath);
		}
		if (authType === 'custInfo') {
			if (isFind) {
				$('#succeedCustId').show();
			} else {
				$('#failCustId').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 = '네이버로 연동'
		}
		if (!gagajf.isNull(custInfo.kkJoinDt)) {
			if (!gagajf.isNull(snsType)) {
				snsType += '/'
			}
			snsType += '카카오로 연동';
		}
		return snsType;
	}


	// 이메일 체크
	var fnCheckValidationEmail = function (email) {
		const regexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
		let result = true;
		if (!regexp.test(email)) {
			result = false;
		}
		return result;
	};

	var toDateFormat =  function(value) {
		if (gagajf.isNull(value))
			return "";
		return value.replaceAll("/", "").replaceAll("-", "").toDate("YYYYMMDD").format("YYYY-MM-DD");
	}

	var ajaxJsonSubmit = function (url, json, callback) {
		$.ajax({
			type : "POST",
			url : url,
			dataType : 'json',
			data : json,
			beforeSend : function(xhr, opts) { // 통신 전
				// when validation is false
				// AJAX call
				xhr.setRequestHeader('AJAX', 'true');
				// dataType: "json"일 때
				xhr.setRequestHeader('Accept', 'application/json');
				xhr.setRequestHeader('Content-Type', 'application/json');
			},
			success : function(result) {
				if (typeof(result.status) == 'undefined' || result.status === 200) { // 성공
					if (!gagajf.isNull(result.message)) {
						if (alert(result.message)) {
							if (typeof(callback) === 'function') {
								callback.call(this, result);
							}
						}
					} else {
						if (typeof(callback) == "function") {
							callback.call(this, result);
						}
					}
				} else { // 실패
					if (!gagajf.isNull(result.error.message)) {
						alert(result.error.message);
					}
				}
			},
			error : function() {
				// error code
				alert('오류로 인해 처리되지 않았습니다.');
			}
		});
	}


/*]]>*/
</script>

</th:block>

</body>
</html>