client/web: add new readonly mode

The new read-only mode is only accessible when running `tailscale web`
by passing a new `-readonly` flag. This new mode is identical to the
existing login mode with two exceptions:

 - the management client in tailscaled is not started (though if it is
   already running, it is left alone)

 - the client does not prompt the user to login or switch to the
   management client. Instead, a message is shown instructing the user
   to use other means to manage the device.

Updates #10979

Signed-off-by: Will Norris <will@tailscale.com>

client/web/src/components/login-toggle.tsx

@@ -162,7 +162,19 @@ function LoginPopoverContent({
       </div>
       {!auth.canManageNode && (
         <>
-          {!auth.viewerIdentity ? (
+          {auth.serverMode === "readonly" ? (
+            <p className="text-gray-500 text-xs">
+              This web interface is running in read-only mode.{" "}
+              <a
+                href="https://tailscale.com/s/web-client-read-only"
+                className="text-blue-700"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Learn more &rarr;
+              </a>
+            </p>
+          ) : !auth.viewerIdentity ? (
             // User is not connected over Tailscale.
             // These states are only possible on the login client.
             <>

client/web/src/hooks/auth.ts

@@ -12,7 +12,7 @@ export enum AuthType {
 export type AuthResponse = {
   authNeeded?: AuthType
   canManageNode: boolean
-  serverMode: "login" | "manage"
+  serverMode: "login" | "readonly" | "manage"
   viewerIdentity?: {
     loginName: string
     nodeName: string