현성필
157 lines
5.5 KiB
HTML
157 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/base_layout}">
|
|
|
|
|
|
<body>
|
|
|
|
<section layout:fragment="contentFragment">
|
|
<style>
|
|
.form-signin {
|
|
width: 100%;
|
|
max-width: 330px;
|
|
padding: 15px;
|
|
margin: auto;
|
|
}
|
|
|
|
.form-signin .checkbox {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.form-signin .form-floating:focus-within {
|
|
z-index: 2;
|
|
}
|
|
|
|
.form-signin input[type="email"] {
|
|
margin-bottom: -1px;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.form-signin input[type="password"] {
|
|
margin-bottom: 10px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
</style>
|
|
<!-- javascript warning tag -->
|
|
|
|
<div class="container">
|
|
<div class="mt-2">
|
|
<h1 class="text-center">로그인</h1>
|
|
</div>
|
|
<main class="form-signin mt-2">
|
|
<form role="form" name="loginForm" id="loginForm" th:action="@{/actionLogin.do}" method="post">
|
|
<input type="hidden" id="message" name="message" th:value="${loginMessage}">
|
|
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
|
|
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="id" id="id" maxlength="20" required>
|
|
<label for="id" class="form-label">ID</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input type="password" class="form-control mb-3" name="password" id="password" minlength="8" maxlength="20" required>
|
|
<label for="password" class="form-label">비밀번호</label>
|
|
</div>
|
|
<div class="checkbox mb-3">
|
|
<input type="checkbox" class="form-check-input" name="checkId" id="checkId">
|
|
<label class="form-check-label" for="checkId">아이디 저장</label>
|
|
</div>
|
|
<button class="w-100 btn btn-lg btn-primary" type="button" id="actionLogin" th:text="#{loginForm.login}">Sign in</button>
|
|
</form>
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0;">
|
|
<div class="toast-header">
|
|
<strong class="mr-auto">알림</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-center">
|
|
<span class="text-muted"><a href="/forgot_password.do">비밀번호 초기화</a></span>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
|
|
|
|
<th:block layout:fragment="contentScript">
|
|
<script>
|
|
function setCookie(name, value, expires) {
|
|
let cookie = `${name}=${encodeURIComponent(value)}; path=/`;
|
|
|
|
if (expires instanceof Date) {
|
|
cookie += `; expires=${expires.toUTCString()}`;
|
|
}
|
|
document.cookie = cookie;
|
|
}
|
|
|
|
function getCookie(name) {
|
|
let decodedCookie = decodeURIComponent(document.cookie);
|
|
let ca = decodedCookie.split(';');
|
|
for (let i = 0; i < ca.length; i++) {
|
|
let c = ca[i];
|
|
while (c.charAt(0) === ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
if (c.indexOf(name) === 0) {
|
|
return c.substring(name.length + 1, c.length);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getId(form) {
|
|
form.checkId.checked = ((form.id.value = getCookie("saveid")) !== null);
|
|
}
|
|
|
|
function fnInit() {
|
|
getId(document.loginForm);
|
|
|
|
let message = document.loginForm.message.value;
|
|
if (message) {
|
|
$('.toast-body').text(message);
|
|
$('.toast').toast('show');
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
fnInit();
|
|
let actionLogin = function (event) {
|
|
let form = document.loginForm;
|
|
if ($('#checkId').is(':checked')) {
|
|
setCookie("saveid", $('#id').val(), new Date(new Date().getTime() + 1000 * 3600 * 24 * 30));
|
|
} else {
|
|
setCookie("saveid", $('#id').val(), new Date(new Date().getTime() - 1));
|
|
}
|
|
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
} else {
|
|
if (form.password.value.length < 8) {
|
|
let message = "[[#{validate.passLengthShort}]]";
|
|
$('.toast-body').text(message);
|
|
$('.toast').toast('show');
|
|
} else {
|
|
form.submit();
|
|
}
|
|
}
|
|
form.classList.add('was-validated');
|
|
};
|
|
|
|
$('#actionLogin').on('click', actionLogin);
|
|
$('#password').on("keydown", function (event) {
|
|
if (event.key === "Enter" || event.keyCode === 13 || event.code === 'Enter') {
|
|
event.preventDefault();
|
|
actionLogin(event);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</th:block>
|
|
|
|
</html>
|