Rinjae
471 lines
17 KiB
HTML
471 lines
17 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/djbank_title_layout}">
|
|
|
|
<body>
|
|
<section layout:fragment="title">
|
|
<div class="page-title-banner">
|
|
<img th:src="@{/img/img_title_bg.png}" class="title-image">
|
|
<h1>앱관리</h1>
|
|
</div>
|
|
</section>
|
|
<th:block layout:fragment="contentFragment">
|
|
<section class="apikey-register-container">
|
|
|
|
<!-- Title Bar -->
|
|
<div class="common-title-bar">
|
|
<h2 class="common-title">앱 수정</h2>
|
|
<span class="common-subtitle">서비스 중인 앱 정보를 수정합니다.</span>
|
|
</div>
|
|
|
|
<!-- Progress Indicator -->
|
|
<div class="register-progress">
|
|
<div class="progress-steps">
|
|
<!-- Step 1: 앱 정보수정 (Active) -->
|
|
<div class="progress-step-item active">
|
|
<div class="step-icon-wrapper">
|
|
<div class="step-icon">
|
|
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보수정" width="36" height="36">
|
|
</div>
|
|
</div>
|
|
<div class="step-label">앱 정보수정</div>
|
|
</div>
|
|
|
|
<!-- Dots -->
|
|
<div class="step-dots">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
|
|
<!-- Step 2: API 선택 -->
|
|
<div class="progress-step-item">
|
|
<div class="step-icon-wrapper">
|
|
<div class="step-icon">
|
|
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
|
|
</div>
|
|
</div>
|
|
<div class="step-label">API 선택</div>
|
|
</div>
|
|
|
|
<!-- Dots -->
|
|
<div class="step-dots">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
|
|
<!-- Step 3: 완료 -->
|
|
<div class="progress-step-item">
|
|
<div class="step-icon-wrapper">
|
|
<div class="step-icon">
|
|
<img th:src="@{/img/apikey_step3.png}" alt="완료" width="36" height="36">
|
|
</div>
|
|
</div>
|
|
<div class="step-label">완료</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div th:if="${error}" class="alert alert-error">
|
|
<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>
|
|
|
|
<!-- Form Content -->
|
|
<div class="register-form-container">
|
|
<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}"/>
|
|
|
|
<!-- App Icon -->
|
|
<div class="form-row">
|
|
<div class="form-label-wrapper">
|
|
<span class="form-label-text">앱 아이콘</span>
|
|
</div>
|
|
<div class="form-field-wrapper">
|
|
<div class="icon-upload-box">
|
|
<div class="icon-preview-area" id="iconPreview">
|
|
<div class="icon-placeholder" id="iconPlaceholder"
|
|
th:style="${(apiKeyModification.appIconData != null or apiKeyModification.appIconFileId != null) ? 'display: none;' : 'display: flex;'}">
|
|
<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>
|
|
</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"
|
|
style="display: block;">
|
|
<!-- Show image from data if available -->
|
|
<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"
|
|
style="display: block;">
|
|
<!-- JS Empty Image Target -->
|
|
<img id="iconPreviewImageJS" style="display: none;" alt="Icon Preview">
|
|
|
|
<button type="button" class="btn-remove-icon" id="btnRemoveIcon"
|
|
th:style="${(apiKeyModification.appIconData != null or apiKeyModification.appIconFileId != null) ? 'display: flex;' : '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>
|
|
<div class="icon-upload-info">
|
|
<p class="upload-title">앱 아이콘 이미지 파일을 업로드하세요</p>
|
|
<p class="upload-hint">권장사이즈는 <strong>128X128픽셀</strong>이며 <strong>JPG, PNG, GIF</strong>파일만 등록할 수 있습니다.</p>
|
|
</div>
|
|
<button type="button" class="btn-upload" onclick="document.getElementById('appIcon').click()">
|
|
<svg width="24" height="24" 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>
|
|
이미지 파일 업로드
|
|
</button>
|
|
<input type="file"
|
|
id="appIcon"
|
|
name="appIcon"
|
|
class="icon-input"
|
|
accept="image/png,image/jpeg,image/jpg,image/gif"
|
|
style="display: none;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App Name -->
|
|
<div class="form-row">
|
|
<div class="form-label-wrapper label-offset">
|
|
<span class="form-label-text">앱 이름</span>
|
|
<span class="required-badge">필수</span>
|
|
</div>
|
|
<div class="form-field-wrapper">
|
|
<input type="text"
|
|
id="appName"
|
|
th:field="*{appName}"
|
|
class="form-input"
|
|
placeholder="앱 이름을 입력하세요."
|
|
required
|
|
maxlength="100">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App Description -->
|
|
<div class="form-row">
|
|
<div class="form-label-wrapper">
|
|
<span class="form-label-text">앱 설명</span>
|
|
<span class="required-badge">필수</span>
|
|
</div>
|
|
<div class="form-field-wrapper">
|
|
<textarea id="appDescription"
|
|
th:field="*{appDescription}"
|
|
class="form-textarea"
|
|
placeholder="앱 설명을 입력하세요."
|
|
rows="5"
|
|
required
|
|
maxlength="500"></textarea>
|
|
<small class="char-counter-wrapper">
|
|
<span class="char-counter">0 / 500</span>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Callback URL -->
|
|
<div class="form-row">
|
|
<div class="form-label-wrapper label-offset">
|
|
<span class="form-label-text">Call Back URL</span>
|
|
</div>
|
|
<div class="form-field-wrapper">
|
|
<input type="text"
|
|
id="callbackUrl"
|
|
th:field="*{callbackUrl}"
|
|
class="form-input"
|
|
placeholder="URL을 입력해 주세요.">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IP Whitelist -->
|
|
<div class="form-row">
|
|
<div class="form-label-wrapper label-offset">
|
|
<span class="form-label-text">화이트리스트</span>
|
|
</div>
|
|
<div class="form-field-wrapper">
|
|
<div class="ip-input-row">
|
|
<input type="text"
|
|
id="ipWhitelistInput"
|
|
class="form-input ip-input"
|
|
placeholder="서버 IP (111.111.111.111)">
|
|
<button type="button" class="btn-add-ip" onclick="addIpAddress()">
|
|
+ 추가
|
|
</button>
|
|
</div>
|
|
|
|
<!-- IP List Display -->
|
|
<div class="ip-list" id="ipList" style="display: none;">
|
|
<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>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="form-actions">
|
|
<a th:href="@{/myapikey/modify/cancel(clientId=${apiKeyModification.clientId})}" class="btn btn-submit btn-secondary">
|
|
취소
|
|
</a>
|
|
<button type="submit" form="modifyStep1Form" class="btn-primary btn-submit">
|
|
다음
|
|
</button>
|
|
</div>
|
|
|
|
</section>
|
|
</th:block>
|
|
|
|
<th:block layout:fragment="contentScript">
|
|
<script th:inline="javascript">
|
|
// IP address list management
|
|
let ipAddresses = [];
|
|
|
|
// Remove app icon
|
|
function removeAppIcon() {
|
|
const appIconInput = document.getElementById('appIcon');
|
|
const iconPreviewImages = document.querySelectorAll('img[id^="iconPreviewImage"]'); // Select all preview images
|
|
const iconPlaceholder = document.getElementById('iconPlaceholder');
|
|
const btnRemoveIcon = document.getElementById('btnRemoveIcon');
|
|
|
|
// Clear file input
|
|
appIconInput.value = '';
|
|
|
|
// Hide all preview images
|
|
iconPreviewImages.forEach(img => {
|
|
img.style.display = 'none';
|
|
if (img.id === 'iconPreviewImageJS') img.src = '';
|
|
});
|
|
|
|
// Show placeholder
|
|
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) {
|
|
customPopups.showAlert('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)) {
|
|
customPopups.showAlert('올바른 IP 주소 형식이 아닙니다.\n예: 192.168.1.1 또는 10.0.0.0/24');
|
|
return;
|
|
}
|
|
|
|
// Check for duplicates
|
|
if (ipAddresses.includes(ipValue)) {
|
|
customPopups.showAlert('이미 추가된 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 ipWhitelistHidden = document.getElementById('ipWhitelist');
|
|
|
|
// 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">
|
|
<div class="ip-display">${ip}</div>
|
|
<button type="button" class="btn-remove-ip" onclick="removeIpAddress('${ip}')">
|
|
- 제거
|
|
</button>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
ipItems.innerHTML = itemsHTML;
|
|
} else {
|
|
ipList.style.display = 'none';
|
|
ipItems.innerHTML = '';
|
|
}
|
|
|
|
// Update hidden input with comma-separated values
|
|
ipWhitelistHidden.value = ipAddresses.join(',');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('modifyStep1Form');
|
|
const appDescTextarea = document.getElementById('appDescription');
|
|
const charCounter = document.querySelector('.char-counter');
|
|
const appIconInput = document.getElementById('appIcon');
|
|
const iconPreviewImageJS = document.getElementById('iconPreviewImageJS');
|
|
const iconPlaceholder = document.getElementById('iconPlaceholder');
|
|
const ipWhitelistInput = document.getElementById('ipWhitelistInput');
|
|
|
|
// Restore existing IP whitelist
|
|
/*<![CDATA[*/
|
|
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();
|
|
}
|
|
/*]]>*/
|
|
|
|
// Initialize character counter
|
|
if (appDescTextarea && charCounter) {
|
|
const currentLength = appDescTextarea.value.length;
|
|
const maxLength = appDescTextarea.getAttribute('maxlength');
|
|
charCounter.textContent = currentLength + ' / ' + maxLength;
|
|
|
|
appDescTextarea.addEventListener('input', function() {
|
|
const currentLength = this.value.length;
|
|
const maxLength = this.getAttribute('maxlength');
|
|
charCounter.textContent = currentLength + ' / ' + maxLength;
|
|
|
|
if (currentLength > maxLength * 0.9) {
|
|
charCounter.style.color = '#FF6B6B';
|
|
} else {
|
|
charCounter.style.color = '#94A3B8';
|
|
}
|
|
});
|
|
}
|
|
|
|
// App icon preview
|
|
if (appIconInput) {
|
|
appIconInput.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
const btnRemoveIcon = document.getElementById('btnRemoveIcon');
|
|
|
|
if (file) {
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
customPopups.showAlert('파일 크기는 2MB를 초과할 수 없습니다.');
|
|
this.value = '';
|
|
return;
|
|
}
|
|
|
|
const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
|
|
if (!allowedTypes.includes(file.type)) {
|
|
customPopups.showAlert('PNG, JPG, GIF 형식만 업로드 가능합니다.');
|
|
this.value = '';
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
// Hide other previews
|
|
document.querySelectorAll('img[id^="iconPreviewImage"]').forEach(img => img.style.display = 'none');
|
|
|
|
iconPreviewImageJS.src = event.target.result;
|
|
iconPreviewImageJS.style.display = 'block';
|
|
iconPlaceholder.style.display = 'none';
|
|
btnRemoveIcon.style.display = 'flex';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// IP input Enter key
|
|
if (ipWhitelistInput) {
|
|
ipWhitelistInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
addIpAddress();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Form validation
|
|
form.addEventListener('submit', function(e) {
|
|
const appName = document.getElementById('appName').value.trim();
|
|
const appDescription = document.getElementById('appDescription').value.trim();
|
|
const callbackUrl = document.getElementById('callbackUrl').value.trim();
|
|
|
|
if (!appName) {
|
|
e.preventDefault();
|
|
customPopups.showAlert('앱 이름을 입력해주세요.');
|
|
document.getElementById('appName').focus();
|
|
return false;
|
|
}
|
|
|
|
if (!appDescription) {
|
|
e.preventDefault();
|
|
customPopups.showAlert('앱 설명을 입력해주세요.');
|
|
document.getElementById('appDescription').focus();
|
|
return false;
|
|
}
|
|
|
|
if (callbackUrl && callbackUrl.trim() !== '') {
|
|
try {
|
|
new URL(callbackUrl);
|
|
} catch (error) {
|
|
e.preventDefault();
|
|
customPopups.showAlert('올바른 URL 형식이 아닙니다.');
|
|
document.getElementById('callbackUrl').focus();
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</th:block>
|
|
|
|
</body>
|
|
</html>
|