From ab9d902df8ddaaaae4c6647a47156cd792405a79 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Wed, 1 Nov 2023 08:21:44 +0100
Subject: [PATCH] net/wireguard: UX and wording

---
 .../src/etc/inc/plugins.inc.d/wireguard.inc        |  4 ++--
 .../mvc/app/models/OPNsense/Wireguard/ACL/ACL.xml  |  2 +-
 .../mvc/app/models/OPNsense/Wireguard/Client.xml   |  2 +-
 .../mvc/app/views/OPNsense/Wireguard/general.volt  | 14 ++++++++------
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/net/wireguard/src/etc/inc/plugins.inc.d/wireguard.inc b/net/wireguard/src/etc/inc/plugins.inc.d/wireguard.inc
index 08f344cd8..e935fa4b5 100644
--- a/net/wireguard/src/etc/inc/plugins.inc.d/wireguard.inc
+++ b/net/wireguard/src/etc/inc/plugins.inc.d/wireguard.inc
@@ -43,7 +43,7 @@ function wireguard_services()
     foreach ((new OPNsense\Wireguard\Server())->servers->server->iterateItems() as $key => $node) {
         if (!empty((string)$node->enabled)) {
             $services[] = [
-                'description' => "Wireguard " . htmlspecialchars($node->name),
+                'description' => 'WireGuard ' . htmlspecialchars($node->name),
                 'configd' => [
                     'start' => ["wireguard start {$key}"],
                     'restart' => ["wireguard restart {$key}"],
@@ -104,7 +104,7 @@ function wireguard_devices()
     foreach ((new OPNsense\Wireguard\Server())->servers->server->iterateItems() as $key => $node) {
         if (!empty((string)$node->enabled)) {
             $names[(string)$node->interface] = [
-                'descr' => sprintf('%s (Wireguard - %s)', (string)$node->interface, (string)$node->name),
+                'descr' => sprintf('%s (WireGuard - %s)', (string)$node->interface, (string)$node->name),
                 'ifdescr' => (string)$node->name,
                 'name' => (string)$node->interface
             ];
diff --git a/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/ACL/ACL.xml b/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/ACL/ACL.xml
index 21012db80..94360e776 100644
--- a/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/ACL/ACL.xml
+++ b/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/ACL/ACL.xml
@@ -1,6 +1,6 @@
 <acl>
    <page-wireguard-config>
-      <name>VPN: Wireguard</name>
+      <name>VPN: WireGuard</name>
       <patterns>
          <pattern>ui/wireguard/*</pattern>
          <pattern>api/wireguard/*</pattern>
diff --git a/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/Client.xml b/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/Client.xml
index 2d472d838..82c24d1d5 100644
--- a/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/Client.xml
+++ b/net/wireguard/src/opnsense/mvc/app/models/OPNsense/Wireguard/Client.xml
@@ -1,6 +1,6 @@
 <model>
     <mount>//OPNsense/wireguard/client</mount>
-    <description>Wireguard peer configuration</description>
+    <description>WireGuard peer configuration</description>
     <version>0.0.7</version>
     <items>
         <clients>
diff --git a/net/wireguard/src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt b/net/wireguard/src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt
index 2647b46f1..5cc1f6d62 100644
--- a/net/wireguard/src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt
+++ b/net/wireguard/src/opnsense/mvc/app/views/OPNsense/Wireguard/general.volt
@@ -90,14 +90,13 @@
 
 <div class="tab-content content-box tab-content">
     <div id="general" class="tab-pane fade in active">
-        <div class="content-box" style="padding-bottom: 1.5em;">
-            {{ partial("layout_partials/base_form",['fields':generalForm,'id':'frm_general_settings'])}}
-        </div>
+        {{ partial("layout_partials/base_form",['fields':generalForm,'id':'frm_general_settings'])}}
     </div>
     <div id="peers" class="tab-pane fade in">
-        <table id="grid-peers" class="table table-responsive" data-editDialog="dialogEditWireguardClient">
+        <table id="grid-peers" class="table table-condensed table-hover table-striped" data-editDialog="dialogEditWireguardClient">
             <thead>
                 <tr>
+                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
                     <th data-column-id="enabled" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
                     <th data-column-id="name" data-type="string" data-visible="true">{{ lang._('Name') }}</th>
                     <th data-column-id="serveraddress" data-type="string" data-visible="true">{{ lang._('Endpoint address') }}</th>
@@ -114,6 +113,7 @@
                     <td colspan="6"></td>
                     <td>
                         <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
+                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
                     </td>
                 </tr>
             </tfoot>
@@ -125,9 +125,10 @@
               <i class="fa fa-fw fa-gear"></i>
             </button>
         </span>
-        <table id="grid-instances" class="table table-responsive" data-editDialog="dialogEditWireguardServer">
+        <table id="grid-instances" class="table table-condensed table-hover table-striped" data-editDialog="dialogEditWireguardServer">
             <thead>
                 <tr>
+                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
                     <th data-column-id="enabled" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
                     <th data-column-id="name" data-type="string" data-visible="true">{{ lang._('Name') }}</th>
                     <th data-column-id="interface" data-type="string" data-visible="true">{{ lang._('Device') }}</th>
@@ -145,6 +146,7 @@
                     <td colspan="7"></td>
                     <td>
                         <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-plus"></span></button>
+                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
                     </td>
                 </tr>
             </tfoot>
@@ -159,7 +161,7 @@
             <button class="btn btn-primary" id="reconfigureAct"
                     data-endpoint='/api/wireguard/service/reconfigure'
                     data-label="{{ lang._('Apply') }}"
-                    data-error-title="{{ lang._('Error reconfiguring Wireguard') }}"
+                    data-error-title="{{ lang._('Error reconfiguring WireGuard') }}"
                     type="button"
             ></button>
             <br/><br/>