스프링부트+jsp로 배달사이트 만들기-39 비밀번호 찾기, 비밀번호 변경

이메일 또는 전화번호 인증 후 비밀번호 변경 페이지를 준비합니다

 

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/link.jsp" %>
<link rel="stylesheet" href="/css/layout/nav.css">
<link rel="stylesheet" href="/css/userInfo/find.css">
<%@ include file="/WEB-INF/view/include/header.jsp" %>
	
	<main class="password_modify_page">
		<div class="find_info">	
			<h3>새로운 비밀번호로 재설정해주세요</h3>
			
			<div class="box">
				<span>새 비밀번호</span>
				<input type="password" class="password1" name="password">
			</div>
			
			<div class="box">
				<span>새 비밀번호 확인</span>
				<input type="password" class="password2">
				<div class="password_check_msg"></div>
			</div>
			<button class="modify_btn" >변경하기</button>
		</div>
	</main>
	
	
<%@ include file="/WEB-INF/view/include/nav.jsp" %>	
<%@ include file="/WEB-INF/view/include/footer.jsp" %>	

	<script src="/js/userInfo/modify.js"></script>


<script>

</script>
</body>
</html>

 

modify.js

const URLSearch = new URLSearchParams(location.search);
const username = URLSearch.get("username"); 

	
// 비밀번호 변경시 비밀번호입력 상태 확인
const isSubmit = (function() {
	let submit = false;
	
	const getSubmit =function() {
		return submit;
	}
	
	const setSubmit = function(set){
		submit = set;
		return submit;
	}
	return {getSubmit : getSubmit, setSubmit : setSubmit};
})();	
	

	
	



function pwdCheck() {
	const password1 = $(".password1").val().replaceAll(" ", "");
	const password2 = $(".password2").val().replaceAll(" ", "");

	const msgBox = $(".password_check_msg");
	
	if (!password1 || !password2) {
		msgBox.text("비밀번호를 입력해주세요");
		return false;
	} else {
		msgBox.text("");
	}
	
	if(password1 != password2) {
		msgBox.text("비밀번호를 확인해 주세요");
		return false;
	} else {
		msgBox.text("");
	}
	
	return true;
}


// 패스워드 변경
$(".modify_btn").click(function(){
	if(!pwdCheck()) {
		return;
	}
	
	const data = {
		password: $(".password1").val(),
		valueType : "password", 
		username : username
	}
	
	$.ajax({
		url: "/modify/password",
		type: "PATCH",
		data: data
	})
	.done(function(result){
		swal({
			text : result,
			closeOnClickOutside : false
		})
		.then(function(){
			location.href = "/login";
		})
	})
	.fail(function(){
		alert("에러");
	})
})

 

 

컨트롤러에 비밀번호 변경 페이지 메서드를 추가합니다

// 비밀번호 변경 페이지
@GetMapping("/modify/password")
public String moldifyPassword(String username, HttpSession session) {
    Map<String, Object> authStatus = (Map<String, Object>) session.getAttribute("authStatus");
    
    if(authStatus == null || !username.equals(authStatus.get("username"))) {
        return "redirect:/find/password";
    }
    
    // 페이지에 왔을때 인증이 안되있다면
    if(!(boolean) authStatus.get("status")) {
        return "redirect:/find/password";
    }
    return "userInfo/modify";
}

인증완료 후 인증세션의 status가 true여야 페이지에 접근할 수 있습니다

 

 

 

비밀번호 변경 메서드를 추가합니다

// 비밀번호 변경
@PatchMapping("/modify/password")
public ResponseEntity<String> modifyPassword(String password, String username, HttpSession session) {
    password = encodePwd.encode(password);
    userService.modifyInfo(username, "password", password);
    session.setMaxInactiveInterval(0);
    session.setAttribute("authStatus", null);
    return new ResponseEntity<String>("비밀번호를 변경했습니다",HttpStatus.OK);
}

비밀번호 변경 후 인증세션을 삭제합니다