|
@@ -1,103 +1,18 @@
|
|
|
<script>
|
|
|
- import { networkData, startLogin } from '$lib/network.js'
|
|
|
+ import { networkData, startLogin, updateButtonData } from '$lib/network.js'
|
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
import PanelButton from './PanelButton.svelte';
|
|
|
var dispatch = createEventDispatcher();
|
|
|
var connectionState = networkData.connectionState;
|
|
|
var exitNode = networkData.exitNode;
|
|
|
+
|
|
|
function handleConnect() {
|
|
|
connectionState.set("DOWNLOADING");
|
|
|
dispatch('connect');
|
|
|
}
|
|
|
- async function handleCopyIP(event)
|
|
|
- {
|
|
|
- // To prevent the default contexmenu from showing up when right-clicking..
|
|
|
- event.preventDefault();
|
|
|
- // Copy the IP to the clipboard.
|
|
|
- try
|
|
|
- {
|
|
|
- await window.navigator.clipboard.writeText(networkData.currentIp)
|
|
|
- connectionState.set("IPCOPIED");
|
|
|
- setTimeout(() => {
|
|
|
- connectionState.set("CONNECTED");
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- catch(msg)
|
|
|
- {
|
|
|
- console.log("Copy ip to clipboard: Error: " + msg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-function updateButtonData(state) {
|
|
|
- switch(state) {
|
|
|
- case "DISCONNECTED":
|
|
|
- return {
|
|
|
- buttonText: "Connect to Tailscale",
|
|
|
- isClickable: true,
|
|
|
- clickHandler: handleConnect,
|
|
|
- clickUrl: null,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- case "DOWNLOADING":
|
|
|
- return {
|
|
|
- buttonText: "Loading IP stack...",
|
|
|
- isClickable: false,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: null,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- case "LOGINSTARTING":
|
|
|
- return {
|
|
|
- buttonText: "Starting Login...",
|
|
|
- isClickable: false,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: null,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- case "LOGINREADY":
|
|
|
- return {
|
|
|
- buttonText: "Login to Tailscale",
|
|
|
- isClickable: true,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: networkData.loginUrl,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- case "CONNECTED":
|
|
|
- return {
|
|
|
- buttonText: `IP: ${networkData.currentIp}`,
|
|
|
- isClickable: true,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: networkData.dashboardUrl,
|
|
|
- buttonTooltip: "Right-click to copy",
|
|
|
- rightClickHandler: handleCopyIP
|
|
|
- };
|
|
|
- case "IPCOPIED":
|
|
|
- return {
|
|
|
- buttonText: "Copied!",
|
|
|
- isClickable: false,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: null,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- default:
|
|
|
- return {
|
|
|
- buttonText: `Text for state: ${state}`,
|
|
|
- isClickable: false,
|
|
|
- clickHandler: null,
|
|
|
- clickUrl: null,
|
|
|
- buttonTooltip: null,
|
|
|
- rightClickHandler: null
|
|
|
- };
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-let buttonData = null;
|
|
|
-$: buttonData = updateButtonData($connectionState);
|
|
|
+ let buttonData = null;
|
|
|
+ $: buttonData = updateButtonData($connectionState, handleConnect);
|
|
|
</script>
|
|
|
<h1 class="text-lg font-bold">Networking</h1>
|
|
|
<PanelButton buttonImage="assets/tailscale.svg" clickUrl={buttonData.clickUrl} clickHandler={buttonData.clickHandler} rightClickHandler={buttonData.rightClickHandler} buttonTooltip={buttonData.buttonTooltip} buttonText={buttonData.buttonText}>
|