hooks are now textareas

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>

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>

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')"

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')"

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,