DBNT
/
FAISP
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

login 페이지 회원가입 수정 중

master
Hyung Geun 2023-01-25 15:10:53 +09:00
parent eecc5c7e04
commit dc3c82e40a
3 changed files with 83 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/main/resources/static/css/login/login.css
View File

@ -59,7 +59,7 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
@font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight: normal;font-style: normal;} @font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight: normal;font-style: normal;}
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*font-family: 'NanumSquare';300,400,700,800*/ @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*font-family: 'NanumSquare';300,400,700,800*/
.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('static/img/main_bg.png') center no-repeat;background-size:cover;} .index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('../../img/main_bg.png') center no-repeat;background-size:cover;}
.index_warp h1 {display:block;margin:8.5% auto 0px;font-family: 'GmarketSansBold';color:#fff;font-size:60px;} .index_warp h1 {display:block;margin:8.5% auto 0px;font-family: 'GmarketSansBold';color:#fff;font-size:60px;}
.index_warp h2 {clear:both;display:block;margin:0px auto 0px;font-family: 'GmarketSansLight';color:#fff;font-size:18px;} .index_warp h2 {clear:both;display:block;margin:0px auto 0px;font-family: 'GmarketSansLight';color:#fff;font-size:18px;}
.index_warp ul {width:800px;border-radius:10px;background-color:#fff;margin:50px auto 0px;overflow:hidden;} .index_warp ul {width:800px;border-radius:10px;background-color:#fff;margin:50px auto 0px;overflow:hidden;}
@ -76,9 +76,24 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
.index_warp li:nth-child(2) .find:hover {background:#99accd;color:#fff;cursor:pointer;} .index_warp li:nth-child(2) .find:hover {background:#99accd;color:#fff;cursor:pointer;}
.form_01 {width:100%;height:30px;padding-left:57px;font-size:14px;margin:0px auto 10px;border:0px;border:1px solid #d3d7e4;display:inline-block;border-radius:3px;color:#333;box-sizing:border-box;} .form_01 {width:100%;height:30px;padding-left:57px;font-size:14px;margin:0px auto 10px;border:0px;border:1px solid #d3d7e4;display:inline-block;border-radius:3px;color:#333;box-sizing:border-box;}
.form_log {background:#fff url('img/log_icon1.png') 15px 5px no-repeat;} .form_log {background:#fff url('../../img/log_icon1.png') 15px 5px no-repeat;}
.form_pw {background:#fff url('img/log_icon2.png') 15px 5px no-repeat;} .form_pw {background:#fff url('../../img/log_icon2.png') 15px 5px no-repeat;}
.form_02 {clear:both;width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;border:1px solid #d3d7e4;display:inline-block;position:relative;top:2px;} .form_02 {clear:both;width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;border:1px solid #d3d7e4;display:inline-block;position:relative;top:2px;}
.btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#012f82;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:40px 0px 10px;transition: background 0.5s ease-in-out;} .btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#012f82;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:40px 0px 10px;transition: background 0.5s ease-in-out;}
.btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;} .btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;}
.form-login{
width: 100%;
margin: auto;
position: absolute;
z-index: 200;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-Fail {
font-size: 25px;
}

5
src/main/resources/static/js/login/login.js
View File

@ -1,3 +1,8 @@
$(document).on('click', '#userSginModal', function (){
alert("##");
$("#userInsertModal").modal('show');
})
$(document).on('click', '#dicCodeSearchBtn', function (){ $(document).on('click', '#dicCodeSearchBtn', function (){
const dicCode = $("#dicCode").val(); const dicCode = $("#dicCode").val();
if(dicCode!==''){ if(dicCode!==''){

106
src/main/resources/templates/login/login.html
View File

@ -9,65 +9,79 @@
<script type="text/javascript" th:src="@{/js/login/login.js}"></script> <script type="text/javascript" th:src="@{/js/login/login.js}"></script>
</th:block> </th:block>
<div layout:fragment="content"> <div layout:fragment="content">
<img id="img02" th:src="@{/img/img02.jpg}" class="w-100 h-100" alt="배경2">
<div id="form-signin" class="form-signin text-center bg-white"> <div class="index_warp form-login">
<!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
<div class="row">
<h2>반갑습니다</h2>
<p>이곳은 외사정보시스템입니다</p>
</div>
<form action="/login" method="post"> <form action="/login" method="post">
<!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 --> <!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/> <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p> <p th:if="${loginError}" class="error text-warning login-Fail">로그인에 실패하였습니다.</p>
<!-- 로그인 시 아이디의 name 애트리뷰트 값은 username --> <!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
<!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 --> <!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
<div class="row"> <h1>사이버외사정보시스템</h1>
<label for="username" class="col-sm-4 col-form-label mb-2">아이디</label> <h2>FOREIGN AFFAIRS INTELLIGENCE CYBER SYSTEM</h2>
<div class="col-sm-8 mb-2"> <ul>
<input type="text" class="form-control form-control-sm" id="username" name="username"> <li>
</div> <div><img src="img/logo_big.png" alt="해양경찰청"></div>
<label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label> </li>
<div class="col-sm-8 mb-2"> <li>
<input type="password" class="form-control form-control-sm" id="password" name="password"> <img src="img/logo.png" alt="해양경찰청">
</div> <h3>FOREIGN AFFAIRS DIVISION</h3>
</div> <h4>LOGIN</h4>
<!--<div class="checkbox mb-3">
<label> <input type="text" name="username" id="username" placeholder="아이디" onfocus="this.placeholder=''"
<input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화) onblur="this.placeholder='아이디'" class="form_01 form_log">
</label> <input type="password" name="password" id="password" placeholder="비밀번호" onfocus="this.placeholder=''"
</div>--> onblur="this.placeholder='비밀번호'" class="form_01 form_pw">
<button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>
<div class="row my-2 justify-content-between"> <!-- <input name="idcchk" type="checkbox" id="idcchk" class="form_02"> 아이디저장-->
<div class="col-auto"> <!--<div class="checkbox mb-3">
<a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a> <label>
</div> <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
<div class="col-auto"> </label>
<a href="#">아이디/비밀번호 찾기</a> </div>-->
</div> <input type="submit" name="login" id="login" value="로그인" class="btn_login">
</div>
<!--<div class="join">
<a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
</div>-->
<div class="row my-2 justify-content-between">
<div class="col-auto">
<a href="#" id="userSginModal">회원가입</a>
</div>
</div>
<a href="#">
<div class="find">아이디/패스워드찾기</div>
</a>
</li>
</ul>
</form> </form>
</div> </div>
</div>
<div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userInsertModalLabel" aria-hidden="true"> <div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content " id="userInsertModalContent"> <div class="modal-content " id="userInsertModalContent">
<div class="modal-header bg-dark"> <div class="modal-header bg-dark">
<h5 class="modal-title text-white" id="userInsertModalLabel">사용자 신청</h5> <h5 class="modal-title text-white" id="userInsertModalLabel">사용자 신청</h5>
<button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="mb-3 mt-3 row"> <div class="mb-3 mt-3 row">
<label for="dicCode" class="col-sm-2 col-form-label col-form-label-sm text-center ">공무원식별번호</label> <label for="dicCode" class="col-sm-2 col-form-label col-form-label-sm text-center ">공무원식별번호</label>
<div class="col-sm-3"> <div class="col-sm-3">
<input type="text" class="form-control form-control-sm" id="dicCode" name="dicCode" autocomplete="off"> <input type="text" class="form-control form-control-sm" id="dicCode" name="dicCode" autocomplete="off">
</div>
<button type="button" class="btn btn-sm btn-outline-primary col-sm-1" id="dicCodeSearchBtn">검색</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-primary col-sm-1" id="dicCodeSearchBtn">검색</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</html> </html>