|
|
@@ -0,0 +1,309 @@
|
|
|
+<!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/DefaultLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : SigninFormMob.html
|
|
|
+ * @desc : 로그인 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.03.10 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main class="container mb">
|
|
|
+ <div class="close">
|
|
|
+ <a href="javascript:void(0)" class="btn_close" onclick="cfnGoToPage(_PAGE_MAIN);"><span></span><span></span></a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content mb_login">
|
|
|
+
|
|
|
+ <div class="inner">
|
|
|
+ <h2 class="title">로그인</h2>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <form class="form_wrap form_full" name="loginForm" id="loginForm" th:action="@{/login}" method="post">
|
|
|
+ <div class="form_head"><h3 class="title sr-only">로그인</h3></div>
|
|
|
+ <div class="form_field mt0">
|
|
|
+ <input type="text" name="loginId" placeholder="아이디" class="form_control"minlength="4" maxlength="12" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="password" name="passwd" placeholder="비밀번호 8자~20자 입력" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/>
|
|
|
+ </div>
|
|
|
+ <div class="login_check mt10">
|
|
|
+ <div class="left">
|
|
|
+ <div class="form_field">
|
|
|
+ <input id="chkSaveId" type="checkbox"><label for="chkSaveId"><span>아이디 저장</span></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <ul>
|
|
|
+ <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>
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 보안문자 입력시 -->
|
|
|
+ <div>
|
|
|
+ <div class="captcha" style="display: none;"> <!-- 캡차영역 -->
|
|
|
+ <ul>
|
|
|
+ <li class="lap"> <!-- 캡차이미지 -->
|
|
|
+ <div class="captcha_box"> <!-- 캡차이미지 -->
|
|
|
+ <img src="" id="imgCaptcha"/>
|
|
|
+ </div>
|
|
|
+ <div class="captcha_btn_dual">
|
|
|
+ <button type="button" id="play_audio" onclick="fnReloadCaptchaImage();">새로고침</button>
|
|
|
+ <button type="button" id="swap_captcha">음성듣기</button>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="captcha_area">
|
|
|
+ <label for="captcha" id="label_captcha_area" class="sr-only">보안문자 입력</label>
|
|
|
+ <input type="text" id="captcha" name="captcha" placeholder="위 보안문자 이미지에 보이는 문자 입력" title="문자입력"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <p class="t_err mt10 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>초 남음
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <!-- //보안문자 입력시 -->
|
|
|
+ </div>
|
|
|
+ <div class="ui_row mt20">
|
|
|
+ <button type="button" class="btn btnL btn_dark" id="btnLogin">로그인</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="t_c sns_wrap">
|
|
|
+ <h3 class="sr-only">간편로그인</h3>
|
|
|
+ <ul class="login_utill">
|
|
|
+ <li class="lu_kakao">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="ico"></div>카카오로<br>시작하기
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="lu_naver">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="ico"></div>네이버로<br>시작하기
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="lu_yes24">
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <div class="ico"></div>YES24로<br>시작하기
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="t_c mt30"><botton class="btn_nonMb">비회원 주문조회</botton>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+ <!-- ★ 컨텐츠 종료 -->
|
|
|
+
|
|
|
+ </main>
|
|
|
+
|
|
|
+<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>
|
jsshin