|
|
@@ -0,0 +1,234 @@
|
|
|
+<!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">
|
|
|
+ <h3>style24</h3>
|
|
|
+ </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_head">
|
|
|
+ <h4>로그인</h4>
|
|
|
+ </div>
|
|
|
+ <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="20" required="required" 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자 입력" 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 class="btn_wrap">
|
|
|
+ <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>
|
|
|
+ <!-- case (회원 아이디 또는 비밀번호가 일치하지 않을때,보안문자 입력시) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 회원 아이디 또는 비밀번호가 일치하지 않을때 -->
|
|
|
+ <p class="t_err t_err_login_fail" style="display: none;">
|
|
|
+ <span id="not_exist">회원 아이디 또는 비밀번호가 일치하지 않습니다.</span><br/>
|
|
|
+ (10회 이상 실패하면 180초 동안 로그인이 불가능 합니다.)<br/>
|
|
|
+ <span id="login_fail_cnt">4</span>회 실패 / 잔여 : <span id="login_remain_cnt">6</span>회 / <span>180</span>초 남음
|
|
|
+ </p>
|
|
|
+ <!-- //회원 아이디 또는 비밀번호가 일치하지 않을때 -->
|
|
|
+ <!-- 보안문자 입력시 -->
|
|
|
+ <div class="captcha mt40" style="display: none;"> <!-- 캡차영역 -->
|
|
|
+ <ul>
|
|
|
+ <li class="captcha_box"> <!-- 캡차이미지 -->
|
|
|
+ </li>
|
|
|
+ <li class="captcha_btn_dual">
|
|
|
+ <button type="button" id="play_audio">새로고침</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_captcha" style="display: none;">
|
|
|
+ 보안문자 입력을 다시 시도해 주세요.<br/>
|
|
|
+ (10회 이상 실패하면 300초 동안 로그인이 불가능 합니다.)<br/>
|
|
|
+ <span>10</span>회 실패 / 잔여 : <span>0</span>회 / <span>180</span>초 남음
|
|
|
+ </p>
|
|
|
+ <!-- //보안문자 입력시 -->
|
|
|
+ </div>
|
|
|
+ <!-- //case (회원 아이디 또는 비밀번호가 일치하지 않을때,보안문자 입력시) -->
|
|
|
+ <div class="ui_row mt40">
|
|
|
+ <div class="ui_col_12">
|
|
|
+<!-- <button class="btn btn_dark btn_block" onclick="fnLogin();"><span>로그인</span></button> -->
|
|
|
+ <a class="btn btn_dark btn_block" onclick="fnLogin();"><span>로그인</span></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sns_wrap">
|
|
|
+ <h5 class="sr-only">간편로그인</h5>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <i class="ico ico_snslogin kakao"></i>
|
|
|
+ <span>카카오로 시작하기</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <i class="ico ico_snslogin naver"></i>
|
|
|
+ <span>네이버로 시작하기</span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:void(0)">
|
|
|
+ <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";
|
|
|
+
|
|
|
+ // 로그인
|
|
|
+ var fnLogin = 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 (!gagajf.isNull(result.message)) {
|
|
|
+ $("#not_exist").html(result.message);
|
|
|
+ $("#login_fail_cnt").html(result.loginFailCnt);
|
|
|
+ $("#login_remain_cnt").html(10 - Number(result.loginFailCnt));
|
|
|
+ $(".t_err_login_fail").show();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (result.status == 'PWD_5WRONG') {
|
|
|
+ // 비밀번호 5회 이상 틀린 경우
|
|
|
+ } else if (result.status == 'DORMANT_CUST') {
|
|
|
+ // 휴면회원
|
|
|
+ //cfnGoToPage(_PAGE_DORMANT_GUIDE);
|
|
|
+ } else if (result.status == 'SECEDE_CUST') {
|
|
|
+ // 탈퇴회원
|
|
|
+ } else if (result.status == 'SESSION_EXPIRED') {
|
|
|
+ // 세션만료
|
|
|
+ }
|
|
|
+
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 카카오 로그인
|
|
|
+ var fnLoginKakao = function() {
|
|
|
+ document.location.href = _frontUrl + '/signin/kakologin';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 네이버 로그인
|
|
|
+ var fnLoginNaver = function() {
|
|
|
+ document.location.href = _frontUrl + '/signin/naverlogin';
|
|
|
+ };
|
|
|
+
|
|
|
+ // YES24 로그인
|
|
|
+ var fnLoginYes24 = function() {
|
|
|
+ document.location.href = _frontUrl + '/signin/yes24login';
|
|
|
+ };
|
|
|
+
|
|
|
+ $(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>
|