현성필
378 lines
14 KiB
HTML
378 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
|
|
|
<body>
|
|
<th:block layout:fragment="contentFragment">
|
|
<section class="apikey-register-container">
|
|
|
|
<!-- Progress Indicator -->
|
|
<div class="register-progress">
|
|
<div class="progress-steps">
|
|
<div class="progress-step active">
|
|
<div class="step-number">1</div>
|
|
<div class="step-label">기본 정보</div>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-label">API 선택</div>
|
|
</div>
|
|
<div class="progress-line"></div>
|
|
<div class="progress-step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-label">완료</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="register-header">
|
|
<h1>API Key 수정</h1>
|
|
<h2>Step 1: 기본 정보 수정</h2>
|
|
<p class="header-description">
|
|
앱의 기본 정보를 수정해주세요. 변경 사항은 승인 후 적용됩니다.
|
|
</p>
|
|
|
|
<!-- Error Message -->
|
|
<div th:if="${error}" class="alert alert-error" style="margin-top: 20px;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
</svg>
|
|
<span th:text="${error}"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Content -->
|
|
<div class="register-content">
|
|
<form id="modifyStep1Form" method="post" th:action="@{/myapikey/modify/step1}" th:object="${apiKeyModification}" class="register-form" enctype="multipart/form-data">
|
|
|
|
<!-- Hidden field for clientId -->
|
|
<input type="hidden" th:field="*{clientId}"/>
|
|
|
|
<div class="form-card">
|
|
|
|
<!-- App Icon -->
|
|
<div class="form-group">
|
|
<label for="appIcon" class="form-label required">
|
|
앱 아이콘
|
|
<span class="required-mark">*</span>
|
|
</label>
|
|
<div class="icon-upload-wrapper">
|
|
<div class="icon-preview" id="iconPreview">
|
|
<div class="icon-placeholder"
|
|
th:if="${apiKeyModification.appIconData == null and apiKeyModification.appIconFileId == null}">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
<span>이미지 선택</span>
|
|
</div>
|
|
<!-- Show image from file service if available -->
|
|
<img id="iconPreviewImage"
|
|
th:if="${apiKeyModification.appIconFileId != null}"
|
|
th:src="@{/file/download(fileSn=1,fileId=${apiKeyModification.appIconFileId})}"
|
|
alt="Icon Preview">
|
|
<!-- Show image from data if available (newly uploaded) -->
|
|
<img id="iconPreviewImage"
|
|
th:if="${apiKeyModification.appIconData != null and apiKeyModification.appIconFileId == null}"
|
|
th:src="'data:' + ${apiKeyModification.appIconContentType} + ';base64,' + ${T(java.util.Base64).getEncoder().encodeToString(apiKeyModification.appIconData)}"
|
|
alt="Icon Preview">
|
|
<button type="button" class="btn-remove-icon" id="btnRemoveIcon"
|
|
th:style="${(apiKeyModification.appIconData != null or apiKeyModification.appIconFileId != null) ? 'display: block;' : 'display: none;'}"
|
|
onclick="removeAppIcon()" title="아이콘 삭제">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<input type="file"
|
|
id="appIcon"
|
|
name="appIcon"
|
|
class="icon-input"
|
|
accept="image/png,image/jpeg,image/jpg">
|
|
<button type="button" class="btn-icon-select" onclick="document.getElementById('appIcon').click()">
|
|
파일 선택
|
|
</button>
|
|
</div>
|
|
<small class="form-hint">PNG, JPG 형식 (최대 2MB, 권장 크기: 512x512px)</small>
|
|
</div>
|
|
|
|
<!-- App Name -->
|
|
<div class="form-group">
|
|
<label for="appName" class="form-label required">
|
|
앱 이름
|
|
<span class="required-mark">*</span>
|
|
</label>
|
|
<input type="text"
|
|
id="appName"
|
|
th:field="*{appName}"
|
|
class="form-control"
|
|
placeholder="예: My Application"
|
|
maxlength="50"
|
|
required>
|
|
<small class="form-hint">앱을 구별할 수 있는 고유한 이름을 입력해주세요. (최대 50자)</small>
|
|
</div>
|
|
|
|
<!-- App Description -->
|
|
<div class="form-group">
|
|
<label for="appDescription" class="form-label">앱 설명</label>
|
|
<textarea id="appDescription"
|
|
th:field="*{appDescription}"
|
|
class="form-control"
|
|
rows="4"
|
|
placeholder="앱의 주요 기능과 용도를 간단히 설명해주세요."
|
|
maxlength="500"></textarea>
|
|
<small class="form-hint">앱의 용도와 주요 기능을 설명해주세요. (최대 500자)</small>
|
|
</div>
|
|
|
|
<!-- Callback URL -->
|
|
<div class="form-group">
|
|
<label for="callbackUrl" class="form-label">Callback URL</label>
|
|
<input type="url"
|
|
id="callbackUrl"
|
|
th:field="*{callbackUrl}"
|
|
class="form-control"
|
|
placeholder="https://example.com/callback">
|
|
<small class="form-hint">OAuth 2.0 인증 시 사용할 콜백 URL을 입력해주세요.</small>
|
|
</div>
|
|
|
|
<!-- IP Whitelist -->
|
|
<div class="form-group">
|
|
<label for="ipWhitelist" class="form-label">
|
|
IP 화이트리스트
|
|
</label>
|
|
<div class="ip-input-group">
|
|
<input type="text"
|
|
id="ipWhitelistInput"
|
|
class="form-input"
|
|
placeholder="예: 192.168.1.1 또는 10.0.0.0/24">
|
|
<button type="button" class="btn-add-ip" onclick="addIpAddress()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
추가
|
|
</button>
|
|
</div>
|
|
<small class="form-hint">허용할 IP 주소 또는 CIDR 대역을 입력하세요. (선택사항)</small>
|
|
|
|
<!-- IP List Display -->
|
|
<div class="ip-list" id="ipList" style="display: none;">
|
|
<div class="ip-list-header">
|
|
<span class="ip-count">등록된 IP: <strong id="ipCount">0</strong>개</span>
|
|
</div>
|
|
<div class="ip-items" id="ipItems">
|
|
<!-- Dynamically added IP items -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden input to store IP list -->
|
|
<input type="hidden" id="ipWhitelist" name="ipWhitelist" value="">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="form-actions">
|
|
<a th:href="@{/myapikey/modify/cancel(clientId=${apiKeyModification.clientId})}" class="btn btn-cancel">
|
|
취소
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
다음 단계
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</section>
|
|
</th:block>
|
|
|
|
<th:block layout:fragment="contentScript">
|
|
<script th:inline="javascript">
|
|
/*<![CDATA[*/
|
|
// IP address list management
|
|
let ipAddresses = [];
|
|
|
|
// Remove app icon
|
|
function removeAppIcon() {
|
|
const appIconInput = document.getElementById('appIcon');
|
|
const iconPreviewImage = document.getElementById('iconPreviewImage');
|
|
const iconPlaceholder = document.querySelector('.icon-placeholder');
|
|
const btnRemoveIcon = document.getElementById('btnRemoveIcon');
|
|
|
|
// Clear file input
|
|
appIconInput.value = '';
|
|
|
|
// Hide preview image and show placeholder
|
|
iconPreviewImage.style.display = 'none';
|
|
iconPreviewImage.src = '';
|
|
iconPlaceholder.style.display = 'flex';
|
|
|
|
// Hide delete button
|
|
btnRemoveIcon.style.display = 'none';
|
|
}
|
|
|
|
// Add IP address to the list
|
|
function addIpAddress() {
|
|
const ipInput = document.getElementById('ipWhitelistInput');
|
|
const ipValue = ipInput.value.trim();
|
|
|
|
// Validate IP format
|
|
if (!ipValue) {
|
|
alert('IP 주소를 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
// Basic IP validation (supports IP and CIDR notation)
|
|
const ipPattern = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/;
|
|
if (!ipPattern.test(ipValue)) {
|
|
alert('올바른 IP 주소 형식이 아닙니다.\n예: 192.168.1.1 또는 10.0.0.0/24');
|
|
return;
|
|
}
|
|
|
|
// Check for duplicates
|
|
if (ipAddresses.includes(ipValue)) {
|
|
alert('이미 추가된 IP 주소입니다.');
|
|
return;
|
|
}
|
|
|
|
// Add to array
|
|
ipAddresses.push(ipValue);
|
|
|
|
// Update UI
|
|
updateIpList();
|
|
|
|
// Clear input
|
|
ipInput.value = '';
|
|
ipInput.focus();
|
|
}
|
|
|
|
// Remove IP address from the list
|
|
function removeIpAddress(ip) {
|
|
const index = ipAddresses.indexOf(ip);
|
|
if (index > -1) {
|
|
ipAddresses.splice(index, 1);
|
|
updateIpList();
|
|
}
|
|
}
|
|
|
|
// Update IP list display
|
|
function updateIpList() {
|
|
const ipList = document.getElementById('ipList');
|
|
const ipItems = document.getElementById('ipItems');
|
|
const ipCount = document.getElementById('ipCount');
|
|
const ipWhitelistHidden = document.getElementById('ipWhitelist');
|
|
|
|
// Update count
|
|
ipCount.textContent = ipAddresses.length;
|
|
|
|
// Show/hide list container
|
|
if (ipAddresses.length > 0) {
|
|
ipList.style.display = 'block';
|
|
|
|
// Build IP items HTML
|
|
let itemsHTML = '';
|
|
ipAddresses.forEach(function(ip) {
|
|
itemsHTML += `
|
|
<div class="ip-item">
|
|
<span class="ip-address">${ip}</span>
|
|
<button type="button" class="btn-remove-ip" onclick="removeIpAddress('${ip}')" title="제거">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
ipItems.innerHTML = itemsHTML;
|
|
} else {
|
|
ipList.style.display = 'none';
|
|
ipItems.innerHTML = '';
|
|
}
|
|
|
|
// Update hidden input with comma-separated values
|
|
ipWhitelistHidden.value = ipAddresses.join(',');
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Initialize with existing icon data
|
|
var hasExistingIcon = /*[[${apiKeyModification.appIconData != null}]]*/ false;
|
|
var hasExistingIconFile = /*[[${apiKeyModification.appIconFileId != null}]]*/ false;
|
|
|
|
// If we have existing icon data, it's already shown by Thymeleaf
|
|
// But we need to ensure the UI state is correct
|
|
if (hasExistingIcon || hasExistingIconFile) {
|
|
$('.icon-placeholder').hide();
|
|
$('#btnRemoveIcon').show();
|
|
}
|
|
|
|
// Restore existing IP whitelist
|
|
const sessionIpWhitelist = /*[[${apiKeyModification.ipWhitelistAsString}]]*/ '';
|
|
if (sessionIpWhitelist && sessionIpWhitelist.trim() !== '') {
|
|
const ips = sessionIpWhitelist.split(',');
|
|
ips.forEach(function(ip) {
|
|
const trimmedIp = ip.trim();
|
|
if (trimmedIp && !ipAddresses.includes(trimmedIp)) {
|
|
ipAddresses.push(trimmedIp);
|
|
}
|
|
});
|
|
updateIpList();
|
|
}
|
|
|
|
// File upload preview
|
|
$('#appIcon').on('change', function(e) {
|
|
var file = e.target.files[0];
|
|
const btnRemoveIcon = document.getElementById('btnRemoveIcon');
|
|
const iconPreviewImage = document.getElementById('iconPreviewImage');
|
|
const iconPlaceholder = document.querySelector('.icon-placeholder');
|
|
|
|
if (file) {
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
alert('파일 크기는 2MB를 초과할 수 없습니다.');
|
|
$(this).val('');
|
|
return;
|
|
}
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
iconPreviewImage.src = e.target.result;
|
|
iconPreviewImage.style.display = 'block';
|
|
iconPlaceholder.style.display = 'none';
|
|
btnRemoveIcon.style.display = 'flex';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// IP whitelist input - Enter key handler
|
|
$('#ipWhitelistInput').on('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
addIpAddress();
|
|
}
|
|
});
|
|
|
|
// Form submission - ensure IP list is updated
|
|
$('#modifyStep1Form').on('submit', function(e) {
|
|
// IP whitelist is already updated via updateIpList()
|
|
});
|
|
});
|
|
/*]]>*/
|
|
</script>
|
|
</th:block>
|
|
|
|
</body>
|
|
</html>
|