From 51fdea6b4d63b2095ed9cddc78033d90b4e9b9b0 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Thu, 5 Mar 2026 14:10:36 +0100
Subject: [PATCH] hooks are now textareas

---
 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         |  6 +++++-
 5 files changed, 52 insertions(+), 9 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..59b3cb10 100644
--- a/src/server/utils/template.ts
+++ b/src/server/utils/template.ts
@@ -9,6 +9,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 +22,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,