mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 16:07:47 +00:00
feat: implement cache busting mechanism and UI improvements
- Added `useCacheBust` composable to manage cache invalidation after movie edits in the admin panel. - Integrated cache busting in movie sync and delete actions to ensure data consistency across pages. - Enhanced UI components in the admin movie management and member management pages for better readability and usability. - Introduced a suggestions tab in the movie detail page to recommend similar movies based on categories. - Updated styles for various elements to improve the overall aesthetic and user experience.
This commit is contained in:
ngthanhvu
+57
-50
@@ -45,58 +45,65 @@ async function handleLogin() {
|
||||
</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 class="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0A0B0E] p-4">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(250,204,21,0.08),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.05),transparent_40%)]" />
|
||||
|
||||
<div class="relative w-full max-w-md">
|
||||
<div class="rounded-3xl border border-white/[0.06] bg-[#131418]/80 p-1 shadow-2xl backdrop-blur-sm">
|
||||
<div class="rounded-[22px] bg-gradient-to-b from-white/[0.08] to-transparent p-6">
|
||||
<div class="mb-8 text-center">
|
||||
<div class="mb-4 inline-flex items-center gap-3">
|
||||
<div class="grid size-12 place-items-center rounded-2xl bg-gradient-to-br from-yellow-400 to-amber-500 shadow-lg shadow-yellow-400/20">
|
||||
<span class="text-xl font-black text-slate-950">C</span>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<span class="block text-2xl font-black text-white">CineK Admin</span>
|
||||
<span class="text-xs text-slate-400">Quản lý hệ thống</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400">Đăng nhập để tiếp tục</p>
|
||||
</div>
|
||||
<span class="text-2xl font-black text-white">CineK Admin</span>
|
||||
|
||||
<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">
|
||||
<AppIcon name="mail" class="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
|
||||
<input v-model="email" type="email" required placeholder="admin@cinek.vn"
|
||||
class="admin-input pl-10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-semibold text-white">Mật khẩu</label>
|
||||
<div class="relative">
|
||||
<AppIcon name="lock" class="absolute left-3.5 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="admin-input pl-10 pr-10">
|
||||
<button type="button"
|
||||
class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-white"
|
||||
@click="showPassword = !showPassword">
|
||||
<AppIcon name="eye-off" v-if="showPassword" class="size-4" />
|
||||
<AppIcon name="eye" v-else class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="admin-btn-primary mt-6 w-full"
|
||||
:disabled="loading">
|
||||
<AppIcon name="log-in" class="size-4" />
|
||||
{{ loading ? 'Đang đăng nhập...' : 'Đăng nhập' }}
|
||||
</button>
|
||||
|
||||
<p v-if="error" class="mt-4 rounded-xl bg-red-500/10 p-3 text-center text-sm text-red-300">
|
||||
{{ error }}
|
||||
</p>
|
||||
</form>
|
||||
</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">
|
||||
<AppIcon name="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">
|
||||
<AppIcon name="lock" 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">
|
||||
<AppIcon name="eye-off" v-if="showPassword" class="size-4" />
|
||||
<AppIcon name="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">
|
||||
<AppIcon name="log-in" 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">
|
||||
|
||||
Reference in New Issue
Block a user