From 56176ba36081dd00312a1b06bf7102d99fe0bd8a Mon Sep 17 00:00:00 2001
From: Yuri Iozzelli <y.iozzelli@gmail.com>
Date: Wed, 14 Dec 2022 16:40:57 +0100
Subject: [PATCH] Put the network logic in its own js file
index.html and tinycore.html will just both include that
---
index.html | 75 +++------------------------------------------------
network.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++
tinycore.html | 75 +++------------------------------------------------
3 files changed, 74 insertions(+), 144 deletions(-)
create mode 100644 network.js
diff --git a/index.html b/index.html
index 34651d8..304420c 100644
--- a/index.html
+++ b/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%;">
diff --git a/network.js b/network.js
new file mode 100644
index 0000000..855c88f
--- /dev/null
+++ b/network.js
@@ -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();
+};
diff --git a/tinycore.html b/tinycore.html
index 09218aa..91242fe 100644
--- a/tinycore.html
+++ b/tinycore.html
@@ -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%;">