로그인 창 loginForm.jsp(최종 수정일 : 2025.03.17 송현오)

수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>    
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<c:set var="contextPath"  value="${pageContext.request.contextPath}"  />
<%
   request.setCharacterEncoding("UTF-8");
%>     
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>로그인창</title>

<style>
body, html {
    height: 80%; /* 50%혹은 80%로 */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
        
.logo{
	margin-top:15%;
	margin-left:25px;
}
       
#loginForm {
            padding: 20px;
            width:100%;
            margin-bottom:5px;
        }
        
.idPwd {
    width: 30%;
    height: 25px; 
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
}

.idPwd:focus {
	outline: 0.5px solid rgba(0,0,0,0.3);
}

.ioginButton{
 width:32.5%;
 height: 45px;
 font-size: 18px;
 padding: 10px;
 border-radius: 5px;
 margin-top:15px;
 margin-bottom:15px;
 background-color: #F8CECC;
 border: none;
 font-weight: bold;
}

.ioginButton:hover{
background-color: #F5B2B0;
border: 1px solid #A94442;
cursor: pointer;
} 

.nav td a{
margin-right:50px;
font-weight: bold;
}

.snsNav {
background-color: #F5F5F5;
width:32.5%;
height: 110px;
border-radius: 5px;
margin-left:352px;
margin-right:auto;
}

.snsNav td{
font-weight: bold;
}

.snsNav img {
width:40px;
}

a {
    text-decoration: none;
    color: black; /* font-color 대신 color 사용 */
}
</style>

<script>
// 윈도우가 로그되면 해당 위치로 즉시 스크롤됨.
/*     window.onload = function() {
        document.getElementById('start').scrollIntoView({ behavior: 'auto' });
    }; */
    
	// 현재 url에서 쿼리 파라미터를 가져온다.
    const loginCheckParams = new URLSearchParams(window.location.search);
	// 컨트롤러에서 넘어온 값 비교
    if (loginCheckParams.get('result') === 'loginFailed') {
        alert('아이디 혹은 비밀번호가 다릅니다.');
    }
	
</script>

</head>
<body>
<div id="container">
<!-- <div id="start"></div> -->
<div class="logo">
<a><img src="${contextPath}/resources/image/gamiLogo1.png"  width="300px" /></a>
</div>

    <div id="loginForm">
        <form name="frmLogin" method="post" action="${contextPath}/member/login.do">
            <table style="width:100%">
                <tr align="center">
                    <td>
                        <input class="idPwd" type="text" name="memberId" value="" placeholder="아이디" required>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input class="idPwd" type="password" name="memberPw" value="" placeholder="비밀번호" required>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input class="ioginButton" type="submit" value="로그인">
                    </td>
                </tr>
                <tr class="nav">
                <td>
                <a style="margin-left:50px;" href="${contextPath}/member/findId.do">ID찾기</a>
                <a href="${contextPath}/member/findPw.do">비밀번호찾기</a>
                <a href="${contextPath}/member/memberForm.do">회원가입</a>
                </td>
            </table>
        </form>
    </div>
    
    
    <div class="snsNav">
    <table style="width:100%">
    <tr>
    <td style="padding-top:15px;">SNS계정으로 간편하게 로그인</td>
    </tr>
    <tr>
    <td style="padding-top:15px">
    <a href="${contextPath}/product/productSelect.do?productNO=1" style="display: inline-block; margin-right:5px;">
        <img src="${contextPath}/resources/image/Kakaotalk_icon.png">
    </a>
    <a href="${contextPath}/product/productSelect.do?productNO=1" style="display: inline-block; margin-right:5px;">
        <img src="${contextPath}/resources/image/Naver_icon.png">
    </a>
    <a href="${contextPath}/product/productSelect.do?productNO=1" style="display: inline-block; margin-right:5px;">
        <img src="${contextPath}/resources/image/Google_icon.png">
    </a>
</td>
    </tr>
    </table>
    </div>

    <div>
      <b>관리자로 로그인 시 가는 곳</b><a href="${contextPath }/admin/board/board_myhome/adminMyHomeList.do">[[관리자]]</a>
</div>
</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>    
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<c:set var="contextPath"  value="${pageContext.request.contextPath}"  />
<%
   request.setCharacterEncoding("UTF-8");
%>     
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>로그인창</title>
<c:choose>
	<c:when test="${result=='loginFailed'}">
	  <script>
	    window.onload=function(){
	      alert("아이디나 비밀번호가 틀립니다.다시 로그인 하세요!");
	    }
	  </script>
	</c:when>
</c:choose>  
</head>

<body>
<form name="frmLogin" method="post"  action="${contextPath}/member/login.do">
   <table border="1"  width="80%" align="center" >
      <tr align="center">
         <td>아이디</td>
         <td>비밀번호</td>
      </tr>
      <tr align="center">
         <td>
	    <input type="text" name="memberId" value="" size="20">
	 </td>
         <td>
	    <input type="password" name="memberPw" value="" size="20">
	 </td>
      </tr>
      <tr align="center">
         <td colspan="2">
            <input type="submit" value="로그인" > 
            <input type="reset"  value="다시입력" > 
         </td>
      </tr>
   </table>
   <!-- 화면 이동을 위한 -->
   <a href="${contextPath }/member/findId.do">[[ID 찾기]]</a>
   <a href="${contextPath }/member/findPw.do">[[[PW 찾기]]</a>
   <a href="${contextPath }/member/memberForm.do">[[회원가입하기]]</a>
   		<!-- if든 뭐든 어느 계정으로 로그인하냐에 따라 이동되는 곳이 바뀜
   			사용자 : /member/login.do / 관리자 : /board/board_myHome/adminMyHoeList.do -->
   			<!-- 아래는 그저 화면 이동을 위해 예제로 써두기만 한 것 -->
      <b>관리자로 로그인 시 가는 곳</b><a href="${contextPath }/admin/board/board_myhome/adminMyHomeList.do">[[관리자]]</a>
   <!-- 화면 이동을 위한(끝) -->
</form>
</body>
</html>