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

@@ -11,6 +11,7 @@ import (
 	"fmt"
 	"net/http"
 	"net/url"
+	"slices"
 	"strings"
 	"time"
 
@@ -238,6 +239,7 @@ func (s *Server) newSessionID() (string, error) {
 // peer is allowed to edit via the web UI.
 //
 // map value is true if the peer can edit the given feature.
+// Only capFeatures included in validCaps will be included.
 type peerCapabilities map[capFeature]bool
 
 // canEdit is true if the peerCapabilities grant edit access
@@ -252,29 +254,61 @@ func (p peerCapabilities) canEdit(feature capFeature) bool {
 	return p[feature]
 }
 
+// isEmpty is true if p is either nil or has no capabilities
+// with value true.
+func (p peerCapabilities) isEmpty() bool {
+	if p == nil {
+		return true
+	}
+	for _, v := range p {
+		if v == true {
+			return false
+		}
+	}
+	return true
+}
+
 type capFeature string
 
 const (
 	// The following values should not be edited.
 	// New caps can be added, but existing ones should not be changed,
 	// as these exact values are used by users in tailnet policy files.
+	//
+	// IMPORTANT: When adding a new cap, also update validCaps slice below.
 
-	capFeatureAll      capFeature = "*"        // grants peer management of all features
-	capFeatureFunnel   capFeature = "funnel"   // grants peer serve/funnel management
-	capFeatureSSH      capFeature = "ssh"      // grants peer SSH server management
-	capFeatureSubnet   capFeature = "subnet"   // grants peer subnet routes management
-	capFeatureExitNode capFeature = "exitnode" // grants peer ability to advertise-as and use exit nodes
-	capFeatureAccount  capFeature = "account"  // grants peer ability to turn on auto updates and log out of node
+	capFeatureAll       capFeature = "*"         // grants peer management of all features
+	capFeatureSSH       capFeature = "ssh"       // grants peer SSH server management
+	capFeatureSubnets   capFeature = "subnets"   // grants peer subnet routes management
+	capFeatureExitNodes capFeature = "exitnodes" // grants peer ability to advertise-as and use exit nodes
+	capFeatureAccount   capFeature = "account"   // grants peer ability to turn on auto updates and log out of node
 )
 
+// validCaps contains the list of valid capabilities used in the web client.
+// Any capabilities included in a peer's grants that do not fall into this
+// list will be ignored.
+var validCaps []capFeature = []capFeature{
+	capFeatureAll,
+	capFeatureSSH,
+	capFeatureSubnets,
+	capFeatureExitNodes,
+	capFeatureAccount,
+}
+
 type capRule struct {
 	CanEdit []string `json:"canEdit,omitempty"` // list of features peer is allowed to edit
 }
 
 // toPeerCapabilities parses out the web ui capabilities from the
 // given whois response.
 func toPeerCapabilities(status *ipnstate.Status, whois *apitype.WhoIsResponse) (peerCapabilities, error) {
-	if whois == nil {
+	if whois == nil || status == nil {
+		return peerCapabilities{}, nil
+	}
+	if whois.Node.IsTagged() {
+		// We don't allow management *from* tagged nodes, so ignore caps.
+		// The web client auth flow relies on having a true user identity
+		// that can be verified through login.
 		return peerCapabilities{}, nil
 	}
 
@@ -295,7 +329,10 @@ func toPeerCapabilities(status *ipnstate.Status, whois *apitype.WhoIsResponse) (
 	}
 	for _, c := range rules {
 		for _, f := range c.CanEdit {
-			caps[capFeature(strings.ToLower(f))] = true
+			cap := capFeature(strings.ToLower(f))
+			if slices.Contains(validCaps, cap) {
+				caps[cap] = true
+			}
 		}
 	}
 	return caps, nil

client/web/src/components/app.tsx

@@ -11,7 +11,7 @@ import LoginView from "src/components/views/login-view"
 import SSHView from "src/components/views/ssh-view"
 import SubnetRouterView from "src/components/views/subnet-router-view"
 import { UpdatingView } from "src/components/views/updating-view"
-import useAuth, { AuthResponse } from "src/hooks/auth"
+import useAuth, { AuthResponse, canEdit } from "src/hooks/auth"
 import { Feature, featureDescription, NodeData } from "src/types"
 import Card from "src/ui/card"
 import EmptyState from "src/ui/empty-state"
@@ -56,16 +56,19 @@ function WebClient({
         <Header node={node} auth={auth} newSession={newSession} />
         <Switch>
           <Route path="/">
-            <HomeView readonly={!auth.canManageNode} node={node} />
+            <HomeView node={node} auth={auth} />
           </Route>
           <Route path="/details">
-            <DeviceDetailsView readonly={!auth.canManageNode} node={node} />
+            <DeviceDetailsView node={node} auth={auth} />
           </Route>
           <FeatureRoute path="/subnets" feature="advertise-routes" node={node}>
-            <SubnetRouterView readonly={!auth.canManageNode} node={node} />
+            <SubnetRouterView
+              readonly={!canEdit("subnets", auth)}
+              node={node}
+            />
           </FeatureRoute>
           <FeatureRoute path="/ssh" feature="ssh" node={node}>
-            <SSHView readonly={!auth.canManageNode} node={node} />
+            <SSHView readonly={!canEdit("ssh", auth)} node={node} />
           </FeatureRoute>
           {/* <Route path="/serve">Share local content</Route> */}
           <FeatureRoute path="/update" feature="auto-update" node={node}>