132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import { FaLock, FaUser } from "react-icons/fa";
|
|
|
|
const Login = () => {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogin = (e) => {
|
|
e.preventDefault();
|
|
if (username === "admin" && password === "admin") {
|
|
localStorage.setItem('loggedIn', JSON.stringify({
|
|
timestamp: Date.now(),
|
|
value: true,
|
|
}));
|
|
navigate("/admin-dashboard");
|
|
} else {
|
|
setError("❌ Invalid credentials! Try again.");
|
|
}
|
|
};
|
|
|
|
const [floors, setFloors] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const a = "482beca79d9c005";
|
|
const b = "b8778f51fcca82b";
|
|
const authHeader = `token ${a}:${b}`;
|
|
const url = "http://82.25.105.135:8004/api/resource/Dine360%20Room?fields=%5B%22*%22%5D&limit_page_length=100&filters=%5B%5B%22floor%22%2C%22%3D%22%2C%223%22%5D%5D";
|
|
|
|
fetch(url, {
|
|
headers: {
|
|
Authorization: authHeader,
|
|
},
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setFloors(data.data);
|
|
console.log("regr", data.data)
|
|
})
|
|
.catch((err) => console.error(err));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="h-screen flex items-center justify-center bg-gray-900 text-white">
|
|
<motion.div
|
|
className="bg-gray-800 p-8 rounded-lg shadow-xl w-96"
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{/* Animated Heading */}
|
|
<motion.h2
|
|
className="text-2xl font-bold text-center mb-6"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
>
|
|
🔐 Admin Login
|
|
</motion.h2>
|
|
|
|
{/* Input Fields */}
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div className="flex items-center border-b-2 border-gray-600 py-2">
|
|
<FaUser className="text-gray-400 mr-2" />
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
className="w-full bg-transparent border-none focus:outline-none text-lg"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center border-b-2 border-gray-600 py-2">
|
|
<FaLock className="text-gray-400 mr-2" />
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
className="w-full bg-transparent border-none focus:outline-none text-lg"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Error Message Animation */}
|
|
{error && (
|
|
<motion.p
|
|
className="text-red-400 text-center"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
>
|
|
{error}
|
|
</motion.p>
|
|
)}
|
|
|
|
{/* Login Button */}
|
|
<motion.button
|
|
type="submit"
|
|
className="w-full bg-blue-600 py-2 mt-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition duration-300"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
🚀 Login
|
|
</motion.button>
|
|
</form>
|
|
</motion.div>
|
|
|
|
{/* Floating Emojis Animation */}
|
|
<motion.div
|
|
className="absolute top-10 left-10 text-5xl"
|
|
animate={{ y: [0, -15, 0] }}
|
|
transition={{ repeat: Infinity, duration: 2 }}
|
|
>
|
|
🔑
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="absolute bottom-10 right-10 text-5xl"
|
|
animate={{ rotate: [0, 20, -20, 0] }}
|
|
transition={{ repeat: Infinity, duration: 2 }}
|
|
>
|
|
🔥
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|