feat: AI 서버 관리 페이지 Phase 3 보안 강화 - JWT 인증 시스템

🔐 JWT 기반 로그인 시스템:
- 로그인 페이지: 아름다운 애니메이션과 보안 정보 표시
- JWT 토큰: 24시간 또는 30일 (Remember Me) 만료 설정
- 비밀번호 암호화: bcrypt 해싱으로 안전한 저장
- 계정 잠금: 5회 실패 시 15분 자동 잠금

👥 사용자 계정 관리:
- admin/admin123 (관리자 권한)
- hyungi/hyungi123 (시스템 권한)
- 역할 기반 접근 제어 (RBAC)

🛡️ 보안 기능:
- 토큰 자동 검증 및 만료 처리
- 감사 로그: 로그인/로그아웃/관리 작업 추적
- 안전한 세션 관리 및 토큰 정리
- 클라이언트 사이드 토큰 검증

🎨 UI/UX 개선:
- 로그인 페이지: 그라디언트 배경, 플로팅 아이콘 애니메이션
- 사용자 메뉴: 헤더에 사용자명과 로그아웃 버튼 표시
- 보안 표시: SSL, 세션 타임아웃, JWT 인증 정보
- 반응형 디자인 및 다크모드 지원

🔧 기술 구현:
- FastAPI HTTPBearer 보안 스키마
- PyJWT 토큰 생성/검증
- bcrypt 비밀번호 해싱
- 클라이언트-서버 토큰 동기화

새 파일:
- templates/login.html: 로그인 페이지 HTML
- static/login.css: 로그인 페이지 스타일
- static/login.js: 로그인 JavaScript 로직
- server/auth.py: JWT 인증 시스템 (실제 서버용)

수정된 파일:
- test_admin.py: 테스트 서버에 JWT 인증 추가
- static/admin.js: JWT 토큰 기반 API 요청으로 변경
- templates/admin.html: 사용자 메뉴 및 로그아웃 버튼 추가
- static/admin.css: 사용자 메뉴 스타일 추가

보안 레벨: Phase 1 (API Key) → Phase 3 (JWT + 감사로그)

static/admin.css

@@ -74,6 +74,39 @@ body {
     opacity: 0.9;
 }
 
+.user-menu {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.logout-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.logout-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
 /* Main Content */
 .admin-main {
     flex: 1;

static/admin.js

@@ -8,25 +8,40 @@ class AdminDashboard {
     }
 
     getApiKey() {
-        // 테스트 모드에서는 기본 API 키 사용
-        let apiKey = localStorage.getItem('ai_admin_api_key');
-        if (!apiKey) {
-            // 테스트 모드 기본 키
-            apiKey = 'test-admin-key-123';
-            localStorage.setItem('ai_admin_api_key', apiKey);
-            
-            // 사용자에게 알림
-            setTimeout(() => {
-                alert('테스트 모드입니다.\nAPI Key: test-admin-key-123');
-            }, 1000);
+        // JWT 토큰 사용
+        const token = localStorage.getItem('ai_admin_token');
+        console.log('Getting token:', token ? token.substring(0, 20) + '...' : 'No token found');
+        if (!token) {
+            // 토큰이 없으면 로그인 페이지로 리다이렉트
+            console.log('No token, redirecting to login...');
+            window.location.href = '/login';
+            return null;
         }
-        return apiKey;
+        return token;
     }
 
     async init() {
+        // 먼저 토큰 검증
+        if (!this.apiKey) {
+            return; // getApiKey()에서 이미 리다이렉트됨
+        }
+
+        // 토큰 유효성 검증
+        try {
+            await this.apiRequest('/admin/verify-token');
+            console.log('Token verification successful');
+        } catch (error) {
+            console.log('Token verification failed, redirecting to login');
+            localStorage.removeItem('ai_admin_token');
+            localStorage.removeItem('ai_admin_user');
+            window.location.href = '/login';
+            return;
+        }
+
         this.updateCurrentTime();
         setInterval(() => this.updateCurrentTime(), 1000);
         
+        await this.loadUserInfo(); // Phase 3: Load user info
         await this.loadSystemStatus();
         await this.loadModels();
         await this.loadApiKeys();
@@ -40,6 +55,28 @@ class AdminDashboard {
         }, 30000);
     }
 
+    // Phase 3: User Management
+    async loadUserInfo() {
+        try {
+            const userInfo = localStorage.getItem('ai_admin_user');
+            if (userInfo) {
+                const user = JSON.parse(userInfo);
+                document.getElementById('username').textContent = user.username;
+            } else {
+                // Verify token and get user info
+                const response = await this.apiRequest('/admin/verify-token');
+                if (response.valid) {
+                    document.getElementById('username').textContent = response.user.username;
+                    localStorage.setItem('ai_admin_user', JSON.stringify(response.user));
+                }
+            }
+        } catch (error) {
+            console.error('Failed to load user info:', error);
+            // Token might be invalid, redirect to login
+            window.location.href = '/login';
+        }
+    }
+
     updateCurrentTime() {
         const now = new Date();
         document.getElementById('current-time').textContent = 
@@ -58,18 +95,27 @@ class AdminDashboard {
         const defaultOptions = {
             headers: {
                 'Content-Type': 'application/json',
-                'X-API-Key': this.apiKey
+                'Authorization': `Bearer ${this.apiKey}`
             }
         };
 
+        console.log('API Request:', endpoint, 'with token:', this.apiKey ? this.apiKey.substring(0, 20) + '...' : 'No token');
+
         try {
             const response = await fetch(url, { ...defaultOptions, ...options });
+            console.log('API Response:', response.status, response.statusText);
+            
             if (!response.ok) {
                 if (response.status === 401) {
-                    localStorage.removeItem('ai_admin_api_key');
-                    location.reload();
+                    console.log('401 Unauthorized - clearing tokens and redirecting');
+                    // JWT 토큰이 만료되었거나 유효하지 않음
+                    localStorage.removeItem('ai_admin_token');
+                    localStorage.removeItem('ai_admin_user');
+                    window.location.href = '/login';
                     return;
                 }
+                const errorText = await response.text();
+                console.log('Error response:', errorText);
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             return await response.json();
@@ -435,6 +481,23 @@ function closeModal(modalId) {
     admin.closeModal(modalId);
 }
 
+// Phase 3: Logout function
+async function logout() {
+    if (!confirm('Are you sure you want to logout?')) return;
+    
+    try {
+        // Call logout API
+        await admin.apiRequest('/admin/logout', { method: 'POST' });
+    } catch (error) {
+        console.error('Logout API call failed:', error);
+    } finally {
+        // Clear local storage and redirect
+        localStorage.removeItem('ai_admin_token');
+        localStorage.removeItem('ai_admin_user');
+        window.location.href = '/login';
+    }
+}
+
 // Initialize dashboard when page loads
 document.addEventListener('DOMContentLoaded', () => {
     admin = new AdminDashboard();

static/login.css

@@ -0,0 +1,390 @@
+/* AI Server Admin Login Page CSS */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Background Animation */
+.bg-animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.floating-icon {
+    position: absolute;
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.1);
+    animation: float 8s ease-in-out infinite;
+    animation-delay: var(--delay, 0s);
+}
+
+.floating-icon:nth-child(1) {
+    top: 20%;
+    left: 10%;
+}
+
+.floating-icon:nth-child(2) {
+    top: 60%;
+    right: 15%;
+}
+
+.floating-icon:nth-child(3) {
+    bottom: 30%;
+    left: 20%;
+}
+
+.floating-icon:nth-child(4) {
+    top: 40%;
+    right: 30%;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+        opacity: 0.1;
+    }
+    50% {
+        transform: translateY(-20px) rotate(180deg);
+        opacity: 0.3;
+    }
+}
+
+/* Login Container */
+.login-container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+}
+
+.login-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 2.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Header */
+.login-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.logo i {
+    font-size: 2rem;
+    color: #667eea;
+}
+
+.logo h1 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.subtitle {
+    color: #7f8c8d;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+/* Form Styles */
+.login-form {
+    margin-bottom: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #2c3e50;
+    font-size: 0.9rem;
+}
+
+.form-group label i {
+    color: #667eea;
+    width: 16px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e1e8ed;
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: white;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.password-input {
+    position: relative;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #7f8c8d;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+    transition: color 0.2s ease;
+}
+
+.password-toggle:hover {
+    color: #667eea;
+}
+
+/* Checkbox */
+.checkbox-label {
+    display: flex !important;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: #7f8c8d;
+}
+
+.checkbox-label input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #e1e8ed;
+    border-radius: 4px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.checkbox-label input:checked + .checkmark {
+    background: #667eea;
+    border-color: #667eea;
+}
+
+.checkbox-label input:checked + .checkmark::after {
+    content: '\f00c';
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 0.7rem;
+}
+
+/* Login Button */
+.login-btn {
+    width: 100%;
+    padding: 0.875rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+.login-btn:active {
+    transform: translateY(0);
+}
+
+.login-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Loading State */
+.login-btn.loading {
+    pointer-events: none;
+}
+
+.login-btn.loading i {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Error Message */
+.error-message {
+    background: #fadbd8;
+    border: 1px solid #f1948a;
+    border-radius: 8px;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #e74c3c;
+    font-size: 0.9rem;
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+/* Security Info */
+.security-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(102, 126, 234, 0.1);
+}
+
+.security-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    color: #7f8c8d;
+    text-align: center;
+}
+
+.security-item i {
+    color: #667eea;
+    font-size: 1rem;
+}
+
+/* Footer */
+.login-footer {
+    text-align: center;
+    color: #95a5a6;
+    font-size: 0.8rem;
+}
+
+.version-info {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: #bdc3c7;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+    .login-container {
+        padding: 1rem;
+    }
+    
+    .login-card {
+        padding: 2rem;
+    }
+    
+    .security-info {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .security-item {
+        flex-direction: row;
+        justify-content: center;
+    }
+    
+    .floating-icon {
+        display: none;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .login-card {
+        background: rgba(44, 62, 80, 0.95);
+        color: #ecf0f1;
+    }
+    
+    .logo h1 {
+        color: #ecf0f1;
+    }
+    
+    .form-group label {
+        color: #ecf0f1;
+    }
+    
+    .form-group input {
+        background: rgba(52, 73, 94, 0.8);
+        border-color: #34495e;
+        color: #ecf0f1;
+    }
+    
+    .form-group input::placeholder {
+        color: #95a5a6;
+    }
+}

static/login.js

@@ -0,0 +1,235 @@
+// AI Server Admin Login JavaScript
+
+class LoginManager {
+    constructor() {
+        this.baseUrl = window.location.origin;
+        this.init();
+    }
+
+    init() {
+        // Check if already logged in
+        this.checkExistingAuth();
+        
+        // Setup form submission
+        document.getElementById('login-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handleLogin();
+        });
+
+        // Setup enter key handling
+        document.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.handleLogin();
+            }
+        });
+
+        // Auto-focus username field
+        document.getElementById('username').focus();
+    }
+
+    async checkExistingAuth() {
+        const token = localStorage.getItem('ai_admin_token');
+        if (token) {
+            try {
+                console.log('Checking existing token...');
+                // Verify token is still valid
+                const response = await fetch(`${this.baseUrl}/admin/verify-token`, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                
+                if (response.ok) {
+                    console.log('Token is valid, redirecting to admin...');
+                    // Token is valid, redirect to admin
+                    window.location.href = '/admin';
+                    return;
+                } else {
+                    console.log('Token verification failed with status:', response.status);
+                }
+            } catch (error) {
+                console.log('Token verification failed:', error);
+            }
+            
+            // Token is invalid, remove it
+            console.log('Removing invalid token...');
+            localStorage.removeItem('ai_admin_token');
+            localStorage.removeItem('ai_admin_user');
+        }
+    }
+
+    async handleLogin() {
+        const username = document.getElementById('username').value.trim();
+        const password = document.getElementById('password').value;
+        const rememberMe = document.getElementById('remember-me').checked;
+
+        // Validation
+        if (!username || !password) {
+            this.showError('Please enter both username and password');
+            return;
+        }
+
+        // Show loading state
+        this.setLoading(true);
+        this.hideError();
+
+        try {
+            const response = await fetch(`${this.baseUrl}/admin/login`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    username,
+                    password,
+                    remember_me: rememberMe
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Store JWT token
+                localStorage.setItem('ai_admin_token', data.token);
+                
+                // Store user info
+                localStorage.setItem('ai_admin_user', JSON.stringify(data.user));
+                
+                console.log('Token stored:', data.token.substring(0, 20) + '...');
+                console.log('User stored:', data.user);
+                
+                // Show success message
+                this.showSuccess('Login successful! Redirecting...');
+                
+                // Redirect after short delay
+                setTimeout(() => {
+                    window.location.href = '/admin';
+                }, 1000);
+                
+            } else {
+                this.showError(data.message || 'Login failed. Please check your credentials.');
+            }
+
+        } catch (error) {
+            console.error('Login error:', error);
+            this.showError('Connection error. Please try again.');
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    setLoading(loading) {
+        const btn = document.getElementById('login-btn');
+        const icon = btn.querySelector('i');
+        
+        if (loading) {
+            btn.disabled = true;
+            btn.classList.add('loading');
+            icon.className = 'fas fa-spinner';
+            btn.querySelector('span') ? 
+                btn.querySelector('span').textContent = 'Signing In...' : 
+                btn.innerHTML = '<i class="fas fa-spinner"></i> Signing In...';
+        } else {
+            btn.disabled = false;
+            btn.classList.remove('loading');
+            icon.className = 'fas fa-sign-in-alt';
+            btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Sign In';
+        }
+    }
+
+    showError(message) {
+        const errorDiv = document.getElementById('error-message');
+        const errorText = document.getElementById('error-text');
+        
+        errorText.textContent = message;
+        errorDiv.style.display = 'flex';
+        
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+            this.hideError();
+        }, 5000);
+    }
+
+    hideError() {
+        document.getElementById('error-message').style.display = 'none';
+    }
+
+    showSuccess(message) {
+        // Create success message element if it doesn't exist
+        let successDiv = document.getElementById('success-message');
+        if (!successDiv) {
+            successDiv = document.createElement('div');
+            successDiv.id = 'success-message';
+            successDiv.className = 'success-message';
+            successDiv.innerHTML = `
+                <i class="fas fa-check-circle"></i>
+                <span id="success-text">${message}</span>
+            `;
+            
+            // Add CSS for success message
+            const style = document.createElement('style');
+            style.textContent = `
+                .success-message {
+                    background: #d5f4e6;
+                    border: 1px solid #27ae60;
+                    border-radius: 8px;
+                    padding: 0.75rem;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: #27ae60;
+                    font-size: 0.9rem;
+                    animation: slideDown 0.3s ease-out;
+                }
+                
+                @keyframes slideDown {
+                    from {
+                        opacity: 0;
+                        transform: translateY(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+            `;
+            document.head.appendChild(style);
+            
+            // Insert before error message
+            const errorDiv = document.getElementById('error-message');
+            errorDiv.parentNode.insertBefore(successDiv, errorDiv);
+        } else {
+            document.getElementById('success-text').textContent = message;
+            successDiv.style.display = 'flex';
+        }
+    }
+}
+
+// Password toggle functionality
+function togglePassword() {
+    const passwordInput = document.getElementById('password');
+    const passwordEye = document.getElementById('password-eye');
+    
+    if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        passwordEye.className = 'fas fa-eye-slash';
+    } else {
+        passwordInput.type = 'password';
+        passwordEye.className = 'fas fa-eye';
+    }
+}
+
+// Initialize login manager when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new LoginManager();
+});
+
+// Security: Clear sensitive data on page unload
+window.addEventListener('beforeunload', () => {
+    // Clear password field
+    const passwordField = document.getElementById('password');
+    if (passwordField) {
+        passwordField.value = '';
+    }
+});