// Login — Google sign-in, restricted to @skilllane.com // Desktop: split navy panel + form. Mobile: full navy. const GoogleG = ({ size = 18 }) => ( ); const decodeGoogleJwt = (credential) => { const b64 = credential.split('.')[1].replace(/-/g, '+').replace(/_/g, '/'); return JSON.parse(atob(b64)); }; const ALLOWED_EMAILS = [ 'kasidesh@skilllane.com', 'peeti@skilllane.com', 'thitichaya@skilllane.com', ]; const LoginScreen = ({ onSignIn, theme }) => { const [phase, setPhase] = React.useState('idle'); // idle | loading | error const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); const gsiRef = React.useRef(null); const isGsiConfigured = window.GOOGLE_CLIENT_ID && window.GOOGLE_CLIENT_ID !== 'REPLACE_WITH_YOUR_GOOGLE_CLIENT_ID'; React.useEffect(() => { if (!isGsiConfigured) return; const init = () => { if (!window.google?.accounts?.id) return; window.google.accounts.id.initialize({ client_id: window.GOOGLE_CLIENT_ID, hosted_domain: 'skilllane.com', callback: (response) => { try { const payload = decodeGoogleJwt(response.credential); if (!ALLOWED_EMAILS.includes(payload.email)) { setError({ title: 'Access restricted', body: "You don't have access to this prototype. Contact Thitichaya to request access." }); return; } onSignIn(payload.email, { name: payload.name, given_name: payload.given_name, family_name: payload.family_name, picture: payload.picture }); } catch { setError({ title: 'Sign-in failed', body: 'Could not complete Google sign-in. Please try again.' }); } }, }); if (gsiRef.current) { window.google.accounts.id.renderButton(gsiRef.current, { theme: theme === 'dark' ? 'filled_black' : 'outline', size: 'large', width: 400, text: 'continue_with', logo_alignment: 'left', }); } }; if (window.__googleReady) init(); else window.addEventListener('googleReady', init); return () => window.removeEventListener('googleReady', init); }, [isGsiConfigured, theme]); const ACCOUNTS = [ { email: 'thitichaya.c@skilllane.com', ok: true, reason: null, role: 'Admin' }, { email: 'somsak.c@skilllane.com', ok: true, reason: null, role: 'Member' }, { email: 'guest@gmail.com', ok: false, reason: 'domain', role: null }, { email: 'contractor@outlook.com', ok: false, reason: 'domain', role: null }, { email: 'deactivated@skilllane.com', ok: false, reason: 'deactivated', role: null }, ]; const attempt = (mail) => { setEmail(mail); setError(null); setPhase('loading'); setTimeout(() => { const hit = ACCOUNTS.find(a => a.email === mail); // Default behavior: if email matches @skilllane.com and isn't a known-bad account, succeed. const domainOk = /@skilllane\.com$/i.test(mail); if (hit && !hit.ok) { setPhase('error'); setError(hit.reason === 'deactivated' ? { title: 'Account deactivated', body: 'This SkillLane account is no longer active. Contact People Ops to restore access.' } : { title: 'Unauthorized email domain', body: 'SkillLane Merit is available to @skilllane.com accounts only. Sign in with your work email.' } ); return; } if (!domainOk) { setPhase('error'); setError({ title: 'Unauthorized email domain', body: 'SkillLane Merit is available to @skilllane.com accounts only. Sign in with your work email.' }); return; } onSignIn(mail); }, 900); }; const formPanel = (
Sign in

SkillLane Merit

SkillLane Merit is restricted to @skilllane.com accounts.

{/* Error banner */}
{error && (
!
{error?.title}
{error?.body}
)}
{/* Google button — real GSI when configured, fake button for prototype demos */} {isGsiConfigured ? (
) : ( )}
Try a test account:
{ACCOUNTS.map(a => ( ))}
Prototype shortcuts
{[ ['V', 'Toggle desktop / mobile view'], ['?', 'View all shortcuts'], [',', 'Open design tokens'], ].map(([key, desc]) => (
{key} {desc}
))}
); return (
Internal · {new Date().getFullYear()}

Recognition, measured.

SkillLane's internal merit & rewards platform — for the people who make the company move.

{formPanel}
); }; const Stat = ({label, value}) => (
{value}
{label}
); const Spinner = () => ( ); // Mobile const LoginScreenMobile = ({ onSignIn }) => { const [phase, setPhase] = React.useState('idle'); const [error, setError] = React.useState(null); const gsiMobileRef = React.useRef(null); const isGsiConfigured = window.GOOGLE_CLIENT_ID && window.GOOGLE_CLIENT_ID !== 'REPLACE_WITH_YOUR_GOOGLE_CLIENT_ID'; React.useEffect(() => { if (!isGsiConfigured) return; const init = () => { if (!window.google?.accounts?.id) return; window.google.accounts.id.initialize({ client_id: window.GOOGLE_CLIENT_ID, hosted_domain: 'skilllane.com', callback: (response) => { try { const payload = decodeGoogleJwt(response.credential); if (!ALLOWED_EMAILS.includes(payload.email)) { setError({ title: 'Access restricted', body: "You don't have access to this prototype." }); return; } onSignIn(payload.email, { name: payload.name, given_name: payload.given_name, family_name: payload.family_name, picture: payload.picture }); } catch {} }, }); if (gsiMobileRef.current) { window.google.accounts.id.renderButton(gsiMobileRef.current, { theme: 'filled_black', size: 'large', width: 340, text: 'continue_with', }); } }; if (window.__googleReady) init(); else window.addEventListener('googleReady', init); return () => window.removeEventListener('googleReady', init); }, [isGsiConfigured]); const ACCOUNTS = [ { email: 'thitichaya.c@skilllane.com', ok: true, reason: null, role: 'Admin' }, { email: 'somsak.c@skilllane.com', ok: true, reason: null, role: 'Member' }, { email: 'guest@gmail.com', ok: false, reason: 'domain', role: null }, { email: 'contractor@outlook.com', ok: false, reason: 'domain', role: null }, { email: 'deactivated@skilllane.com', ok: false, reason: 'deactivated', role: null }, ]; const attempt = (mail) => { setError(null); setPhase('loading'); setTimeout(() => { const hit = ACCOUNTS.find(a => a.email === mail); const domainOk = /@skilllane\.com$/i.test(mail); if ((hit && !hit.ok) || !domainOk) { setPhase('error'); setError(hit && hit.reason === 'deactivated' ? { title: 'Account deactivated', body: 'This SkillLane account is no longer active. Contact People Ops.' } : { title: 'Unauthorized email domain', body: 'Sign in with your @skilllane.com work email.' }); return; } onSignIn(mail); }, 800); }; return (
Internal · {new Date().getFullYear()}

Recognition,
measured.

Restricted to @skilllane.com accounts.

{error && (
!
{error.title}
{error.body}
)} {isGsiConfigured ? (
) : ( )}
{ACCOUNTS.map(a => ( ))}
Prototype shortcuts
{[ ['V', 'Toggle desktop / mobile view'], ['?', 'View all shortcuts'], [',', 'Open design tokens'], ].map(([key, desc]) => (
{key} {desc}
))}
); }; Object.assign(window, { LoginScreen, LoginScreenMobile });