client/web: use grants on web UI frontend

Starts using peer capabilities to restrict the management client
on a per-view basis. This change also includes a bulky cleanup
of the login-toggle.tsx file, which was getting pretty unwieldy
in its previous form.

Updates tailscale/corp#16695

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/hooks/ts-web-connected.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Tailscale Inc & AUTHORS
+// SPDX-License-Identifier: BSD-3-Clause
+
+import { useCallback, useEffect, useState } from "react"
+import { isHTTPS } from "src/utils/util"
+import { AuthServerMode } from "./auth"
+
+/**
+ * useTSWebConnected hook is used to check whether the browser is able to
+ * connect to the web client served at http://${nodeIPv4}:5252
+ */
+export function useTSWebConnected(mode: AuthServerMode, nodeIPv4: string) {
+  const [tsWebConnected, setTSWebConnected] = useState<boolean>(
+    mode === "manage" // browser already on the web client
+  )
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  const checkTSWebConnection = useCallback(() => {
+    if (mode === "manage") {
+      // Already connected to the web client.
+      setTSWebConnected(true)
+      return
+    }
+    if (isHTTPS()) {
+      // When page is loaded over HTTPS, the connectivity check will always
+      // fail with a mixed-content error. In this case don't bother doing
+      // the check.
+      return
+    }
+    if (isLoading) {
+      return // already checking
+    }
+    setIsLoading(true)
+    fetch(`http://${nodeIPv4}:5252/ok`, { mode: "no-cors" })
+      .then(() => {
+        setTSWebConnected(true)
+        setIsLoading(false)
+      })
+      .catch(() => setIsLoading(false))
+  }, [isLoading, mode, nodeIPv4])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => checkTSWebConnection(), []) // checking connection for first time on page load
+
+  return { tsWebConnected, checkTSWebConnection, isLoading }
+}