[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","alexmcroberts","name","cratewalk-loggedin","path","frontend/shared/LoginScreen.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/alexmcroberts/cratewalk-loggedin/code/frontend/shared/LoginScreen.tsx","extension","id","fe19fd13-33b0-42f0-a7bd-22d962308143","LoginScreen.tsx","fileId","5d54f32e-a890-11f1-8a9f-1607ee4eb77e","parentId","5cea8fc0-a890-11f1-8a9f-1607ee4eb77e","branchId","548f9140-a1c9-476c-84a6-0db44da905ac","branchVersion",39,"latest",true,"createdAt",["D",1789084523402],"version",6,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useId, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AppConfig, HintedAccount } from \"./types.ts\";\nimport { loginUrl, searchActors, typeaheadClient, typeaheadQuery, type TypeaheadActor } from \"./api.ts\";\nimport { loadLoggedinRenderer, loadOriginLabels } from \"./loggedin.ts\";\n\ntype Props = {\n config: AppConfig;\n};\n\nexport function LoginScreen({ config }: Props) {\n const iframeRef = useRef(null);\n const listRef = useRef(null);\n const comboRef = useRef(null);\n const listboxId = useId();\n const [handle, setHandle] = useState(\"\");\n const [status, setStatus] = useState(\"Looking for AT Proto accounts already used on this device…\");\n const [error, setError] = useState(\"\");\n const [accounts, setAccounts] = useState([]);\n const [suggestions, setSuggestions] = useState([]);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n const list = listRef.current;\n if (!iframe || !list) return;\n\n let cancelled = false;\n (async () => {\n try {\n const Loggedin = await loadLoggedinRenderer(config.loggedinOrigin);\n const labels = await loadOriginLabels(config.loggedinOrigin);\n if (cancelled) return;\n\n const startOauth = (did: string, resolvedHandle?: string) => {\n location.href = loginUrl(resolvedHandle && !resolvedHandle.startsWith(\"did:\") ? resolvedHandle : did);\n };\n\n Loggedin.listenForPicked(config.loggedinOrigin, (did) => startOauth(did));\n Loggedin.mountEmbed(iframe, `${config.loggedinOrigin}/embed`, {\n onReady: () => setStatus(\"This browser already has a loggedin.fyi session. Pick an account below.\"),\n onNeedsAccess: () =>\n setStatus(\"Use Continue in the embed to grant this site access to the loggedin.fyi cookie. A grant here does not cover the other demo.\"),\n onPopup: () =>\n setStatus(\"Storage access was denied. Use the first-party chooser, or sign in with a handle.\"),\n onUnavailable: () =>\n setStatus(\"This browser blocked the silent cookie. Use the button in the embed, or sign in with a handle.\"),\n onAccounts: (next) => {\n setAccounts(next);\n Loggedin.renderAccountList(list, next, {\n originLabels: labels,\n onPick: startOauth,\n });\n if (next.length) {\n setStatus(\"These AT Proto accounts were saved on this device by another client.\");\n } else {\n setStatus(\"No hinted accounts yet. Sign in below, then the other demo can offer this account.\");\n }\n },\n onPicked: (did) => startOauth(did),\n });\n } catch (err) {\n if (!cancelled) setError(err instanceof Error ? err.message : \"loggedin.fyi is unreachable\");\n }\n })();\n\n return () => {\n cancelled = true;\n iframe.removeAttribute(\"src\");\n };\n }, [config.loggedinOrigin]);\n\n useEffect(() => {\n const q = typeaheadQuery(handle);\n if (!q) {\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n return;\n }\n const ac = new AbortController();\n const timer = setTimeout(async () => {\n try {\n const actors = await searchActors(q, typeaheadClient(config.origin || location.origin), ac.signal);\n setSuggestions(actors);\n setOpen(actors.length > 0);\n setActiveIndex(actors.length > 0 ? 0 : -1);\n } catch (err) {\n if (err instanceof DOMException && err.name === \"AbortError\") return;\n setSuggestions([]);\n setOpen(false);\n setActiveIndex(-1);\n }\n }, 250);\n return () => {\n clearTimeout(timer);\n ac.abort();\n };\n }, [config.origin, handle]);\n\n useEffect(() => {\n function onPointerDown(event: MouseEvent) {\n if (comboRef.current && !comboRef.current.contains(event.target as Node)) {\n setOpen(false);\n }\n }\n document.addEventListener(\"mousedown\", onPointerDown);\n return () => document.removeEventListener(\"mousedown\", onPointerDown);\n }, []);\n\n const crate = config.slug === \"cratewalk\";\n\n function pickActor(actor: TypeaheadActor) {\n setHandle(actor.handle);\n setSuggestions([]);\n setOpen(false);\n location.href = loginUrl(actor.handle);\n }\n\n function onHandleKeyDown(event: React.KeyboardEvent) {\n if (!open || suggestions.length === 0) {\n if (event.key === \"Escape\") setOpen(false);\n return;\n }\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n setActiveIndex((i) => (i + 1) % suggestions.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n setActiveIndex((i) => (i <= 0 ? suggestions.length - 1 : i - 1));\n } else if (event.key === \"Enter\" && activeIndex >= 0 && suggestions[activeIndex]) {\n event.preventDefault();\n pickActor(suggestions[activeIndex]);\n } else if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n }\n }\n\n return (\n

\n \n \n {crate ? \"Demo B · Cratewalk\" : \"Demo A · Lightbox\"}\n

\n {config.appName}\n

\n {config.tagline} Sign in with the usual Bluesky / AT Proto OAuth flow. If another participating client\n already heartbeated on this device, pick that account instead.\n

\n\n {\n const value = handle.trim();\n if (!value) {\n event.preventDefault();\n setError(\"Enter a handle like alice.bsky.social\");\n }\n }}\n >\n \n Handle or DID\n \n

\n {\n setHandle(event.target.value);\n setError(\"\");\n }}\n onKeyDown={onHandleKeyDown}\n onFocus={() => {\n if (suggestions.length) setOpen(true);\n }}\n placeholder=\"you.bsky.social\"\n autoComplete=\"off\"\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={open && activeIndex >= 0 ? `${listboxId}-${activeIndex}` : undefined}\n className={\n crate\n ? \"w-full border-4 border-black bg-[#fff6df] px-3 py-2 font-mono text-sm text-[#1b1208] outline-none\"\n : \"w-full rounded-lg border border-[#4a4336] bg-[#0e0c0a] px-3 py-2.5 font-mono text-sm text-[#f6efe2] outline-none focus:border-[#d4a017]\"\n }\n />\n {open && suggestions.length > 0 ? (\n \n {suggestions.map((actor, index) => {\n const active = index === activeIndex;\n return (\n

\n setActiveIndex(index)}\n onClick={() => pickActor(actor)}\n className={\n crate\n ? `flex w-full items-center gap-2 px-2 py-2 text-left font-mono text-xs ${\n active ? \"bg-[#6b2d6b] text-[#fff6df]\" : \"text-[#1b1208]\"\n }`\n : `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${\n active ? \"bg-[#2a241c] text-[#f6efe2]\" : \"text-[#d9d0be]\"\n }`\n }\n >\n {actor.avatar ? (\n \n ) : (\n \n )}\n \n {actor.displayName || `@${actor.handle}`}\n \n @{actor.handle}\n \n \n \n

\n );\n })}\n \n ) : null}\n

\n \n Sign in with Bluesky\n \n \n\n

\n\n

\n Already used on this device\n

{status}

\n \n \n {accounts.length === 0 ? null : (\n

\n Picking one starts a normal PDS OAuth login with that DID as the hint — not a new sign-in service.\n

\n )}\n {error ? (\n

{error}

\n ) : null}\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","shared","6e941c33-a65c-4d6d-9817-70d284ac3de5",["D",1788547090141],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","4a195d61-960e-47fc-a2de-babac7864ff9","pinnedFileId","5d1d09f0-a890-11f1-a0db-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","4281254f-bfbc-421d-89b2-3fe0572f0e97","tursoName","6e941c33a65c4d6d981770d284ac3de5","tursoHostname","6e941c33a65c4d6d981770d284ac3de5-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512647429],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_102":-5,"_103":104,"_59":60,"_105":106,"_107":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhUQ1k1VHlSUENxb1FtUlRYZUVXbWRNOSIsImluaXRpYWxzIjoiQU0ifQ","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":67,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":93,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]