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",

pnpm-lock.yaml

@@ -137,6 +137,9 @@ dependencies:
   solid-js:
     specifier: ^1.7.11
     version: 1.7.11
+  solid-toast:
+    specifier: ^0.5.0
+    version: 0.5.0(solid-js@1.7.11)
   sort-package-json:
     specifier: ^2.5.1
     version: 2.5.1
@@ -2913,13 +2916,6 @@ packages:
       }
     dev: false
 
-  /@types/node@20.5.9:
-    resolution:
-      {
-        integrity: sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==,
-      }
-    dev: false
-
   /@types/node@20.6.0:
     resolution:
       {
@@ -2940,7 +2936,7 @@ packages:
         integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==,
       }
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.6.0
     dev: false
 
   /@types/semver@7.5.1:
@@ -5580,7 +5576,7 @@ packages:
       }
     engines: { node: '>= 10.13.0' }
     dependencies:
-      '@types/node': 20.5.9
+      '@types/node': 20.6.0
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: false
@@ -7177,6 +7173,17 @@ packages:
       solid-js: 1.7.11
     dev: false
 
+  /solid-toast@0.5.0(solid-js@1.7.11):
+    resolution:
+      {
+        integrity: sha512-t770JakjyS2P9b8Qa1zMLOD51KYKWXbTAyJePVUoYex5c5FH5S/HtUBUbZAWFcqRCKmAE8KhyIiCvDZA8bOnxQ==,
+      }
+    peerDependencies:
+      solid-js: ^1.5.4
+    dependencies:
+      solid-js: 1.7.11
+    dev: false
+
   /sort-object-keys@1.1.3:
     resolution:
       {

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">
+          <div class="flex-1">
+            <label class="label">
+              <span class="label-text">{t('endpointURL')}</span>
+            </label>
+
             <input
               name="url"
               type="url"
-            class="input input-bordered"
-            placeholder="host 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"
+              class="input input-bordered w-full"
               placeholder="secret"
             />
+          </div>
 
           <Button type="submit" class="btn-primary join-item uppercase">
             {t('add')}