13일차 - 마이페이지 구현 (개인정보수정, 비밀변호 변경)

 

 

 

---

 

myPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="../layout/header.jsp" %>

<div class="wrap">
    <!-- 상단 이미지 & 서브 페이지 이동 START -->
    <section class="sub--section">
        <div class="section--background" id="notice--background">
            <div class="inner--container">
                <sub class="eng">My Page</sub>
                <h1 class="sub--title">마이페이지</h1>
            </div>
        </div>
        <div style="border-bottom: 1px solid #bababa;">
            <div class="inner--container">
                <ul class="sub--top--menu">
                    <li class="subtop--active"><a href="/user/mypage">마이페이지</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 상단 이미지 & 서브 페이지 이동 END -->

    <div class="inner--container">
        <div class="sub--content">
            <h2 class="prih2 user--form">마이페이지</h2>

            <div class="info infoupdate">
                <div class="btn btn--wrap">
                    <div id="mypage--counsel">
                        <c:choose>
                            <%-- principal.role이 'user'일 경우 --%>
                            <c:when test="${principal.role == 'user'}">
                                <p class="update-info" onclick="checkUserCounsel()"> 예약 현황 </p>
                            </c:when>

                            <%-- principal.role이 'lawyer'일 경우 --%>
                            <c:when test="${principal.role == 'lawyer'}">
                                <p class="update-info" onclick="checkLawyerCounsel()"> 변호 예약 현황 </p>
                            </c:when>
                        </c:choose>
                    </div>
                </div>



                <c:if test="${principal.site != '서버'}">
                    <p class="label--info">이름</p>
                    <p class="label--value">${principal.userName}</p>
                    <p class="label--info">아이디</p>
                    <p class="label--value">${principal.site}</p>
                    <p class="label--info">이메일</p>
                    <p class="label--value">${principal.email}</p>
                </c:if>
                <c:if test="${principal.site == '서버'}">
                    <p class="label--info">이름</p>
                    <p class="label--value">${principal.userName}</p>
                    <p class="label--info">아이디</p>
                    <p class="label--value">${principal.nickName}</p>
                    <p class="label--info">이메일</p>
                    <p class="label--value">${principal.email}</p>

                    <c:if test="${principal.role == 'lawyer'}">
                        <p class="label--info">법인명</p>
                        <p class="label--value">${lawyer.lawFirm}</p>
                        <p class="label--info">법인 전화번호</p>
                        <p class="label--value">${lawyer.officeNum}</p>
                        <p class="label--info">소개</p>
                        <p class="label--value">${lawyer.introduction}</p>
                        <p class="label--info">프로필 사진</p>
                        <div class="label--value--image"><img src="${lawyer.uploadProfileName}" alt="Profile Image" /></div>
                        <p class="label--info">법인 사진</p>
                        <div class="label--value--image"><img src="${lawyer.uploadLicenseName}" alt="Co. Image" /></div>
                        <p class="label--info">지정 10분 상담가격</p>
                        <p class="label--value">${lawyer.counselingAmount}</p>
                    </c:if>
                </c:if>
                <div class="btn btn--wrap">
                    <div id="mypage--edit">
                        <p class="update-info" onclick="infoUpdate()"> 개인정보 수정 </p>
                    </div>
                    <div id="mypage--password">
                        <p class="update-info" onclick="infoUpdatePass()"> 비밀번호 변경 </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    function checkUserCounsel() {
        window.location.href = "/user/checkUserCounsel";
    }

    function checkLawyerCounsel() {
        window.location.href = "/user/checkLawyerCounsel";
    }


    function infoUpdate() {
        window.location.href = "/user/infoUpdate";
    }

    function infoUpdatePass() {
        window.location.href = "/user/infoUpdatePass";
    }
</script>

<%@ include file="../layout/footer.jsp" %>

 

 

infoUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="../layout/header.jsp"%>

<div class="wrap">
    <!-- 상단 이미지 & 서브 페이지 이동 START -->
    <section class="sub--section">
        <div class="section--background" id="notice--background">
            <div class="inner--container">
                <sub class="eng">Notice</sub>
                <h1 class="sub--title">고객센터</h1>
            </div>
        </div>
        <div style="border-bottom: 1px solid #bababa;">
            <div class="inner--container">
                <ul class="sub--top--menu">
                    <li class="subtop--active"><a href="/user/infoUpdate">개인정보수정</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 상단 이미지 & 서브 페이지 이동 END -->

    <div class="inner--container">
        <div class="sub--content">
            <h2 class="prih2">개인정보수정</h2>

            <form action="/user/infoUpdate" method="POST" class="infoupdate">
                <!-- 사용자 이름 -->
                <div class="form-group">
                    <label for="userName">이름 </label>
                    <input type="text" class="form-control" id="userName" placeholder="이름을 입력하세요." value="${originUser.userName}" name="userName" required readonly >
                </div>

                <div class="form-group">
                    <label for="nickName">아이디</label>
                    <input type="text" class="form-control" id="nickName" placeholder="아이디를 입력하세요." value="${originUser.nickName}" name="nickName" required readonly >
                </div>


                <!-- 이메일 입력란 -->
                <div class="form-group emailsend">
                    <label for="email">이메일</label>
                    <input type="email" class="form-control" id="email" placeholder="example@carblre.com" name="email"  required>
                </div>

                <!-- 이메일 인증코드 발송 -->
                <div class="form-group">
                    <button type="button" class="check--btn" id="emailCode" onclick="sendValidate()">발송</button>
                    <button type="button" class="check--btn" id="checkValidate" onclick="checkValidate()" disabled="disabled" style="cursor: pointer;">인증 확인
                    </button>
                </div>

                <!-- 제출 버튼 -->
                <div class="btn btn--wrap">
                    <div id="edit--button">
                        <button type="submit">수정하기</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<%@ include file="../layout/footer.jsp" %>

 

 

infoUpdatePass.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="../layout/subHeader.jsp" %>

<div class="wrap">
    <section style="margin-bottom: 100px"></section>
    <div class="inner--container">
        <div class="sub--content">
            <h2 class="prih2 user--form">비밀번호 변경</h2>
            <div class="form-group infoupdate">
                <label>기존 비밀번호</label>
                <input type="password" class="form-control" id="originPass" placeholder="비밀번호 입력"
                       oninput="debounceCheckPassword()" required>
                <p id="message"></p> <!-- 기존 비밀번호 확인 결과를 여기에 표시 -->
            </div>

            <form onsubmit="handleSubmit(event)" class="infoupdate">
                <!-- password 입력란 -->
                <div class="form-group">
                    <label>변경할 비밀번호</label>
                    <input type="password" class="form-control" id="changePassword" placeholder="비밀번호 입력"
                           oninput="checkPasswordMatch()" required>
                </div>

                <!-- password 확인 입력란 -->
                <div class="form-group emailsend">
                    <label>비밀번호 확인</label>
                    <input type="password" class="form-control" id="checkPassword" placeholder="비밀번호 확인"
                           oninput="checkPasswordMatch()" required>
                </div>

                <input type="hidden" id="id" name="id" value="${UserId}">
                <p id="passwordMessage"></p> <!-- 비밀번호 일치 여부를 여기에 표시 -->

                <button type="submit" id="edit--password" disabled>비밀번호 변경</button>
                <div class="btn btn--wrap">
                    <div>
                        <button onclick="history.back()" id="go--back">뒤로가기</button>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>
<script>
    let debounceTimer;

    function debounceCheckPassword() {
        clearTimeout(debounceTimer);  // 기존 타이머 취소
        debounceTimer = setTimeout(checkOriginPass, 1000);  // 1000ms 대기 후 실행
    }

    // 기존 비밀번호 확인
    function checkOriginPass() {
        const originPass = document.getElementById('originPass').value;
        console.log("originpass", originPass);

        fetch('/user/checkOriginPass', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({originPass: originPass})
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('서버 응답이 정상적이지 않습니다.');
                }
                return response.json();
            })
            .then(result => {
                console.log(result)
                console.log(originPass)
                const feedbackElement = document.getElementById('message');
                if (result.status === 1) {
                    feedbackElement.textContent = '비밀번호가 일치합니다.';
                    feedbackElement.style.color = 'green';
                } else {
                    feedbackElement.textContent = '비밀번호가 일치하지 않습니다.';
                    feedbackElement.style.color = 'red';
                }
            })
            .catch(error => {
                console.error('오류 발생:', error);
                const feedbackElement = document.getElementById('message');
                feedbackElement.textContent = '비밀번호 확인 중 오류가 발생했습니다.';
                feedbackElement.style.color = 'red';
            });
    }


    // 비밀번호 확인 함수
    function checkPasswordMatch() {
        const changedPassword = document.getElementById('changePassword').value;
        const checkedPassword = document.getElementById('checkPassword').value;
        const messageElement = document.getElementById('passwordMessage'); // 비밀번호 일치 여부 메시지
        const submitButton = document.querySelector('button[type="submit"]'); // 제출 버튼
        console.log(checkedPassword)
        console.log(changedPassword)
        console.log(messageElement)
        if (changedPassword !== checkedPassword) {
            messageElement.textContent = "비밀번호가 일치하지 않습니다.";
            messageElement.style.color = "red"; // 비밀번호가 일치하지 않을 경우 경고 메시지
            submitButton.disabled = true; // 비밀번호가 일치하지 않으면 버튼 비활성화
        } else {
            messageElement.textContent = "비밀번호가 일치합니다.";
            messageElement.style.color = "green"; // 비밀번호가 일치할 경우
            submitButton.disabled = false; // 비밀번호가 일치하면 버튼 활성화
        }
    }

    // 폼 제출 처리
    function handleSubmit(event) {
        event.preventDefault(); // 기본 폼 제출 방지

        const changedPassword = document.getElementById('changePassword').value;
        const checkedPassword = document.getElementById('checkPassword').value;
        const id = document.getElementById('id').value;

        const requestData = {
            changedPassword: changedPassword,
            checkedPassword: checkedPassword,
            id: id
        };

        fetch('/user/updatePass', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log(data.message);
                alert(data.message);
                window.location.href = "/user/index";
            })
            .catch(error => {
                console.error("Error:", error);
                alert("오류가 발생했습니다: " + error.message);
            });
    }

</script>

<%@ include file="../layout/footer.jsp" %>

 

 

myPage.css

form.infoupdate {
    width: 40%;
    margin: auto;
}

.infoupdate {
    width: 40%;
    margin: auto;
}

.info {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 50px;
}

.update-info {
    font-size: 16px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.label--info {
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.label--value {
    width: 100%;
    height: 35px;
    border: 1px solid #bababa;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    color: #666;
    line-height: 15px;
    margin-bottom: 20px;
}

.form-group.emailsend {
    margin-bottom: 5px;
}

.label--value--image {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #bababa;
    padding: 20px;
    border-radius: 5px;
    margin-top: 0;
    box-sizing: border-box;
    text-align: center;
}

form.infoupdate #edit--button {
    border: 0;
    margin-top: 50px;
    float: right;
}

.pw--info {
    font-size: 12px;
    color: #c70000;
    display: block;
    margin-top: 5px;
}

#checkId, #emailCode {
    width: 80px;
    height: 25px;
    font-size: 14px;
    border: 0;
    border-radius: 5px;
    margin-top: 5px;
    background-color: #b19837;
    color: #fff;
}

#checkValidate {
    width: 80px;
    height: 25px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #bababa;
}

#signUp {
    width: 100%;
    height: 35px;
    text-align: center;
    border: 0;
    border-radius: 5px;
    transition-duration: 0.1s;
}

#signUp:hover {
    background-color: #b19837;
    color: #fff;
}