tailscale/cmd/tsconnect/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="dist/index.css" />
  </head>
  <body class="flex flex-col min-h-screen">
    <div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2 mb-6">
      <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>
    </div>
    <form
      id="ssh-form"
      class="container mx-auto px-4 hidden flex justify-center"
    >
      <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>
    <script src="dist/index.js"></script>
  </body>
</html>
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" />`
			`<link rel="stylesheet" type="text/css" href="dist/index.css" />`
			`</head>`
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			`<body class="flex flex-col min-h-screen">`
			`<div class="bg-gray-100 border-b border-gray-200 pt-4 pb-2 mb-6">`
			`<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: 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			`<form`
			`id="ssh-form"`
			`class="container mx-auto px-4 hidden flex justify-center"`
			`>`
			`<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: 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			`<script src="dist/index.js"></script>`
			`</body>`
			`</html>`