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/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>