|
|
@@ -0,0 +1,446 @@
|
|
|
+<!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/LoginLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : IdAndPwdFindFormMob.html
|
|
|
+ * @desc : 아이디 & 비밀번호 찾기 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.04.12 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main class="container mb">
|
|
|
+ <!-- ★ 컨텐츠 시작 -->
|
|
|
+ <section class="content mb_idInquiry_1">
|
|
|
+ <div class="inner">
|
|
|
+ <div class="close">
|
|
|
+ <a href="javascript:history.back(-1);" class="btn_close"><span></span><span></span></a>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="registration_tap">
|
|
|
+ <div class="form_group">
|
|
|
+ <!-- 라디오탭 -->
|
|
|
+ <div id="searchDiv" 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 id="searchCustId" name="searchCustId" class="form_wrap form_full" method="post">
|
|
|
+ <div>
|
|
|
+ <div class="form_field mt0">
|
|
|
+ <input type="text" name="custNm" placeholder="이름" id="custNm" class="form_control" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="birthYmd" placeholder="생년월일 8자리 (예:19880912)" id="birthYmd" class="form_control"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="email" placeholder="이메일" id="email" class="form_control"/>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnCustIdConfirm" class="btn btn_dark">확인</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <form id="searchCustPwd" name="searchCustPwd" class="form_wrap form_full" method="post">
|
|
|
+ <div>
|
|
|
+ <div class="form_field mt0">
|
|
|
+ <input type="text" name="custId" placeholder="아이디" class="form_control" minlength="4" maxlength="12"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="custNm" placeholder="이름" class="form_control" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ <div class="form_field">
|
|
|
+ <input type="text" name="email" placeholder="이메일" class="form_control" maxlength="30"/>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnCustPwdConfirm" class="btn btn_dark">확인</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="form_group" style="display: none;">
|
|
|
+ <div class="form_wrap form_full">
|
|
|
+ <div>
|
|
|
+ <div class="txt">
|
|
|
+ 회원님의 명의로 등록된 휴대폰으로<br>
|
|
|
+ 본인확인을 진행합니다.
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnCellPhoneCertify" class="btn btn_dark">
|
|
|
+ 본인명의 휴대폰으로 인증
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_group" style="display: none;">
|
|
|
+ <div class="form_wrap form_full">
|
|
|
+ <div>
|
|
|
+ <div class="txt">
|
|
|
+ 아이핀 인증을 통해 찾을 수 있습니다.
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" id="btnIpinCertify" class="btn btn_dark">
|
|
|
+ 아이핀 인증
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 아이디찾기 결과 -->
|
|
|
+ <div id="succeedCustId" class="form_wrap form_full" style="display: none;">
|
|
|
+ <div class="find_result clear">
|
|
|
+ <div class="form_info">
|
|
|
+ <span class="ico_content_find"></span>
|
|
|
+ <p>아이디 찾기 결과 안내</p>
|
|
|
+ </div>
|
|
|
+ <div class="form_print_bar mt40">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span class="t_span">아이디</span>
|
|
|
+ <span id="resultId" name="resultId" class="c_primary bold" data-font="lato"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="t_span">가입일자</span>
|
|
|
+ <span id="joinDt" name="joinDt" class="bold" data-font="lato"></span>
|
|
|
+ </li>
|
|
|
+ <li id="liJoinPath">
|
|
|
+ <span class="t_span">가입경로</span>
|
|
|
+ <span id="joinPath" name="joinPath" class="bold" data-font="lato"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="btn_group_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" class="btn btn_dark btn_block" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인 하기</button>
|
|
|
+ </div>
|
|
|
+ </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_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
|
|
|
+ <span>회원가입</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button type="button" class="btn btn_dark btn_block" 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_flex">
|
|
|
+ <div>
|
|
|
+ <button type="button" class="btn btn_primary btn_block" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">
|
|
|
+ <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}]]; //인증 후 해당 페이지로 리다이렉트함
|
|
|
+ const custParams = [[${custParams}]];
|
|
|
+
|
|
|
+ // 회원정보로 아이디 찾기
|
|
|
+ $('#btnCustIdConfirm').on('click', function() {
|
|
|
+ let custInfo = $('#searchCustId').serializeObject();
|
|
|
+
|
|
|
+ if (gagajf.isNull(custInfo.custNm)) {
|
|
|
+ mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일을 입력하여 주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!fnCheckValidationEmail(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ custInfo.authMethod = 'custInfo';
|
|
|
+
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ //console.log('jsonData', jsonData);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack);
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#btnCustPwdConfirm').on('click',function() {
|
|
|
+ let custInfo = $('#searchCustPwd').serializeObject();
|
|
|
+
|
|
|
+ if(gagajf.isNull(custInfo.custId)) {
|
|
|
+ mcxDialog.alert("아이디를 입력해주세요.");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull(custInfo.custNm)) {
|
|
|
+ mcxDialog.alert('이름을 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일을 입력하여 주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!fnCheckValidationEmail(custInfo.email)) {
|
|
|
+ mcxDialog.alert('이메일 형식에 맞게 입력해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ custInfo.authMethod = 'custInfo';
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ //console.log('jsonData', jsonData);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/password/find/custinfo', jsonData, fnCustPwdConfirmCallBack);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 아이디 찾기결과
|
|
|
+ var fnCustIdConfirmCallBack = function (result) {
|
|
|
+ $('#btnCustIdConfirm').hide();
|
|
|
+ $('#searchDiv').hide();
|
|
|
+ $('.regist_box').hide();
|
|
|
+ $('.form_field').hide();
|
|
|
+ if (result.isFind) {
|
|
|
+ fnGetDisplayCustIdSucc(result.authMethod, result);
|
|
|
+ } else {
|
|
|
+ fnGetDisplayCustIdFail(result.authMethod);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 찾기성공
|
|
|
+ var fnGetDisplayCustIdSucc = function (authMethod, custInfo) {
|
|
|
+ $('#resultId').text(custInfo.maskingCustId);
|
|
|
+ $('#joinDt').text(fnToDateFormat(custInfo.joinDt));
|
|
|
+ let joinPath = fnSnsJoinPath(custInfo); // 가입경로 : 직접이면 표시 안함, 간편가입 연동 표시
|
|
|
+ if (!gagajf.isNull(joinPath)) {
|
|
|
+ $('#liJoinPath').show();
|
|
|
+ $('#joinPath').text(joinPath);
|
|
|
+ }
|
|
|
+ $('#succeedCustId').show();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 찾기실패
|
|
|
+ var fnGetDisplayCustIdFail = function (authMethod) {
|
|
|
+ $('.registration_nav').hide();
|
|
|
+ if (authMethod === 'custInfo') {
|
|
|
+ $('#failCustId').show();
|
|
|
+ }
|
|
|
+ if (authMethod === 'mobile' || authMethod === 'ipin') {
|
|
|
+ $('#failAuthentication').show();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ // 찾기결과
|
|
|
+ var fnCustPwdConfirmCallBack = function (result) {
|
|
|
+ $('#btnInfoConfirm').hide();
|
|
|
+ $('.form_field').hide();
|
|
|
+ $('.registration_cont').hide();
|
|
|
+ $('.registration_nav').hide();
|
|
|
+ $('#searchDiv').hide();
|
|
|
+ if (result.isFind) {
|
|
|
+ fnGetDisplayCustPwdSucc(result.authMethod, result);
|
|
|
+ } else {
|
|
|
+ fnGetDisplayCustPwdFail(result.authMethod);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 찾기성공
|
|
|
+ var fnGetDisplayCustPwdSucc = 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 fnGetDisplayCustPwdFail = function (authMethod) {
|
|
|
+ $('.form_head').hide();
|
|
|
+ $('.registration_nav').hide();
|
|
|
+ if (authMethod === 'custInfo') {
|
|
|
+ $('#failCustId').show();
|
|
|
+ }
|
|
|
+ if (authMethod === 'mobile' || authMethod === 'ipin') {
|
|
|
+ $('#failAuthentication').show();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 가입경로
|
|
|
+ var fnSnsJoinPath = function (custInfo) {
|
|
|
+ let snsType = '';
|
|
|
+ if (!gagajf.isNull(custInfo.ysJoinDt)) {
|
|
|
+ snsType += 'YES24';
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(custInfo.nvJoinDt)) {
|
|
|
+ if (!gagajf.isNull(snsType)) {
|
|
|
+ snsType += '/'
|
|
|
+ }
|
|
|
+ snsType = 'NAVER'
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(custInfo.kkJoinDt)) {
|
|
|
+ if (!gagajf.isNull(snsType)) {
|
|
|
+ snsType += '/'
|
|
|
+ }
|
|
|
+ snsType += 'KAKAO';
|
|
|
+ }
|
|
|
+ if (!gagajf.isNull(snsType)) {
|
|
|
+ snsType += ' 연동';
|
|
|
+ } else {
|
|
|
+ snsType += 'STYLE24';
|
|
|
+ }
|
|
|
+ return snsType;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 휴대폰 인증
|
|
|
+ $('#btnCellPhoneCertify').on('click', function () {
|
|
|
+ cfnOpenCellphoneCertify(_PAGE_CUSTOMER_ID_FIND, custParams);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 아이핀 인증
|
|
|
+ $('#btnIpinCertify').on('click', function () {
|
|
|
+ cfnOpenIpinCertify(_PAGE_CUSTOMER_ID_FIND, custParams);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnCustIdNiceCallBack = function(encData, authMethod) {
|
|
|
+ if (!gagajf.isNull(encData)) {
|
|
|
+ let custInfo = {};
|
|
|
+ custInfo.encData = encData;
|
|
|
+ custInfo.authMethod = authMethod;
|
|
|
+ let jsonData = JSON.stringify(custInfo);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/id/find', jsonData, fnCustIdConfirmCallBack)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 나이스 본인인증 후 콜백
|
|
|
+ var fnCustPwdNiceCallBack = 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, fnCustPwdConfirmCallBack)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ if (!gagajf.isNull(sEncData) && 'custId' === custParams) {
|
|
|
+ fnCustIdNiceCallBack(sEncData, authMethod);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!gagajf.isNull(sEncData) && 'custPwd' === custParams) {
|
|
|
+ fnCustPwdNiceCallBack(sEncData, authMethod);
|
|
|
+ }
|
|
|
+ let index = custParams !== 'custId' ? 1 : 0;
|
|
|
+
|
|
|
+ $('.registration_tap > .form_group').hide();
|
|
|
+ $('.registration_tap > .form_group').eq(index).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;
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 회원정보인증/휴대폰인증/아이핀인증_taps */
|
|
|
+ $('.radio_tap > .form_group').hide();
|
|
|
+ $('.radio_tap > .form_group').eq(index).show();
|
|
|
+ $('.radio_tap').each(function(){
|
|
|
+ $(this).find('.form_group').hide();
|
|
|
+ $(this).find('.form_group').eq(index).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