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

@@ -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>

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 }) {
+export function Header({
-  const { data } = props
+  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,24 +65,35 @@ export function Header(props: { data: NodeData }) {
         ></circle>
       </svg>
       <div className="flex items-center justify-end space-x-2 w-2/3">
-        {data.Profile && (
+        {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">
-                <a href="#" className="hover:text-gray-700 js-loginButton">
+                  <button
+                    onClick={() => updateNode({ Reauthenticate: true })}
+                    className="hover:text-gray-700"
+                  >
                     Switch account
-                </a>{" "}
+                  </button>{" "}
                   |{" "}
-                <a href="#" className="hover:text-gray-700 js-loginButton">
+                  <button
+                    onClick={() => updateNode({ Reauthenticate: true })}
+                    className="hover:text-gray-700"
+                  >
                     Reauthenticate
-                </a>{" "}
+                  </button>{" "}
                   |{" "}
-                <a href="#" className="hover:text-gray-700 js-logoutButton">
+                  <button
+                    onClick={() => updateNode({ ForceLogout: true })}
+                    className="hover:text-gray-700"
+                  >
                     Logout
-                </a>
+                  </button>
                 </div>
               </div>
               <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
@@ -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">
-            <h4 className="font-semibold truncate mr-2">{data.DeviceName}</h4>
+            {data.DeviceName || "Your device"}
-          </div>
+          </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
-              <button className="button button-blue w-full">
+              onClick={() => updateNode({ Reauthenticate: true })}
+              className="button button-blue w-full mb-4"
+            >
               Reauthenticate
             </button>
-            </a>
           </>
         )
       } else {
@@ -215,9 +231,12 @@ export function State({
                 .
               </p>
             </div>
-            <a href="#" className="mb-4 js-loginButton" target="_blank">
+            <button
-              <button className="button button-blue w-full">Log In</button>
+              onClick={() => updateNode({ Reauthenticate: true })}
-            </a>
+              className="button button-blue w-full mb-4"
+            >
+              Log In
+            </button>
           </>
         )
       }

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