<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : PasswordChangeForm.html
 * @desc    : 비밀번호 변경 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.28   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="500" id="popupPasswordChange">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>비밀번호 변경</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupPasswordChange');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent">
			<form name="popupPasswordForm" id="popupPasswordForm" action="#" th:action="@{'/password/change'}" th:method="post">
				<table class="frmStyle" aria-describedby="변경폼">
					<colgroup>
						<col style="width:10%;"/>
						<col/>
					</colgroup>
					<tbody>
						<tr>
							<th>사용자ID<em class="required" title="필수"></em></th>
							<td th:text="${sessionInfo.userId}">
							</td>
						</tr>
						<tr>
							<th>비밀번호<em class="required" title="필수"></em></th>
							<td>
								<input type="password" class="w300" name="passwd" data-valid-type="password" required="required" data-valid-name="비밀번호"/>
							</td>
						</tr>
						<tr>
							<th>비밀번호 확인<em class="required" title="필수"></em></th>
							<td>
								<input type="password" class="w300" name="passwdConfirm" data-valid-type="password" required="required" data-valid-name="비밀번호 확인"/>
							</td>
						</tr>
					</tbody>
				</table>
				<p class="dot cBlue">대문자, 소문자, 특수문자, 숫자로 구성해야 합니다.</p>
				<p class="dot cBlue">이 중 3개 이상은 8 ~ 20자, 2개 이상은 10 ~ 20자로 설정해야 합니다.</p>
			</form>
		</div>
		<!-- //CONTENT -->
		
		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnPasswordChange">저장</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	$('#btnPasswordChange').on('click', function() {
		if (!gagajf.validation('#popupPasswordForm'))
			return false;
		
		var pwd = $('#popupPasswordForm input[name="passwd"]').val();
		var pwdConfirm = $('#popupPasswordForm input[name="passwdConfirm"]').val();
		
		if (pwd != pwdConfirm) {
			mcxDialog.alert('비밀번호를 확인해주세요.');
			return;
		}
		
		mcxDialog.confirm("비밀번호를 변경하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				gagajf.ajaxFormSubmit($('#popupPasswordForm').prop('action'), '#popupPasswordForm', function() {
					uifnPopupClose('popupPasswordChange');
				});
			}
		});
	});
	
	$(document).ready(function() {

	});
/*]]>*/
</script>

</html>