cmd/tsconnect: extract NPM package for reusing in other projects
`src/` is broken up into several subdirectories: - `lib/` and `types`/ for shared code and type definitions (more code will be moved here) - `app/` for the existing Preact-app - `pkg/` for the new NPM package A new `build-pkg` esbuild-based command is added to generate the files for the NPM package. To generate type definitions (something that esbuild does not do), we set up `dts-bundle-generator`. Includes additional cleanups to the Wasm type definitions (we switch to string literals for enums, since exported const enums are hard to use via packages). Also allows the control URL to be set a runtime (in addition to the current build option), so that we don't have to rebuild the package for dev vs. prod use. Updates #5415 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
This commit is contained in:
Mihai Parparita
committed by
Mihai Parparita
Mihai Parparita
parent
472529af38
commit
1a093ef482
@@ -0,0 +1,123 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
import { render, Component } from "preact"
|
||||
import { URLDisplay } from "./url-display"
|
||||
import { Header } from "./header"
|
||||
import { GoPanicDisplay } from "./go-panic-display"
|
||||
import { SSH } from "./ssh"
|
||||
|
||||
type AppState = {
|
||||
ipn?: IPN
|
||||
ipnState: IPNState
|
||||
netMap?: IPNNetMap
|
||||
browseToURL?: string
|
||||
goPanicError?: string
|
||||
}
|
||||
|
||||
class App extends Component<{}, AppState> {
|
||||
state: AppState = { ipnState: "NoState" }
|
||||
#goPanicTimeout?: number
|
||||
|
||||
render() {
|
||||
const { ipn, ipnState, goPanicError, netMap, browseToURL } = this.state
|
||||
|
||||
let goPanicDisplay
|
||||
if (goPanicError) {
|
||||
goPanicDisplay = (
|
||||
<GoPanicDisplay error={goPanicError} dismiss={this.clearGoPanic} />
|
||||
)
|
||||
}
|
||||
|
||||
let urlDisplay
|
||||
if (browseToURL) {
|
||||
urlDisplay = <URLDisplay url={browseToURL} />
|
||||
}
|
||||
|
||||
let machineAuthInstructions
|
||||
if (ipnState === "NeedsMachineAuth") {
|
||||
machineAuthInstructions = (
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
An administrator needs to authorize this device.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let ssh
|
||||
if (ipn && ipnState === "Running" && netMap) {
|
||||
ssh = <SSH netMap={netMap} ipn={ipn} />
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header state={ipnState} ipn={ipn} />
|
||||
{goPanicDisplay}
|
||||
<div class="flex-grow flex flex-col justify-center overflow-hidden">
|
||||
{urlDisplay}
|
||||
{machineAuthInstructions}
|
||||
{ssh}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
runWithIPN(ipn: IPN) {
|
||||
this.setState({ ipn }, () => {
|
||||
ipn.run({
|
||||
notifyState: this.handleIPNState,
|
||||
notifyNetMap: this.handleNetMap,
|
||||
notifyBrowseToURL: this.handleBrowseToURL,
|
||||
notifyPanicRecover: this.handleGoPanic,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleIPNState = (state: IPNState) => {
|
||||
const { ipn } = this.state
|
||||
this.setState({ ipnState: state })
|
||||
if (state === "NeedsLogin") {
|
||||
ipn?.login()
|
||||
} else if (["Running", "NeedsMachineAuth"].includes(state)) {
|
||||
this.setState({ browseToURL: undefined })
|
||||
}
|
||||
}
|
||||
|
||||
handleNetMap = (netMapStr: string) => {
|
||||
const netMap = JSON.parse(netMapStr) as IPNNetMap
|
||||
if (DEBUG) {
|
||||
console.log("Received net map: " + JSON.stringify(netMap, null, 2))
|
||||
}
|
||||
this.setState({ netMap })
|
||||
}
|
||||
|
||||
handleBrowseToURL = (url: string) => {
|
||||
this.setState({ browseToURL: url })
|
||||
}
|
||||
|
||||
handleGoPanic = (error: string) => {
|
||||
if (DEBUG) {
|
||||
console.error("Go panic", error)
|
||||
}
|
||||
this.setState({ goPanicError: error })
|
||||
if (this.#goPanicTimeout) {
|
||||
window.clearTimeout(this.#goPanicTimeout)
|
||||
}
|
||||
this.#goPanicTimeout = window.setTimeout(this.clearGoPanic, 10000)
|
||||
}
|
||||
|
||||
clearGoPanic = () => {
|
||||
window.clearTimeout(this.#goPanicTimeout)
|
||||
this.#goPanicTimeout = undefined
|
||||
this.setState({ goPanicError: undefined })
|
||||
}
|
||||
}
|
||||
|
||||
export function renderApp(): Promise<App> {
|
||||
return new Promise((resolve) => {
|
||||
render(
|
||||
<App ref={(app) => (app ? resolve(app) : undefined)} />,
|
||||
document.body
|
||||
)
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
export function GoPanicDisplay({
|
||||
error,
|
||||
dismiss,
|
||||
}: {
|
||||
error: string
|
||||
dismiss: () => void
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
class="rounded bg-red-500 p-2 absolute top-2 right-2 text-white font-bold text-right cursor-pointer"
|
||||
onClick={dismiss}
|
||||
>
|
||||
Tailscale has encountered an error.
|
||||
<div class="text-sm font-normal">Click to reload</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
export function Header({ state, ipn }: { state: IPNState; ipn?: IPN }) {
|
||||
const stateText = STATE_LABELS[state]
|
||||
|
||||
let logoutButton
|
||||
if (state === "Running") {
|
||||
logoutButton = (
|
||||
<button
|
||||
class="button bg-gray-500 border-gray-500 text-white hover:bg-gray-600 hover:border-gray-600 ml-2 font-bold"
|
||||
onClick={() => ipn?.logout()}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2">
|
||||
<header class="container mx-auto px-4 flex flex-row items-center">
|
||||
<h1 class="text-3xl font-bold grow">Tailscale Connect</h1>
|
||||
<div class="text-gray-600">{stateText}</div>
|
||||
{logoutButton}
|
||||
</header>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const STATE_LABELS = {
|
||||
NoState: "Initializing…",
|
||||
InUseOtherUser: "In-use by another user",
|
||||
NeedsLogin: "Needs login",
|
||||
NeedsMachineAuth: "Needs authorization",
|
||||
Stopped: "Stopped",
|
||||
Starting: "Starting…",
|
||||
Running: "Running",
|
||||
} as const
|
||||
@@ -0,0 +1,75 @@
|
||||
/* Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved. */
|
||||
/* Use of this source code is governed by a BSD-style */
|
||||
/* license that can be found in the LICENSE file. */
|
||||
|
||||
@import "xterm/css/xterm.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.link {
|
||||
@apply text-blue-600;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply font-medium py-1 px-2 rounded-md border border-transparent text-center cursor-pointer;
|
||||
transition-property: background-color, border-color, color, box-shadow;
|
||||
transition-duration: 120ms;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
min-width: 80px;
|
||||
}
|
||||
.button:focus {
|
||||
@apply outline-none ring;
|
||||
}
|
||||
.button:disabled {
|
||||
@apply pointer-events-none select-none;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply appearance-none leading-tight rounded-md bg-white border border-gray-300 hover:border-gray-400 transition-colors px-3;
|
||||
height: 2.375rem;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
@apply text-gray-400;
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
@apply border-gray-200;
|
||||
@apply bg-gray-50;
|
||||
@apply cursor-not-allowed;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
@apply outline-none ring border-transparent;
|
||||
}
|
||||
|
||||
.select {
|
||||
@apply appearance-none py-2 px-3 leading-tight rounded-md bg-white border border-gray-300;
|
||||
}
|
||||
|
||||
.select-with-arrow {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.select-with-arrow .select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-with-arrow::after {
|
||||
@apply absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translate(-0.3em, -0.15em);
|
||||
width: 0.6em;
|
||||
height: 0.4em;
|
||||
opacity: 0.6;
|
||||
background-color: currentColor;
|
||||
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
import "../wasm_exec"
|
||||
import wasmUrl from "./main.wasm"
|
||||
import { sessionStateStorage } from "../lib/js-state-store"
|
||||
import { renderApp } from "./app"
|
||||
|
||||
async function main() {
|
||||
const app = await renderApp()
|
||||
const go = new Go()
|
||||
const wasmInstance = await WebAssembly.instantiateStreaming(
|
||||
fetch(`./dist/${wasmUrl}`),
|
||||
go.importObject
|
||||
)
|
||||
// The Go process should never exit, if it does then it's an unhandled panic.
|
||||
go.run(wasmInstance.instance).then(() =>
|
||||
app.handleGoPanic("Unexpected shutdown")
|
||||
)
|
||||
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
const authKey = params.get("authkey") ?? undefined
|
||||
|
||||
const ipn = newIPN({
|
||||
// Persist IPN state in sessionStorage in development, so that we don't need
|
||||
// to re-authorize every time we reload the page.
|
||||
stateStorage: DEBUG ? sessionStateStorage : undefined,
|
||||
// authKey allows for an auth key to be
|
||||
// specified as a url param which automatically
|
||||
// authorizes the client for use.
|
||||
authKey: DEBUG ? authKey : undefined,
|
||||
})
|
||||
app.runWithIPN(ipn)
|
||||
}
|
||||
|
||||
main()
|
||||
@@ -0,0 +1,156 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
import { useState, useCallback } from "preact/hooks"
|
||||
import { Terminal } from "xterm"
|
||||
import { FitAddon } from "xterm-addon-fit"
|
||||
|
||||
type SSHSessionDef = {
|
||||
username: string
|
||||
hostname: string
|
||||
}
|
||||
|
||||
export function SSH({ netMap, ipn }: { netMap: IPNNetMap; ipn: IPN }) {
|
||||
const [sshSessionDef, setSSHSessionDef] = useState<SSHSessionDef | null>(null)
|
||||
const clearSSHSessionDef = useCallback(() => setSSHSessionDef(null), [])
|
||||
if (sshSessionDef) {
|
||||
return (
|
||||
<SSHSession def={sshSessionDef} ipn={ipn} onDone={clearSSHSessionDef} />
|
||||
)
|
||||
}
|
||||
const sshPeers = netMap.peers.filter(
|
||||
(p) => p.tailscaleSSHEnabled && p.online !== false
|
||||
)
|
||||
|
||||
if (sshPeers.length == 0) {
|
||||
return <NoSSHPeers />
|
||||
}
|
||||
|
||||
return <SSHForm sshPeers={sshPeers} onSubmit={setSSHSessionDef} />
|
||||
}
|
||||
|
||||
function SSHSession({
|
||||
def,
|
||||
ipn,
|
||||
onDone,
|
||||
}: {
|
||||
def: SSHSessionDef
|
||||
ipn: IPN
|
||||
onDone: () => void
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
class="flex-grow bg-black p-2 overflow-hidden"
|
||||
ref={(node) => {
|
||||
if (node) {
|
||||
// Run the SSH session aysnchronously, so that the React render
|
||||
// loop is complete (otherwise the SSH form may still be visible,
|
||||
// which affects the size of the terminal, leading to a spurious
|
||||
// initial resize).
|
||||
setTimeout(() => runSSHSession(node, def, ipn, onDone), 0)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function runSSHSession(
|
||||
termContainerNode: HTMLDivElement,
|
||||
def: SSHSessionDef,
|
||||
ipn: IPN,
|
||||
onDone: () => void
|
||||
) {
|
||||
const term = new Terminal({
|
||||
cursorBlink: true,
|
||||
})
|
||||
const fitAddon = new FitAddon()
|
||||
term.loadAddon(fitAddon)
|
||||
term.open(termContainerNode)
|
||||
fitAddon.fit()
|
||||
|
||||
let onDataHook: ((data: string) => void) | undefined
|
||||
term.onData((e) => {
|
||||
onDataHook?.(e)
|
||||
})
|
||||
|
||||
term.focus()
|
||||
|
||||
const sshSession = ipn.ssh(def.hostname, def.username, {
|
||||
writeFn: (input) => term.write(input),
|
||||
setReadFn: (hook) => (onDataHook = hook),
|
||||
rows: term.rows,
|
||||
cols: term.cols,
|
||||
onDone: () => {
|
||||
resizeObserver.disconnect()
|
||||
term.dispose()
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload)
|
||||
onDone()
|
||||
},
|
||||
})
|
||||
|
||||
// Make terminal and SSH session track the size of the containing DOM node.
|
||||
const resizeObserver = new ResizeObserver(() => fitAddon.fit())
|
||||
resizeObserver.observe(termContainerNode)
|
||||
term.onResize(({ rows, cols }) => sshSession.resize(rows, cols))
|
||||
|
||||
// Close the session if the user closes the window without an explicit
|
||||
// exit.
|
||||
const handleBeforeUnload = () => sshSession.close()
|
||||
window.addEventListener("beforeunload", handleBeforeUnload)
|
||||
}
|
||||
|
||||
function NoSSHPeers() {
|
||||
return (
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
None of your machines have
|
||||
<a href="https://tailscale.com/kb/1193/tailscale-ssh/" class="link">
|
||||
Tailscale SSH
|
||||
</a>
|
||||
enabled. Give it a try!
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SSHForm({
|
||||
sshPeers,
|
||||
onSubmit,
|
||||
}: {
|
||||
sshPeers: IPNNetMapPeerNode[]
|
||||
onSubmit: (def: SSHSessionDef) => void
|
||||
}) {
|
||||
sshPeers = sshPeers.slice().sort((a, b) => a.name.localeCompare(b.name))
|
||||
const [username, setUsername] = useState("")
|
||||
const [hostname, setHostname] = useState(sshPeers[0].name)
|
||||
return (
|
||||
<form
|
||||
class="container mx-auto px-4 flex justify-center"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
onSubmit({ username, hostname })
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
class="input username"
|
||||
placeholder="Username"
|
||||
onChange={(e) => setUsername(e.currentTarget.value)}
|
||||
/>
|
||||
<div class="select-with-arrow mx-2">
|
||||
<select
|
||||
class="select"
|
||||
onChange={(e) => setHostname(e.currentTarget.value)}
|
||||
>
|
||||
{sshPeers.map((p) => (
|
||||
<option key={p.nodeKey}>{p.name.split(".")[0]}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
class="button bg-green-500 border-green-500 text-white hover:bg-green-600 hover:border-green-600"
|
||||
value="SSH"
|
||||
/>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style
|
||||
// license that can be found in the LICENSE file.
|
||||
|
||||
import { useState } from "preact/hooks"
|
||||
import * as qrcode from "qrcode"
|
||||
|
||||
export function URLDisplay({ url }: { url: string }) {
|
||||
const [dataURL, setDataURL] = useState("")
|
||||
qrcode.toDataURL(url, { width: 512 }, (err, dataURL) => {
|
||||
if (err) {
|
||||
console.error("Error generating QR code", err)
|
||||
} else {
|
||||
setDataURL(dataURL)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div class="flex flex-col items-center justify-items-center">
|
||||
<a href={url} class="link" target="_blank">
|
||||
<img
|
||||
src={dataURL}
|
||||
class="mx-auto"
|
||||
width="256"
|
||||
height="256"
|
||||
alt="QR Code of URL"
|
||||
/>
|
||||
{url}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user