Feat: Suggest IP or Hostname (#1739)

* get ip and hostnames

* use heroicons

* add host field

* get private info

* unstyled prototype

* styled select

* add to setup

* fix types

src/app/pages/admin/config.vue

@@ -3,11 +3,12 @@
     <FormElement @submit.prevent="submit">
       <FormGroup>
         <FormHeading>{{ $t('admin.config.connection') }}</FormHeading>
-        <FormTextField
+        <FormHostField
           id="host"
           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">