41b557a709
- 토큰 저장 키 통일 (access_token으로 일관성 확보) - 일일공수 페이지 API 스크립트 로딩 순서 수정 - 프로젝트 관리 페이지 비활성 프로젝트 표시 문제 해결 - 업로드 카테고리에 '기타' 항목 추가 (백엔드 schemas.py 포함) - 비밀번호 변경 기능 API 연동으로 수정 - 프로젝트 드롭다운 z-index 문제 해결 - CORS 설정 및 Nginx 구성 개선 - 비밀번호 해싱 방식 pbkdf2_sha256으로 변경 (bcrypt 72바이트 제한 해결)
433 lines
17 KiB
HTML
433 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>관리자 페이지 - 작업보고서</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
color: #4b5563;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.input-field {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-clipboard-list mr-2"></i>작업보고서 시스템 - 관리자
|
|
</h1>
|
|
<button onclick="AuthAPI.logout()" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm">
|
|
<i class="fas fa-sign-out-alt mr-1"></i>로그아웃
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex gap-2 py-2 overflow-x-auto">
|
|
<a href="daily-work.html" class="nav-link">
|
|
<i class="fas fa-calendar-check mr-2"></i>일일 공수
|
|
</a>
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-camera-retro mr-2"></i>부적합 등록
|
|
</a>
|
|
<a href="issue-view.html" class="nav-link">
|
|
<i class="fas fa-search mr-2"></i>부적합 조회
|
|
</a>
|
|
<a href="index.html#list" class="nav-link">
|
|
<i class="fas fa-list mr-2"></i>목록 관리
|
|
</a>
|
|
<a href="index.html#summary" class="nav-link">
|
|
<i class="fas fa-chart-bar mr-2"></i>보고서
|
|
</a>
|
|
<a href="admin.html" class="nav-link active">
|
|
<i class="fas fa-users-cog mr-2"></i>사용자 관리
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8 max-w-6xl">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<!-- 사용자 추가 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-user-plus text-blue-500 mr-2"></i>사용자 추가
|
|
</h2>
|
|
|
|
<form id="addUserForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">사용자 ID</label>
|
|
<input
|
|
type="text"
|
|
id="newUsername"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="한글 가능 (예: 홍길동)"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">이름</label>
|
|
<input
|
|
type="text"
|
|
id="newFullName"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="실명 입력"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="초기 비밀번호"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">권한</label>
|
|
<select id="newRole" class="input-field w-full px-3 py-2 rounded-lg">
|
|
<option value="user">일반 사용자</option>
|
|
<option value="admin">관리자</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>사용자 추가
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 사용자 목록 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-users text-green-500 mr-2"></i>사용자 목록
|
|
</h2>
|
|
|
|
<div id="userList" class="space-y-3">
|
|
<!-- 사용자 목록이 여기에 표시됩니다 -->
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl"></i>
|
|
<p>로딩 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비밀번호 변경 섹션 (사용자용) -->
|
|
<div id="passwordChangeSection" class="hidden mt-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 max-w-md mx-auto">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-key text-yellow-500 mr-2"></i>비밀번호 변경
|
|
</h2>
|
|
|
|
<form id="changePasswordForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPasswordChange"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>비밀번호 변경
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
const cacheBuster = Date.now() + Math.random() + Math.floor(Math.random() * 1000000);
|
|
const script = document.createElement('script');
|
|
script.src = `/static/js/api.js?cb=${cacheBuster}&t=${Date.now()}&r=${Math.random()}`;
|
|
script.setAttribute('cache-control', 'no-cache');
|
|
script.setAttribute('pragma', 'no-cache');
|
|
script.onload = function() {
|
|
console.log('✅ API 스크립트 로드 완료 (admin.html)');
|
|
// API 로드 후 초기화 시작
|
|
initializeAdmin();
|
|
};
|
|
document.head.appendChild(script);
|
|
</script>
|
|
<script src="/static/js/date-utils.js?v=20250917"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let users = [];
|
|
|
|
// API 로드 후 초기화 함수
|
|
async function initializeAdmin() {
|
|
const token = localStorage.getItem('access_token');
|
|
if (!token) {
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const user = await AuthAPI.getCurrentUser();
|
|
currentUser = user;
|
|
localStorage.setItem('currentUser', JSON.stringify(user));
|
|
} catch (error) {
|
|
console.error('인증 실패:', error);
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('currentUser');
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
|
|
// 관리자가 아니면 비밀번호 변경만 표시
|
|
if (currentUser.role !== 'admin') {
|
|
document.querySelector('.grid').style.display = 'none';
|
|
document.getElementById('passwordChangeSection').classList.remove('hidden');
|
|
} else {
|
|
// 관리자면 사용자 목록 로드
|
|
await loadUsers();
|
|
}
|
|
}
|
|
|
|
// 사용자 추가
|
|
document.getElementById('addUserForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const userData = {
|
|
username: document.getElementById('newUsername').value.trim(),
|
|
full_name: document.getElementById('newFullName').value.trim(),
|
|
password: document.getElementById('newPassword').value,
|
|
role: document.getElementById('newRole').value
|
|
};
|
|
|
|
try {
|
|
await AuthAPI.createUser(userData);
|
|
|
|
// 성공
|
|
alert('사용자가 추가되었습니다.');
|
|
|
|
// 폼 초기화
|
|
document.getElementById('addUserForm').reset();
|
|
|
|
// 목록 새로고침
|
|
await loadUsers();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '사용자 추가에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 비밀번호 변경
|
|
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPasswordChange').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('새 비밀번호가 일치하지 않습니다.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.changePassword(currentPassword, newPassword);
|
|
|
|
alert('비밀번호가 변경되었습니다. 다시 로그인해주세요.');
|
|
AuthAPI.logout();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '비밀번호 변경에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 사용자 목록 로드
|
|
async function loadUsers() {
|
|
try {
|
|
// 백엔드 API에서 사용자 목록 로드
|
|
users = await AuthAPI.getUsers();
|
|
displayUsers();
|
|
} catch (error) {
|
|
console.error('사용자 목록 로드 실패:', error);
|
|
// API 실패 시 빈 배열로 초기화
|
|
users = [];
|
|
displayUsers();
|
|
}
|
|
}
|
|
|
|
// 사용자 목록 표시
|
|
function displayUsers() {
|
|
const container = document.getElementById('userList');
|
|
|
|
if (users.length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500 text-center">등록된 사용자가 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = users.map(user => `
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-800">
|
|
<i class="fas fa-user mr-2 text-gray-500"></i>
|
|
${user.full_name || user.username}
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
ID: ${user.username}
|
|
<span class="ml-2 px-2 py-0.5 rounded text-xs ${
|
|
user.role === 'admin'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-blue-100 text-blue-700'
|
|
}">
|
|
${user.role === 'admin' ? '관리자' : '사용자'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
onclick="resetPassword('${user.username}')"
|
|
class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors text-sm"
|
|
>
|
|
<i class="fas fa-key mr-1"></i>비밀번호 초기화
|
|
</button>
|
|
${user.username !== 'hyungi' ? `
|
|
<button
|
|
onclick="deleteUser('${user.username}')"
|
|
class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm"
|
|
>
|
|
<i class="fas fa-trash mr-1"></i>삭제
|
|
</button>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// 비밀번호 초기화
|
|
async function resetPassword(username) {
|
|
if (!confirm(`${username} 사용자의 비밀번호를 "000000"으로 초기화하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 사용자 ID 찾기
|
|
const user = users.find(u => u.username === username);
|
|
if (!user) {
|
|
alert('사용자를 찾을 수 없습니다.');
|
|
return;
|
|
}
|
|
|
|
// 백엔드 API로 비밀번호 초기화
|
|
await AuthAPI.resetPassword(user.id, '000000');
|
|
|
|
alert(`${username} 사용자의 비밀번호가 "000000"으로 초기화되었습니다.`);
|
|
|
|
// 목록 새로고침
|
|
await loadUsers();
|
|
|
|
} catch (error) {
|
|
alert('비밀번호 초기화에 실패했습니다: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// 사용자 삭제
|
|
async function deleteUser(username) {
|
|
if (!confirm(`정말 ${username} 사용자를 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.deleteUser(username);
|
|
alert('사용자가 삭제되었습니다.');
|
|
await loadUsers();
|
|
} catch (error) {
|
|
alert(error.message || '삭제에 실패했습니다.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|