TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2024-11-29 13:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
dfcef3382e
tailscale/cmd/tsconnect/index.html

45 lines
1.5 KiB
HTML
Raw Normal View History

cmd/tsconnect: initial scaffolding for Tailscale Connect browser client Runs a Tailscale client in the browser (via a WebAssembly build of the wasm package) and allows SSH access to machines. The wasm package exports a newIPN function, which returns a simple JS object with methods like start(), login(), logout() and ssh(). The golang.org/x/crypto/ssh package is used for the SSH client. Terminal emulation and QR code renedring is done via NPM packages (xterm and qrcode respectively), thus we also need a JS toolchain that can install and bundle them. Yarn is used for installation, and esbuild handles loading them and bundling for production serving. Updates #3157 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-06-07 21:24:22 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
cmd/tsconnect: prefetch main.wasm when serving Avoids waterfalling of requests from the file (its load is triggered from JavaScript). Also has other cleanups to index.html, adding a <title> and moving the <script> to being loaded sooner (but still not delaying page rendering by using the defer attribute). Fixes #5141 Fixes #5135 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 22:02:26 +00:00
<title>Tailscale Connect</title>
cmd/tsconnect: initial scaffolding for Tailscale Connect browser client Runs a Tailscale client in the browser (via a WebAssembly build of the wasm package) and allows SSH access to machines. The wasm package exports a newIPN function, which returns a simple JS object with methods like start(), login(), logout() and ssh(). The golang.org/x/crypto/ssh package is used for the SSH client. Terminal emulation and QR code renedring is done via NPM packages (xterm and qrcode respectively), thus we also need a JS toolchain that can install and bundle them. Yarn is used for installation, and esbuild handles loading them and bundling for production serving. Updates #3157 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-06-07 21:24:22 +00:00
<link rel="stylesheet" type="text/css" href="dist/index.css" />
cmd/tsconnect: prefetch main.wasm when serving Avoids waterfalling of requests from the file (its load is triggered from JavaScript). Also has other cleanups to index.html, adding a <title> and moving the <script> to being loaded sooner (but still not delaying page rendering by using the defer attribute). Fixes #5141 Fixes #5135 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 22:02:26 +00:00
<script src="dist/index.js" defer></script>
cmd/tsconnect: initial scaffolding for Tailscale Connect browser client Runs a Tailscale client in the browser (via a WebAssembly build of the wasm package) and allows SSH access to machines. The wasm package exports a newIPN function, which returns a simple JS object with methods like start(), login(), logout() and ssh(). The golang.org/x/crypto/ssh package is used for the SSH client. Terminal emulation and QR code renedring is done via NPM packages (xterm and qrcode respectively), thus we also need a JS toolchain that can install and bundle them. Yarn is used for installation, and esbuild handles loading them and bundling for production serving. Updates #3157 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-06-07 21:24:22 +00:00
</head>
cmd/tsconnect: make terminal resizable Makes the terminal container DOM node as large as the window (except for the header) via flexbox. The xterm.js terminal is then sized to fit via xterm-addon-fit. Once we have a computed rows/columns size, and we can tell the SSH session of the computed size. Required introducing an IPNSSHSession type to allow the JS to control the SSH session once opened. That alse allows us to programatically close it, which we do when the user closes the window with the session still active. I initially wanted to open the terminal in a new window instead (so that it could be resizable independently of the main window), but xterm.js does not appear to work well in that mode (possibly because it adds an IntersectionObserver to pause rendering when the window is not visible, and it ends up doing that when the parent window is hidden -- see xtermjs/xterm.js@87dca56dee8018a17b5cb22ec844b7013629da63) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 00:41:55 +00:00
<body class="flex flex-col h-screen overflow-hidden">
<div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2">
cmd/tsconnect: add Tailwind CSS support and switch to using it Integrates Tailwind CSS as an esbuild plugin that invokes the CLI to process the input. It takes ~400ms, so it seems like the easiest option (vs running a separate process for dev mode). Existing minimal look and feel is replicated with Tailwind classes, mostly to prove that the entire system works, including unused class removal. Also fixes yarn warnings about package.json not having a license (which were showing up when invoking any scripts). Fixes #5136 Fixes #5129 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-07-26 00:51:06 +00:00
<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" id="state">Loading…</div>
</header>
cmd/tsconnect: initial scaffolding for Tailscale Connect browser client Runs a Tailscale client in the browser (via a WebAssembly build of the wasm package) and allows SSH access to machines. The wasm package exports a newIPN function, which returns a simple JS object with methods like start(), login(), logout() and ssh(). The golang.org/x/crypto/ssh package is used for the SSH client. Terminal emulation and QR code renedring is done via NPM packages (xterm and qrcode respectively), thus we also need a JS toolchain that can install and bundle them. Yarn is used for installation, and esbuild handles loading them and bundling for production serving. Updates #3157 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-06-07 21:24:22 +00:00
</div>
cmd/tsconnect: make terminal resizable Makes the terminal container DOM node as large as the window (except for the header) via flexbox. The xterm.js terminal is then sized to fit via xterm-addon-fit. Once we have a computed rows/columns size, and we can tell the SSH session of the computed size. Required introducing an IPNSSHSession type to allow the JS to control the SSH session once opened. That alse allows us to programatically close it, which we do when the user closes the window with the session still active. I initially wanted to open the terminal in a new window instead (so that it could be resizable independently of the main window), but xterm.js does not appear to work well in that mode (possibly because it adds an IntersectionObserver to pause rendering when the window is not visible, and it ends up doing that when the parent window is hidden -- see xtermjs/xterm.js@87dca56dee8018a17b5cb22ec844b7013629da63) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 00:41:55 +00:00
<div
id="content"
class="flex-grow flex flex-col justify-center overflow-hidden"
cmd/tsconnect: allow SSH username to be specified Redoes the UI to be a form, with a username field and a host drop-down. Fixes #5139 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-07-29 18:37:17 +00:00
>
cmd/tsconnect: make terminal resizable Makes the terminal container DOM node as large as the window (except for the header) via flexbox. The xterm.js terminal is then sized to fit via xterm-addon-fit. Once we have a computed rows/columns size, and we can tell the SSH session of the computed size. Required introducing an IPNSSHSession type to allow the JS to control the SSH session once opened. That alse allows us to programatically close it, which we do when the user closes the window with the session still active. I initially wanted to open the terminal in a new window instead (so that it could be resizable independently of the main window), but xterm.js does not appear to work well in that mode (possibly because it adds an IntersectionObserver to pause rendering when the window is not visible, and it ends up doing that when the parent window is hidden -- see xtermjs/xterm.js@87dca56dee8018a17b5cb22ec844b7013629da63) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 00:41:55 +00:00
<form
id="ssh-form"
class="container mx-auto px-4 hidden flex justify-center"
cmd/tsconnect: allow SSH username to be specified Redoes the UI to be a form, with a username field and a host drop-down. Fixes #5139 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-07-29 18:37:17 +00:00
>
cmd/tsconnect: make terminal resizable Makes the terminal container DOM node as large as the window (except for the header) via flexbox. The xterm.js terminal is then sized to fit via xterm-addon-fit. Once we have a computed rows/columns size, and we can tell the SSH session of the computed size. Required introducing an IPNSSHSession type to allow the JS to control the SSH session once opened. That alse allows us to programatically close it, which we do when the user closes the window with the session still active. I initially wanted to open the terminal in a new window instead (so that it could be resizable independently of the main window), but xterm.js does not appear to work well in that mode (possibly because it adds an IntersectionObserver to pause rendering when the window is not visible, and it ends up doing that when the parent window is hidden -- see xtermjs/xterm.js@87dca56dee8018a17b5cb22ec844b7013629da63) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-08-02 00:41:55 +00:00
<input type="text" class="input username" placeholder="Username" />
<div class="select-with-arrow mx-2">
<select class="select"></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>
<div id="no-ssh" class="container mx-auto px-4 hidden 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>
cmd/tsconnect: allow SSH username to be specified Redoes the UI to be a form, with a username field and a host drop-down. Fixes #5139 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-07-29 18:37:17 +00:00
</div>
cmd/tsconnect: initial scaffolding for Tailscale Connect browser client Runs a Tailscale client in the browser (via a WebAssembly build of the wasm package) and allows SSH access to machines. The wasm package exports a newIPN function, which returns a simple JS object with methods like start(), login(), logout() and ssh(). The golang.org/x/crypto/ssh package is used for the SSH client. Terminal emulation and QR code renedring is done via NPM packages (xterm and qrcode respectively), thus we also need a JS toolchain that can install and bundle them. Yarn is used for installation, and esbuild handles loading them and bundling for production serving. Updates #3157 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
2022-06-07 21:24:22 +00:00
</body>
</html>
Reference in New Issue Copy Permalink