sake/src/main/webapp/WEB-INF/views/sopmal/mbr/passwordChngR.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld" %>

<%--
	Class Name : passwordChngR.jsp
	Description : 비밀번호 변경 안내 조회
	Modification Information

	수정일 수정자 수정내용
	------- -------- ---------------------------
	2024-10-21 유재현 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<title>비밀번호 변경 캠페인</title>
	<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
</head>
<script>
	$(document).ready(function() {

	});

	/* ********************************************************
	 * 나중에 변경하기
	 ******************************************************** */
	const fn_change_later = function() {
		$.ajax({
			type: 'post',
			url : '<c:url value="/sopmal/mbr/updatePasswordChngLater"/>',
			success: function (data) {
				const result = JSON.parse(data.resBody.result).message;

				if(result === "success"){
					alert('<spring:message code="success.common.update"/>')

					var urlParams = new URLSearchParams(window.location.search);
					if (urlParams.has('originalUrl')) {
						window.location.href = decodeURIComponent(urlParams.get('originalUrl'));
						return false;
					}
					window.location.href = '/index';
					return false;
				}
			}
		});
	};

	/* ********************************************************
	 * 비밀번호 변경
	 ******************************************************** */
	const fn_change_now = function() {

		if(!fn_check_password()) {
			return;
		}

		if (confirm('비밀번호를 <spring:message code="confirm.common.update"/>')) {
			$.ajax({
				type: 'post',
				url: '<c:url value="/sopmal/mbr/updatePasswordChng"/>',
				data : {
					'mbrPassword' : $("#mbrPassword").val(),
					'newPassword' : $("#newPassword").val(),
					'checkPassword' : $("#checkPassword").val()
				},
				success: function (data) {
					const result = JSON.parse(data.resBody.result).message;

					if(result === "success"){
						alert('<spring:message code="success.common.update"/>')

						var urlParams = new URLSearchParams(window.location.search);
						if (urlParams.has('originalUrl')) {
							window.location.href = decodeURIComponent(urlParams.get('originalUrl'));
							return false;
						}
						window.location.href = '/index';
						return false;
					}
				}
			});
		}
	}

	/* ********************************************************
	 * password check
	 ******************************************************** */
	const fn_check_password = function() {

		var regular = /^(?=.*[a-zA-Z])(?=.*\d|.*\W)|(?=.*[a-zA-Z])(?=.*\W)|(?=.*\d)(?=.*\W)[a-zA-Z\d\W]{6,20}$/;
		let mbrPassword = $('#mbrPassword');
		let newPassword = $('#newPassword');
		let newPasswordChk = $('#checkPassword');

		if(!regular.test(mbrPassword.val())){
			alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
			mbrPassword.focus();
			return;
		}

		if(!regular.test(newPassword.val())){
			alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
			newPassword.focus();
			return;
		}

		if(!regular.test(newPasswordChk.val())){
			alert('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
			newPasswordChk.focus();
			return;
		}

		if (newPassword.val() !== newPasswordChk.val()) {
			alert('변경 비밀번호가 일치하지 않습니다.');
			newPassword.focus();
			return;
		}

		return true;
	}

	/* ********************************************************
	 * 사용자 입력값이 입력될 때 alertText 숨기기
	 ******************************************************** */
	const fn_alert_hide = (inputId, alertId, type) => {
		inputId.on('input', function () {
			switch(type){
				case 'id':
					var regular = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d_]{6,20}$/;
					if (!$(this).val()) {
						alertId.html('아이디를 입력해 주세요.');
					}else if(dupList.includes(inputId.val())){
						alertId.html('이미 사용중인 아이디입니다.');
						alertId.show();
						return;
					}else if(!regular.test(inputId.val())){
						alertId.html('아이디는 공백없는 영문, 숫자, 밑줄 포함 6~20자 조합만 사용 가능합니다.');
						alertId.show();
						return;
					}
					break;
				case 'pw':
					var regular = /^(?=.*[a-zA-Z])(?=.*\d|.*\W)|(?=.*[a-zA-Z])(?=.*\W)|(?=.*\d)(?=.*\W)[a-zA-Z\d\W]{6,20}$/;
					if (!$(this).val()) {
						alertId.html('비밀번호를 입력해 주세요.');
					}else if(!regular.test(inputId.val())){
						alertId.html('비밀번호는 영문 대소문자/숫자/특수문자 중 2가지 이상 조합한 6~20자로 입력해주세요.');
						alertId.show();
						return;
					}
					break;
				default:
					break;
			}

			alertId.hide();
			if (!$(this).val()) {
				alertId.show();
			}
		})
	};
</script>
<body>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<main>
	<div class="pwChange__wrapper">
		<div class="pwChange">
			<div class="pwChange__tit">
				<div class="pwChange__img">
					<img src="/pc/images/icon_pw-change.png" alt="">
				</div>
				<div class="pwChange__txt">
					<p class="pwChange__txt__top">비밀번호 변경 캠페인</p>
					<p class="pwChange__txt__title">회원님의 소중한<br>개인정보를 지켜주세요.</p>
					<p class="pwChange__txt__text">
						회원님의 아이디 <em>${passwordResultMap.mbrId}</em>은(는) 비밀번호 변경 대상입니다.<br>
						${passwordResultMap.sopmalNm}에서는 회원님의 개인정보보호를 위해 ${passwordResultMap.passwordChngDe}개월 이상<br>
						비밀번호를 변경하지 않은 경우 비밀번호 변경을 안내하고 있습니다.
					</p>
				</div>
			</div>
			<div class="pwChange__btn">
				<a href="javascript:void(0);" class="btn xl outline" onclick="fn_change_later();">
					<span>
						나중에 변경하기
						<br>
						<em>${passwordResultMap.passwordCnfirmDe}개월 후에 변경</em>
					</span>
				</a>
				<a href="javascript:void(0);" class="btn xl dark" onclick="fn_open_modal('#passwordChngDiv', '#passwordChngPopup', '<c:url value="/sopmal/mbr/selectPasswordChngPopup"/>')">
					지금 변경하기
				</a>
			</div>
		</div>
	</div>
</main>
</body>

<%--비밀번호 변경 팝업--%>
<div id="passwordChngDiv"></div>
</html>