diff --git a/src/components/Loader.astro b/src/components/Loader.astro index 0bf28b8..377f82c 100644 --- a/src/components/Loader.astro +++ b/src/components/Loader.astro @@ -3,8 +3,13 @@ import { SW } from "@utils/proxy.ts"; const settings = new Settings(); const sw = new SW(); + + const init = async () => { + settings.searchEngine(); + await sw.wispServer(); + } - + init(); document.addEventListener('astro:after-swap', async () => { //const settings = await Settings.getInstance(); settings.theme(); diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro new file mode 100644 index 0000000..4d00732 --- /dev/null +++ b/src/components/ui/Button.astro @@ -0,0 +1,14 @@ +--- +import { Icon } from 'astro-icon/components'; + +interface Props { + id: string; + text: string; + icon?: string +} +const { id, text, icon } = Astro.props; +--- + diff --git a/src/components/ui/Dropdown.astro b/src/components/ui/Dropdown.astro index f4f01b5..b0a59e7 100644 --- a/src/components/ui/Dropdown.astro +++ b/src/components/ui/Dropdown.astro @@ -7,7 +7,7 @@ interface Props { const { id, options } = Astro.props; --- - {options.map((el) => )} diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro index e69de29..9af7820 100644 --- a/src/components/ui/Input.astro +++ b/src/components/ui/Input.astro @@ -0,0 +1,8 @@ +--- +interface Props { + placeholder: string; + id: string; +} +const { placeholder, id } = Astro.props; +--- + diff --git a/src/pages/[...settings]/index.astro b/src/pages/[...settings]/index.astro index b93d0c7..c1d0284 100644 --- a/src/pages/[...settings]/index.astro +++ b/src/pages/[...settings]/index.astro @@ -2,6 +2,7 @@ import SettingsLayout from "@layouts/SettingsLayout.astro"; import Dropdown from "@components/ui/Dropdown.astro"; import Input from "@components/ui/Input.astro"; +import Button from "@components/ui/Button.astro"; import { SearchEngines, type DropdownOptions } from "@utils/types"; const SearchEngineOptions: DropdownOptions[] = []; Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push( @@ -35,9 +36,18 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(

Search Engine

-
-

Wisp Server

- +
+
+

Wisp Server

+ +
+ +
+
@@ -76,12 +86,59 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push( const searchEngine = async (opts: Options) => { const seEl = document.getElementById("dropdownBox-sSwitcher") as HTMLSelectElement; - seEl.value = opts.storageManager.getVal("searchEngine") || "ddg"; + seEl.value = opts.storageManager.getVal("searchEngine") || SearchEngines.DuckDuckGo; seEl.addEventListener("change", async () => { opts.settings.searchEngine(seEl.value); }); } + const wispServer = async (opts: Options) => { + const wispServerSwitcher = document.getElementById("wispServerSwitcher") as HTMLInputElement; + const wispServerInfo = document.getElementById("wispServerInfo") as HTMLElement; + const wispServerInfoInner = document.getElementById("wispServerInfo-inner") as HTMLParagraphElement; + const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement; + const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement; + + wispServerSwitcher.value = opts.storageManager.getVal("wispServer"); + + const reset = (hide: boolean = true) => { + if (hide) wispServerInfo.classList.add("hidden"); + wispServerInfoInner.innerText = "Checking URL..." + wispServerInfoInner.classList.remove("text-red-500"); + wispServerInfoInner.classList.remove("text-green-500"); + }; + + wispServerSave.addEventListener("click", async () => { + const server = wispServerSwitcher.value; + wispServerInfo.classList.remove("hidden"); + + if (!server.match(/^wss?:\/\/.*/)) { + reset(false); + wispServerInfoInner.innerText = "Invalid URL! \nURL's MUST start with wss:// or ws://"; + wispServerInfoInner.classList.add("text-red-500"); + } + else { + //TODO: we need to actually check if the wisp server exists. But for now, this will work + reset(false); + wispServerInfoInner.innerText = "Wisp Server Set!"; + wispServerInfoInner.classList.add("text-green-500"); + await opts.sw.wispServer(wispServerSwitcher.value, true); + } + + // We reset this after 4 seconds (any errors OR success) + setTimeout(reset, 4000); + }); + + wispServerReset.addEventListener("click", async () => { + wispServerInfo.classList.remove("hidden"); + wispServerInfoInner.innerText = "Wisp Server Reset!"; + wispServerInfoInner.classList.add("text-green-500"); + await opts.sw.wispServer(`${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`, true); + wispServerSwitcher.value = opts.storageManager.getVal("wispServer"); + setTimeout(reset, 4000); + }); + } + document.addEventListener("astro:page-load", async () => { try { const settings = await Settings.getInstance(); @@ -90,6 +147,7 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push( await transport({settings, sw, storageManager}); await proxy({settings, sw, storageManager}); await searchEngine({settings, sw, storageManager}); + await wispServer({settings, sw, storageManager}); } catch (err) { console.log(err) } }); diff --git a/src/utils/proxy.ts b/src/utils/proxy.ts index a1d5bf7..6e04ac7 100644 --- a/src/utils/proxy.ts +++ b/src/utils/proxy.ts @@ -60,17 +60,22 @@ class SW { this.#storageManager.setVal("transport", transport || this.#storageManager.getVal("transport") || 'epoxy'); switch(transport) { case 'epoxy': { - await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]); + await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]); } case 'libcurl': { - await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]); + await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]); } default: { - await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]); + await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]); } } } + async wispServer(wispServer?: string, set?: true) { + this.#storageManager.setVal("wispServer", wispServer || this.#storageManager.getVal('wispServer') || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/"); + if (set) await this.setTransport(); + } + constructor() { SW.#instance.add(this); this.#storageManager = new StoreManager("radius||settings"); diff --git a/src/utils/settings.ts b/src/utils/settings.ts index 0bff8d8..5a1d393 100644 --- a/src/utils/settings.ts +++ b/src/utils/settings.ts @@ -1,6 +1,7 @@ import { StoreManager } from "./storage"; import { BareMuxConnection } from "@mercuryworkshop/bare-mux"; import { SW } from "@utils/proxy.ts"; +import { SearchEngines } from "./types"; /** * The settings class * Initializes it's own StorageManager, and handles everything within the class itself @@ -75,8 +76,8 @@ class Settings { this.#storageManager.setVal('proxy', prox); } - searchEngine(engine: string) { - this.#storageManager.setVal('searchEngine', engine); + searchEngine(engine?: string) { + this.#storageManager.setVal('searchEngine', engine || SearchEngines.DuckDuckGo); } async *#init() {