cmd/tsconnect: pop CTA to make everything work with tailnet lock

Signed-off-by: Tom DNetto <tom@tailscale.com>

cmd/tsconnect/src/app/app.tsx

@@ -43,8 +43,26 @@ class App extends Component<{}, AppState> {
       )
     }
 
+    const lockedOut = netMap?.lockedOut
+    let lockedOutInstructions
+    if (lockedOut) {
+      lockedOutInstructions = (
+        <div class="container mx-auto px-4 text-center space-y-4">
+          <p>This instance of Tailscale Connect needs to be signed, due to
+            {" "}<a href="https://tailscale.com/kb/1226/tailnet-lock/" class="link">tailnet lock</a>{" "}
+            being enabled on this domain.
+          </p>
+
+          <p>
+            Run the following command on a device with a trusted tailnet lock key:
+            <pre>tailscale lock sign {netMap.self.nodeKey}</pre>
+          </p>
+        </div>
+      )
+    }
+
     let ssh
-    if (ipn && ipnState === "Running" && netMap) {
+    if (ipn && ipnState === "Running" && netMap && !lockedOut) {
       ssh = <SSH netMap={netMap} ipn={ipn} />
     }
 
@@ -55,6 +73,7 @@ class App extends Component<{}, AppState> {
         <div class="flex-grow flex flex-col justify-center overflow-hidden">
           {urlDisplay}
           {machineAuthInstructions}
+          {lockedOutInstructions}
           {ssh}
         </div>
       </>

cmd/tsconnect/src/app/ssh.tsx

@@ -60,11 +60,11 @@ function SSHSession({
 function NoSSHPeers() {
   return (
     <div class="container mx-auto px-4 text-center">
-      None of your machines have
+      None of your machines have{" "}
       <a href="https://tailscale.com/kb/1193/tailscale-ssh/" class="link">
         Tailscale SSH
       </a>
-      enabled. Give it a try!
+      {" "}enabled. Give it a try!
     </div>
   )
 }

cmd/tsconnect/src/types/wasm_js.d.ts

@@ -63,6 +63,7 @@ declare global {
   type IPNNetMap = {
     self: IPNNetMapSelfNode
     peers: IPNNetMapPeerNode[]
+    lockedOut: boolean
   }
 
   type IPNNetMapNode = {