[게시판 프로젝트] 회원 정보 수정(2)

이전 포스트에서는 내 정보 수정을 다루었다.
회원 정보 수정(1)_내 정보 수정

📌 회원 정보 수정 _ 패스워드 변경

기존패스워드 확인

패스워드 변경할 때에는 기본적으로 기존 패스워드, 새 패스워드, 새 패스워드 확인 이렇게 3가지 input을 넣어 로직을 구성하였다. 기존 패스워드 input에서 focusout이 되면 ajax를 통해 해당값이 Db에 있는 값과 일치 하는지 체크하였다.

DB에는 회원의 PW가 암호화 되어 저장되어있기 때문에 값을 비교할때 input값을 암호화 시키고 비교를 진행하였다. 만일 해당 값이 DB의 값과 일치하면 original_PwCheck 변수를 1로 설정하였다

<DB에 저장되어있는 회원 PW>

input값을 암호화 시켜 DB의 pw와 비교하는 Service

//패스워드 변경 전 기존 패스워드 검사
    public HashMap<String, Object> pwCheck(Authentication authentication, String original_Pw) {
        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        String db_Pw = memberInfo(authentication.getName()).getPassword();
        HashMap<String, Object> map = new HashMap<>();
        map.put("result", passwordEncoder.matches(original_Pw, db_Pw));
        return map;
    }

일치 한다면 original_PwCheck을 1로 설정

function originalPwCheck(){
    $.ajax({
        type :"get",
        url :"/api/pwCheck",
        data : {"original_Pw" : original_Pw.val()},
        success : function(result){
            console.log(result);
            if(result.result == "1"){
                original_PwCheck = 1;
            }else{
                original_PwCheck = 0;
            }
        },
        error : function(){
            alert("ajax 실행 실패");
        }
    });
}

original_PwCheck가 0이면 즉 DB에 저장되어있는 값과 일치 하지 않는다면 아래와 같은 alert가 발생

새 패스워드, 새 패스워드 확인

새 패스워드는 6글자 이상이어야 하고 해당 패스워드와 패스워드 확인이 일치하여야한다. 때문에 패스워드 확인은 실시간으로 확인이 가능하도도록 keyup이벤트를 사용해 실시간으로 html을 inner하여 체크를 진행하였다.

$("#password_check").on('keyup',function (){
    pwSame();
});

function pwSame() {
    const password = $("#password").val();
    const password_check = $("#password_check").val();
    const pw_check_msg = $("#pw_check_msg");
    
  ...

    //패스워드 조건 확인
    if (password.length < 6) {
        alert('패스워드는 6글자 이상이어야 합니다.');
        $("#password").focus();
        return false;
    }
    //패스워드 일치 확인
    if (password != "" && password_check != "") {
        if (password == password_check) {
            pw_check_msg.html("비밀번호가 일치합니다.");
            pw_check_msg.css("color", "blue");
        } else {
            pw_check_msg.html("비밀번호가 다릅니다. 다시 확인해 주세요.");
            pw_check_msg.css("color", "red");
            return false;
        }
    }
    return true;
}

<새 패스워드, 패스워드 확인 일치>

<새 패스워드, 패스워드 확인 불 일치>

이때 사용자 입장에서 경우의 수를 나누었다.

기존 패스워드 보다 다른 input을 먼저 입력했을 경우

사용자는 반드시 기존패스워드를 입력해야한다. 만일 기존패스워드를 입력하지 않고 submit을 누르면 original_PwCheck이 0이므로 에러가 발생할것이다. 이럴 경우 alert를 띄우고 기존패스워드에 focus를 하여 기존 패스워드를 입력하도록 하였다.

 if(original_Pw.val()=="") {
        alert("기존 패스워드를 입력해주세요!. 필수항목입니다.");
        original_Pw.focus();
        return false;

패스워드 보다 패스워드 확인을 먼저 입력하는경우

만일 새 패스워드 보다 패스워드 확인을 먼저 입력한 경우에는 alert를 띄우고 새 패스워드 입력창에 focus를 하였다.

    if (password == "") {
        alert("패스워드를 입력해주세요!. 필수항목입니다.");
        $("#password").focus();
        return false;
    }