feature/admin #5
|
|
@ -1,22 +0,0 @@
|
|||
package com.bpgroup.poc.admin.security;
|
||||
|
||||
import jakarta.servlet.FilterChain;
|
||||
import jakarta.servlet.ServletException;
|
||||
import jakarta.servlet.http.HttpServletRequest;
|
||||
import jakarta.servlet.http.HttpServletResponse;
|
||||
import org.springframework.security.web.csrf.CsrfToken;
|
||||
import org.springframework.web.filter.OncePerRequestFilter;
|
||||
|
||||
import java.io.IOException;
|
||||
|
||||
public class CsrfCookieFilter extends OncePerRequestFilter {
|
||||
@Override
|
||||
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
|
||||
CsrfToken csrfToken = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
|
||||
if (csrfToken != null) {
|
||||
response.setHeader(csrfToken.getHeaderName(), csrfToken.getToken());
|
||||
}
|
||||
|
||||
filterChain.doFilter(request, response);
|
||||
}
|
||||
}
|
||||
|
|
@ -8,9 +8,6 @@ import org.springframework.context.annotation.Configuration;
|
|||
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
||||
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
|
||||
import org.springframework.security.web.SecurityFilterChain;
|
||||
import org.springframework.security.web.authentication.www.BasicAuthenticationFilter;
|
||||
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
|
||||
import org.springframework.security.web.csrf.CsrfTokenRequestAttributeHandler;
|
||||
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
|
||||
|
||||
import java.util.Objects;
|
||||
|
|
@ -25,17 +22,6 @@ public class SecurityConfig {
|
|||
|
||||
@Bean
|
||||
SecurityFilterChain defaultSecurityFilterChain(HttpSecurity http) throws Exception {
|
||||
// CSRF 설정
|
||||
CsrfTokenRequestAttributeHandler csrfTokenRequestAttributeHandler = new CsrfTokenRequestAttributeHandler();
|
||||
csrfTokenRequestAttributeHandler.setCsrfRequestAttributeName("_csrf");
|
||||
|
||||
http.csrf(c -> {
|
||||
c.csrfTokenRequestHandler(csrfTokenRequestAttributeHandler)
|
||||
.ignoringRequestMatchers("/common/modal/**")
|
||||
.ignoringRequestMatchers(LOGIN_PATH, LOGOUT_PATH, ERROR_PATH) // CSRF 무시 URL 설정
|
||||
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); // CSRF 토큰을 쿠키에 저장 및 사용 가능
|
||||
}).addFilterAfter(new CsrfCookieFilter(), BasicAuthenticationFilter.class); // 로그인이 완료된 후 CSRF Filter 를 실행
|
||||
|
||||
// 인증 설정
|
||||
http.authorizeHttpRequests(c -> c
|
||||
.requestMatchers("/css/**", "/images/**", "/js/**").permitAll()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const EventRouter = {
|
||||
_eventRouter: $({}),
|
||||
_eventRouter: new EventTarget(),
|
||||
|
||||
/**
|
||||
* 이벤트 발생
|
||||
|
|
@ -8,7 +8,8 @@ const EventRouter = {
|
|||
* @param {*=} data
|
||||
*/
|
||||
trigger(eventName, data) {
|
||||
this._eventRouter.trigger(eventName, data);
|
||||
const event = new CustomEvent(eventName, { detail: data });
|
||||
this._eventRouter.dispatchEvent(event);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -23,15 +24,7 @@ const EventRouter = {
|
|||
return;
|
||||
}
|
||||
|
||||
this._eventRouter.off(eventName);
|
||||
this._eventRouter.on(eventName, func);
|
||||
this._eventRouter.removeEventListener(eventName, func);
|
||||
this._eventRouter.addEventListener(eventName, func);
|
||||
},
|
||||
|
||||
/**
|
||||
* 현재 등록된 이벤트 조회 (디버깅용)
|
||||
*/
|
||||
logCurrentRegistered() {
|
||||
const events = $._data(this._eventRouter[0], "events");
|
||||
console.log(events);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const originalFetch = window.fetch;
|
||||
|
||||
/**
|
||||
* csrf token 없을 경우 추가하는 fetch interceptor
|
||||
* @param url
|
||||
* @param options
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
window.fetch = function(url, options) {
|
||||
// CSRF 토큰
|
||||
const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute('content');
|
||||
const csrfHeader = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');
|
||||
|
||||
if (options.headers) {
|
||||
options.headers[csrfHeader] = csrfToken;
|
||||
} else {
|
||||
options.headers = {
|
||||
[csrfHeader]: csrfToken,
|
||||
ContentType: 'application/json',
|
||||
method: options.method ? options.method : 'POST'
|
||||
};
|
||||
}
|
||||
|
||||
// 원래의 fetch 함수 호출
|
||||
return originalFetch.apply(this, arguments);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,73 +1,73 @@
|
|||
// mobile 100vh err issue 대응
|
||||
|
||||
const setVh = () => {
|
||||
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`)
|
||||
};
|
||||
window.addEventListener('resize', setVh);
|
||||
setVh();
|
||||
|
||||
$(document).on('touchstart', function () {
|
||||
document.addEventListener('touchstart', function () {
|
||||
});
|
||||
|
||||
|
||||
// 콘텐츠영역 자동 높이 조절
|
||||
$(document).ready(function () {
|
||||
// var headerHeight = $('header').outerHeight();
|
||||
// $('.wrapper').css('padding-top', headerHeight + 'px');
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setupAccordion();
|
||||
|
||||
// navigation 모바일 처리
|
||||
$('#toggleLink').click(function () {
|
||||
document.querySelector('#toggleLink').addEventListener('click', function () {
|
||||
toggleMenu('.menu_wrap');
|
||||
});
|
||||
|
||||
$('.closeButton').click(function () {
|
||||
document.querySelector('.closeButton').addEventListener('click', function () {
|
||||
closeMenu('.menu_wrap');
|
||||
});
|
||||
|
||||
//modal
|
||||
$("#openModalBtn").click(function () {
|
||||
openModal();
|
||||
});
|
||||
|
||||
$(".modal .close, .modal").click(function (e) {
|
||||
document.querySelectorAll('.modal .close, .modal').forEach(function (element) {
|
||||
element.addEventListener('click', function (e) {
|
||||
if (e.target !== this) return; // 모달 내부를 클릭한 경우에는 닫히지 않도록 처리
|
||||
closeModal();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 아코디언
|
||||
function setupAccordion() {
|
||||
$('.nav_tit').on('click', function () {
|
||||
$(this).next('.nav_section').slideToggle(150);
|
||||
$(this).toggleClass('active');
|
||||
$('.nav_section').not($(this).next('.nav_section')).slideUp(150);
|
||||
$('.nav_tit').not($(this)).removeClass('active');
|
||||
document.querySelectorAll('.nav_tit').forEach(function (element) {
|
||||
element.addEventListener('click', function () {
|
||||
this.nextElementSibling.classList.toggle('active');
|
||||
document.querySelectorAll('.nav_section').forEach(function (section) {
|
||||
if (section !== this.nextElementSibling) {
|
||||
section.classList.remove('active');
|
||||
} else {
|
||||
section.classList.toggle('active');
|
||||
}
|
||||
}, this);
|
||||
document.querySelectorAll('.nav_tit').forEach(function (tit) {
|
||||
if (tit !== this) {
|
||||
tit.classList.remove('active');
|
||||
} else {
|
||||
tit.classList.toggle('active');
|
||||
}
|
||||
}, this);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// navigation 모바일 처리
|
||||
function toggleMenu(selector) {
|
||||
$(selector).toggleClass('active');
|
||||
document.querySelector(selector).classList.toggle('active');
|
||||
}
|
||||
|
||||
function closeMenu(selector) {
|
||||
$(selector).removeClass('active');
|
||||
document.querySelector(selector).classList.remove('active');
|
||||
}
|
||||
|
||||
|
||||
//modal 열기 닫기
|
||||
function openModal() {
|
||||
$(".modal").fadeIn(100);
|
||||
$("body").css("overflow", "hidden");
|
||||
document.querySelector('.modal').style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
$(".modal").fadeOut(100);
|
||||
$("body").css("overflow", "auto");
|
||||
document.querySelector('.modal').style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
|
@ -52,7 +52,8 @@ const PageHelper = {
|
|||
*/
|
||||
showErrorModal(message, cancelFunction) {
|
||||
if (!cancelFunction) {
|
||||
cancelFunction = () => {}
|
||||
cancelFunction = () => {
|
||||
}
|
||||
}
|
||||
|
||||
this.showAlertModal({
|
||||
|
|
@ -71,7 +72,8 @@ const PageHelper = {
|
|||
*/
|
||||
showFinishModal(message, cancelFunction) {
|
||||
if (!cancelFunction) {
|
||||
cancelFunction = () => {}
|
||||
cancelFunction = () => {
|
||||
}
|
||||
}
|
||||
|
||||
this.showAlertModal({
|
||||
|
|
@ -117,7 +119,7 @@ const PageHelper = {
|
|||
* @param {string} params.contentSelector
|
||||
* @param {string} params.appendToSelector
|
||||
* @param {Object=} callbacks
|
||||
* @param {function(jQuery)=} callbacks.success - modal body의 jquery 객체가 파라미터로 오는 success 콜백 함수
|
||||
* @param {function(Element)=} callbacks.success - 파라미터로 오는 success 콜백 함수
|
||||
* @param {function(Object)=} callbacks.error - 에러 메세지가 파라미터로 오는 error 콜백 함수
|
||||
* @param {function()=} callbacks.complete
|
||||
*/
|
||||
|
|
@ -132,11 +134,19 @@ const PageHelper = {
|
|||
data: params.data,
|
||||
}, {
|
||||
success: function (res) {
|
||||
const e = $(res);
|
||||
const d = e.find(params.contentSelector);
|
||||
d.appendTo(params.appendToSelector);
|
||||
const s = e.find('script');
|
||||
s.appendTo('body');
|
||||
const p = new DOMParser();
|
||||
const e = p.parseFromString(res, 'text/html');
|
||||
|
||||
const d = e.querySelector(params.contentSelector);
|
||||
document.body.appendChild(d);
|
||||
|
||||
const sDiv = document.createElement('script');
|
||||
sDiv.setAttribute('data-page-modal', 'script');
|
||||
|
||||
const s = e.querySelector('script');
|
||||
sDiv.textContent = s.textContent;
|
||||
document.body.appendChild(sDiv);
|
||||
|
||||
if (callbacks.success) callbacks.success(d);
|
||||
},
|
||||
error: function (error) {
|
||||
|
|
@ -163,20 +173,21 @@ const PageHelper = {
|
|||
callbacks = {};
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: params.url,
|
||||
type: params.method,
|
||||
data: params.data,
|
||||
success: function (res) {
|
||||
if (callbacks.success) callbacks.success(res);
|
||||
},
|
||||
error: function (error) {
|
||||
fetch(params.url, {
|
||||
method: params.method,
|
||||
body: new URLSearchParams(params.data)
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
if (callbacks.success) callbacks.success(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
if (callbacks.error) callbacks.error(error);
|
||||
},
|
||||
complete: function () {
|
||||
})
|
||||
.finally(() => {
|
||||
if (callbacks.complete) callbacks.complete();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,81 +1,79 @@
|
|||
const ReqHelper = {
|
||||
const Reqhelper = {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {jQuery} form
|
||||
* @param {Object=} callbacks
|
||||
* @param {function(Object=)=} callbacks.success
|
||||
* @param {function(Object)=} callbacks.error
|
||||
* @param {function()=} callbacks.complete
|
||||
* post json http request
|
||||
* @param url request url
|
||||
* @param data is not json stringify data
|
||||
* @param sFunc success function
|
||||
* @param eFunc error function
|
||||
* @param fFunc finally function
|
||||
*/
|
||||
reqByForm(form, callbacks) {
|
||||
if (!(form instanceof jQuery)) {
|
||||
throw new Error('form is not jQuery instance');
|
||||
reqPostJson: function (url, data, sFunc, eFunc, fFunc) {
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
if (!callbacks) {
|
||||
callbacks = {};
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
|
||||
const url = form.attr('action');
|
||||
const method = form.attr('method');
|
||||
const dataObj = form.serializeArray().reduce((obj, item) => {
|
||||
obj[item.name] = item.value;
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(dataObj),
|
||||
success: function (res) {
|
||||
if (!callbacks.success) return;
|
||||
|
||||
res.isSuccess = () => res.resultCode === "0000";
|
||||
res.isFail = () => !res.isSuccess();
|
||||
res.getMessage = () => res.resultMsg || '';
|
||||
callbacks.success(res);
|
||||
},
|
||||
error: function (error) {
|
||||
if (callbacks.error) callbacks.error(error);
|
||||
},
|
||||
complete: function () {
|
||||
if (callbacks.complete) callbacks.complete();
|
||||
return response.text().then(text => text ? JSON.parse(text) : null);
|
||||
})
|
||||
.then((data) => {
|
||||
if (sFunc) {
|
||||
sFunc(data);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (eFunc) {
|
||||
eFunc(error);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (fFunc) {
|
||||
fFunc();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param url
|
||||
* @param sendData {Object=}
|
||||
* @param {Object=} callbacks
|
||||
* @param {function(Object=)=} callbacks.success
|
||||
* @param {function(Object)=} callbacks.error
|
||||
* @param {function()=} callbacks.complete
|
||||
* get json http request
|
||||
* @param url request url
|
||||
* @param sFunc success function
|
||||
* @param eFunc error function
|
||||
* @param fFunc finally function
|
||||
*/
|
||||
reqByObj(url, sendData, callbacks) {
|
||||
if (!url) {
|
||||
throw new Error('url is empty');
|
||||
}
|
||||
if (!callbacks) {
|
||||
callbacks = {};
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "post",
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(sendData),
|
||||
success: function (res) {
|
||||
if (callbacks.success) callbacks.success(res);
|
||||
},
|
||||
error: function (error) {
|
||||
if (callbacks.error) callbacks.error(error);
|
||||
},
|
||||
complete: function () {
|
||||
if (callbacks.complete) callbacks.complete();
|
||||
reqGetJson: function (url, sFunc, eFunc, fFunc) {
|
||||
fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
return response.text().then(text => text ? JSON.parse(text) : null);
|
||||
})
|
||||
.then((data) => {
|
||||
if (sFunc) {
|
||||
sFunc(data);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (eFunc) {
|
||||
eFunc(error);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (fFunc) {
|
||||
fFunc();
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4,33 +4,6 @@
|
|||
<th:block th:fragment="applyCsrf">
|
||||
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
|
||||
<meta name="_csrf" th:content="${_csrf.token}"/>
|
||||
<script th:inline="javascript">
|
||||
// CSRF 토큰
|
||||
// fetch ajax 사용 시 헤더에 추가 필요
|
||||
const csrfToken = $('meta[name="_csrf"]').attr('content');
|
||||
const csrfHeader = $('meta[name="_csrf_header"]').attr('content');
|
||||
|
||||
function fetchPost(requestUri, body) {
|
||||
return fetch(requestUri, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
[csrfHeader]: csrfToken,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
}
|
||||
|
||||
function fetchGet(requestUri) {
|
||||
return fetch(requestUri, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
[csrfHeader]: csrfToken,
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,21 +21,25 @@
|
|||
|
||||
<script data-alert-modal="script">
|
||||
(function () {
|
||||
const modalBody = $('div[data-alert-modal="body"]');
|
||||
const modalBody = document.querySelector('div[data-alert-modal="body"]');
|
||||
|
||||
modalBody.fadeIn(100);
|
||||
$("body").css("overflow", "hidden");
|
||||
modalBody.style.display = "block";
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
$('[data-alert-modal="cancelButton"]').on('click', function () {
|
||||
document.querySelectorAll('[data-alert-modal="cancelButton"]').forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
close();
|
||||
EventRouter.trigger('clickAlertModalCancelButton');
|
||||
});
|
||||
});
|
||||
|
||||
function close() {
|
||||
modalBody.fadeOut(100);
|
||||
modalBody.remove();
|
||||
$("body").css("overflow", "auto");
|
||||
$('script[data-alert-modal="script"]').remove();
|
||||
modalBody.style.display = "none";
|
||||
modalBody.parentNode.removeChild(modalBody);
|
||||
document.body.style.overflow = "auto";
|
||||
|
||||
const modalScript = document.querySelector('script[data-page-modal="script"]');
|
||||
modalScript.parentNode.removeChild(modalScript);
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,12 +22,12 @@
|
|||
|
||||
<script data-confirm-modal="script">
|
||||
(function () {
|
||||
const modalBody = $('div[data-confirm-modal="body"]');
|
||||
const modalBody = document.querySelector('div[data-confirm-modal="body"]');
|
||||
|
||||
modalBody.fadeIn(100);
|
||||
$("body").css("overflow", "hidden");
|
||||
modalBody.style.display = "block";
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
$('button[data-confirm-modal="confirmButton"]').on('click', function () {
|
||||
document.querySelector('button[data-confirm-modal="confirmButton"]').addEventListener('click', function () {
|
||||
let prevented = false;
|
||||
EventRouter.trigger('clickConfirmModalConfirmButton', {preventDefault: () => prevented = true});
|
||||
if (prevented) {
|
||||
|
|
@ -37,7 +37,8 @@
|
|||
hideAndRemove();
|
||||
});
|
||||
|
||||
$('[data-confirm-modal="cancelButton"]').on('click', function () {
|
||||
document.querySelectorAll('[data-alert-modal="cancelButton"]').forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
let prevented = false;
|
||||
EventRouter.trigger('clickConfirmModalCancelButton', {preventDefault: () => prevented = true});
|
||||
if (prevented) {
|
||||
|
|
@ -46,12 +47,13 @@
|
|||
|
||||
hideAndRemove();
|
||||
});
|
||||
});
|
||||
|
||||
function hideAndRemove() {
|
||||
modalBody.fadeOut(100);
|
||||
modalBody.style.display = "none";
|
||||
modalBody.remove();
|
||||
$("body").css("overflow", "auto");
|
||||
$('script[data-confirm-modal="script"]').remove();
|
||||
document.body.style.overflow = "auto";
|
||||
document.querySelector('script[data-confirm-modal="script"]').remove();
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<script data-page-modal="script">
|
||||
$('div[data-page-modal="body"]').fadeIn(100);
|
||||
$("body").css("overflow", "hidden");
|
||||
document.querySelector('div[data-page-modal="body"]').style.display = "block";
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
$('[data-page-modal="cancelButton"]').on('click', cancelModal);
|
||||
document.querySelectorAll('[data-page-modal="cancelButton"]').forEach(button => {
|
||||
button.addEventListener('click', cancelModal);
|
||||
});
|
||||
|
||||
function cancelModal() {
|
||||
closeModal();
|
||||
|
|
@ -32,11 +34,13 @@
|
|||
}
|
||||
|
||||
function closeModal() {
|
||||
const modalBody = $('div[data-page-modal="body"]');
|
||||
modalBody.fadeOut(100);
|
||||
modalBody.remove();
|
||||
$("body").css("overflow", "auto");
|
||||
$('script[data-page-modal="script"]').remove();
|
||||
const modalBody = document.querySelector('div[data-page-modal="body"]');
|
||||
modalBody.style.display = "none";
|
||||
modalBody.parentNode.removeChild(modalBody);
|
||||
document.body.style.overflow = "auto";
|
||||
|
||||
const modalScript = document.querySelector('script[data-page-modal="script"]');
|
||||
modalScript.parentNode.removeChild(modalScript);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<title>관리자 시스템</title>
|
||||
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.7.1.min.js}"></script>
|
||||
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/sub.css}"/>
|
||||
|
||||
<script type="text/javascript" th:src="@{/js/motion.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/pagehelper.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/reqhelper.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/eventrouter.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/httpinterceptor.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/reqhelper.js}"></script>
|
||||
|
||||
<th:block th:replace="~{fragment/csrf/csrf :: applyCsrf}"></th:block>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<title>시스템</title>
|
||||
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.7.1.min.js}"></script>
|
||||
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
|
||||
<link rel="stylesheet" th:href="@{/css/style.css}"/>
|
||||
|
||||
<script type="text/javascript" th:src="@{/js/pagehelper.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/reqhelper.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/eventrouter.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/httpinterceptor.js}"></script>
|
||||
|
||||
<th:block th:replace="~{fragment/csrf/csrf :: applyCsrf}"></th:block>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login_wrap">
|
||||
|
|
@ -39,16 +40,16 @@
|
|||
PageHelper.showErrorModal(errorMessage);
|
||||
}
|
||||
|
||||
$('#loginButton').click(function () {
|
||||
document.querySelector('#loginButton').addEventListener('click', function () {
|
||||
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
$('#loginForm').submit();
|
||||
document.querySelector('#loginForm').submit();
|
||||
|
||||
function validate() {
|
||||
const loginId = $('input[name="loginId"]').val();
|
||||
const password = $('input[name="password"]').val();
|
||||
const loginId = document.querySelector('input[name="loginId"]').value;
|
||||
const password = document.querySelector('input[name="password"]').value;
|
||||
|
||||
if (!loginId) {
|
||||
PageHelper.showErrorModal('아이디를 입력해주세요.');
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="tb_wrapper">
|
||||
<input type="hidden" id="iptUpdateId" name="id">
|
||||
<label for="iptUpdateLoginId">아이디: </label><input type="text" id="iptUpdateLoginId" name="loginId" readonly>
|
||||
<label for="iptUpdatePassword">비밀번호: </label ><input type="password" id="iptUpdatePassword" name="password">
|
||||
<label for="iptUpdatePassword">비밀번호: </label><input type="password" id="iptUpdatePassword" name="password">
|
||||
<label for="iptUpdateEmail">이메일: </label><input type="text" id="iptUpdateEmail" name="email">
|
||||
<label for="iptUpdateName">이름: </label><input type="text" id="iptUpdateName" name="name">
|
||||
<button type="button" id="btnUpdate" class="btn_confirm" data-bs-dismiss="modal">수정</button>
|
||||
|
|
@ -66,41 +66,37 @@
|
|||
document.getElementById('btnCheckDuplication').addEventListener(('click'), function () {
|
||||
const loginId = document.getElementById('iptCreateLoginId').value;
|
||||
const requestUri = /*[[@{/admin/management}]]*/ '';
|
||||
fetchGet(requestUri.concat('/', loginId))
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.text().then(text => text ? JSON.parse(text) : null);
|
||||
} else {
|
||||
PageHelper.showErrorModal('데이터 조회에 실패했습니다.');
|
||||
}
|
||||
})
|
||||
.then((data) => {
|
||||
if (!data) {
|
||||
|
||||
Reqhelper.reqGetJson(requestUri.concat('/', loginId), (res) => {
|
||||
if (!res) {
|
||||
PageHelper.showAlertModal({title: '아이디 중복', message: '사용 가능한 아이디입니다.'});
|
||||
} else {
|
||||
PageHelper.showAlertModal({title: '아이디 중복', message: '사용할 수 없는 아이디입니다.'});
|
||||
}
|
||||
}, () => {
|
||||
PageHelper.showErrorModal('데이터 조회에 실패했습니다.');
|
||||
});
|
||||
});
|
||||
})
|
||||
;
|
||||
|
||||
/**
|
||||
* 관리자 등록
|
||||
*/
|
||||
document.getElementById('btnCreate').addEventListener(('click'), function () {
|
||||
const requestUri = /*[[@{/admin/management/create}]]*/ '';
|
||||
fetchPost(requestUri, {
|
||||
let data = {
|
||||
loginId: document.getElementById('iptCreateLoginId').value,
|
||||
password: document.getElementById('iptCreatePassword').value,
|
||||
email: document.getElementById('iptCreateEmail').value,
|
||||
name: document.getElementById('iptCreateEmail').value
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
PageHelper.showAlertModal({title: '등록 완료', message: '등록이 완료되었습니다.'});
|
||||
};
|
||||
const requestUri = /*[[@{/admin/management/create}]]*/ '';
|
||||
|
||||
Reqhelper.reqPostJson(requestUri, data, () => {
|
||||
PageHelper.showAlertModal({title: '등록 완료', message: '등록이 완료되었습니다.'});
|
||||
clearInput();
|
||||
} else {
|
||||
|
||||
}, () => {
|
||||
PageHelper.showErrorModal('등록에 실패했습니다.');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -110,62 +106,57 @@
|
|||
*/
|
||||
document.getElementById('btnFindAll').addEventListener(('click'), function () {
|
||||
const requestUri = /*[[@{/admin/management/list}]]*/ '';
|
||||
fetchGet(requestUri)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
PageHelper.showErrorModal('데이터 조회에 실패했습니다.');
|
||||
}
|
||||
})
|
||||
.then((data) => {
|
||||
Reqhelper.reqGetJson(requestUri, (res) => {
|
||||
const selAdministrator = document.getElementById('selAdministrator');
|
||||
selAdministrator.innerHTML = '<option value="">선택</option>';
|
||||
data.forEach(item => {
|
||||
res.forEach(item => {
|
||||
const option = document.createElement('option');
|
||||
option.value = item.id;
|
||||
option.text = item.loginId;
|
||||
selAdministrator.appendChild(option);
|
||||
});
|
||||
}, () => {
|
||||
PageHelper.showErrorModal('데이터 조회에 실패했습니다.');
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('selAdministrator').addEventListener(('change'), function () {
|
||||
document.getElementById('iptUpdateId').value = this.value;
|
||||
document.getElementById('iptUpdateLoginId').value = this.options[this.selectedIndex].text;
|
||||
|
||||
document.getElementById('iptDeleteId').value = this.value;
|
||||
document.getElementById('iptDeleteLoginId').value = this.options[this.selectedIndex].text;
|
||||
});
|
||||
|
||||
/**
|
||||
* 관리자 수정
|
||||
*/
|
||||
document.getElementById('btnUpdate').addEventListener(('click'), function () {
|
||||
const requestUri = /*[[@{/admin/management/update}]]*/ '';
|
||||
fetchPost(requestUri, {
|
||||
let data = {
|
||||
id: document.getElementById('iptUpdateId').value,
|
||||
password: document.getElementById('iptUpdatePassword').value,
|
||||
email: document.getElementById('iptUpdateEmail').value,
|
||||
name: document.getElementById('iptUpdateEmail').value
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
name: document.getElementById('iptUpdateName').value
|
||||
};
|
||||
const requestUri = /*[[@{/admin/management/update}]]*/ '';
|
||||
|
||||
Reqhelper.reqPostJson(requestUri, data, () => {
|
||||
PageHelper.showAlertModal({title: '수정 완료', message: '수정이 완료되었습니다.'});
|
||||
} else {
|
||||
}, () => {
|
||||
PageHelper.showErrorModal('수정에 실패했습니다.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btnDelete').addEventListener(('click'), function () {
|
||||
const requestUri = /*[[@{/admin/management/delete}]]*/ '';
|
||||
fetchPost(requestUri, {
|
||||
let data = {
|
||||
id: document.getElementById('iptDeleteId').value
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
PageHelper.showAlertModal({title: '삭제 완료', message: '삭제가 완료되었습니다.'});
|
||||
};
|
||||
const requestUri = /*[[@{/admin/management/delete}]]*/ '';
|
||||
|
||||
Reqhelper.reqPostJson(requestUri, data, () => {
|
||||
PageHelper.showAlertModal({title: '삭제 완료', message: '삭제가 완료되었습니다.'});
|
||||
clearInput();
|
||||
} else {
|
||||
}, () => {
|
||||
PageHelper.showErrorModal('삭제에 실패했습니다.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue