// auth-modal.jsx — Login / Sign-up modal (premium dark) const { useState } = React; // ─── Thai error message mapper ──────────────────────────────────── function getAuthErrorMessage(error) { const code = error?.code || ''; const map = { 'auth/invalid-email': 'รูปแบบอีเมลไม่ถูกต้อง กรุณาตรวจสอบอีกครั้ง', 'auth/user-not-found': 'ไม่พบบัญชีนี้ในระบบ กรุณาตรวจสอบอีเมลหรือสมัครสมาชิกก่อน', 'auth/wrong-password': 'รหัสผ่านไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง', 'auth/invalid-credential': 'อีเมลหรือรหัสผ่านไม่ถูกต้อง กรุณาตรวจสอบแล้วลองใหม่', 'auth/email-already-in-use': 'อีเมลนี้ถูกใช้งานแล้ว กรุณาเข้าสู่ระบบหรือใช้อีเมลอื่น', 'auth/weak-password': 'รหัสผ่านสั้นหรือเดาง่ายเกินไป กรุณาใช้รหัสผ่านอย่างน้อย 6 ตัวอักษร', 'auth/too-many-requests': 'มีการพยายามเข้าสู่ระบบหลายครั้งเกินไป กรุณารอสักครู่แล้วลองใหม่', 'auth/network-request-failed': 'เชื่อมต่ออินเทอร์เน็ตไม่ได้ กรุณาตรวจสอบสัญญาณแล้วลองใหม่', 'auth/popup-closed-by-user': 'หน้าต่างเข้าสู่ระบบถูกปิดก่อนดำเนินการเสร็จ', 'auth/popup-blocked': 'เบราว์เซอร์บล็อกหน้าต่างเข้าสู่ระบบ กรุณาอนุญาต Pop-up แล้วลองใหม่', 'auth/cancelled-popup-request': 'มีการเปิดหน้าต่างซ้อนกัน กรุณาลองใหม่อีกครั้ง', 'auth/operation-not-allowed': 'วิธีเข้าสู่ระบบนี้ยังไม่ได้เปิดใช้งาน กรุณาติดต่อผู้ดูแลระบบ', 'auth/user-disabled': 'บัญชีนี้ถูกระงับการใช้งาน กรุณาติดต่อผู้ดูแลระบบ', 'auth/requires-recent-login': 'เซสชันหมดอายุ กรุณาเข้าสู่ระบบใหม่อีกครั้ง', 'auth/account-exists-with-different-credential': 'อีเมลนี้ผูกกับวิธีเข้าสู่ระบบอื่นอยู่แล้ว กรุณาใช้วิธีเดิมที่ลงทะเบียนไว้', }; if (map[code]) return map[code]; // Mock layer — map known English messages to Thai const msg = error?.message || ''; if (msg.includes('already in use')) return 'อีเมลนี้ถูกใช้งานแล้ว กรุณาเข้าสู่ระบบหรือใช้อีเมลอื่น'; if (msg.includes('Invalid email')) return 'รูปแบบอีเมลไม่ถูกต้อง กรุณาตรวจสอบอีกครั้ง'; if (msg.includes('Invalid email or password') || msg.includes('invalid credential')) return 'อีเมลหรือรหัสผ่านไม่ถูกต้อง กรุณาตรวจสอบแล้วลองใหม่'; if (msg.includes('at least 6')) return 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร'; // Never expose raw Firebase error strings to the user if (msg.startsWith('Firebase:')) return 'ไม่สามารถเข้าสู่ระบบได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง'; return 'ไม่สามารถเข้าสู่ระบบได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง'; } // ─── Client-side validation ─────────────────────────────────────── function validateForm(email, password, mode) { if (!email.trim()) return 'กรุณากรอกอีเมล'; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) return 'รูปแบบอีเมลไม่ถูกต้อง'; if (!password) return 'กรุณากรอกรหัสผ่าน'; if (mode === 'signup' && password.length < 6) return 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร'; return null; } // ─── Main modal ─────────────────────────────────────────────────── function AuthModal({ open, onClose, accent }) { const [mode, setMode] = useState('signin'); // signin | signup const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [busy, setBusy] = useState(false); const [err, setErr] = useState(''); if (!open) return null; const clearErr = () => { if (err) setErr(''); }; const handleEmailChange = (v) => { setEmail(v); clearErr(); }; const handlePasswordChange = (v) => { setPassword(v); clearErr(); }; const switchMode = (next) => { setMode(next); setErr(''); }; const submit = async () => { const validErr = validateForm(email, password, mode); if (validErr) { setErr(validErr); return; } setBusy(true); setErr(''); try { if (mode === 'signin') await window.VHFirebase.signInEmail(email.trim(), password); else await window.VHFirebase.signUpEmail(email.trim(), password); onClose(); } catch (e) { setErr(getAuthErrorMessage(e)); } finally { setBusy(false); } }; const google = async () => { setBusy(true); setErr(''); try { await window.VHFirebase.signInGoogle(); onClose(); } catch (e) { // popup-closed is not really an error worth showing if (e?.code !== 'auth/popup-closed-by-user' && e?.code !== 'auth/cancelled-popup-request') { setErr(getAuthErrorMessage(e)); } } finally { setBusy(false); } }; const handleKey = (e) => { if (e.key === 'Enter' && !busy) submit(); }; return (
JAV HUB
{mode === 'signin' ? 'ยินดีต้อนรับกลับ' : 'สมัครสมาชิก'}
ไลบรารีของคุณเป็นส่วนตัวและผูกกับบัญชีของคุณเท่านั้น
{err && }
หรือ
{window.VHFirebase.mode === 'mock' ? 'โหมด Demo · ข้อมูลเก็บในเบราว์เซอร์นี้เท่านั้น' : 'Firebase Auth · ข้อมูลส่วนตัวและเป็นความลับ'}
); } // ─── Error banner with icon ─────────────────────────────────────── function ErrorBanner({ message }) { return (
{message}
); } // ─── Loading spinner ────────────────────────────────────────────── function Spinner() { return ( ); } // ─── Field ──────────────────────────────────────────────────────── function Field({ label, type = 'text', value, onChange, placeholder, onKeyDown, disabled }) { return ( ); } // ─── Modal shell ────────────────────────────────────────────────── function ModalShell({ children, onClose }) { return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 480, maxHeight: '90vh', overflowY: 'auto', background: '#15151a', borderTopLeftRadius: 22, borderTopRightRadius: 22, border: '0.5px solid rgba(255,255,255,0.08)', borderBottom: 'none', boxShadow: '0 -20px 60px rgba(0,0,0,0.6)', animation: 'vhSlideUp 280ms cubic-bezier(.2,.7,.2,1)', }} >
{children}
); } // ─── Google logo glyph ──────────────────────────────────────────── function GoogleGlyph() { return ( ); } Object.assign(window, { AuthModal, getAuthErrorMessage });