\n \n Secret encryption key\n \n {\n setBootstrapAesKeyB64Input(event.target.value);\n }}\n value={bootstrapAesKeyB64Input}\n />\n
\n );\n const terminalServerUrlEl = (\n \n \n Connect\n \n
\n );\n const connectForm = (\n \n
\n ) : null;\n\n const regularServerContent = (\n <>\n This page is statically hosted
\n \n This is a static page serving the TermPair JavaScript app. It is\n optional to use a statically served TermPair webapp, but it facilitates\n easily building and self-serving to be certain the JavaScript app has\n not been tampered with by an untrusted server.\n
\n \n Connect to a broadcasting terminal by entering the fields below and\n clicking Connect.\n
\n {connectForm}\n \n
\n Quick Start
\n \n If you have TermPair installed, share a terminal with this host:\n
\n Or if you have pipx, you can run TermPair via pipx:
\n \n
\n Install TermPair
\n Install with pipx
\n Or install with pip
\n \n
\n \n );\n\n const termpairDemoContent = (\n Connecting to a Terminal?
\n If a terminal is already broadcasting and you'd like to connect to it,\n you don't need to install or run anything. Just fill out the form below\n and click Connect.\n {connectForm}\n \n
\n );\n\n return (\n TermPair Demo
\n {/* https://www.themes.dev/blog/easily-embed-responsive-youtube-video-with-tailwind-css/ */}\n \n \n
\n \n
\n );\n}\n","import { Terminal as Xterm } from \"xterm\";\n// this must match constants.py\nexport const TERMPAIR_VERSION = \"0.3.1.4\";\n\nexport const defaultTermpairServer = new URL(\n `${window.location.protocol}//${window.location.hostname}:${window.location.port}${window.location.pathname}`\n);\n\nexport const defaultTerminalId = new URLSearchParams(\n window.location.search\n).get(\"terminal_id\");\n\nexport const defaultBootstrapb64Key = window.location.hash.substring(\n 1, // skip the '#' symbol\n window.location.hash.length - 1\n);\n\nexport const cannotTypeMsg =\n \"Terminal was shared in read only mode. Unable to send data to terminal's input.\";\n\nexport const host = `${window.location.protocol}//${window.location.hostname}${window.location.pathname}`;\nlet _port = window.location.port;\nif (!window.location.port) {\n if (window.location.protocol === \"https:\") {\n _port = \"443\";\n } else {\n _port = \"80\";\n }\n}\nexport const port = _port;\nexport const termpairShareCommand = `termpair share --host \"${host}\" --port ${_port}`;\nexport const pipxTermpairShareCommand = `pipx run ${termpairShareCommand}`;\n\nexport const xterm = new Xterm({\n cursorBlink: true,\n macOptionIsMeta: true,\n scrollback: 1000,\n});\n\nexport const localStorageKeys = {\n bootstrapAesKeyB64: \"termpairBase64BootstrapKey\",\n terminalId: \"termpairTerminalId\",\n host: \"termpairCustomHost\",\n};\n\nexport const secureContextHelp = (\n \n
\n \n
\n {!props.isSecureContext ? (\n Welcome to TermPair!
\n Easily share terminals with end-to-end encryption 🔒. Terminal data is\n always encrypted before being routed through the server.{\" \"}\n Learn more.\n \n
\n ) : null}\n {props.isStaticallyHosted === null\n ? null\n : props.isStaticallyHosted === true\n ? staticLandingContent\n : regularServerContent}\n\n Error
\n {secureContextHelp}\n\n
\n {termpairDemoContent}\n Troubleshooting
\n \n
\n \n
\n \n Initial connection fails or is rejected\n
\n \n Ensure you are using a TermPair client compatible with{\" \"}\n v{TERMPAIR_VERSION} (the\n version of this webpage)\n
\n \n
\n \n Browser is not running in a secure context\n
\n {secureContextHelp}
\n \n TermPair only works on secure connections. The server must be configured to\n serve this page over https. See
\n);\n","import { aesEncrypt } from \"./encryption\";\n\nfunction getSalt(): string {\n return window.crypto.getRandomValues(new Uint8Array(12)).toString();\n}\n\nexport function requestTerminalDimensions() {\n return JSON.stringify({ event: \"request_terminal_dimensions\" });\n}\nexport async function newBrowserConnected(): Promisetermpair serve --help and{\" \"}\n \n https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts\n {\" \"}\n for more information.\n \n
\n );\n}\n","import React from \"react\";\n\nexport class ErrorBoundary extends React.Component\n
\n \n \n 
\n \n
\n \n v{TERMPAIR_VERSION}\n \n {githubLogo}\n \n
\n Something went wrong.
;\n }\n\n return this.props.children;\n }\n}\n","import { Status, TerminalServerData, TerminalSize } from \"./types\";\nimport moment from \"moment\";\n\nexport function BottomBar(props: {\n status: Status;\n terminalData: Nullable{props.status}
: null;\n\n const canType = connected ? (\n \n {props.numClients ? props.numClients : \"0\"} Connected Client(s)\n
\n ) : null;\n\n const startTime = connected ? (\n \n Started at{\" \"}\n {moment(props.terminalData?.broadcast_start_time_iso).format(\n \"h:mm a on MMM Do, YYYY\"\n )}\n
\n ) : null;\n\n const terminalDimensions = connected ? (\n \n {props.terminalSize.rows}x{props.terminalSize.cols}\n
\n ) : null;\n\n return (\n \n {hasTerminalId ? (\n \n {status}\n {terminalDimensions}\n {canType}\n {connectedClients}\n {startTime}\n
\n ) : null}\n \n \n );\n}\n","import React, { useEffect, useState, useRef, useLayoutEffect } from \"react\";\nimport \"xterm/css/xterm.css\";\nimport { Terminal as Xterm, IDisposable } from \"xterm\";\nimport { getBootstrapAESKey } from \"./encryption\";\nimport { ToastContainer, toast } from \"react-toastify\";\nimport \"react-toastify/dist/ReactToastify.css\";\nimport { newBrowserConnected, requestTerminalDimensions } from \"./events\";\nimport { LandingPageContent } from \"./LandingPageContent\";\nimport { AesKeysRef, Status, TerminalServerData, TerminalSize } from \"./types\";\nimport { TopBar } from \"./TopBar\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { BottomBar } from \"./BottomBar\";\nimport {\n defaultTerminalId,\n defaultTermpairServer,\n secureContextHelp,\n xterm,\n} from \"./constants\";\nimport { toastStatus, websocketUrlFromHttpUrl } from \"./utils\";\nimport {\n getCustomKeyEventHandler,\n getOnDataHandler,\n redXtermText,\n} from \"./xtermUtils\";\nimport { handlers, TermPairEvent } from \"./websocketMessageHandler\";\n\nfunction handleStatusChange(\n status: Status,\n prevStatus: Status,\n setPrevStatus: (prevStatus: Status) => void\n): void {\n setPrevStatus(status);\n switch (status) {\n case null:\n break;\n case \"Connection Established\":\n toastStatus(status);\n xterm.writeln(\"Connection established with end-to-end encryption 🔒.\");\n xterm.writeln(\n \"The termpair server and third parties can't read transmitted data.\"\n );\n xterm.writeln(\"\");\n xterm.writeln(\n \"You can copy text with ctrl+shift+c or ctrl+shift+x, and paste with ctrl+shift+v.\"\n );\n xterm.writeln(\"\");\n break;\n case \"Disconnected\":\n toastStatus(status);\n if (prevStatus === \"Connection Established\") {\n xterm.writeln(redXtermText(\"Terminal session has ended\"));\n xterm.writeln(\"\");\n }\n break;\n case \"Terminal ID is invalid\":\n toast.dark(\n `An invalid Terminal ID was provided. ` +\n `Check that the session is still being broadcast and that the ID is entered correctly.`\n );\n break;\n\n case \"Failed to obtain encryption keys\":\n toast.dark(\n `Failed to obtain secret encryption keys from the broadcasting terminal. ` +\n `Is your encryption key valid?`\n );\n break;\n\n case \"Browser is not running in a secure context\":\n toast.dark(secureContextHelp);\n break;\n\n case \"Connecting...\":\n break;\n\n case \"Connection Error\":\n break;\n\n case \"Failed to fetch terminal data\":\n break;\n\n default:\n ((_: \"Unhandled switch case\"): never => {\n throw Error;\n })(status);\n }\n return status as never;\n}\n\nfunction ensureXtermIsOpen(\n xtermWasOpened: React.MutableRefObject\n {showTerminal ? (\n
\n ) : (\n \n
\n