|
|
@@ -17,194 +17,265 @@
|
|
|
*******************************************************************************
|
|
|
-->
|
|
|
<body>
|
|
|
- <div class="app">
|
|
|
-
|
|
|
- <a href="#mainCon" class="skipNav">본문바로가기</a>
|
|
|
- <header></header>
|
|
|
-
|
|
|
- <main role="" id="" class="container mb">
|
|
|
-
|
|
|
- <!-- ★ 컨텐츠 시작 -->
|
|
|
- <section class="content mb_idInquiry_1">
|
|
|
- <div class="inner">
|
|
|
- <div class="close">
|
|
|
- <a href="#none" class="btn_close"><span></span><span></span></a>
|
|
|
- </div>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main class="container mb">
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content mb_idInquiry_1">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="close">
|
|
|
+ <a href="javascript:void(0);" class="btn_close" onclick="cfnGoToPage(_PAGE_MAIN);"><span></span><span></span></a>
|
|
|
</div>
|
|
|
- <div class="inner">
|
|
|
- <h2 class="title">아이디/비밀번호찾기</h2>
|
|
|
- </div>
|
|
|
- <div class="inner">
|
|
|
- <div class="registration_nav">
|
|
|
- <ul class="tab_btn">
|
|
|
- <li class="active">아이디찾기</li>
|
|
|
- <li>비밀번호찾기</li>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <h2 class="title">아이디/비밀번호찾기</h2>
|
|
|
+ </div>
|
|
|
+ <div class="inner">
|
|
|
+ <div class="registration_nav">
|
|
|
+ <ul class="tab_btn">
|
|
|
+ <li onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">아이디찾기</li>
|
|
|
+ <li class="active">비밀번호찾기</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="registration_tap">
|
|
|
+ <div class="form_group">
|
|
|
+ <!-- 라디오탭 -->
|
|
|
+ <div class="radio_nav">
|
|
|
+ <ul class="form_field">
|
|
|
+ <li class="ui_col_4 active">
|
|
|
+ <input type="radio" name="radio1" id="rdi1-1" value="1" checked><label for="rdi1-1"> <span>회원정보인증</span> </label>
|
|
|
+ </li>
|
|
|
+ <li class="ui_col_4">
|
|
|
+ <input type="radio" name="radio1" id="rdi1-2" value="2"><label for="rdi1-2"> <span>휴대폰인증</span> </label>
|
|
|
+ </li>
|
|
|
+ <li class="ui_col_4">
|
|
|
+ <input type="radio" name="radio1" id="rdi1-3" value="3"><label for="rdi1-3"> <span>아이핀인증</span> </label>
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="registration_tap">
|
|
|
+ <!-- //라디오탭 -->
|
|
|
+ <!-- 라디오탭 -->
|
|
|
+ <div class="radio_tap">
|
|
|
<div class="form_group">
|
|
|
- <!-- 라디오탭 -->
|
|
|
- <div class="radio_nav">
|
|
|
- <ul class="form_field">
|
|
|
- <li class="ui_col_4 active">
|
|
|
- <input type="radio" name="radio1" id="rdi1-1" value="1" checked><label for="rdi1-1"> <span>회원정보인증</span> </label>
|
|
|
- </li>
|
|
|
- <li class="ui_col_4">
|
|
|
- <input type="radio" name="radio1" id="rdi1-2" value="2"><label for="rdi1-2"> <span>휴대폰인증</span> </label>
|
|
|
- </li>
|
|
|
- <li class="ui_col_4">
|
|
|
- <input type="radio" name="radio1" id="rdi1-3" value="3"><label for="rdi1-3"> <span>아이핀인증</span> </label>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- //라디오탭 -->
|
|
|
- <!-- 라디오탭 -->
|
|
|
- <div class="radio_tap">
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="form_field mt0"><input type="text" placeholder="이름" class="form_control"></div>
|
|
|
- <div class="form_field"><input type="password" placeholder="생년월일 8자리(예:19880912)" class="form_control"></div>
|
|
|
- <div class="form_field"><input type="text" placeholder="이메일" class="form_control"></div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">확인</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="txt">
|
|
|
- 회원님의 명의로 등록된 휴대폰으로<br>
|
|
|
- 본인확인을 진행합니다.
|
|
|
- </div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">본인명의 휴대폰으로 인증</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ <form id="searchCustInfo" name="searchCustInfo" class="form_wrap form_full" method="post">
|
|
|
+ <div>
|
|
|
+ <div class="form_field mt0">
|
|
|
+ <input type="text" name="custId" placeholder="아이디" id="custId" class="form_control" minlength="4" maxlength="12"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="custNm" placeholder="이름" id="custNm" class="form_control" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="email" placeholder="이메일" id="email" class="form_control" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ <div class="ui_row mt20">
|
|
|
+ <button type="button" id="btnInfoConfirm" class="btn btn_dark">확인</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="txt">
|
|
|
- 아이핀 인증을 통해 찾을 수 있습니다.
|
|
|
- </div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">아이핀 인증</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="form_group" style="display: none;">
|
|
|
+ <div class="form_wrap form_full">
|
|
|
+ <div>
|
|
|
+ <div class="txt">
|
|
|
+ 회원님의 명의로 등록된 휴대폰으로<br>
|
|
|
+ 본인확인을 진행합니다.
|
|
|
+ </div>
|
|
|
+ <div class="ui_row mt20">
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_dark">본인명의 휴대폰으로 인증</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- //라디오탭 -->
|
|
|
-
|
|
|
</div>
|
|
|
- <div class="form_group">
|
|
|
- <!-- 라디오탭 -->
|
|
|
- <div class="radio_nav">
|
|
|
- <ul class="form_field">
|
|
|
- <li class="ui_col_4 active">
|
|
|
- <input type="radio" name="radios" id="rdi-4" value="4" checked><label for="rdi-4"> <span>회원정보인증</span> </label>
|
|
|
- </li>
|
|
|
- <li class="ui_col_4">
|
|
|
- <input type="radio" name="radios" id="rdi-5" value="5"><label for="rdi-5"> <span>휴대폰인증</span> </label>
|
|
|
- </li>
|
|
|
- <li class="ui_col_4">
|
|
|
- <input type="radio" name="radios" id="rdi-6" value="6"><label for="rdi-6"> <span>아이핀인증</span> </label>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- //라디오탭 -->
|
|
|
- <!-- 라디오탭 -->
|
|
|
- <div class="radio_tap">
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="form_field mt0"><input type="text" placeholder="이름" class="form_control"></div>
|
|
|
- <div class="form_field"><input type="password" placeholder="생년월일 8자리(예:19880912)" class="form_control"></div>
|
|
|
- <div class="form_field"><input type="text" placeholder="이메일" class="form_control"></div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">확인</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="txt">
|
|
|
- 회원님의 명의로 등록된 휴대폰으로<br>
|
|
|
- 본인확인을 진행합니다.
|
|
|
- </div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">본인명의 휴대폰으로 인증</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="form_group">
|
|
|
- <form class="form_wrap form_full">
|
|
|
- <div>
|
|
|
- <div class="txt">
|
|
|
- 아이핀 인증을 통해 찾을 수 있습니다.
|
|
|
- </div>
|
|
|
- <div class="ui_row mt20"><button class="btn btn_dark">아이핀 인증</button></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ <div class="form_group" style="display: none;">
|
|
|
+ <div class="form_wrap form_full">
|
|
|
+ <div>
|
|
|
+ <div class="txt">
|
|
|
+ 아이핀 인증을 통해 찾을 수 있습니다.
|
|
|
+ </div>
|
|
|
+ <div class="ui_row mt20">
|
|
|
+ <button type="button" id="btnIpinCertify" class="btn btn_dark">아이핀 인증</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- //라디오탭 -->
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- //라디오탭 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 임시비밀번호 발급 -->
|
|
|
+ <div id="sendEmailDiv" class="find_result clear" style="display: none;">
|
|
|
+ <div class="form_info">
|
|
|
+ <span class="ico_content_mail"></span>
|
|
|
+ <p>아래의 이메일로 임시비밀번호가 발급되었습니다.</p>
|
|
|
+ <p class="t_info mt10">
|
|
|
+ 로그인 시 비밀번호를 새로 설정하신 후 이용하실 수 있습니다.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="form_print_bar mt40">
|
|
|
+ <p id="sendEmail" class="c_primary bold" data-font="lato"></p>
|
|
|
+ </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" onclick="cfnGoToPage(_PAGE_LOGIN);">
|
|
|
+ <span>로그인 하기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //임시비밀번호 발급 -->
|
|
|
+ <!-- 회원정보로 비밀번호 찾기 실패일경우 -->
|
|
|
+ <div id="failCustId" class="form_wrap form_full" style="display: none;">
|
|
|
+ <div class="find_result clear">
|
|
|
+ <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" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN);">
|
|
|
+ <span>회원가입</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="ui_col_6">
|
|
|
+ <button type="button" class="btn btn_dark" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
|
|
|
+ <span>다시 찾기</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //회원정보로 비밀번호 찾기 실패일경우 -->
|
|
|
+ <!-- 휴대폰,아이핀 본인인증으로 비밀번호찾기 실패일경우 -->
|
|
|
+ <div id="failAuthentication" class="form_wrap form_full" style="display: none;">
|
|
|
+ <div class="find_result clear">
|
|
|
+ <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 type="button" class="btn btn_primary" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN);">
|
|
|
+ <span>회원가입</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- //휴대폰,아이핀 본인인증으로 비밀번호찾기 실패일경우 -->
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- ★ 컨텐츠 종료 -->
|
|
|
+ </main>
|
|
|
+<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+ const sEncData = [[${sEncData}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
|
|
|
- </section>
|
|
|
- <!-- ★ 컨텐츠 종료 -->
|
|
|
+ $('#btnInfoConfirm').on('click', function () {
|
|
|
+ let custInfo = $('#searchCustInfo').serializeObject();
|
|
|
|
|
|
- </main>
|
|
|
+ if(gagajf.isNull(custInfo.custId)) {
|
|
|
+ mcxDialog.alert("아이디를 입력해주세요.");
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- <footer></footer>
|
|
|
+ if (gagajf.isNull(custInfo.custNm)) {
|
|
|
+ mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- </div>
|
|
|
+ if (gagajf.isNull(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일을 입력하여 주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- <script>
|
|
|
- $(document).ready(function () {
|
|
|
- /* 아이디/비밀번호 찾기_taps */
|
|
|
- $('.registration_tap > .form_group').hide();
|
|
|
- $('.registration_tap > .form_group').eq(0).show();
|
|
|
- $(document).on('click','.registration_nav > ul > li',function(e){
|
|
|
- $(this).addClass('active').siblings().removeClass('active');
|
|
|
- $('.registration_tap > .form_group').hide();
|
|
|
- $('.registration_tap > .form_group').eq($(this).index()).show();
|
|
|
- return false;
|
|
|
- });
|
|
|
+ if (!fnCheckValidationEmail(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- /* 회원정보인증/휴대폰인증/아이핀인증_taps */
|
|
|
- $('.radio_tap > .form_group').hide();
|
|
|
- $('.radio_tap > .form_group').eq(0).show();
|
|
|
- $('.radio_tap').each(function(){
|
|
|
- $(this).find('.form_group').hide();
|
|
|
- $(this).find('.form_group').eq(0).show();
|
|
|
- });
|
|
|
+ custInfo.authMethod = 'custInfo';
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ //console.log('jsonData', jsonData);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnInfoConfirmCallBack);
|
|
|
+ });
|
|
|
|
|
|
- $(document).on('click','.radio_nav > ul > li',function(e){
|
|
|
- $(this).addClass('active').siblings().removeClass('active');
|
|
|
- $(this).find('input').prop("checked", true);
|
|
|
- $(this).parent().parent().parent().find('.radio_tap > .form_group').hide();
|
|
|
- $(this).parent().parent().parent().find('.radio_tap > .form_group').eq($(this).index()).show();
|
|
|
- return false;
|
|
|
- });
|
|
|
- });
|
|
|
- </script>
|
|
|
+ // 휴대폰 인증
|
|
|
+ $('#btnCellPhoneCertify').on('click', function () {
|
|
|
+ cfnOpenCellphoneCertify(_PAGE_CUSTOMER_PWD_FIND);
|
|
|
+ });
|
|
|
|
|
|
- <script type="text/javascript">
|
|
|
- $(document).ready(function(){
|
|
|
- setHtop();
|
|
|
- });
|
|
|
+ // 아이핀 인증
|
|
|
+ $('#btnIpinCertify').on('click', function () {
|
|
|
+ cfnOpenIpinCertify(_PAGE_CUSTOMER_PWD_FIND);
|
|
|
+ });
|
|
|
|
|
|
- function setHtop() {
|
|
|
- if($('header').hasClass('main')) {
|
|
|
- $('#htopMain').show();
|
|
|
- $('#htopSub').hide();
|
|
|
- } else {
|
|
|
- $('#htopMain').hide();
|
|
|
- $('#gnb').hide();
|
|
|
- $('#htopSub').show();
|
|
|
- }
|
|
|
+ // 찾기결과
|
|
|
+ var fnInfoConfirmCallBack = function (result) {
|
|
|
+ $('#btnInfoConfirm').hide();
|
|
|
+ $('.form_field').hide();
|
|
|
+ $('.registration_cont').hide();
|
|
|
+ $('.registration_nav').hide();
|
|
|
+ $('#searchDiv').hide();
|
|
|
+ if (result.isFind) {
|
|
|
+ fnGetDisplaySucc(result.authMethod, result);
|
|
|
+ } else {
|
|
|
+ fnGetDisplayFail(result.authMethod);
|
|
|
}
|
|
|
- </script>
|
|
|
-</body>
|
|
|
+ };
|
|
|
|
|
|
+ // 찾기성공
|
|
|
+ var fnGetDisplaySucc = function (authMethod, custInfo) {
|
|
|
+ if (custInfo.authMethod === 'custInfo') {
|
|
|
+ $('#sendEmail').text(custInfo.maskingEmail)
|
|
|
+ $('#sendEmailDiv').show();
|
|
|
+ }
|
|
|
+ if (authMethod === 'mobile' || authMethod === 'ipin') {
|
|
|
+ cfnGoToPage(_PAGE_CUSTOMER_PWD_CHANGE_FIND);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnNiceCallBack = function(encData, authMethod) {
|
|
|
+ if (!gagajf.isNull(encData)) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.encData = encData;
|
|
|
+ custInfo.authMethod = authMethod;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/password/find/certify', jsonData, fnInfoConfirmCallBack)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ if (!gagajf.isNull(sEncData)) {
|
|
|
+ fnNiceCallBack(sEncData, authMethod);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 회원정보인증/휴대폰인증/아이핀인증_taps */
|
|
|
+ $('.radio_tap > .form_group').hide();
|
|
|
+ $('.radio_tap > .form_group').eq(0).show();
|
|
|
+ $('.radio_tap').each(function(){
|
|
|
+ $(this).find('.form_group').hide();
|
|
|
+ $(this).find('.form_group').eq(0).show();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on('click','.radio_nav > ul > li',function(e){
|
|
|
+ $(this).addClass('active').siblings().removeClass('active');
|
|
|
+ $(this).find('input').prop("checked", true);
|
|
|
+ $(this).parent().parent().parent().find('.radio_tap > .form_group').hide();
|
|
|
+ $(this).parent().parent().parent().find('.radio_tap > .form_group').eq($(this).index()).show();
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+</th:block>
|
|
|
+</body>
|
|
|
</html>
|
jsshin