From b1dac76f1e7faa31684eceed717454c630752e39 Mon Sep 17 00:00:00 2001
From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com>
Date: Tue, 23 Jun 2026 21:25:42 +0200
Subject: [PATCH] =?UTF-8?q?fix(theme):=20Aurora=20RDP=20'Add=20route'=20mo?=
 =?UTF-8?q?dal=20=E2=80=94=20load=20form-logic=20scripts,=20style=20select?=
 =?UTF-8?q?ors,=20fix=20dup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Add/Edit RDP modal was broken in Aurora: protocol switching didn't change
fields, the protocol/auth selectors were unstyled, and the modal felt slow.

Root cause: aurora/pages/rdp.njk only loaded /js/rdp.js but NOT
/js/rdp-form-logic.js (defines window.GCRdpForm) or /js/rdp-cred-omission.js.
rdp.js calls GCRdpForm.* for protocol→fields visibility, step navigation,
default ports and validation, so every interaction threw and the form was
non-functional. Added both scripts (matches pro).

Also:
- Added CSS for the .rdp-proto-seg/.rdp-proto-opt and .rdp-auth-seg/.rdp-auth-opt
  segmented controls (none existed in any theme); active option now highlights.
- Removed a duplicate #rdp-ssh-auth-seg block (invalid duplicate id) left over in
  the auth step; kept the #rdp-ssh-auth-mode-wrapped one rdp.js drives.

Aurora-only. Verified headless: GCRdpForm present, modal opens ~0.4s, protocol
switch changes port (rdp 3389 / ssh 22 / vnc 5900) + active state, step nav works,
Save + review appear only on the final (review) step, no page errors.
aurora_theme.test 144/0.
---
 public/css/aurora.css          |  6 ++++++
 templates/aurora/pages/rdp.njk | 15 +++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/public/css/aurora.css b/public/css/aurora.css
index 05be9e9c..a0165b9a 100644
--- a/public/css/aurora.css
+++ b/public/css/aurora.css
@@ -301,6 +301,12 @@ a{color:inherit}
 /* "Collapse all" toolbar toggle */
 #aurora-collapse-all{color:var(--muted)}
 #aurora-collapse-all:hover{color:var(--text)}
+/* RDP modal segmented selectors (protocol + SSH auth-mode) — styled like the
+   .toggle-group segmented control; JS toggles .active on the chosen option. */
+.rdp-proto-seg, .rdp-auth-seg{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px; flex-wrap:wrap}
+.rdp-proto-opt, .rdp-auth-opt{border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:7px; cursor:pointer; transition:.15s}
+.rdp-proto-opt:hover, .rdp-auth-opt:hover{color:var(--text)}
+.rdp-proto-opt.active, .rdp-auth-opt.active{background:var(--surface); color:var(--text); box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}
 /* Batch-select checkbox column (shown only in batch mode) */
 .data-table .td-batch{width:34px; text-align:center; padding-right:0}
 .data-table .batch-checkbox{width:16px; height:16px; accent-color:var(--teal); cursor:pointer; vertical-align:middle}
diff --git a/templates/aurora/pages/rdp.njk b/templates/aurora/pages/rdp.njk
index eefa4203..ef66c56e 100644
--- a/templates/aurora/pages/rdp.njk
+++ b/templates/aurora/pages/rdp.njk
@@ -243,9 +243,9 @@
             {# SSH auth-mode selector (password vs private key) — rdp.js shows it for SSH #}
             <div id="rdp-ssh-auth-mode" style="display:none;margin-bottom:10px">
               <label style="font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:3px">{{ t('rdp.auth.mode') }}</label>
-              <div id="rdp-ssh-auth-seg" class="rdp-auth-seg toggle-group" role="radiogroup" aria-label="{{ t('rdp.auth.mode') }}">
-                <button type="button" class="rdp-auth-opt toggle-btn active on" data-auth-mode="password">{{ t('rdp.auth.mode_password') }}</button>
-                <button type="button" class="rdp-auth-opt toggle-btn" data-auth-mode="key">{{ t('rdp.auth.mode_key') }}</button>
+              <div id="rdp-ssh-auth-seg" class="rdp-auth-seg" role="radiogroup" aria-label="{{ t('rdp.auth.mode') }}">
+                <button type="button" class="rdp-auth-opt active" data-auth-mode="password">{{ t('rdp.auth.mode_password') }}</button>
+                <button type="button" class="rdp-auth-opt" data-auth-mode="key">{{ t('rdp.auth.mode_key') }}</button>
               </div>
             </div>
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
@@ -288,13 +288,6 @@
             <span class="rdp-cred-set-label"></span>
             <button type="button" class="btn btn-sm btn-ghost rdp-cred-remove" data-cred="ssh_passphrase" style="margin-left:6px"></button>
           </div>
-          {# SSH auth mode selector (SSH protocol only) #}
-          <div id="rdp-ssh-auth-seg" style="display:none;margin-top:10px">
-            <div style="display:flex;gap:6px">
-              <button type="button" class="btn btn-sm btn-ghost active" data-auth-mode="password">{{ t('rdp.auth.password') }}</button>
-              <button type="button" class="btn btn-sm btn-ghost" data-auth-mode="key">{{ t('rdp.auth.key') }}</button>
-            </div>
-          </div>
           <div id="rdp-ascii-hint" style="display:none;margin-top:8px;font-size:11px;color:var(--faint);line-height:1.4">{{ t('rdp.browser.ascii_hint') }}</div>
           <div style="margin-top:8px;font-size:11px;color:var(--faint);display:flex;align-items:center;gap:6px">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
@@ -551,5 +544,7 @@
 {% endblock %}
 
 {% block scripts %}
+<script src="/js/rdp-form-logic.js?v={{ appVersion }}"></script>
+<script src="/js/rdp-cred-omission.js?v={{ appVersion }}"></script>
 <script src="/js/rdp.js?v={{ appVersion }}"></script>
 {% endblock %}