auto update script executed

api.go

@@ -98,6 +98,7 @@ func initAPIs() {
 	authRouter.HandleFunc("/api/tcpprox/config/edit", tcpProxyManager.HandleEditProxyConfigs)
 	authRouter.HandleFunc("/api/tcpprox/config/list", tcpProxyManager.HandleListConfigs)
 	authRouter.HandleFunc("/api/tcpprox/config/status", tcpProxyManager.HandleGetProxyStatus)
+	authRouter.HandleFunc("/api/tcpprox/config/validate", tcpProxyManager.HandleConfigValidate)
 
 	//mDNS APIs
 	authRouter.HandleFunc("/api/mdns/list", HandleMdnsListing)

mod/tcpprox/handler.go

@@ -22,13 +22,13 @@ func (m *Manager) HandleAddProxyConfig(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	portA, err := utils.PostPara(r, "portA")
+	portA, err := utils.PostPara(r, "porta")
 	if err != nil {
 		utils.SendErrorResponse(w, "first address cannot be empty")
 		return
 	}
 
-	portB, err := utils.PostPara(r, "portB")
+	portB, err := utils.PostPara(r, "portb")
 	if err != nil {
 		utils.SendErrorResponse(w, "second address cannot be empty")
 		return
@@ -80,17 +80,19 @@ func (m *Manager) HandleEditProxyConfigs(w http.ResponseWriter, r *http.Request)
 	}
 
 	newName, _ := utils.PostPara(r, "name")
-
-	newPortA, _ := utils.PostPara(r, "portA")
-
-	newPortB, _ := utils.PostPara(r, "portB")
-
+	newPortA, _ := utils.PostPara(r, "porta")
+	newPortB, _ := utils.PostPara(r, "portb")
 	newModeStr, _ := utils.PostPara(r, "mode")
 	newMode := -1
 	if newModeStr != "" {
-		newMode, err = strconv.Atoi(newModeStr)
-		if err != nil {
-			utils.SendErrorResponse(w, "invalid newMode value: "+newModeStr)
+		if newModeStr == "listen" {
+			newMode = 0
+		} else if newModeStr == "transport" {
+			newMode = 1
+		} else if newModeStr == "starter" {
+			newMode = 2
+		} else {
+			utils.SendErrorResponse(w, "invalid new mode value")
 			return
 		}
 	}
@@ -136,3 +138,25 @@ func (m *Manager) HandleGetProxyStatus(w http.ResponseWriter, r *http.Request) {
 	js, _ := json.Marshal(targetConfig)
 	utils.SendJSONResponse(w, string(js))
 }
+
+func (m *Manager) HandleConfigValidate(w http.ResponseWriter, r *http.Request) {
+	uuid, err := utils.GetPara(r, "uuid")
+	if err != nil {
+		utils.SendErrorResponse(w, "invalid uuid given")
+		return
+	}
+
+	targetConfig, err := m.GetConfigByUUID(uuid)
+	if err != nil {
+		utils.SendErrorResponse(w, err.Error())
+		return
+	}
+
+	err = targetConfig.ValidateConfigs()
+	if err != nil {
+		utils.SendErrorResponse(w, err.Error())
+		return
+	}
+
+	utils.SendOK(w)
+}

mod/tcpprox/tcpprox.go

@@ -114,15 +114,9 @@ func (m *Manager) EditConfig(configUUID string, newName string, newPortA string,
 		foundConfig.Name = newName
 	}
 	if newPortA != "" {
-		if !isValidIP(newPortA) {
-			return errors.New("PortA is not a valid IP")
-		}
 		foundConfig.PortA = newPortA
 	}
 	if newPortB != "" {
-		if !isValidIP(newPortB) {
-			return errors.New("PortB is not a valid IP")
-		}
 		foundConfig.PortB = newPortB
 	}
 	if newMode != -1 {
@@ -138,6 +132,11 @@ func (m *Manager) EditConfig(configUUID string, newName string, newPortA string,
 		foundConfig.Timeout = newTimeout
 	}
 
+	err = foundConfig.ValidateConfigs()
+	if err != nil {
+		return err
+	}
+
 	m.SaveConfigToDatabase()
 
 	return nil

web/components/tcpprox.html

@@ -6,21 +6,25 @@
     <button class="ui basic orange button" onclick="$('#addproxyConfig').slideToggle('fast');"><i class="ui add icon"></i> Add Proxy Config</button>
     <button class="ui basic circular right floated icon button" title="Refresh List"><i class="ui green refresh icon"></i></button>
     <div class="ui divider"></div>
-    <div class="ui basic segment" id="addproxyConfig">
-        <h3>New TCP Proxy Config</h3>
-        <p>Create a new proxy instance</p>
+    <div class="ui basic segment" id="addproxyConfig"  style="display:none;">
+        <h3>TCP Proxy Config</h3>
+        <p>Create or edit a new proxy instance</p>
         <form id="tcpProxyForm" class="ui form">
+            <div class="field" style="display:none;">
+                <label>UUID</label>
+                <input type="text" name="uuid">
+            </div>
             <div class="field">
                 <label>Name</label>
                 <input type="text" name="name" placeholder="Config Name">
             </div>
             <div class="field">
                 <label>Port A</label>
-                <input type="text" name="portA" placeholder="First address or port">
+                <input type="text" name="porta" placeholder="First address or port">
             </div>
                 <div class="field">
                 <label>Port B</label>
-            <input type="text" name="portB" placeholder="Second address or port">
+            <input type="text" name="portb" placeholder="Second address or port">
             </div>
             <div class="field">
                 <label>Timeout (s)</label>
@@ -35,7 +39,8 @@
                     <option value="starter">Starter</option>
                 </select>
             </div>
-            <button class="ui basic button" type="submit"><i class="ui blue add icon"></i> Add Proxy Config</button>  
+            <button class="ui basic button" type="submit"><i class="ui blue add icon"></i> Create</button>  
+            <button class="ui basic button" onclick="confirmEditTCPProxyConfig(event);"><i class="ui blue save icon"></i> Update</button>  
             <table class="ui celled padded table">
                 <thead>
                   <tr><th class="single line">Mode</th>
@@ -113,7 +118,7 @@
                         <th>PortB</th>
                         <th>Mode</th>
                         <th>Timeout (s)</th>
-                        <th>Validate / Start</th>
+                        <th>Actions</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -123,39 +128,23 @@
         </div>
     </div>
     <script>
+        let editingTCPProxyConfigUUID = ""; //The current editing TCP Proxy config UUID
+
         $("#tcpProxyForm .dropdown").dropdown();
         $('#tcpProxyForm').on('submit', function(event) {
             event.preventDefault();
-
             var form = $(this);
-            var url = '/api/tcpprox/config/add';
-            var data = form.serialize();
-
-            // Validate timeout is an integer
-            var timeout = parseInt(form.find('input[name="timeout"]').val());
-            if (isNaN(timeout)) {
-                form.find('input[name="timeout"]').parent().addClass("error");
-                msgbox('Timeout must be a valid integer', false, 5000);
-                return;
-            }else{
-                form.find('input[name="timeout"]').parent().removeClass("error");
-            }
 
-            // Validate mode is selected
-            var mode = form.find('select[name="mode"]').val();
-            if (mode === '') {
-                form.find('select[name="mode"]').parent().addClass("error");
-                msgbox('Please select a mode', false, 5000);
+            var formValid = validateTCPProxyConfig(form);
+            if (!formValid){
                 return;
-            }else{
-                form.find('select[name="mode"]').parent().removeClass("error");
             }
 
             // Send the AJAX POST request
             $.ajax({
                 type: 'POST',
-                url: url,
-                data: data,
+                url: '/api/tcpprox/config/add',
+                data: form.serialize(),
                 success: function(response) {
                     if (response.error) {
                         msgbox(response.error, false, 6000);
@@ -169,6 +158,29 @@
             });
         });
 
+        function validateTCPProxyConfig(form){
+            // Validate timeout is an integer
+            var timeout = parseInt(form.find('input[name="timeout"]').val());
+            if (isNaN(timeout)) {
+                form.find('input[name="timeout"]').parent().addClass("error");
+                msgbox('Timeout must be a valid integer', false, 5000);
+                return false;
+            }else{
+                form.find('input[name="timeout"]').parent().removeClass("error");
+            }
+
+            // Validate mode is selected
+            var mode = form.find('select[name="mode"]').val();
+            if (mode === '') {
+                form.find('select[name="mode"]').parent().addClass("error");
+                msgbox('Please select a mode', false, 5000);
+                return false;
+            }else{
+                form.find('select[name="mode"]').parent().removeClass("error");
+            }
+            return true;
+        }
+
         function renderProxyConfigs(proxyConfigs) {
             var tableBody = $('#proxyTable tbody');
 
@@ -179,10 +191,10 @@
                
                 proxyConfigs.forEach(function(config) {
                     var runningLogo = '<i class="red circle icon"></i>';
-                    var startButton = `<button onclick="startTcpProx('${config.UUID}');" class="ui basic icon button" title="Start Proxy"><i class="play icon"></i></button>`;
+                    var startButton = `<button onclick="startTcpProx('${config.UUID}');" class="ui button" title="Start Proxy"><i class="play icon"></i></button>`;
                     if (config.Running){
                         runningLogo = '<i class="green circle icon"></i>';
-                        startButton = `<button onclick="stopTcpProx('${config.UUID}');" class="ui basic icon button" title="Start Proxy"><i class="red stop icon"></i></button>`;
+                        startButton = `<button onclick="stopTcpProx('${config.UUID}');" class="ui button" title="Start Proxy"><i class="red stop icon"></i></button>`;
                     }
 
                     var modeText = "Unknown";
@@ -194,25 +206,119 @@
                         modeText = "Starter";
                     }
 
-                    
+                    var thisConfig = encodeURIComponent(JSON.stringify(config));
 
-                    var row = $(`<tr uuid="${config.UUID}">`);
+                    var row = $(`<tr class="tcproxConfig" uuid="${config.UUID}" config="${thisConfig}">`);
                     row.append($('<td>').html(runningLogo + config.Name));
                     row.append($('<td>').text(config.PortA));
                     row.append($('<td>').text(config.PortB));
                     row.append($('<td>').text(modeText));
                     row.append($('<td>').text(config.Timeout));
                     row.append($('<td>').html(`
-                        <div class="ui basic buttons">
-                            <button class="ui basic icon button" title="Validate Config"><i class="green check icon"></i></button>
+                        <div class="ui basic icon buttons">
+                            <button class="ui button" onclick="validateProxyConfig('${config.UUID}', this);" title="Validate Config"><i class="teal question circle outline icon"></i></button>
                             ${startButton}
-                        </div>  
+                            <button onclick="editTCPProxyConfig('${config.UUID}');" class="ui button" title="Edit Config"><i class="edit icon"></i></button>
+                            <button onclick="deleteTCPProxyConfig('${config.UUID}');" class="ui red button" title="Delete Config"><i class="trash icon"></i></button>
+                        </div>
                     `));
                     tableBody.append(row);
                 });
             }
         }
 
+        function getConfigDetailsFromDOM(configUUID){
+            let thisConfig = null;
+            $(".tcproxConfig").each(function(){
+                let uuid = $(this).attr("uuid");
+                if (configUUID == uuid){
+                    //This is the one we are looking for
+                    thisConfig = JSON.parse(decodeURIComponent($(this).attr("config")));
+                }
+            });
+            return thisConfig;
+        }   
+
+        function validateProxyConfig(configUUID, btn){
+            $(btn).html(`<i class="ui loading spinner icon"></i>`);
+            $.ajax({
+                url: "/api/tcpprox/config/validate",
+                data: {uuid: configUUID},
+                success: function(data){
+                    if (data.error != undefined){
+                        $(btn).html(`<i class="red times icon"></i>`);
+                        msgbox(data.error, false, 6000);
+                    }else{
+                        $(btn).html(`<i class="green check icon"></i>`);
+                        msgbox("Config Check Passed");
+                    }
+                }
+            })   
+        }
+
+        function editTCPProxyConfig(configUUID){
+            let targetConfig = getConfigDetailsFromDOM(configUUID);
+            if (targetConfig != null){
+                console.log(targetConfig);
+               $.each(targetConfig, function(key, value) {
+                    var field = $("#tcpProxyForm").find('[name="' + key.toLowerCase() + '"]');
+                    if (field.length > 0) {
+                        if (field.is('input')) {
+                            field.val(value);
+                        }else if (field.is('select')){
+                            if (key.toLowerCase() == "mode"){
+                                if (value == 0){
+                                    value = "listen";
+                                }else if (value == 1){
+                                    value = "transport";
+                                }else if (value == 2){
+                                    value = "starter";
+                                }
+                            }
+                            $(field).dropdown("set selected", value);
+                        }
+                    }
+                });
+                editingTCPProxyConfigUUID = configUUID;
+                $("#addproxyConfig").slideDown("fast");
+
+            }else{
+                msgbox("Unable to load target config", false);
+            }
+        }
+
+        function confirmEditTCPProxyConfig(event){
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            var form = $("#tcpProxyForm");
+
+            var formValid = validateTCPProxyConfig(form);
+            if (!formValid){
+                return;
+            }
+
+            // Send the AJAX POST request
+            $.ajax({
+                type: 'POST',
+                url: '/api/tcpprox/config/edit',
+                data: form.serialize(),
+                success: function(response) {
+                    if (response.error) {
+                        msgbox(response.error, false, 6000);
+                    }else{
+                        msgbox("Config Updated");
+                    }
+                },
+                error: function() {
+                    msgbox('An error occurred while processing the request', false);
+                }
+            });
+        }
+
+        function deleteTCPProxyConfig(configUUID){
+
+        }
+
         function initProxyConfigList(){
             $.ajax({
                 type: 'GET',