Add PreUp, PostUp, PreDown, PostDown for client (#1714)

* Fix create client popup background is not white

* Fix no Add button when client Allowed Ips or Server Allowed Ips is empty

* Add preUp preDown postUp postDown for client

* Add description of hooks for client config

* Move hooks's label text into 'hooks' in en.json

---------

Co-authored-by: yanghuanglin <yanghuanglin@qq.com>
Co-authored-by: Bernd Storath <999999bst@gmail.com>

src/app/components/Base/Dialog.vue

@@ -6,7 +6,7 @@
         class="fixed inset-0 z-30 bg-gray-500 opacity-75 dark:bg-black dark:opacity-50"
       />
       <DialogContent
-        class="fixed left-1/2 top-1/2 z-[100] max-h-[85vh] w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6 shadow-2xl focus:outline-none dark:bg-neutral-700"
+        class="fixed left-1/2 top-1/2 z-[100] max-h-[85vh] w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-6 shadow-2xl focus:outline-none dark:bg-neutral-700"
       >
         <DialogTitle
           class="m-0 text-lg font-semibold text-gray-900 dark:text-neutral-200"

src/app/components/Form/ArrayField.vue

@@ -1,10 +1,10 @@
 <template>
-  <div v-if="data?.length === 0">
-    {{ emptyText || $t('form.noItems') }}
-  </div>
-  <div v-else class="flex flex-col gap-2">
-    <div v-for="(item, i) in data" :key="i">
-      <div class="flex flex-row gap-1">
+  <div class="flex flex-col gap-2">
+    <div v-if="data?.length === 0">
+      {{ emptyText || $t('form.noItems') }}
+    </div>
+    <div v-for="(item, i) in data" v-else :key="i">
+      <div class="mt-1 flex flex-row gap-1">
         <input
           :value="item"
           :name="name"
@@ -12,13 +12,20 @@
           class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
           @input="update($event, i)"
         />
-        <BaseButton as="input" type="button" value="-" @click="del(i)" />
+        <BaseButton
+          as="input"
+          type="button"
+          class="rounded-lg"
+          value="-"
+          @click="del(i)"
+        />
       </div>
     </div>
     <div class="mt-2">
       <BaseButton
         as="input"
         type="button"
+        class="rounded-lg"
         :value="$t('form.add')"
         @click="add"
       />