From 5a3424485437bbe73a3bbaddacdc76532dd8af26 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 14 Mar 2025 21:09:15 +0100
Subject: [PATCH] Use SettingsItem in network view

---
 dashboard/src/components/Firewall.vue | 32 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/components/Firewall.vue b/dashboard/src/components/Firewall.vue
index 34ce31160..e9308c2df 100644
--- a/dashboard/src/components/Firewall.vue
+++ b/dashboard/src/components/Firewall.vue
@@ -1,8 +1,9 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Dialog, FormGroup } from 'pankow';
+import { Dialog, Button, FormGroup } from 'pankow';
 import Section from  '../components/Section.vue';
+import SettingsItem from  '../components/SettingsItem.vue';
 import NetworkModel from  '../models/NetworkModel.js';
 
 const networkModel = NetworkModel.create();
@@ -153,14 +154,27 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('network.firewall.title')">
-      <div class="info-row">
-        <div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
-        <div class="info-value actionable" @click="onBlocklistConfigure()">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
-      </div>
-      <div class="info-row">
-        <div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
-        <div class="info-value actionable" @click="onTrustedIpsConfigure()">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
-      </div>
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('network.firewall.blockedIpRanges') }}</label>
+          <div>{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }}</div>
+        </FormGroup>
+        <div style="display: flex; align-items: center">
+          <!-- TODO -->
+          <Button tool plain @click="onBlocklistConfigure()">Edit</Button>
+        </div>
+      </SettingsItem>
+
+      <SettingsItem>
+        <FormGroup>
+          <label>{{ $t('network.trustedIpRanges') }}</label>
+          <div>{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }}</div>
+        </FormGroup>
+        <div style="display: flex; align-items: center">
+          <!-- TODO -->
+          <Button tool plain @click="onTrustedIpsConfigure()">Edit</Button>
+        </div>
+      </SettingsItem>
     </Section>
   </div>
 </template>