add to setup

docker-compose.dev.yml

@@ -16,7 +16,7 @@ services:
       - NET_ADMIN
       - SYS_MODULE
     environment:
-      - INIT_ENABLED=true
+      - INIT_ENABLED=false
       - INIT_HOST=test
       - INIT_PORT=51820
       - INIT_USERNAME=testtest

src/app/components/Admin/SuggestDialog.vue

@@ -26,11 +26,12 @@
 
 <script lang="ts" setup>
 defineEmits(['change']);
-defineProps<{
+const props = defineProps<{
   triggerClass?: string;
+  url: '/api/admin/ip-info' | '/api/setup/4';
 }>();
 
-const { data } = useFetch('/api/admin/ip-info', {
+const { data } = await useFetch(props.url, {
   method: 'get',
 });
 

src/app/components/Form/HostField.vue

@@ -14,8 +14,9 @@
       :name="id"
       type="text"
       class="w-full"
+      :placeholder="placeholder"
     />
-    <AdminSuggestDialog @change="data = $event">
+    <AdminSuggestDialog :url="url" @change="data = $event">
       <BaseButton as="span">
         <div class="flex items-center gap-3">
           <IconsSparkles class="w-4" />
@@ -31,7 +32,17 @@ defineProps<{
   id: string;
   label: string;
   description?: string;
+  placeholder?: string;
+  url: '/api/admin/ip-info' | '/api/setup/4';
 }>();
 
-const data = defineModel<string>();
+const data = defineModel<string | null>({
+  set(value) {
+    const temp = value?.trim() ?? null;
+    if (temp === '') {
+      return null;
+    }
+    return temp;
+  },
+});
 </script>

src/app/pages/admin/config.vue

@@ -8,6 +8,7 @@
           v-model="data.host"
           :label="$t('general.host')"
           :description="$t('admin.config.hostDesc')"
+          url="/api/admin/ip-info"
         />
         <FormNumberField
           id="port"

src/app/pages/setup/4.vue

@@ -5,12 +5,13 @@
     </p>
     <div class="mt-8 flex flex-col gap-3">
       <div class="flex flex-col">
-        <FormNullTextField
+        <FormHostField
           id="host"
           v-model="host"
           :label="$t('general.host')"
           placeholder="vpn.example.com"
           :description="$t('setup.hostDesc')"
+          url="/api/setup/4"
         />
       </div>
       <div class="flex flex-col">

src/server/api/setup/4.get.ts

@@ -0,0 +1,4 @@
+export default defineSetupEventHandler(4, async () => {
+  const result = await cachedGetIpInformation();
+  return result;
+});