From 8ea2b635c16483d95310c8d946f5be92e00a52ec Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Thu, 5 Mar 2026 14:52:55 +0100
Subject: [PATCH] feat: change hooks to textareas (#2522)

* hooks are now textareas

* remove newlines in client config
---
 src/app/components/Base/TextArea.vue | 10 ++++++++++
 src/app/components/Form/TextArea.vue | 29 ++++++++++++++++++++++++++++
 src/app/pages/admin/hooks.vue        |  8 ++++----
 src/app/pages/clients/[id].vue       |  8 ++++----
 src/server/utils/template.ts         |  8 +++++++-
 src/server/utils/wgHelper.ts         | 12 ++++++++----
 6 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/Base/TextArea.vue
 create mode 100644 src/app/components/Form/TextArea.vue

diff --git a/src/app/components/Base/TextArea.vue b/src/app/components/Base/TextArea.vue
new file mode 100644
index 00000000..8a44ac84
--- /dev/null
+++ b/src/app/components/Base/TextArea.vue
@@ -0,0 +1,10 @@
+<template>
+  <textarea
+    v-model="data"
+    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"
+  />
+</template>
+
+<script lang="ts" setup>
+const data = defineModel<string>();
+</script>
diff --git a/src/app/components/Form/TextArea.vue b/src/app/components/Form/TextArea.vue
new file mode 100644
index 00000000..b1fab6e0
--- /dev/null
+++ b/src/app/components/Form/TextArea.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex items-center">
+    <FormLabel :for="id">
+      {{ label }}
+    </FormLabel>
+    <BaseTooltip v-if="description" :text="description">
+      <IconsInfo class="size-4" />
+    </BaseTooltip>
+  </div>
+  <BaseTextArea
+    :id="id"
+    v-model.trim="data"
+    :name="id"
+    :autocomplete="autocomplete"
+    :disabled="disabled"
+  />
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  id: string;
+  label: string;
+  description?: string;
+  autocomplete?: string;
+  disabled?: boolean;
+}>();
+
+const data = defineModel<string>();
+</script>
diff --git a/src/app/pages/admin/hooks.vue b/src/app/pages/admin/hooks.vue
index b8dda4b6..c992b721 100644
--- a/src/app/pages/admin/hooks.vue
+++ b/src/app/pages/admin/hooks.vue
@@ -2,22 +2,22 @@
   <main v-if="data">
     <FormElement @submit.prevent="submit">
       <FormGroup>
-        <FormTextField
+        <FormTextArea
           id="PreUp"
           v-model="data.preUp"
           :label="$t('hooks.preUp')"
         />
-        <FormTextField
+        <FormTextArea
           id="PostUp"
           v-model="data.postUp"
           :label="$t('hooks.postUp')"
         />
-        <FormTextField
+        <FormTextArea
           id="PreDown"
           v-model="data.preDown"
           :label="$t('hooks.preDown')"
         />
-        <FormTextField
+        <FormTextArea
           id="PostDown"
           v-model="data.postDown"
           :label="$t('hooks.postDown')"
diff --git a/src/app/pages/clients/[id].vue b/src/app/pages/clients/[id].vue
index 699cbd34..5c419326 100644
--- a/src/app/pages/clients/[id].vue
+++ b/src/app/pages/clients/[id].vue
@@ -147,25 +147,25 @@
             <FormHeading :description="$t('client.hooksDescription')">
               {{ $t('client.hooks') }}
             </FormHeading>
-            <FormTextField
+            <FormTextArea
               id="PreUp"
               v-model="data.preUp"
               :description="$t('client.hooksLeaveEmpty')"
               :label="$t('hooks.preUp')"
             />
-            <FormTextField
+            <FormTextArea
               id="PostUp"
               v-model="data.postUp"
               :description="$t('client.hooksLeaveEmpty')"
               :label="$t('hooks.postUp')"
             />
-            <FormTextField
+            <FormTextArea
               id="PreDown"
               v-model="data.preDown"
               :description="$t('client.hooksLeaveEmpty')"
               :label="$t('hooks.preDown')"
             />
-            <FormTextField
+            <FormTextArea
               id="PostDown"
               v-model="data.postDown"
               :description="$t('client.hooksLeaveEmpty')"
diff --git a/src/server/utils/template.ts b/src/server/utils/template.ts
index 12f775ed..504a15dc 100644
--- a/src/server/utils/template.ts
+++ b/src/server/utils/template.ts
@@ -1,3 +1,5 @@
+// ! Auto Imports are not supported in this file
+
 import type { InterfaceType } from '#db/repositories/interface/types';
 
 /**
@@ -9,6 +11,10 @@ export function template(templ: string, values: Record<string, string>) {
   });
 }
 
+export function removeNewlines(templ: string) {
+  return templ.replace(/\r\n|\r|\n/g, ' ');
+}
+
 /**
  * Available keys:
  * - ipv4Cidr: IPv4 CIDR
@@ -18,7 +24,7 @@ export function template(templ: string, values: Record<string, string>) {
  * - uiPort: UI port number
  */
 export function iptablesTemplate(templ: string, wgInterface: InterfaceType) {
-  return template(templ, {
+  return template(removeNewlines(templ), {
     ipv4Cidr: wgInterface.ipv4Cidr,
     ipv6Cidr: wgInterface.ipv6Cidr,
     device: wgInterface.device,
diff --git a/src/server/utils/wgHelper.ts b/src/server/utils/wgHelper.ts
index 733b0e56..0ad7ceff 100644
--- a/src/server/utils/wgHelper.ts
+++ b/src/server/utils/wgHelper.ts
@@ -1,5 +1,9 @@
+// ! Auto Imports are not supported in this file
+
 import { parseCidr } from 'cidr-tools';
 import { stringifyIp } from 'ip-bigint';
+import { removeNewlines } from './template';
+
 import type { ClientType } from '#db/repositories/client/types';
 import type { InterfaceType } from '#db/repositories/interface/types';
 import type { UserConfigType } from '#db/repositories/userConfig/types';
@@ -112,10 +116,10 @@ PostDown = ${iptablesTemplate(hooks.postDown, wgInterface)}`;
       (enableIpv6 ? `, ${client.ipv6Address}/128` : '');
 
     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,
+      client.preUp ? `PreUp = ${removeNewlines(client.preUp)}` : null,
+      client.postUp ? `PostUp = ${removeNewlines(client.postUp)}` : null,
+      client.preDown ? `PreDown = ${removeNewlines(client.preDown)}` : null,
+      client.postDown ? `PostDown = ${removeNewlines(client.postDown)}` : null,
     ];
 
     const dnsServers = client.dns ?? userConfig.defaultDns;