mirror of
https://github.com/tailscale/tailscale.git
synced 2025-02-27 10:47:35 +00:00

"Device Authorization" was recently renamed to "Device Approval" on the control side. This change updates tsconnect to match. Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
// Copyright (c) Tailscale Inc & AUTHORS
|
|
// SPDX-License-Identifier: BSD-3-Clause
|
|
|
|
export function Header({ state, ipn }: { state: IPNState; ipn?: IPN }) {
|
|
const stateText = STATE_LABELS[state]
|
|
|
|
let logoutButton
|
|
if (state === "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 = {
|
|
NoState: "Initializing…",
|
|
InUseOtherUser: "In-use by another user",
|
|
NeedsLogin: "Needs login",
|
|
NeedsMachineAuth: "Needs approval",
|
|
Stopped: "Stopped",
|
|
Starting: "Starting…",
|
|
Running: "Running",
|
|
} as const
|