m
This commit is contained in:
root
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="p-8 max-w-6xl mx-auto space-y-8 select-none" data-theme="dark">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between pb-6 border-b border-base-content/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-secondary/10 p-3 rounded-2xl text-secondary shadow-lg shadow-secondary/5">
|
||||
<UsersIcon :size="28" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-black tracking-tight">회원 및 권한 관리</h1>
|
||||
<p class="text-sm opacity-60 mt-1">회원가입 승인 대기 처리 및 회원별 접근 가능한 카테고리를 설정합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left / Top: Approval Pending List -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="bg-base-200 border border-base-content/5 rounded-3xl p-6 shadow-xl space-y-4">
|
||||
<h2 class="text-lg font-bold flex items-center gap-2">
|
||||
<UserPlusIcon :size="20" class="text-secondary" />
|
||||
가입 승인 대기 목록
|
||||
<div class="badge badge-secondary badge-sm font-black">{{ pendingUsers.length }}</div>
|
||||
</h2>
|
||||
|
||||
<div v-if="pendingLoading" class="flex justify-center py-8">
|
||||
<span class="loading loading-spinner loading-md text-secondary"></span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="pendingUsers.length === 0" class="text-center py-10 border border-dashed border-base-content/10 rounded-2xl">
|
||||
<p class="opacity-55 text-sm font-bold">승인 대기 중인 회원가입 신청이 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-3 max-h-80 overflow-y-auto pr-1">
|
||||
<div
|
||||
v-for="user in pendingUsers"
|
||||
:key="user.username"
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between p-4 bg-base-100 border border-base-content/5 rounded-2xl gap-4"
|
||||
>
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-black text-sm whitespace-nowrap">{{ user.nickname }}</span>
|
||||
<span class="text-xs opacity-50 font-mono whitespace-nowrap">@{{ user.username }}</span>
|
||||
<span
|
||||
class="badge badge-xs font-bold whitespace-nowrap"
|
||||
:class="user.apiKey ? 'badge-info text-info-content' : 'badge-neutral opacity-60'"
|
||||
>
|
||||
{{ user.apiKey ? 'API 키 등록됨' : 'API 키 없음' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs opacity-75 flex flex-wrap gap-x-4">
|
||||
<span class="whitespace-nowrap">연락처: {{ user.phone }}</span>
|
||||
<span class="whitespace-nowrap">신청일: {{ formatDate(user.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 self-end sm:self-center shrink-0">
|
||||
<button @click="handleApprove(user.username)" class="btn btn-success btn-sm font-bold rounded-xl px-4 whitespace-nowrap">
|
||||
승인
|
||||
</button>
|
||||
<button @click="handleReject(user.username)" class="btn btn-error btn-sm btn-ghost hover:btn-error font-bold rounded-xl px-4 whitespace-nowrap">
|
||||
거절
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All Users List -->
|
||||
<div class="bg-base-200 border border-base-content/5 rounded-3xl p-6 shadow-xl space-y-4">
|
||||
<h2 class="text-lg font-bold flex items-center gap-2">
|
||||
<ListIcon :size="20" class="text-secondary" />
|
||||
전체 회원 목록
|
||||
<div class="badge badge-secondary badge-sm font-black">{{ allUsers.length }}</div>
|
||||
</h2>
|
||||
|
||||
<div v-if="usersLoading" class="flex justify-center py-8">
|
||||
<span class="loading loading-spinner loading-md text-secondary"></span>
|
||||
</div>
|
||||
|
||||
<div v-else class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full text-left">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bg-transparent border-b border-base-content/5 text-xs font-black uppercase opacity-60 whitespace-nowrap">사용자</th>
|
||||
<th class="bg-transparent border-b border-base-content/5 text-xs font-black uppercase opacity-60 whitespace-nowrap">연락처</th>
|
||||
<th class="bg-transparent border-b border-base-content/5 text-xs font-black uppercase opacity-60 whitespace-nowrap">API 키</th>
|
||||
<th class="bg-transparent border-b border-base-content/5 text-xs font-black uppercase opacity-60 whitespace-nowrap">상태</th>
|
||||
<th class="bg-transparent border-b border-base-content/5 text-xs font-black uppercase opacity-60 text-center whitespace-nowrap">작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="user in allUsers"
|
||||
:key="user.username"
|
||||
class="hover:bg-base-100/30 cursor-pointer"
|
||||
:class="selectedUser?.username === user.username ? 'bg-secondary/10 hover:bg-secondary/15 font-bold' : ''"
|
||||
@click="selectUser(user)"
|
||||
>
|
||||
<td class="border-b border-base-content/5 whitespace-nowrap">
|
||||
<div class="font-bold text-sm">{{ user.nickname }}</div>
|
||||
<div class="text-xs opacity-50 font-mono">@{{ user.username }}</div>
|
||||
</td>
|
||||
<td class="border-b border-base-content/5 text-xs font-semibold whitespace-nowrap">{{ user.phone }}</td>
|
||||
<td class="border-b border-base-content/5 whitespace-nowrap">
|
||||
<span
|
||||
class="badge badge-xs font-bold"
|
||||
:class="user.apiKey ? 'badge-info text-info-content' : 'badge-neutral opacity-40'"
|
||||
>
|
||||
{{ user.apiKey ? '등록됨' : '미등록' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border-b border-base-content/5 whitespace-nowrap">
|
||||
<span
|
||||
class="badge badge-sm font-black uppercase whitespace-nowrap"
|
||||
:class="{
|
||||
'badge-success': user.status === 'approved',
|
||||
'badge-warning': user.status === 'pending',
|
||||
'badge-error': user.status === 'rejected'
|
||||
}"
|
||||
>
|
||||
{{ user.status === 'approved' ? '승인완료' : user.status === 'pending' ? '대기중' : '거절됨' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="border-b border-base-content/5 text-center whitespace-nowrap space-x-1">
|
||||
<button
|
||||
@click.stop="selectUser(user)"
|
||||
class="btn btn-xs btn-outline btn-secondary font-bold rounded-lg whitespace-nowrap"
|
||||
:class="selectedUser?.username === user.username ? 'btn-active' : ''"
|
||||
>
|
||||
권한 설정
|
||||
</button>
|
||||
<button
|
||||
v-if="user.username !== 'admin'"
|
||||
@click.stop="openEditModal(user)"
|
||||
class="btn btn-xs btn-warning btn-outline font-bold rounded-lg whitespace-nowrap"
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
<button
|
||||
v-if="user.username !== 'admin'"
|
||||
@click.stop="handleDeleteUser(user.username)"
|
||||
class="btn btn-xs btn-error btn-outline font-bold rounded-lg whitespace-nowrap"
|
||||
>
|
||||
탈퇴
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right/Bottom: Category Permission Configuration -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-base-200 border border-base-content/5 rounded-3xl p-6 shadow-xl space-y-6 sticky top-8">
|
||||
<div class="pb-4 border-b border-base-content/10">
|
||||
<h2 class="text-lg font-bold flex items-center gap-2">
|
||||
<ShieldCheckIcon :size="20" class="text-secondary" />
|
||||
카테고리 열람 권한 설정
|
||||
</h2>
|
||||
<p class="text-xs opacity-60 mt-1">목록에서 사용자를 선택하여 허용할 카테고리를 지정하세요.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="!selectedUser" class="text-center py-16 opacity-40">
|
||||
<UserCheckIcon :size="48" class="mx-auto mb-3" />
|
||||
<p class="text-sm font-bold">선택된 사용자가 없습니다.</p>
|
||||
<p class="text-xs mt-1">좌측 목록에서 회원을 선택해 주세요.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- User Header -->
|
||||
<div class="bg-base-300 p-4 rounded-2xl border border-base-content/5">
|
||||
<div class="text-xs font-black uppercase tracking-widest opacity-60 mb-1">선택된 사용자</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-black text-lg text-secondary">{{ selectedUser.nickname }}</span>
|
||||
<span class="text-xs opacity-50 font-mono">@{{ selectedUser.username }}</span>
|
||||
</div>
|
||||
<div v-if="selectedUser.username === 'admin'" class="text-xs text-info font-black mt-2">
|
||||
* 관리자는 모든 카테고리에 상시 접근 가능합니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories Checklist -->
|
||||
<div v-if="selectedUser.username !== 'admin'" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm font-bold opacity-80">허용할 카테고리 목록</span>
|
||||
<div class="flex gap-2">
|
||||
<button @click="selectAllCategories" class="btn btn-xs btn-ghost text-[10px] font-bold">전체 선택</button>
|
||||
<button @click="deselectAllCategories" class="btn btn-xs btn-ghost text-[10px] font-bold">전체 해제</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 bg-base-300/40 p-4 rounded-2xl border border-base-content/5 max-h-72 overflow-y-auto">
|
||||
<label
|
||||
v-for="cat in availableCategories"
|
||||
:key="cat.name"
|
||||
class="flex items-center gap-3 hover:bg-base-100/40 px-3 py-2.5 rounded-xl cursor-pointer transition-colors h-14 border border-transparent hover:border-base-content/5"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="cat.name"
|
||||
v-model="allowedCategories"
|
||||
class="checkbox checkbox-sm checkbox-secondary shrink-0"
|
||||
/>
|
||||
<div class="flex flex-col text-left min-w-0 flex-1">
|
||||
<span class="text-sm font-bold truncate whitespace-nowrap block" :title="cat.name">{{ cat.name }}</span>
|
||||
<span class="text-[10px] opacity-50 font-bold mt-0.5">문항수: {{ cat.count }}개</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button
|
||||
@click="savePermissions"
|
||||
:disabled="savingPermissions"
|
||||
class="btn btn-secondary w-full font-bold text-base rounded-2xl"
|
||||
>
|
||||
<span v-if="savingPermissions" class="loading loading-spinner"></span>
|
||||
{{ savingPermissions ? '저장 중...' : '권한 설정 저장' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-10 text-xs opacity-60">
|
||||
관리자 계정은 권한 제어 대상이 아닙니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit User Modal (Admin Force Edit) -->
|
||||
<div v-if="showEditModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||||
<div class="bg-base-200 border border-base-content/10 w-full max-w-md p-6 sm:p-8 rounded-3xl shadow-2xl relative space-y-6">
|
||||
<button @click="closeEditModal" class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4">✕</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-warning/10 p-2.5 rounded-2xl text-warning">
|
||||
<UsersIcon :size="24" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-black">회원 정보 강제 수정</h3>
|
||||
<p class="text-xs opacity-60">관리자 권한으로 회원의 정보를 수정합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleUpdateUserInfo" class="space-y-4">
|
||||
<div class="form-control">
|
||||
<label class="label py-1">
|
||||
<span class="label-text font-bold text-xs opacity-80">대상 계정명</span>
|
||||
</label>
|
||||
<input
|
||||
:value="editingUser?.username"
|
||||
type="text"
|
||||
disabled
|
||||
class="input input-bordered input-sm w-full bg-base-300 font-mono py-4 cursor-not-allowed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label py-1">
|
||||
<span class="label-text font-bold text-xs opacity-80">닉네임</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="editNickname"
|
||||
type="text"
|
||||
required
|
||||
placeholder="닉네임 입력"
|
||||
class="input input-bordered input-sm w-full bg-base-100/50 focus:input-warning py-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label py-1">
|
||||
<span class="label-text font-bold text-xs opacity-80">연락처</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="editPhone"
|
||||
type="text"
|
||||
required
|
||||
placeholder="연락처 입력"
|
||||
class="input input-bordered input-sm w-full bg-base-100/50 focus:input-warning py-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label py-1">
|
||||
<span class="label-text font-bold text-xs opacity-80">새 비밀번호 강제 변경 (선택사항)</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="editPassword"
|
||||
type="password"
|
||||
placeholder="미기입 시 기존 비번 유지"
|
||||
class="input input-bordered input-sm w-full bg-base-100/50 focus:input-warning py-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="updatingUser"
|
||||
class="btn btn-warning btn-sm w-full font-bold py-2.5 h-auto rounded-xl mt-4"
|
||||
>
|
||||
<span v-if="updatingUser" class="loading loading-spinner loading-xs mr-1"></span>
|
||||
회원 정보 강제 저장
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { UsersIcon, UserPlusIcon, ListIcon, ShieldCheckIcon, UserCheckIcon } from 'lucide-vue-next'
|
||||
import { QuizService, CategoryInfo, User } from '../../bindings/changeme'
|
||||
import { UpdateUserInfoForce, DeleteUser } from '../../bindings/changeme/quizservice'
|
||||
|
||||
const pendingUsers = ref<User[]>([])
|
||||
const allUsers = ref<User[]>([])
|
||||
const availableCategories = ref<CategoryInfo[]>([])
|
||||
|
||||
const pendingLoading = ref(false)
|
||||
const usersLoading = ref(false)
|
||||
const savingPermissions = ref(false)
|
||||
|
||||
const selectedUser = ref<User | null>(null)
|
||||
const allowedCategories = ref<string[]>([])
|
||||
|
||||
// Admin force edit state
|
||||
const showEditModal = ref(false)
|
||||
const editingUser = ref<User | null>(null)
|
||||
const editNickname = ref('')
|
||||
const editPhone = ref('')
|
||||
const editPassword = ref('')
|
||||
const updatingUser = ref(false)
|
||||
|
||||
async function fetchPending() {
|
||||
pendingLoading.value = true
|
||||
try {
|
||||
const list = await QuizService.GetPendingRegistrations()
|
||||
pendingUsers.value = list || []
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch pending list:', err)
|
||||
} finally {
|
||||
pendingLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUsers() {
|
||||
usersLoading.value = true
|
||||
try {
|
||||
const list = await QuizService.GetUsers()
|
||||
allUsers.value = list || []
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch users:', err)
|
||||
} finally {
|
||||
usersLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCategories() {
|
||||
try {
|
||||
const list = await QuizService.GetCategories()
|
||||
availableCategories.value = list || []
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch categories:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleApprove(username: string) {
|
||||
try {
|
||||
await QuizService.ApproveRegistration(username)
|
||||
await fetchPending()
|
||||
await fetchUsers()
|
||||
} catch (err) {
|
||||
alert(`승인 처리 실패: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleReject(username: string) {
|
||||
if (!confirm(`@${username} 회원의 가입 신청을 거절하시겠습니까?`)) return
|
||||
try {
|
||||
await QuizService.RejectRegistration(username)
|
||||
await fetchPending()
|
||||
await fetchUsers()
|
||||
} catch (err) {
|
||||
alert(`거절 처리 실패: ${err}`)
|
||||
}
|
||||
}
|
||||
|
||||
async function selectUser(user: User) {
|
||||
selectedUser.value = user
|
||||
allowedCategories.value = []
|
||||
if (user.username === 'admin') return
|
||||
|
||||
try {
|
||||
const list = await QuizService.GetUserAllowedCategories(user.username)
|
||||
allowedCategories.value = list || []
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch user permissions:', err)
|
||||
}
|
||||
}
|
||||
|
||||
function selectAllCategories() {
|
||||
allowedCategories.value = availableCategories.value.map(c => c.name)
|
||||
}
|
||||
|
||||
function deselectAllCategories() {
|
||||
allowedCategories.value = []
|
||||
}
|
||||
|
||||
async function savePermissions() {
|
||||
if (!selectedUser.value) return
|
||||
|
||||
savingPermissions.value = true
|
||||
try {
|
||||
await QuizService.SetUserAllowedCategories(selectedUser.value.username, allowedCategories.value)
|
||||
alert('권한이 성공적으로 저장되었습니다.')
|
||||
} catch (err) {
|
||||
alert(`권한 저장 실패: ${err}`)
|
||||
} finally {
|
||||
savingPermissions.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
if (!dateStr) return ''
|
||||
return dateStr.split(' ')[0] // Simple YYYY-MM-DD
|
||||
}
|
||||
|
||||
function openEditModal(user: User) {
|
||||
editingUser.value = user
|
||||
editNickname.value = user.nickname
|
||||
editPhone.value = user.phone
|
||||
editPassword.value = ''
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
showEditModal.value = false
|
||||
editingUser.value = null
|
||||
editNickname.value = ''
|
||||
editPhone.value = ''
|
||||
editPassword.value = ''
|
||||
}
|
||||
|
||||
async function handleUpdateUserInfo() {
|
||||
if (!editingUser.value) return
|
||||
|
||||
updatingUser.value = true
|
||||
try {
|
||||
await UpdateUserInfoForce(
|
||||
editingUser.value.username,
|
||||
editNickname.value.trim(),
|
||||
editPhone.value.trim(),
|
||||
editPassword.value.trim()
|
||||
)
|
||||
alert('회원 정보가 강제로 수정되었습니다.')
|
||||
closeEditModal()
|
||||
await fetchUsers()
|
||||
} catch (err: any) {
|
||||
alert(`정보 수정 실패: ${err.message || String(err)}`)
|
||||
} finally {
|
||||
updatingUser.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteUser(username: string) {
|
||||
if (!confirm(`@${username} 회원을 탈퇴(완전 삭제) 처리하시겠습니까? 데이터가 유실되며 되돌릴 수 없습니다.`)) return
|
||||
|
||||
try {
|
||||
await DeleteUser(username)
|
||||
alert('회원이 성공적으로 탈퇴 처리되었습니다.')
|
||||
if (selectedUser.value?.username === username) {
|
||||
selectedUser.value = null
|
||||
}
|
||||
await fetchUsers()
|
||||
} catch (err: any) {
|
||||
alert(`탈퇴 처리 실패: ${err.message || String(err)}`)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPending()
|
||||
fetchUsers()
|
||||
fetchCategories()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user