add private subnets

custom/js/helper.js

@@ -18,6 +18,12 @@ function renderClientList(data) {
             allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>&nbsp;`;
         })
 
+        // render client private subnets
+        let privateSubnetsHtml = "";
+        $.each(obj.Client.private_subnets, function(index, obj) {
+            privateSubnetsHtml += `<small class="badge badge-secondary">${obj}</small>&nbsp;`;
+        })
+
         // render client html content
         let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
                         <div class="info-box">
@@ -50,6 +56,8 @@ function renderClientList(data) {
                                 + allocatedIpsHtml
                                 + `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
                                 + allowedIpsHtml
+                                + `<span class="info-box-text"><strong>Private Subnets</strong></span>`
+                                + privateSubnetsHtml
                             +`</div>
                         </div>
                     </div>`

model/client.go

@@ -14,6 +14,7 @@ type Client struct {
 	Email          string    `json:"email"`
 	AllocatedIPs   []string  `json:"allocated_ips"`
 	AllowedIPs     []string  `json:"allowed_ips"`
+	PrivateSubnets []string  `json:"private_subnets"`
 	Enabled        bool      `json:"enabled"`
 	CreatedAt      time.Time `json:"created_at"`
 	UpdatedAt      time.Time `json:"updated_at"`

templates/base.html

@@ -153,6 +153,10 @@
                                 <input type="text" data-role="tagsinput" class="form-control" id="client_allowed_ips"
                                     value="0.0.0.0/0">
                             </div>
+                            <div class="form-group">
+                                <label for="client_private_subnets" class="control-label">Allowed IPs</label>
+                                <input type="text" data-role="tagsinput" class="form-control" id="client_private_subnets">
+                            </div>
                             <div class="form-group">
                                 <div class="icheck-primary d-inline">
                                     <input type="checkbox" id="enabled" checked>
@@ -274,13 +278,14 @@
             const email = $("#client_email").val();
             const allocated_ips = $("#client_allocated_ips").val().split(",");
             const allowed_ips = $("#client_allowed_ips").val().split(",");
+            const private_subnets = $("#client_private_subnets").val().split(",");
             let enabled = false;
 
             if ($("#enabled").is(':checked')){
                 enabled = true;
             }
 
-            const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
+            const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips, "private_subnets": private_subnets,
             "enabled": enabled};
 
             $.ajax({
@@ -354,6 +359,18 @@
             'placeholderColor': '#666666'
         });
 
+        // PrivateSubnets tag input
+        $("#client_private_subnets").tagsInput({
+            'width': '100%',
+            'height': '75%',
+            'interactive': true,
+            'defaultText': 'Add More',
+            'removeWithBackspace': true,
+            'minChars': 0,
+            'maxChars': 18,
+            'placeholderColor': '#666666'
+        });
+
         // New client form validation
         $(document).ready(function () {
             $.validator.setDefaults({

templates/clients.html

@@ -58,6 +58,10 @@ Wireguard Clients
                         <label for="_client_allowed_ips" class="control-label">Allowed IPs</label>
                         <input type="text" data-role="tagsinput" class="form-control" id="_client_allowed_ips">
                     </div>
+                    <div class="form-group">
+                        <label for="_client_private_subnets" class="control-label">Private Subnet</label>
+                        <input type="text" data-role="tagsinput" class="form-control" id="_client_private_subnets">
+                    </div>
                     <div class="form-group">
                         <div class="icheck-primary d-inline">
                             <input type="checkbox" id="_enabled">
@@ -266,6 +270,18 @@ Wireguard Clients
                     'placeholderColor': '#666666'
                 });
 
+                // PrivateSubnet tag input
+                modal.find("#_client_private_subnets").tagsInput({
+                    'width': '100%',
+                    'height': '75%',
+                    'interactive': true,
+                    'defaultText': 'Add More',
+                    'removeWithBackspace': true,
+                    'minChars': 0,
+                    'maxChars': 18,
+                    'placeholderColor': '#666666'
+                });
+
                 // update client modal data
                 $.ajax({
                     cache: false,
@@ -291,6 +307,11 @@ Wireguard Clients
                             modal.find("#_client_allowed_ips").addTag(obj);
                         });
 
+                        modal.find("#_client_private_subnets").importTags('');
+                        client.private_subnets.forEach(function (obj) {
+                            modal.find("#_client_private_subnets").addTag(obj);
+                        });
+
                         modal.find("#_enabled").prop("checked", client.enabled);
                     },
                     error: function (jqXHR, exception) {
@@ -306,15 +327,16 @@ Wireguard Clients
             const client_id = $("#_client_id").val();
             const name = $("#_client_name").val();
             const email = $("#_client_email").val();
-            const allocated_ips = $("#_client_allocated_ips").val().split(",");
+            const allocated_ips = $("#1").val().split(",");
             const allowed_ips = $("#_client_allowed_ips").val().split(",");
+            const private_subnets = $("#_client_private_subnets").val().split(",");
             let enabled = false;
 
             if ($("#_enabled").is(':checked')){
                 enabled = true;
             }
 
-            const data = {"id": client_id, "name": name, "email": email, "allocated_ips": allocated_ips,
+            const data = {"id": client_id, "name": name, "email": email, "allocated_ips": allocated_ips, "private_subnets": private_subnets,
                 "allowed_ips": allowed_ips, "enabled": enabled};
 
             $.ajax({

templates/wg.conf

@@ -20,5 +20,5 @@ PostDown = {{ .serverConfig.Interface.PostDown }}
 [Peer]
 PublicKey = {{ .Client.PublicKey }}
 PresharedKey = {{ .Client.PresharedKey }}
-AllowedIPs = {{$first :=true}}{{range .Client.AllocatedIPs }}{{if $first}}{{$first = false}}{{else}},{{end}}{{.}}{{end}}
+AllowedIPs = {{$first :=true}}{{range .Client.AllocatedIPs }}{{if $first}}{{$first = false}}{{else}},{{end}}{{.}}{{end}}{{if .Client.PrivateSubnets}},{{end}}{{$first :=true}}{{range .Client.PrivateSubnets }}{{if $first}}{{$first = false}}{{else}},{{end}}{{.}}{{end}}
 {{end}}{{end}}