mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 16:07:47 +00:00
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.
This commit is contained in:
ngthanhvu
+100
-19
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user