|
|
@@ -0,0 +1,275 @@
|
|
|
+<!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/MypageLayoutWeb">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : MypageCustSnsJoinInitPwdFormWeb.html
|
|
|
+ * @desc : 마이페이지 > 내 정보 관리 비밀번호 최초설정 Page
|
|
|
+ * 소셜 간편가입을 하신 회원님은
|
|
|
+ * 최초 비밀번호 설정하는 화면
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.03.15 jsshin 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+
|
|
|
+<body>
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <div class="content myManage"> <!-- 페이지특정 클래스 = myManageEntry -->
|
|
|
+ <div class="cont_body">
|
|
|
+ <!-- CONT-BODY -->
|
|
|
+ <div class="lnb">
|
|
|
+ <div class="lnb_tit">
|
|
|
+ <h2>마이페이지</h2>
|
|
|
+ </div>
|
|
|
+ <div class="lnb_list">
|
|
|
+ <ul id="mypageLnbList"></ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cont">
|
|
|
+ <div class="sec_head">
|
|
|
+ <h3 class="subH1">내 정보 관리</h3>
|
|
|
+ <p class="text">소셜 간편가입을 하신 회원님은 최초 비밀번호 설정하신 후 변경 가능합니다.</p>
|
|
|
+ </div>
|
|
|
+ <form id="resetPasswordForm" name="resetPasswordForm" class="form_wrap">
|
|
|
+ <input type="hidden" name="custId" th:value="${custId}"/>
|
|
|
+ <div class="sec_body">
|
|
|
+ <div class="modify_box">
|
|
|
+ <div class="tbl type1">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col width="210">
|
|
|
+ <col width="*">
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>
|
|
|
+ 비밀번호
|
|
|
+ </th>
|
|
|
+ <td>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <input type="password" id="passwd" name="passwd" class="form_control" placeholder="비밀번호를 입력해주세요." minlength="8" maxlength="20"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 사용불가 비밀번호일경우 -->
|
|
|
+ <p>
|
|
|
+ <span id="firstFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br/>
|
|
|
+ </span>
|
|
|
+ <span id="secondFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br/>
|
|
|
+ </span>
|
|
|
+ <span id="thirdFailed" class="c_gray">
|
|
|
+ <i class="ico ico_check gray"></i>아이디 제외
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //사용불가 비밀번호일경우 -->
|
|
|
+ <!-- 사용가능한 비밀번호일경우 -->
|
|
|
+ <p id="avlPwd" class="hide">
|
|
|
+ <span class="c_black2">
|
|
|
+ <i class="ico ico_check black"></i>사용 가능한 비밀번호입니다
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //사용가능한 비밀번호일경우 -->
|
|
|
+ </div>
|
|
|
+ <!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>
|
|
|
+ 비밀번호 확인
|
|
|
+ </th>
|
|
|
+ <td>
|
|
|
+ <div class="form_field">
|
|
|
+ <div class="input_wrap">
|
|
|
+ <input type="password" id="confirmPassword" name="confirmPassword" class="form_control" placeholder="비밀번호를 동일하게 입력해주세요." minlength="8" maxlength="20" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="help_block">
|
|
|
+ <!-- 비밀번호확인 틀렸을경우 -->
|
|
|
+ <p d="misPwd" class="hide">
|
|
|
+ <span class="t_err">
|
|
|
+ 새 비밀번호가 일치하지 않습니다.
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <!-- //비밀번호확인 틀렸을경우 -->
|
|
|
+ <!-- 비밀번호 일치할경우 -->
|
|
|
+ <p id="avlConPwd" class="hide">
|
|
|
+ <span class="c_black2"><i class="ico ico_check black"></i>새 비밀번호가 일치합니다.</span>
|
|
|
+ </p>
|
|
|
+ <!-- //비밀번호 일치할경우 -->
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn_footer_area">
|
|
|
+ <button type="button" class="btn btn_default btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE);"><span>취소</span></button>
|
|
|
+ <button type="button" id="btnSavePassword" class="btn btn_dark btn_md" disabled="disabled"><span>확인</span></button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
|
|
|
+<script th:inline="javascript">
|
|
|
+ /*<![CDATA[*/
|
|
|
+ // 비밀번호 입력
|
|
|
+ $('#resetPasswordForm input[name=passwd]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인 입력
|
|
|
+ $('#resetPasswordForm input[name=confirmPassword]').on('focusout keyup keydown', function () {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 비밀번호 확인
|
|
|
+ var fnCheckPassword = function () {
|
|
|
+ const $firstFailed = $('#firstFailed');
|
|
|
+ const $secondFailed = $('#secondFailed');
|
|
|
+ const $thirdFailed = $('#thirdFailed');
|
|
|
+ const $avlPwd = $('#avlPwd');
|
|
|
+ const red = 'c_red2';
|
|
|
+ const gray = 'c_gray';
|
|
|
+ let custId = $('#resetPasswordForm input[name=custId]').val();
|
|
|
+ let password = $('#resetPasswordForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
|
|
|
+ let pwdCheck = true;
|
|
|
+
|
|
|
+ // 영문, 숫자, 특수문자 2종 이상 혼용 || 길이
|
|
|
+ if (fnValidtaionPwdMixedWord(password) || fnValidationPwdLength(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $firstFailed.removeClass(gray);
|
|
|
+ $firstFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $firstFailed.removeClass(red);
|
|
|
+ $firstFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
|
|
|
+ if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $secondFailed.removeClass(gray);
|
|
|
+ $secondFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $secondFailed.removeClass(red);
|
|
|
+ $secondFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 아이디 포함
|
|
|
+ if (fnValidationPwdSameId(password, custId)) {
|
|
|
+ pwdCheck = false;
|
|
|
+ $thirdFailed.removeClass(gray);
|
|
|
+ $thirdFailed.addClass(red);
|
|
|
+ } else {
|
|
|
+ $thirdFailed.removeClass(red);
|
|
|
+ $thirdFailed.addClass(gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pwdCheck) {
|
|
|
+ $firstFailed.hide();
|
|
|
+ $secondFailed.hide();
|
|
|
+ $thirdFailed.hide();
|
|
|
+ $avlPwd.show();
|
|
|
+ } else {
|
|
|
+ $firstFailed.show();
|
|
|
+ $secondFailed.show();
|
|
|
+ $thirdFailed.show();
|
|
|
+ $avlPwd.hide();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!gagajf.isNull(confirmPassword)) {
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 비밀번호체크
|
|
|
+ var fnCheckConfirmPassword = function () {
|
|
|
+ const $misPwd = $('#misPwd');
|
|
|
+ const $avlConPwd = $('#avlConPwd');
|
|
|
+ const $btnSavePassword = $('#btnSavePassword');
|
|
|
+ let password = $('#resetPasswordForm input[name=passwd]').val();
|
|
|
+ let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
|
|
|
+ if (!gagajf.isNull(password) && !gagajf.isNull(confirmPassword)) {
|
|
|
+ if (fnValidationPwdSameConfirmPwd(password, confirmPassword)) {
|
|
|
+ $avlConPwd.hide();
|
|
|
+ $misPwd.show();
|
|
|
+ $btnSavePassword.attr('disabled', true);
|
|
|
+ } else {
|
|
|
+ $misPwd.hide();
|
|
|
+ $avlConPwd.show();
|
|
|
+ $btnSavePassword.attr('disabled', false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // 패스워드 저장
|
|
|
+ $('#btnSavePassword').on('click', function () {
|
|
|
+ let resetPasswordForm = $('#resetPasswordForm').serializeObject();
|
|
|
+
|
|
|
+ if (gagajf.isNull(resetPasswordForm.passwd)) {
|
|
|
+ mcxDialog.alert('신규 비밀번호를 입력하신 후 다시 시도해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (gagajf.isNull(resetPasswordForm.confirmPassword)) {
|
|
|
+ mcxDialog.alert('비밀번호 확인을 입력하신 후 다시 시도해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (resetPasswordForm.passwd != resetPasswordForm.confirmPassword) {
|
|
|
+ mcxDialog.alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ fnCheckPassword();
|
|
|
+ fnCheckConfirmPassword();
|
|
|
+ let jsonData = JSON.stringify(resetPasswordForm);
|
|
|
+ gagajf.ajaxJsonSubmit('/customer/password/reset', jsonData, fnSavePasswordCallback);
|
|
|
+ });
|
|
|
+
|
|
|
+ var fnSavePasswordCallback = function (result) {
|
|
|
+ if (result.isSuccess) {
|
|
|
+ mcxDialog.alertC('비밀번호 변경이 완료 되었습니다.', {
|
|
|
+ sureBtnText: "확인",
|
|
|
+ sureBtnClick: function() {
|
|
|
+ cfnGoToPage(_PAGE_MYPAGE_CUSTOMER);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ // 마이페이지 LNB 설정
|
|
|
+ fnSetMypageLnbList(10);
|
|
|
+
|
|
|
+ // 마이페이지 location 설정
|
|
|
+ fnSetMypageLocation('내정보 관리');
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ /*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
|
|
+
|
jsshin