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

초대 코드 입력 페이지 - 디자인 반영

Browse Source
This commit is contained in:
현성필
2025-12-05 16:38:41 +09:00
parent 4397c668e0
commit cb594bb473
1 changed files with 106 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/views/apps/register/invitationCodeInput.html
+106 -117
View File
@@ -1,131 +1,120 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kjbank_base_layout}">
layout:decorate="~{layout/kjbank_title_layout}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<div class="sub_title2">
<h2 class="title add2">초대 코드 입력</h2>
<section layout:fragment="title">
<div class="page-title-banner">
<img th:src="@{/img/img_title_bg.png}" alt="초대 코드 입력" class="title-image">
<h1>초대 코드 입력</h1>
</div>
</section>
<section layout:fragment="contentFragment">
<div class="org-register-page">
<div class="org-register-container">
<!-- Alert Container -->
<div id="alertContainer"></div>
<!-- Info Notice -->
<div class="org-section-header" style="margin-top: 60px; margin-bottom: 60px;">
<h3>법인 기관으로부터 받으신 8자리 초대 코드를 입력해 주세요.</h3>
</div>
<form id="invitationCodeForm" method="post" th:action="@{/signup/invitation-code}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<!-- Invitation Code Section -->
<div class="org-section-header org-section-header--agreement">
<h3>초대 코드</h3>
<span class="required-badge">필수 입력</span>
</div>
<div class="inner i_cs9 h_inner9">
<div class="form_type">
<div class="con_title">
<p>법인 기관으로부터 받으신 8자리 초대 코드를 입력해 주세요.</p>
</div>
<form id="invitationCodeForm" method="post" th:action="@{/signup/invitation-code}">
<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="invitationCode"-->
<!-- name="invitationCode"-->
<!-- class="common_input_type_1 h_inp"-->
<!-- placeholder="8자리 초대 코드를 입력해 주세요"-->
<!-- maxlength="8"-->
<!-- pattern="[A-Z0-9]{8}"-->
<!-- title="8자리 영문 대문자와 숫자로 입력해주세요"-->
<!-- required-->
<!-- style="text-transform: uppercase;">-->
<input type="text"
id="invitationCode"
name="invitationCode"
class="common_input_type_1 h_inp"
placeholder="8자리 초대 코드를 입력해 주세요"
maxlength="8"
required
style="text-transform: uppercase;">
</div>
</div>
</div>
<div class="info_txt" style="margin-top: 25px;">
<p>※ 초대 코드는 이메일로 전달받으실 수 있습니다.</p>
<p>※ 초대 코드는 대소문자를 구분하지 않으며, 8자리 영문자와 숫자로 구성되어 있습니다.</p>
</div>
</div>
<!-- 에러 메시지 표시 영역 -->
<div th:if="${error}" class="error_message" style="color: #d32f2f; margin: 25px 0 15px 0; padding: 10px; background-color: #ffebee; border-radius: 4px;">
<p th:text="${error}"></p>
</div>
<!-- 브루트포스 방지: 시도 횟수 표시 -->
<div th:if="${attemptsRemaining != null and attemptsRemaining <= 3}"
class="warning_message"
style="color: #f57c00; margin: 25px 0 15px 0; padding: 10px; background-color: #fff3e0; border-radius: 4px;">
<p>남은 시도 횟수: <strong th:text="${attemptsRemaining}"></strong>회</p>
<p>5회 실패 시 15분간 입력이 제한됩니다.</p>
</div>
<!-- 브루트포스 방지: 계정 잠금 메시지 -->
<div th:if="${lockoutTime != null}"
class="error_message"
style="color: #d32f2f; margin: 25px 0 15px 0; padding: 10px; background-color: #ffebee; border-radius: 4px;">
<p>잘못된 초대 코드를 5회 입력하셨습니다.</p>
<p th:text="${lockoutTime} + ' 후에 다시 시도해 주세요.'"></p>
</div>
<div class="btn_login">
<button type="submit" class="common_btn_type_1 h_btn" th:disabled="${lockoutTime != null}" style="width: 100%; border: none; cursor: pointer;">
<span>확인</span>
</button>
</div>
</form>
<div class="login_list pc-only" style="margin-top: 20px;">
<ul>
<li>
<a th:href="@{/login}">로그인 페이지로 돌아가기</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a th:href="@{/signup}">회원가입</a>
</li>
</ul>
</div>
<div class="login_list m-only" style="margin-top: 20px;">
<ul>
<li>
<a th:href="@{/login}">로그인 페이지로 돌아가기</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a th:href="@{/signup}">회원가입</a>
</li>
</ul>
</div>
</div>
<!-- Invitation Code Input -->
<div class="org-form-group">
<label class="org-form-label" for="invitationCode">
초대 코드 <span class="required-badge">필수</span>
</label>
<div class="org-form-input-wrapper">
<input type="text"
id="invitationCode"
name="invitationCode"
class="org-form-input"
placeholder="8자리 초대 코드를 입력해 주세요"
maxlength="8"
required
th:disabled="${lockoutTime != null}"
style="text-transform: uppercase;">
</div>
</div>
<!-- Info Notice -->
<div class="org-info-notice">
<ul>
<li>초대 코드는 이메일로 전달받으실 수 있습니다.</li>
<li>초대 코드는 대소문자를 구분하지 않으며, 8자리 영문자와 숫자로 구성되어 있습니다.</li>
</ul>
</div>
<!-- Warning: Remaining Attempts -->
<div th:if="${attemptsRemaining != null and attemptsRemaining <= 3}" class="org-info-notice" style="background-color: #fff3e0; border-color: #f57c00;">
<ul style="color: #f57c00;">
<li>남은 시도 횟수: <strong th:text="${attemptsRemaining}"></strong>회</li>
<li>5회 실패 시 15분간 입력이 제한됩니다.</li>
</ul>
</div>
<!-- Error: Account Lockout -->
<div th:if="${lockoutTime != null}" class="org-info-notice" style="background-color: #ffebee; border-color: #d32f2f;">
<ul style="color: #d32f2f;">
<li>잘못된 초대 코드를 5회 입력하셨습니다.</li>
<li th:text="${lockoutTime} + ' 후에 다시 시도해 주세요.'"></li>
</ul>
</div>
<!-- Action Buttons -->
<div class="org-action-buttons">
<a th:href="@{/login}" class="btn btn-secondary">취소</a>
<button type="submit" class="btn btn-primary" th:disabled="${lockoutTime != null}">확인</button>
</div>
</form>
<!-- Additional Links -->
<div class="org-info-notice" style="text-align: center; margin-top: 40px;">
<a th:href="@{/login}" style="color: #666; margin-right: 20px;">로그인</a>
<span style="color: #ddd;">|</span>
<a th:href="@{/signup}" style="color: #666; margin-left: 20px;">회원가입</a>
</div>
<!-- Loading Overlay -->
<div class="org-loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
</div>
</div>
</div>
</section>
<th:block layout:fragment="contentScript">
<script>
$(document).ready(function() {
// 초대 코드 입력 필드를 대문자로 자동 변환
$('#invitationCode').on('input', function() {
this.value = this.value.toUpperCase();
});
<script th:inline="javascript">
$(document).ready(function() {
// 에러 메시지 표시
const errorMsg = [[${error}]];
if (errorMsg) {
customPopups.showAlert(errorMsg, 'error');
}
// 성공 메시지가 있으면 표시
var successMsg = [[${success}]];
if (successMsg) {
customPopups.showAlert(successMsg);
}
});
</script>
// 성공 메시지 표시
const successMsg = [[${success}]];
if (successMsg) {
customPopups.showAlert(successMsg, 'success');
}
// 초대 코드 입력 필드를 대문자로 자동 변환
$('#invitationCode').on('input', function() {
this.value = this.value.toUpperCase();
});
});
</script>
</th:block>
</body>
</html>