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/auth.ts

@@ -4,25 +4,50 @@
 import { useCallback, useEffect, useState } from "react"
 import { apiFetch, setSynoToken } from "src/api"
 
-export enum AuthType {
-  synology = "synology",
-  tailscale = "tailscale",
-}
-
 export type AuthResponse = {
-  authNeeded?: AuthType
-  canManageNode: boolean
-  serverMode: "login" | "readonly" | "manage"
+  serverMode: AuthServerMode
+  authorized: boolean
   viewerIdentity?: {
     loginName: string
     nodeName: string
     nodeIP: string
     profilePicUrl?: string
+    capabilities: { [key in PeerCapability]: boolean }
   }
+  needsSynoAuth?: boolean
 }
 
-// useAuth reports and refreshes Tailscale auth status
-// for the web client.
+export type AuthServerMode = "login" | "readonly" | "manage"
+
+export type PeerCapability = "*" | "ssh" | "subnets" | "exitnodes" | "account"
+
+/**
+ * canEdit reports whether the given auth response specifies that the viewer
+ * has the ability to edit the given capability.
+ */
+export function canEdit(cap: PeerCapability, auth: AuthResponse): boolean {
+  if (!auth.authorized || !auth.viewerIdentity) {
+    return false
+  }
+  if (auth.viewerIdentity.capabilities["*"] === true) {
+    return true // can edit all features
+  }
+  return auth.viewerIdentity.capabilities[cap] === true
+}
+
+/**
+ * hasAnyEditCapabilities reports whether the given auth response specifies
+ * that the viewer has at least one edit capability. If this is true, the
+ * user is able to go through the auth flow to authenticate a management
+ * session.
+ */
+export function hasAnyEditCapabilities(auth: AuthResponse): boolean {
+  return Object.values(auth.viewerIdentity?.capabilities || {}).includes(true)
+}
+
+/**
+ * useAuth reports and refreshes Tailscale auth status for the web client.
+ */
 export default function useAuth() {
   const [data, setData] = useState<AuthResponse>()
   const [loading, setLoading] = useState<boolean>(true)
@@ -33,18 +58,16 @@ export default function useAuth() {
     return apiFetch<AuthResponse>("/auth", "GET")
       .then((d) => {
         setData(d)
-        switch (d.authNeeded) {
-          case AuthType.synology:
-            fetch("/webman/login.cgi")
-              .then((r) => r.json())
-              .then((a) => {
-                setSynoToken(a.SynoToken)
-                setRanSynoAuth(true)
-                setLoading(false)
-              })
-            break
-          default:
-            setLoading(false)
+        if (d.needsSynoAuth) {
+          fetch("/webman/login.cgi")
+            .then((r) => r.json())
+            .then((a) => {
+              setSynoToken(a.SynoToken)
+              setRanSynoAuth(true)
+              setLoading(false)
+            })
+        } else {
+          setLoading(false)
         }
         return d
       })
@@ -72,8 +95,13 @@ export default function useAuth() {
 
   useEffect(() => {
     loadAuth().then((d) => {
+      if (!d) {
+        return
+      }
       if (
-        !d?.canManageNode &&
+        !d.authorized &&
+        hasAnyEditCapabilities(d) &&
+        // Start auth flow immediately if browser has requested it.
         new URLSearchParams(window.location.search).get("check") === "now"
       ) {
         newSession()

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 }
+}