style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!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  : SigninFormWeb.html
 * @desc    : 로그인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.15   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
<div id="container" class="container mb">
	<div class="wrap">
		<div class="content login"> <!-- 페이지특정 클래스 = login -->
			<div class="cont_head">
				<h4>로그인</h4>
			</div>
			<div class="cont_body">
				<form class="form_wrap form_col_c form_full" role="form" name="loginForm" id="loginForm" th:action="@{/login}" method="post">
					<div class="form_field mt0">
						<label class="input_label sr-only">아이디</label>
						<div class="ui_col_12">
							<div class="input_wrap">
								<input type="text" name="loginId" placeholder="아이디" class="form_control" minlength="4" maxlength="12" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디"/>
							</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="password" name="passwd" class="form_control" placeholder="비밀번호 8자 ~ 20자 입력" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/>
							</div>
						</div>
					</div>
					<div class="login_check">
						<div class="form_field">
							<input type="checkbox" id="chkSaveId"/><label for="chkSaveId"> <span>아이디 저장</span> </label>
						</div>
					</div>
					<!-- case (회원 아이디 또는 비밀번호가 일치하지 않을때,보안문자 입력시) -->
					<div class="help_block">
						<!-- //회원 아이디 또는 비밀번호가 일치하지 않을때 -->
						<!-- 보안문자 입력시 -->
						<div class="captcha mt40" style="display: none;"> <!-- 캡차영역 -->
							<ul>
								<li class="captcha_box"> <!-- 캡차이미지 -->
									<img src="" id="imgCaptcha"/>
								</li>
								<li class="captcha_btn_dual">
									<button type="button" id="play_audio" onclick="fnReloadCaptchaImage();">새로고침</button>
									<button type="button" id="swap_captcha">음성듣기</button>
								</li>
								<li class="captcha_area">
									<label for="captcha" id="label_captcha_area">보안문자 입력</label>
									<input type="text" id="captcha" name="captcha" title="문자입력"/>
								</li>
							</ul>
						</div>
						<!-- //보안문자 입력시 -->
						<!-- 회원 아이디 또는 비밀번호가 일치하지 않을때 -->
						<p class="t_err t_err_login_fail" style="display: none;">
							<span id="err_msg">보안문자 입력을 다시 시도해 주세요.</span><br/>
							(10회 이상 실패하면 180초 동안 로그인이 불가능 합니다.)<br/>
							<span id="login_fail_cnt">4</span>회 실패 / 잔여 : <span id="login_remain_cnt">6</span>회<span id="blockSecs1" style="display: none;"> / <span id="blockSecs2">180</span>초 남음</span>
						</p>
					</div>
					<!-- //case (회원 아이디 또는 비밀번호가 일치하지 않을때,보안문자 입력시) -->
					<div class="ui_row mt40">
						<div class="ui_col_12">
 							<button type="button" class="btn btn_dark btn_block" id="btnLogin">
								<span>로그인</span>
							</button>
						</div>
					</div>
					<div class="btn_mb_wrap">
						<ul>
							<li><a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">회원가입</a></li>
							<li><a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">아이디찾기</a></li>
							<li><a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_CUSTOMER_PWD_FIND);">비밀번호 찾기</a></li>
						</ul>
					</div>
					<div class="sns_wrap">
						<h5 class="sr-only">간편로그인</h5>
						<ul>
							<li>
								<a href="javascript:void(0)" onclick="cfnLoginKakao();">
									<i class="ico ico_snslogin kakao"></i>
									<span>카카오로 시작하기</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)" onclick="cfnLoginNaver();">
									<i class="ico ico_snslogin naver"></i>
									<span>네이버로 시작하기</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)" onclick="cfnLoginYes24();">
									<i class="ico ico_snslogin yes24"></i>
									<span>YES24로 시작하기</span>
								</a>
							</li>
						</ul>
					</div>
					<div class="t_c mt30">
						<button type="button" class="btn_nonMb"><span>비회원 주문조회</span></button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

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

	// 로그인블락시간(초) 설정
	let fnSetLoginBlockTime = function() {
		let blockSecs = Number($("#blockSecs2").html()) - 1;
		$("#blockSecs2").html(blockSecs);
		if (blockSecs == 0) {
			clearTimeout(fnSetLoginBlockTime);
			$('#btnLogin').attr('disabled',false);
		} else {
			setTimeout(fnSetLoginBlockTime, 1000);
		}
	}
	
	// 로그인
	$('#btnLogin').on('click', function() {
		if (!gagajf.validation($('#loginForm'))) {
			return;
		}

		let params = new Object();
		params.loginId = $('#loginForm input[name=loginId]').val();
		params.passwd = $('#loginForm input[name=passwd]').val();
		
		$.post($('#loginForm').prop('action')
			, $.param(params)
			, function(result) {
				if (result.status != 'OK') {

					if (result.status == 'PWD_5WRONG') {
						// Do nothing
					} else if (result.status == 'DORMANT_CUST') {
						// 휴면회원
						mcxDialog.alertC("휴면 고객님께서는 휴면을<br>해지하신 후 사용하실 수 있습니다.", {
							sureBtnText: "확인",
							sureBtnClick: function() {
								cfnGoToPage(_PAGE_CUSTOMER_DORMANT);
							}
						});

						return;
					} else if (result.status == 'SECEDE_CUST') {
						// 탈퇴회원
					} else if (result.status == 'SESSION_EXPIRED') {
						// 세션만료
					}

					if (!gagajf.isNull(result.message)) {
						let loginFailCnt = Number(result.loginFailInfo.loginFailCnt);
						
						$("#err_msg").html(result.message);
						$("#login_fail_cnt").html(loginFailCnt);
						$("#login_remain_cnt").html(10 - loginFailCnt);
						$(".t_err_login_fail").show();
						
						if (loginFailCnt >= 5 && loginFailCnt < 10) {
							// 비밀번호 5회 이상 틀린 경우 캡챠 노출
							$('.captcha').show();
						} else if (loginFailCnt >= 10) {
							$('.captcha').hide();
							
							// 비밀번호 10회 이상 틀린 경우 로그인 블락
							let blockSecs = Number(result.loginFailInfo.blockSecs);
							if (blockSecs > 0) {
								$("#blockSecs2").html(blockSecs);
								fnSetLoginBlockTime();
								$("#blockSecs1").show();
								$('#btnLogin').attr('disabled',true);
							}
						}
					}

					return; // 정상적으로 로그인 되지 않았으므로 return
				}
				
				document.location.href = result.returnUrl;
				
// 				if (gagajf.isNull(result.returnUrl)) {
// 					cfnGoToPage(_PAGE_MAIN);
// 				} else {
// 					if (result.returnUrl.indexOf(_PAGE_DIRECT_BUY) > -1) {
// 						// 바로주문
// 						jfOrderByMember();
// 					} else if (result.returnUrl.indexOf(_PAGE_CUSTOMER_JOIN) > -1 ||
// 						result.returnUrl.indexOf(_PAGE_CUSTOMER_ID_FIND) > -1 ||
// 						result.returnUrl.indexOf(_PAGE_CUSTOMER_PW_FIND) > -1 ||
// 						result.returnUrl.indexOf(_PAGE_CUSTOMER_JOIN_COMPLETE) > -1) {
// 						cfnGoToPage(_PAGE_MAIN);
// 					} else {
// 						document.location.href = result.returnUrl;
// 					}
// 				}
			}
			, 'json');
	});
	
	// Save ID
	$('#chkSaveId').on('click', function() {
		if ($(this).is(":checked")) {
			if (!gagajf.isNull($('#loginForm input[name=loginId]').val())) {
				gagajf.setCookie(ckLoginId, $('#loginForm input[name=loginId]').val(), 1);
			}
		} else {
			if (!gagajf.isNull(gagajf.getCookie(ckLoginId)) && (gagajf.getCookie(ckLoginId) === $('#loginForm input[name=loginId]').val())) {
				gagajf.setCookie(ckLoginId, $('#loginForm input[name=loginId]').val(), -1);
			}
		}
	});
	
	// 캡챠 이미지 로딩
	let fnReloadCaptchaImage = function() {
		$('#imgCaptcha').attr('src', '/common/captcha.do?dummy=' + new Date());
	}

	// SNS 로그인 콜백함수
	var fnSnsSigninCallback = function(userInfo) {
		// Ci이 조회 시 없음
		if (userInfo.custStat === 'DUP_PHONE_CUST') {
			mcxDialog.alert("이미 사용 중인 휴대전화번호 입니다.");
			return;
		}
		if (userInfo.custStat === 'DUP_EMAIL_CUST') {
			mcxDialog.alert("이미 사용 중인 이메일 입니다.");
			return;
		}
		if (userInfo.custStat === 'EMPTY_PHONE_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_SNS_JOIN);
		}
		// Ci이 조회 시 있음
		if (userInfo.custStat === 'SECEDE_CUST') {
			mcxDialog.alert("탈퇴 회원 입니다.");
			return;
		}
		if (userInfo.custStat === 'DORMANT_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_DORMANT);
		}
		if (userInfo.custStat === 'FAIL_CUST') {
			mcxDialog.alert("회원가입에 실패 했습니다.<br> 고객센터에 문의 하시기 바랍니다.");
			return;
		}
		if (userInfo.custStat === 'NEW_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
		}


		if (userInfo.custStat === 'SUCC_CUST') {
			let params = {};
			params.snsType = userInfo.snsType;
			params.snsId = [[${snsLoginPrefix}]] + userInfo.snsId;
			$.post(_frontUrl + '/login'
				, $.param(params)
				, function(result) {
					fnReloadAfterLogin(result);
				}
				, "json");
		}


	};

	var fnReloadAfterLogin = function(result) {
		if (result.status === 'OK') {
			document.location.href = result.returnUrl;
		} else if (result.status === 'EMAIL_DUP') {

		} else if(result.status === 'DORMANT_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_DORMANT);
		} else if(result.status === 'SECEDE_CUST') {

		} else {
			//cfnGoToPage(_PAGE_CUSTOMER_JOIN_CERTIFY_SNS);
		}
	};


	$(document).ready(function() {
		$('#loginForm input[name=loginId]').val(gagajf.getCookie(ckLoginId));
		if (gagajf.isNull($('#loginForm input[name=loginId]').val())) {
			$('#loginForm input[name=loginId]').focus();
			$('#chkSaveId').prop('checked', false);
		} else {
			$('#loginForm input[name=passwd]').focus();
			$('#chkSaveId').prop('checked', true);
		}
	});
/*]]>*/
</script>

</th:block>

</body>
</html>