diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx index b73dc81d3..43805b697 100644 --- a/client/web/src/components/app.tsx +++ b/client/web/src/components/app.tsx @@ -5,6 +5,7 @@ import React from "react" import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg" import LoginToggle from "src/components/login-toggle" import DeviceDetailsView from "src/components/views/device-details-view" +import DisconnectedView from "src/components/views/disconnected-view" import HomeView from "src/components/views/home-view" import LoginView from "src/components/views/login-view" import SSHView from "src/components/views/ssh-view" @@ -74,9 +75,7 @@ function WebClient({ /> - - - + diff --git a/client/web/src/components/views/device-details-view.tsx b/client/web/src/components/views/device-details-view.tsx index d4fd32d27..ec885d68e 100644 --- a/client/web/src/components/views/device-details-view.tsx +++ b/client/web/src/components/views/device-details-view.tsx @@ -226,24 +226,22 @@ function DisconnectDialog() { return ( Disconnect…} + title="Log out" + trigger={} > { 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. -

- Your connection to this web interface will end as soon as you click - disconnect. -

+ Logging out of this device will disconnect it from your tailnet and + expire its node key. You won’t be able to use this web interface until + you re-authenticate the device from either the Tailscale app or the + Tailscale command line interface.
) diff --git a/client/web/src/components/views/disconnected-view.tsx b/client/web/src/components/views/disconnected-view.tsx new file mode 100644 index 000000000..70f8f0b72 --- /dev/null +++ b/client/web/src/components/views/disconnected-view.tsx @@ -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 ( + <> + +

+ 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. +

+ + ) +}