feat: 새로운 htpasswd 관리 애플리케이션 VaultKeeper 구현
Co-authored-by: aider (gemini/gemini-2.5-flash) <aider@aider.chat>
This commit is contained in:
+174
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VaultKeeper - Nginx .htpasswd 관리</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans antialiased text-gray-900">
|
||||
<div class="min-h-screen flex flex-col items-center justify-center p-4">
|
||||
<div class="w-full max-w-2xl bg-white rounded-lg shadow-xl p-8 space-y-8">
|
||||
<h1 class="text-3xl font-bold text-center text-gray-800">VaultKeeper</h1>
|
||||
<p class="text-center text-gray-600">Nginx .htpasswd 파일 관리</p>
|
||||
|
||||
<!-- 사용자 추가 폼 -->
|
||||
<div class="border-t border-gray-200 pt-8">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-4">새 사용자 추가</h2>
|
||||
<form id="addUserForm" class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700">사용자 이름</label>
|
||||
<input type="text" id="username" name="username" required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">비밀번호</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
사용자 추가
|
||||
</button>
|
||||
</form>
|
||||
<div id="addMessage" class="mt-3 text-center font-medium"></div>
|
||||
</div>
|
||||
|
||||
<!-- 사용자 목록 -->
|
||||
<div class="border-t border-gray-200 pt-8">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-4">현재 사용자 목록</h2>
|
||||
<div id="userListContainer">
|
||||
<ul id="userList" class="divide-y divide-gray-200 bg-white rounded-md shadow-sm">
|
||||
<!-- 사용자는 여기에 동적으로 로드됩니다. -->
|
||||
</ul>
|
||||
<p id="noUsersMessage" class="text-center text-gray-500 mt-4 hidden">등록된 사용자가 없습니다.</p>
|
||||
</div>
|
||||
<div id="listMessage" class="mt-3 text-center font-medium"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const addUserForm = document.getElementById('addUserForm');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const addMessageDiv = document.getElementById('addMessage');
|
||||
const userList = document.getElementById('userList');
|
||||
const noUsersMessage = document.getElementById('noUsersMessage');
|
||||
const listMessageDiv = document.getElementById('listMessage');
|
||||
|
||||
async function fetchUsers() {
|
||||
listMessageDiv.textContent = '';
|
||||
userList.innerHTML = '';
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const users = await response.json();
|
||||
if (users.length === 0) {
|
||||
noUsersMessage.classList.remove('hidden');
|
||||
} else {
|
||||
noUsersMessage.classList.add('hidden');
|
||||
users.forEach(user => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'flex items-center justify-between p-4 hover:bg-gray-50';
|
||||
li.innerHTML = `
|
||||
<span class="text-lg font-medium">${user.username}</span>
|
||||
<button data-username="${user.username}"
|
||||
class="delete-btn bg-red-500 hover:bg-red-600 text-white font-bold py-1 px-3 rounded text-sm">
|
||||
삭제
|
||||
</button>
|
||||
`;
|
||||
userList.appendChild(li);
|
||||
});
|
||||
addDeleteEventListeners();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching users:', error);
|
||||
listMessageDiv.textContent = `사용자 목록을 불러오는 데 실패했습니다: ${error.message}`;
|
||||
listMessageDiv.className = 'mt-3 text-center font-medium text-red-600';
|
||||
}
|
||||
}
|
||||
|
||||
async function addUser(event) {
|
||||
event.preventDefault();
|
||||
addMessageDiv.textContent = '';
|
||||
|
||||
const username = usernameInput.value;
|
||||
const password = passwordInput.value;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || '사용자 추가 실패');
|
||||
}
|
||||
|
||||
addMessageDiv.textContent = data.message;
|
||||
addMessageDiv.className = 'mt-3 text-center font-medium text-green-600';
|
||||
usernameInput.value = '';
|
||||
passwordInput.value = '';
|
||||
fetchUsers(); // 사용자 목록 새로 고침
|
||||
} catch (error) {
|
||||
console.error('Error adding user:', error);
|
||||
addMessageDiv.textContent = `사용자 추가 실패: ${error.message}`;
|
||||
addMessageDiv.className = 'mt-3 text-center font-medium text-red-600';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(username) {
|
||||
listMessageDiv.textContent = '';
|
||||
if (!confirm(`사용자 '${username}'을(를) 정말 삭제하시겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${username}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || '사용자 삭제 실패');
|
||||
}
|
||||
|
||||
listMessageDiv.textContent = data.message;
|
||||
listMessageDiv.className = 'mt-3 text-center font-medium text-green-600';
|
||||
fetchUsers(); // 사용자 목록 새로 고침
|
||||
} catch (error) {
|
||||
console.error('Error deleting user:', error);
|
||||
listMessageDiv.textContent = `사용자 삭제 실패: ${error.message}`;
|
||||
listMessageDiv.className = 'mt-3 text-center font-medium text-red-600';
|
||||
}
|
||||
}
|
||||
|
||||
function addDeleteEventListeners() {
|
||||
document.querySelectorAll('.delete-btn').forEach(button => {
|
||||
button.onclick = () => deleteUser(button.dataset.username);
|
||||
});
|
||||
}
|
||||
|
||||
addUserForm.addEventListener('submit', addUser);
|
||||
|
||||
// 페이지 로드 시 사용자 목록 가져오기
|
||||
fetchUsers();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user