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/components/views/device-details-view.tsx

@@ -8,6 +8,7 @@ import ACLTag from "src/components/acl-tag"
 import * as Control from "src/components/control-components"
 import NiceIP from "src/components/nice-ip"
 import { UpdateAvailableNotification } from "src/components/update-available"
+import { AuthResponse, canEdit } from "src/hooks/auth"
 import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Card from "src/ui/card"
@@ -16,11 +17,11 @@ import QuickCopy from "src/ui/quick-copy"
 import { useLocation } from "wouter"
 
 export default function DeviceDetailsView({
-  readonly,
   node,
+  auth,
 }: {
-  readonly: boolean
   node: NodeData
+  auth: AuthResponse
 }) {
   return (
     <>
@@ -37,11 +38,11 @@ export default function DeviceDetailsView({
                 })}
               />
             </div>
-            {!readonly && <DisconnectDialog />}
+            {canEdit("account", auth) && <DisconnectDialog />}
           </div>
         </Card>
         {node.Features["auto-update"] &&
-          !readonly &&
+          canEdit("account", auth) &&
           node.ClientVersion &&
           !node.ClientVersion.RunningLatest && (
             <UpdateAvailableNotification details={node.ClientVersion} />

client/web/src/components/views/home-view.tsx

@@ -8,17 +8,18 @@ import ArrowRight from "src/assets/icons/arrow-right.svg?react"
 import Machine from "src/assets/icons/machine.svg?react"
 import AddressCard from "src/components/address-copy-card"
 import ExitNodeSelector from "src/components/exit-node-selector"
+import { AuthResponse, canEdit } from "src/hooks/auth"
 import { NodeData } from "src/types"
 import Card from "src/ui/card"
 import { pluralize } from "src/utils/util"
 import { Link, useLocation } from "wouter"
 
 export default function HomeView({
-  readonly,
   node,
+  auth,
 }: {
-  readonly: boolean
   node: NodeData
+  auth: AuthResponse
 }) {
   const [allSubnetRoutes, pendingSubnetRoutes] = useMemo(
     () => [
@@ -63,7 +64,11 @@ export default function HomeView({
         </div>
         {(node.Features["advertise-exit-node"] ||
           node.Features["use-exit-node"]) && (
-          <ExitNodeSelector className="mb-5" node={node} disabled={readonly} />
+          <ExitNodeSelector
+            className="mb-5"
+            node={node}
+            disabled={!canEdit("exitnodes", auth)}
+          />
         )}
         <Link
           className="link font-medium"