<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : PopupPasswordChangeForm.html
 * @desc    : 비밀번호 변경 팝업
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.01.16   rladbwnd5   최초 작성
 *******************************************************************************
 -->
	<ul class="popup modal" data-width="500" >
		<li class="mdPopTitle">
			<strong>비밀번호 변경</strong>
			<button type="button" class="close" onclick="uifnPopClose('popupPassword')"><i class="fa fa-times"></i></button>
		</li>
		<li class="mdPopContent">
			<form name="popupPasswordForm" id="popupPasswordForm" action="#" th:action="@{'/system/user/password/change'}" th:method="post">
				<input type="hidden" name="userId" th:value="${userId}"/>
				<table class="frmStyle" aria-describedby="수정">
					<colgroup>
						<col style="width:10%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th class="dashR">관리자ID<i class="star" aria-hidden="true"></i></th>
							<td class="dashR" th:text="${userId}">
							</td>
						</tr>
						<tr>
							<th class="dashR">비밀번호<i class="star" aria-hidden="true"></i></th>
							<td class="dashR">
								<input type="password" class="w300" name="passwd" data-valid-type="password" required="required" data-valid-name="비밀번호"/>
							</td>
						</tr>
						<tr>
							<th class="dashR">비밀번호 확인<i class="star" aria-hidden="true"></i></th>
							<td class="dashR">
								<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>
		</li>
		<li class="boxContentBtnB">
			<button type="button" class="btn btn-success btn-lg " id="btnPasswordChange">저장</button>
		</li>
	</ul>

<script th:inline="javascript">
/*<![CDATA[*/
	$('#btnPasswordChange').on('click', function() {
		var formId = '#popupPasswordForm';
		
		if (!gagajf.validation(formId))
			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($(formId).prop('action'), formId, function() {
					uifnPopClose('popupPassword');
				});
			}
		});
	});
	
	$(document).ready(function() {

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

</html>