\n \n \n \n",[],[228,230],"c7b108f2-536e-11f0-a449-f69ea79377d9","LoginForm.tsx","1ce7334f-3c08-4cca-a088-25d7b07f217e","8949cedd-181a-4965-bd37-ffe5a24c1e17",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\n\nexport function LoginForm({ onLogin, onError }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n onError(\"\"); // Clear any previous errors\n\n try {\n const response = await fetch(\"/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apiKey }),\n });\n\n const data = await response.json();\n\n if (data.success) {\n setApiKey(\"\");\n onLogin(data.user);\n } else {\n onError(data.error || \"Login failed\");\n }\n } catch (err) {\n onError(\"Network error. Please try again.\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Val Town + Pipedream Connect

Please enter your Val Town API key to get started.

\n\n

\n );\n}",[],[228,244,237],"components","c7b10744-536e-11f0-a449-f69ea79377d9","Home.tsx","3f7b5ff5-6700-4c9e-ba4e-307389117eb4",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\nimport { LoginForm } from \"./LoginForm.tsx\";\n\nexport function Home({ user, pipedreamToken }) {\n const [error, setError] = useState(\"\");\n\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.href = \"/\";\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (!user) {\n return (\n <>\n \n console.log(x)} onError={handleError} />\n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[228,244,246],"c7b1051e-536e-11f0-a449-f69ea79377d9","ErrorMessage.tsx","7343ac5c-9a95-4303-9f4f-5f37fdd3e111",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ErrorMessage({ error, onDismiss }) {\n if (!error) return null;\n\n return (\n \n {error}\n {onDismiss && (\n \n ×\n \n )}\n \n );\n}",[],[228,244,253],"c7b0f362-536e-11f0-a449-f69ea79377d9","Dashboard.tsx","fe7eef6b-50cf-4b77-aa82-d2f13feb2c77",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport {\n ComponentForm\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?&deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0?\";\nimport { AccountsList } from \"./AccountsList.tsx\";\n\nexport function Dashboard(\n { user, pipedreamToken, onLogout, onError },\n) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\n \"action\",\n );\n const [configuredProps, setConfiguredProps] = useState({});\n\n // Create Pipedream frontend client\n const frontendClient = createFrontendClient({\n environment: \"development\", // TODO: Make this configurable\n externalUserId: user.id,\n tokenCallback: async () => {\n // Return the token that was passed as a prop\n return { token: pipedreamToken };\n },\n });\n\n useEffect(() => {\n loadAccounts();\n }, []);\n\n const loadAccounts = async () => {\n try {\n // Load user's connected accounts\n const accountsResponse = await fetch(\"/api/pipedream/accounts\");\n const accountsData = await accountsResponse.json();\n if (accountsData.accounts && Array.isArray(accountsData.accounts)) {\n setAccounts(accountsData.accounts);\n } else {\n console.warn(\"Accounts data is not an array:\", accountsData);\n setAccounts([]);\n }\n } catch (err) {\n console.error(\"Failed to load accounts:\", err);\n onError(\"Failed to load accounts. Please try refreshing the page.\");\n setAccounts([]);\n }\n };\n\n const handleComponentTypeChange = (newType: \"action\" | \"trigger\") => {\n setComponentType(newType);\n setSelectedComponent(null); // Reset component when type changes\n };\n\n const handleComponentSubmit = async (ctx) => {\n try {\n if (componentType === \"action\" ) {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent.key,\n configuredProps: ctx.configuredProps,\n })\n };\n // TODO trigger\n } catch (error) {\n console.error(`Failed to execute ${componentType}:`, error);\n onError(`Failed to execute ${componentType}: ${error.message}`);\n }\n };\n\n return (\n

\n \n

Pipedream Connect

Welcome, {user?.username}!

\n \n Logout\n \n \n\n \n

Connect Apps & Build Workflows

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select Component Type:\n \n \n handleComponentTypeChange(\n e.target.value as \"action\" | \"trigger\",\n )}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n >\n \n \n \n

\n )}\n\n {selectedApp && (\n

\n \n 3. Select{\" \"}\n {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Configure{\" \"}\n {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n \n

\n                 const result = await frontendClient.actionRun(\n                {JSON.stringify({\n                    externalUserId: user.id,\n                    actionId: selectedComponent.key,\n                    configuredProps: configuredProps,\n                  }, null, 2)}\n                 )\n

\n )}\n \n \n\n \n \n );\n}",[],[228,244,260],"c7b0eeb2-536e-11f0-a449-f69ea79377d9","AccountsList.tsx","348e0b37-1ca8-4196-854a-1d1723cecf5f",["D",1751039570946],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nexport function AccountsList({ accounts }) {\n return (\n

Your Connected Accounts

\n {!Array.isArray(accounts) || accounts.length === 0\n ? (\n

\n No connected accounts yet. Connect an app above to get started.\n

\n )\n : (\n

\n {accounts.map((account) => (\n \n \n

\n {account.app?.name || \"Unknown App\"}\n

\n \n {account.name || \"Connected Account\"}\n

\n Connected: {account.created_at\n ? new Date(account.created_at).toLocaleDateString()\n : \"Unknown\"}\n

\n \n {account.app?.auth_type || \"Unknown\"}\n \n

\n \n ))}\n \n )}\n

\n );\n}",[],[228,244,267],"c7b10d66-536e-11f0-a449-f69ea79377d9",["D",1751039570946],[204,205,206,207,208],[228,244],"c7b1131a-536e-11f0-a449-f69ea79377d9",["D",1751039570946],[203,209,210],[228],["D",1751039570946],[],[18,76],["D",1751039570946],[],[18,89],["D",1751039570946],[],[18,96],["D",1751039570946],[199,200,201],[18],["D",1751039570946],{"_11":12,"_144":82},{"_11":12,"_140":-5,"_81":82,"_31":80,"_141":142,"_143":30},{"_39":40,"_13":16,"_33":36,"_132":100,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":14,"_139":12},"ctx",{"_52":-5,"_163":330,"_331":332,"_333":334,"_335":30,"_336":30,"_337":30,"_338":24,"_339":-5,"_340":-7,"_341":-7,"_342":26,"_343":30,"_344":30,"_345":-5,"_346":30,"_347":30,"_348":30,"_349":-5},"ENV",{"_301":302,"_303":304,"_305":16,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend