mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 16:47:46 +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
@@ -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