|
@@ -0,0 +1,264 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="ko"
|
|
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
+<!--
|
|
|
|
|
+ *******************************************************************************
|
|
|
|
|
+ * @source : MypageCustPwdModifyFormWeb.html
|
|
|
|
|
+ * @desc : 비밀번호 변경 팝업
|
|
|
|
|
+ *============================================================================
|
|
|
|
|
+ * STYLE24
|
|
|
|
|
+ * Copyright(C) 2021 TSIT, All rights reserved.
|
|
|
|
|
+ *============================================================================
|
|
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
|
|
+ * === =========== ========== =============================================
|
|
|
|
|
+ * 1.0 2021.04.01 jsshin 최초 작성
|
|
|
|
|
+ *******************************************************************************
|
|
|
|
|
+ -->
|
|
|
|
|
+<div class="modal-dialog" role="document">
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+ <div class="modal-header">
|
|
|
|
|
+ <h5 class="modal-title" id="pswordModifyLabel">비밀번호 변경</h5>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <div class="pop_cont">
|
|
|
|
|
+ <form id="pwdModifyForm" class="form_wrap form_full">
|
|
|
|
|
+ <input type="hidden" name="custId" th:value="${custId}"/>
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <label class="input_label">기존 비밀번호</label>
|
|
|
|
|
+ <div class="input_wrap">
|
|
|
|
|
+ <input type="password" class="form_control" id="orgPasswd" name="orgPasswd" placeholder="기존 비밀번호를 입력해주세요." minlength="8" maxlength="20" required="required" data-valid-name="기존 비밀번호" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <label class="input_label">신규 비밀번호</label>
|
|
|
|
|
+ <div class="input_wrap">
|
|
|
|
|
+ <input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호를 입력해주세요.(8~20자 영문, 숫자, 특수문자 중 2가지 이상 조합)" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="신규 비밀번호"/>
|
|
|
|
|
+ <!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
|
|
+ <div class="help_block">
|
|
|
|
|
+ <!-- 사용불가 비밀번호일경우 -->
|
|
|
|
|
+ <p>
|
|
|
|
|
+ <span id="firstFailed" class="c_gray">
|
|
|
|
|
+ <i class="ico ico_check gray"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span id="secondFailed" class="c_gray">
|
|
|
|
|
+ <i class="ico ico_check gray"></i>4개이상 연속되거나 동일한 문자/숫자 제외
|
|
|
|
|
+ </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 (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="form_field">
|
|
|
|
|
+ <label class="input_label">신규 비밀번호 확인</label>
|
|
|
|
|
+ <div class="input_wrap">
|
|
|
|
|
+ <input type="password" id="confirmPassword" name="confirmPassword" placeholder="신규 비밀번호를 다시 입력해주세요." class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="신규 비밀번호 확인"/>
|
|
|
|
|
+ <!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
|
|
+ <div class="help_block">
|
|
|
|
|
+ <!-- 비밀번호확인 틀렸을경우 -->
|
|
|
|
|
+ <p id="misPwd" class="hide">
|
|
|
|
|
+ <span class="t_err">
|
|
|
|
|
+ 새 비밀번호가 일치하지 않습니다.
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <!-- //비밀번호확인 틀렸을경우 -->
|
|
|
|
|
+ <!-- 비밀번호 일치할경우 -->
|
|
|
|
|
+ <p id="avlConPwd" class=" hide">
|
|
|
|
|
+ <span class="c_black2">
|
|
|
|
|
+ <i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <!-- //비밀번호 일치할경우 -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
|
+ <div class="btn_group_block ui_row">
|
|
|
|
|
+ <div class="ui_col_6">
|
|
|
|
|
+ <button type="button" id="btnClose" class="btn btn_default btn_block"><span>취소</span></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="ui_col_6">
|
|
|
|
|
+ <button type="button" id="btnSavePassword" class="btn btn_dark btn_block"><span>변경</span></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </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[*/
|
|
|
|
|
+ let checkPwd;
|
|
|
|
|
+ let checkConfirmPwd;
|
|
|
|
|
+
|
|
|
|
|
+ $("#btnClose").on('click', function() {
|
|
|
|
|
+ $.modal.close();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 신규 비밀번호 입력
|
|
|
|
|
+ $('#pwdModifyForm input[name=passwd]').on('focusout keyup keydown', function () {
|
|
|
|
|
+ fnCheckPassword();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 신규 비밀번호 확인 입력
|
|
|
|
|
+ $('#pwdModifyForm 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 = $('#pwdModifyForm input[name=custId]').val();
|
|
|
|
|
+ let password = $('#pwdModifyForm input[name=passwd]').val();
|
|
|
|
|
+ let confirmPassword = $('#pwdModifyForm 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();
|
|
|
|
|
+ checkPwd = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $firstFailed.show();
|
|
|
|
|
+ $secondFailed.show();
|
|
|
|
|
+ $thirdFailed.show();
|
|
|
|
|
+ $avlPwd.hide();
|
|
|
|
|
+ checkPwd = false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!gagajf.isNull(confirmPassword)) {
|
|
|
|
|
+ fnCheckConfirmPassword();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 비밀번호체크
|
|
|
|
|
+ var fnCheckConfirmPassword = function () {
|
|
|
|
|
+ const $misPwd = $('#misPwd');
|
|
|
|
|
+ const $avlConPwd = $('#avlConPwd');
|
|
|
|
|
+ const $btnSavePassword = $('#btnSavePassword');
|
|
|
|
|
+ let password = $('#pwdModifyForm input[name=passwd]').val();
|
|
|
|
|
+ let confirmPassword = $('#pwdModifyForm input[name=confirmPassword]').val();
|
|
|
|
|
+
|
|
|
|
|
+ let sameConfirmPwd = fnValidationPwdSameConfirmPwd(password, confirmPassword);
|
|
|
|
|
+
|
|
|
|
|
+ if (sameConfirmPwd) {
|
|
|
|
|
+ $avlConPwd.show();
|
|
|
|
|
+ $misPwd.hide();
|
|
|
|
|
+ checkConfirmPwd = true;
|
|
|
|
|
+ //$btnSavePassword.attr('disabled', false);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ $misPwd.show();
|
|
|
|
|
+ $avlConPwd.hide();
|
|
|
|
|
+ checkConfirmPwd = false;
|
|
|
|
|
+ //$btnSavePassword.attr('disabled', true);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 패스워드 저장
|
|
|
|
|
+ $('#btnSavePassword').on('click', function () {
|
|
|
|
|
+ let pwdModifyForm = $('#pwdModifyForm').serializeObject();
|
|
|
|
|
+
|
|
|
|
|
+ if (gagajf.isNull(pwdModifyForm.orgPasswd)) {
|
|
|
|
|
+ mcxDialog.alert('기존 비밀번호 입력해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (gagajf.isNull(pwdModifyForm.passwd)) {
|
|
|
|
|
+ mcxDialog.alert('신규 비밀번호를 입력해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (gagajf.isNull(pwdModifyForm.confirmPassword)) {
|
|
|
|
|
+ mcxDialog.alert('신규 비밀번호 확인을 입력해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!checkPwd) {
|
|
|
|
|
+ mcxDialog.alert('유효하지 않은 신규 비밀번호 입니다.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!checkConfirmPwd) {
|
|
|
|
|
+ mcxDialog.alert('유효하지 않은 신규 비밀번호 입니다.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (pwdModifyForm.passwd !== pwdModifyForm.confirmPassword) {
|
|
|
|
|
+ mcxDialog.alert('신규 비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ fnCheckPassword();
|
|
|
|
|
+ fnCheckConfirmPassword();
|
|
|
|
|
+ let jsonData = JSON.stringify(pwdModifyForm);
|
|
|
|
|
+ gagajf.ajaxJsonSubmit('/mypage/password/change', jsonData, fnChangePasswordCallback);
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ var fnChangePasswordCallback = function (result) {
|
|
|
|
|
+ if (result.isSuccess) {
|
|
|
|
|
+ mcxDialog.alertC("비밀번호가 변경되었습니다.", {
|
|
|
|
|
+ sureBtnText: "확인",
|
|
|
|
|
+ sureBtnClick: function() {
|
|
|
|
|
+ $.modal.close();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (result.resultType === 'WRONG_PWD') {
|
|
|
|
|
+ mcxDialog.alert('기존 비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ /*]]>*/
|
|
|
|
|
+</script>
|
|
|
|
|
+</html>
|