현성필
153 lines
4.3 KiB
HTML
153 lines
4.3 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 completed">
|
|
<div class="step-number">✓</div>
|
|
<div class="step-label">기본 정보</div>
|
|
</div>
|
|
<div class="progress-line filled"></div>
|
|
<div class="progress-step completed">
|
|
<div class="step-number">✓</div>
|
|
<div class="step-label">API 선택</div>
|
|
</div>
|
|
<div class="progress-line filled"></div>
|
|
<div class="progress-step active completed">
|
|
<div class="step-number">✓</div>
|
|
<div class="step-label">완료</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Result -->
|
|
<div class="register-result success" th:if="${modificationComplete}">
|
|
|
|
<!-- Success Icon Animation -->
|
|
<div class="result-icon-wrapper">
|
|
<div class="result-icon success-icon">
|
|
<svg class="checkmark" viewBox="0 0 52 52">
|
|
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
|
|
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div class="result-header">
|
|
<h1>API Key 수정 요청 완료!</h1>
|
|
<p class="result-description">
|
|
API Key 수정 요청이 성공적으로 접수되었습니다. 관리자 승인 후 변경 사항이 적용됩니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Result Content -->
|
|
<div class="result-content">
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="result-actions">
|
|
<a th:href="@{/myapikey}" class="btn btn-secondary">
|
|
<span class="icon">📋</span>
|
|
API Key 목록으로
|
|
</a>
|
|
<a th:href="@{/myapikey/api_key_request/history}" class="btn btn-primary">
|
|
<span class="icon">📄</span>
|
|
요청 내역 확인
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Result (if needed) -->
|
|
<div class="register-result error" th:unless="${modificationComplete}">
|
|
<div class="result-icon-wrapper">
|
|
<div class="result-icon error-icon">
|
|
<span>❌</span>
|
|
</div>
|
|
</div>
|
|
<div class="result-header">
|
|
<h1>잘못된 접근입니다</h1>
|
|
<p class="result-description">
|
|
수정 프로세스를 완료하지 않았거나 잘못된 경로로 접근하셨습니다.
|
|
</p>
|
|
</div>
|
|
<div class="result-actions">
|
|
<a th:href="@{/myapikey}" class="btn btn-primary">
|
|
목록으로 돌아가기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</th:block>
|
|
|
|
<th:block layout:fragment="contentScript">
|
|
<script th:inline="javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Success animation
|
|
setTimeout(function() {
|
|
const successIcon = document.querySelector('.success-icon');
|
|
if (successIcon) {
|
|
successIcon.classList.add('animate');
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Success checkmark animation */
|
|
.checkmark {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
stroke-width: 2;
|
|
stroke: #6BCF7F;
|
|
stroke-miterlimit: 10;
|
|
animation: rotate 1s ease-in-out;
|
|
}
|
|
|
|
.checkmark-circle {
|
|
stroke-dasharray: 166;
|
|
stroke-dashoffset: 166;
|
|
stroke-width: 2;
|
|
stroke-miterlimit: 10;
|
|
stroke: #6BCF7F;
|
|
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
|
}
|
|
|
|
.checkmark-check {
|
|
transform-origin: 50% 50%;
|
|
stroke-dasharray: 48;
|
|
stroke-dashoffset: 48;
|
|
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
|
|
}
|
|
|
|
@keyframes stroke {
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
</th:block>
|
|
|
|
</body>
|
|
</html>
|