feat(setup): prefix endpoint url with current url protocol if missing

package.json

@@ -55,6 +55,7 @@
     "solid-apexcharts": "^0.3.2",
     "solid-infinite-scroll": "^1.0.1",
     "solid-js": "^1.7.11",
+    "solid-toast": "^0.5.0",
     "sort-package-json": "^2.5.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",

src/App.tsx

@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
 import { Show, createEffect, lazy, onMount } from 'solid-js'
+import { Toaster } from 'solid-toast'
 import { twMerge } from 'tailwind-merge'
 import { Header } from '~/components'
 import { ROUTES } from '~/constants'
@@ -71,6 +72,8 @@ export const App = () => {
           />
         </Routes>
       </div>
+
+      <Toaster position="bottom-center" />
     </div>
   )
 }

src/helpers/global.ts

@@ -1,5 +1,8 @@
 import { createSignal } from 'solid-js'
 
+export const transformEndpointURL = (url: string) =>
+  /^https?/.test(url) ? url : `${window.location.protocol}//${url}`
+
 export const useStringBooleanMap = () => {
   const [map, setMap] = createSignal<Record<string, boolean>>({})
   const set = (name: string, value: boolean) => {

src/i18n/en.ts

@@ -73,4 +73,6 @@ export default {
   sequence: 'Sequence',
   payload: 'Payload',
   details: 'Details',
+  endpointURL: 'Endpoint URL',
+  secret: 'Secret',
 }

src/i18n/zh.ts

@@ -73,4 +73,6 @@ export default {
   sequence: '序列号',
   payload: '内容',
   details: '详情',
+  endpointURL: '后端地址',
+  secret: '密钥',
 }

src/pages/Setup.tsx

@@ -5,9 +5,11 @@ import { useNavigate } from '@solidjs/router'
 import { IconX } from '@tabler/icons-solidjs'
 import ky from 'ky'
 import { For, onMount } from 'solid-js'
+import { toast } from 'solid-toast'
 import { v4 as uuid } from 'uuid'
 import { z } from 'zod'
 import { Button } from '~/components'
+import { transformEndpointURL } from '~/helpers'
 import {
   endpointList,
   selectedEndpoint,
@@ -16,7 +18,7 @@ import {
 } from '~/signals'
 
 const schema = z.object({
-  url: z.string().url().nonempty(),
+  url: z.string().nonempty(),
   secret: z.string(),
 })
 
@@ -39,7 +41,11 @@ export default () => {
           : {},
       })
       .then(({ ok }) => ok)
-      .catch(() => false)
+      .catch((err) => {
+        const { message } = err as Error
+
+        toast.error(message)
+      })
 
   const onEndpointSelect = async (id: string) => {
     const endpoint = endpointList().find((e) => e.id === id)
@@ -56,17 +62,19 @@ export default () => {
   }
 
   const onSubmit = async ({ url, secret }: { url: string; secret: string }) => {
-    if (!(await checkEndpoint(url, secret))) {
+    const transformedURL = transformEndpointURL(url)
+
+    if (!(await checkEndpoint(transformedURL, secret))) {
       return
     }
 
     const id = uuid()
     const list = endpointList().slice()
-    const point = list.find((history) => history.url === url)
+    const point = list.find((history) => history.url === transformedURL)
 
     if (!point) {
       // new host and secret
-      setEndpointList([{ id, url, secret }, ...list])
+      setEndpointList([{ id, url: transformedURL, secret }, ...list])
       onSetupSuccess(id)
 
       return
@@ -80,9 +88,16 @@ export default () => {
     onSetupSuccess(id)
   }
 
+  const onError = (err: unknown) => {
+    const { message } = err as Error
+
+    toast.error(message)
+  }
+
   const { form } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
     onSubmit,
+    onError,
   })
 
   const onRemove = (id: string) => {
@@ -116,27 +131,39 @@ export default () => {
   })
 
   return (
-    <div class="mx-auto flex flex-col items-center gap-4 py-10 sm:w-2/3">
+    <div class="mx-auto flex max-w-screen-md flex-col items-center gap-4 py-10">
       <form class="contents" use:form={form}>
         <div class="flex w-full flex-col gap-4">
-          <input
-            name="url"
-            type="url"
-            class="input input-bordered"
-            placeholder="host url"
-            list="defaultEndpoints"
-          />
-
-          <datalist id="defaultEndpoints">
-            <option value="http://127.0.0.1:9090" />
-          </datalist>
-
-          <input
-            name="secret"
-            type="password"
-            class="input input-bordered"
-            placeholder="secret"
-          />
+          <div class="flex-1">
+            <label class="label">
+              <span class="label-text">{t('endpointURL')}</span>
+            </label>
+
+            <input
+              name="url"
+              type="url"
+              class="input input-bordered w-full"
+              placeholder="http://127.0.0.1:9090"
+              list="defaultEndpoints"
+            />
+
+            <datalist id="defaultEndpoints">
+              <option value="http://127.0.0.1:9090" />
+            </datalist>
+          </div>
+
+          <div class="flex-1">
+            <label class="label">
+              <span class="label-text">{t('secret')}</span>
+            </label>
+
+            <input
+              name="secret"
+              type="password"
+              class="input input-bordered w-full"
+              placeholder="secret"
+            />
+          </div>
 
           <Button type="submit" class="btn-primary join-item uppercase">
             {t('add')}