// src/components/AuthModal.jsx import React,{useState}from "react"; import{auth,db}from "../firebase"; import{createUserWithEmailAndPassword,signInWithEmailAndPassword,updateProfile,sendPasswordResetEmail}from "firebase/auth"; import{doc,setDoc,query,collection,where,getDocs}from "firebase/firestore"; import{useNavigate}from "react-router-dom"; import{Zap,ShieldAlert,X,Mail}from "lucide-react"; export default function AuthModal(){const [isLogin,setIsLogin]=useState(true);const [email,setEmail]=useState("");const [password,setPassword]=useState("");const [nickname,setNickname]=useState("");const [error,setError]=useState(null);// Özel Hata Mesajı const [message,setMessage]=useState(null);// Bilgi Mesajı const navigate=useNavigate();// Şifre Sıfırlama const handleForgot=async ()=>{if (!email) return setError("ÖNCE EMAIL ADRESİNİ GİRMELİSİN.");try{await sendPasswordResetEmail(auth,email);setMessage("ŞİFRE SIFIRLAMA BAĞLANTISI GÖNDERİLDİ.")}catch (err){setError("HATA: " + err.message)}}const handleAuth=async (e)=>{e.preventDefault();setError(null);try{if (isLogin){await signInWithEmailAndPassword(auth,email,password);navigate("/")}else{const nick=nickname.trim().toUpperCase();if (nick.length < 3) return setError("NICKNAME EN AZ 3 KARAKTER OLMALI.");const q=query(collection(db,"users"),where("nickname","==",nick));const snap=await getDocs(q);if (!snap.empty) return setError("BU KOORDİNAT (NICKNAME) ZATEN BAŞKA BİR NODE'A AİT.");const res=await createUserWithEmailAndPassword(auth,email,password);await updateProfile(res.user,{displayName: nick});await setDoc(doc(db,"users",res.user.uid),{uid: res.user.uid,nickname: nick,isAdmin: false,joinedAt: new Date().toISOString()});navigate("/")}}catch (err){setError(err.message.toUpperCase())}}return (<div className="min-h-screen bg-black flex items-center justify-center p-6" > {} {error && (<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md p-4" > <div className="bg-[#0a0a0a] border border-red-500/20 p-10 rounded-[3rem] max-w-sm w-full text-center shadow-[0_0_50px_rgba(255,0,0,0.1)]" > <ShieldAlert className="text-red-500 mx-auto mb-6" size= {48} /> <h2 className="text-white text-[12px] font-black uppercase tracking-widest mb-4" >SİSTEM HATASI</h2> <p className="text-white/40 text-[10px] leading-relaxed mb-8" > {error} </p> <button onClick= {()=> setError(null)} className="w-full bg-white text-black py-4 rounded-2xl font-black text-[10px] uppercase" >ANLAŞILDI</button> </div> </div>)} {} {message && (<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md p-4" > <div className="bg-[#0a0a0a] border border-white/10 p-10 rounded-[3rem] max-w-sm w-full text-center" > <Mail className="text-white mx-auto mb-6" size= {48} /> <p className="text-white text-[10px] leading-relaxed mb-8" > {message} </p> <button onClick= {()=> setMessage(null)} className="w-full bg-white text-black py-4 rounded-2xl font-black text-[10px] uppercase" >TAMAM</button> </div> </div>)} <div className="w-full max-w-[400px] space-y-8 animate-in fade-in zoom-in duration-500" > <div className="text-center space-y-4" > <Zap size= {48} className="mx-auto text-white" fill="white" /> <h1 className="text-2xl font-black tracking-[0.5em] text-white uppercase" >ZAHID</h1> </div> <form onSubmit= {handleAuth} className="space-y-4" > {!isLogin && (<input required type="text" placeholder="NICKNAME" value= {nickname} onChange= {e=> setNickname(e.target.value)} className="w-full bg-[#0a0a0a] border border-white/5 p-5 rounded-2xl text-[10px] text-white font-black uppercase outline-none focus:border-white/20" />)} <input required type="email" placeholder="EMAIL" value= {email} onChange= {e=> setEmail(e.target.value)} className="w-full bg-[#0a0a0a] border border-white/5 p-5 rounded-2xl text-[10px] text-white font-black uppercase outline-none focus:border-white/20" /> <input required type="password" placeholder="PASSWORD" value= {password} onChange= {e=> setPassword(e.target.value)} className="w-full bg-[#0a0a0a] border border-white/5 p-5 rounded-2xl text-[10px] text-white font-black uppercase outline-none focus:border-white/20" /> <button type="submit" className="w-full bg-white text-black py-5 rounded-2xl font-black text-[11px] uppercase tracking-widest hover:invert transition-all" > {isLogin ? "ENTRY PROTOCOL" : "INITIALIZE NODE"} </button> </form> <div className="flex flex-col items-center gap-4" > <button onClick= {()=> setIsLogin(!isLogin)} className="text-[9px] font-black text-white/20 uppercase tracking-widest hover:text-white transition-all" > {isLogin ? "CREATE NEW ACCOUNT" : "BACK TO LOGIN"} [data-tooltip]:hover::after {content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: white; color: black; padding: 8px 12px; border-radius: 10px; font-size: 8px; font-weight: 900; white-space: nowrap; z-index: 50; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 10px 30px rgba(0,0,0,.5);} </button> {isLogin && (<button onClick= {handleForgot} className="text-[9px] font-black text-red-500/40 uppercase tracking-widest hover:text-red-500 transition-all" > SİFREMİ UNUTTUM </button>)} </div> </div> </div>)}
