Reduces the amount of boilerplate to render the UI and makes it easier to respond to state changes (e.g. machine getting authorized, netmap changing, etc.) Preact adds ~13K to our bundle size (5K after Brotli) thus is a neglibible size contribution. We mitigate the delay in rendering the UI by having a static placeholder in the HTML. Required bumping the esbuild version to pick up evanw/esbuild#2349, which makes it easier to support Preact's JSX code generation. Fixes #5137 Fixes #5273 Signed-off-by: Mihai Parparita <mihai@tailscale.com>main
Mihai Parparita
4 years ago
committed by
Mihai Parparita
parent
15b8665787
commit
ab159f748b
@ -0,0 +1,124 @@ |
||||
// 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 { IPNState } from "./wasm_js" |
||||
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: 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 === 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 === 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 == IPNState.NeedsLogin) { |
||||
ipn?.login() |
||||
} else if ([IPNState.Running, IPNState.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,40 @@ |
||||
// 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 { IPNState } from "./wasm_js" |
||||
|
||||
export function Header({ state, ipn }: { state: IPNState; ipn?: IPN }) { |
||||
const stateText = STATE_LABELS[state] |
||||
|
||||
let logoutButton |
||||
if (state === IPNState.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 = { |
||||
[IPNState.NoState]: "Initializing…", |
||||
[IPNState.InUseOtherUser]: "In-use by another user", |
||||
[IPNState.NeedsLogin]: "Needs login", |
||||
[IPNState.NeedsMachineAuth]: "Needs authorization", |
||||
[IPNState.Stopped]: "Stopped", |
||||
[IPNState.Starting]: "Starting…", |
||||
[IPNState.Running]: "Running", |
||||
} as const |
||||
@ -1,74 +0,0 @@ |
||||
// 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 * as qrcode from "qrcode" |
||||
import { getContentNode } from "./index" |
||||
|
||||
export async function showLoginURL(url: string) { |
||||
if (loginNode) { |
||||
loginNode.remove() |
||||
} |
||||
loginNode = document.createElement("div") |
||||
loginNode.className = "flex flex-col items-center justify-items-center" |
||||
const linkNode = document.createElement("a") |
||||
linkNode.className = "link" |
||||
linkNode.href = url |
||||
linkNode.target = "_blank" |
||||
loginNode.appendChild(linkNode) |
||||
|
||||
try { |
||||
const dataURL = await qrcode.toDataURL(url, { width: 512 }) |
||||
const imageNode = document.createElement("img") |
||||
imageNode.className = "mx-auto" |
||||
imageNode.src = dataURL |
||||
imageNode.width = 256 |
||||
imageNode.height = 256 |
||||
linkNode.appendChild(imageNode) |
||||
} catch (err) { |
||||
console.error("Could not generate QR code:", err) |
||||
} |
||||
|
||||
linkNode.appendChild(document.createTextNode(url)) |
||||
|
||||
getContentNode().appendChild(loginNode) |
||||
} |
||||
|
||||
export function hideLoginURL() { |
||||
if (!loginNode) { |
||||
return |
||||
} |
||||
loginNode.remove() |
||||
loginNode = undefined |
||||
} |
||||
|
||||
let loginNode: HTMLDivElement | undefined |
||||
|
||||
export function showLogoutButton(ipn: IPN) { |
||||
if (logoutButtonNode) { |
||||
logoutButtonNode.remove() |
||||
} |
||||
logoutButtonNode = document.createElement("button") |
||||
logoutButtonNode.className = |
||||
"button bg-gray-500 border-gray-500 text-white hover:bg-gray-600 hover:border-gray-600 ml-2 font-bold" |
||||
logoutButtonNode.textContent = "Logout" |
||||
logoutButtonNode.addEventListener( |
||||
"click", |
||||
() => { |
||||
ipn.logout() |
||||
}, |
||||
{ once: true } |
||||
) |
||||
const headerNode = document.getElementsByTagName("header")[0]! |
||||
headerNode.appendChild(logoutButtonNode) |
||||
} |
||||
|
||||
export function hideLogoutButton() { |
||||
if (!logoutButtonNode) { |
||||
return |
||||
} |
||||
logoutButtonNode.remove() |
||||
logoutButtonNode = undefined |
||||
} |
||||
|
||||
let logoutButtonNode: HTMLButtonElement | undefined |
||||
@ -1,65 +0,0 @@ |
||||
// 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 { |
||||
showLoginURL, |
||||
hideLoginURL, |
||||
showLogoutButton, |
||||
hideLogoutButton, |
||||
} from "./login" |
||||
import { showSSHForm, hideSSHForm } from "./ssh" |
||||
import { IPNState } from "./wasm_js" |
||||
|
||||
/** |
||||
* @fileoverview Notification callback functions (bridged from ipn.Notify) |
||||
*/ |
||||
|
||||
export function notifyState(ipn: IPN, state: IPNState) { |
||||
let stateLabel |
||||
switch (state) { |
||||
case IPNState.NoState: |
||||
stateLabel = "Initializing…" |
||||
break |
||||
case IPNState.InUseOtherUser: |
||||
stateLabel = "In-use by another user" |
||||
break |
||||
case IPNState.NeedsLogin: |
||||
stateLabel = "Needs Login" |
||||
hideLogoutButton() |
||||
hideSSHForm() |
||||
ipn.login() |
||||
break |
||||
case IPNState.NeedsMachineAuth: |
||||
stateLabel = "Needs authorization" |
||||
break |
||||
case IPNState.Stopped: |
||||
stateLabel = "Stopped" |
||||
hideLogoutButton() |
||||
hideSSHForm() |
||||
break |
||||
case IPNState.Starting: |
||||
stateLabel = "Starting…" |
||||
break |
||||
case IPNState.Running: |
||||
stateLabel = "Running" |
||||
hideLoginURL() |
||||
showLogoutButton(ipn) |
||||
break |
||||
} |
||||
const stateNode = document.querySelector("#state") as HTMLDivElement |
||||
stateNode.textContent = stateLabel ?? "" |
||||
} |
||||
|
||||
export function notifyNetMap(ipn: IPN, netMapStr: string) { |
||||
const netMap = JSON.parse(netMapStr) as IPNNetMap |
||||
if (DEBUG) { |
||||
console.log("Received net map: " + JSON.stringify(netMap, null, 2)) |
||||
} |
||||
|
||||
showSSHForm(netMap.peers, ipn) |
||||
} |
||||
|
||||
export function notifyBrowseToURL(ipn: IPN, url: string) { |
||||
showLoginURL(url) |
||||
} |
||||
@ -1,98 +0,0 @@ |
||||
// 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 { Terminal } from "xterm" |
||||
import { FitAddon } from "xterm-addon-fit" |
||||
import { getContentNode } from "./index" |
||||
|
||||
export function showSSHForm(peers: IPNNetMapPeerNode[], ipn: IPN) { |
||||
const formNode = document.querySelector("#ssh-form") as HTMLDivElement |
||||
const noSSHNode = document.querySelector("#no-ssh") as HTMLDivElement |
||||
|
||||
const sshPeers = peers.filter( |
||||
(p) => p.tailscaleSSHEnabled && p.online !== false |
||||
) |
||||
if (sshPeers.length == 0) { |
||||
formNode.classList.add("hidden") |
||||
noSSHNode.classList.remove("hidden") |
||||
return |
||||
} |
||||
sshPeers.sort((a, b) => a.name.localeCompare(b.name)) |
||||
|
||||
const selectNode = formNode.querySelector("select")! |
||||
selectNode.innerHTML = "" |
||||
for (const p of sshPeers) { |
||||
const option = document.createElement("option") |
||||
option.textContent = p.name.split(".")[0] |
||||
option.value = p.name |
||||
selectNode.appendChild(option) |
||||
} |
||||
|
||||
const usernameNode = formNode.querySelector(".username") as HTMLInputElement |
||||
formNode.onsubmit = (e) => { |
||||
e.preventDefault() |
||||
const hostname = selectNode.value |
||||
ssh(hostname, usernameNode.value, ipn) |
||||
} |
||||
|
||||
noSSHNode.classList.add("hidden") |
||||
formNode.classList.remove("hidden") |
||||
} |
||||
|
||||
export function hideSSHForm() { |
||||
const formNode = document.querySelector("#ssh-form") as HTMLDivElement |
||||
formNode.classList.add("hidden") |
||||
} |
||||
|
||||
function ssh(hostname: string, username: string, ipn: IPN) { |
||||
document.body.classList.add("ssh-active") |
||||
const termContainerNode = document.createElement("div") |
||||
termContainerNode.className = "flex-grow bg-black p-2 overflow-hidden" |
||||
getContentNode().appendChild(termContainerNode) |
||||
|
||||
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(hostname, username, { |
||||
writeFn: (input) => term.write(input), |
||||
setReadFn: (hook) => (onDataHook = hook), |
||||
rows: term.rows, |
||||
cols: term.cols, |
||||
onDone: () => { |
||||
resizeObserver.disconnect() |
||||
term.dispose() |
||||
termContainerNode.remove() |
||||
document.body.classList.remove("ssh-active") |
||||
window.removeEventListener("beforeunload", beforeUnloadListener) |
||||
}, |
||||
}) |
||||
|
||||
// Make terminal and SSH session track the size of the containing DOM node.
|
||||
const resizeObserver = new ResizeObserver((entries) => { |
||||
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 beforeUnloadListener = () => { |
||||
sshSession.close() |
||||
} |
||||
window.addEventListener("beforeunload", beforeUnloadListener) |
||||
} |
||||
@ -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> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue