From f87a360d5c558070b2ccfac0e8d17c69570fd6c7 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 15:49:29 +1300
Subject: [PATCH] move optional tcp server interface and udp interface settings
 to own section

---
 .../interfaces/AddInterfacePage.vue           | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 244d2fa..f9e36b3 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -123,32 +123,6 @@
                         <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                     </div>
 
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
-                        <ExpandingSectionHeader @click="toggleAllSettings" :is-expanded="showAllSettings">
-                            Additional Server Interface settings
-                        </ExpandingSectionHeader>
-                        <div v-show="showAllSettings" class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
-                            <div class="mb-2">
-                                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the interface to a specific network interface</span>
-                                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            </div>
-                            <div class="flex items-start">
-                                <div class="flex flex-col">
-                                    <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
-                                    <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Binds the TCP Server Interface to an IPv6 address</span>
-                                </div>
-                                <input
-                                    id="prefer-ipv6"
-                                    type="checkbox"
-                                    value="1"
-                                    v-model="newInterfacePreferIPV6"
-                                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
                     <!-- UDPInterface -->
                     <!-- interface forward ip -->
                     <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
@@ -461,7 +435,7 @@
 
                     <!-- Pipe Interface -->
                     <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
-                        <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</span>
+                        <div class="text-sm text-gray-500 dark:text-zinc-300 mb-3">ⓘ Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</div>
                         <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
                         <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
                         <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay (seconds)</label>
@@ -560,7 +534,7 @@
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
                                 <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable KISS Framing</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Enable this when connecting to software that uses KISS framing such as packet radio sound modems. For KISS connections through serial hardware select "KISS Interface" as the interface type.</span>
                             </div>
                             <input id="kiss-framing" type="checkbox" v-model="newInterfaceKISSFramingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
                         </div>
@@ -568,7 +542,7 @@
                         <div class="flex">
                             <div class="flex flex-col mr-auto">
                                 <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Enable I2P tunneling</label>
-                                <span class="text-sm text-gray-500 dark:text-zinc-300">ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Enables tunnelling through an I2P Connection using the TCPClientInterface</span>
                             </div>
                             <input id="i2p-tunneled" type="checkbox" v-model="newInterfaceI2PTunnelingEnabled" class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"/>
                         </div>
@@ -577,6 +551,36 @@
                 </template>
             </ExpandingSection>
 
+            <!-- optional TCPClientInterface and UDPInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'">
+                <template v-slot:title>Optional {{ newInterfaceType }} settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                            <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
+                            <input type="text" placeholder="e.g: eth0" v-model="newInterfaceNetworkDevice" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                        </div>
+
+                        <div class="flex items-start">
+                            <div class="flex flex-col mr-auto">
+                                <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">Prefer IPv6</label>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the TCP Server Interface to an IPv6 address</span>
+                            </div>
+                            <input
+                                id="prefer-ipv6"
+                                type="checkbox"
+                                value="1"
+                                v-model="newInterfacePreferIPV6"
+                                class="my-auto mx-2 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                            />
+                        </div>
+
+                    </div>
+                </template>
+            </ExpandingSection>
+
             <!-- optional RNodeInterface settings -->
             <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
                 <template v-slot:title>Optional RNodeInterface Settings</template>