<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : PasswordChangeFormWeb.html
 * @desc    : 비밀번호 변경 화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   jsshin     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
<div id="container" class="container mb">
	<div class="wrap">
		<div class="content find">
			<div class="cont_head">
				<h4 th:if="${pageGb == 'find'}">아이디&#47;비밀번호 찾기</h4>
				<h4 th:if="${pageGb == 'temp'}">비밀번호 변경</h4>
			</div>
			<div class="cont_body show">
				<form id="resetPasswordForm" name="resetPasswordForm" class="form_wrap form_col_c" role="form" method="post">
					<input type="hidden" name="custId" th:value="${custId}"/>
					<!-- 비밀번호 재설정 -->
					<div class="find_result clear" >
						<div class="form_info">
							<span class="ico_content_security"></span>
							<p>안전을 위해 비밀번호를 변경하신 후 이용이 가능합니다.</p>
						</div>
						<div class="form_field mt40">
							<label class="input_label sr-only">신규 비밀번호</label>
							<div class="ui_col_12">
								<input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호" minlength="8" maxlength="20"/>
								<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
								<div class="help_block">
									<!-- 사용불가 비밀번호일경우 c_gray c_black2 c_red2-->
									<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="비밀번호 확인" minlength="8" maxlength="20"/>
								<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
								<div class="help_block">
									<!-- 비밀번호확인 틀렸을경우 -->
									<p id="misPwd" class="t_err hide">
										새 비밀번호가 일치하지 않습니다.
									</p>
									<!-- //비밀번호확인 틀렸을경우 -->
									<!-- 비밀번호 일치할경우 -->
									<p id="avlConPwd" class="mt10 hide">
										<span class="c_black2">
											<i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
										</span>
									</p>
									<!-- //비밀번호 일치할경우 -->
								</div>
								<!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
							</div>
						</div>
						<div class="btn_group_block btn_group_md ui_row">
							<div class="ui_col_12">
								<button type="button" id="btnSavePassword" class="btn btn_dark btn_block" disabled="disabled">
									<span th:if="${pageGb == 'find'}">변경 후 다시 로그인</span>
									<span th:if="${pageGb == 'temp'}">변경하기</span>
								</button>
							</div>
						</div>
					</div>
					<!-- //비밀번호 재설정 -->
				</form>
			</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[*/
	const pageGb = [[${pageGb}]];

	// 비밀번호 입력
	$('#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();
		let sameConfirmPwd = fnValidationPwdSameConfirmPwd(password, confirmPassword);

		if (sameConfirmPwd) {
			$misPwd.hide();
			$avlConPwd.show();
			$btnSavePassword.attr('disabled', false);
		} else {
			$avlConPwd.hide();
			$misPwd.show();
			$btnSavePassword.attr('disabled', true);
		}

	};

	// 패스워드 저장
	$('#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() {
				if (pageGb === 'find') {
					cfnGoToPage(_PAGE_LOGIN);
				} else if (pageGb === 'temp') {
					cfnGoToPage(_PAGE_MAIN);
				}
			}
		});
		} else {
			mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
		}
	};


/*]]>*/
</script>

</th:block>

</body>
</html>
