Update client page using jax

Dockerfile

@@ -35,6 +35,9 @@ RUN mkdir -p assets/plugins && \
     /build/node_modules/jquery-tags-input/ \
     assets/plugins/
 
+# Move custom assets
+RUN cp -r /build/custom/ assets/
+
 # Get go modules and build tool
 RUN go mod download && \
     go get github.com/GeertJohan/go.rice/rice

custom/js/helper.js

@@ -0,0 +1,59 @@
+function renderClientList(data) {
+    $.each(data, function(index, obj) {
+        // render client status css tag style
+        let clientStatusHtml = '>'
+        if (obj.Client.enabled) {
+            clientStatusHtml = `style="visibility: hidden;">`
+        }
+
+        // render client allocated ip addresses
+        let allocatedIpsHtml = "";
+        $.each(obj.Client.allocated_ips, function(index, obj) {
+            allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
+        })
+
+        // render client allowed ip addresses
+        let allowedIpsHtml = "";
+        $.each(obj.Client.allowed_ips, function(index, obj) {
+            allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
+        })
+
+        // render client html content
+        let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
+                        <div class="info-box">
+                            <div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
+                                + `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
+                            </div>
+                            <img src="${obj.QRCode}" />
+                            <div class="info-box-content">
+                                <div class="btn-group">
+                                    <button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
+                                        class="btn btn-outline-success btn-sm">Download</button>
+                                    <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
+                                            data-target="#modal_edit_client">Edit</button>
+                                    <button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
+                                        data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
+                                        data-clientname="${obj.Client.name}">Disable</button>
+                                    <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
+                                        data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
+                                        data-clientname="${obj.Client.name}">Remove</button>
+                                </div>
+                                <hr>
+                                <span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
+                                <span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
+                                <span class="info-box-text"><i class="fas fa-clock"></i>
+                                    ${obj.Client.created_at}</span>
+                                <span class="info-box-text"><i class="fas fa-history"></i>
+                                    ${obj.Client.updated_at}</span>
+                                <span class="info-box-text"><strong>IP Allocation</strong></span>`
+                                + allocatedIpsHtml
+                                + `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
+                                + allowedIpsHtml
+                            +`</div>
+                        </div>
+                    </div>`
+
+        // add the client html elements to the list
+        $('#client-list').append(html);
+    });
+}

handler/routes.go

@@ -107,6 +107,22 @@ func GetClients() echo.HandlerFunc {
 	}
 }
 
+// GetClient handler return a of Wireguard client data
+func GetClient() echo.HandlerFunc {
+	return func(c echo.Context) error {
+		// access validation
+		validSession(c)
+
+		clientID := c.Param("id")
+		clientData, err := util.GetClientByID(clientID, true)
+		if err != nil {
+			return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Client not found"})
+		}
+
+		return c.JSON(http.StatusOK, clientData)
+	}
+}
+
 // NewClient handler
 func NewClient() echo.HandlerFunc {
 	return func(c echo.Context) error {
@@ -215,15 +231,16 @@ func DownloadClient() echo.HandlerFunc {
 			return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Missing clientid parameter"})
 		}
 
-		client, err := util.GetClientByID(clientID)
+		clientData, err := util.GetClientByID(clientID, false)
 		if err != nil {
 			log.Errorf("Cannot generate client id %s config file for downloading: %v", clientID, err)
 			return c.JSON(http.StatusNotFound, jsonHTTPResponse{false, "Client not found"})
 		}
+
 		// build config
 		server, _ := util.GetServer()
 		globalSettings, _ := util.GetGlobalSettings()
-		config := util.BuildClientConfig(client, server, globalSettings)
+		config := util.BuildClientConfig(*clientData.Client, server, globalSettings)
 
 		// create io reader from string
 		reader := strings.NewReader(config)

main.go

@@ -58,6 +58,7 @@ func main() {
 	app.GET("/global-settings", handler.GlobalSettings())
 	app.POST("/global-settings", handler.GlobalSettingSubmit())
 	app.GET("/api/clients", handler.GetClients())
+	app.GET("/api/client/:id", handler.GetClient())
 	app.GET("/api/machine-ips", handler.MachineIPAddresses())
 	app.GET("/api/suggest-client-ips", handler.SuggestIPAllocation())
 	app.GET("/api/apply-wg-config", handler.ApplyServerConfig(tmplBox))

prepare_assets.sh

@@ -11,6 +11,9 @@ mkdir -p "${DIR}/assets/dist/js" "${DIR}/assets/dist/css" && \
   cp -r "${DIR}/node_modules/admin-lte/dist/js/adminlte.min.js" "${DIR}/assets/dist/js/adminlte.min.js" && \
   cp -r "${DIR}/node_modules/admin-lte/dist/css/adminlte.min.css" "${DIR}/assets/dist/css/adminlte.min.css"
 
+# Copy helper js
+cp -r "${DIR}/custom" "${DIR}/assets"
+
 # Copy plugins
 mkdir -p "${DIR}/assets/plugins" && \
   cp -r "${DIR}/node_modules/admin-lte/plugins/jquery" \

templates/base.html

@@ -246,7 +246,28 @@
     <script src="static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.js"></script>
     <!-- AdminLTE App -->
     <script src="static/dist/js/adminlte.min.js"></script>
+    <!-- Custom js -->
+    <script src="static/custom/js/helper.js"></script>
     <script>
+        // populateClient function for render new client info
+        // on the client page.
+        function populateClient(client_id) {
+            $.ajax({
+                cache: false,
+                method: 'GET',
+                url: '/api/client/' + client_id,
+                dataType: 'json',
+                contentType: "application/json",
+                success: function (resp) {
+                    renderClientList([resp]);
+                },
+                error: function (jqXHR, exception) {
+                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
+                    toastr.error(responseJson['message']);
+                }
+            });
+        }
+
         // submitNewClient function for new client form submission
         function submitNewClient() {
             const name = $("#client_name").val();
@@ -261,7 +282,6 @@
 
             const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
             "enabled": enabled};
-            console.log(data);
 
             $.ajax({
                 cache: false,
@@ -270,12 +290,12 @@
                 dataType: 'json',
                 contentType: "application/json",
                 data: JSON.stringify(data),
-                success: function(data) {
+                success: function(resp) {
                     $("#modal_new_client").modal('hide');
                     toastr.success('Created new client successfully');
-                    // Refresh the home page (clients page) after adding successfully
+                    // Update the home page (clients page) after adding successfully
                     if (window.location.pathname === "/") {
-                        location.reload();
+                        populateClient(resp.id);
                     }
                 },
                 error: function(jqXHR, exception) {
@@ -377,6 +397,8 @@
         // New Client modal event
         $(document).ready(function () {
             $("#modal_new_client").on('shown.bs.modal', function (e) {
+                $("#client_name").val("");
+                $("#client_email").val("");
                 $("#client_allocated_ips").importTags('');
                 updateIPAllocationSuggestion();
             });

templates/clients.html

@@ -125,71 +125,7 @@ Wireguard Clients
 {{end}}
 
 {{define "bottom_js"}}
-<script type="text/html" id="template">
-
-
-</script>
-
     <script>
-        function renderClient(data) {
-            $.each(data, function(index, obj) {
-                // render client status css tag style
-                let clientStatusHtml = '>'
-                if (obj.Client.enabled) {
-                    clientStatusHtml = `style="visibility: hidden;">`
-                }
-
-                // render client allocated ip addresses
-                let allocatedIpsHtml = "";
-                $.each(obj.Client.allocated_ips, function(index, obj) {
-                    allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
-                })
-
-                // render client allowed ip addresses
-                let allowedIpsHtml = "";
-                $.each(obj.Client.allowed_ips, function(index, obj) {
-                    allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
-                })
-
-                // render client html content
-                let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
-                                <div class="info-box">
-                                    <div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
-                                        + `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
-                                    </div>
-                                    <img src="${obj.QRCode}" />
-                                    <div class="info-box-content">
-                                        <div class="btn-group">
-                                            <button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
-                                                class="btn btn-outline-success btn-sm">Download</button>
-                                            <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
-                                                    data-target="#modal_edit_client">Edit</button>
-                                            <button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
-                                                data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
-                                                data-clientname="${obj.Client.name}">Disable</button>
-                                            <button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
-                                                data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
-                                                data-clientname="${obj.Client.name}">Remove</button>
-                                        </div>
-                                        <hr>
-                                        <span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
-                                        <span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
-                                        <span class="info-box-text"><i class="fas fa-clock"></i>
-                                            ${obj.Client.created_at}</span>
-                                        <span class="info-box-text"><i class="fas fa-history"></i>
-                                            ${obj.Client.updated_at}</span>
-                                        <span class="info-box-text"><strong>IP Allocation</strong></span>`
-                                        + allocatedIpsHtml
-                                        + `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
-                                        + allowedIpsHtml
-                                    +`</div>
-                                </div>
-                            </div>`
-
-                // add the client html elements to the list
-                $('#client-list').append(html);
-            });
-        }
         function populateClientList() {
             $.ajax({
                 cache: false,
@@ -198,7 +134,7 @@ Wireguard Clients
                 dataType: 'json',
                 contentType: "application/json",
                 success: function (data) {
-                    renderClient(data);
+                    renderClientList(data);
                 },
                 error: function (jqXHR, exception) {
                     const responseJson = jQuery.parseJSON(jqXHR.responseText);

util/db.go

@@ -209,7 +209,7 @@ func GetClients(hasQRCode bool) ([]model.ClientData, error) {
 			server, _ := GetServer()
 			globalSettings, _ := GetGlobalSettings()
 
-			png, _ := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
+			png, err := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
 			if err == nil {
 				clientData.QRCode = "data:image/png;base64," + base64.StdEncoding.EncodeToString([]byte(png))
 			} else {
@@ -226,18 +226,34 @@ func GetClients(hasQRCode bool) ([]model.ClientData, error) {
 }
 
 // GetClientByID func to query a client from the database
-func GetClientByID(clientID string) (model.Client, error) {
+func GetClientByID(clientID string, hasQRCode bool) (model.ClientData, error) {
 	client := model.Client{}
+	clientData := model.ClientData{}
 
 	db, err := DBConn()
 	if err != nil {
-		return client, err
+		return clientData, err
 	}
 
 	// read client information
 	if err := db.Read("clients", clientID, &client); err != nil {
-		return client, err
+		return clientData, err
 	}
 
-	return client, nil
+	// generate client qrcode image in base64
+	if hasQRCode {
+		server, _ := GetServer()
+		globalSettings, _ := GetGlobalSettings()
+
+		png, err := qrcode.Encode(BuildClientConfig(client, server, globalSettings), qrcode.Medium, 256)
+		if err == nil {
+			clientData.QRCode = "data:image/png;base64," + base64.StdEncoding.EncodeToString([]byte(png))
+		} else {
+			fmt.Print("Cannot generate QR code: ", err)
+		}
+	}
+
+	clientData.Client = &client
+
+	return clientData, nil
 }