218 lines
9.3 KiB
HTML
218 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>인트라넷</title>
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="/itrnt/css/style.css">
|
|
|
|
<!-- jquery -->
|
|
<script src="/itrnt/vendor/jquery-3.7.1.min.js"></script>
|
|
|
|
<!-- JS -->
|
|
<script src="/itrnt/js/script.js" defer></script>
|
|
|
|
<!-- Nice Select -->
|
|
<link rel="stylesheet" href="/itrnt/vendor/jquery-nice-select/nice-select.css">
|
|
<script src="/itrnt/vendor/jquery-nice-select/jquery.nice-select.min.js"></script>
|
|
|
|
<!-- Date Picker -->
|
|
<link rel="stylesheet" href="/itrnt/vendor/jquery-ui/jquery-ui.min.css">
|
|
<link rel="stylesheet" href="/itrnt/vendor/jquery-ui/jquery-ui.structure.css">
|
|
<script src="/itrnt/vendor/jquery-ui/jquery-ui.min.js"></script>
|
|
|
|
|
|
<!-- 제이쿼리 모달 -->
|
|
<script src="/itrnt/vendor/jquery-modal/jquery.modal.min.js"></script>
|
|
<link rel="stylesheet" href="/itrnt/vendor/jquery-modal/jquery.modal.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="login__page">
|
|
<div class="login__box">
|
|
<div class="login">
|
|
<h2 class="login__pageTitle">
|
|
<div class="login__logoWrapper">
|
|
<a href="">
|
|
<img class="login__logo active" src="/itrnt/images/logo_default.png" alt="gcone">
|
|
</a>
|
|
</div>
|
|
<span class="login__pageTitle__text">인트라넷</span>
|
|
</h2>
|
|
<form id="loginForm">
|
|
<div class="login__inputBox">
|
|
<input type="hidden" id="realm" th:value="${realm}">
|
|
<input type="hidden" id="redirectUri" th:value="${redirectUri}">
|
|
<input type="hidden" id="accessUrl" th:value="${accessUrl}">
|
|
<input type="hidden" id="sopMalCd" th:value="${sopMalCd}">
|
|
<input type="hidden" id="authSopmalCd" value="">
|
|
<input autofocus class="input-text full" name="username" id="username" type="text" title="아이디" placeholder="아이디"
|
|
oninput="fn_hide_alertTxt('username','mbrIdAlertText');">
|
|
<p class="login__inputBox__alertText" id="mbrIdAlertText">아이디를 입력해 주세요.</p>
|
|
<input class="input-text full" name="password" id="password" type="password" title="패스워드"
|
|
placeholder="비밀번호" onkeyup="fn_hide_alertTxt('password','mbrPwAlertText',event);">
|
|
<p class="login__inputBox__alertText" id="mbrPwAlertText">비밀번호를 입력해 주세요.</p>
|
|
</div>
|
|
<div class="login__misc">
|
|
<div class="b-checkbox-container">
|
|
<label class="b-checkbox checkbox">
|
|
<input type="checkbox" value="">
|
|
<span class="check"></span>
|
|
<span class="control-label">아이디 저장</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button class="btn full dark login__loginBtn">로그인</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/* ********************************************************
|
|
* 체크박스 값변경
|
|
******************************************************** */
|
|
const fn_set_checkbox = function(_target) {
|
|
|
|
if ($(_target).is(':checked')) {
|
|
|
|
$(_target).val('Y');
|
|
} else {
|
|
|
|
$(_target).val('N');
|
|
}
|
|
}
|
|
/* ********************************************************
|
|
* 아이디 저장 기능 구현
|
|
******************************************************** */
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const usernameInput = document.getElementById('username');
|
|
const rememberCheckbox = document.querySelector('input[type="checkbox"]');
|
|
const savedUsername = localStorage.getItem('savedUsername');
|
|
|
|
// 페이지 로드 시, 저장된 아이디가 있으면 입력 필드에 채워넣기
|
|
if (savedUsername) {
|
|
usernameInput.value = savedUsername;
|
|
rememberCheckbox.checked = true; // 체크박스도 체크 상태로 유지
|
|
}
|
|
|
|
// 체크박스 상태 변경 시 아이디 저장 또는 삭제
|
|
rememberCheckbox.addEventListener('change', function () {
|
|
if (this.checked) {
|
|
// 체크된 경우, 아이디를 localStorage에 저장
|
|
const username = usernameInput.value;
|
|
if (username) {
|
|
localStorage.setItem('savedUsername', username);
|
|
}
|
|
} else {
|
|
// 체크 해제된 경우, 저장된 아이디 삭제
|
|
localStorage.removeItem('savedUsername');
|
|
}
|
|
});
|
|
|
|
// 로그인 버튼 클릭 시 아이디 저장 처리
|
|
document.querySelector('.login__loginBtn').addEventListener('click', function () {
|
|
if (rememberCheckbox.checked) {
|
|
const username = usernameInput.value;
|
|
if (username) {
|
|
localStorage.setItem('savedUsername', username); // 아이디 저장
|
|
}
|
|
} else {
|
|
localStorage.removeItem('savedUsername'); // 체크 해제 시 아이디 삭제
|
|
}
|
|
});
|
|
|
|
//아이디 저장시 alert메시지 삭제
|
|
fn_hide_alertTxt('username', 'mbrIdAlertText');
|
|
});
|
|
/* ********************************************************
|
|
* 로그인
|
|
******************************************************** */
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const realm = document.getElementById('realm').value;
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const redirectUri = document.getElementById('redirectUri').value;
|
|
const accessUrl = document.getElementById('accessUrl').value;
|
|
const sopMalCd = document.getElementById('sopMalCd').value;
|
|
|
|
fetch(`/login/${realm}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password,
|
|
redirectUri: redirectUri,
|
|
accessUrl: accessUrl,
|
|
sopMalCd: sopMalCd
|
|
})
|
|
})
|
|
.then(response => {
|
|
console.log(response)
|
|
if (response.ok) {
|
|
return response;
|
|
}else{
|
|
switch(response.status){
|
|
case 401:
|
|
throw new Error('회원아이디나 비밀번호를 다시 확인해주세요.');
|
|
case 404:
|
|
break;
|
|
default:
|
|
throw new Error('회원 로그인에 실패하였습니다. 관리자에게 문의해주세요.');
|
|
}
|
|
}
|
|
})
|
|
.then(data => {
|
|
console.log('Login successful', data);
|
|
const encodedRedirectURL = encodeURIComponent(redirectUri);
|
|
window.location.href = '/sso/'+realm+'?redirectUrl='+encodedRedirectURL;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('로그인 실패: ' + error.message);
|
|
});
|
|
});
|
|
|
|
//로그인 input 이벤트
|
|
function fn_hide_alertTxt(targetId, targetAlertId,event) {
|
|
const inputLen = document.querySelector("#" + targetId).value.length;
|
|
const target = document.querySelector("#"+targetId);
|
|
const targetAlert = document.querySelector("#"+targetAlertId);
|
|
let message;
|
|
if(targetId === 'username'){
|
|
message = '아이디를 입력해 주세요.';
|
|
}else{
|
|
if(inputLen > 0){
|
|
if (event.getModifierState("CapsLock")) {
|
|
message = 'Caps Lock이 켜져 있습니다.';
|
|
}else{
|
|
message = '';
|
|
}
|
|
}else{
|
|
message = '비밀번호를 입력해 주세요.';
|
|
}
|
|
}
|
|
const targetHtml = `<p class="login__inputBox__alertText" id = "${targetAlertId}">${message}</p>`;
|
|
if (targetAlert) {
|
|
targetAlert.remove();
|
|
}
|
|
if(inputLen > 0){
|
|
if (targetId === 'password') {
|
|
target.insertAdjacentHTML('afterend', targetHtml);
|
|
}
|
|
}else{
|
|
target.insertAdjacentHTML('afterend', targetHtml);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |