6 Commits (8feb4ff5d2c5875a60eeccdef18450e205dfbf47)

Author	SHA1	Message	Date
Mihai Parparita	ab159f748b	cmd/tsconnect: switch UI to Preact ... 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>	2 years ago
Mihai Parparita	52d769d35c	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>	2 years ago
Mihai Parparita	9a2171e4ea	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@87dca56dee) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>	2 years ago
Mihai Parparita	c06758c83b	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>	2 years ago
Mihai Parparita	617a2ec7cc	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>	2 years ago
Mihai Parparita	6f5096fa61	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>	2 years ago