회원가입 구현중.

강석 최 2022-08-18 18:12:57 +09:00
parent 589eed48a8
commit 4a09177800
7 changed files with 189 additions and 48 deletions

View File

@ -61,9 +61,9 @@ public class SecurityConfig{
http.authorizeRequests() // 페이지 권한 설정
.antMatchers("/file/**", "/board/**", "/info/**").hasRole(Role.USER.name()) // USER, ADMIN 접근 허용
.antMatchers("/admin/**").hasRole(Role.ADMIN.name()) // ADMIN만 접근 허용
.antMatchers("/user/login").permitAll() // 로그인 페이지는 권한 없이 접근 허용
.antMatchers("/login").permitAll() // 로그인 페이지는 권한 없이 접근 허용
.and() // 로그인 설정
.formLogin() .loginPage("/user/login") // Custom login form 사용
.formLogin() .loginPage("/login") // Custom login form 사용
.failureUrl("/login-error") // 로그인 실패 시 이동
.defaultSuccessUrl("/") // 로그인 성공 시 redirect 이동
.and() // 로그아웃 설정

View File

@ -20,7 +20,7 @@ public class BaseController {
public ModelAndView loginCheck(@AuthenticationPrincipal UserInfo loginUser, HttpSession session) {
ModelAndView mav = null;
if(loginUser == null){
mav = new ModelAndView("redirect:/user/login");
mav = new ModelAndView("redirect:/login");
}else{
session.setAttribute("positionList", commonCodeService.selectCommonCodeValue("POSITION"));
session.setAttribute("departmentList", commonCodeService.selectCommonCodeValue("DEPARTMENT"));
@ -39,15 +39,15 @@ public class BaseController {
session.setAttribute("departmentList", commonCodeService.selectCommonCodeValue("DEPARTMENT"));
}
@GetMapping("/user/login")
@GetMapping("/login")
public ModelAndView goLogin() {
ModelAndView mav = new ModelAndView("login");
ModelAndView mav = new ModelAndView("/login/login");
return mav;
}
@GetMapping("/login-error")
public ModelAndView loginError() {
ModelAndView mav = new ModelAndView("/login");
ModelAndView mav = new ModelAndView("/login/login");
mav.addObject("loginError", true);
return mav;
}

View File

@ -9,7 +9,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
border-radius: 10px;
}
header{

View File

@ -0,0 +1,79 @@
$(document).on('click', '#saveBtn', function (){
if(valueCheck("userInfoInsert")){
if(confirm("저장하시겠습니까?")){
contentFade("in");
const formData = new FormData($("#userInfoInsert")[0]);
debugger
$.ajax({
type : 'POST',
data : formData,
url : "/admin/insertUserInfo",
processData: false,
contentType: false,
success : function(result) {
if(result === "userIdDuplication"){
alert("등록된 아이디입니다.")
}else{
alert("저장되었습니다.")
$("#closeModalBtn").click();
$("#searchBtn").click();
}
contentFade("out");
},
error : function(xhr, status) {
alert("저장에 실패하였습니다.")
contentFade("out");
}
})
}
}
})
function valueCheck(form){
const targetForm = $("#"+form);
const userId = targetForm.find("#userId").val();
const password = targetForm.find("#modalPassword");
const passwordConfirm = targetForm.find("#passwordConfirm");
const name = targetForm.find("#name").val()
let returnFlag = true;
if(!userId){
alert("아이디를 입력해주세요.");
returnFlag = false;
}else{
const idReg = /^[a-z]+[a-z0-9]{5,19}$/g;
if(!idReg.test(userId)){
returnFlag = false;
alert("아이디 조건이 맞지 않습니다.")
}
}
if(!password[0].disabled && !password.val()){
alert("비밀번호를 입력해주세요.");
returnFlag = false;
}
if(!password[0].disabled && !passwordConfirm.val()){
alert("비밀번호 확인을 입력해주세요.");
returnFlag = false;
}
if(!name){
alert("이름 입력해주세요.");
returnFlag = false;
}
if(returnFlag){
const passwordReg = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{8,16}$/;
if(!password[0].disabled){
if(!passwordReg.test(password.val())){
alert("비밀번호 조건이 맞지 않습니다.")
returnFlag = false;
}else{
if(password.val() !== passwordConfirm.val()){
alert("비밀번호가 같지 않습니다.");
returnFlag = false;
}
}
}
}
return returnFlag;
}

View File

@ -39,8 +39,7 @@
/*세션 체크*/
const positionList = '[[${session.positionList}]]';
const departmentList = '[[${session.departmentList}]]';
const categoryList = '[[${session.categoryList}]]';
if(!positionList && !departmentList && !categoryList) {
if(!positionList && !departmentList) {
sessionReload()
}
})

View File

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<th:block layout:fragment="css">
<link rel="stylesheet" th:href="@{/css/login/login.css}">
</th:block>
<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">
<!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
<form action="/user/login" method="post">
<!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
<!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
<!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
<!--<img class="mb-4" th:src="@{/img/}" alt="" width="72" height="57">-->
<h1 class="h3 fw-normal mt-2">로그인</h1>
<div class="form-floating py-2">
<input type="text" class="form-control" id="username" name="username" placeholder="아이디">
<label for="username">아이디</label>
</div>
<div class="form-floating py-2">
<input type="password" class="form-control" id="password" name="password" placeholder="비밀번호">
<label for="password">비밀번호</label>
</div>
<!--<div class="checkbox mb-3">
<label>
<input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
</label>
</div>-->
<button class="w-100 py-2 btn btn-lg btn-primary" type="submit">로그인</button>
</form>
</div>
</div>
</html>

View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<th:block layout:fragment="css">
<link rel="stylesheet" th:href="@{/css/login/login.css}">
</th:block>
<th:block layout:fragment="script">
<script type="text/javascript" th:src="@{/js/login/login.js}"></script>
</th:block>
<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">
<!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
<div class="row">
<h2>반갑습니다</h2>
<p>이곳은 외사정보시스템입니다</p>
</div>
<form action="/user/login" method="post">
<!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
<input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
<!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
<!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
<div class="row">
<label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>
<div class="col-sm-8 mb-2">
<input type="text" class="form-control" id="username" name="username">
</div>
<label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>
<div class="col-sm-8 mb-2">
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<!--<div class="checkbox mb-3">
<label>
<input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
</label>
</div>-->
<button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>
<div class="row my-2 justify-content-between">
<div class="col-auto">
<a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
</div>
<div class="col-auto">
<a href="#">아이디/비밀번호 찾기</a>
</div>
</div>
</form>
</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-dialog">
<div class="modal-content ">
<div class="modal-header">
<h5 class="modal-title" id="userInsertModalLabel">사용자 신청</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="userInfoInsert" action="#" th:action="@{/admin/insertUserInfo}" method="post">
<div class="mb-3 row">
<label for="userId" class="col-sm-4 col-form-label text-center">아이디</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="userId" name="userId" autocomplete="off">
</div>
<div class="col-sm-auto form-text mx-auto">
6~20자 사이의 알파벳, 숫자를 입력해주세요.
</div>
</div>
<div class="mb-3 row">
<label for="modalPassword" class="col-sm-4 col-form-label text-center">비밀번호</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="modalPassword" name="password">
</div>
<div class="col-sm-auto form-text mx-auto">
8~16자 사이의 알파벳, 숫자, 특수문자 조합을 입력해주세요.
</div>
</div>
<div class="mb-3 row">
<label for="passwordConfirm" class="col-sm-4 col-form-label text-center">비밀번호 확인</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="passwordConfirm">
</div>
</div>
<div class="mb-3 row">
<label for="name" class="col-sm-4 col-form-label text-center">이름</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name" name="name" autocomplete="off">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeModalBtn">닫기</button>
<button type="button" class="btn btn-primary" id="saveBtn">신청</button>
</div>
</div>
</div>
</div>
</div>
</html>