회원 정보 수정 기능, 비밀번호 변경 기능 추가 (REST api 활용)

오늘은 간단하게 user crud 기능을 추가하였다. 

 

 

일단 타임리프로 현재 닉네임과 이메일이 마이페이지게 뜨게 하였고 

 

'

 

개인 정보 수정페이지에는 아래처럼 현재 닉네임과 이메일이 뜨고 

바꾸고 싶어하는 값을 적으면 

 

function changeInformation(){
    let nickName=$("#nickName").val();
    let email=$("#email").val();
    if (email.includes("@")) {
       let result=callApi("/user/information/"+nickName+"/"+email ,"patch","");

        if(result.message=="success"){
            alert("수정되었습니다.");
        }
    } else {
        alert("이메일 형식에 맞게 @를 추가해주세요")
        return;
    }


}

 

이 코드를 통해서 서버에 정보가 넘어가고 회원 정보가 수정되게 한다. 

 

 

그리고 비밀번호 변경 페이지는 아래와 같다. 

 

비번이 안쳐진 경우, 새비밀번호 두개가 일치하지 않은 경우, 현재 비밀번호를 잘못친경우 이렇게 다 

경고창이 뜨게 구현해놨다.

 

 

 

 

그리고 비밀번호를 전송하는 REST api 식 코드 이다. 

보안상 주소에 바로 비밀번호를 적어서 전송하지 않고 서버에서 받는 배열 형태로 비밀번호 

정보들을 전송하였다. 

const form = document.getElementById("changePasswordForm");
  const params = {}
new FormData(form).forEach((value, key) => params[key] = value.trim());

let result= callApi("/user/changePassword" ,"patch",params);
if(result.message=="success"){
    alert("비밀번호가 변경되었습니다.");
      location.reload();
}else if(result.message=="fail"){
    alert("현재 비밀번호가 틀렸습니다.");
}

@PreAuthorize("isAuthenticated()")
@PatchMapping("/changePassword")
@ResponseBody
public String changePassword(@RequestBody Map<String, String> params){
    SiteUser user= rq.getLoginUser();
    String currentPassword = params.get("currentPassword");
    String newPassword1 = params.get("newPassword1");
    String newPassword2 = params.get("newPassword2");

    if(!userService.isCorrectPassword(user,currentPassword)){
        return  "{\"message\": \"fail\"}";
    }else {
        userService.updatePassword(user,newPassword1);
    }



    return "{\"message\": \"success\"}";
}

 

 

끝 ! 이제 다음에는 이메일 전송 기능, 음식점 검색 기능 등을 추가할 생각이다.