From 339118d89fb37abeebac5cb2ae01ec83debaad98 Mon Sep 17 00:00:00 2001
From: Michael Reber <michael.reber@swissmakers.ch>
Date: Tue, 10 Feb 2026 16:09:40 +0100
Subject: [PATCH] Swapped the two ssh-blocks so Select Private Key dropdown
 appears first, followed by SSH Private Key Path input.

---
 pkg/web/static/js/servers.js | 35 +++++++++++++++++++++++++++++++++++
 pkg/web/templates/index.html | 12 ++++++------
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/pkg/web/static/js/servers.js b/pkg/web/static/js/servers.js
index 6ac273c..4f755e2 100644
--- a/pkg/web/static/js/servers.js
+++ b/pkg/web/static/js/servers.js
@@ -406,6 +406,41 @@ function populateSSHKeySelect(keys, selected) {
   if (typeof updateTranslations === 'function') {
     updateTranslations();
   }
+  // Sync readonly state of the path input
+  syncSSHKeyPathReadonly();
+  // Attach change handler once
+  initSSHKeySelectHandler();
+}
+
+// Toggle the SSH key path input between readonly (key selected) and editable (manual entry).
+function syncSSHKeyPathReadonly() {
+  var select = document.getElementById('serverSSHKeySelect');
+  var input = document.getElementById('serverSSHKey');
+  if (!select || !input) return;
+  if (select.value) {
+    input.readOnly = true;
+    input.classList.add('bg-gray-100', 'text-gray-500');
+  } else {
+    input.readOnly = false;
+    input.classList.remove('bg-gray-100', 'text-gray-500');
+  }
+}
+
+// Attach a change listener on the select dropdown (once).
+var _sshKeySelectHandlerBound = false;
+function initSSHKeySelectHandler() {
+  if (_sshKeySelectHandlerBound) return;
+  var select = document.getElementById('serverSSHKeySelect');
+  if (!select) return;
+  _sshKeySelectHandlerBound = true;
+  select.addEventListener('change', function() {
+    var input = document.getElementById('serverSSHKey');
+    if (!input) return;
+    if (select.value) {
+      input.value = select.value;
+    }
+    syncSSHKeyPathReadonly();
+  });
 }
 
 function loadSSHKeys() {
diff --git a/pkg/web/templates/index.html b/pkg/web/templates/index.html
index b928941..8d3e7f7 100644
--- a/pkg/web/templates/index.html
+++ b/pkg/web/templates/index.html
@@ -1289,6 +1289,12 @@
                     <label for="serverSSHUser" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="servers.form.ssh_user">SSH User</label>
                     <input type="text" id="serverSSHUser" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" data-i18n-placeholder="servers.form.ssh_user_placeholder" placeholder="sa_fail2ban">
                   </div>
+                  <div data-server-fields="ssh">
+                    <label for="serverSSHKeySelect" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="servers.form.select_key">Select Private Key</label>
+                    <select id="serverSSHKeySelect" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                      <option value="" data-i18n="servers.form.select_key_placeholder">Manual entry</option>
+                    </select>
+                  </div>
                   <div data-server-fields="ssh">
                     <label for="serverSSHKey" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="servers.form.ssh_key">SSH Private Key Path</label>
                     <input type="text" id="serverSSHKey" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" data-i18n-placeholder="servers.form.ssh_key_placeholder" placeholder="/config/.ssh/id_rsa">
@@ -1298,12 +1304,6 @@
                       Example: <code class="px-1 py-0.5 bg-gray-100 rounded text-xs">/config/.ssh/id_rsa</code>
                     </p>
                   </div>
-                  <div data-server-fields="ssh">
-                    <label for="serverSSHKeySelect" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="servers.form.select_key">Select Private Key</label>
-                    <select id="serverSSHKeySelect" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                      <option value="" data-i18n="servers.form.select_key_placeholder">Manual entry</option>
-                    </select>
-                  </div>
                   <div data-server-fields="agent">
                     <label for="serverAgentUrl" class="block text-sm font-medium text-gray-700 mb-1" data-i18n="servers.form.agent_url">Agent URL</label>
                     <input type="url" id="serverAgentUrl" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" data-i18n-placeholder="servers.form.agent_url_placeholder" placeholder="https://host:9443">