client/web: rename Disconnect to Log out

For consistency w/ the CLI command. And to be more accurate to what
is actually happening on this action - node key is expired.

Also updates the disconnected view shown after logout.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy
2024-01-05 14:09:24 -05:00
committed by Sonia Appasamy
parent 133699284e
commit 55d302b48e
3 changed files with 30 additions and 12 deletions
@@ -226,24 +226,22 @@ function DisconnectDialog() {
return (
<Dialog
className="max-w-md"
title="Disconnect"
trigger={<Button sizeVariant="small">Disconnect</Button>}
title="Log out"
trigger={<Button sizeVariant="small">Log out</Button>}
>
<Dialog.Form
cancelButton
submitButton="Disconnect"
submitButton="Log out"
destructive
onSubmit={() => {
api({ action: "logout" })
setLocation("/disconnected")
}}
>
You are about to disconnect this device from your tailnet. To reconnect,
you will be required to re-authenticate this device.
<p className="mt-4 text-sm text-text-muted">
Your connection to this web interface will end as soon as you click
disconnect.
</p>
Logging out of this device will disconnect it from your tailnet and
expire its node key. You wont be able to use this web interface until
you re-authenticate the device from either the Tailscale app or the
Tailscale command line interface.
</Dialog.Form>
</Dialog>
)
@@ -0,0 +1,21 @@
// Copyright (c) Tailscale Inc & AUTHORS
// SPDX-License-Identifier: BSD-3-Clause
import React from "react"
import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
/**
* DisconnectedView is rendered after node logout.
*/
export default function DisconnectedView() {
return (
<>
<TailscaleIcon className="mx-auto" />
<p className="mt-12 text-center text-text-muted">
You logged out of this device. To reconnect it you will have to
re-authenticate the device from either the Tailscale app or the
Tailscale command line interface.
</p>
</>
)
}