Make login link robust to slow connections, by disabling it when not ready

index.html

@@ -43,12 +43,12 @@
         let loginPromise = new Promise((f,r) => {
             resolveLogin = f;
         });
+        const loginElem = document.getElementById("loginLink");
+        const statusElem = document.getElementById("networkStatus");
         const loginUrlCb = (url) => {
-            const a = document.getElementById("loginLink");
-            a.href = url;
-            a.target = "_blank";
-            const status = document.getElementById("networkStatus");
-            status.innerHTML = "Tailscale Login";
+            loginElem.href = url;
+            loginElem.target = "_blank";
+            statusElem.innerHTML = "Tailscale Login";
             resolveLogin(url);
         };
         const stateUpdateCb = (state) => {
@@ -60,8 +60,7 @@
                 }
                 case State.Running:
                 {
-                    const a = document.getElementById("loginLink");
-                    a.href = "https://login.tailscale.com/admin/machines";
+                    loginElem.href = "https://login.tailscale.com/admin/machines";
                     break;
                 }
                 case State.Starting:
@@ -80,8 +79,7 @@
         };
         const netmapUpdateCb = (map) => {
             const ip = map.self.addresses[0];
-            const status = document.getElementById("networkStatus");
-            status.innerHTML = "IP: "+ip;
+            statusElem.innerHTML = "IP: "+ip;
         };
         const { listen, connect, bind, up } = await autoConf({
             loginUrlCb,
@@ -91,15 +89,15 @@
         window.networkInterface.bind = bind;
         window.networkInterface.connect = connect;
         window.networkInterface.listen = listen;
-        window.startTailscaleAndGetLogin = async () => {
-            const a = document.getElementById("loginLink");
-            a.onclick = null;
-            const status = document.getElementById("networkStatus");
-            status.innerHTML = "Downloading network code...";
+        loginElem.style.cursor = "pointer";
+        statusElem.style.color = "white";
+        loginElem.onclick = async () => {
+            loginElem.onclick = null;
+            statusElem.innerHTML = "Downloading network code...";
             const w = window.open("login.html", "_blank");
             await up();
             w.document.body.innerHTML = "Starting login...";
-            status.innerHTML = "Starting login...";
+            statusElem.innerHTML = "Starting login...";
             const url = await loginPromise;
             w.location.href = url;
         };
@@ -138,8 +136,8 @@
             </a>
           </li>
           <li style=" margin-right: 50px; height: 100%; display: flex; align-items: center;">
-            <a id="loginLink" href="#" onclick="startTailscaleAndGetLogin()" style="text-decoration: none">
-              <div id="networkStatus" style="color: white; font-family: montserrat; font-weight: 700; font-size: large;">Tailscale Login</div>
+            <a id="loginLink" style="text-decoration: none; cursor:not-allowed;">
+              <div id="networkStatus" style="color: grey; font-family: montserrat; font-weight: 700; font-size: large;">Tailscale Login</div>
             </a>
           </li>
         </div>