Sunny-Moom/webvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yuri Iozzelli 2022-10-05 11:02:53 +02:00 committed by Carlo Piovesan
parent 1900b2507c
commit d3290c1cfe
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

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