// Login + signup + forgot-password flow. // Tenant is auto-detected from email → dropdown shown if email belongs to >1 company. const SUPER_ADMIN_EMAIL = "superadmin@raciworks.io"; // Build a global index of email → [tenant] for the prototype: // in real life this is a backend lookup; for the demo, we union the tenant admins, // demo accounts, and the users table (ABC tenant) so the UX feels realistic. const emailToTenants = (emailLower) => { const set = new Map(); // tenant_id -> role hint if (!emailLower) return []; // tenant admins Object.entries(TENANT_ADMIN_USERS).forEach(([tid, a]) => { if (a.email.toLowerCase() === emailLower) set.set(tid, { role: "admin", user_id: null }); }); // demo accounts DEMO_ACCOUNTS.forEach(d => { if (d.email.toLowerCase() === emailLower && d.tenant_code) { const t = TENANTS.find(x => x.tenant_code === d.tenant_code); if (t && !set.has(t.id)) set.set(t.id, { role: d.role, user_id: d.user_id || null }); } }); // ABC tenant employees USERS.forEach(u => { if (u.email.toLowerCase() === emailLower && u.status === "active") { const tid = "t_abc"; if (!set.has(tid)) set.set(tid, { role: u.system_role, user_id: u.id }); } }); return Array.from(set.entries()).map(([tid, info]) => ({ tenant: TENANTS.find(t => t.id === tid), ...info })); }; // Build the global list of all known emails — used for signup duplicate-check const allKnownEmails = () => { const set = new Set(); set.add(SUPER_ADMIN_EMAIL); Object.values(TENANT_ADMIN_USERS).forEach(a => set.add(a.email.toLowerCase())); DEMO_ACCOUNTS.forEach(d => set.add(d.email.toLowerCase())); USERS.forEach(u => set.add(u.email.toLowerCase())); return set; }; const LoginScreen = ({ onLogin }) => { const [mode, setMode] = useState("login"); // login | signup | change const [email, setEmail] = useState(""); const [pwd, setPwd] = useState(""); const [remember, setRemember] = useState(true); const [err, setErr] = useState(""); const [busy, setBusy] = useState(false); const [showPwd, setShowPwd] = useState(false); const [demoOpen, setDemoOpen] = useState(true); const [selectedTenantId, setSelectedTenantId] = useState(null); const [apiMatches, setApiMatches] = useState([]); // Tracks whether email exists in users table at all (vs. zero memberships) const [apiUserExists, setApiUserExists] = useState(null); // null=unknown, true/false=resolved // When email changes, recompute tenant matches & reset selection if needed const emailLower = email.trim().toLowerCase(); const isSuperAdminEmail = emailLower === SUPER_ADMIN_EMAIL; const localMatches = useMemo( () => isSuperAdminEmail ? [] : emailToTenants(emailLower), [emailLower, isSuperAdminEmail] ); // Merge local + API matches (de-duped by tenant.id) const tenantMatches = useMemo(() => { const map = new Map(); localMatches.forEach(m => { if (m.tenant) map.set(m.tenant.id, m); }); apiMatches.forEach(m => { if (m.tenant && !map.has(m.tenant.id)) map.set(m.tenant.id, m); }); return Array.from(map.values()); }, [localMatches, apiMatches]); // Look up email via API (debounced) — also tells us if user identity exists at all useEffect(() => { if (!emailLower || isSuperAdminEmail || typeof window === "undefined" || !window.apiClient) { setApiMatches([]); setApiUserExists(null); return; } let cancelled = false; const handle = setTimeout(async () => { try { const res = await window.apiClient.findUserByEmail(emailLower); if (cancelled) return; const userExists = !!(res && res.user_exists); setApiUserExists(userExists); const tenants = (res && res.tenants) || []; setApiMatches(tenants.map(r => ({ tenant: { id: r.tenant_id, tenant_code: r.tenant_code, company_name: r.company_name, service_status: r.service_status, accent: "indigo", }, role: r.role || "admin", user_id: res?.user?.user_id || null, }))); } catch (e) { if (!cancelled) { setApiMatches([]); setApiUserExists(null); } } }, 250); return () => { cancelled = true; clearTimeout(handle); }; }, [emailLower, isSuperAdminEmail]); useEffect(() => { // Auto-select if there's exactly one match; clear if 0 or selection no longer valid if (tenantMatches.length === 1) setSelectedTenantId(tenantMatches[0].tenant.id); else if (!tenantMatches.find(m => m.tenant.id === selectedTenantId)) setSelectedTenantId(null); }, [emailLower, tenantMatches.length]); const submitLogin = async (e) => { e?.preventDefault?.(); setErr(""); if (!email) { setErr("กรุณากรอกอีเมล"); return; } if (!pwd) { setErr("กรุณากรอกรหัสผ่าน"); return; } // Require explicit tenant selection when multiple memberships detected if (!isSuperAdminEmail && tenantMatches.length > 1 && !selectedTenantId) { setErr("คุณเป็นสมาชิกของหลายบริษัท · กรุณาเลือกบริษัทที่ต้องการเข้า"); return; } setBusy(true); try { // Try real API login first if (typeof window !== "undefined" && window.apiClient) { // For single-tenant or already-selected → pass tenantId. Otherwise let server respond with multiple_tenants. const tenantId = selectedTenantId || (tenantMatches.length === 1 ? tenantMatches[0].tenant.id : null); const result = await window.apiClient.login(emailLower, pwd, tenantId); // Super Admin login path if (result.super_admin) { setBusy(false); onLogin({ kind: "super_admin", email: result.user.email, user_id: result.user.user_id, first_name: result.user.first_name, last_name: result.user.last_name, token: result.token, }); return; } // Server says user identity is valid but has no tenant memberships if (result.no_tenant) { setBusy(false); setErr("บัญชีของคุณยังไม่ได้ถูกผูกกับบริษัทใดในระบบ · กรุณาติดต่อผู้ดูแลระบบ"); return; } // Server may return multiple tenants — ask user to pick if (result.multiple_tenants) { setBusy(false); setErr("กรุณาเลือกบริษัทก่อนเข้าสู่ระบบ"); return; } setBusy(false); onLogin({ kind: "tenant", tenant_id: result.tenant.id, role: result.user.role, user_id: result.user.user_id, email: result.user.email, first_name: result.user.first_name, last_name: result.user.last_name, token: result.token, tenant: result.tenant, }); return; } // Fallback to local demo (no API available) if (tenantMatches.length === 0) { setErr("ไม่พบอีเมลนี้ในระบบ · กรุณาติดต่อผู้ดูแลระบบหรือสร้างบัญชีใหม่"); setBusy(false); return; } const tenantId = selectedTenantId || tenantMatches[0].tenant.id; const match = tenantMatches.find(m => m.tenant.id === tenantId); if (!match) { setErr("กรุณาเลือกบริษัท"); setBusy(false); return; } setTimeout(() => { setBusy(false); onLogin({ kind:"tenant", tenant_id: match.tenant.id, role: match.role || "admin", user_id: match.user_id || null, email, }); }, 350); } catch (apiErr) { setBusy(false); if (apiErr.status === 401) setErr("อีเมลหรือรหัสผ่านไม่ถูกต้อง"); else if (apiErr.status === 403) setErr("บริษัทของท่านถูกระงับการใช้งาน"); else if (apiErr.status === 423) setErr("บัญชีถูกล็อกชั่วคราว เนื่องจากใส่รหัสผ่านผิดหลายครั้ง กรุณารอ 15 นาที"); else setErr(apiErr.message || "ไม่สามารถเข้าสู่ระบบได้ กรุณาลองอีกครั้ง"); } }; const fillDemo = (acct) => { setMode("login"); setEmail(acct.email); setPwd(""); setErr(""); // selectedTenantId will auto-set via useEffect when email recomputes }; return (
{/* LEFT — brand panel */}
RACI Workspace
Multi-tenant SaaS
Daily Responsibility Matrix

ระบบบริหารงานประจำวัน
ตามหลัก RACI

จัดทำ ตรวจสอบ ติดตามสถานะรายวันของทุกกระบวนการในองค์กร ภายในระบบเดียวที่แยกข้อมูลแต่ละบริษัทอย่างสมบูรณ์ปลอดภัย

{[ { i:"shield", t:"Tenant Isolation", s:"ข้อมูลแต่ละบริษัทแยกฐานข้อมูล" }, { i:"workflow", t:"R / A / C / I", s:"กำหนดบทบาทชัดเจน" }, { i:"checkCircle", t:"Daily Status", s:"P → A → C → S" }, { i:"dashboard", t:"Executive Dashboard", s:"มอนิเตอร์ภาพรวมแบบ Real-time" }, ].map((f,i) => (
{f.t}
{f.s}
))}
© 2026 RACI Workspace — Demo prototype v1.4.0
{/* RIGHT — form */}
RACI Workspace
{mode === "login" && (
ลงชื่อเข้าใช้

ยินดีต้อนรับกลับมา

กรอกอีเมลของคุณ ระบบจะค้นหาบริษัทให้อัตโนมัติ

setEmail(e.target.value)} placeholder="you@company.co.th" autoFocus/> {email && !isSuperAdminEmail && apiUserExists === false && tenantMatches.length === 0 && (
ไม่พบอีเมลนี้ในระบบ
)} {/* Tenant picker — appears when email exists (with or without tenants) */} {!isSuperAdminEmail && (apiUserExists === true || tenantMatches.length > 0) && ( 1 ? `คุณมีบัญชีอยู่ ${tenantMatches.length} บริษัท` : "ตรวจพบบริษัทอัตโนมัติ" }> {tenantMatches.length === 0 ? (
ไม่มีบริษัทที่ลงทะเบียน
กรุณาให้ผู้ดูแลระบบเพิ่มคุณเป็นพนักงานของบริษัทก่อน
) : tenantMatches.length === 1 ? (
{tenantMatches[0].tenant.tenant_code}
{tenantMatches[0].tenant.company_short || tenantMatches[0].tenant.company_name}
{ROLE_META[tenantMatches[0].role]?.label || tenantMatches[0].role}
) : (
{tenantMatches.map(m => { const t = m.tenant; const sel = selectedTenantId === t.id; const blocked = t.service_status !== "active"; return ( ); })}
)} )} {isSuperAdminEmail && (
เข้าสู่ระบบในฐานะ Super Admin (SaaS Owner)
)}
setPwd(e.target.value)} placeholder="••••••••" className="pr-10"/>
setRemember(v=>!v)} label="จดจำการเข้าสู่ระบบ"/>
{err && (
{err}
)}
หรือ
ยังไม่มีบัญชี?
)} {mode === "signup" && setMode("login")}/>} {mode === "change" && setMode("login")}/>} {/* Demo accounts */}
{demoOpen && (
{DEMO_ACCOUNTS.map((d,i) => ( ))}
)}
); }; const SignupForm = ({ onBack }) => { const [submitted, setSubmitted] = useState(false); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [form, setForm] = useState({ full_name: "", email: "", phone: "", password: "", password2: "", }); const set = (k,v) => setForm(p => ({...p, [k]: v})); const [emailStatus, setEmailStatus] = useState({ checking: false, available: null }); // Live-check email uniqueness (debounced) useEffect(() => { if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) { setEmailStatus({ checking: false, available: null }); return; } let cancelled = false; setEmailStatus(s => ({ ...s, checking: true })); const handle = setTimeout(async () => { try { if (!window.apiClient) return; const res = await window.apiClient.checkEmailAvailable(form.email); if (!cancelled) setEmailStatus({ checking: false, available: !!res.available }); } catch { if (!cancelled) setEmailStatus({ checking: false, available: null }); } }, 350); return () => { cancelled = true; clearTimeout(handle); }; }, [form.email]); const submit = async (e) => { e.preventDefault(); setErr(""); if (!form.full_name.trim()) { setErr("กรุณากรอกชื่อ-นามสกุล"); return; } if (!form.email.trim()) { setErr("กรุณากรอกอีเมล"); return; } if (emailStatus.available === false) { setErr("อีเมลนี้มีบัญชีในระบบแล้ว · กรุณาใช้อีเมลอื่น"); return; } if (form.password !== form.password2) { setErr("รหัสผ่านไม่ตรงกัน"); return; } if (form.password.length < 6) { setErr("รหัสผ่านอย่างน้อย 6 ตัว"); return; } setBusy(true); try { if (typeof window !== "undefined" && window.apiClient) { await window.apiClient.signup({ full_name: form.full_name, email: form.email, phone: form.phone, password: form.password, }); } setSubmitted(true); } catch (apiErr) { setErr(apiErr.message || "ไม่สามารถสร้างบัญชีได้ กรุณาลองอีกครั้ง"); } finally { setBusy(false); } }; return (

สร้างบัญชีใหม่

เพียงไม่กี่ขั้นตอน คุณก็ใช้งานระบบได้ทันที

{!submitted ? (
set("full_name", e.target.value)} placeholder="เช่น สมหญิง ใจดี" required/> set("email", e.target.value)} placeholder="you@company.co.th" required/> {emailStatus.checking && (
กำลังตรวจสอบ...
)} {!emailStatus.checking && emailStatus.available === true && (
อีเมลนี้ยังไม่มีผู้ใช้ — ใช้ได้
)} set("phone", e.target.value)} placeholder="08x-xxx-xxxx"/> set("password", e.target.value)} placeholder="อย่างน้อย 6 ตัวอักษร" required/> set("password2", e.target.value)} placeholder="••••••••" required/> {err && (
{err}
)}
) : (
สร้างบัญชีเรียบร้อยแล้ว
เข้าสู่ระบบด้วยอีเมล {form.email} ได้ทันที
)}
); }; const ChangePasswordForm = ({ initialEmail = "", onBack }) => { const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [done, setDone] = useState(false); const [form, setForm] = useState({ email: initialEmail, current_password: "", new_password: "", new_password2: "", }); const set = (k, v) => setForm(p => ({ ...p, [k]: v })); const submit = async (e) => { e.preventDefault(); setErr(""); if (!form.email.trim()) { setErr("กรุณากรอกอีเมล"); return; } if (!form.current_password) { setErr("กรุณากรอกรหัสผ่านเดิม"); return; } if (form.new_password.length < 6) { setErr("รหัสผ่านใหม่ต้องมีอย่างน้อย 6 ตัวอักษร"); return; } if (form.new_password !== form.new_password2) { setErr("รหัสผ่านใหม่ทั้งสองช่องไม่ตรงกัน"); return; } if (form.new_password === form.current_password) { setErr("รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านเดิม"); return; } setBusy(true); try { if (typeof window !== "undefined" && window.apiClient) { await window.apiClient.changePasswordWithCredentials( form.email.trim(), form.current_password, form.new_password ); } setDone(true); } catch (apiErr) { if (apiErr.status === 401) setErr("อีเมลหรือรหัสผ่านเดิมไม่ถูกต้อง"); else if (apiErr.status === 423) setErr("บัญชีถูกล็อกชั่วคราว เนื่องจากใส่รหัสผ่านผิดหลายครั้ง"); else setErr(apiErr.message || "ไม่สามารถเปลี่ยนรหัสผ่านได้ กรุณาลองอีกครั้ง"); } finally { setBusy(false); } }; return (

เปลี่ยนรหัสผ่าน

ต้องยืนยันรหัสผ่านเดิมก่อนตั้งรหัสใหม่

{!done ? (
set("email", e.target.value)} placeholder="you@company.co.th" required autoFocus={!initialEmail}/> set("current_password", e.target.value)} placeholder="••••••••" required autoFocus={!!initialEmail}/> set("new_password", e.target.value)} placeholder="••••••••" required/> set("new_password2", e.target.value)} placeholder="••••••••" required/> {err && (
{err}
)}
) : (
เปลี่ยนรหัสผ่านเรียบร้อย
ใช้รหัสผ่านใหม่เข้าสู่ระบบได้ทันที
)}
); }; window.LoginScreen = LoginScreen;