\n \n \n \n\n",[],[169,282],"66f300e2-5ac5-11f1-8fce-ee650bb23af1","App.tsx","65b726f0-5aab-11f1-b71e-ee650bb23af1","4d37c866-3303-4bf8-af87-1225386568f4",147,["D",1779993930732],23,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type {\n CreateSecretRequest,\n CreateSecretResponse,\n FetchSecretResponse,\n} from \"../../shared/types.ts\";\nimport {\n decryptData,\n deriveDeleteProof,\n encryptData,\n generatePassphrase,\n} from \"../../shared/crypto.ts\";\n\nconst EXPIRY_OPTIONS: { hours: number; label: string }[] = [\n { hours: 1, label: \"1 hour\" },\n { hours: 24, label: \"1 day\" },\n { hours: 72, label: \"3 days\" },\n { hours: 168, label: \"1 week\" },\n { hours: 720, label: \"30 days\" },\n];\n\nfunction Spinner() {\n return (\n \n \n \n \n );\n}\n\nfunction StepHeading({ n, children }: { n: number; children: React.ReactNode }) {\n return (\n

\n \n {n}\n \n

{children}

\n );\n}\n\nfunction CopyButton({ text }: { text: string }) {\n const [copied, setCopied] = useState(false);\n const handleCopy = useCallback(async () => {\n await navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }, [text]);\n return (\n \n {copied ? \"✓ copied\" : \"copy\"}\n \n );\n}\n\nasync function deleteSecretRequest(\n secretId: string,\n deleteProof: string,\n): Promise {\n const res = await fetch(`/api/secrets/${secretId}`, {\n method: \"DELETE\",\n headers: { \"X-Delete-Proof\": deleteProof },\n });\n if (!res.ok) throw new Error(await res.text());\n}\n\nfunction CreateView() {\n const [secret, setSecret] = useState(\"\");\n const [passphrase, setPassphrase] = useState(() => generatePassphrase());\n const [expiresInHours, setExpiresInHours] = useState(168);\n const [loading, setLoading] = useState(false);\n const [result, setResult] = useState<\n | { url: string; passphrase: string; secretId: string; deleteProof: string }\n | null\n >(null);\n const [deleting, setDeleting] = useState(false);\n const [deleted, setDeleted] = useState(false);\n const [error, setError] = useState(null);\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (result || deleted) return;\n let depth = 0;\n const onDragEnter = (e: DragEvent) => {\n if (!e.dataTransfer?.types.includes(\"Files\")) return;\n e.preventDefault();\n depth++;\n setIsDragging(true);\n };\n const onDragOver = (e: DragEvent) => {\n if (e.dataTransfer?.types.includes(\"Files\")) e.preventDefault();\n };\n const onDragLeave = () => {\n depth = Math.max(0, depth - 1);\n if (depth === 0) setIsDragging(false);\n };\n const onDrop = (e: DragEvent) => {\n const file = e.dataTransfer?.files[0];\n if (!file) return;\n e.preventDefault();\n depth = 0;\n setIsDragging(false);\n const reader = new FileReader();\n reader.onload = () => setSecret(String(reader.result ?? \"\"));\n reader.onerror = () => setError(\"Couldn't read that file.\");\n reader.readAsText(file);\n };\n document.addEventListener(\"dragenter\", onDragEnter);\n document.addEventListener(\"dragover\", onDragOver);\n document.addEventListener(\"dragleave\", onDragLeave);\n document.addEventListener(\"drop\", onDrop);\n return () => {\n document.removeEventListener(\"dragenter\", onDragEnter);\n document.removeEventListener(\"dragover\", onDragOver);\n document.removeEventListener(\"dragleave\", onDragLeave);\n document.removeEventListener(\"drop\", onDrop);\n };\n }, [result, deleted]);\n\n const handleSubmit = useCallback(async () => {\n if (!secret.trim()) {\n setError(\"Please enter a secret to share.\");\n return;\n }\n if (!passphrase.trim()) {\n setError(\"Please enter or generate a passphrase.\");\n return;\n }\n setLoading(true);\n setError(null);\n try {\n const { encrypted, iv, salt } = await encryptData(secret, passphrase);\n const deleteProof = await deriveDeleteProof(passphrase, salt);\n const body: CreateSecretRequest = {\n encrypted_data: encrypted,\n iv,\n salt,\n delete_proof: deleteProof,\n expires_in_hours: expiresInHours,\n };\n const res = await fetch(\"/api/secrets\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n if (!res.ok) throw new Error(await res.text());\n const data: CreateSecretResponse = await res.json();\n const url = `${window.location.origin}/s/${data.id}`;\n setResult({ url, passphrase, secretId: data.id, deleteProof });\n } catch (e: any) {\n setError(e.message || \"Something went wrong\");\n } finally {\n setLoading(false);\n }\n }, [secret, passphrase, expiresInHours]);\n\n const handleDelete = useCallback(async () => {\n if (!result) return;\n if (!confirm(\"Are you sure? This secret will be permanently deleted.\")) {\n return;\n }\n setDeleting(true);\n setError(null);\n try {\n await deleteSecretRequest(result.secretId, result.deleteProof);\n setDeleted(true);\n } catch (e: any) {\n setError(e.message || \"Failed to delete\");\n } finally {\n setDeleting(false);\n }\n }, [result]);\n\n if (deleted) {\n return (\n

\n Secret deleted. It has been permanently destroyed.\n

\n {\n setResult(null);\n setDeleted(false);\n setSecret(\"\");\n setPassphrase(generatePassphrase());\n }}\n className=\"w-full py-2 border border-gray-400 text-gray-800 hover:bg-gray-50 rounded transition-colors\"\n >\n Create a new secret\n \n

\n );\n }\n\n if (result) {\n return (\n

\n Encrypted. Share the link and passphrase via{\" \"}\n different channels.\n

\n Link\n

\n \n {result.url}\n \n \n

\n Passphrase\n

\n \n {result.passphrase}\n \n \n

\n {error && (\n

{error}

\n )}\n

\n {\n setResult(null);\n setSecret(\"\");\n setPassphrase(generatePassphrase());\n }}\n className=\"flex-1 py-2 border border-gray-400 hover:bg-gray-50 rounded transition-colors\"\n >\n Create another\n \n \n {deleting && }\n {deleting ? \"Deleting…\" : \"Delete\"}\n \n

\n );\n }\n\n return (\n

\n {isDragging && (\n

\n Drop file to load its contents\n

\n )}\n

\n Your secret\n setSecret(e.target.value)}\n placeholder=\"Enter secret text, or drag and drop a file…\"\n rows={4}\n className=\"w-full border border-gray-300 rounded p-3 font-mono text-sm placeholder-gray-400 focus:outline-none focus:border-gray-700 resize-none\"\n />\n

\n\n

\n Encryption passphrase\n

\n setPassphrase(e.target.value)}\n className=\"flex-1 border border-gray-300 rounded p-3 font-mono text-sm focus:outline-none focus:border-gray-700\"\n />\n setPassphrase(generatePassphrase())}\n className=\"px-3 py-2 border border-gray-400 hover:bg-gray-50 rounded text-sm transition-colors whitespace-nowrap\"\n >\n regenerate\n \n

\n\n

\n Expires in\n

\n {EXPIRY_OPTIONS.map(({ hours, label }) => (\n setExpiresInHours(hours)}\n className={\n \"px-3 py-1 border rounded text-sm transition-colors \" +\n (expiresInHours === hours\n ? \"border-gray-700 bg-gray-100 text-gray-900\"\n : \"border-gray-300 text-gray-700 hover:bg-gray-50\")\n }\n >\n {label}\n \n ))}\n

\n\n {error &&

{error}

}\n\n \n {loading && }\n {loading ? \"Encrypting…\" : \"Encrypt & create link\"}\n \n

\n );\n}\n\nfunction RevealView({ secretId }: { secretId: string }) {\n const [passphrase, setPassphrase] = useState(\"\");\n const [decrypted, setDecrypted] = useState<\n { plaintext: string; salt: string; passphrase: string } | null\n >(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [notFound, setNotFound] = useState(false);\n const [deleting, setDeleting] = useState(false);\n const [deleted, setDeleted] = useState(false);\n\n const handleDecrypt = useCallback(async () => {\n if (!passphrase.trim()) {\n setError(\"Please enter the passphrase.\");\n return;\n }\n setLoading(true);\n setError(null);\n try {\n const res = await fetch(`/api/secrets/${secretId}`);\n if (res.status === 404) {\n setNotFound(true);\n return;\n }\n if (!res.ok) throw new Error(await res.text());\n const data: FetchSecretResponse = await res.json();\n const plaintext = await decryptData(\n data.encrypted_data,\n data.iv,\n data.salt,\n passphrase,\n );\n setDecrypted({ plaintext, salt: data.salt, passphrase });\n } catch (e: any) {\n if (e.name === \"OperationError\") {\n setError(\"Wrong passphrase. Please try again.\");\n } else {\n setError(e.message || \"Something went wrong\");\n }\n } finally {\n setLoading(false);\n }\n }, [secretId, passphrase]);\n\n const handleDelete = useCallback(async () => {\n if (!decrypted) return;\n if (!confirm(\"Are you sure? This secret will be permanently deleted.\")) {\n return;\n }\n setDeleting(true);\n setError(null);\n try {\n const proof = await deriveDeleteProof(\n decrypted.passphrase,\n decrypted.salt,\n );\n await deleteSecretRequest(secretId, proof);\n setDeleted(true);\n } catch (e: any) {\n setError(e.message || \"Failed to delete\");\n } finally {\n setDeleting(false);\n }\n }, [decrypted, secretId]);\n\n if (deleted) {\n return (\n

\n Secret deleted. It has been permanently destroyed.\n

\n \n Create a new secret\n \n

\n );\n }\n\n if (notFound) {\n return (\n

\n Secret not found. It has expired or been deleted.\n

\n \n Create a new secret\n \n

\n );\n }\n\n if (decrypted) {\n return (\n

Decrypted secret

\n \n

\n            {decrypted.plaintext}\n

\n Anyone with the passphrase can delete this secret.\n

\n {error &&

{error}

}\n

\n \n Create a new secret\n \n \n {deleting && }\n {deleting ? \"Deleting…\" : \"Delete\"}\n \n

\n );\n }\n\n return (\n

\n Someone sent you a secret. Enter the passphrase to decrypt it.\n

\n Passphrase\n setPassphrase(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleDecrypt()}\n placeholder=\"Enter the passphrase…\"\n className=\"w-full border border-gray-300 rounded p-3 font-mono text-sm placeholder-gray-400 focus:outline-none focus:border-gray-700\"\n autoFocus\n />\n

\n {error &&

{error}

}\n \n {loading && }\n {loading ? \"Decrypting…\" : \"Decrypt secret\"}\n \n

\n );\n}\n\nexport function App({ secretId }: { secretId?: string }) {\n return (\n

Secret Share

\n End-to-end encrypted sharing for passwords, API keys, and sensitive text\n

\n {secretId ? : }\n

\n \n

\n );\n}\n",[],[169,300,291],"components","65b774de-5aab-11f1-b71e-ee650bb23af1",38,["D",1779982761733],[185],[169,300],["D",1779982704358],[184,186,187],[169],["D",1772823903506],["D",1789515657103],{"_11":12,"_56":100},{"_11":12,"_50":-5,"_51":100,"_35":61,"_53":101,"_55":20},{"_88":89,"_13":90,"_27":91,"_92":57,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":14,"_99":12},"ctx",{"_40":-5,"_123":347,"_348":349,"_350":351,"_352":20,"_353":20,"_354":20,"_355":63,"_356":-5,"_357":-7,"_358":-7,"_359":22,"_360":20,"_361":20,"_362":-5,"_363":20,"_364":20,"_365":20,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":90,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Remixes1

Remixes
1