Rinjae
202 lines
8.6 KiB
HTML
202 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{layout/djbank_title_layout}">
|
|
<body>
|
|
<section layout:fragment="title">
|
|
<div class="page-title-banner">
|
|
<img th:src="@{/img/img_title_bg.png}" alt="개인회원가입" class="title-image">
|
|
<h1 th:text="${!isInvited ? '개인회원가입' : '법인회원가입'}">개인회원가입</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<section 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}"/>
|
|
<input type="hidden" name="registrationType" th:value="${registrationType}"/>
|
|
|
|
<!-- Alert Container -->
|
|
<div id="alertContainer"></div>
|
|
|
|
<!-- Info Notice -->
|
|
<div class="org-info-notice" th:if="${!isInvited}">
|
|
<ul>
|
|
<li>서비스 또는 API 사용을 원하실 경우 법인회원 승인 후 이용하실 수 있습니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Agreement Section -->
|
|
<th:block th:replace="~{apps/register/userAgreementContent :: agreementContent(${termsOfUse}, ${privacyCollect})}"></th:block>
|
|
|
|
<form name="portalUser" id="registerForm" role="form" th:action="@{/signup/portalUser}"
|
|
th:object="${portalUser}" method="post">
|
|
|
|
<!-- Corporate Information Section (invited users only) -->
|
|
<div th:if="${isInvited}">
|
|
<div class="org-section-header org-section-header--agreement">
|
|
<h3>법인 정보</h3>
|
|
</div>
|
|
|
|
<div class="org-form-group">
|
|
<label class="org-form-label">법인명</label>
|
|
<div class="org-form-input-wrapper">
|
|
<input type="text" name="companyName" class="org-form-input" th:value="${orgName}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Basic Information Section -->
|
|
<div class="org-section-header org-section-header--agreement" th:style="${isInvited ? 'margin-top: 48px;' : ''}">
|
|
<h3>기본 정보</h3>
|
|
<span class="required-badge">필수 입력</span>
|
|
</div>
|
|
|
|
<div th:if="${registrationType == (isInvited ? 'corporate' : 'personal')}">
|
|
<th:block th:replace="~{apps/register/components/commonUserInfoForm :: commonUserInfo}"></th:block>
|
|
<th:block th:replace="~{apps/register/components/newUserInfoForm :: newUserForm}"></th:block>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="org-action-buttons">
|
|
<button type="button" class="btn btn-secondary" id="cancelButton">취소</button>
|
|
<button type="button" class="btn btn-primary btn_register">가입신청</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div class="org-loading-overlay" id="loadingOverlay">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<th:block layout:fragment="contentScript">
|
|
<script th:if="${error}" th:inline="javascript">
|
|
$(document).ready(function () {
|
|
customPopups.showAlert([[${error}]]);
|
|
});
|
|
</script>
|
|
<script th:replace="~{apps/register/userAgreementContent :: agreementScript}"></script>
|
|
<script th:replace="~{apps/register/components/commonUserInfoForm :: commonUserInfoScript}"></script>
|
|
<script th:replace="~{apps/register/components/newUserInfoForm :: newUserScript}"></script>
|
|
<script th:inline="javascript">
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let form = document.getElementById('registerForm');
|
|
let agreementForm = document.getElementById('agreementForm');
|
|
let btn_register = document.querySelector('.btn_register');
|
|
let isAuthVerified = false;
|
|
|
|
// 인증 완료 이벤트 리스너
|
|
document.addEventListener('authVerified', function() {
|
|
isAuthVerified = true;
|
|
});
|
|
|
|
// 이메일 유효성 검사 함수
|
|
function isValidEmail(email) {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
}
|
|
|
|
// 폼 유효성 검사 함수
|
|
function checkFormValidity() {
|
|
const loginIdElement = $('#loginId');
|
|
const userNameElement = $('#userName');
|
|
const termsOfUseElement = $('#termsOfUse');
|
|
const privacyCollectElement = $('#privacyCollect');
|
|
const mobileNumberElement = $('#mobileNumber');
|
|
const isPasswordValid = $('#isPasswordValid').val() === 'true';
|
|
const isPasswordMatch = $('#isPasswordMatch').val() === 'true';
|
|
|
|
return isValidEmail(loginIdElement.val()) &&
|
|
isPasswordValid &&
|
|
isPasswordMatch &&
|
|
userNameElement.val().trim() !== '' &&
|
|
termsOfUseElement.prop('checked') &&
|
|
privacyCollectElement.prop('checked') &&
|
|
mobileNumberElement.val().trim() !== '' &&
|
|
isAuthVerified;
|
|
}
|
|
|
|
let isSubmitting = false;
|
|
|
|
// 등록 버튼 클릭 이벤트
|
|
btn_register.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Prevent resubmission
|
|
if (isSubmitting) {
|
|
console.log('Form is already being submitted...');
|
|
return;
|
|
}
|
|
|
|
isSubmitting = true;
|
|
btn_register.disabled = true;
|
|
|
|
// Show loading overlay
|
|
document.getElementById('loadingOverlay').classList.add('active');
|
|
|
|
try {
|
|
form.classList.add('was-validated');
|
|
if (agreementForm) {
|
|
agreementForm.classList.add('was-validated');
|
|
}
|
|
|
|
if (checkFormValidity() && form.checkValidity() && (agreementForm ? agreementForm.checkValidity() : true)) {
|
|
// 약관 동의 폼의 데이터를 hidden input으로 추가
|
|
if (agreementForm) {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 불필요한 hidden input 제거
|
|
const unnecessaryFields = ['isPasswordValid', 'isPasswordMatch'];
|
|
unnecessaryFields.forEach(fieldName => {
|
|
const field = form.querySelector(`input[name="${fieldName}"]`);
|
|
if (field) {
|
|
field.remove();
|
|
}
|
|
});
|
|
|
|
// authCompletedYn 값 설정
|
|
const authCompletedField = document.createElement('input');
|
|
authCompletedField.type = 'hidden';
|
|
authCompletedField.name = 'authCompletedYn';
|
|
authCompletedField.value = isAuthVerified ? 'Y' : 'N';
|
|
form.appendChild(authCompletedField);
|
|
|
|
form.submit();
|
|
} else {
|
|
customPopups.showAlert('모든 필수 항목을 입력하고 약관에 동의해주세요.');
|
|
isSubmitting = false;
|
|
btn_register.disabled = false;
|
|
document.getElementById('loadingOverlay').classList.remove('active');
|
|
}
|
|
} catch (error) {
|
|
console.error('Form submission error:', error);
|
|
isSubmitting = false;
|
|
btn_register.disabled = false;
|
|
document.getElementById('loadingOverlay').classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// 취소 버튼 클릭 시
|
|
document.getElementById('cancelButton').addEventListener('click', function() {
|
|
location.href = '/login';
|
|
});
|
|
});
|
|
</script>
|
|
</th:block>
|
|
</body>
|
|
</html>
|