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()