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

Add visual feedback about Tailscale exit nodes being present

Browse Source
This commit is contained in:
Alessandro Pignotti 2024-10-17 09:10:21 +02:00
parent 9d841e48a4
commit f64bebfe40
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/NetworkingTab.svelte
View File

@ -4,6 +4,7 @@
import PanelButton from './PanelButton.svelte'; import PanelButton from './PanelButton.svelte';
var dispatch = createEventDispatcher(); var dispatch = createEventDispatcher();
var connectionState = networkData.connectionState; var connectionState = networkData.connectionState;
var exitNode = networkData.exitNode;
function handleConnect() { function handleConnect() {
connectionState.set("DOWNLOADING"); connectionState.set("DOWNLOADING");
dispatch('connect'); dispatch('connect');
@ -98,6 +99,10 @@
} }
</script> </script>
<h1 class="text-lg font-bold">Networking</h1> <h1 class="text-lg font-bold">Networking</h1>
<PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}/> <PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
{#if $connectionState == "CONNECTED"}
<i class='fas fa-circle fa-xs ml-auto {$exitNode ? 'text-green-500' : 'text-amber-500'}' title={$exitNode ? 'Ready' : 'No exit node'}></i>
{/if}
</PanelButton>
<p>WebVM can connect to the Internet via Tailscale</p> <p>WebVM can connect to the Internet via Tailscale</p>
<p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p> <p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p>

16
src/lib/network.js
View File

@ -15,6 +15,7 @@ let loginPromise = new Promise((f,r) => {
resolveLogin = f; resolveLogin = f;
}); });
let connectionState = writable("DISCONNECTED"); let connectionState = writable("DISCONNECTED");
let exitNode = writable(false);
function loginUrlCb(url) function loginUrlCb(url)
{ {
@ -36,6 +37,19 @@ function stateUpdateCb(state)
function netmapUpdateCb(map) function netmapUpdateCb(map)
{ {
networkData.currentIp = map.self.addresses[0]; networkData.currentIp = map.self.addresses[0];
var exitNodeFound = false;
for(var i=0;map.peers.length;i++)
{
if(map.peers[i].exitNode)
{
exitNodeFound = true;
break;
}
}
if(exitNodeFound)
{
exitNode.set(true);
}
} }
export async function startLogin() export async function startLogin()
@ -49,4 +63,4 @@ export async function startLogin()
export const networkInterface = { authKey: authKey, controlUrl: controlUrl, loginUrlCb: loginUrlCb, stateUpdateCb: stateUpdateCb, netmapUpdateCb: netmapUpdateCb }; export const networkInterface = { authKey: authKey, controlUrl: controlUrl, loginUrlCb: loginUrlCb, stateUpdateCb: stateUpdateCb, netmapUpdateCb: netmapUpdateCb };
export const networkData = { currentIp: null, connectionState: connectionState, loginUrl: null, dashboardUrl: dashboardUrl } export const networkData = { currentIp: null, connectionState: connectionState, exitNode: exitNode, loginUrl: null, dashboardUrl: dashboardUrl }