/* global React, ReactDOM, RibbonVisual, TimeOfDayVisual, FieldVisual, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */ const { useState, useEffect, useRef, useCallback } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "variant": "ribbon", "darkVisual": true, "showTooltipHint": true, "headline": "Welcome back", "subline": "Sign in to your Method 8 workspace.", "accent": "#84caff", "formBg": "#eff8ff", "primaryBtn": "#354152", "headlineColor": "#0b4a6f", "theme": "light" }/*EDITMODE-END*/; function EggToast({ message, show }) { return (

✦ {message}

); } function GoogleIcon() { return ( ); } function MicrosoftIcon() { return ( ); } function BrandLogo() { // Dark wordmark in light mode, light wordmark in dark mode. // The mark (3 ribbons) stays brand cyan in both. The rounded tile is // light in light theme, dark in dark theme. return ( ); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPw, setShowPw] = useState(false); const [remember, setRemember] = useState(true); const [emailErr, setEmailErr] = useState(""); const [pwErr, setPwErr] = useState(""); const [submitting, setSubmitting] = useState(false); const [eggMessage, setEggMessage] = useState(null); const [eggShow, setEggShow] = useState(false); const showEgg = useCallback((msg) => { setEggMessage(msg); setEggShow(true); clearTimeout(showEgg._t); showEgg._t = setTimeout(() => setEggShow(false), 2400); }, []); const validate = () => { let ok = true; if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailErr("Enter a valid work email"); ok = false; } else setEmailErr(""); if (!password || password.length < 6) { setPwErr("Password must be at least 6 characters"); ok = false; } else setPwErr(""); return ok; }; const onSubmit = (e) => { e.preventDefault(); if (!validate()) return; setSubmitting(true); setTimeout(() => { setSubmitting(false); showEgg("Signed in (demo)"); }, 1400); }; // Reduce-motion respect const reduceMotion = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; // Apply form-side color tweaks via CSS variables useEffect(() => { const r = document.documentElement; const dark = r.getAttribute('data-theme') === 'dark'; r.style.setProperty('--form-bg', dark ? 'linear-gradient(180deg, #0e1626 0%, #0a111c 60%)' : `linear-gradient(180deg, ${t.formBg} 0%, #ffffff 60%)`); r.style.setProperty('--primary-btn', dark ? '#E6F4FF' : t.primaryBtn); r.style.setProperty('--primary-btn-hover', dark ? '#ffffff' : t.primaryBtn); r.style.setProperty('--link', dark ? '#7CD4FD' : t.primaryBtn); document.querySelectorAll('h1').forEach((h) => { h.style.color = dark ? '' : t.headlineColor; }); }, [t.formBg, t.primaryBtn, t.headlineColor, t.theme]); // Theme: light | dark | system useEffect(() => { const apply = () => { const sysDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; const dark = t.theme === 'dark' || (t.theme === 'system' && sysDark); document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light'); // Re-apply or override the headline color so dark mode wins over the tweak effect document.querySelectorAll('h1').forEach((h) => { h.style.color = dark ? '' : t.headlineColor; }); }; apply(); if (t.theme === 'system' && window.matchMedia) { const mq = window.matchMedia('(prefers-color-scheme: dark)'); mq.addEventListener('change', apply); return () => mq.removeEventListener('change', apply); } }, [t.theme, t.headlineColor]); const Visual = { ribbon: RibbonVisual, timeofday: TimeOfDayVisual, field: FieldVisual, }[t.variant] || RibbonVisual; return ( <>

{t.headline}

{t.subline}

or sign in with email

Work email

{ setEmail(e.target.value); if (emailErr) setEmailErr(""); }} placeholder="you@company.com" autoComplete="email"/>

{emailErr}

Password

{ setPassword(e.target.value); if (pwErr) setPwErr(""); }} placeholder="••••••••" autoComplete="current-password"/>

{pwErr}

setRemember(e.target.checked)}/> Remember for 30 days Forgot password?

Don't have an account? Request access

setTweak("variant", v)} options={[ { value: "ribbon", label: "A · Ribbon" }, { value: "timeofday", label: "B · Time" }, { value: "field", label: "C · Field" }, ]}/> setTweak("showTooltipHint", v)}/> setTweak("theme", v)} options={[ { value: "light", label: "Light" }, { value: "dark", label: "Dark" }, { value: "system", label: "Auto" }, ]}/> setTweak("headline", e.target.value)} style={{width:'100%',padding:'8px 10px',border:'1px solid #d0d5dd',borderRadius:6,font:'inherit',fontSize:13}}/> setTweak("subline", e.target.value)} style={{width:'100%',padding:'8px 10px',border:'1px solid #d0d5dd',borderRadius:6,font:'inherit',fontSize:13,marginTop:8}}/> setTweak("accent", v)} options={["#84caff", "#7CD4FD", "#a4bcfd", "#fec84b", "#75e0a7"]}/> setTweak("formBg", v)} options={["#eff8ff", "#ffffff", "#fafaf9", "#fef6ee", "#f5f3ff"]}/> setTweak("primaryBtn", v)} options={["#1570ef", "#354152", "#0086c9", "#079455", "#7c3aed"]}/> setTweak("headlineColor", v)} options={["#0b4a6f", "#101828", "#1570ef", "#7c2d12", "#1c1917"]}/> ); } ReactDOM.createRoot(document.getElementById("root")).render();