TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-12-03 02:21:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

cmd/tsconnect: switch UI to Preact

Browse Source 
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>
This commit is contained in:
Mihai Parparita
2022-08-04 14:18:47 -07:00
committed by Mihai Parparita
parent 15b8665787
commit ab159f748b
19 changed files with 407 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
cmd/tsconnect/index.html
View File

@@ -8,37 +8,13 @@
<script src="dist/index.js" defer></script>
</head>
<body class="flex flex-col h-screen overflow-hidden">
<!-- Placeholder so that we don't have an empty page while the JS loads.
It should match the markup generated by Header component. -->
<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" id="state">Loading…</div>
<div class="text-gray-600">Loading…</div>
</header>
</div>
<div
id="content"
class="flex-grow flex flex-col justify-center overflow-hidden"
>
<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>
</div>
</body>
</html>