style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							<!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 id="recaptcha" class="g-recaptcha" style="display: none;" data-callback="fnRecaptchaCallback" th:data-sitekey="${sitekey}"></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 rechaptchCheck = true;

	// 로그인
	$('#btnLogin').on('click', function() {
		if (!gagajf.validation($('#loginForm'))) {
			return;
		}
		if (!rechaptchCheck) {
			mcxDialog.alert("자동 방지 봇을 확인 한뒤 진행 해 주세요.");
			return;
		}

		let params = {};
		params.loginId = $('#loginForm input[name=loginId]').val();
		params.passwd = $('#loginForm input[name=passwd]').val();

		$.post($('#loginForm').prop('action')
			, $.param(params)
			, fnReloadAfterLogin
			, '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);
			}
		}
	});

	//엔터키 로그인
	$('#loginForm input[name=passwd]').keypress(function (event) {
		if (event.which === 13) {
			event.preventDefault();
			$('#btnLogin').trigger('click');
		}
	});

	// 로그인 후 처리
	var fnReloadAfterLogin = function(result) {
		if (result.status === 'OK') {
			document.location.href = result.returnUrl;
		} else {
			fnFailLoginProcess(result);
		}
	};

	// 로그인 실패 후 과정
	var fnFailLoginProcess = function (result) {
		// 탈퇴회원
		if (result.status === 'SECEDE_CUST') {
			mcxDialog.alert("탈퇴 회원 입니다.");
			return;
		}
		// 휴면회원
		if (result.status === 'DORMANT_CUST') {
			mcxDialog.alertC("휴면 고객님께서는 휴면을<br>해지하신 후 사용하실 수 있습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					cfnGoToPage(_PAGE_CUSTOMER_DORMANT);
				}
			});
			return;
		}
		// CI(본인인증)정보 없는 회원
		if (result.status === 'CI_EMPTY') {
			// 본인이증 필요한 회원
			mcxDialog.alertC("본인인증 후 다시 로그인 하시기 바랍니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					cfnGoToPage(_PAGE_CUSTOMER_CERTIFICATION);
				}
			});
			return;
		}
		// 비밀번호 틀린 경우
		if (!gagajf.isNull(result.message)) {
			grecaptcha.reset(); // 리캡챠 리셋
			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();

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

		return; // 정상적으로 로그인 되지 않았으므로 return
	}


	// 구글 캡챠 콜백함수
	var fnRecaptchaCallback = function () {
		let token = $("#g-recaptcha-response").val();
		let params = {};
		params.token = token;
		gagajf.ajaxSubmit('/verify/recaptcha','', fnVerifyReCaptchaCallback, params);
	};

	// Token 인증
	var fnVerifyReCaptchaCallback = function (result) {
		if (result.success) {
			rechaptchCheck = true;
		} else {
			rechaptchCheck = false;
		}
	};

	// 로그인블락시간(초) 설정
	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);
		}
	}

	// SNS 로그인 콜백함수(네이버, 카카오, YES24)
	var fnSnsSigninCallback = function(userInfo) {
		// 1. CI 정보로 사용자가 없어서 회원가입 프로세스 처리 중 이메일, 휴대전화 중복
		if (userInfo.custStat === 'DUP_PHONE_CUST') {
			mcxDialog.alert("이미 사용 중인 휴대전화번호 입니다.");
			return;
		}
		if (userInfo.custStat === 'DUP_EMAIL_CUST') {
			mcxDialog.alert("이미 사용 중인 이메일 입니다.");
			return;
		}
		// 2. SNS 로그인 정보로 탈퇴확인
		if (userInfo.custStat === 'SECEDE_CUST') {
			mcxDialog.alert("탈퇴 회원 입니다.");
			return;
		}
		// 3. SNS 로그인 정보로 휴면확인
		if (userInfo.custStat === 'DORMANT_CUST') {
			mcxDialog.alertC("휴면 고객님께서는 휴면을<br>해지하신 후 사용하실 수 있습니다.", {
				sureBtnText: "확인",
				sureBtnClick: function() {
					cfnGoToPage(_PAGE_CUSTOMER_DORMANT);
				}
			});
			return;
		}
		// 4. 휴대전화 정보가 없으면 SNS 가입화면 이동
		if (userInfo.custStat === 'EMPTY_PHONE_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_SNS_JOIN);
		}
		// 5. YES24 첫 로그인 시도 시 정보동의 페이지 이동
		if (userInfo.custStat === 'NEED_AGREE_CUST') {
			cfnConsentUseInfo(userInfo.custNm);
			return;
		}
		// 6. SNS 정보로 가입 성공시 가입완료 페이지 이동
		if (userInfo.custStat === 'NEW_CUST') {
			cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
			return;
		}
		// 7.SNS 정보로 가입 실패시 안내 창 알림
		if (userInfo.custStat === 'FAIL_CUST') {
			mcxDialog.alert("회원가입에 실패 했습니다.<br> 고객센터에 문의 하시기 바랍니다.");
			return;
		}
		// 8. SNS 로그인 연동 성공 및 기존 SNS 연동된 회원 로그인 시도
		if (userInfo.custStat === 'SUCC_CUST') {
			let params = {};
			params.snsType = userInfo.snsType;
			params.snsId = [[${snsLoginPrefix}]] + userInfo.snsId;
			$.post(_frontUrl + '/login'
				, $.param(params)
				,fnReloadAfterLogin
				, "json");
		}
	};

	$(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>