feat: add a dns query form

src/pages/Config.tsx

@@ -1,9 +1,9 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
-import { For, onMount } from 'solid-js'
+import { For, Show, createSignal, onMount } from 'solid-js'
 import { z } from 'zod'
 import { useRequest } from '~/signals'
-import type { Config as IConfig } from '~/types'
+import type { DNSQuery, Config as IConfig } from '~/types'
 
 const schema = z.object({
   port: z.number(),
@@ -15,6 +15,22 @@ const schema = z.object({
 
 export default () => {
   const request = useRequest()
+
+  const [DNSQueryName, setDNSQueryName] = createSignal('')
+  const [DNSQueryResult, setDNSQueryResult] = createSignal<string[]>([])
+
+  const onDNSQuery = () =>
+    request
+      .get('dns/query', {
+        searchParams: {
+          name: DNSQueryName(),
+        },
+      })
+      .json<DNSQuery>()
+      .then(({ Answer }) => {
+        setDNSQueryResult(Answer.map(({ data }) => data))
+      })
+
   const portsList = [
     {
       label: 'Http Port',
@@ -41,6 +57,7 @@ export default () => {
   const { form, setInitialValues, reset } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
   })
+
   onMount(async () => {
     const configs = await request.get('configs').json<IConfig>()
 
@@ -50,7 +67,34 @@ export default () => {
 
   return (
     <div>
-      <form class="form" use:form={form}>
+      <form
+        class="flex items-center gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          onDNSQuery()
+        }}
+      >
+        <input
+          class="input input-bordered flex-1"
+          value={DNSQueryName()}
+          onSubmit={onDNSQuery}
+          onInput={(e) => setDNSQueryName(e.target.value)}
+        />
+
+        <button type="submit" class="btn btn-primary">
+          DNS Query
+        </button>
+      </form>
+
+      <Show when={DNSQueryResult().length > 0}>
+        <div class="flex flex-col p-4">
+          <For each={DNSQueryResult()}>
+            {(item) => <div class="py-2">{item}</div>}
+          </For>
+        </div>
+      </Show>
+
+      <form class="contents" use:form={form}>
         <For each={portsList}>
           {(item) => (
             <div class="form-control w-64 max-w-xs">

src/types.d.ts

@@ -139,3 +139,23 @@ export type Config = {
   sniffing: boolean
   'global-client-fingerprint': boolean
 }
+
+export type DNSQuery = {
+  AD: boolean
+  CD: boolean
+  RA: boolean
+  RD: boolean
+  TC: boolean
+  status: number
+  Question: {
+    Name: string
+    Qtype: number
+    Qclass: number
+  }[]
+  Answer: {
+    TTL: number
+    data: string
+    name: string
+    type: number
+  }[]
+}