add friendly_name param

handler/routes.go

@@ -481,6 +481,10 @@ func NewClient(db store.IStore) echo.HandlerFunc {
 			}
 		}
 
+		if client.FriendlyName == "" {
+			client.FriendlyName = client.Name + "-" + client.ID
+		}
+
 		if client.PresharedKey == "" {
 			presharedKey, err := wgtypes.GenerateKey()
 			if err != nil {

model/client.go

@@ -23,6 +23,7 @@ type Client struct {
 	Enabled         bool      `json:"enabled"`
 	CreatedAt       time.Time `json:"created_at"`
 	UpdatedAt       time.Time `json:"updated_at"`
+	FriendlyName    string    `json:"friendly_name"`
 }
 
 // ClientData includes the Client and extra data

templates/base.html

@@ -207,6 +207,10 @@
                                 <label for="client_name" class="control-label">Name</label>
                                 <input type="text" class="form-control" id="client_name" name="client_name">
                             </div>
+                            <div class="form-group">
+                                <label for="client_friendly_name" class="control-label">Friendly Name</label>
+                                <input type="text" class="form-control" id="client_friendly_name" name="client_friendly_name">
+                            </div>
                             <div class="form-group">
                                 <label for="client_email" class="control-label">Email</label>
                                 <input type="text" class="form-control" id="client_email" name="client_email">
@@ -437,7 +441,7 @@
                     }
                 });
         }
-        
+
         // populateClient function for render new client info
         // on the client page.
         function populateClient(client_id) {
@@ -460,6 +464,7 @@
         // submitNewClient function for new client form submission
         function submitNewClient() {
             const name = $("#client_name").val();
+            const friendly_name = $("#client_friendly_name").val();
             const email = $("#client_email").val();
             const telegram_userid = $("#client_telegram_userid").val();
             const allocated_ips = $("#client_allocated_ips").val().split(",");
@@ -484,10 +489,10 @@
             }
             const public_key = $("#client_public_key").val();
             const preshared_key = $("#client_preshared_key").val();
-            
+
             const additional_notes = $("#additional_notes").val();
 
-            const data = {"name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
+            const data = {"name": name, "friendly_name": friendly_name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
                 "extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint, "use_server_dns": use_server_dns, "enabled": enabled,
                 "public_key": public_key, "preshared_key": preshared_key, "additional_notes": additional_notes};
 
@@ -623,6 +628,7 @@
         $(document).ready(function () {
             $("#modal_new_client").on('shown.bs.modal', function (e) {
                 $("#client_name").val("");
+                $("#client_friendly_name").val("");
                 $("#client_email").val("");
                 $("#client_public_key").val("");
                 $("#client_preshared_key").val("");

templates/clients.html

@@ -125,6 +125,10 @@ Wireguard Clients
                         <label for="_client_name" class="control-label">Name</label>
                         <input type="text" class="form-control" id="_client_name" name="_client_name">
                     </div>
+                    <div class="form-group">
+                        <label for="_client_friendly_name" class="control-label">Name</label>
+                        <input type="text" class="form-control" id="_client_friendly_name" name="_client_friendly_name">
+                    </div>
                     <div class="form-group">
                         <label for="_client_email" class="control-label">Email</label>
                         <input type="text" class="form-control" id="_client_email" name="client_email">
@@ -505,7 +509,7 @@ Wireguard Clients
                             if (sr === selectedSR) {
                                 $(this).closest('.col-lg-4').show();
                                 break
-                            }                            
+                            }
                         }
                     })
                     // $('.col-lg-4').show();
@@ -628,6 +632,7 @@ Wireguard Clients
                         modal.find("#_client_id").val(client.id);
                         modal.find("#_client_telegram_userid").val(client.telegram_userid);
                         modal.find("#_client_name").val(client.name);
+                        modal.find("#_client_friendly_name").val(client.name);
                         modal.find("#_client_email").val(client.email);
 
                         let preselectedEl
@@ -659,7 +664,7 @@ Wireguard Clients
 
                         modal.find("#_client_public_key").val(client.public_key);
                         modal.find("#_client_preshared_key").val(client.preshared_key);
-                        
+
                         modal.find("#_additional_notes").val(client.additional_notes);
 
                         // handle subnet range select
@@ -757,6 +762,7 @@ Wireguard Clients
         function submitEditClient() {
             const client_id = $("#_client_id").val();
             const name = $("#_client_name").val();
+            const friendly_name = $("#_client_friendly_name").val();
             const email = $("#_client_email").val();
             const telegram_userid = $("#_client_telegram_userid").val();
             const allocated_ips = $("#_client_allocated_ips").val().split(",");
@@ -784,7 +790,7 @@ Wireguard Clients
 
             const additional_notes = $("#_additional_notes").val();
 
-            const data = {"id": client_id, "name": name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips,
+            const data = {"id": client_id, "name": name, "friendly_name": friendly_name, "email": email, "telegram_userid": telegram_userid, "allocated_ips": allocated_ips,
                 "allowed_ips": allowed_ips, "extra_allowed_ips": extra_allowed_ips, "endpoint": endpoint,
                 "use_server_dns": use_server_dns, "enabled": enabled, "public_key": public_key, "preshared_key": preshared_key, "additional_notes": additional_notes};
 
@@ -958,7 +964,7 @@ Wireguard Clients
                     $(element).removeClass('is-invalid');
                 }
             });
-            // 
+            //
         });
     </script>
 {{end}}

templates/status.html

@@ -40,6 +40,7 @@ Connected Peers
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Name</th>
+                  <th scope="col">Friendly Name</th>
                   <th scope="col">Email</th>
                   <th scope="col">Allocated IPs</th>
                   <th scope="col">Endpoint</th>
@@ -55,6 +56,7 @@ Connected Peers
               <tr {{ if $peer.Connected }} class="table-success" {{ end }}>
                 <th scope="row">{{ $idx }}</th>
                 <td>{{ $peer.Name }}</td>
+                <td>{{ $peer.FriendlyName }}</td>
                 <td>{{ $peer.Email }}</td>
                 <td>{{ $peer.AllocatedIP }}</td>
                 <td>{{ $peer.Endpoint }}</td>

templates/wg.conf

@@ -25,6 +25,7 @@ Table = {{ .globalSettings.Table }}
 # Notes:
 # {{ .Client.AdditionalNotes }}{{end}}
 [Peer]
+# friendly_name = {{ .Client.FriendlyName }}
 PublicKey = {{ .Client.PublicKey }}
 {{if .Client.PresharedKey}}PresharedKey = {{ .Client.PresharedKey }}{{end}}
 AllowedIPs = {{$first :=true}}{{range .Client.AllocatedIPs }}{{if $first}}{{$first = false}}{{else}},{{end}}{{.}}{{end}}{{range .Client.ExtraAllowedIPs }},{{.}}{{end}}