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 <[email protected]> Co-authored-by: Bernd Storath <[email protected]>
4 weeks ago · fcb5049dab
14 changed files with 171 additions and 25 deletions
--- a/src/app/components/Base/Dialog.vue
+++ b/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"
--- a/src/app/components/Form/ArrayField.vue
+++ b/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"
      />
--- a/src/app/pages/admin/hooks.vue
+++ b/src/app/pages/admin/hooks.vue
@ -2,10 +2,26 @@
  <main v-if="data">
    <FormElement @submit.prevent="submit">
      <FormGroup>
-        <FormTextField id="PreUp" v-model="data.preUp" label="PreUp" />
-        <FormTextField id="PostUp" v-model="data.postUp" label="PostUp" />
-        <FormTextField id="PreDown" v-model="data.preDown" label="PreDown" />
-        <FormTextField id="PostDown" v-model="data.postDown" label="PostDown" />
+        <FormTextField
+          id="PreUp"
+          v-model="data.preUp"
+          :label="$t('hooks.preUp')"
+        />
+        <FormTextField
+          id="PostUp"
+          v-model="data.postUp"
+          :label="$t('hooks.postUp')"
+        />
+        <FormTextField
+          id="PreDown"
+          v-model="data.preDown"
+          :label="$t('hooks.preDown')"
+        />
+        <FormTextField
+          id="PostDown"
+          v-model="data.postDown"
+          :label="$t('hooks.postDown')"
+        />
      </FormGroup>
      <FormGroup>
        <FormHeading>{{ $t('form.actions') }}</FormHeading>
--- a/src/app/pages/clients/[id].vue
+++ b/src/app/pages/clients/[id].vue
@ -71,6 +71,35 @@
              :label="$t('general.persistentKeepalive')"
            />
          </FormGroup>
+          <FormGroup>
+            <FormHeading :description="$t('client.hooksDescription')">
+              {{ $t('client.hooks') }}
+            </FormHeading>
+            <FormTextField
+              id="PreUp"
+              v-model="data.preUp"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.preUp')"
+            />
+            <FormTextField
+              id="PostUp"
+              v-model="data.postUp"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.postUp')"
+            />
+            <FormTextField
+              id="PreDown"
+              v-model="data.preDown"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.preDown')"
+            />
+            <FormTextField
+              id="PostDown"
+              v-model="data.postDown"
+              :description="$t('client.hooksLeaveEmpty')"
+              :label="$t('hooks.postDown')"
+            />
+          </FormGroup>
          <FormGroup>
            <FormHeading>{{ $t('form.actions') }}</FormHeading>
            <FormActionField type="submit" :label="$t('form.save')" />
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -98,7 +98,10 @@
    "allowedIpsDesc": "Which IPs will be routed through the VPN",
    "serverAllowedIpsDesc": "Which IPs the server will route to the client",
    "mtuDesc": "Sets the maximum transmission unit (packet size) for the VPN tunnel",
-    "persistentKeepaliveDesc": "Sets the interval (in seconds) for keep-alive packets. 0 disables it"
+    "persistentKeepaliveDesc": "Sets the interval (in seconds) for keep-alive packets. 0 disables it",
+    "hooks": "Hooks",
+    "hooksDescription": "Hooks only work with wg-quick",
+    "hooksLeaveEmpty": "Only for wg-quick. Otherwise, leave it empty"
  },
  "dialog": {
    "change": "Change",
@ -208,5 +211,11 @@
    "dns": "DNS",
    "allowedIps": "Allowed IPs",
    "file": "File"
+  },
+  "hooks": {
+    "preUp": "PreUp",
+    "postUp": "PostUp",
+    "preDown": "PreDown",
+    "postDown": "PostDown"
  }
 }
--- a/src/server/database/migrations/0000_short_skin.sql
+++ b/src/server/database/migrations/0000_short_skin.sql
@ -4,6 +4,10 @@ CREATE TABLE `clients_table` (
 	`name` text NOT NULL,
 	`ipv4_address` text NOT NULL,
 	`ipv6_address` text NOT NULL,
+	`pre_up` text DEFAULT '' NOT NULL,
+	`post_up` text DEFAULT '' NOT NULL,
+	`pre_down` text DEFAULT '' NOT NULL,
+	`post_down` text DEFAULT '' NOT NULL,
 	`private_key` text NOT NULL,
 	`public_key` text NOT NULL,
 	`pre_shared_key` text NOT NULL,
--- a/src/server/database/migrations/meta/0000_snapshot.json
+++ b/src/server/database/migrations/meta/0000_snapshot.json
@ -1,7 +1,7 @@
 {
  "version": "6",
  "dialect": "sqlite",
-  "id": "b1dde023-d141-4eab-9226-89a832b2ed2b",
+  "id": "2cabecf8-93d5-4d32-81b7-2e4369c1cb29",
  "prevId": "00000000-0000-0000-0000-000000000000",
  "tables": {
    "clients_table": {
@ -42,6 +42,38 @@
          "notNull": true,
          "autoincrement": false
        },
+        "pre_up": {
+          "name": "pre_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_up": {
+          "name": "post_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "pre_down": {
+          "name": "pre_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_down": {
+          "name": "post_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
        "private_key": {
          "name": "private_key",
          "type": "text",
--- a/src/server/database/migrations/meta/0001_snapshot.json
+++ b/src/server/database/migrations/meta/0001_snapshot.json
@ -1,6 +1,6 @@
 {
-  "id": "720d420c-361f-4427-a45b-db0ca613934d",
-  "prevId": "b1dde023-d141-4eab-9226-89a832b2ed2b",
+  "id": "9476c20a-509b-4cd7-b58b-a042600bafb1",
+  "prevId": "2cabecf8-93d5-4d32-81b7-2e4369c1cb29",
  "version": "6",
  "dialect": "sqlite",
  "tables": {
@ -42,6 +42,38 @@
          "notNull": true,
          "autoincrement": false
        },
+        "pre_up": {
+          "name": "pre_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_up": {
+          "name": "post_up",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "pre_down": {
+          "name": "pre_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
+        "post_down": {
+          "name": "post_down",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "''"
+        },
        "private_key": {
          "name": "private_key",
          "type": "text",
--- a/src/server/database/migrations/meta/_journal.json
+++ b/src/server/database/migrations/meta/_journal.json
@ -5,14 +5,14 @@
    {
      "idx": 0,
      "version": "6",
-      "when": 1739266828300,
+      "when": 1741331552405,
      "tag": "0000_short_skin",
      "breakpoints": true
    },
    {
      "idx": 1,
      "version": "6",
-      "when": 1739266837347,
+      "when": 1741331579259,
      "tag": "0001_classy_the_stranger",
      "breakpoints": true
    }
--- a/src/server/database/repositories/client/schema.ts
+++ b/src/server/database/repositories/client/schema.ts
@ -14,6 +14,10 @@ export const client = sqliteTable('clients_table', {
  name: text().notNull(),
  ipv4Address: text('ipv4_address').notNull().unique(),
  ipv6Address: text('ipv6_address').notNull().unique(),
+  preUp: text('pre_up').default('').notNull(),
+  postUp: text('post_up').default('').notNull(),
+  preDown: text('pre_down').default('').notNull(),
+  postDown: text('post_down').default('').notNull(),
  privateKey: text('private_key').notNull(),
  publicKey: text('public_key').notNull(),
  preSharedKey: text('pre_shared_key').notNull(),
--- a/src/server/database/repositories/client/types.ts
+++ b/src/server/database/repositories/client/types.ts
@ -57,6 +57,10 @@ export const ClientUpdateSchema = schemaForType<UpdateClientType>()(
    expiresAt: expiresAt,
    ipv4Address: address4,
    ipv6Address: address6,
+    preUp: HookSchema,
+    postUp: HookSchema,
+    preDown: HookSchema,
+    postDown: HookSchema,
    allowedIps: AllowedIpsSchema,
    serverAllowedIps: serverAllowedIps,
    mtu: MtuSchema,
--- a/src/server/database/repositories/hooks/types.ts
+++ b/src/server/database/repositories/hooks/types.ts
@ -6,13 +6,11 @@ export type HooksType = InferSelectModel<typeof hooks>;

 export type HooksUpdateType = Omit<HooksType, 'id' | 'createdAt' | 'updatedAt'>;

-const hook = z.string({ message: t('zod.hook') }).pipe(safeStringRefine);
-
 export const HooksUpdateSchema = schemaForType<HooksUpdateType>()(
  z.object({
-    preUp: hook,
-    postUp: hook,
-    preDown: hook,
-    postDown: hook,
+    preUp: HookSchema,
+    postUp: HookSchema,
+    preDown: HookSchema,
+    postDown: HookSchema,
  })
 );
--- a/src/server/utils/types.ts
+++ b/src/server/utils/types.ts
@ -52,6 +52,10 @@ export const FileSchema = z.object({
  file: z.string({ message: t('zod.file') }),
 });

+export const HookSchema = z
+  .string({ message: t('zod.hook') })
+  .pipe(safeStringRefine);
+
 export const schemaForType =
  <T>() =>
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/server/utils/wgHelper.ts
+++ b/src/server/utils/wgHelper.ts
@ -49,12 +49,19 @@ PostDown = ${iptablesTemplate(hooks.postDown, wgInterface)}`;
    const cidr4Block = parseCidr(wgInterface.ipv4Cidr).prefix;
    const cidr6Block = parseCidr(wgInterface.ipv6Cidr).prefix;

+    const hookLines = [
+      client.preUp ? `PreUp = ${client.preUp}` : null,
+      client.postUp ? `PostUp = ${client.postUp}` : null,
+      client.preDown ? `PreDown = ${client.preDown}` : null,
+      client.postDown ? `PostDown = ${client.postDown}` : null,
+    ].filter((v) => v !== null);
+
    return `[Interface]
 PrivateKey = ${client.privateKey}
 Address = ${client.ipv4Address}/${cidr4Block}, ${client.ipv6Address}/${cidr6Block}
 DNS = ${client.dns.join(', ')}
 MTU = ${client.mtu}
-
+${hookLines.length ? `${hookLines.join('\n')}\n` : ''}
 [Peer]
 PublicKey = ${wgInterface.publicKey}
 PresharedKey = ${client.preSharedKey}