6e01dbdeb3
- FastAPI 라우터에서 슬래시 문제로 인한 307 리다이렉트 수정 - Nginx 프록시 설정에서 경로 중복 문제 해결 - 계정 관리 시스템 구현 (로그인, 사용자 관리, 권한 설정) - 노트북 연결 기능 수정 (notebook_id 필드 추가) - 메모 트리 UI 개선 (수평 레이아웃, 드래그 기능 제거) - 헤더 UI 개선 및 고정 위치 설정 - 백업/복원 스크립트 추가 - PDF 미리보기 토큰 인증 지원
364 lines
19 KiB
HTML
364 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>프로필 관리 - Document Server</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<!-- 인증 가드 -->
|
|
<script src="static/js/auth-guard.js"></script>
|
|
|
|
<!-- 공통 스타일 -->
|
|
<link rel="stylesheet" href="static/css/common.css">
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen" x-data="profileApp()">
|
|
<!-- 헤더 -->
|
|
<div id="header-container"></div>
|
|
|
|
<!-- 메인 컨테이너 -->
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- 페이지 제목 -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2">프로필 관리</h1>
|
|
<p class="text-gray-600">개인 정보와 계정 설정을 관리하세요.</p>
|
|
</div>
|
|
|
|
<!-- 알림 메시지 -->
|
|
<div x-show="notification.show" x-transition class="mb-6 p-4 rounded-lg" :class="notification.type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200'">
|
|
<div class="flex items-center">
|
|
<i :class="notification.type === 'success' ? 'fas fa-check-circle text-green-500' : 'fas fa-exclamation-circle text-red-500'" class="mr-2"></i>
|
|
<span x-text="notification.message"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 프로필 카드 -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-6 mb-6">
|
|
<!-- 프로필 아바타 -->
|
|
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-user text-blue-600 text-2xl"></i>
|
|
</div>
|
|
|
|
<!-- 기본 정보 -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900" x-text="user.full_name || user.email"></h2>
|
|
<p class="text-gray-600" x-text="user.email"></p>
|
|
<div class="flex items-center mt-2">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
:class="user.role === 'root' ? 'bg-red-100 text-red-800' : user.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'">
|
|
<i class="fas fa-crown mr-1" x-show="user.role === 'root'"></i>
|
|
<i class="fas fa-shield-alt mr-1" x-show="user.role === 'admin'"></i>
|
|
<i class="fas fa-user mr-1" x-show="user.role === 'user'"></i>
|
|
<span x-text="getRoleText(user.role)"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭 메뉴 -->
|
|
<div class="mb-8">
|
|
<nav class="flex space-x-8" aria-label="Tabs">
|
|
<button @click="activeTab = 'profile'"
|
|
:class="activeTab === 'profile' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
|
|
<i class="fas fa-user mr-2"></i>프로필 정보
|
|
</button>
|
|
<button @click="activeTab = 'security'"
|
|
:class="activeTab === 'security' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
|
|
<i class="fas fa-lock mr-2"></i>보안 설정
|
|
</button>
|
|
<button @click="activeTab = 'preferences'"
|
|
:class="activeTab === 'preferences' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
|
|
class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
|
|
<i class="fas fa-cog mr-2"></i>환경 설정
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- 프로필 정보 탭 -->
|
|
<div x-show="activeTab === 'profile'" class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-6">프로필 정보</h3>
|
|
|
|
<form @submit.prevent="updateProfile()" class="space-y-6">
|
|
<div>
|
|
<label for="full_name" class="block text-sm font-medium text-gray-700 mb-2">이름</label>
|
|
<input type="text" id="full_name" x-model="profileForm.full_name"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
|
|
<input type="email" id="email" x-model="user.email" disabled
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-500">
|
|
<p class="mt-1 text-sm text-gray-500">이메일은 변경할 수 없습니다.</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" :disabled="profileLoading"
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i class="fas fa-spinner fa-spin mr-2" x-show="profileLoading"></i>
|
|
<span x-text="profileLoading ? '저장 중...' : '프로필 저장'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 보안 설정 탭 -->
|
|
<div x-show="activeTab === 'security'" class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-6">비밀번호 변경</h3>
|
|
|
|
<form @submit.prevent="changePassword()" class="space-y-6">
|
|
<div>
|
|
<label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">현재 비밀번호</label>
|
|
<input type="password" id="current_password" x-model="passwordForm.current_password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="new_password" class="block text-sm font-medium text-gray-700 mb-2">새 비밀번호</label>
|
|
<input type="password" id="new_password" x-model="passwordForm.new_password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required minlength="6">
|
|
<p class="mt-1 text-sm text-gray-500">최소 6자 이상 입력해주세요.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-2">새 비밀번호 확인</label>
|
|
<input type="password" id="confirm_password" x-model="passwordForm.confirm_password"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
required>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" :disabled="passwordLoading || passwordForm.new_password !== passwordForm.confirm_password"
|
|
class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i class="fas fa-spinner fa-spin mr-2" x-show="passwordLoading"></i>
|
|
<span x-text="passwordLoading ? '변경 중...' : '비밀번호 변경'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 환경 설정 탭 -->
|
|
<div x-show="activeTab === 'preferences'" class="bg-white rounded-lg shadow-sm border border-gray-200">
|
|
<div class="p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-6">환경 설정</h3>
|
|
|
|
<form @submit.prevent="updatePreferences()" class="space-y-6">
|
|
<div>
|
|
<label for="theme" class="block text-sm font-medium text-gray-700 mb-2">테마</label>
|
|
<select id="theme" x-model="preferencesForm.theme"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="light">라이트 모드</option>
|
|
<option value="dark">다크 모드</option>
|
|
<option value="auto">시스템 설정 따름</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="language" class="block text-sm font-medium text-gray-700 mb-2">언어</label>
|
|
<select id="language" x-model="preferencesForm.language"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="ko">한국어</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="timezone" class="block text-sm font-medium text-gray-700 mb-2">시간대</label>
|
|
<select id="timezone" x-model="preferencesForm.timezone"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<option value="Asia/Seoul">서울 (UTC+9)</option>
|
|
<option value="UTC">UTC (UTC+0)</option>
|
|
<option value="America/New_York">뉴욕 (UTC-5)</option>
|
|
<option value="Europe/London">런던 (UTC+0)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" :disabled="preferencesLoading"
|
|
class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i class="fas fa-spinner fa-spin mr-2" x-show="preferencesLoading"></i>
|
|
<span x-text="preferencesLoading ? '저장 중...' : '설정 저장'"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 공통 스크립트 -->
|
|
<script src="static/js/api.js"></script>
|
|
<script src="static/js/header-loader.js"></script>
|
|
|
|
<!-- 프로필 관리 스크립트 -->
|
|
<script>
|
|
function profileApp() {
|
|
return {
|
|
user: {},
|
|
activeTab: 'profile',
|
|
profileLoading: false,
|
|
passwordLoading: false,
|
|
preferencesLoading: false,
|
|
|
|
profileForm: {
|
|
full_name: ''
|
|
},
|
|
|
|
passwordForm: {
|
|
current_password: '',
|
|
new_password: '',
|
|
confirm_password: ''
|
|
},
|
|
|
|
preferencesForm: {
|
|
theme: 'light',
|
|
language: 'ko',
|
|
timezone: 'Asia/Seoul'
|
|
},
|
|
|
|
notification: {
|
|
show: false,
|
|
type: 'success',
|
|
message: ''
|
|
},
|
|
|
|
async init() {
|
|
console.log('🔧 프로필 앱 초기화');
|
|
await this.loadUserProfile();
|
|
},
|
|
|
|
async loadUserProfile() {
|
|
try {
|
|
const response = await api.get('/users/me');
|
|
this.user = response;
|
|
|
|
// 폼 데이터 초기화
|
|
this.profileForm.full_name = response.full_name || '';
|
|
this.preferencesForm.theme = response.theme || 'light';
|
|
this.preferencesForm.language = response.language || 'ko';
|
|
this.preferencesForm.timezone = response.timezone || 'Asia/Seoul';
|
|
|
|
// 헤더 사용자 메뉴 업데이트
|
|
if (window.updateUserMenu) {
|
|
window.updateUserMenu(response);
|
|
}
|
|
|
|
console.log('✅ 사용자 프로필 로드 완료:', response);
|
|
} catch (error) {
|
|
console.error('❌ 사용자 프로필 로드 실패:', error);
|
|
this.showNotification('사용자 정보를 불러올 수 없습니다.', 'error');
|
|
}
|
|
},
|
|
|
|
async updateProfile() {
|
|
this.profileLoading = true;
|
|
try {
|
|
const response = await api.put('/users/me', this.profileForm);
|
|
this.user = { ...this.user, ...response };
|
|
|
|
// 헤더 사용자 메뉴 업데이트
|
|
if (window.updateUserMenu) {
|
|
window.updateUserMenu(this.user);
|
|
}
|
|
|
|
this.showNotification('프로필이 성공적으로 업데이트되었습니다.', 'success');
|
|
console.log('✅ 프로필 업데이트 완료');
|
|
} catch (error) {
|
|
console.error('❌ 프로필 업데이트 실패:', error);
|
|
this.showNotification('프로필 업데이트에 실패했습니다.', 'error');
|
|
} finally {
|
|
this.profileLoading = false;
|
|
}
|
|
},
|
|
|
|
async changePassword() {
|
|
if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
|
|
this.showNotification('새 비밀번호가 일치하지 않습니다.', 'error');
|
|
return;
|
|
}
|
|
|
|
this.passwordLoading = true;
|
|
try {
|
|
await api.post('/users/me/change-password', {
|
|
current_password: this.passwordForm.current_password,
|
|
new_password: this.passwordForm.new_password
|
|
});
|
|
|
|
// 폼 초기화
|
|
this.passwordForm = {
|
|
current_password: '',
|
|
new_password: '',
|
|
confirm_password: ''
|
|
};
|
|
|
|
this.showNotification('비밀번호가 성공적으로 변경되었습니다.', 'success');
|
|
console.log('✅ 비밀번호 변경 완료');
|
|
} catch (error) {
|
|
console.error('❌ 비밀번호 변경 실패:', error);
|
|
this.showNotification('비밀번호 변경에 실패했습니다. 현재 비밀번호를 확인해주세요.', 'error');
|
|
} finally {
|
|
this.passwordLoading = false;
|
|
}
|
|
},
|
|
|
|
async updatePreferences() {
|
|
this.preferencesLoading = true;
|
|
try {
|
|
const response = await api.put('/users/me', this.preferencesForm);
|
|
this.user = { ...this.user, ...response };
|
|
|
|
this.showNotification('환경 설정이 성공적으로 저장되었습니다.', 'success');
|
|
console.log('✅ 환경 설정 업데이트 완료');
|
|
} catch (error) {
|
|
console.error('❌ 환경 설정 업데이트 실패:', error);
|
|
this.showNotification('환경 설정 저장에 실패했습니다.', 'error');
|
|
} finally {
|
|
this.preferencesLoading = false;
|
|
}
|
|
},
|
|
|
|
showNotification(message, type = 'success') {
|
|
this.notification = {
|
|
show: true,
|
|
type,
|
|
message
|
|
};
|
|
|
|
setTimeout(() => {
|
|
this.notification.show = false;
|
|
}, 5000);
|
|
},
|
|
|
|
getRoleText(role) {
|
|
const roleMap = {
|
|
'root': '시스템 관리자',
|
|
'admin': '관리자',
|
|
'user': '사용자'
|
|
};
|
|
return roleMap[role] || '사용자';
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|