From 50b558de745582873dd89f39ecc14a0d19401c76 Mon Sep 17 00:00:00 2001
From: Sonia Appasamy <sonia@tailscale.com>
Date: Tue, 22 Aug 2023 11:44:36 -0400
Subject: [PATCH] client/web: hook up remaining legacy POST requests

Hooks up remaining legacy POST request from the React side in --dev.

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
---
 client/web/src/components/app.tsx    |   2 +-
 client/web/src/components/legacy.tsx | 115 ++++++++++++++++-----------
 client/web/src/hooks/node-data.ts    |   1 +
 3 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index 8dd90c188..b684615fa 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -15,7 +15,7 @@ export default function App() {
       ) : (
         <>
           <main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
-            <Header data={data} />
+            <Header data={data} updateNode={updateNode} />
             <IP data={data} />
             <State data={data} updateNode={updateNode} />
           </main>
diff --git a/client/web/src/components/legacy.tsx b/client/web/src/components/legacy.tsx
index 7c599d4a1..9d0ec5640 100644
--- a/client/web/src/components/legacy.tsx
+++ b/client/web/src/components/legacy.tsx
@@ -7,9 +7,13 @@ import { NodeData, NodeUpdate } from "src/hooks/node-data"
 // purely to ease migration to the new React-based web client, and will
 // eventually be completely removed.
 
-export function Header(props: { data: NodeData }) {
-  const { data } = props
-
+export function Header({
+  data,
+  updateNode,
+}: {
+  data: NodeData
+  updateNode: (update: NodeUpdate) => void
+}) {
   return (
     <header className="flex justify-between items-center min-width-0 py-2 mb-8">
       <svg
@@ -61,41 +65,52 @@ export function Header(props: { data: NodeData }) {
         ></circle>
       </svg>
       <div className="flex items-center justify-end space-x-2 w-2/3">
-        {data.Profile && (
-          <>
-            <div className="text-right w-full leading-4">
-              <h4 className="truncate leading-normal">
-                {data.Profile.LoginName}
-              </h4>
-              <div className="text-xs text-gray-500 text-right">
-                <a href="#" className="hover:text-gray-700 js-loginButton">
-                  Switch account
-                </a>{" "}
-                |{" "}
-                <a href="#" className="hover:text-gray-700 js-loginButton">
-                  Reauthenticate
-                </a>{" "}
-                |{" "}
-                <a href="#" className="hover:text-gray-700 js-logoutButton">
-                  Logout
-                </a>
+        {data.Profile &&
+          data.Status !== "NoState" &&
+          data.Status !== "NeedsLogin" && (
+            <>
+              <div className="text-right w-full leading-4">
+                <h4 className="truncate leading-normal">
+                  {data.Profile.LoginName}
+                </h4>
+                <div className="text-xs text-gray-500 text-right">
+                  <button
+                    onClick={() => updateNode({ Reauthenticate: true })}
+                    className="hover:text-gray-700"
+                  >
+                    Switch account
+                  </button>{" "}
+                  |{" "}
+                  <button
+                    onClick={() => updateNode({ Reauthenticate: true })}
+                    className="hover:text-gray-700"
+                  >
+                    Reauthenticate
+                  </button>{" "}
+                  |{" "}
+                  <button
+                    onClick={() => updateNode({ ForceLogout: true })}
+                    className="hover:text-gray-700"
+                  >
+                    Logout
+                  </button>
+                </div>
               </div>
-            </div>
-            <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
-              {data.Profile.ProfilePicURL ? (
-                <div
-                  className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
-                  style={{
-                    backgroundImage: `url(${data.Profile.ProfilePicURL})`,
-                    backgroundSize: "cover",
-                  }}
-                />
-              ) : (
-                <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
-              )}
-            </div>
-          </>
-        )}
+              <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
+                {data.Profile.ProfilePicURL ? (
+                  <div
+                    className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
+                    style={{
+                      backgroundImage: `url(${data.Profile.ProfilePicURL})`,
+                      backgroundSize: "cover",
+                    }}
+                  />
+                ) : (
+                  <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
+                )}
+              </div>
+            </>
+          )}
       </div>
     </header>
   )
@@ -129,9 +144,9 @@ export function IP(props: { data: NodeData }) {
             <line x1="6" y1="6" x2="6.01" y2="6"></line>
             <line x1="6" y1="18" x2="6.01" y2="18"></line>
           </svg>
-          <div>
-            <h4 className="font-semibold truncate mr-2">{data.DeviceName}</h4>
-          </div>
+          <h4 className="font-semibold truncate mr-2">
+            {data.DeviceName || "Your device"}
+          </h4>
         </div>
         <h5>{data.IP}</h5>
       </div>
@@ -190,11 +205,12 @@ export function State({
                 .
               </p>
             </div>
-            <a href="#" className="mb-4 js-loginButton" target="_blank">
-              <button className="button button-blue w-full">
-                Reauthenticate
-              </button>
-            </a>
+            <button
+              onClick={() => updateNode({ Reauthenticate: true })}
+              className="button button-blue w-full mb-4"
+            >
+              Reauthenticate
+            </button>
           </>
         )
       } else {
@@ -215,9 +231,12 @@ export function State({
                 .
               </p>
             </div>
-            <a href="#" className="mb-4 js-loginButton" target="_blank">
-              <button className="button button-blue w-full">Log In</button>
-            </a>
+            <button
+              onClick={() => updateNode({ Reauthenticate: true })}
+              className="button button-blue w-full mb-4"
+            >
+              Log In
+            </button>
           </>
         )
       }
diff --git a/client/web/src/hooks/node-data.ts b/client/web/src/hooks/node-data.ts
index 444c9190d..507971d2d 100644
--- a/client/web/src/hooks/node-data.ts
+++ b/client/web/src/hooks/node-data.ts
@@ -56,6 +56,7 @@ export default function useNodeData() {
       setIsPosting(true)
 
       update = {
+        ...update,
         // Default to current data value for any unset fields.
         AdvertiseRoutes:
           update.AdvertiseRoutes !== undefined