File size: 4,932 Bytes
a667b81 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | import React, { useState } from "react";
import { X, Lock, RefreshCw, Mail, KeyRound } from "lucide-react";
import { loginAdmin } from "../lib/firebaseService";
interface AdminLoginModalProps {
isOpen: boolean;
onClose: () => void;
onSuccess: () => void;
darkMode: boolean;
}
export default function AdminLoginModal({ isOpen, onClose, onSuccess, darkMode }: AdminLoginModalProps) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
if (!isOpen) return null;
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!email || !password) {
setError("Please fill in all fields.");
return;
}
setLoading(true);
setError("");
try {
await loginAdmin(email, password);
onSuccess();
onClose();
} catch (err: any) {
setError(err.message || "Invalid authentication credentials.");
} finally {
setLoading(false);
}
};
return (
<div className="fixed inset-0 z-55 flex items-center justify-center p-4 bg-black/70 backdrop-blur-xs">
<div
className={`w-full max-w-md p-6 sm:p-8 rounded-3xl border shadow-2xl relative transition-colors duration-300 ${
darkMode ? "bg-[#1c1c24] border-white/10 text-white" : "bg-white border-slate-200 text-slate-900"
}`}
>
<button
onClick={onClose}
className={`absolute top-4 right-4 p-1.5 rounded-lg transition-colors ${
darkMode ? "hover:bg-white/10 text-slate-400 hover:text-white" : "hover:bg-black/5 text-slate-500 hover:text-black"
}`}
>
<X className="w-5 h-5" />
</button>
<div className="flex items-center space-x-3 mb-6">
<div className="p-2.5 rounded-xl bg-brand-orange/15 text-brand-orange">
<Lock className="w-6 h-6" />
</div>
<div>
<h3 className="font-display font-extrabold text-lg text-brand-orange">Staff Authentication</h3>
<p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
Direct database verification for Haider Brothers Traders admin
</p>
</div>
</div>
{error && (
<div className="mb-4 p-3 bg-red-600/15 border border-red-500/20 text-red-400 text-xs rounded-xl font-medium">
{error}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="text-[10px] uppercase font-mono tracking-wider block mb-1.5">
Secure Email Address
</label>
<div className="relative">
<input
type="email"
required
placeholder="bahaduralimunnabhai@gmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className={`w-full p-2.5 pl-9 rounded-xl text-xs border focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange ${
darkMode ? "bg-black/40 border-white/10 text-white" : "bg-slate-50 border-slate-200"
}`}
/>
<Mail className="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
</div>
</div>
<div>
<label className="text-[10px] uppercase font-mono tracking-wider block mb-1.5">
Enter Password
</label>
<div className="relative">
<input
type="password"
required
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
className={`w-full p-2.5 pl-9 rounded-xl text-xs border focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange ${
darkMode ? "bg-black/40 border-white/10 text-white" : "bg-slate-50 border-slate-200"
}`}
/>
<KeyRound className="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
</div>
</div>
<button
type="submit"
disabled={loading}
className="w-full bg-gradient-to-r from-brand-orange to-red-600 hover:from-brand-orange-light hover:to-red-500 text-white font-bold p-3 rounded-xl text-xs flex items-center justify-center space-x-1.5 shadow-md shadow-brand-orange/20 transition-all cursor-pointer mt-2"
>
{loading ? (
<RefreshCw className="w-3.5 h-3.5 animate-spin" />
) : (
<Lock className="w-3.5 h-3.5" />
)}
<span>Verify Credentials</span>
</button>
</form>
</div>
</div>
);
}
|