Put the network logic in its own js file
index.html and tinycore.html will just both include that
This commit is contained in:
Yuri Iozzelli
parent
9af6bbaa1f
commit
56176ba360
3 changed files with 74 additions and 144 deletions
75
index.html
75
index.html
|
|
@ -31,81 +31,12 @@
|
|||
<link rel="stylesheet" id="us-fonts-css" href="https://fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C500%2C600%2C700&display=swap&ver=6.0.2" media="all">
|
||||
<link rel="stylesheet" href="./xterm/xterm.css" />
|
||||
<link rel="stylesheet" href="./scrollbar.css" />
|
||||
<script src="./xterm/xterm.js"></script>
|
||||
<script src="./xterm/xterm-addon-fit.js"></script>
|
||||
<script>
|
||||
window.networkInterface = { bind: null, connect: null, listen: null, ready: false };
|
||||
</script>
|
||||
<script src="./xterm/xterm.js"></script>
|
||||
<script src="./xterm/xterm-addon-fit.js"></script>
|
||||
<script defer type="module">
|
||||
import { State } from "/tun/tailscale_tun.js";
|
||||
import { autoConf } from "/tun/tailscale_tun_auto.js";
|
||||
|
||||
let resolveLogin = null;
|
||||
let loginPromise = new Promise((f,r) => {
|
||||
resolveLogin = f;
|
||||
});
|
||||
const loginElem = document.getElementById("loginLink");
|
||||
const statusElem = document.getElementById("networkStatus");
|
||||
const loginUrlCb = (url) => {
|
||||
loginElem.href = url;
|
||||
loginElem.target = "_blank";
|
||||
statusElem.innerHTML = "Tailscale Login";
|
||||
resolveLogin(url);
|
||||
};
|
||||
const stateUpdateCb = (state) => {
|
||||
switch(state)
|
||||
{
|
||||
case State.NeedsLogin:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Running:
|
||||
{
|
||||
loginElem.href = "https://login.tailscale.com/admin/machines";
|
||||
break;
|
||||
}
|
||||
case State.Starting:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Stopped:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.NoState:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const netmapUpdateCb = (map) => {
|
||||
const ip = map.self.addresses[0];
|
||||
statusElem.innerHTML = "IP: "+ip;
|
||||
};
|
||||
const { listen, connect, bind, up } = await autoConf({
|
||||
loginUrlCb,
|
||||
stateUpdateCb,
|
||||
netmapUpdateCb,
|
||||
});
|
||||
window.networkInterface.bind = bind;
|
||||
window.networkInterface.connect = connect;
|
||||
window.networkInterface.listen = listen;
|
||||
window.networkInterface.ready = true;
|
||||
loginElem.style.cursor = "pointer";
|
||||
statusElem.style.color = "white";
|
||||
loginElem.onclick = () => {
|
||||
loginElem.onclick = null;
|
||||
statusElem.innerHTML = "Downloading network code...";
|
||||
const w = window.open("login.html", "_blank");
|
||||
async function waitLogin() {
|
||||
await up();
|
||||
statusElem.innerHTML = "Starting login...";
|
||||
const url = await loginPromise;
|
||||
w.location.href = url;
|
||||
}
|
||||
waitLogin();
|
||||
};
|
||||
</script>
|
||||
<script type="module" src="network.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin:0;height:100%;background:black;color:white;overflow:hidden; display:flex; flex-direction: column; justify-content: space-between; height: 100%;">
|
||||
|
|
|
|||
68
network.js
Normal file
68
network.js
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { State } from "/tun/tailscale_tun.js";
|
||||
import { autoConf } from "/tun/tailscale_tun_auto.js";
|
||||
|
||||
let resolveLogin = null;
|
||||
let loginPromise = new Promise((f,r) => {
|
||||
resolveLogin = f;
|
||||
});
|
||||
const loginElem = document.getElementById("loginLink");
|
||||
const statusElem = document.getElementById("networkStatus");
|
||||
const loginUrlCb = (url) => {
|
||||
loginElem.href = url;
|
||||
loginElem.target = "_blank";
|
||||
statusElem.innerHTML = "Tailscale Login";
|
||||
resolveLogin(url);
|
||||
};
|
||||
const stateUpdateCb = (state) => {
|
||||
switch(state)
|
||||
{
|
||||
case State.NeedsLogin:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Running:
|
||||
{
|
||||
loginElem.href = "https://login.tailscale.com/admin/machines";
|
||||
break;
|
||||
}
|
||||
case State.Starting:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Stopped:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.NoState:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const netmapUpdateCb = (map) => {
|
||||
const ip = map.self.addresses[0];
|
||||
statusElem.innerHTML = "IP: "+ip;
|
||||
};
|
||||
const { listen, connect, bind, up } = await autoConf({
|
||||
loginUrlCb,
|
||||
stateUpdateCb,
|
||||
netmapUpdateCb,
|
||||
});
|
||||
window.networkInterface.bind = bind;
|
||||
window.networkInterface.connect = connect;
|
||||
window.networkInterface.listen = listen;
|
||||
window.networkInterface.ready = true;
|
||||
loginElem.style.cursor = "pointer";
|
||||
statusElem.style.color = "white";
|
||||
loginElem.onclick = () => {
|
||||
loginElem.onclick = null;
|
||||
statusElem.innerHTML = "Downloading network code...";
|
||||
const w = window.open("login.html", "_blank");
|
||||
async function waitLogin() {
|
||||
await up();
|
||||
statusElem.innerHTML = "Starting login...";
|
||||
const url = await loginPromise;
|
||||
w.location.href = url;
|
||||
}
|
||||
waitLogin();
|
||||
};
|
||||
|
|
@ -30,81 +30,12 @@
|
|||
<link rel="stylesheet" id="us-fonts-css" href="https://fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C500%2C600%2C700&display=swap&ver=6.0.2" media="all">
|
||||
<link rel="stylesheet" href="./xterm/xterm.css" />
|
||||
<link rel="stylesheet" href="./scrollbar.css" />
|
||||
<script src="./xterm/xterm.js"></script>
|
||||
<script src="./xterm/xterm-addon-fit.js"></script>
|
||||
<script>
|
||||
window.networkInterface = { bind: null, connect: null, listen: null, ready: false };
|
||||
</script>
|
||||
<script src="./xterm/xterm.js"></script>
|
||||
<script src="./xterm/xterm-addon-fit.js"></script>
|
||||
<script defer type="module">
|
||||
import { State } from "/tun/tailscale_tun.js";
|
||||
import { autoConf } from "/tun/tailscale_tun_auto.js";
|
||||
|
||||
let resolveLogin = null;
|
||||
let loginPromise = new Promise((f,r) => {
|
||||
resolveLogin = f;
|
||||
});
|
||||
const loginElem = document.getElementById("loginLink");
|
||||
const statusElem = document.getElementById("networkStatus");
|
||||
const loginUrlCb = (url) => {
|
||||
loginElem.href = url;
|
||||
loginElem.target = "_blank";
|
||||
statusElem.innerHTML = "Tailscale Login";
|
||||
resolveLogin(url);
|
||||
};
|
||||
const stateUpdateCb = (state) => {
|
||||
switch(state)
|
||||
{
|
||||
case State.NeedsLogin:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Running:
|
||||
{
|
||||
loginElem.href = "https://login.tailscale.com/admin/machines";
|
||||
break;
|
||||
}
|
||||
case State.Starting:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.Stopped:
|
||||
{
|
||||
break;
|
||||
}
|
||||
case State.NoState:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const netmapUpdateCb = (map) => {
|
||||
const ip = map.self.addresses[0];
|
||||
statusElem.innerHTML = "IP: "+ip;
|
||||
};
|
||||
const { listen, connect, bind, up } = await autoConf({
|
||||
loginUrlCb,
|
||||
stateUpdateCb,
|
||||
netmapUpdateCb,
|
||||
});
|
||||
window.networkInterface.bind = bind;
|
||||
window.networkInterface.connect = connect;
|
||||
window.networkInterface.listen = listen;
|
||||
window.networkInterface.ready = true;
|
||||
loginElem.style.cursor = "pointer";
|
||||
statusElem.style.color = "white";
|
||||
loginElem.onclick = () => {
|
||||
loginElem.onclick = null;
|
||||
statusElem.innerHTML = "Downloading network code...";
|
||||
const w = window.open("login.html", "_blank");
|
||||
async function waitLogin() {
|
||||
await up();
|
||||
statusElem.innerHTML = "Starting login...";
|
||||
const url = await loginPromise;
|
||||
w.location.href = url;
|
||||
}
|
||||
waitLogin();
|
||||
};
|
||||
</script>
|
||||
<script type="module" src="network.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin:0;height:100%;background:black;color:white;overflow:hidden; display:flex; flex-direction: column; justify-content: space-between; height: 100%;">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue