From 2f643eb653bf963f09ff8ab66031963a8c241f45 Mon Sep 17 00:00:00 2001
From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com>
Date: Mon, 29 Jun 2026 21:27:15 +0200
Subject: [PATCH] fix(smarthome): CSP-safe modal wiring + client i18n bridge
 keys
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSP (script-src-attr 'none') blocked inline onclick → connect/close/cancel
  buttons dead. Replace with id=sh-connect-open + [data-sh-close] wired via
  addEventListener (wireModal), matching midea's CSP-safe pattern.
- Add 13 smarthome.* client keys to GC.t in all 3 layouts (were only in
  en/de.json server-side → JS-rendered labels showed raw keys).
- Route dropdown populates once modal opens (fillRoutes/endpoint already correct).
---
 public/js/smarthome.js                              | 11 ++++++++++-
 templates/aurora/layout.njk                         | 13 +++++++++++++
 templates/aurora/pages/smarthome.njk                |  2 +-
 .../aurora/partials/modals/smarthome-connect.njk    |  4 ++--
 templates/default/layout.njk                        | 13 +++++++++++++
 templates/default/pages/smarthome.njk               |  2 +-
 .../default/partials/modals/smarthome-connect.njk   |  4 ++--
 templates/pro/layout.njk                            | 13 +++++++++++++
 templates/pro/pages/smarthome.njk                   |  2 +-
 templates/pro/partials/modals/smarthome-connect.njk |  4 ++--
 10 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/public/js/smarthome.js b/public/js/smarthome.js
index 351e1ef9..964340cf 100644
--- a/public/js/smarthome.js
+++ b/public/js/smarthome.js
@@ -149,6 +149,15 @@
     } catch (_) { /* leer lassen */ }
   }
 
+  // Modal open/close wired in JS (CSP blocks inline onclick: script-src-attr 'none').
+  function wireModal() {
+    const modal = $('#sh-connect-modal');
+    const open = $('#sh-connect-open');
+    if (open && modal) open.addEventListener('click', () => { modal.style.display = 'flex'; });
+    document.querySelectorAll('[data-sh-close]').forEach((el) =>
+      el.addEventListener('click', () => { if (modal) modal.style.display = 'none'; }));
+  }
+
   function wireConnect() {
     const btn = $('#sh-c-submit'); if (!btn) return;
     btn.addEventListener('click', async () => {
@@ -191,6 +200,6 @@
     });
   }
 
-  document.addEventListener('DOMContentLoaded', () => { fillRoutes(); wireConnect(); wireTest(); loadGateways(); });
+  document.addEventListener('DOMContentLoaded', () => { wireModal(); fillRoutes(); wireConnect(); wireTest(); loadGateways(); });
   window.SmartHome = { loadGateways, loadResources, api };
 })();
diff --git a/templates/aurora/layout.njk b/templates/aurora/layout.njk
index c5a842f9..30dce19e 100644
--- a/templates/aurora/layout.njk
+++ b/templates/aurora/layout.njk
@@ -54,6 +54,19 @@
       midea_integration: {{ ('true' if license.features.midea_integration else 'false') | safe }}
     },
     t: {
+      'smarthome.power': {{ t('smarthome.power') | dump | safe }},
+      'smarthome.brightness': {{ t('smarthome.brightness') | dump | safe }},
+      'smarthome.color': {{ t('smarthome.color') | dump | safe }},
+      'smarthome.warmth': {{ t('smarthome.warmth') | dump | safe }},
+      'smarthome.activate': {{ t('smarthome.activate') | dump | safe }},
+      'smarthome.load_error': {{ t('smarthome.load_error') | dump | safe }},
+      'smarthome.empty': {{ t('smarthome.empty') | dump | safe }},
+      'smarthome.section.lights': {{ t('smarthome.section.lights') | dump | safe }},
+      'smarthome.section.groups': {{ t('smarthome.section.groups') | dump | safe }},
+      'smarthome.section.sensors': {{ t('smarthome.section.sensors') | dump | safe }},
+      'smarthome.kpi.groups': {{ t('smarthome.kpi.groups') | dump | safe }},
+      'smarthome.test_ok': {{ t('smarthome.test_ok') | dump | safe }},
+      'smarthome.test_fail': {{ t('smarthome.test_fail') | dump | safe }},
       'peers.no_peers': {{ t('peers.no_peers') | dump | safe }},
       'peers.online': {{ t('peers.online') | dump | safe }},
       'peers.offline': {{ t('peers.offline') | dump | safe }},
diff --git a/templates/aurora/pages/smarthome.njk b/templates/aurora/pages/smarthome.njk
index 355e8691..1dea4649 100644
--- a/templates/aurora/pages/smarthome.njk
+++ b/templates/aurora/pages/smarthome.njk
@@ -13,7 +13,7 @@
     <select id="sh-gateway-select" class="form-select" style="min-width:180px"></select>
     <button class="btn btn-ghost" id="sh-test">{{ t('smarthome.test') }}</button>
     <button class="btn btn-ghost" id="sh-sync">{{ t('smarthome.sync') }}</button>
-    <button class="btn btn-primary" onclick="document.getElementById('sh-connect-modal').style.display='flex'">{{ t('smarthome.connect') }}</button>
+    <button class="btn btn-primary" id="sh-connect-open">{{ t('smarthome.connect') }}</button>
   </div>
 </div>
 <div id="sh-test-result" style="display:none"></div>
diff --git a/templates/aurora/partials/modals/smarthome-connect.njk b/templates/aurora/partials/modals/smarthome-connect.njk
index ce496897..a5fb5cdd 100644
--- a/templates/aurora/partials/modals/smarthome-connect.njk
+++ b/templates/aurora/partials/modals/smarthome-connect.njk
@@ -2,7 +2,7 @@
   <div class="modal">
     <div class="modal-head">
       <div class="modal-title">{{ t('smarthome.connect.title') }}</div>
-      <button class="modal-close" onclick="document.getElementById('sh-connect-modal').style.display='none'">
+      <button class="modal-close" data-sh-close>
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="modal-foot">
-      <button class="btn btn-ghost" onclick="document.getElementById('sh-connect-modal').style.display='none'">{{ t('common.cancel') }}</button>
+      <button class="btn btn-ghost" data-sh-close>{{ t('common.cancel') }}</button>
       <button class="btn btn-primary" id="sh-c-submit">{{ t('smarthome.connect.acquire') }}</button>
     </div>
   </div>
diff --git a/templates/default/layout.njk b/templates/default/layout.njk
index c76eb99d..95b4b21f 100644
--- a/templates/default/layout.njk
+++ b/templates/default/layout.njk
@@ -53,6 +53,19 @@
       midea_integration: {{ ('true' if license.features.midea_integration else 'false') | safe }}
     },
     t: {
+      'smarthome.power': {{ t('smarthome.power') | dump | safe }},
+      'smarthome.brightness': {{ t('smarthome.brightness') | dump | safe }},
+      'smarthome.color': {{ t('smarthome.color') | dump | safe }},
+      'smarthome.warmth': {{ t('smarthome.warmth') | dump | safe }},
+      'smarthome.activate': {{ t('smarthome.activate') | dump | safe }},
+      'smarthome.load_error': {{ t('smarthome.load_error') | dump | safe }},
+      'smarthome.empty': {{ t('smarthome.empty') | dump | safe }},
+      'smarthome.section.lights': {{ t('smarthome.section.lights') | dump | safe }},
+      'smarthome.section.groups': {{ t('smarthome.section.groups') | dump | safe }},
+      'smarthome.section.sensors': {{ t('smarthome.section.sensors') | dump | safe }},
+      'smarthome.kpi.groups': {{ t('smarthome.kpi.groups') | dump | safe }},
+      'smarthome.test_ok': {{ t('smarthome.test_ok') | dump | safe }},
+      'smarthome.test_fail': {{ t('smarthome.test_fail') | dump | safe }},
       'peers.no_peers': {{ t('peers.no_peers') | dump | safe }},
       'peers.online': {{ t('peers.online') | dump | safe }},
       'peers.offline': {{ t('peers.offline') | dump | safe }},
diff --git a/templates/default/pages/smarthome.njk b/templates/default/pages/smarthome.njk
index b53c39a2..31358655 100644
--- a/templates/default/pages/smarthome.njk
+++ b/templates/default/pages/smarthome.njk
@@ -13,7 +13,7 @@
     <select id="sh-gateway-select" class="form-select" style="min-width:180px"></select>
     <button class="btn btn-ghost" id="sh-test">{{ t('smarthome.test') }}</button>
     <button class="btn btn-ghost" id="sh-sync">{{ t('smarthome.sync') }}</button>
-    <button class="btn btn-primary" onclick="document.getElementById('sh-connect-modal').style.display='flex'">{{ t('smarthome.connect') }}</button>
+    <button class="btn btn-primary" id="sh-connect-open">{{ t('smarthome.connect') }}</button>
   </div>
 </div>
 <div id="sh-test-result" style="display:none"></div>
diff --git a/templates/default/partials/modals/smarthome-connect.njk b/templates/default/partials/modals/smarthome-connect.njk
index ce496897..a5fb5cdd 100644
--- a/templates/default/partials/modals/smarthome-connect.njk
+++ b/templates/default/partials/modals/smarthome-connect.njk
@@ -2,7 +2,7 @@
   <div class="modal">
     <div class="modal-head">
       <div class="modal-title">{{ t('smarthome.connect.title') }}</div>
-      <button class="modal-close" onclick="document.getElementById('sh-connect-modal').style.display='none'">
+      <button class="modal-close" data-sh-close>
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="modal-foot">
-      <button class="btn btn-ghost" onclick="document.getElementById('sh-connect-modal').style.display='none'">{{ t('common.cancel') }}</button>
+      <button class="btn btn-ghost" data-sh-close>{{ t('common.cancel') }}</button>
       <button class="btn btn-primary" id="sh-c-submit">{{ t('smarthome.connect.acquire') }}</button>
     </div>
   </div>
diff --git a/templates/pro/layout.njk b/templates/pro/layout.njk
index 5855a994..7a1a2482 100644
--- a/templates/pro/layout.njk
+++ b/templates/pro/layout.njk
@@ -55,6 +55,19 @@
       midea_integration: {{ ('true' if license.features.midea_integration else 'false') | safe }}
     },
     t: {
+      'smarthome.power': {{ t('smarthome.power') | dump | safe }},
+      'smarthome.brightness': {{ t('smarthome.brightness') | dump | safe }},
+      'smarthome.color': {{ t('smarthome.color') | dump | safe }},
+      'smarthome.warmth': {{ t('smarthome.warmth') | dump | safe }},
+      'smarthome.activate': {{ t('smarthome.activate') | dump | safe }},
+      'smarthome.load_error': {{ t('smarthome.load_error') | dump | safe }},
+      'smarthome.empty': {{ t('smarthome.empty') | dump | safe }},
+      'smarthome.section.lights': {{ t('smarthome.section.lights') | dump | safe }},
+      'smarthome.section.groups': {{ t('smarthome.section.groups') | dump | safe }},
+      'smarthome.section.sensors': {{ t('smarthome.section.sensors') | dump | safe }},
+      'smarthome.kpi.groups': {{ t('smarthome.kpi.groups') | dump | safe }},
+      'smarthome.test_ok': {{ t('smarthome.test_ok') | dump | safe }},
+      'smarthome.test_fail': {{ t('smarthome.test_fail') | dump | safe }},
       'peers.no_peers': {{ t('peers.no_peers') | dump | safe }},
       'peers.online': {{ t('peers.online') | dump | safe }},
       'peers.offline': {{ t('peers.offline') | dump | safe }},
diff --git a/templates/pro/pages/smarthome.njk b/templates/pro/pages/smarthome.njk
index b53c39a2..31358655 100644
--- a/templates/pro/pages/smarthome.njk
+++ b/templates/pro/pages/smarthome.njk
@@ -13,7 +13,7 @@
     <select id="sh-gateway-select" class="form-select" style="min-width:180px"></select>
     <button class="btn btn-ghost" id="sh-test">{{ t('smarthome.test') }}</button>
     <button class="btn btn-ghost" id="sh-sync">{{ t('smarthome.sync') }}</button>
-    <button class="btn btn-primary" onclick="document.getElementById('sh-connect-modal').style.display='flex'">{{ t('smarthome.connect') }}</button>
+    <button class="btn btn-primary" id="sh-connect-open">{{ t('smarthome.connect') }}</button>
   </div>
 </div>
 <div id="sh-test-result" style="display:none"></div>
diff --git a/templates/pro/partials/modals/smarthome-connect.njk b/templates/pro/partials/modals/smarthome-connect.njk
index ce496897..a5fb5cdd 100644
--- a/templates/pro/partials/modals/smarthome-connect.njk
+++ b/templates/pro/partials/modals/smarthome-connect.njk
@@ -2,7 +2,7 @@
   <div class="modal">
     <div class="modal-head">
       <div class="modal-title">{{ t('smarthome.connect.title') }}</div>
-      <button class="modal-close" onclick="document.getElementById('sh-connect-modal').style.display='none'">
+      <button class="modal-close" data-sh-close>
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="modal-foot">
-      <button class="btn btn-ghost" onclick="document.getElementById('sh-connect-modal').style.display='none'">{{ t('common.cancel') }}</button>
+      <button class="btn btn-ghost" data-sh-close>{{ t('common.cancel') }}</button>
       <button class="btn btn-primary" id="sh-c-submit">{{ t('smarthome.connect.acquire') }}</button>
     </div>
   </div>