1e098999c1
🔐 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 + 감사로그)
391 lines
6.8 KiB
CSS
391 lines
6.8 KiB
CSS
/* 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;
|
|
}
|
|
}
|