update mikrotik port with/without ssl

assets/js/app.ts

@@ -819,6 +819,40 @@ const NetworkMap = {
   }
 }
 
+// MikroTik Port Sync - automatically switches port when SSL checkbox is toggled
+const MikrotikPortSync = {
+  handleSslChange: null as ((e: Event) => void) | null,
+
+  mounted(this: any) {
+    const sslCheckbox = this.el.querySelector('[name="device[mikrotik_use_ssl]"]')
+    const portInput = this.el.querySelector('[name="device[mikrotik_port]"]') as HTMLInputElement
+
+    if (!sslCheckbox || !portInput) return
+
+    this.handleSslChange = () => {
+      const isChecked = (sslCheckbox as HTMLInputElement).checked
+      const currentPort = portInput.value.trim()
+
+      // Only update port if it's empty or set to one of the default values
+      if (currentPort === '' || currentPort === '8729' || currentPort === '8728') {
+        portInput.value = isChecked ? '8729' : '8728'
+        // Trigger a change event so LiveView validates the new value
+        portInput.dispatchEvent(new Event('input', { bubbles: true }))
+      }
+    }
+
+    sslCheckbox.addEventListener('change', this.handleSslChange)
+  },
+
+  destroyed(this: any) {
+    const sslCheckbox = this.el.querySelector('[name="device[mikrotik_use_ssl]"]')
+    if (sslCheckbox && this.handleSslChange) {
+      sslCheckbox.removeEventListener('change', this.handleSslChange)
+      this.handleSslChange = null
+    }
+  }
+}
+
 const csrfToken = document.querySelector<HTMLMetaElement>("meta[name='csrf-token']")?.getAttribute("content")
 if (!csrfToken) {
   throw new Error('CSRF token meta tag not found')
@@ -830,7 +864,7 @@ const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken, timezone: userTimezone },
-  hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, DeviceListReorder },
+  hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, DeviceListReorder, MikrotikPortSync },
 })
 
 // Show progress bar on live navigation and form submits

lib/towerops_web/live/device_live/form.html.heex

@@ -358,7 +358,11 @@
         </div>
 
         <%= if @live_action == :edit and @is_mikrotik_device and @current_scope.user.is_superuser do %>
-          <div class="mt-8 space-y-6 border-t border-gray-200 dark:border-white/10 pt-8">
+          <div
+            class="mt-8 space-y-6 border-t border-gray-200 dark:border-white/10 pt-8"
+            phx-hook="MikrotikPortSync"
+            id="mikrotik-config-section"
+          >
             <div>
               <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                 MikroTik API Configuration