fix: setup failed when secret is required

src/pages/Connections.tsx

@@ -9,13 +9,15 @@ import {
 import byteSize from 'byte-size'
 import { isIPv6 } from 'is-ip'
 import { For, createSignal } from 'solid-js'
-import { wsEndpointURL } from '~/signals'
+import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '../types'
 
 export const Connections = () => {
   const [search, setSearch] = createSignal('')
 
-  const ws = createReconnectingWS(`${wsEndpointURL()}/connections`)
+  const ws = createReconnectingWS(
+    `${wsEndpointURL()}/connections?token=${secret()}`,
+  )
 
   const messageEvent = createEventSignal<{
     message: WebSocketEventMap['message']

src/pages/Logs.tsx

@@ -1,13 +1,13 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { createReconnectingWS } from '@solid-primitives/websocket'
 import { For, createEffect, createSignal } from 'solid-js'
-import { wsEndpointURL } from '~/signals'
+import { secret, wsEndpointURL } from '~/signals'
 
 export const Logs = () => {
   const [search, setSearch] = createSignal('')
   const [logs, setLogs] = createSignal<string[]>([])
 
-  const ws = createReconnectingWS(`${wsEndpointURL()}/logs`)
+  const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`)
 
   const messageEvent = createEventSignal<{
     message: WebSocketEventMap['message']

src/pages/Overview.tsx

@@ -4,7 +4,7 @@ import { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
 import { SolidApexCharts } from 'solid-apexcharts'
 import { createEffect, createMemo, createSignal } from 'solid-js'
-import { wsEndpointURL } from '~/signals'
+import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
 const defaultChartOptions: ApexOptions = {
@@ -40,7 +40,9 @@ export const Overview = () => {
   )
   const [memories, setMemories] = createSignal<number[]>([])
 
-  const trafficWS = createReconnectingWS(`${wsEndpointURL()}/traffic`)
+  const trafficWS = createReconnectingWS(
+    `${wsEndpointURL()}/traffic?token=${secret()}}`,
+  )
 
   const trafficWSMessageEvent = createEventSignal<{
     message: WebSocketEventMap['message']
@@ -76,7 +78,9 @@ export const Overview = () => {
     },
   ])
 
-  const memoryWS = createReconnectingWS(`${wsEndpointURL()}/memory`)
+  const memoryWS = createReconnectingWS(
+    `${wsEndpointURL()}/memory?token=${secret()}`,
+  )
 
   const memoryWSMessageEvent = createEventSignal<{
     message: WebSocketEventMap['message']
@@ -108,7 +112,9 @@ export const Overview = () => {
     },
   ])
 
-  const connectionsWS = createReconnectingWS(`${wsEndpointURL()}/connections`)
+  const connectionsWS = createReconnectingWS(
+    `${wsEndpointURL()}/connections?token=${secret()}}`,
+  )
 
   const connectionsWSMessageEvent = createEventSignal<{
     message: WebSocketEventMap['message']

src/pages/Setup.tsx

@@ -19,7 +19,15 @@ export const Setup = () => {
   const { form } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
     async onSubmit(values) {
-      const { hello } = await ky.get(values.url).json<{ hello: string }>()
+      const { hello } = await ky
+        .get(values.url, {
+          headers: values.secret
+            ? {
+                Authorization: `Bearer ${values.secret}`,
+              }
+            : {},
+        })
+        .json<{ hello: string }>()
 
       if (!hello) {
         return

src/signals/index.ts

@@ -30,6 +30,8 @@ export const [curTheme, setCurTheme] = makePersisted(
 export const endpoint = () =>
   endpointList().find(({ id }) => id === selectedEndpoint())
 
+export const secret = () => endpoint()?.secret
+
 export const wsEndpointURL = () => endpoint()?.url.replace('http', 'ws')
 
 export const useRequest = () => {