djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인 페이지 화면설계서 적용

Browse Source
This commit is contained in:
현성필
2025-09-24 17:34:51 +09:00
parent 8d07897e42
commit 91eec29e98
41 changed files with 11966 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/views/apps/login/login.html
+83 -88
View File
@@ -1,104 +1,90 @@
<!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/kbank_base_layout}">
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title2">
<h2 class="title add7">로그인</h2>
</div>
<div class="inner i_cs9 h_inner9">
<div class="form_type">
<form id="loginForm" role="form" name="loginForm" th:action="@{/actionLogin.do}" method="post">
<th:block layout:fragment="contentFragment">
<div class="login-page">
<div class="login-container">
<div class="login-card">
<!-- Login Header with Logo -->
<div class="login-header">
<h1 class="login-title">로그인</h1>
<p class="login-subtitle">광주은행 개발자 포털에 오신 것을 환영합니다</p>
</div>
<!-- Alert Messages -->
<div th:if="${param.logout}" class="login-alert alert-info">
<i class="fas fa-info-circle"></i>
<span>로그아웃되었습니다.</span>
</div>
<!-- Login Form -->
<form id="loginForm" role="form" name="loginForm" th:action="@{/actionLogin.do}" method="post" class="login-form">
<input type="hidden" id="message" name="message" th:value="${loginMessage}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="form_type_box">
<div class="info1 form_top">
<p class="title">
<span>아이디</span>
</p>
<div class="info_line info_add">
<div class="info_box1 add add2">
<input type="text" id="id" name="id" th:value="${loginId}"
class="common_input_type_1 h_inp"
placeholder="이메일 아이디를 입력해 주세요." required>
<input type="hidden" id="loginId" th:value="${loginId}">
</div>
</div>
</div>
<input type="hidden" id="loginId" th:value="${loginId}">
<div class="info1">
<p class="title">
<span>비밀번호</span>
</p>
<div class="info_line info_add">
<div class="info_box1 add add2">
<input type="password" id="password" name="password"
class="common_input_type_1 h_inp"
placeholder="비밀번호를 입력해 주세요." required>
</div>
</div>
</div>
<!-- Email Field -->
<div class="form-group">
<label for="id" class="form-label">이메일</label>
<input type="text"
id="id"
name="id"
th:value="${loginId}"
class="form-input"
placeholder="이메일 아이디를 입력해 주세요"
required>
</div>
<div class="box_inp">
<span class="inp_check f_size">
<input id="checkId" name="checkId" type="checkbox">
<label for="checkId">아이디 저장</label>
</span>
<!-- Password Field -->
<div class="form-group">
<label for="password" class="form-label">비밀번호</label>
<input type="password"
id="password"
name="password"
class="form-input"
placeholder="비밀번호를 입력해 주세요"
required>
</div>
<!-- Remember Me Checkbox -->
<div class="form-checkbox">
<input id="checkId" name="checkId" type="checkbox">
<label for="checkId">아이디 저장</label>
</div>
</form>
<div class="btn_login">
<a href="#" class="common_btn_type_1 h_btn" id="actionLogin"><span>로그인</span></a>
<!-- Login Button -->
<button type="button" class="login-button" id="actionLogin">
로그인
</button>
<!-- Additional Links -->
<div class="login-links">
<a th:href="@{/account_recovery(tab='findId')}">
<i class="fas fa-search"></i>
<span>아이디 찾기</span>
</a>
<span class="link-separator">|</span>
<a th:href="@{/account_recovery(tab='resetPassword')}">
<i class="fas fa-lock"></i>
<span>비밀번호 초기화</span>
</a>
<span class="link-separator">|</span>
<a th:href="@{/signup}">
<i class="fas fa-user-plus"></i>
<span>회원가입</span>
</a>
</div>
<div class="login_list pc-only">
<ul>
<li class="icon_search">
<img th:src="@{/img/icon/icon_login_search.png}" alt="">
<a th:href="@{/account_recovery(tab='findId')}">아이디 찾기</a>
</li>
<li>
<span>|</span>
</li>
<li class="icon_lock">
<img th:src="@{/img/icon/icon_login_lock.png}" alt="">
<a th:href="@{/account_recovery(tab='resetPassword')}">비밀번호 초기화</a>
</li>
<li>
<span>|</span>
</li>
<li class="icon_join">
<img th:src="@{/img/icon/icon_login_join.png}" alt="">
<a th:href="@{/signup}">회원가입</a>
</li>
</ul>
</div>
<div class="login_list m-only">
<ul>
<li class="icon_search">
<a th:href="@{/account_recovery(tab='findId')}">아이디 찾기</a>
</li>
<li>
<span>|</span>
</li>
<li class="icon_lock">
<a th:href="@{/account_recovery(tab='resetPassword')}">비밀번호 초기화</a>
</li>
<li>
<span>|</span>
</li>
<li class="icon_join">
<a th:href="@{/signup}">회원가입</a>
</li>
</ul>
</div>
<div th:if="${param.logout}" class="alert alert-info mt-3">
<p>로그아웃되었습니다.</p>
<!-- Loading State -->
<div class="login-loading" id="loginLoading">
<div class="spinner"></div>
</div>
</div>
</div>
</div>
</section>
</th:block>
</body>
<th:block layout:fragment="contentScript">
<script th:inline="javascript">
@@ -179,6 +165,10 @@
let actionLogin = function (event) {
let form = document.loginForm;
// Show loading state
$('#loginLoading').addClass('active');
if ($('#checkId').is(':checked')) {
setCookie('saveid', $('#id').val(), new Date(new Date().getTime() + 1000 * 3600 * 24 * 30));
} else {
@@ -188,9 +178,11 @@
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
$('#loginLoading').removeClass('active');
customPopups.showAlert('입력 정보 확인');
} else {
if (form.password.value.length < 8) {
$('#loginLoading').removeClass('active');
customPopups.showAlert('[[#{login.passLengthShort}]]');
} else {
const originalPassword = form.password.value;
@@ -201,7 +193,10 @@
form.classList.add('was-validated');
};
$('#actionLogin').on('click', actionLogin);
$('#actionLogin').on('click', function(event) {
event.preventDefault();
actionLogin(event);
});
$('#password').on('keydown', function (event) {
if (event.key === 'Enter' || event.keyCode === 13 || event.code === 'Enter') {
event.preventDefault();