- popup text -> html 변경
- 회원가입 완료 페이지 주소 분리 - 초대 페이지 디자인 적용
This commit is contained in:
Rinjae
@@ -1,93 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html 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/kbank_mypage_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">법인회원 초대</h2>
|
||||
</div>
|
||||
<div class="inner i_cs h_inner2">
|
||||
<th:block
|
||||
th:replace="~{apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})}"></th:block>
|
||||
<form id="invitationForm" th:action="@{/signup/decision}" method="post" class="form_type">
|
||||
<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>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<div class="org-register-page">
|
||||
<div class="org-register-container">
|
||||
<!-- Hidden Fields -->
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
|
||||
|
||||
<!-- Alert Container -->
|
||||
<div id="alertContainer"></div>
|
||||
|
||||
<!-- Invitation Info Section -->
|
||||
<div class="org-section-header org-section-header--agreement">
|
||||
<h3>초대 정보</h3>
|
||||
</div>
|
||||
|
||||
<div class="account-recovery-card" style="margin-bottom: 32px;">
|
||||
<div class="account-recovery-result">
|
||||
<div class="result-header">
|
||||
<i class="fas fa-envelope-open-text result-icon" style="color: #1a73e8;"></i>
|
||||
<h2 class="result-title" style="font-size: 18px;">
|
||||
<strong th:text="${userName}"></strong>님, 법인회원 초대가 도착했습니다.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="result-info-box">
|
||||
<p class="info-text">
|
||||
<strong th:text="${orgName}"></strong>에서
|
||||
Kbank API Portal 법인회원으로 초대하였습니다.
|
||||
</p>
|
||||
<p class="info-text" style="margin-top: 8px;">
|
||||
초대를 수락하시면 법인회원으로 전환됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="result-info-box" style="background-color: #fff3cd; border-color: #ffc107; margin-top: 16px;">
|
||||
<p class="info-text" style="margin: 0;">
|
||||
<strong>초대코드:</strong>
|
||||
<span th:text="${invitationCode}" style="font-family: monospace; font-size: 18px; font-weight: bold; color: #333; letter-spacing: 3px; margin-left: 8px;"></span>
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: #856404;">
|
||||
이메일로 받은 초대코드와 일치하는지 확인해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agreement Section -->
|
||||
<th:block th:replace="~{apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})}"></th:block>
|
||||
|
||||
<form id="invitationForm" th:action="@{/signup/decision}" method="post">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
|
||||
<input type="hidden" name="invitationToken" th:value="${param.invitation}"/>
|
||||
<input type="hidden" name="invitationToken" th:value="${invitationCode}"/>
|
||||
<input type="hidden" id="actionInput" name="action" value=""/>
|
||||
|
||||
<div class="terms_box">
|
||||
<p>초대 수락</p>
|
||||
</div>
|
||||
<div class="con_title m_btm0">
|
||||
<p class="tit_txt">
|
||||
<span th:text="${userName}"></span>님 안녕하세요.<br><br>
|
||||
<span th:text="${orgName}"></span>에서 귀하를 Kbank API Portal 법인회원으로 초대하였습니다.<br>
|
||||
<br> Kbank와 함께 금융서비스를 손쉽게 개발해 보세요.<br><br>
|
||||
초대를 수락하시면 법인회원으로 전환됩니다.<br>
|
||||
</p>
|
||||
</div>
|
||||
<div class="info_box" style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;">
|
||||
<p style="margin: 0; font-size: 14px; color: #666;">
|
||||
<strong>초대코드:</strong>
|
||||
<span th:text="${invitationCode}" style="font-family: monospace; font-size: 16px; font-weight: bold; color: #333; letter-spacing: 2px;"></span>
|
||||
</p>
|
||||
<p style="margin: 8px 0 0 0; font-size: 12px; color: #999;">
|
||||
이메일로 받은 초대코드와 일치하는지 확인해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="btn_application m_top">
|
||||
<button type="button" onclick="submitForm('reject')" class="common_btn_type_1 gray">
|
||||
<span>거절</span>
|
||||
</button>
|
||||
<div class="btn_gap"></div>
|
||||
<button type="button" onclick="submitForm('accept')" class="common_btn_type_1">
|
||||
<span>수락</span>
|
||||
</button>
|
||||
<!-- Action Buttons -->
|
||||
<div class="org-action-buttons">
|
||||
<button type="button" class="btn btn-secondary" id="rejectButton">거절</button>
|
||||
<button type="button" class="btn btn-primary" id="acceptButton">수락</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div class="org-loading-overlay" id="loadingOverlay">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script th:replace="~{apps/register/userAgreementContent :: agreementScript}"></script>
|
||||
<script th:if="${error}" th:inline="javascript">
|
||||
$(document).ready(function () {
|
||||
customPopups.showAlert([[${error}]]);
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function submitForm(action) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let form = document.getElementById('invitationForm');
|
||||
form.action.value = action;
|
||||
let agreementForm = document.getElementById('agreementForm');
|
||||
agreementForm.classList.add('was-validated');
|
||||
let acceptButton = document.getElementById('acceptButton');
|
||||
let rejectButton = document.getElementById('rejectButton');
|
||||
|
||||
let agreementFormData = new FormData(agreementForm);
|
||||
if (action === 'accept') {
|
||||
if (agreementForm.checkValidity()) {
|
||||
// 약관 동의 폼의 데이터를 hidden input으로 추가
|
||||
let agreementFormData = new FormData(agreementForm);
|
||||
for (let pair of agreementFormData.entries()) {
|
||||
if (!form.querySelector('input[name="' + pair[0] + '"]')) {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = pair[0];
|
||||
input.value = pair[1];
|
||||
form.appendChild(input);
|
||||
function submitForm(action) {
|
||||
if (action === 'accept') {
|
||||
agreementForm.classList.add('was-validated');
|
||||
|
||||
if (agreementForm.checkValidity()) {
|
||||
// 약관 동의 폼의 데이터를 hidden input으로 추가
|
||||
let agreementFormData = new FormData(agreementForm);
|
||||
for (let pair of agreementFormData.entries()) {
|
||||
if (!form.querySelector('input[name="' + pair[0] + '"]')) {
|
||||
let input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = pair[0];
|
||||
input.value = pair[1];
|
||||
form.appendChild(input);
|
||||
}
|
||||
}
|
||||
document.getElementById('actionInput').value = action;
|
||||
document.getElementById('loadingOverlay').classList.add('active');
|
||||
form.submit();
|
||||
} else {
|
||||
customPopups.showAlert('모든 약관에 동의해 주세요.');
|
||||
}
|
||||
|
||||
form.submit();
|
||||
} else {
|
||||
customPopups.showAlert('모든 약관에 동의해 주세요.');
|
||||
document.getElementById('actionInput').value = action;
|
||||
document.getElementById('loadingOverlay').classList.add('active');
|
||||
form.submit();
|
||||
}
|
||||
} else {
|
||||
form.submit();
|
||||
}
|
||||
|
||||
document.getElementById('actionInput').value = action;
|
||||
document.getElementById('invitationForm').submit();
|
||||
}
|
||||
acceptButton.addEventListener('click', function () {
|
||||
submitForm('accept');
|
||||
});
|
||||
|
||||
rejectButton.addEventListener('click', function () {
|
||||
customPopups.showConfirm('초대를 거절하시겠습니까?', function (confirmed) {
|
||||
if (confirmed) {
|
||||
submitForm('reject');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user