83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { motion } from "framer-motion";
|
|
import { Lock, User, Home } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
const Admin = () => {
|
|
const { isAuthenticated, login } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [user, setUser] = useState("");
|
|
const [pass, setPass] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
if (isAuthenticated) {
|
|
navigate("/admin/painel");
|
|
return null;
|
|
}
|
|
|
|
const handleLogin = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (login(user, pass)) {
|
|
navigate("/admin/painel");
|
|
} else {
|
|
setError("Usuário ou senha incorretos.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen gradient-dark flex items-center justify-center px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="w-full max-w-md bg-secondary/50 border border-border/10 rounded-2xl p-8"
|
|
>
|
|
<div className="text-center mb-8">
|
|
<h1 className="font-display text-3xl font-bold text-primary mb-2">ITAROTA79</h1>
|
|
<p className="text-dark-surface-foreground/50 text-sm">Área Administrativa</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-surface-foreground/30" />
|
|
<Input
|
|
placeholder="Usuário"
|
|
value={user}
|
|
onChange={(e) => { setUser(e.target.value); setError(""); }}
|
|
className="pl-10 bg-secondary/80 border-border/20 text-dark-surface-foreground"
|
|
/>
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-surface-foreground/30" />
|
|
<Input
|
|
type="password"
|
|
placeholder="Senha"
|
|
value={pass}
|
|
onChange={(e) => { setPass(e.target.value); setError(""); }}
|
|
className="pl-10 bg-secondary/80 border-border/20 text-dark-surface-foreground"
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-destructive text-sm text-center">
|
|
{error}
|
|
</motion.p>
|
|
)}
|
|
<Button type="submit" className="w-full font-display tracking-wider">Entrar</Button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center">
|
|
<Link to="/">
|
|
<Button variant="ghost" size="sm" className="gap-2 text-muted-foreground hover:text-primary">
|
|
<Home className="w-4 h-4" /> Voltar para Home
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Admin;
|