import { useState } from "react"; import { useNavigate } from "react-router"; import { LogIn, Loader2 } from "lucide-react"; import { login } from "../../services/api"; import logoUrl from "../../assets/logo.png"; export default function Login() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate(); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); setError(""); if (!email || !password) { setError("Please enter both email and password"); return; } if (!/\S+@\S+\.\S+/.test(email)) { setError("Please enter a valid email address"); return; } setIsLoading(true); try { const res = await login(email, password); const user = { user_id: res.data.id, email: res.data.email, name: res.data.fullname, loginTime: new Date().toISOString(), }; localStorage.setItem("chatbot_user", JSON.stringify(user)); navigate("/"); } catch (err: unknown) { setError(err instanceof Error ? err.message : "Login failed"); } finally { setIsLoading(false); } }; return (
{/* ── Dot grid texture ── */}
{/* ── Gradient orbs — glowing on dark bg ── */} {/* Cyan — top left */}
{/* Orange — bottom right */}
{/* Green — top right */}
{/* Purple accent — center left */}
{/* ── Neural network — bottom left ── */} {/* ── Neural network — top right ── */} {/* ── Large ring — top right ── */}
{/* ── Rotated square — bottom left ── */}
{/* ── Hexagon — bottom right ── */} {/* ── Rotated square — bottom left ── */}
{/* ── Small floating dots ── */}
{/* ── Login card ── */}
{/* Brand logo */}
DataEyond

Welcome Back

Sign in to continue to your chatbot

setEmail(e.target.value)} className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition" placeholder="you@example.com" disabled={isLoading} />
setPassword(e.target.value)} className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition" placeholder="Enter your password" disabled={isLoading} />
{error && (
{error}
)}
); }