feat: change hooks to textareas (#2522)

* hooks are now textareas

* remove newlines in client config

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

@@ -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,

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;