added network specs request

public/js/pages/Radius/Radius.css

@@ -246,3 +246,170 @@
 @media (max-width: 700px) { .tt-scope .router-actions-grid { grid-template-columns: 1fr; } }
 .tt-scope .action-btn { display: flex; align-items: center; padding: 8px 16px; }
 .tt-scope .action-btn i { width: 20px; flex-shrink: 0; text-align: center; margin-right: 10px; }
+
+/* ===== Network Config Modal ===== */
+.tt-scope .network-config-modal { }
+
+.tt-scope .cache-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    background: rgba(255,255,255,0.7);
+    border: 1px solid #b8d9f0;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #0b3a57;
+    margin-left: auto;
+}
+
+.tt-scope .cache-badge i { font-size: 9px; }
+
+.tt-scope .config-action-btn {
+    background: rgba(255,255,255,0.6);
+    border: 1px solid #b8d9f0;
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+    color: var(--accent);
+    font-size: 12px;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tt-scope .config-action-btn:hover {
+    background: rgba(255,255,255,0.9);
+    border-color: var(--accent);
+}
+
+.tt-scope .config-action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.tt-scope .config-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+}
+
+@media (max-width: 700px) {
+    .tt-scope .config-grid { grid-template-columns: 1fr; }
+}
+
+.tt-scope .config-card {
+    background: linear-gradient(145deg, #ffffff 0%, #f8fbfd 100%);
+    border: 1px solid #e3eef5;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.tt-scope .config-card:hover {
+    box-shadow: 0 4px 16px rgba(0, 83, 132, 0.08);
+    border-color: #cce4f5;
+}
+
+.tt-scope .config-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: linear-gradient(135deg, #e8f4fb 0%, #dceef8 100%);
+    border-bottom: 1px solid #d6e8f5;
+    font-size: 13px;
+    font-weight: 700;
+    color: #0b3a57;
+}
+
+.tt-scope .config-card-header > i:first-child {
+    font-size: 14px;
+    color: var(--accent);
+}
+
+.tt-scope .config-card-header .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.tt-scope .config-card-header .status-dot.active {
+    background: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+.tt-scope .config-card-header .status-dot.inactive {
+    background: #ef4444;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+.tt-scope .config-card-body {
+    padding: 10px 14px;
+}
+
+.tt-scope .config-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 0;
+    gap: 12px;
+}
+
+.tt-scope .config-row:not(:last-child) {
+    border-bottom: 1px dashed #e8eef3;
+}
+
+.tt-scope .config-row.highlight {
+    background: #f8fbfd;
+    margin: 0 -14px;
+    padding: 8px 14px;
+    border-bottom: 1px solid #e8eef3;
+}
+
+.tt-scope .config-row.highlight:first-child {
+    margin-top: -10px;
+}
+
+.tt-scope .config-label {
+    font-size: 12px;
+    color: #667085;
+    font-weight: 500;
+    flex-shrink: 0;
+}
+
+.tt-scope .config-value {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: #1a2b3c;
+    font-weight: 600;
+    text-align: right;
+    word-break: break-all;
+}
+
+.tt-scope .config-value.with-copy {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: flex-end;
+}
+
+.tt-scope .config-value.small {
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.tt-scope .config-value code {
+    background: none;
+    padding: 0;
+    font-family: inherit;
+}
+
+.tt-scope .config-value code.password {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: 0.5px;
+}

public/js/pages/Radius/RadiusRouterManager.js

@@ -78,6 +78,10 @@ const RadiusRouterManager = {
                     <i class="fa-duotone fa-list-timeline"></i>
                     <span>Ereignisprotokoll</span>
                   </button>
+                  <button class="ghost-btn action-btn" @click="openWlanKeyModal" :disabled="routerLoading || routerActionLoading || wlanKeyLoading">
+                    <i class="fa-duotone fa-sliders"></i>
+                    <span>Netzwerk-Konfig</span>
+                  </button>
                 </div>
               </div>
             </div>
@@ -178,6 +182,13 @@ const RadiusRouterManager = {
         <tt-dialog :show="showNetworkStructureModal" title="Netzwerkstruktur" @close="showNetworkStructureModal = false" size="wide">
           <tt-loading-indicator v-if="networkStructureLoading" text="Lade Struktur..." style="min-height: 300px;" />
           <div v-else-if="rootDevice">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+              <span v-if="networkStructureCached" class="small" style="color: var(--tt-text-tertiary);">(Cache)</span>
+              <span v-else></span>
+              <button class="ghost-btn" @click="openNetworkStructure(true)" :disabled="networkStructureLoading" title="Neu laden">
+                <i class="fa-duotone fa-arrows-rotate" :class="{ 'fa-spin': networkStructureLoading }"></i>
+              </button>
+            </div>
             <div class="network-tree-container">
               <!-- Uses the recursive component -->
               <radius-network-node :device="rootDevice" />
@@ -214,6 +225,119 @@ const RadiusRouterManager = {
           <div v-else class="table-placeholder" style="min-height: 300px;">Keine Ereignisse verfügbar.</div>
         </tt-dialog>
 
+        <!-- WLAN & Network Config Modal -->
+        <tt-dialog :show="showWlanKeyModal" title="Netzwerk-Konfiguration" @close="showWlanKeyModal = false" size="wide">
+          <tt-loading-indicator v-if="wlanKeyLoading" text="Lade Konfiguration..." style="min-height: 300px;" />
+          <div v-else-if="wlanKeyData" class="network-config-modal">
+            <!-- Grid Layout -->
+            <div class="config-grid">
+              <!-- WLAN Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-wifi"></i>
+                  <span>WLAN</span>
+                  <span v-if="wlanKeyData.ap_enabled !== undefined" class="status-dot" :class="wlanKeyData.ap_enabled ? 'active' : 'inactive'"></span>
+                  <span v-if="wlanKeyDataCached" class="cache-badge"><i class="fa-duotone fa-database"></i> Cache</span>
+                  <button class="config-action-btn" @click="copyAllNetworkConfig" title="Alles kopieren">
+                    <i class="fa-duotone fa-copy"></i>
+                  </button>
+                  <button class="config-action-btn" @click="openWlanKeyModal(true)" :disabled="wlanKeyLoading" title="Neu laden">
+                    <i class="fa-duotone fa-arrows-rotate" :class="{ 'fa-spin': wlanKeyLoading }"></i>
+                  </button>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row highlight">
+                    <span class="config-label">SSID</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.ssid || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.ssid" :text="wlanKeyData.ssid" />
+                    </div>
+                  </div>
+                  <div class="config-row" v-if="wlanKeyData.ssid_secondary && wlanKeyData.ssid_secondary !== wlanKeyData.ssid">
+                    <span class="config-label">SSID 5GHz</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.ssid_secondary }}</code>
+                      <tt-copy-button :text="wlanKeyData.ssid_secondary" />
+                    </div>
+                  </div>
+                  <div class="config-row highlight">
+                    <span class="config-label">Passwort</span>
+                    <div class="config-value with-copy">
+                      <code class="password">{{ wlanKeyData.psk || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.psk" :text="wlanKeyData.psk" />
+                    </div>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">Sicherheit</span>
+                    <code class="config-value">{{ wlanKeyData.wpa_type?.toUpperCase() || 'WPA2' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- LAN Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-network-wired"></i>
+                  <span>LAN</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row highlight">
+                    <span class="config-label">Router-IP</span>
+                    <div class="config-value with-copy">
+                      <code>{{ wlanKeyData.lan?.ip || '-' }}</code>
+                      <tt-copy-button v-if="wlanKeyData.lan?.ip" :text="wlanKeyData.lan.ip" />
+                    </div>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">Subnetz</span>
+                    <code class="config-value">{{ wlanKeyData.lan?.subnet || '-' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- DHCP Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-server"></i>
+                  <span>DHCP</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row">
+                    <span class="config-label">Bereich</span>
+                    <code class="config-value" v-if="wlanKeyData.lan?.dhcp_start && wlanKeyData.lan?.dhcp_end">
+                      {{ wlanKeyData.lan.dhcp_start }} - {{ wlanKeyData.lan.dhcp_end }}
+                    </code>
+                    <code class="config-value" v-else>-</code>
+                  </div>
+                  <div class="config-row">
+                    <span class="config-label">DNS</span>
+                    <code class="config-value small">{{ wlanKeyData.lan?.dns_servers || '-' }}</code>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Device Section -->
+              <div class="config-card">
+                <div class="config-card-header">
+                  <i class="fa-duotone fa-router"></i>
+                  <span>Gerät</span>
+                </div>
+                <div class="config-card-body">
+                  <div class="config-row" v-if="wlanKeyData.device_name">
+                    <span class="config-label">Modell</span>
+                    <code class="config-value">{{ wlanKeyData.device_name }}</code>
+                  </div>
+                  <div class="config-row" v-if="wlanKeyData.known_devices_count !== undefined">
+                    <span class="config-label">WLAN-Geräte</span>
+                    <code class="config-value">{{ wlanKeyData.known_devices_count }}</code>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="table-placeholder" style="min-height: 300px;">Keine Daten verfügbar.</div>
+        </tt-dialog>
+
       </div>
     `,
     data: () => ({
@@ -238,12 +362,18 @@ const RadiusRouterManager = {
 
         showNetworkStructureModal: false,
         networkStructureLoading: false,
+        networkStructureCached: false,
         rootDevice: null,
 
         showEventLogModal: false,
         eventLogLoading: false,
         eventLogData: null,
-        refreshLoading: false
+        refreshLoading: false,
+
+        showWlanKeyModal: false,
+        wlanKeyLoading: false,
+        wlanKeyData: null,
+        wlanKeyDataCached: false
     }),
     watch: {
         show: {
@@ -439,19 +569,22 @@ const RadiusRouterManager = {
                 this.remoteAccessLoading = false;
             }
         },
-        async openNetworkStructure() {
+        async openNetworkStructure(forceRefresh = false) {
             if (!this.routerDevice || !this.routerDevice.deviceId) return;
             this.showNetworkStructureModal = true;
             this.networkStructureLoading = true;
             this.rootDevice = null;
+            this.networkStructureCached = false;
 
             try {
                 const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsNetworkStructure`, {
-                    deviceId: this.routerDevice.deviceId
+                    deviceId: this.routerDevice.deviceId,
+                    forceRefresh: forceRefresh
                 });
 
                 if (data.root) {
                     this.rootDevice = data.root;
+                    this.networkStructureCached = data.cached === true;
                 }
             } catch (error) {
                 console.error(error);
@@ -482,6 +615,63 @@ const RadiusRouterManager = {
             } finally {
                 this.eventLogLoading = false;
             }
+        },
+        async openWlanKeyModal(forceRefresh = false) {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            this.showWlanKeyModal = true;
+            this.wlanKeyLoading = true;
+            this.wlanKeyData = null;
+            this.wlanKeyDataCached = false;
+
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsFritzboxWlanKey`, {
+                    deviceId: this.routerDevice.deviceId,
+                    forceRefresh: forceRefresh
+                });
+
+                if (data.success && data.wlan) {
+                    this.wlanKeyData = data.wlan;
+                    this.wlanKeyDataCached = data.cached === true;
+                } else {
+                    throw new Error(data.message || "Keine WLAN-Daten gefunden");
+                }
+            } catch (error) {
+                console.error(error);
+                window.notify('error', error.response?.data?.message || 'Fehler beim Laden der WLAN-Daten');
+            } finally {
+                this.wlanKeyLoading = false;
+            }
+        },
+        copyAllNetworkConfig() {
+            if (!this.wlanKeyData) return;
+
+            const d = this.wlanKeyData;
+            const lines = [
+                '=== WLAN ===',
+                `SSID: ${d.ssid || '-'}`,
+                d.ssid_secondary && d.ssid_secondary !== d.ssid ? `SSID 5GHz: ${d.ssid_secondary}` : null,
+                `Passwort: ${d.psk || '-'}`,
+                `Sicherheit: ${d.wpa_type?.toUpperCase() || 'WPA2'}`,
+                d.ap_enabled !== undefined ? `WLAN aktiv: ${d.ap_enabled ? 'Ja' : 'Nein'}` : null,
+                '',
+                '=== LAN ===',
+                `Router-IP: ${d.lan?.ip || '-'}`,
+                `Subnetz: ${d.lan?.subnet || '-'}`,
+                '',
+                '=== DHCP ===',
+                `Bereich: ${d.lan?.dhcp_start && d.lan?.dhcp_end ? `${d.lan.dhcp_start} - ${d.lan.dhcp_end}` : '-'}`,
+                `DNS: ${d.lan?.dns_servers || '-'}`,
+                '',
+                '=== Gerät ===',
+                d.device_name ? `Modell: ${d.device_name}` : null,
+                d.known_devices_count !== undefined ? `WLAN-Geräte: ${d.known_devices_count}` : null,
+            ].filter(Boolean).join('\n');
+
+            navigator.clipboard.writeText(lines).then(() => {
+                window.notify('success', 'Netzwerk-Konfiguration kopiert');
+            }).catch(() => {
+                window.notify('error', 'Kopieren fehlgeschlagen');
+            });
         }
     }
 };