Mihai Parparita
ab159f748b
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>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
// 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
|