beenull/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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) => {
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>