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>

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({
             />
           </FeatureRoute>
           <Route path="/disconnected">
-            <Card className="mt-8">
+            <DisconnectedView />
-              <EmptyState description="You have been disconnected" />
-            </Card>
           </Route>
           <Route>
             <Card className="mt-8">

client/web/src/components/views/device-details-view.tsx

@@ -226,24 +226,22 @@ function DisconnectDialog() {
   return (
     <Dialog
       className="max-w-md"
-      title="Disconnect"
+      title="Log out"
-      trigger={<Button sizeVariant="small">Disconnect…</Button>}
+      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,
+        Logging out of this device will disconnect it from your tailnet and
-        you will be required to re-authenticate this device.
+        expire its node key. You won’t be able to use this web interface until
-        <p className="mt-4 text-sm text-text-muted">
+        you re-authenticate the device from either the Tailscale app or the
-          Your connection to this web interface will end as soon as you click
+        Tailscale command line interface.
-          disconnect.
-        </p>
       </Dialog.Form>
     </Dialog>
   )

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 (
+    <>
+      <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>
+    </>
+  )
+}