feat: add authentication modal component and user authentication logic

- Implemented AuthModal.vue for user login and registration with form handling.
- Created useAuth composable for managing user state and authentication requests.
- Added admin route middleware to protect admin routes.
- Developed admin login page with authentication checks.
- Implemented API endpoints for user management (login, logout, fetch user, register).
- Created database migrations for users table and updated movies table.
- Added utility functions for password hashing and JWT token management.

app/components/AppHeader.vue

@@ -2,10 +2,11 @@
 import {
   Heart,
   History,
+  LogOut,
   Menu,
   Search,
+  Settings,
   User,
-  UserRound,
   X,
 } from 'lucide-vue-next'
 
@@ -14,6 +15,17 @@ const router = useRouter()
 const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
 const mobileMenuOpen = ref(false)
 const memberMenuOpen = ref(false)
+const authModalOpen = ref(false)
+
+const { user, fetchUser, logout: doLogout } = useAuth()
+await fetchUser()
+
+const displayName = computed(() => {
+  if (!user.value) return ''
+  return user.value.name || user.value.email?.split('@')[0] || 'Thành viên'
+})
+
+const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
 
 const navItems = [
   { label: 'Trang chủ', to: '/' },
@@ -23,10 +35,17 @@ const navItems = [
   { label: 'Phim lẻ', to: '/phim?type=single' },
 ]
 
-const memberMenuItems = [
-  { label: 'Yêu thích', icon: Heart, to: '/yeu-thich' },
-  { label: 'Lịch sử', icon: History, to: '/lich-su' },
-]
+const memberMenuItems = computed(() => {
+  const items = [
+    { label: 'Trang cá nhân', icon: User, to: '/thanh-vien' },
+    { label: 'Yêu thích', icon: Heart, to: '/yeu-thich' },
+    { label: 'Lịch sử', icon: History, to: '/lich-su' },
+  ]
+  if (user.value?.role === 'admin') {
+    items.push({ label: 'Trang quản trị', icon: Settings, to: '/admin' })
+  }
+  return items
+})
 
 function isActive(to: string) {
   if (to === '/') return route.path === '/'
@@ -45,10 +64,24 @@ function closeMobileMenu() {
   mobileMenuOpen.value = false
 }
 
+function openAuthModal() {
+  authModalOpen.value = true
+}
+
 function handleMemberClick() {
+  if (!user.value) {
+    openAuthModal()
+    return
+  }
   memberMenuOpen.value = !memberMenuOpen.value
 }
 
+async function handleLogout() {
+  await doLogout()
+  memberMenuOpen.value = false
+  router.push('/')
+}
+
 watch(() => route.path, () => {
   closeMobileMenu()
   memberMenuOpen.value = false
@@ -56,7 +89,7 @@ watch(() => route.path, () => {
 </script>
 
 <template>
-  <header class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/78 backdrop-blur-xl">
+  <header class="fixed inset-x-0 top-0 z-50 bg-gradient-to-b from-black/80 via-black/40 to-transparent">
     <nav class="mx-auto flex max-w-390 items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8 xl:px-10">
       <AppLogo />
 
@@ -81,18 +114,37 @@ watch(() => route.path, () => {
         <button type="button"
           class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-white px-2.5 pl-1 text-xs font-black text-slate-950 shadow-xl shadow-black/20 transition hover:bg-yellow-100"
           aria-label="Tài khoản thành viên" @click="handleMemberClick">
-          <User class="ml-1 size-4 fill-current" />
-          <span>Thành viên</span>
+          <template v-if="user">
+            <span class="grid size-7 place-items-center rounded-full bg-yellow-400/20 text-xs font-black text-yellow-400">
+              {{ displayInitial }}
+            </span>
+            <span class="max-w-24 truncate">{{ displayName }}</span>
+          </template>
+          <template v-else>
+            <User class="ml-1 size-4 fill-current" />
+            <span>Đăng nhập</span>
+          </template>
         </button>
 
         <Transition name="member-menu">
-          <div v-if="memberMenuOpen"
-            class="absolute right-0 top-[calc(100%+0.75rem)] w-64 overflow-hidden rounded-lg border border-white/10 bg-[#101116] py-2 text-sm font-semibold text-slate-200 shadow-2xl shadow-black/40">
+          <div v-if="user && memberMenuOpen"
+            class="absolute right-0 top-[calc(100%+0.5rem)] w-52 overflow-hidden rounded-xl border border-white/8 bg-[#101116]/95 py-1.5 text-sm text-slate-300 shadow-xl shadow-black/50 backdrop-blur-xl">
+            <div class="border-b border-white/6 px-4 py-2.5">
+              <p class="truncate text-xs font-semibold text-white">{{ displayName }}</p>
+              <p class="truncate text-[11px] text-slate-500">{{ user.email }}</p>
+            </div>
             <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
-              class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left transition hover:bg-white/8 hover:text-white">
-              <component :is="item.icon" class="size-4 shrink-0" />
-              {{ item.label }}
+              class="flex h-9 w-full cursor-pointer items-center gap-2.5 px-4 transition hover:bg-white/6 hover:text-white">
+              <component :is="item.icon" class="size-3.5 shrink-0" />
+              <span class="text-[13px] font-medium">{{ item.label }}</span>
             </NuxtLink>
+            <div class="my-1 border-t border-white/6" />
+            <button type="button"
+              class="flex h-9 w-full cursor-pointer items-center gap-2.5 px-4 text-[13px] font-medium text-red-400/80 transition hover:bg-red-400/8 hover:text-red-400"
+              @click="handleLogout">
+              <LogOut class="size-3.5 shrink-0" />
+              Đăng xuất
+            </button>
           </div>
         </Transition>
       </div>
@@ -117,6 +169,17 @@ watch(() => route.path, () => {
                 <X class="size-5" />
               </button>
             </div>
+
+            <div v-if="user" class="flex items-center gap-3 border-b border-white/10 px-4 py-4">
+              <span class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
+                {{ displayInitial }}
+              </span>
+              <div class="min-w-0">
+                <p class="truncate text-sm font-semibold text-white">{{ displayName }}</p>
+                <p class="truncate text-xs text-slate-400">{{ user.email }}</p>
+              </div>
+            </div>
+
             <nav class="flex flex-col gap-1 p-4">
               <NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
                 class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-yellow-200"
@@ -125,17 +188,35 @@ watch(() => route.path, () => {
               </NuxtLink>
             </nav>
             <div class="border-t border-white/10 p-4">
-              <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
-                class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-semibold text-slate-200 transition hover:bg-white/8 hover:text-white"
-                @click="closeMobileMenu">
-                <component :is="item.icon" class="size-4 shrink-0" />
-                {{ item.label }}
-              </NuxtLink>
+              <template v-if="user">
+                <NuxtLink v-for="item in memberMenuItems" :key="item.label" :to="item.to"
+                  class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-semibold text-slate-200 transition hover:bg-white/8 hover:text-white"
+                  @click="closeMobileMenu">
+                  <component :is="item.icon" class="size-4 shrink-0" />
+                  {{ item.label }}
+                </NuxtLink>
+                <div class="my-2 border-t border-white/10" />
+                <button type="button"
+                  class="flex h-11 w-full cursor-pointer items-center gap-3 px-4 text-left text-sm font-black text-red-400 transition hover:bg-white/8 hover:text-red-300"
+                  @click="handleLogout">
+                  <LogOut class="size-4 shrink-0" />
+                  Đăng xuất
+                </button>
+              </template>
+              <template v-else>
+                <button type="button"
+                  class="flex h-11 w-full cursor-pointer items-center justify-center rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300"
+                  @click="closeMobileMenu(); openAuthModal()">
+                  Đăng nhập
+                </button>
+              </template>
             </div>
           </div>
         </div>
       </Transition>
     </Teleport>
+
+    <AuthModal v-model="authModalOpen" />
   </header>
 </template>
 

app/components/AuthModal.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { Check, Eye, EyeOff, LockKeyhole, Mail, UserRound, X } from 'lucide-vue-next'
+
+const open = defineModel<boolean>({ default: false })
+const { fetchUser } = useAuth()
+
+const mode = ref<'login' | 'register'>('login')
+const name = ref('')
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const success = ref('')
+const loading = ref(false)
+const showPassword = ref(false)
+
+function switchMode(m: 'login' | 'register') {
+  mode.value = m
+  error.value = ''
+  success.value = ''
+}
+
+function resetForm() {
+  name.value = ''
+  email.value = ''
+  password.value = ''
+  error.value = ''
+  success.value = ''
+  showPassword.value = false
+}
+
+function closeModal() {
+  open.value = false
+  resetForm()
+}
+
+async function handleSubmit() {
+  error.value = ''
+  success.value = ''
+  loading.value = true
+  try {
+    if (mode.value === 'login') {
+      await $fetch('/api/auth/login', {
+        method: 'POST',
+        body: { email: email.value, password: password.value },
+      })
+      success.value = 'Đăng nhập thành công!'
+    } else {
+      await $fetch('/api/auth/register', {
+        method: 'POST',
+        body: { name: name.value, email: email.value, password: password.value },
+      })
+      success.value = 'Đăng ký thành công!'
+    }
+    await fetchUser()
+    setTimeout(() => closeModal(), 1000)
+  } catch (err: any) {
+    error.value = err?.data?.message || (mode.value === 'login' ? 'Đăng nhập thất bại' : 'Đăng ký thất bại')
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(open, (val) => {
+  if (val) {
+    resetForm()
+    mode.value = 'login'
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="auth-modal">
+      <div v-if="open" class="fixed inset-0 z-70 grid place-items-center px-3">
+        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" @click="closeModal" />
+        <div class="relative w-full max-w-md overflow-hidden rounded-xl border border-white/10 bg-slate-900 shadow-2xl">
+          <button type="button"
+            class="absolute right-3 top-3 z-10 grid size-8 place-items-center rounded-full text-white transition hover:bg-white/10"
+            @click="closeModal">
+            <X class="size-5" />
+          </button>
+
+          <div class="border-b border-white/10 p-6 pb-5">
+            <h2 class="text-2xl font-black text-white">
+              {{ mode === 'login' ? 'Đăng nhập' : 'Đăng ký' }}
+            </h2>
+            <p class="mt-1 text-sm text-slate-400">
+              <template v-if="mode === 'login'">
+                Chào mừng bạn quay trở lại CineK
+              </template>
+              <template v-else>
+                Tạo tài khoản CineK miễn phí
+              </template>
+            </p>
+
+            <div class="mt-4 flex gap-1 rounded-lg bg-white/5 p-1">
+              <button type="button"
+                class="flex-1 rounded-md px-3 py-2 text-sm font-semibold transition"
+                :class="mode === 'login' ? 'bg-yellow-400 text-slate-950' : 'text-slate-400 hover:text-white'"
+                @click="switchMode('login')">
+                Đăng nhập
+              </button>
+              <button type="button"
+                class="flex-1 rounded-md px-3 py-2 text-sm font-semibold transition"
+                :class="mode === 'register' ? 'bg-yellow-400 text-slate-950' : 'text-slate-400 hover:text-white'"
+                @click="switchMode('register')">
+                Đăng ký
+              </button>
+            </div>
+          </div>
+
+          <form class="p-6 pt-5" @submit.prevent="handleSubmit">
+            <div class="space-y-3">
+              <div v-if="mode === 'register'">
+                <div class="relative">
+                  <UserRound class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+                  <input v-model="name" type="text" placeholder="Tên hiển thị"
+                    class="h-11 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                </div>
+              </div>
+
+              <div class="relative">
+                <Mail class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+                <input v-model="email" type="email" required placeholder="Email"
+                  class="h-11 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+              </div>
+
+              <div class="relative">
+                <LockKeyhole class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+                <input v-model="password" :type="showPassword ? 'text' : 'password'" required minlength="6"
+                  :placeholder="mode === 'login' ? 'Mật khẩu' : 'Ít nhất 6 ký tự'"
+                  class="h-11 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-10 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                <button type="button"
+                  class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-white"
+                  @click="showPassword = !showPassword">
+                  <EyeOff v-if="showPassword" class="size-4" />
+                  <Eye v-else class="size-4" />
+                </button>
+              </div>
+            </div>
+
+            <button type="submit"
+              class="mt-5 inline-flex h-11 w-full items-center justify-center rounded-lg bg-yellow-400 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+              :disabled="loading">
+              {{ loading ? 'Đang xử lý...' : (mode === 'login' ? 'Đăng nhập' : 'Đăng ký') }}
+            </button>
+
+            <p v-if="error" class="mt-3 rounded-lg bg-red-500/12 p-3 text-center text-sm text-red-300">
+              {{ error }}
+            </p>
+
+            <p v-if="success" class="mt-3 flex items-center justify-center gap-2 rounded-lg bg-green-500/12 p-3 text-center text-sm font-semibold text-green-300">
+              <Check class="size-4" />
+              {{ success }}
+            </p>
+          </form>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.auth-modal-enter-active,
+.auth-modal-leave-active {
+  transition: opacity 0.18s ease;
+}
+
+.auth-modal-enter-from,
+.auth-modal-leave-to {
+  opacity: 0;
+}
+</style>

app/composables/useAuth.ts

@@ -0,0 +1,23 @@
+export function useAuth() {
+  const user = useState<any>('auth-user', () => null)
+  const loading = useState('auth-loading', () => true)
+
+  async function fetchUser() {
+    try {
+      loading.value = true
+      const data = await $fetch('/api/auth/me')
+      user.value = data
+    } catch {
+      user.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function logout() {
+    await $fetch('/api/auth/logout', { method: 'POST' })
+    user.value = null
+  }
+
+  return { user, loading, fetchUser, logout }
+}

app/layouts/admin.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  BarChart3,
   Film,
   Home,
   LogOut,
@@ -11,8 +10,13 @@ import {
 } from 'lucide-vue-next'
 
 const route = useRoute()
+const router = useRouter()
 const sidebarOpen = ref(false)
 
+const { data: user } = await useFetch('/api/auth/me', {
+  headers: useRequestHeaders(['cookie']),
+})
+
 const navItems = [
   { label: 'Dashboard', icon: Home, to: '/admin' },
   { label: 'Phim', icon: Film, to: '/admin/phim' },
@@ -28,6 +32,14 @@ function isActive(to: string) {
 function closeSidebar() {
   sidebarOpen.value = false
 }
+
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await navigateTo('/admin/login')
+}
+
+const displayName = computed(() => user.value?.name || user.value?.email?.split('@')[0] || 'Admin')
+const displayInitial = computed(() => displayName.value.charAt(0).toUpperCase())
 </script>
 
 <template>
@@ -59,12 +71,18 @@ function closeSidebar() {
         </NuxtLink>
       </nav>
 
-      <div class="absolute inset-x-0 bottom-0 border-t border-white/10 p-4">
+      <div class="absolute inset-x-0 bottom-0 space-y-1 border-t border-white/10 p-4">
         <NuxtLink to="/"
           class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-slate-300 transition hover:bg-white/5 hover:text-white">
           <Home class="size-5" />
           Về trang chủ
         </NuxtLink>
+        <button type="button"
+          class="flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold text-red-400 transition hover:bg-red-400/10"
+          @click="handleLogout">
+          <LogOut class="size-5" />
+          Đăng xuất
+        </button>
       </div>
     </aside>
 
@@ -77,14 +95,12 @@ function closeSidebar() {
         </button>
 
         <div class="ml-auto flex items-center gap-3">
-          <div class="flex items-center gap-3">
-            <div class="grid size-9 place-items-center rounded-full bg-yellow-400/10">
-              <span class="text-sm font-black text-yellow-400">A</span>
-            </div>
-            <div class="hidden sm:block">
-              <p class="text-sm font-semibold text-white">Admin</p>
-              <p class="text-xs text-slate-400">Administrator</p>
-            </div>
+          <div class="grid size-9 place-items-center rounded-full bg-yellow-400/10">
+            <span class="text-sm font-black text-yellow-400">{{ displayInitial }}</span>
+          </div>
+          <div class="hidden sm:block">
+            <p class="text-sm font-semibold text-white">{{ displayName }}</p>
+            <p class="text-xs capitalize text-slate-400">{{ user?.role || 'admin' }}</p>
           </div>
         </div>
       </header>

app/middleware/admin.global.ts

@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (!to.path.startsWith('/admin')) return
+  if (to.path === '/admin/login') return
+
+  const { data: user, error } = await useFetch('/api/auth/me', {
+    headers: useRequestHeaders(['cookie']),
+  })
+
+  if (error.value?.statusCode === 401 || !user.value) {
+    return navigateTo('/admin/login')
+  }
+
+  if (user.value.role !== 'admin') {
+    return navigateTo('/')
+  }
+})

app/pages/admin/login.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Eye, EyeOff, LockKeyhole, LogIn, Mail } from 'lucide-vue-next'
+
+definePageMeta({
+  layout: false,
+  middleware: [],
+})
+
+useHead({
+  title: 'Đăng nhập Admin - CineK',
+})
+
+const { data: currentUser } = await useFetch('/api/auth/me', {
+  headers: useRequestHeaders(['cookie']),
+})
+
+if (currentUser.value?.role === 'admin') {
+  await navigateTo('/admin')
+}
+
+const email = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+const showPassword = ref(false)
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+  try {
+    const { data } = await useFetch('/api/auth/login', {
+      method: 'POST',
+      body: { email: email.value, password: password.value },
+    })
+
+    if (data.value?.user?.role === 'admin') {
+      await navigateTo('/admin')
+    } else {
+      error.value = 'Tài khoản không có quyền admin'
+    }
+  } catch (err: any) {
+    error.value = err?.data?.message || err?.message || 'Đăng nhập thất bại'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-slate-950 p-4">
+    <div class="w-full max-w-md">
+      <div class="mb-8 text-center">
+        <div class="mb-4 inline-flex items-center gap-2">
+          <div class="grid size-10 place-items-center rounded-xl bg-yellow-400">
+            <span class="text-lg font-black text-slate-950">C</span>
+          </div>
+          <span class="text-2xl font-black text-white">CineK Admin</span>
+        </div>
+        <p class="text-sm text-slate-400">Đăng nhập để quản lý hệ thống</p>
+      </div>
+
+      <div class="rounded-xl border border-white/10 bg-slate-900/50 p-6">
+        <form @submit.prevent="handleLogin">
+          <div class="space-y-4">
+            <div>
+              <label class="mb-2 block text-sm font-semibold text-white">Email</label>
+              <div class="relative">
+                <Mail class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+                <input v-model="email" type="email" required placeholder="admin@cinek.vn"
+                  class="h-11 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+              </div>
+            </div>
+
+            <div>
+              <label class="mb-2 block text-sm font-semibold text-white">Mật khẩu</label>
+              <div class="relative">
+                <LockKeyhole class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
+                <input v-model="password" :type="showPassword ? 'text' : 'password'" required minlength="6"
+                  placeholder="Nhập mật khẩu"
+                  class="h-11 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-10 text-sm text-white placeholder:text-slate-500 outline-none focus:border-yellow-400/50">
+                <button type="button"
+                  class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-white"
+                  @click="showPassword = !showPassword">
+                  <EyeOff v-if="showPassword" class="size-4" />
+                  <Eye v-else class="size-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <button type="submit"
+            class="mt-6 inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-yellow-400 text-sm font-black text-slate-950 transition hover:bg-yellow-300 disabled:opacity-50"
+            :disabled="loading">
+            <LogIn class="size-4" />
+            {{ loading ? 'Đang đăng nhập...' : 'Đăng nhập' }}
+          </button>
+
+          <p v-if="error" class="mt-4 rounded-lg bg-red-500/12 p-3 text-center text-sm text-red-300">
+            {{ error }}
+          </p>
+        </form>
+      </div>
+
+      <p class="mt-6 text-center text-xs text-slate-500">
+        Chỉ tài khoản admin mới có quyền truy cập.
+      </p>
+    </div>
+  </div>
+</template>

app/pages/admin/thanh-vien.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Edit, Search, Trash2 } from 'lucide-vue-next'
+import { Edit, Mail, Search, Trash2, ToggleLeft, ToggleRight, UserRound } from 'lucide-vue-next'
 
 definePageMeta({
   layout: 'admin',
@@ -17,32 +17,52 @@ let searchTimeout: ReturnType<typeof setTimeout> | undefined
 watch(searchInput, (val) => {
   clearTimeout(searchTimeout)
   searchTimeout = setTimeout(() => {
-    debouncedKeyword.value = val.trim().toLowerCase()
+    debouncedKeyword.value = val.trim()
   }, 300)
 })
 
-const allUsers = [
-  { id: 1, name: 'Nguyễn Văn A', email: 'nguyenvana@example.com', role: 'admin', joined: '2024-01-01', status: 'active' },
-  { id: 2, name: 'Trần Thị B', email: 'tranthib@example.com', role: 'user', joined: '2024-01-05', status: 'active' },
-  { id: 3, name: 'Lê Văn C', email: 'levanc@example.com', role: 'user', joined: '2024-01-10', status: 'active' },
-  { id: 4, name: 'Phạm Thị D', email: 'phamthid@example.com', role: 'user', joined: '2024-01-12', status: 'inactive' },
-  { id: 5, name: 'Hoàng Văn E', email: 'hoangvane@example.com', role: 'moderator', joined: '2024-01-15', status: 'active' },
-]
-
-const filteredUsers = computed(() => {
-  if (!debouncedKeyword.value) return allUsers
-  const kw = debouncedKeyword.value
-  return allUsers.filter((u) =>
-    u.name.toLowerCase().includes(kw) || u.email.toLowerCase().includes(kw),
-  )
+const { data, refresh } = await useFetch('/api/admin/thanh-vien', {
+  query: computed(() => ({
+    keyword: debouncedKeyword.value,
+  })),
 })
+
+const { data: currentUser } = await useFetch('/api/auth/me')
+
+async function toggleActive(member: any) {
+  await $fetch(`/api/admin/thanh-vien/${member.id}`, {
+    method: 'PATCH',
+    body: { active: !member.active },
+  })
+  await refresh()
+}
+
+async function changeRole(member: any, role: string) {
+  await $fetch(`/api/admin/thanh-vien/${member.id}`, {
+    method: 'PATCH',
+    body: { role },
+  })
+  await refresh()
+}
+
+async function deleteMember(member: any) {
+  if (!confirm(`Xoá thành viên "${member.name || member.email}"?`)) return
+  try {
+    await $fetch(`/api/admin/thanh-vien/${member.id}`, { method: 'DELETE' })
+    await refresh()
+  } catch (err: any) {
+    alert(err?.data?.message || 'Xoá thất bại')
+  }
+}
+
+const members = computed(() => data.value?.items || [])
 </script>
 
 <template>
   <div>
     <div class="mb-6">
       <h1 class="text-2xl font-black text-white">Quản lý thành viên</h1>
-      <p class="mt-1 text-sm text-slate-400">Quản lý tài khoản thành viên CineK</p>
+      <p class="mt-1 text-sm text-slate-400">Quản lý tài khoản thành viên CineK ({{ data?.total || 0 }} thành viên)</p>
     </div>
 
     <div class="rounded-xl border border-white/10 bg-slate-900/50">
@@ -67,45 +87,48 @@ const filteredUsers = computed(() => {
             </tr>
           </thead>
           <tbody class="divide-y divide-white/5">
-            <tr v-for="user in filteredUsers" :key="user.id" class="transition hover:bg-white/5">
-              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ filteredUsers.indexOf(user) + 1 }}</td>
+            <tr v-for="member in members" :key="member.id" class="transition hover:bg-white/5">
+              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ members.indexOf(member) + 1 }}</td>
               <td class="px-4 py-3 text-center">
                 <div class="min-w-0">
-                  <p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
-                  <p class="truncate text-xs text-slate-400">{{ user.email }}</p>
+                  <p class="truncate text-sm font-semibold text-white">{{ member.name || '—' }}</p>
+                  <p class="truncate text-xs text-slate-400">{{ member.email }}</p>
                 </div>
               </td>
               <td class="px-4 py-3 text-center">
-                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
+                <select :value="member.role"
+                  class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-white outline-none"
                   :class="{
-                    'bg-red-400/10 text-red-400': user.role === 'admin',
-                    'bg-blue-400/10 text-blue-400': user.role === 'moderator',
-                    'bg-slate-400/10 text-slate-400': user.role === 'user',
-                  }">
-                  {{ user.role === 'admin' ? 'Admin' : user.role === 'moderator' ? 'Moderator' : 'User' }}
-                </span>
+                    'text-red-400': member.role === 'admin',
+                    'text-blue-400': member.role === 'moderator',
+                    'text-slate-400': member.role === 'user',
+                  }"
+                  @change="changeRole(member, ($event.target as HTMLSelectElement).value)">
+                  <option value="user" class="bg-slate-900">User</option>
+                  <option value="moderator" class="bg-slate-900">Moderator</option>
+                  <option value="admin" class="bg-slate-900">Admin</option>
+                </select>
               </td>
               <td class="px-4 py-3 text-center">
-                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
-                  :class="user.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
-                  {{ user.status === 'active' ? 'Hoạt động' : 'Khóa' }}
-                </span>
+                <AdminToggle :model-value="member.active"
+                  @update:model-value="(val: boolean) => { member.active = val; toggleActive(member) }" />
+              </td>
+              <td class="px-4 py-3 text-center text-sm text-slate-400">
+                {{ new Date(member.createdAt).toLocaleDateString('vi-VN') }}
               </td>
-              <td class="px-4 py-3 text-center text-sm text-slate-400">{{ user.joined }}</td>
               <td class="px-4 py-3 text-center">
                 <div class="flex items-center justify-center gap-1">
                   <button type="button"
-                    class="grid size-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white">
-                    <Edit class="size-4" />
-                  </button>
-                  <button type="button"
-                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10">
+                    class="grid size-8 place-items-center rounded-lg text-red-400 transition hover:bg-red-400/10"
+                    :disabled="currentUser?.id === member.id"
+                    :title="currentUser?.id === member.id ? 'Không thể xoá chính mình' : 'Xoá thành viên'"
+                    @click="deleteMember(member)">
                     <Trash2 class="size-4" />
                   </button>
                 </div>
               </td>
             </tr>
-            <tr v-if="!filteredUsers.length">
+            <tr v-if="!members.length">
               <td colspan="6" class="px-4 py-12 text-center text-sm text-slate-400">
                 {{ debouncedKeyword ? 'Không tìm thấy thành viên nào.' : 'Chưa có thành viên nào.' }}
               </td>
@@ -115,7 +138,7 @@ const filteredUsers = computed(() => {
       </div>
 
       <div class="flex items-center justify-between border-t border-white/10 p-4">
-        <p class="text-sm text-slate-400">Hiển thị {{ filteredUsers.length }} / {{ allUsers.length }} thành viên</p>
+        <p class="text-sm text-slate-400">Hiển thị {{ members.length }} / {{ data?.total || 0 }} thành viên</p>
       </div>
     </div>
   </div>

app/pages/thanh-vien.vue

@@ -1,12 +1,27 @@
 <script setup lang="ts">
-import { Clock3, Heart } from 'lucide-vue-next'
+import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
+
+const authOpen = ref(false)
+const { user, logout: doLogout, fetchUser } = useAuth()
+await fetchUser()
+
+const memberName = computed(() => {
+  if (!user.value) return 'Thành viên'
+  return user.value.name || user.value.email?.split('@')[0] || 'Thành viên'
+})
+
+const memberInitial = computed(() => memberName.value.charAt(0).toUpperCase())
+
+async function handleLogout() {
+  await doLogout()
+}
 
 useHead({
-  title: 'Thư viện - CineK',
+  title: 'Thành viên - CineK',
   meta: [
     {
       name: 'description',
-      content: 'Quản lý lịch sử xem, danh sách yêu thích và các phim muốn xem sau trên CineK.',
+      content: 'Quản lý tài khoản CineK, lịch sử xem và danh sách yêu thích.',
     },
   ],
 })
@@ -18,32 +33,74 @@ useHead({
 
     <section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
       <div class="mb-6">
-        <p class="text-sm font-black uppercase text-yellow-300">Thư viện</p>
-        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Của bạn</h1>
+        <p class="text-sm font-black uppercase text-yellow-300">Tài khoản</p>
+        <h1 class="mt-2 text-3xl font-black sm:text-4xl">Thành viên</h1>
       </div>
 
-      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
-        <NuxtLink to="/lich-su"
-          class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
-          <span class="grid size-10 place-items-center rounded-md bg-yellow-300 text-slate-950">
-            <Clock3 class="size-5" />
-          </span>
-          <span>
-            <span class="block font-black">Lịch sử xem</span>
-            <span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
-          </span>
-        </NuxtLink>
-        <NuxtLink to="/yeu-thich"
-          class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
-          <span class="grid size-10 place-items-center rounded-md bg-white/10 text-yellow-300">
-            <Heart class="size-5 fill-current" />
-          </span>
-          <span>
-            <span class="block font-black">Yêu thích</span>
-            <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
-          </span>
-        </NuxtLink>
+      <div v-if="user" class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
+        <section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
+          <div class="flex flex-col gap-5 sm:flex-row sm:items-center">
+            <div class="grid size-24 shrink-0 place-items-center rounded-full bg-yellow-400/10 ring-4 ring-yellow-300/30">
+              <span class="text-3xl font-black text-yellow-400">{{ memberInitial }}</span>
+            </div>
+            <div class="min-w-0">
+              <h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
+              <p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
+                <Mail class="size-4 text-yellow-300" />
+                {{ user.email }}
+              </p>
+              <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
+                Tài khoản CineK của bạn. Quản lý lịch sử xem và các phim yêu thích.
+              </p>
+              <button type="button"
+                class="mt-4 inline-flex h-9 items-center gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-4 text-sm font-semibold text-red-400 transition hover:bg-red-400/20"
+                @click="handleLogout">
+                Đăng xuất
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
+          <NuxtLink to="/lich-su"
+            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+            <span class="grid size-10 place-items-center rounded-md bg-yellow-300 text-slate-950">
+              <Clock3 class="size-5" />
+            </span>
+            <span>
+              <span class="block font-black">Lịch sử xem</span>
+              <span class="text-sm text-slate-400">Xem tiếp phim đang dở</span>
+            </span>
+          </NuxtLink>
+          <NuxtLink to="/yeu-thich"
+            class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
+            <span class="grid size-10 place-items-center rounded-md bg-white/10 text-yellow-300">
+              <Heart class="size-5 fill-current" />
+            </span>
+            <span>
+              <span class="block font-black">Yêu thích</span>
+              <span class="text-sm text-slate-400">Phim bạn đã lưu</span>
+            </span>
+          </NuxtLink>
+        </aside>
+      </div>
+
+      <div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
+        <UserRound class="size-10 text-yellow-300" />
+        <h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
+        <p class="mt-2 text-sm leading-6 text-slate-300">
+          Đăng nhập hoặc đăng ký tài khoản để trải nghiệm đầy đủ các tính năng trên CineK.
+        </p>
+        <div class="mt-4">
+          <button type="button"
+            class="inline-flex h-10 items-center justify-center rounded-lg bg-yellow-300 px-5 text-sm font-black text-slate-950 transition hover:bg-white"
+            @click="authOpen = true">
+            Đăng nhập / Đăng ký
+          </button>
+        </div>
       </div>
     </section>
+
+    <AuthModal v-model="authOpen" />
   </main>
 </template>