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,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 && (
+        {data.Profile &&
-          <>
+          data.Status !== "NoState" &&
-            <div className="text-right w-full leading-4">
+          data.Status !== "NeedsLogin" && (
-              <h4 className="truncate leading-normal">
+            <>
-                {data.Profile.LoginName}
+              <div className="text-right w-full leading-4">
-              </h4>
+                <h4 className="truncate leading-normal">
-              <div className="text-xs text-gray-500 text-right">
+                  {data.Profile.LoginName}
-                <a href="#" className="hover:text-gray-700 js-loginButton">
+                </h4>
-                  Switch account
+                <div className="text-xs text-gray-500 text-right">
-                </a>{" "}
+                  <button
-                |{" "}
+                    onClick={() => updateNode({ Reauthenticate: true })}
-                <a href="#" className="hover:text-gray-700 js-loginButton">
+                    className="hover:text-gray-700"
-                  Reauthenticate
+                  >
-                </a>{" "}
+                    Switch account
-                |{" "}
+                  </button>{" "}
-                <a href="#" className="hover:text-gray-700 js-logoutButton">
+                  |{" "}
-                  Logout
+                  <button
-                </a>
+                    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">
-            <div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
+                {data.Profile.ProfilePicURL ? (
-              {data.Profile.ProfilePicURL ? (
+                  <div
-                <div
+                    className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
-                  className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
+                    style={{
-                  style={{
+                      backgroundImage: `url(${data.Profile.ProfilePicURL})`,
-                    backgroundImage: `url(${data.Profile.ProfilePicURL})`,
+                      backgroundSize: "cover",
-                    backgroundSize: "cover",
+                    }}
-                  }}
+                  />
-                />
+                ) : (
-              ) : (
+                  <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
-                <div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
+                )}
-              )}
+              </div>
-            </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">
-            <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 })}
-                Reauthenticate
+              className="button button-blue w-full mb-4"
-              </button>
+            >
-            </a>
+              Reauthenticate
+            </button>
           </>
         )
       } 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