110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { motion } from 'framer-motion';
|
|
import { FaLock, FaUser } from 'react-icons/fa';
|
|
import { useAdmin } from '@/lib/AdminContext';
|
|
|
|
export default function AdminLoginPage() {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const { login } = useAdmin();
|
|
const router = useRouter();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
const success = login(username, password);
|
|
if (success) {
|
|
router.push('/admin/dashboard');
|
|
} else {
|
|
setError('Invalid credentials. Try admin / admin123');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 bg-paper-light">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="w-full max-w-md"
|
|
>
|
|
<div className="paper-card p-8 border-2 border-paper-dark shadow-paper-lg">
|
|
{/* Header */}
|
|
<div className="text-center mb-8">
|
|
<div className="inline-block p-4 bg-paper-brown/20 border-2 border-paper-brown mb-4">
|
|
<FaLock className="text-4xl text-paper-brown" />
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
|
|
Admin Panel
|
|
</h1>
|
|
<p className="text-paper-gray mt-4">Sign in to manage your music store</p>
|
|
</div>
|
|
|
|
{/* Login Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-paper-dark mb-2">
|
|
<FaUser className="inline mr-2" />
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="admin"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-paper-dark mb-2">
|
|
<FaLock className="inline mr-2" />
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="p-3 bg-red-100 border-2 border-red-400 text-red-700 text-sm"
|
|
>
|
|
{error}
|
|
</motion.div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
|
|
{/* Demo Credentials */}
|
|
<div className="mt-6 p-4 bg-paper-brown/10 border-2 border-paper-brown">
|
|
<p className="text-xs text-paper-dark text-center">
|
|
Demo Credentials:<br />
|
|
<span className="text-paper-brown font-semibold">Username: admin</span><br />
|
|
<span className="text-paper-brown font-semibold">Password: admin123</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|