98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import AdminLogo from '../components/AdminLogo';
|
|
|
|
export default function AdminLogin() {
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const router = useRouter();
|
|
|
|
const handleLogin = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (password === '111222') {
|
|
// Store admin session
|
|
sessionStorage.setItem('adminLoggedIn', 'true');
|
|
router.push('/admin/dashboard');
|
|
} else {
|
|
setError('Invalid password');
|
|
setPassword('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AdminLogo />
|
|
<div className="relative min-h-screen bg-black tech-grid scanlines">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
|
|
<div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
|
|
</div>
|
|
|
|
<div className="relative mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-4 py-12">
|
|
<div className="relative w-full rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
|
|
<div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
|
|
<div className="relative">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
|
|
<h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
|
|
Admin Login
|
|
</h1>
|
|
</div>
|
|
<p className="mb-6 text-sm text-white/60 font-mono">
|
|
ENTER ADMIN PASSWORD TO CONTINUE
|
|
</p>
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
setError('');
|
|
}}
|
|
placeholder="Enter password"
|
|
className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 text-lg font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
|
|
required
|
|
/>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-500 font-mono">{error}</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 text-lg font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
|
|
>
|
|
Login
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<Link
|
|
href="/"
|
|
className="text-sm text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider"
|
|
>
|
|
← Back to Home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|