<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MypageCustPwdModifyFormMob.html
 * @desc    : 비밀번호 변경 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.01   jsshin       최초 작성
 *******************************************************************************
 -->
<style>
	.hide{display: none;}
</style>
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header htop">
			<h5 class="modal-title" id="passwordChangeLabel">비밀번호 변경</h5>
		</div>
		<div class="modal-body">
			<div class="pop_cont">
				<div class="pass_confirm">
					<form id="pwdModifyForm" class="form_wrap">
						<input type="hidden" name="custId" th:value="${custId}"/>
						<div class="form_field">
							<label class="input_label sr-only">기존 비밀번호를 입력해주세요.</label>
							<div class="ui_col_12">
								<input type="password" id="orgPasswd" name="orgPasswd" placeholder="기존 비밀번호를 입력해주세요." class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="기존 비밀번호"/>
							</div>
						</div>
						<div class="form_field">
							<label class="input_label sr-only">신규 비밀번호를 입력해주세요.</label>
							<div class="ui_col_12">
								<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 class="mt10">
										<span id="firstFailed" class="c_gray">
											<i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br>
										</span>
										<span id="secondFailed" class="c_gray">
											<i class="ico ico_check gray mr5"></i>4개이상연속되거나 동일한 문자, 숫자 제외<br>
										</span>
										<span id="thirdFailed" class="c_gray">
											<i class="ico ico_check gray mr5"></i>아이디제외
										</span>
									</p>
									<!-- //사용불가 비밀번호일경우 -->
									<!-- 사용가능한 비밀번호일경우 -->
									<p id="avlPwd" class="mt10 hide">
										<span class="c_black2">
											<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다.
										</span>
									</p>
									<!-- //사용가능한 비밀번호일경우 -->
								</div>
								<!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
							</div>
						</div>
						<div class="form_field">
							<label class="input_label sr-only">신규 비밀번호를 다시 입력해주세요.</label>
							<div class="ui_col_12">
								<input type="password" id="confirmPassword" name="confirmPassword" placeholder="신규 비밀번호를 다시 입력해주세요." class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="신규 비밀번호 확인"/>
								<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>
							</div>
						</div>
						<div class="btn_group_flex">
							<div>
								<button type="button" id="btnClose" class="btn btn_default"><span>취소</span></button>
							</div>
							<div>
								<button type="button" id="btnSavePassword" class="btn btn_dark"><span>변경</span></button> <!-- 210409_추가 : btn_password_confirm id 추가 -->
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<a href="#close-modal" rel="modal:close" id="passwordPopClose" class="close-modal">Close</a>

<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var checkPwd;
	var 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';
		const icoRed = 'red';
		const icoGray = '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.find('.ico').removeClass(icoGray);
			$firstFailed.addClass(red);
			$firstFailed.find('.ico').addClass(icoRed);
		} else {
			$firstFailed.removeClass(red);
			$firstFailed.find('.ico').removeClass(icoRed);
			$firstFailed.addClass(gray);
			$firstFailed.find('.ico').addClass(icoGray);
		}

		// 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
		if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
			pwdCheck = false;
			$secondFailed.removeClass(gray);
			$secondFailed.find('.ico').removeClass(icoGray);
			$secondFailed.addClass(red);
			$secondFailed.find('.ico').addClass(icoRed);
		} else {
			$secondFailed.removeClass(red);
			$secondFailed.find('.ico').removeClass(icoRed);
			$secondFailed.addClass(gray);
			$secondFailed.find('.ico').addClass(icoGray);
		}

		// 아이디 포함
		if (fnValidationPwdSameId(password, custId)) {
			pwdCheck = false;
			$thirdFailed.removeClass(gray);
			$thirdFailed.find('.ico').removeClass(icoGray);
			$thirdFailed.addClass(red);
			$thirdFailed.find('.ico').addClass(icoRed);
		} else {
			$thirdFailed.removeClass(red);
			$thirdFailed.find('.ico').removeClass(icoRed);
			$thirdFailed.addClass(gray);
			$thirdFailed.find('.ico').addClass(icoGray);
		}

		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>
