233 lines
9.8 KiB
TypeScript
233 lines
9.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
User,
|
|
Lock,
|
|
Eye,
|
|
EyeOff,
|
|
ArrowRight,
|
|
ShieldCheck,
|
|
UserCircle2
|
|
} from 'lucide-react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
// Import Assets
|
|
import collegeLogo from '../assets/college-logo.png';
|
|
import foodCourtPosBg from '../assets/food-court-pos.png';
|
|
import ritLogo from '../assets/RIT_Logo.png';
|
|
|
|
const Login = () => {
|
|
const [role, setRole] = useState<'manager' | 'master'>('manager');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const navigate = useNavigate();
|
|
|
|
// Ensure any previous session is completely wiped out when arriving at the login screen
|
|
useEffect(() => {
|
|
sessionStorage.removeItem('isLoggedIn');
|
|
sessionStorage.removeItem('userRole');
|
|
sessionStorage.removeItem('userPermissions');
|
|
localStorage.removeItem('systemUser');
|
|
}, []);
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
const response = await fetch('/api/system/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: username, password })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const user = await response.json();
|
|
|
|
// Strict Role Validation
|
|
if ((user.role || '').toLowerCase() !== (role || '').toLowerCase()) {
|
|
alert(`Access Denied: You are trying to login as ${(role || '').toUpperCase()}, but your credentials belong to a ${(user.role || '').toUpperCase()} account.`);
|
|
return;
|
|
}
|
|
|
|
sessionStorage.setItem('isLoggedIn', 'true');
|
|
sessionStorage.setItem('userRole', (user.role || '').toLowerCase());
|
|
sessionStorage.setItem('userPermissions', JSON.stringify(user.permissions || []));
|
|
|
|
// Persist user profile + JWT token for authenticated API calls
|
|
localStorage.setItem('systemUser', JSON.stringify(user)); // user object now includes `token`
|
|
|
|
navigate('/store-dashboard');
|
|
} else {
|
|
const error = await response.json().catch(() => ({ error: 'Invalid credentials' }));
|
|
alert(error.error || 'Invalid credentials');
|
|
}
|
|
} catch (err) {
|
|
console.error('Login error:', err);
|
|
alert('Network error - make sure backend is running');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen flex flex-col gap-6 items-center justify-center p-4 md:p-8 bg-cover bg-center bg-no-repeat relative font-inter overflow-hidden"
|
|
style={{ backgroundImage: `url(${foodCourtPosBg})` }}
|
|
>
|
|
{/* Subtle light overlay to match the clean aesthetic and improve card contrast */}
|
|
<div className="absolute inset-0 bg-white/20 backdrop-blur-[1px] z-0"></div>
|
|
|
|
{/* Login Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
className="w-full max-w-md bg-white/90 backdrop-blur-md border border-white/20 rounded-3xl p-6 md:p-10 shadow-2xl flex flex-col relative z-10"
|
|
>
|
|
{/* Top Logo - Centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="flex flex-col items-center justify-center mb-8"
|
|
>
|
|
<img src={collegeLogo} alt="College Logo" className="h-16 md:h-20 object-contain filter drop-shadow-sm" />
|
|
<span className="text-xs font-semibold text-[#001828]/60 mt-2.5 italic tracking-wide font-sans">
|
|
Till yo tummy is full...
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Login Container */}
|
|
<div className="w-full">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-xs font-black tracking-[0.2em] text-[#001828] uppercase mb-2">
|
|
Canteen Management System
|
|
</h2>
|
|
<div className="w-12 h-1 bg-[#001828] mx-auto rounded-full"></div>
|
|
</div>
|
|
|
|
{/* Role Toggle */}
|
|
<div className="bg-slate-100/80 p-1 rounded-2xl flex gap-1 mb-6 relative">
|
|
<motion.div
|
|
className="absolute h-[calc(100%-8px)] top-1 bg-white rounded-xl shadow-sm z-0"
|
|
initial={false}
|
|
animate={{
|
|
left: role === 'manager' ? '4px' : '50%',
|
|
width: 'calc(50% - 6px)'
|
|
}}
|
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
|
/>
|
|
<button
|
|
onClick={() => setRole('manager')}
|
|
type="button"
|
|
className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
|
|
role === 'manager' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
|
|
}`}
|
|
>
|
|
<UserCircle2 size={16} />
|
|
MANAGER
|
|
</button>
|
|
<button
|
|
onClick={() => setRole('master')}
|
|
type="button"
|
|
className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-xs font-bold transition-all relative z-10 ${
|
|
role === 'master' ? 'text-[#001828]' : 'text-[#94a3b8] hover:text-[#64748b]'
|
|
}`}
|
|
>
|
|
<ShieldCheck size={16} />
|
|
MASTER
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleLogin} className="space-y-5">
|
|
<div className="space-y-1.5">
|
|
<label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest pl-1">
|
|
Secure User ID
|
|
</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#94a3b8] group-focus-within:text-[#001828] transition-colors">
|
|
<User size={18} />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="Username"
|
|
className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-4 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<div className="flex justify-between items-center pl-1">
|
|
<label className="text-[10px] font-black text-[#64748b] uppercase tracking-widest">
|
|
Passcode
|
|
</label>
|
|
<button type="button" className="text-[10px] font-black text-[#001828] uppercase hover:underline">
|
|
Forgot Access?
|
|
</button>
|
|
</div>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#94a3b8] group-focus-within:text-[#001828] transition-colors">
|
|
<Lock size={18} />
|
|
</div>
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full bg-white/85 border-2 border-slate-200 focus:border-[#001828] focus:bg-white rounded-2xl py-3.5 pl-12 pr-12 text-sm font-semibold outline-none transition-all placeholder:text-[#cbd5e1]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute inset-y-0 right-0 pr-4 flex items-center text-[#94a3b8] hover:text-[#64748b] transition-colors"
|
|
>
|
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#001828] text-white rounded-2xl py-3.5 font-black text-sm flex items-center justify-center gap-3 shadow-xl shadow-[#001828]/20 hover:scale-[1.02] active:scale-[0.98] transition-all overflow-hidden group relative mt-2"
|
|
>
|
|
<span className="relative z-10">CONNECT TO PORTAL</span>
|
|
<ArrowRight size={18} className="relative z-10 group-hover:translate-x-1 transition-transform" />
|
|
<motion.div
|
|
className="absolute inset-0 bg-white/10"
|
|
initial={{ x: '-100%' }}
|
|
whileHover={{ x: '100%' }}
|
|
transition={{ duration: 0.6 }}
|
|
/>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-8 text-center">
|
|
<p className="text-[10px] font-black text-[#94a3b8] uppercase tracking-[0.2em]">
|
|
© 2026 TILLO • SYSTEM PORTAL
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Merchant Section Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 15 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="w-full max-w-md bg-white/80 backdrop-blur-md border border-white/20 rounded-2xl p-4 shadow-lg flex items-center justify-between gap-4 relative z-10"
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Merchant Partner</span>
|
|
<span className="text-xs font-bold text-[#001828] mt-0.5">Rajalakshmi Institute of Technology</span>
|
|
</div>
|
|
<img src={ritLogo} alt="RIT Logo" className="h-12 w-auto object-contain filter drop-shadow-sm" />
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|