mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 17:07:46 +00:00
Refactor: Remove Supabase authentication and related code
- Removed Supabase authentication logic from xem/[slug].vue and yeu-thich.vue. - Updated favorite and watch later messages to be device-specific. - Removed unused user state and authentication initialization. - Deleted supabase.ts plugin file and related configurations. - Updated nuxt.config.ts to remove Supabase runtime configuration. - Removed Supabase dependencies from package.json and package-lock.json. - Adjusted Dockerfile for development environment. - Added admin layout and pages for managing settings, movies, and users. - Implemented admin dashboard with statistics and recent activities. - Created movie and user management interfaces with search functionality.
This commit is contained in:
ngthanhvu
+10
-3
@@ -1,7 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const isAdmin = computed(() => route.path.startsWith('/admin'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtRouteAnnouncer />
|
||||
<NuxtLoadingIndicator color="#facc15" :height="2" />
|
||||
<NuxtPage />
|
||||
<AppFooter />
|
||||
<ScrollToTop />
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<AppFooter v-if="!isAdmin" />
|
||||
<ScrollToTop v-if="!isAdmin" />
|
||||
</template>
|
||||
|
||||
+10
-303
@@ -1,13 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Bell,
|
||||
Chrome,
|
||||
Heart,
|
||||
History,
|
||||
Loader2,
|
||||
LockKeyhole,
|
||||
LogOut,
|
||||
Mail,
|
||||
Menu,
|
||||
Search,
|
||||
User,
|
||||
@@ -17,28 +11,9 @@ import {
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const {
|
||||
user,
|
||||
loading: authLoading,
|
||||
initAuth,
|
||||
signInWithPassword,
|
||||
signUpWithPassword,
|
||||
signInWithGoogle,
|
||||
resetPassword,
|
||||
signOut,
|
||||
} = useSupabaseAuth()
|
||||
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
|
||||
const mobileMenuOpen = ref(false)
|
||||
const loginOpen = ref(false)
|
||||
const memberMenuOpen = ref(false)
|
||||
const authMode = ref<'login' | 'register'>('login')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const authMessage = ref('')
|
||||
const authError = ref('')
|
||||
const submittingAuth = ref(false)
|
||||
const submittingProvider = ref(false)
|
||||
const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Trang chủ', to: '/' },
|
||||
@@ -48,22 +23,7 @@ const navItems = [
|
||||
{ label: 'Phim lẻ', to: '/phim?type=single' },
|
||||
]
|
||||
|
||||
const memberName = computed(() => {
|
||||
const metadata = user.value?.user_metadata || {}
|
||||
const name = metadata.name || metadata.full_name || metadata.user_name
|
||||
if (typeof name === 'string' && name.trim()) return name.trim()
|
||||
return user.value?.email?.split('@')[0] || 'Thành viên'
|
||||
})
|
||||
|
||||
const memberAvatar = computed(() => {
|
||||
const metadata = user.value?.user_metadata || {}
|
||||
return typeof metadata.avatar_url === 'string' && metadata.avatar_url
|
||||
? metadata.avatar_url
|
||||
: defaultAvatar
|
||||
})
|
||||
|
||||
const memberMenuItems = [
|
||||
{ label: 'Trang cá nhân', icon: UserRound, to: '/thanh-vien' },
|
||||
{ label: 'Yêu thích', icon: Heart, to: '/yeu-thich' },
|
||||
{ label: 'Lịch sử', icon: History, to: '/lich-su' },
|
||||
]
|
||||
@@ -85,96 +45,14 @@ function closeMobileMenu() {
|
||||
mobileMenuOpen.value = false
|
||||
}
|
||||
|
||||
function openLogin() {
|
||||
authMessage.value = ''
|
||||
authError.value = ''
|
||||
email.value = user.value?.email || ''
|
||||
password.value = ''
|
||||
authMode.value = 'login'
|
||||
loginOpen.value = true
|
||||
}
|
||||
|
||||
function handleMemberClick() {
|
||||
if (!user.value) {
|
||||
openLogin()
|
||||
return
|
||||
}
|
||||
|
||||
memberMenuOpen.value = !memberMenuOpen.value
|
||||
}
|
||||
|
||||
async function submitLogin() {
|
||||
const trimmedEmail = email.value.trim()
|
||||
if (!trimmedEmail || !password.value) return
|
||||
|
||||
submittingAuth.value = true
|
||||
authMessage.value = ''
|
||||
authError.value = ''
|
||||
|
||||
const { error } = authMode.value === 'login'
|
||||
? await signInWithPassword(trimmedEmail, password.value)
|
||||
: await signUpWithPassword(trimmedEmail, password.value)
|
||||
|
||||
submittingAuth.value = false
|
||||
if (error) {
|
||||
authError.value = error.message
|
||||
return
|
||||
}
|
||||
|
||||
authMessage.value = authMode.value === 'login'
|
||||
? 'Đăng nhập thành công.'
|
||||
: 'Đăng ký thành công. Nếu Supabase yêu cầu xác nhận, bạn mở email để xác nhận nhé.'
|
||||
|
||||
if (authMode.value === 'login') loginOpen.value = false
|
||||
}
|
||||
|
||||
async function handleGoogleLogin() {
|
||||
submittingProvider.value = true
|
||||
authError.value = ''
|
||||
const { error } = await signInWithGoogle()
|
||||
submittingProvider.value = false
|
||||
if (error) authError.value = error.message
|
||||
}
|
||||
|
||||
async function handleResetPassword() {
|
||||
const trimmedEmail = email.value.trim()
|
||||
if (!trimmedEmail) {
|
||||
authError.value = 'Nhập email trước để lấy lại mật khẩu nhé.'
|
||||
return
|
||||
}
|
||||
|
||||
submittingAuth.value = true
|
||||
authMessage.value = ''
|
||||
authError.value = ''
|
||||
const { error } = await resetPassword(trimmedEmail)
|
||||
submittingAuth.value = false
|
||||
|
||||
if (error) {
|
||||
authError.value = error.message
|
||||
return
|
||||
}
|
||||
|
||||
authMessage.value = 'Đã gửi email đặt lại mật khẩu.'
|
||||
}
|
||||
|
||||
async function handleSignOut() {
|
||||
await signOut()
|
||||
loginOpen.value = false
|
||||
memberMenuOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initAuth()
|
||||
})
|
||||
|
||||
watch(() => route.path, () => {
|
||||
closeMobileMenu()
|
||||
memberMenuOpen.value = false
|
||||
})
|
||||
|
||||
watch(user, (currentUser) => {
|
||||
if (currentUser) loginOpen.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -200,39 +78,21 @@ watch(user, (currentUser) => {
|
||||
|
||||
<div class="group/member relative hidden shrink-0 items-center gap-2.5 md:flex"
|
||||
@mouseenter="memberMenuOpen = true" @mouseleave="memberMenuOpen = false">
|
||||
<button v-if="user" type="button"
|
||||
class="grid size-9 cursor-pointer place-items-center rounded-full bg-white/10 text-white transition hover:bg-white/16"
|
||||
aria-label="Thông báo">
|
||||
<Bell class="size-4 fill-current" />
|
||||
</button>
|
||||
|
||||
<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="user ? 'Tài khoản thành viên' : 'Đăng nhập thành viên'" @click="handleMemberClick">
|
||||
<Loader2 v-if="authLoading" class="mx-1 size-4 animate-spin" />
|
||||
<template v-else-if="user">
|
||||
<img :src="memberAvatar" :alt="memberName"
|
||||
class="size-7 rounded-full object-cover ring-2 ring-yellow-200/80">
|
||||
</template>
|
||||
<User v-else class="ml-1 size-4 fill-current" />
|
||||
<span class="max-w-24 truncate">{{ user ? memberName : 'Thành viên' }}</span>
|
||||
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>
|
||||
</button>
|
||||
|
||||
<Transition name="member-menu">
|
||||
<div v-if="user && memberMenuOpen"
|
||||
<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">
|
||||
<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 }}
|
||||
</NuxtLink>
|
||||
<div class="my-2 border-t border-white/10" />
|
||||
<button type="button"
|
||||
class="flex h-12 w-full cursor-pointer items-center gap-3 px-5 text-left font-black text-yellow-300 transition hover:bg-white/8 hover:text-white"
|
||||
@click="handleSignOut">
|
||||
<LogOut class="size-4 shrink-0" />
|
||||
Đăng xuất
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
@@ -265,130 +125,12 @@ watch(user, (currentUser) => {
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
<div class="border-t border-white/10 p-4">
|
||||
<button type="button"
|
||||
class="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-100"
|
||||
@click="handleMemberClick">
|
||||
<img v-if="user" :src="memberAvatar" :alt="memberName" class="size-7 rounded-full object-cover">
|
||||
<User v-else class="size-4 fill-current" />
|
||||
<span>{{ user ? memberName : 'Đăng nhập thành viên' }}</span>
|
||||
</button>
|
||||
<div v-if="user" class="mt-3 overflow-hidden rounded-lg border border-white/10 bg-white/5">
|
||||
<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">
|
||||
<component :is="item.icon" class="size-4 shrink-0" />
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
<div class="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-yellow-300 transition hover:bg-white/8 hover:text-white"
|
||||
@click="handleSignOut">
|
||||
<LogOut class="size-4 shrink-0" />
|
||||
Đăng xuất
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<Transition name="auth-modal">
|
||||
<div v-if="loginOpen" class="fixed inset-0 z-70 grid place-items-center px-3 py-6">
|
||||
<div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" @click="loginOpen = false" />
|
||||
<div
|
||||
class="relative grid w-full max-w-5xl overflow-hidden rounded-lg border border-white/10 bg-slate-950 text-white shadow-2xl shadow-black/50 md:grid-cols-[1fr_1fr]">
|
||||
<button type="button"
|
||||
class="absolute right-3 top-3 z-10 grid size-9 place-items-center rounded-full text-white transition hover:bg-white/10"
|
||||
aria-label="Đóng đăng nhập" @click="loginOpen = false">
|
||||
<X class="size-5" />
|
||||
</button>
|
||||
|
||||
<div class="auth-poster-panel hidden min-h-128 items-end p-8 md:flex">
|
||||
<div>
|
||||
<AppLogo />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-950 px-5 py-10 sm:px-10 md:px-16 md:py-16">
|
||||
<div v-if="user">
|
||||
<p class="text-sm font-bold text-yellow-300">Thành viên</p>
|
||||
<h2 class="mt-2 text-2xl font-black">Tài khoản của bạn</h2>
|
||||
<p class="mt-6 rounded-md bg-white/8 px-4 py-3 text-sm font-semibold text-slate-100">{{ user.email }}
|
||||
</p>
|
||||
<button type="button"
|
||||
class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white"
|
||||
@click="handleSignOut">
|
||||
<LogOut class="size-4" />
|
||||
Đăng xuất
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form v-else @submit.prevent="submitLogin">
|
||||
<h2 class="text-2xl font-black">{{ authMode === 'login' ? 'Đăng nhập' : 'Đăng ký' }}</h2>
|
||||
<p class="mt-5 text-sm text-slate-300">
|
||||
<template v-if="authMode === 'login'">
|
||||
Nếu bạn chưa có tài khoản,
|
||||
<button type="button" class="font-black text-yellow-300 hover:text-white"
|
||||
@click="authMode = 'register'; authError = ''; authMessage = ''">
|
||||
đăng ký ngay
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
Nếu bạn đã có tài khoản,
|
||||
<button type="button" class="font-black text-yellow-300 hover:text-white"
|
||||
@click="authMode = 'login'; authError = ''; authMessage = ''">
|
||||
đăng nhập ngay
|
||||
</button>
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<div class="mt-8 space-y-3">
|
||||
<div class="flex h-12 items-center rounded-md border border-white/10 bg-white/8 px-4">
|
||||
<Mail class="mr-3 size-4 shrink-0 text-slate-400" />
|
||||
<input v-model="email" type="email" required placeholder="Email"
|
||||
class="h-full w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
|
||||
</div>
|
||||
<div class="flex h-12 items-center rounded-md border border-white/10 bg-white/8 px-4">
|
||||
<LockKeyhole class="mr-3 size-4 shrink-0 text-slate-400" />
|
||||
<input v-model="password" type="password" required minlength="6" placeholder="Mật khẩu"
|
||||
class="h-full w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button"
|
||||
class="mt-5 inline-flex h-12 w-full items-center justify-center gap-2 rounded-md border border-white/12 bg-white/8 text-sm font-black text-white transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-70"
|
||||
:disabled="submittingProvider" @click="handleGoogleLogin">
|
||||
<Loader2 v-if="submittingProvider" class="size-4 animate-spin" />
|
||||
<Chrome v-else class="size-4" />
|
||||
Tiếp tục với Google
|
||||
</button>
|
||||
|
||||
<div class="my-5 flex items-center gap-3 text-xs font-semibold text-slate-400">
|
||||
<span class="h-px flex-1 bg-white/10" />
|
||||
hoặc
|
||||
<span class="h-px flex-1 bg-white/10" />
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-yellow-300 text-sm font-black text-slate-950 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-70"
|
||||
:disabled="submittingAuth">
|
||||
<Loader2 v-if="submittingAuth" class="size-4 animate-spin" />
|
||||
<User v-else class="size-4 fill-current" />
|
||||
{{ authMode === 'login' ? 'Đăng nhập' : 'Đăng ký' }}
|
||||
</button>
|
||||
|
||||
<button v-if="authMode === 'login'" type="button"
|
||||
class="mt-7 block w-full text-center text-sm font-bold text-white hover:text-yellow-300"
|
||||
@click="handleResetPassword">
|
||||
Quên mật khẩu?
|
||||
</button>
|
||||
|
||||
<p v-if="authMessage" class="mt-4 rounded-md bg-yellow-400/12 px-3 py-2 text-sm text-yellow-100">
|
||||
{{ authMessage }}
|
||||
</p>
|
||||
<p v-if="authError" class="mt-4 rounded-md bg-red-500/12 px-3 py-2 text-sm text-red-100">
|
||||
{{ authError }}
|
||||
</p>
|
||||
</form>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -418,16 +160,6 @@ watch(user, (currentUser) => {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.auth-modal-enter-active,
|
||||
.auth-modal-leave-active {
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.auth-modal-enter-from,
|
||||
.auth-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.member-menu-enter-active,
|
||||
.member-menu-leave-active {
|
||||
transition: opacity 0.16s ease, transform 0.16s ease;
|
||||
@@ -438,29 +170,4 @@ watch(user, (currentUser) => {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.35rem);
|
||||
}
|
||||
|
||||
.auth-poster-panel {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.92)),
|
||||
linear-gradient(135deg, rgba(234, 179, 8, 0.14) 0 18%, transparent 18% 100%),
|
||||
radial-gradient(circle at 22% 18%, rgba(250, 204, 21, 0.22), transparent 8rem),
|
||||
linear-gradient(120deg, #422006 0%, #0f172a 54%, #020617 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-poster-panel::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(115deg, transparent 0 10%, rgba(234, 179, 8, 0.16) 10% 10.6%, transparent 10.6% 100%),
|
||||
repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.06) 0 7.5rem, transparent 7.5rem 8rem),
|
||||
repeating-linear-gradient(15deg, rgba(250, 204, 21, 0.1) 0 10rem, transparent 10rem 10.6rem);
|
||||
content: "";
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.auth-poster-panel>div {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,31 +56,15 @@ function legacyKeyFor(key: string) {
|
||||
}
|
||||
|
||||
export function useMovieLibrary() {
|
||||
const { $supabase } = useNuxtApp()
|
||||
const { user } = useSupabaseAuth()
|
||||
|
||||
async function loadItems(key: string, table: string, limit = 30) {
|
||||
async function loadItems(key: string, limit = 30) {
|
||||
const localItems = readLocalItems(key, legacyKeyFor(key))
|
||||
|
||||
if (user.value) {
|
||||
const { data, error } = await $supabase
|
||||
.from(table)
|
||||
.select('source, slug, name, origin_name, thumb, poster, updated_at')
|
||||
.eq('user_id', user.value.id)
|
||||
.order('updated_at', { ascending: false })
|
||||
.limit(limit)
|
||||
|
||||
if (!error && data) {
|
||||
return data.map(normalizeLibraryItem).filter(Boolean) as LibraryMovieItem[]
|
||||
}
|
||||
}
|
||||
|
||||
return localItems
|
||||
.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
|
||||
.slice(0, limit)
|
||||
}
|
||||
|
||||
async function saveItem(key: string, table: string, item: LibraryMovieItem) {
|
||||
async function saveItem(key: string, item: LibraryMovieItem) {
|
||||
const normalizedItem = normalizeLibraryItem({
|
||||
...item,
|
||||
updatedAt: Date.now(),
|
||||
@@ -95,63 +79,25 @@ export function useMovieLibrary() {
|
||||
|
||||
writeLocalItems(key, nextItems)
|
||||
|
||||
if (user.value) {
|
||||
await $supabase
|
||||
.from(table)
|
||||
.upsert({
|
||||
user_id: user.value.id,
|
||||
source: normalizedItem.source,
|
||||
slug: normalizedItem.slug,
|
||||
name: normalizedItem.name,
|
||||
origin_name: normalizedItem.originName || null,
|
||||
thumb: normalizedItem.thumb || null,
|
||||
poster: normalizedItem.poster || null,
|
||||
updated_at: new Date(normalizedItem.updatedAt || Date.now()).toISOString(),
|
||||
}, {
|
||||
onConflict: 'user_id,source,slug',
|
||||
})
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
async function removeItem(key: string, table: string, item: LibraryMovieItem) {
|
||||
async function removeItem(key: string, item: LibraryMovieItem) {
|
||||
const nextItems = readLocalItems(key, legacyKeyFor(key))
|
||||
.filter((savedItem) => !(savedItem.slug === item.slug && savedItem.source === item.source))
|
||||
writeLocalItems(key, nextItems)
|
||||
|
||||
if (user.value) {
|
||||
await $supabase
|
||||
.from(table)
|
||||
.delete()
|
||||
.eq('user_id', user.value.id)
|
||||
.eq('source', item.source)
|
||||
.eq('slug', item.slug)
|
||||
}
|
||||
}
|
||||
|
||||
async function isSaved(key: string, table: string, item: LibraryMovieItem) {
|
||||
const localSaved = readLocalItems(key, legacyKeyFor(key))
|
||||
async function isSaved(key: string, item: LibraryMovieItem) {
|
||||
return readLocalItems(key, legacyKeyFor(key))
|
||||
.some((savedItem) => savedItem.slug === item.slug && savedItem.source === item.source)
|
||||
|
||||
if (!user.value) return localSaved
|
||||
|
||||
const { data, error } = await $supabase
|
||||
.from(table)
|
||||
.select('slug')
|
||||
.eq('user_id', user.value.id)
|
||||
.eq('source', item.source)
|
||||
.eq('slug', item.slug)
|
||||
.maybeSingle()
|
||||
|
||||
return error ? localSaved : Boolean(data)
|
||||
}
|
||||
|
||||
return {
|
||||
loadFavorites: (limit?: number) => loadItems(favoriteKey, 'favorite_movies', limit),
|
||||
saveFavorite: (item: LibraryMovieItem) => saveItem(favoriteKey, 'favorite_movies', item),
|
||||
removeFavorite: (item: LibraryMovieItem) => removeItem(favoriteKey, 'favorite_movies', item),
|
||||
isFavorite: (item: LibraryMovieItem) => isSaved(favoriteKey, 'favorite_movies', item),
|
||||
saveWatchLater: (item: LibraryMovieItem) => saveItem(watchLaterKey, 'watch_later_movies', item),
|
||||
loadFavorites: (limit?: number) => loadItems(favoriteKey, limit),
|
||||
saveFavorite: (item: LibraryMovieItem) => saveItem(favoriteKey, item),
|
||||
removeFavorite: (item: LibraryMovieItem) => removeItem(favoriteKey, item),
|
||||
isFavorite: (item: LibraryMovieItem) => isSaved(favoriteKey, item),
|
||||
saveWatchLater: (item: LibraryMovieItem) => saveItem(watchLaterKey, item),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
import type { User } from '@supabase/supabase-js'
|
||||
|
||||
let authListenerStarted = false
|
||||
|
||||
export function useSupabaseAuth() {
|
||||
const { $supabase } = useNuxtApp()
|
||||
const user = useState<User | null>('supabase-user', () => null)
|
||||
const loading = useState('supabase-auth-loading', () => false)
|
||||
|
||||
async function initAuth() {
|
||||
if (!import.meta.client || authListenerStarted) return
|
||||
|
||||
authListenerStarted = true
|
||||
loading.value = true
|
||||
|
||||
const { data } = await $supabase.auth.getSession()
|
||||
user.value = data.session?.user ?? null
|
||||
loading.value = false
|
||||
|
||||
$supabase.auth.onAuthStateChange((_event, session) => {
|
||||
user.value = session?.user ?? null
|
||||
})
|
||||
}
|
||||
|
||||
function authRedirectUrl() {
|
||||
const redirectTo = import.meta.client ? window.location.origin : undefined
|
||||
return redirectTo
|
||||
}
|
||||
|
||||
async function signInWithEmail(email: string) {
|
||||
return $supabase.auth.signInWithOtp({
|
||||
email,
|
||||
options: {
|
||||
emailRedirectTo: authRedirectUrl(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function signInWithPassword(email: string, password: string) {
|
||||
return $supabase.auth.signInWithPassword({
|
||||
email,
|
||||
password,
|
||||
})
|
||||
}
|
||||
|
||||
async function signUpWithPassword(email: string, password: string) {
|
||||
return $supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: {
|
||||
emailRedirectTo: authRedirectUrl(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function signInWithGoogle() {
|
||||
return $supabase.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
options: {
|
||||
redirectTo: authRedirectUrl(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function resetPassword(email: string) {
|
||||
return $supabase.auth.resetPasswordForEmail(email, {
|
||||
redirectTo: authRedirectUrl(),
|
||||
})
|
||||
}
|
||||
|
||||
async function signOut() {
|
||||
return $supabase.auth.signOut()
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
loading,
|
||||
initAuth,
|
||||
signInWithEmail,
|
||||
signInWithPassword,
|
||||
signUpWithPassword,
|
||||
signInWithGoogle,
|
||||
resetPassword,
|
||||
signOut,
|
||||
}
|
||||
}
|
||||
@@ -63,49 +63,9 @@ function writeLocalHistory(items: WatchHistoryItem[]) {
|
||||
}
|
||||
|
||||
export function useWatchHistory() {
|
||||
const { $supabase } = useNuxtApp()
|
||||
const { user } = useSupabaseAuth()
|
||||
|
||||
async function loadWatchHistory(limit = 12) {
|
||||
const localItems = readLocalHistory()
|
||||
|
||||
if (user.value) {
|
||||
if (localItems.length) {
|
||||
await $supabase
|
||||
.from('watch_history')
|
||||
.upsert(localItems.slice(0, 20).map((item) => ({
|
||||
user_id: user.value?.id,
|
||||
source: item.source,
|
||||
slug: item.slug,
|
||||
name: item.name,
|
||||
origin_name: item.originName || null,
|
||||
thumb: item.thumb || null,
|
||||
poster: item.poster || null,
|
||||
episode_name: item.episodeName || null,
|
||||
episode_index: item.episodeIndex || 0,
|
||||
server_index: item.serverIndex || 0,
|
||||
progress_seconds: Math.floor(item.progressSeconds || 0),
|
||||
duration_seconds: Math.floor(item.durationSeconds || 0),
|
||||
updated_at: new Date(item.updatedAt || Date.now()).toISOString(),
|
||||
})), {
|
||||
onConflict: 'user_id,source,slug',
|
||||
})
|
||||
}
|
||||
|
||||
const { data, error } = await $supabase
|
||||
.from('watch_history')
|
||||
.select('source, slug, name, origin_name, thumb, poster, episode_name, episode_index, server_index, progress_seconds, duration_seconds, updated_at')
|
||||
.eq('user_id', user.value.id)
|
||||
.order('updated_at', { ascending: false })
|
||||
.limit(limit)
|
||||
|
||||
if (!error && data) {
|
||||
return data
|
||||
.map(normalizeHistoryItem)
|
||||
.filter(Boolean) as WatchHistoryItem[]
|
||||
}
|
||||
}
|
||||
|
||||
return localItems
|
||||
.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
|
||||
.slice(0, limit)
|
||||
@@ -125,28 +85,6 @@ export function useWatchHistory() {
|
||||
].slice(0, 20)
|
||||
|
||||
writeLocalHistory(localItems)
|
||||
|
||||
if (!user.value) return
|
||||
|
||||
await $supabase
|
||||
.from('watch_history')
|
||||
.upsert({
|
||||
user_id: user.value.id,
|
||||
source: normalizedItem.source,
|
||||
slug: normalizedItem.slug,
|
||||
name: normalizedItem.name,
|
||||
origin_name: normalizedItem.originName || null,
|
||||
thumb: normalizedItem.thumb || null,
|
||||
poster: normalizedItem.poster || null,
|
||||
episode_name: normalizedItem.episodeName || null,
|
||||
episode_index: normalizedItem.episodeIndex || 0,
|
||||
server_index: normalizedItem.serverIndex || 0,
|
||||
progress_seconds: Math.floor(normalizedItem.progressSeconds || 0),
|
||||
duration_seconds: Math.floor(normalizedItem.durationSeconds || 0),
|
||||
updated_at: new Date(normalizedItem.updatedAt || Date.now()).toISOString(),
|
||||
}, {
|
||||
onConflict: 'user_id,source,slug',
|
||||
})
|
||||
}
|
||||
|
||||
async function clearWatchHistory() {
|
||||
@@ -154,13 +92,6 @@ export function useWatchHistory() {
|
||||
window.localStorage.removeItem(watchHistoryKey)
|
||||
window.localStorage.removeItem(legacyWatchHistoryKey)
|
||||
}
|
||||
|
||||
if (user.value) {
|
||||
await $supabase
|
||||
.from('watch_history')
|
||||
.delete()
|
||||
.eq('user_id', user.value.id)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
BarChart3,
|
||||
Film,
|
||||
Home,
|
||||
LogOut,
|
||||
Menu,
|
||||
Settings,
|
||||
Users,
|
||||
X,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const route = useRoute()
|
||||
const sidebarOpen = ref(false)
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Dashboard', icon: Home, to: '/admin' },
|
||||
{ label: 'Phim', icon: Film, to: '/admin/phim' },
|
||||
{ label: 'Thành viên', icon: Users, to: '/admin/thanh-vien' },
|
||||
{ label: 'Cài đặt', icon: Settings, to: '/admin/cai-dat' },
|
||||
]
|
||||
|
||||
function isActive(to: string) {
|
||||
if (to === '/admin') return route.path === '/admin'
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-slate-950">
|
||||
<aside
|
||||
class="fixed inset-y-0 left-0 z-40 w-64 transform border-r border-white/10 bg-slate-900 transition-transform lg:translate-x-0"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
|
||||
<div class="flex h-16 items-center justify-between border-b border-white/10 px-4">
|
||||
<NuxtLink to="/admin" class="flex items-center gap-2">
|
||||
<div class="grid size-8 place-items-center rounded-lg bg-yellow-400">
|
||||
<Film class="size-4 text-slate-950" />
|
||||
</div>
|
||||
<span class="text-lg font-black text-white">CineK Admin</span>
|
||||
</NuxtLink>
|
||||
<button type="button" class="grid size-8 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
|
||||
@click="closeSidebar">
|
||||
<X class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="flex flex-col gap-1 p-4">
|
||||
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
|
||||
class="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-semibold transition"
|
||||
:class="isActive(item.to)
|
||||
? 'bg-yellow-400/10 text-yellow-400'
|
||||
: 'text-slate-300 hover:bg-white/5 hover:text-white'">
|
||||
<component :is="item.icon" class="size-5" />
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<div class="absolute inset-x-0 bottom-0 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>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="lg:pl-64">
|
||||
<header
|
||||
class="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-white/10 bg-slate-950/80 px-4 backdrop-blur-xl lg:px-6">
|
||||
<button type="button" class="grid size-10 place-items-center rounded-lg text-white hover:bg-white/10 lg:hidden"
|
||||
@click="sidebarOpen = true">
|
||||
<Menu class="size-5" />
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="p-4 lg:p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<Transition name="sidebar-fade">
|
||||
<div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm lg:hidden"
|
||||
@click="closeSidebar" />
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-fade-enter-active,
|
||||
.sidebar-fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-fade-enter-from,
|
||||
.sidebar-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { Save, Settings as SettingsIcon } from 'lucide-vue-next'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Cài đặt - CineK Admin',
|
||||
})
|
||||
|
||||
const siteName = ref('CineK')
|
||||
const siteDescription = ref('Xem phim Hàn Quốc online với phụ đề Vietsub')
|
||||
const maintenanceMode = ref(false)
|
||||
const allowRegistration = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-black text-white">Cài đặt</h1>
|
||||
<p class="mt-1 text-sm text-slate-400">Quản lý cài đặt hệ thống CineK</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
|
||||
<div class="mb-5 flex items-center gap-3">
|
||||
<div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
|
||||
<SettingsIcon class="size-4 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white">Cài đặt chung</h2>
|
||||
<p class="text-sm text-slate-400">Thông tin cơ bản về website</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-semibold text-white">Tên website</label>
|
||||
<input v-model="siteName" type="text"
|
||||
class="h-10 w-full rounded-lg border border-white/10 bg-white/5 px-4 text-sm text-white outline-none focus:border-yellow-400/50">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-semibold text-white">Mô tả website</label>
|
||||
<textarea v-model="siteDescription" rows="3"
|
||||
class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white outline-none focus:border-yellow-400/50"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
|
||||
<h2 class="mb-5 text-lg font-black text-white">Tùy chọn hệ thống</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-white">Chế độ bảo trì</p>
|
||||
<p class="mt-1 text-xs text-slate-400">Tạm thời tắt website để bảo trì</p>
|
||||
</div>
|
||||
<input v-model="maintenanceMode" type="checkbox"
|
||||
class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
|
||||
</label>
|
||||
|
||||
<label class="flex cursor-pointer items-center justify-between rounded-lg border border-white/5 bg-white/5 p-4 transition hover:border-white/10">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-white">Cho phép đăng ký</p>
|
||||
<p class="mt-1 text-xs text-slate-400">Cho phép người dùng mới đăng ký tài khoản</p>
|
||||
</div>
|
||||
<input v-model="allowRegistration" type="checkbox"
|
||||
class="h-5 w-5 cursor-pointer rounded border-white/20 bg-white/5 text-yellow-400 focus:ring-yellow-400/50">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="button"
|
||||
class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
|
||||
<Save class="size-4" />
|
||||
Lưu thay đổi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import { BarChart3, Film, TrendingUp, Users } from 'lucide-vue-next'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Dashboard - CineK Admin',
|
||||
})
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: 'Tổng phim',
|
||||
value: '1,234',
|
||||
change: '+12%',
|
||||
icon: Film,
|
||||
color: 'yellow',
|
||||
},
|
||||
{
|
||||
label: 'Thành viên',
|
||||
value: '5,678',
|
||||
change: '+8%',
|
||||
icon: Users,
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
label: 'Lượt xem hôm nay',
|
||||
value: '45,678',
|
||||
change: '+23%',
|
||||
icon: TrendingUp,
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
label: 'Doanh thu tháng',
|
||||
value: '12.5M',
|
||||
change: '+15%',
|
||||
icon: BarChart3,
|
||||
color: 'purple',
|
||||
},
|
||||
]
|
||||
|
||||
const recentMovies = [
|
||||
{ name: 'Phim Hàn Quốc 1', views: 1234, status: 'active' },
|
||||
{ name: 'Phim Hàn Quốc 2', views: 890, status: 'active' },
|
||||
{ name: 'Phim Hàn Quốc 3', views: 2345, status: 'active' },
|
||||
{ name: 'Phim Hàn Quốc 4', views: 567, status: 'draft' },
|
||||
{ name: 'Phim Hàn Quốc 5', views: 1890, status: 'active' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-black text-white">Dashboard</h1>
|
||||
<p class="mt-1 text-sm text-slate-400">Tổng quan hệ thống CineK</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div v-for="stat in stats" :key="stat.label"
|
||||
class="rounded-xl border border-white/10 bg-slate-900/50 p-5 transition hover:border-white/20">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-400">{{ stat.label }}</p>
|
||||
<p class="mt-2 text-3xl font-black text-white">{{ stat.value }}</p>
|
||||
<p class="mt-2 text-sm font-semibold text-green-400">{{ stat.change }} tháng này</p>
|
||||
</div>
|
||||
<div class="grid size-11 place-items-center rounded-xl"
|
||||
:class="{
|
||||
'bg-yellow-400/10 text-yellow-400': stat.color === 'yellow',
|
||||
'bg-blue-400/10 text-blue-400': stat.color === 'blue',
|
||||
'bg-green-400/10 text-green-400': stat.color === 'green',
|
||||
'bg-purple-400/10 text-purple-400': stat.color === 'purple',
|
||||
}">
|
||||
<component :is="stat.icon" class="size-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-black text-white">Phim gần đây</h2>
|
||||
<NuxtLink to="/admin/phim" class="text-sm font-semibold text-yellow-400 hover:text-yellow-300">
|
||||
Xem tất cả
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="movie in recentMovies" :key="movie.name"
|
||||
class="flex items-center justify-between rounded-lg border border-white/5 bg-white/5 p-3 transition hover:border-white/10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="grid size-10 place-items-center rounded-lg bg-yellow-400/10">
|
||||
<Film class="size-4 text-yellow-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-white">{{ movie.name }}</p>
|
||||
<p class="text-xs text-slate-400">{{ movie.views.toLocaleString() }} lượt xem</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="rounded-full px-2.5 py-1 text-xs font-semibold"
|
||||
:class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
|
||||
{{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50 p-5">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-black text-white">Hoạt động gần đây</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-3">
|
||||
<div class="grid size-8 shrink-0 place-items-center rounded-full bg-green-400/10">
|
||||
<Film class="size-3.5 text-green-400" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-white">
|
||||
<span class="font-semibold">Phim mới</span> đã được thêm
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-400">2 phút trước</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-400/10">
|
||||
<Users class="size-3.5 text-blue-400" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-white">
|
||||
<span class="font-semibold">15 thành viên</span> mới đăng ký
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-400">1 giờ trước</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="grid size-8 shrink-0 place-items-center rounded-full bg-yellow-400/10">
|
||||
<TrendingUp class="size-3.5 text-yellow-400" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-white">
|
||||
Lượt xem tăng <span class="font-semibold">23%</span> so với hôm qua
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-400">3 giờ trước</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<div class="grid size-8 shrink-0 place-items-center rounded-full bg-purple-400/10">
|
||||
<BarChart3 class="size-3.5 text-purple-400" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-white">
|
||||
Doanh thu tháng đạt <span class="font-semibold">12.5M</span>
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-slate-400">5 giờ trước</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { Edit, Eye, Film, MoreVertical, Plus, Search, Trash2 } from 'lucide-vue-next'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Quản lý phim - CineK Admin',
|
||||
})
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const movies = [
|
||||
{ id: 1, name: 'Phim Hàn Quốc 1', originName: 'Korean Drama 1', views: 1234, status: 'active', updatedAt: '2024-01-15' },
|
||||
{ id: 2, name: 'Phim Hàn Quốc 2', originName: 'Korean Drama 2', views: 890, status: 'active', updatedAt: '2024-01-14' },
|
||||
{ id: 3, name: 'Phim Hàn Quốc 3', originName: 'Korean Movie 1', views: 2345, status: 'active', updatedAt: '2024-01-13' },
|
||||
{ id: 4, name: 'Phim Hàn Quốc 4', originName: 'Korean Drama 3', views: 567, status: 'draft', updatedAt: '2024-01-12' },
|
||||
{ id: 5, name: 'Phim Hàn Quốc 5', originName: 'Korean Movie 2', views: 1890, status: 'active', updatedAt: '2024-01-11' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-black text-white">Quản lý phim</h1>
|
||||
<p class="mt-1 text-sm text-slate-400">Quản lý tất cả phim trên CineK</p>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="inline-flex h-10 items-center gap-2 rounded-lg bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-yellow-300">
|
||||
<Plus class="size-4" />
|
||||
Thêm phim mới
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50">
|
||||
<div class="flex items-center gap-3 border-b border-white/10 p-4">
|
||||
<div class="relative flex-1">
|
||||
<Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
|
||||
<input v-model="searchQuery" type="search" placeholder="Tìm kiếm phim..."
|
||||
class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
|
||||
<th class="px-4 py-3">Phim</th>
|
||||
<th class="px-4 py-3">Lượt xem</th>
|
||||
<th class="px-4 py-3">Trạng thái</th>
|
||||
<th class="px-4 py-3">Cập nhật</th>
|
||||
<th class="px-4 py-3 text-right">Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<tr v-for="movie in movies" :key="movie.id" class="transition hover:bg-white/5">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="grid size-10 shrink-0 place-items-center rounded-lg bg-yellow-400/10">
|
||||
<Film class="size-4 text-yellow-400" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-semibold text-white">{{ movie.name }}</p>
|
||||
<p class="truncate text-xs text-slate-400">{{ movie.originName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-slate-300">{{ movie.views.toLocaleString() }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="rounded-full px-2.5 py-1 text-xs font-semibold"
|
||||
:class="movie.status === 'active' ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
|
||||
{{ movie.status === 'active' ? 'Hoạt động' : 'Nháp' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-slate-400">{{ movie.updatedAt }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-end 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">
|
||||
<Eye class="size-4" />
|
||||
</button>
|
||||
<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">
|
||||
<Trash2 class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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ị 1-5 / 1,234 phim</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
‹
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
|
||||
1
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
2
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
3
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { Edit, Mail, Search, Trash2, UserRound } from 'lucide-vue-next'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Quản lý thành viên - CineK Admin',
|
||||
})
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const users = [
|
||||
{ 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' },
|
||||
]
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-white/10 bg-slate-900/50">
|
||||
<div class="flex items-center gap-3 border-b border-white/10 p-4">
|
||||
<div class="relative flex-1">
|
||||
<Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
|
||||
<input v-model="searchQuery" type="search" placeholder="Tìm kiếm thành viên..."
|
||||
class="h-10 w-full rounded-lg border border-white/10 bg-white/5 pl-10 pr-4 text-sm text-white placeholder:text-slate-400 outline-none focus:border-yellow-400/50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10 text-left text-xs font-semibold uppercase text-slate-400">
|
||||
<th class="px-4 py-3">Thành viên</th>
|
||||
<th class="px-4 py-3">Vai trò</th>
|
||||
<th class="px-4 py-3">Trạng thái</th>
|
||||
<th class="px-4 py-3">Tham gia</th>
|
||||
<th class="px-4 py-3 text-right">Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<tr v-for="user in users" :key="user.id" class="transition hover:bg-white/5">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="grid size-10 shrink-0 place-items-center rounded-full bg-yellow-400/10">
|
||||
<UserRound class="size-4 text-yellow-400" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-semibold text-white">{{ user.name }}</p>
|
||||
<p class="flex items-center gap-1.5 truncate text-xs text-slate-400">
|
||||
<Mail class="size-3" />
|
||||
{{ user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="rounded-full px-2.5 py-1 text-xs font-semibold"
|
||||
: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>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<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>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-slate-400">{{ user.joined }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-end 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">
|
||||
<Trash2 class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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ị 1-5 / 5,678 thành viên</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
‹
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg bg-yellow-400/10 text-sm font-semibold text-yellow-400">
|
||||
1
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
2
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-sm font-semibold text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
3
|
||||
</button>
|
||||
<button type="button"
|
||||
class="grid size-8 place-items-center rounded-lg border border-white/10 text-slate-400 transition hover:bg-white/10 hover:text-white">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -33,7 +33,6 @@ const hero = computed(() => heroSlides.value[heroIndex.value] ?? movies.value[0]
|
||||
const heroDetail = ref<any>(null)
|
||||
const sourceStatus = computed(() => data.value?.sources ?? [])
|
||||
const watchHistory = ref<WatchHistoryItem[]>([])
|
||||
const { user, initAuth } = useSupabaseAuth()
|
||||
const {
|
||||
loadWatchHistory: fetchWatchHistory,
|
||||
clearWatchHistory: removeWatchHistory,
|
||||
@@ -252,12 +251,7 @@ watch(hero, async (currentHero) => {
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(user, () => {
|
||||
loadWatchHistory()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initAuth()
|
||||
heroTimer = setInterval(nextHero, 6500)
|
||||
loadWatchHistory()
|
||||
window.addEventListener('storage', loadWatchHistory)
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { Clock3, Trash2 } from 'lucide-vue-next'
|
||||
import type { WatchHistoryItem } from '~/composables/useWatchHistory'
|
||||
|
||||
const { initAuth } = useSupabaseAuth()
|
||||
const { loadWatchHistory, clearWatchHistory } = useWatchHistory()
|
||||
const historyItems = ref<WatchHistoryItem[]>([])
|
||||
const loading = ref(true)
|
||||
@@ -60,7 +59,6 @@ async function removeHistory() {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initAuth()
|
||||
await refreshHistory()
|
||||
})
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ const activeTab = ref<'episodes' | 'actors'>('episodes')
|
||||
const isFavoriteMovie = ref(false)
|
||||
const actionMessage = ref('')
|
||||
const actionBusy = ref(false)
|
||||
const { user, initAuth } = useSupabaseAuth()
|
||||
const {
|
||||
isFavorite,
|
||||
saveFavorite,
|
||||
@@ -126,7 +125,7 @@ async function toggleFavorite() {
|
||||
} else {
|
||||
await saveFavorite(libraryItem.value)
|
||||
isFavoriteMovie.value = true
|
||||
flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
|
||||
flashActionMessage('Đã lưu vào yêu thích.')
|
||||
}
|
||||
actionBusy.value = false
|
||||
}
|
||||
@@ -137,7 +136,7 @@ async function addToWatchLater() {
|
||||
actionBusy.value = true
|
||||
await saveWatchLater(libraryItem.value)
|
||||
actionBusy.value = false
|
||||
flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
|
||||
flashActionMessage('Đã thêm vào danh sách xem sau.')
|
||||
}
|
||||
|
||||
async function shareMovie() {
|
||||
@@ -164,7 +163,6 @@ async function shareMovie() {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initAuth()
|
||||
await refreshFavoriteState()
|
||||
})
|
||||
|
||||
@@ -176,7 +174,7 @@ watch(requestedSources, () => {
|
||||
selectedServer.value = 0
|
||||
})
|
||||
|
||||
watch([libraryItem, user], () => {
|
||||
watch(libraryItem, () => {
|
||||
refreshFavoriteState()
|
||||
})
|
||||
|
||||
|
||||
+26
-76
@@ -1,31 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { Clock3, Heart, Mail, UserRound } from 'lucide-vue-next'
|
||||
|
||||
const { user, loading, initAuth } = useSupabaseAuth()
|
||||
|
||||
const defaultAvatar = 'https://thumbs.dreamstime.com/b/avatar-vietnam-character-your-project-others-avatar-vietnam-character-274539000.jpg'
|
||||
const memberName = computed(() => {
|
||||
const metadata = user.value?.user_metadata || {}
|
||||
const name = metadata.name || metadata.full_name || metadata.user_name
|
||||
if (typeof name === 'string' && name.trim()) return name.trim()
|
||||
return user.value?.email?.split('@')[0] || 'Thành viên'
|
||||
})
|
||||
|
||||
const memberAvatar = computed(() => {
|
||||
const metadata = user.value?.user_metadata || {}
|
||||
return typeof metadata.avatar_url === 'string' && metadata.avatar_url ? metadata.avatar_url : defaultAvatar
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initAuth()
|
||||
})
|
||||
import { Clock3, Heart } from 'lucide-vue-next'
|
||||
|
||||
useHead({
|
||||
title: 'Trang cá nhân - CineK',
|
||||
title: 'Thư viện - CineK',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'Quản lý tài khoản CineK, đồng bộ lịch sử xem, danh sách yêu thích và các phim muốn xem sau.',
|
||||
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.',
|
||||
},
|
||||
],
|
||||
})
|
||||
@@ -37,62 +18,31 @@ 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ành viên</p>
|
||||
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="rounded-lg border border-white/10 bg-white/6 p-5">
|
||||
<div class="h-24 animate-pulse rounded-md bg-white/10" />
|
||||
</div>
|
||||
|
||||
<div v-else-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">
|
||||
<img :src="memberAvatar" :alt="memberName"
|
||||
class="size-24 shrink-0 rounded-full object-cover ring-4 ring-yellow-300/30">
|
||||
<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 này dùng để đồng bộ lịch sử xem và các dữ liệu cá nhân của bạn trên CineK.
|
||||
</p>
|
||||
</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">
|
||||
Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
|
||||
</p>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -70,7 +70,6 @@ const {
|
||||
loadWatchHistory: fetchWatchHistory,
|
||||
saveWatchHistory: persistWatchHistory,
|
||||
} = useWatchHistory()
|
||||
const { user, initAuth } = useSupabaseAuth()
|
||||
const {
|
||||
isFavorite,
|
||||
saveFavorite,
|
||||
@@ -886,7 +885,7 @@ async function toggleFavorite() {
|
||||
} else {
|
||||
await saveFavorite(libraryItem.value)
|
||||
isFavoriteMovie.value = true
|
||||
flashActionMessage(user.value ? 'Đã lưu vào yêu thích.' : 'Đã lưu yêu thích trên thiết bị này.')
|
||||
flashActionMessage('Đã lưu vào yêu thích.')
|
||||
}
|
||||
actionBusy.value = false
|
||||
}
|
||||
@@ -897,7 +896,7 @@ async function addToWatchLater() {
|
||||
actionBusy.value = true
|
||||
await saveWatchLater(libraryItem.value)
|
||||
actionBusy.value = false
|
||||
flashActionMessage(user.value ? 'Đã thêm vào danh sách xem sau.' : 'Đã thêm vào danh sách xem sau trên thiết bị này.')
|
||||
flashActionMessage('Đã thêm vào danh sách xem sau.')
|
||||
}
|
||||
|
||||
async function shareMovie() {
|
||||
@@ -921,7 +920,6 @@ async function shareMovie() {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initAuth()
|
||||
await refreshFavoriteState()
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
||||
document.addEventListener('keydown', handleKeyboardShortcut)
|
||||
@@ -972,7 +970,7 @@ watch([canUseEmbed, canUseHls], () => {
|
||||
immediate: true,
|
||||
})
|
||||
|
||||
watch([libraryItem, user], () => {
|
||||
watch(libraryItem, () => {
|
||||
refreshFavoriteState()
|
||||
})
|
||||
|
||||
|
||||
+3
-17
@@ -1,8 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { Heart, UserRound } from 'lucide-vue-next'
|
||||
import { Heart } from 'lucide-vue-next'
|
||||
import type { LibraryMovieItem } from '~/composables/useMovieLibrary'
|
||||
|
||||
const { user, loading: authLoading, initAuth } = useSupabaseAuth()
|
||||
const { loadFavorites } = useMovieLibrary()
|
||||
const favoriteItems = ref<LibraryMovieItem[]>([])
|
||||
const loading = ref(true)
|
||||
@@ -23,14 +22,9 @@ function movieLink(item: LibraryMovieItem) {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await initAuth()
|
||||
await refreshFavorites()
|
||||
})
|
||||
|
||||
watch(user, () => {
|
||||
refreshFavorites()
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Yêu thích - CineK',
|
||||
meta: [
|
||||
@@ -52,7 +46,7 @@ useHead({
|
||||
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Yêu thích</h1>
|
||||
</div>
|
||||
|
||||
<div v-if="loading || authLoading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div v-if="loading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
|
||||
</div>
|
||||
|
||||
@@ -75,7 +69,7 @@ useHead({
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-else-if="user"
|
||||
<div v-else
|
||||
class="flex min-h-80 flex-col items-center justify-center rounded-lg border border-white/10 bg-white/6 p-6 text-center">
|
||||
<Heart class="size-12 text-yellow-300" />
|
||||
<h2 class="mt-4 text-xl font-black">Chưa có phim yêu thích</h2>
|
||||
@@ -87,14 +81,6 @@ useHead({
|
||||
Duyệt phim
|
||||
</NuxtLink>
|
||||
</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 để đồng bộ danh sách yêu thích, hoặc vẫn có thể lưu tạm trên thiết bị này.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
const config = useRuntimeConfig()
|
||||
const supabase = createClient(config.public.supabaseUrl, config.public.supabaseKey, {
|
||||
auth: {
|
||||
persistSession: import.meta.client,
|
||||
autoRefreshToken: import.meta.client,
|
||||
detectSessionInUrl: import.meta.client,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
provide: {
|
||||
supabase,
|
||||
},
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user