// ═══════════════════════════════════════════════════════════════ // Google Sign-In — OAuth 2.0 / Google Identity Services // // Production flow: // 1. Admin sets GOOGLE_CLIENT_ID in Settings (state.branding.googleClientId) // 2. We load https://accounts.google.com/gsi/client // 3. Render google.accounts.id.renderButton(...) // 4. Callback receives a JWT ID token. We decode (no verify here — // real verification happens on the backend when it lands). // 5. Extract email, match against state.users. // 6. If matched & user.activated → log in. // If invitation token exists for this email → activate + log in. // Else → show friendly "not authorized" error. // // Demo mode (default): // If no GOOGLE_CLIENT_ID configured, we show a demo button that // opens a modal listing every demo user's email — the admin picks // and we "pretend" that user signed in via Google. The whole thing // is clearly labeled demo so no one is fooled. // // To enable real Google Sign-In: // 1. Create a Client ID at https://console.cloud.google.com/ // (type: Web application, authorized origins: your domain) // 2. Paste into Settings → Branding → Google Client ID // 3. Reload. The real button appears instead of the demo one. // ═══════════════════════════════════════════════════════════════ const { useState: uSGL, useEffect: uEGL, useRef: uRGL } = React; // Decode a JWT ID token without verifying signature (verification is // a backend responsibility). Returns null on malformed input. window.decodeGoogleJWT = function(jwt) { try { const [, payload] = jwt.split('.'); const json = atob(payload.replace(/-/g, '+').replace(/_/g, '/')); return JSON.parse(decodeURIComponent( json.split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('') )); } catch { return null; } }; // ─────────────────────────────────────────────── // The main Google sign-in button (real OR demo) // ─────────────────────────────────────────────── window.GoogleSignInButton = function GoogleSignInButton() { const { state, login, activateInvitation } = window.useApp(); const toast = window.useToast(); const [demoOpen, setDemoOpen] = uSGL(false); const [pendingError, setPendingError] = uSGL(null); const realBtnRef = uRGL(null); const clientId = state.branding?.googleClientId || ''; const hasRealOAuth = !!clientId; // Handle the result of any Google login (real or demo) uniformly const handleGoogleUser = async ({ email, name, picture }) => { if (!email) { setPendingError('לא התקבלה כתובת דוא"ל מ-Google'); return; } const normalized = email.toLowerCase().trim(); // Match by email against existing users let user = (state.users || []).find(u => (u.email || '').toLowerCase() === normalized); // If pending invitation, activate it using Google profile if (user && !user.activated && user.inviteToken) { try { // Auto-generate a long random password (user can change later in My Account) const autoPwd = Array.from(crypto.getRandomValues(new Uint8Array(12))).map(b => b.toString(16).padStart(2, '0')).join(''); await activateInvitation(user.inviteToken, { newPassword: autoPwd, email: normalized, name: name || user.name }); toast.push({ type: 'success', title: 'ברוך/ה הבא/ה!', message: 'ההזמנה הופעלה אוטומטית דרך Google' }); login(user.id); return; } catch (e) { setPendingError(e.message || 'שגיאה בהפעלה אוטומטית'); return; } } if (!user) { setPendingError(`הכתובת ${normalized} לא קיימת במערכת. פנה אל הרכז המנהל שיזמין אותך.`); return; } // SECURITY: defense in depth — verify the user is activated and has // credentials before logging in, even though OAuth already authenticated // them. Prevents logging in as an invited-but-not-activated user. if (window.userCanLogin && !window.userCanLogin(user) && !(user.activated === false && user.inviteToken)) { setPendingError('חשבון זה אינו מוגדר לכניסה. פנה אל המנהל.'); return; } setPendingError(null); login(user.id); toast.push({ type: 'success', title: 'ברוך/ה הבא/ה', message: `התחברת כ-${user.name}` }); }; // Load GSI SDK once + render the real button when configured uEGL(() => { if (!hasRealOAuth) return; let cancelled = false; const ready = () => { if (cancelled || !window.google?.accounts?.id) return; window.google.accounts.id.initialize({ client_id: clientId, callback: (response) => { const profile = window.decodeGoogleJWT(response.credential); if (!profile) { setPendingError('JWT שגוי'); return; } handleGoogleUser({ email: profile.email, name: profile.name, picture: profile.picture }); }, auto_select: false, context: 'signin' }); if (realBtnRef.current) { window.google.accounts.id.renderButton(realBtnRef.current, { type: 'standard', theme: 'outline', size: 'large', shape: 'rectangular', text: 'signin_with', locale: 'he', width: 360 }); } }; if (window.google?.accounts?.id) ready(); else { const script = document.createElement('script'); script.src = 'https://accounts.google.com/gsi/client'; script.async = true; script.defer = true; script.onload = ready; document.head.appendChild(script); } return () => { cancelled = true; }; }, [hasRealOAuth, clientId]); if (hasRealOAuth) { return (
{pendingError && (
{pendingError}
)}
); } // SECURITY: When no real OAuth is configured, we render NOTHING on the // public login page. The previous demo picker allowed anyone opening the // site to log in as any user (including admin) without a password — that // was only safe in a private dev environment, absolutely not on an // internet-facing deployment. Admins can still test the UI by going to // Settings → Google OAuth and pasting a real Client ID. return null; }; // ─────────────────────────────────────────────── // Demo picker modal — lists existing users so the "Google account" // can be simulated for demo purposes. // ─────────────────────────────────────────────── window.GoogleDemoPicker = function GoogleDemoPicker({ onClose, onPick }) { const { state } = window.useApp(); const [q, setQ] = uSGL(''); const users = (state.users || []).filter(u => u.email && ( u.name.toLowerCase().includes(q.toLowerCase()) || u.email.toLowerCase().includes(q.toLowerCase()) )); return ReactDOM.createPortal(
e.stopPropagation()}>

כניסה עם Google

DEMO

בחר חשבון Google לדמו. בפרודקשן יופיע כאן popup אמיתי של Google.

setQ(e.target.value)} placeholder="חיפוש לפי שם או דוא״ל..." className="input pr-9" autoFocus />
{users.length === 0 && (
לא נמצאו משתמשים
)} {users.map(u => { const auth = u.authorityId ? state.authorities.find(a => a.id === u.authorityId) : null; const roleLabel = { local: 'רכז מקומי', national: 'רכז ארצי', admin: 'מנהל מערכת', audit: 'בקרה' }[u.role] || u.role; return ( ); })}
💡 בכניסה אמיתית: לחיצה פותחת popup של Google, המשתמש נותן הרשאה, ואנחנו מקבלים את פרטיו מהדומיין.
, document.body ); }; // ─────────────────────────────────────────────── // Settings field for Google Client ID — embedded in SettingsPageV2 // ─────────────────────────────────────────────── window.GoogleClientIdField = function GoogleClientIdField() { const { state, setState } = window.useApp(); const toast = window.useToast(); const current = state.branding?.googleClientId || ''; const [val, setVal] = uSGL(current); const save = () => { setState(s => ({ ...s, branding: { ...(s.branding || {}), googleClientId: val.trim() || null } })); toast.push({ type: 'success', title: val.trim() ? 'Google OAuth הופעל' : 'Google OAuth כובה', message: val.trim() ? 'לחצן כניסה אמיתי יופיע בעמוד הבית' : 'חוזר למצב demo' }); }; return (

Google OAuth (כניסה עם Google)

הזן Client ID כדי להפעיל כניסה אמיתית מול Google

setVal(e.target.value)} className="input" placeholder="1234567890-abc...apps.googleusercontent.com" dir="ltr" />
{current ? '✓ OAuth אמיתי מופעל' : '⚠ מופעל מצב demo'}
שמור
איך מגדירים: Google Cloud Console → Credentials → Create OAuth Client ID → Web application → Authorized JavaScript origins: הוסף את https://haredim.91-99-172-21.nip.io (או הדומיין הקבוע שלך).
); };