<!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 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"></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();
		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() {
					cfnGoToPage(_PAGE_MYPAGE_CUSTOMER);
				}
			});
		} else {
			mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
		}
	};

	$(document).ready(function() {
		// 마이페이지 LNB 설정
		fnSetMypageLnbList(10);

		// 마이페이지 location 설정
		fnSetMypageLocation('내정보 관리');

	});

	/*]]>*/
</script>

</th:block>

</body>
</html>


