Added per host vdir implementation

src/api.go

@@ -56,9 +56,12 @@ func initAPIs() {
 	authRouter.HandleFunc("/api/proxy/useHttpsRedirect", HandleUpdateHttpsRedirect)
 	authRouter.HandleFunc("/api/proxy/listenPort80", HandleUpdatePort80Listener)
 	authRouter.HandleFunc("/api/proxy/requestIsProxied", HandleManagementProxyCheck)
-	//Reverse proxy root related APIs
-	//authRouter.HandleFunc("/api/proxy/root/listOptions", HandleRootRouteOptionList)
-	//authRouter.HandleFunc("/api/proxy/root/updateOptions", HandleRootRouteOptionsUpdate)
+	//Reverse proxy virtual directory APIs
+	authRouter.HandleFunc("/api/proxy/vdir/list", ReverseProxyListVdir)
+	authRouter.HandleFunc("/api/proxy/vdir/add", ReverseProxyAddVdir)
+	authRouter.HandleFunc("/api/proxy/vdir/del", ReverseProxyDeleteVdir)
+	authRouter.HandleFunc("/api/proxy/vdir/edit", ReverseProxyEditVdir)
+
 	//Reverse proxy auth related APIs
 	authRouter.HandleFunc("/api/proxy/auth/exceptions/list", ListProxyBasicAuthExceptionPaths)
 	authRouter.HandleFunc("/api/proxy/auth/exceptions/add", AddProxyBasicAuthExceptionPaths)

src/config.go

@@ -108,8 +108,7 @@ func SaveReverseProxyConfig(endpoint *dynamicproxy.ProxyEndpoint) error {
 		return err
 	}
 
-	os.WriteFile(filename, js, 0775)
-	return nil
+	return os.WriteFile(filename, js, 0775)
 }
 
 func RemoveReverseProxyConfig(endpoint string) error {
@@ -137,7 +136,7 @@ func GetDefaultRootConfig() (*dynamicproxy.ProxyEndpoint, error) {
 		RequireTLS:              false,
 		BypassGlobalTLS:         false,
 		SkipCertValidations:     false,
-		VirtualDirectories:      []*dynamicproxy.ProxyEndpoint{},
+		VirtualDirectories:      []*dynamicproxy.VirtualDirectoryEndpoint{},
 		RequireBasicAuth:        false,
 		BasicAuthCredentials:    []*dynamicproxy.BasicAuthCredentials{},
 		BasicAuthExceptionRules: []*dynamicproxy.BasicAuthExceptionRule{},

src/mod/dynamicproxy/Server.go

@@ -82,13 +82,31 @@ func (h *ProxyHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		Host Routing
 	*/
 	sep := h.Parent.getProxyEndpointFromHostname(domainOnly)
-	if sep != nil {
+	if sep != nil && !sep.Disabled {
 		if sep.RequireBasicAuth {
 			err := h.handleBasicAuthRouting(w, r, sep)
 			if err != nil {
 				return
 			}
 		}
+
+		//Check if any virtual directory rules matches
+		proxyingPath := strings.TrimSpace(r.RequestURI)
+		targetProxyEndpoint := sep.GetVirtualDirectoryHandlerFromRequestURI(proxyingPath)
+		if targetProxyEndpoint != nil && !targetProxyEndpoint.Disabled {
+			//Virtual directory routing rule found. Route via vdir mode
+			h.vdirRequest(w, r, targetProxyEndpoint)
+			return
+		} else if !strings.HasSuffix(proxyingPath, "/") && sep.ProxyType != ProxyType_Root {
+			potentialProxtEndpoint := sep.GetVirtualDirectoryHandlerFromRequestURI(proxyingPath + "/")
+			if potentialProxtEndpoint != nil && !targetProxyEndpoint.Disabled {
+				//Missing tailing slash. Redirect to target proxy endpoint
+				http.Redirect(w, r, r.RequestURI+"/", http.StatusTemporaryRedirect)
+				return
+			}
+		}
+
+		//Fallback to handle by the host proxy forwarder
 		h.hostRequest(w, r, sep)
 		return
 	}
@@ -137,7 +155,25 @@ func (h *ProxyHandler) handleRootRouting(w http.ResponseWriter, r *http.Request)
 		fallthrough
 	case DefaultSite_ReverseProxy:
 		//They both share the same behavior
-		h.vdirRequest(w, r, h.Parent.Root)
+
+		//Check if any virtual directory rules matches
+		proxyingPath := strings.TrimSpace(r.RequestURI)
+		targetProxyEndpoint := proot.GetVirtualDirectoryHandlerFromRequestURI(proxyingPath)
+		if targetProxyEndpoint != nil && !targetProxyEndpoint.Disabled {
+			//Virtual directory routing rule found. Route via vdir mode
+			h.vdirRequest(w, r, targetProxyEndpoint)
+			return
+		} else if !strings.HasSuffix(proxyingPath, "/") && proot.ProxyType != ProxyType_Root {
+			potentialProxtEndpoint := proot.GetVirtualDirectoryHandlerFromRequestURI(proxyingPath + "/")
+			if potentialProxtEndpoint != nil && !targetProxyEndpoint.Disabled {
+				//Missing tailing slash. Redirect to target proxy endpoint
+				http.Redirect(w, r, r.RequestURI+"/", http.StatusTemporaryRedirect)
+				return
+			}
+		}
+
+		//No vdir match. Route via root router
+		h.hostRequest(w, r, h.Parent.Root)
 	case DefaultSite_Redirect:
 		redirectTarget := strings.TrimSpace(proot.DefaultSiteValue)
 		if redirectTarget == "" {
@@ -148,7 +184,7 @@ func (h *ProxyHandler) handleRootRouting(w http.ResponseWriter, r *http.Request)
 		parsedURL, err := url.Parse(proot.DefaultSiteValue)
 		if err != nil {
 			//Error when parsing target. Send to root
-			h.vdirRequest(w, r, h.Parent.Root)
+			h.hostRequest(w, r, h.Parent.Root)
 			return
 		}
 		hostname := parsedURL.Hostname()

src/mod/dynamicproxy/endpoints.go

@@ -1,65 +1,89 @@
 package dynamicproxy
 
 import (
+	"encoding/json"
 	"errors"
-	"net/url"
 	"strings"
-
-	"imuslab.com/zoraxy/mod/dynamicproxy/dpcore"
 )
 
-// Prepare proxy route generate a proxy handler service object for your endpoint
-func (router *Router) PrepareProxyRoute(endpoint *ProxyEndpoint) (*ProxyEndpoint, error) {
-	//Filter the tailing slash if any
-	domain := endpoint.Domain
-	if domain[len(domain)-1:] == "/" {
-		domain = domain[:len(domain)-1]
-	}
-	endpoint.Domain = domain
+/*
+	Endpoint Functions
+*/
 
-	//Parse the web proxy endpoint
-	webProxyEndpoint := domain
-	if !strings.HasPrefix("http://", domain) && !strings.HasPrefix("https://", domain) {
-		//TLS is not hardcoded in proxy target domain
-		if endpoint.RequireTLS {
-			webProxyEndpoint = "https://" + webProxyEndpoint
+// Get virtual directory handler from given URI
+func (ep *ProxyEndpoint) GetVirtualDirectoryHandlerFromRequestURI(requestURI string) *VirtualDirectoryEndpoint {
+	for _, vdir := range ep.VirtualDirectories {
+		if strings.HasPrefix(requestURI, vdir.MatchingPath) {
+			return vdir
+		}
+	}
+	return nil
+}
+
+// Get virtual directory handler by matching path (exact match required)
+func (ep *ProxyEndpoint) GetVirtualDirectoryRuleByMatchingPath(matchingPath string) *VirtualDirectoryEndpoint {
+	for _, vdir := range ep.VirtualDirectories {
+		if vdir.MatchingPath == matchingPath {
+			return vdir
+		}
+	}
+	return nil
+}
+
+// Delete a vdir rule by its matching path
+func (ep *ProxyEndpoint) RemoveVirtualDirectoryRuleByMatchingPath(matchingPath string) error {
+	entryFound := false
+	newVirtualDirectoryList := []*VirtualDirectoryEndpoint{}
+	for _, vdir := range ep.VirtualDirectories {
+		if vdir.MatchingPath == matchingPath {
+			entryFound = true
 		} else {
-			webProxyEndpoint = "http://" + webProxyEndpoint
+			newVirtualDirectoryList = append(newVirtualDirectoryList, vdir)
 		}
 	}
 
-	//Create a new proxy agent for this root
-	path, err := url.Parse(webProxyEndpoint)
+	if entryFound {
+		//Update the list of vdirs
+		ep.VirtualDirectories = newVirtualDirectoryList
+		return nil
+	}
+	return errors.New("target virtual directory routing rule not found")
+}
+
+// Delete a vdir rule by its matching path
+func (ep *ProxyEndpoint) AddVirtualDirectoryRule(vdir *VirtualDirectoryEndpoint) (*ProxyEndpoint, error) {
+	//Check for matching path duplicate
+	if ep.GetVirtualDirectoryRuleByMatchingPath(vdir.MatchingPath) != nil {
+		return nil, errors.New("rule with same matching path already exists")
+	}
+
+	//Append it to the list of virtual directory
+	ep.VirtualDirectories = append(ep.VirtualDirectories, vdir)
+
+	//Prepare to replace the current routing rule
+	parentRouter := ep.parent
+	readyRoutingRule, err := parentRouter.PrepareProxyRoute(ep)
 	if err != nil {
 		return nil, err
 	}
 
-	//Create the proxy routing handler
-	proxy := dpcore.NewDynamicProxyCore(path, "", endpoint.SkipCertValidations)
-	endpoint.proxy = proxy
-	endpoint.parent = router
-
-	return endpoint, nil
-}
-
-// Add Proxy Route to current runtime. Call to PrepareProxyRoute before adding to runtime
-func (router *Router) AddProxyRouteToRuntime(endpoint *ProxyEndpoint) error {
-	if endpoint.proxy == nil {
-		//This endpoint is not prepared
-		return errors.New("proxy endpoint not ready. Use PrepareProxyRoute before adding to runtime")
+	if ep.ProxyType == ProxyType_Root {
+		parentRouter.Root = readyRoutingRule
+	} else if ep.ProxyType == ProxyType_Host {
+		ep.Remove()
+		parentRouter.AddProxyRouteToRuntime(readyRoutingRule)
+	} else {
+		return nil, errors.New("unsupported proxy type")
 	}
-	// Push record into running subdomain endpoints
-	router.ProxyEndpoints.Store(endpoint.RootOrMatchingDomain, endpoint)
-	return nil
+
+	return readyRoutingRule, nil
 }
 
-// Set given Proxy Route as Root. Call to PrepareProxyRoute before adding to runtime
-func (router *Router) SetProxyRouteAsRoot(endpoint *ProxyEndpoint) error {
-	if endpoint.proxy == nil {
-		//This endpoint is not prepared
-		return errors.New("proxy endpoint not ready. Use PrepareProxyRoute before adding to runtime")
-	}
-	// Push record into running root endpoints
-	router.Root = endpoint
-	return nil
+// Create a deep clone object of the proxy endpoint
+// Note the returned object is not activated. Call to prepare function before pushing into runtime
+func (ep *ProxyEndpoint) Clone() *ProxyEndpoint {
+	clonedProxyEndpoint := ProxyEndpoint{}
+	js, _ := json.Marshal(ep)
+	json.Unmarshal(js, &clonedProxyEndpoint)
+	return &clonedProxyEndpoint
 }

src/mod/dynamicproxy/proxyRequestHandler.go

@@ -129,8 +129,8 @@ func (h *ProxyHandler) hostRequest(w http.ResponseWriter, r *http.Request, targe
 }
 
 // Handle vdir type request
-func (h *ProxyHandler) vdirRequest(w http.ResponseWriter, r *http.Request, target *ProxyEndpoint) {
-	rewriteURL := h.Parent.rewriteURL(target.RootOrMatchingDomain, r.RequestURI)
+func (h *ProxyHandler) vdirRequest(w http.ResponseWriter, r *http.Request, target *VirtualDirectoryEndpoint) {
+	rewriteURL := h.Parent.rewriteURL(target.MatchingPath, r.RequestURI)
 	r.URL, _ = url.Parse(rewriteURL)
 
 	r.Header.Set("X-Forwarded-Host", r.Host)
@@ -164,7 +164,7 @@ func (h *ProxyHandler) vdirRequest(w http.ResponseWriter, r *http.Request, targe
 		ProxyDomain:  target.Domain,
 		OriginalHost: originalHostHeader,
 		UseTLS:       target.RequireTLS,
-		PathPrefix:   target.RootOrMatchingDomain,
+		PathPrefix:   target.MatchingPath,
 	})
 
 	var dnsError *net.DNSError

src/mod/dynamicproxy/router.go

@@ -0,0 +1,99 @@
+package dynamicproxy
+
+import (
+	"errors"
+	"net/url"
+	"strings"
+
+	"imuslab.com/zoraxy/mod/dynamicproxy/dpcore"
+)
+
+/*
+	Dynamic Proxy Router Functions
+
+	This script handle the proxy rules router spawning
+	and preparation
+*/
+
+// Prepare proxy route generate a proxy handler service object for your endpoint
+func (router *Router) PrepareProxyRoute(endpoint *ProxyEndpoint) (*ProxyEndpoint, error) {
+	//Filter the tailing slash if any
+	domain := endpoint.Domain
+	if domain[len(domain)-1:] == "/" {
+		domain = domain[:len(domain)-1]
+	}
+	endpoint.Domain = domain
+
+	//Parse the web proxy endpoint
+	webProxyEndpoint := domain
+	if !strings.HasPrefix("http://", domain) && !strings.HasPrefix("https://", domain) {
+		//TLS is not hardcoded in proxy target domain
+		if endpoint.RequireTLS {
+			webProxyEndpoint = "https://" + webProxyEndpoint
+		} else {
+			webProxyEndpoint = "http://" + webProxyEndpoint
+		}
+	}
+
+	//Create a new proxy agent for this root
+	path, err := url.Parse(webProxyEndpoint)
+	if err != nil {
+		return nil, err
+	}
+
+	//Create the proxy routing handler
+	proxy := dpcore.NewDynamicProxyCore(path, "", endpoint.SkipCertValidations)
+	endpoint.proxy = proxy
+	endpoint.parent = router
+
+	//Prepare proxy routing hjandler for each of the virtual directories
+	for _, vdir := range endpoint.VirtualDirectories {
+		domain := vdir.Domain
+		if domain[len(domain)-1:] == "/" {
+			domain = domain[:len(domain)-1]
+		}
+
+		//Parse the web proxy endpoint
+		webProxyEndpoint = domain
+		if !strings.HasPrefix("http://", domain) && !strings.HasPrefix("https://", domain) {
+			//TLS is not hardcoded in proxy target domain
+			if vdir.RequireTLS {
+				webProxyEndpoint = "https://" + webProxyEndpoint
+			} else {
+				webProxyEndpoint = "http://" + webProxyEndpoint
+			}
+		}
+
+		path, err := url.Parse(webProxyEndpoint)
+		if err != nil {
+			return nil, err
+		}
+
+		proxy := dpcore.NewDynamicProxyCore(path, vdir.MatchingPath, vdir.SkipCertValidations)
+		vdir.proxy = proxy
+	}
+
+	return endpoint, nil
+}
+
+// Add Proxy Route to current runtime. Call to PrepareProxyRoute before adding to runtime
+func (router *Router) AddProxyRouteToRuntime(endpoint *ProxyEndpoint) error {
+	if endpoint.proxy == nil {
+		//This endpoint is not prepared
+		return errors.New("proxy endpoint not ready. Use PrepareProxyRoute before adding to runtime")
+	}
+	// Push record into running subdomain endpoints
+	router.ProxyEndpoints.Store(endpoint.RootOrMatchingDomain, endpoint)
+	return nil
+}
+
+// Set given Proxy Route as Root. Call to PrepareProxyRoute before adding to runtime
+func (router *Router) SetProxyRouteAsRoot(endpoint *ProxyEndpoint) error {
+	if endpoint.proxy == nil {
+		//This endpoint is not prepared
+		return errors.New("proxy endpoint not ready. Use PrepareProxyRoute before adding to runtime")
+	}
+	// Push record into running root endpoints
+	router.Root = endpoint
+	return nil
+}

src/mod/dynamicproxy/typedef.go

@@ -68,10 +68,21 @@ type BasicAuthExceptionRule struct {
 	PathPrefix string
 }
 
+// A Virtual Directory endpoint, provide a subset of ProxyEndpoint for better
+// program structure than directly using ProxyEndpoint
+type VirtualDirectoryEndpoint struct {
+	MatchingPath        string               //Matching prefix of the request path, also act as key
+	Domain              string               //Domain or IP to proxy to
+	RequireTLS          bool                 //Target domain require TLS
+	SkipCertValidations bool                 //Set to true to accept self signed certs
+	Disabled            bool                 //If the rule is enabled
+	proxy               *dpcore.ReverseProxy `json:"-"`
+}
+
 // A proxy endpoint record, a general interface for handling inbound routing
 type ProxyEndpoint struct {
 	ProxyType            int    //The type of this proxy, see const def
-	RootOrMatchingDomain string //Root for vdir or Matching domain for subd, also act as key
+	RootOrMatchingDomain string //Matching domain for host, also act as key
 	Domain               string //Domain or IP to proxy to
 
 	//TLS/SSL Related
@@ -80,7 +91,7 @@ type ProxyEndpoint struct {
 	SkipCertValidations bool //Set to true to accept self signed certs
 
 	//Virtual Directories
-	VirtualDirectories []*ProxyEndpoint
+	VirtualDirectories []*VirtualDirectoryEndpoint
 
 	//Authentication
 	RequireBasicAuth        bool                      //Set to true to request basic auth before proxy
@@ -91,6 +102,7 @@ type ProxyEndpoint struct {
 	DefaultSiteOption int    //Fallback routing logic options
 	DefaultSiteValue  string //Fallback routing target, optional
 
+	Disabled bool //If the rule is disabled
 	//Internal Logic Elements
 	parent *Router
 	proxy  *dpcore.ReverseProxy `json:"-"`

src/reverseproxy.go

@@ -2,7 +2,6 @@ package main
 
 import (
 	"encoding/json"
-	"fmt"
 	"net/http"
 	"path/filepath"
 	"sort"
@@ -251,7 +250,7 @@ func ReverseProxyHandleAddEndpoint(w http.ResponseWriter, r *http.Request) {
 			BypassGlobalTLS:     useBypassGlobalTLS,
 			SkipCertValidations: skipTlsValidation,
 			//VDir
-			VirtualDirectories: []*dynamicproxy.ProxyEndpoint{},
+			VirtualDirectories: []*dynamicproxy.VirtualDirectoryEndpoint{},
 			//Auth
 			RequireBasicAuth:        requireBasicAuth,
 			BasicAuthCredentials:    basicAuthCredentials,
@@ -428,7 +427,6 @@ func DeleteProxyEndpoint(w http.ResponseWriter, r *http.Request) {
 	}
 
 	//Remove the config from file
-	fmt.Println(ep)
 	err = RemoveReverseProxyConfig(ep)
 	if err != nil {
 		utils.SendErrorResponse(w, err.Error())

src/vdir.go

@@ -0,0 +1,290 @@
+package main
+
+/*
+	Vdir.go
+
+	This script handle virtual directory functions
+	in global scopes
+
+	Author: tobychui
+*/
+
+import (
+	"encoding/json"
+	"net/http"
+	"strings"
+
+	"imuslab.com/zoraxy/mod/dynamicproxy"
+	"imuslab.com/zoraxy/mod/utils"
+)
+
+// List the Virtual directory under given proxy rule
+func ReverseProxyListVdir(w http.ResponseWriter, r *http.Request) {
+	eptype, err := utils.PostPara(r, "type") //Support root and host
+	if err != nil {
+		utils.SendErrorResponse(w, "type not defined")
+		return
+	}
+
+	var targetEndpoint *dynamicproxy.ProxyEndpoint
+	if eptype == "host" {
+		endpoint, err := utils.PostPara(r, "ep") //Support root and host
+		if err != nil {
+			utils.SendErrorResponse(w, "endpoint not defined")
+			return
+		}
+
+		targetEndpoint, err = dynamicProxyRouter.LoadProxy(endpoint)
+		if err != nil {
+			utils.SendErrorResponse(w, "target endpoint not found")
+			return
+		}
+	} else if eptype == "root" {
+		targetEndpoint = dynamicProxyRouter.Root
+	} else {
+		utils.SendErrorResponse(w, "invalid type given")
+		return
+	}
+
+	//Parse result to json
+	vdirs := targetEndpoint.VirtualDirectories
+	if targetEndpoint.VirtualDirectories == nil {
+		//Avoid returning null to front-end
+		vdirs = []*dynamicproxy.VirtualDirectoryEndpoint{}
+	}
+	js, _ := json.Marshal(vdirs)
+	utils.SendJSONResponse(w, string(js))
+}
+
+// Add Virtual Directory to a host
+func ReverseProxyAddVdir(w http.ResponseWriter, r *http.Request) {
+	eptype, err := utils.PostPara(r, "type") //Support root and host
+	if err != nil {
+		utils.SendErrorResponse(w, "type not defined")
+		return
+	}
+
+	matchingPath, err := utils.PostPara(r, "path")
+	if err != nil {
+		utils.SendErrorResponse(w, "matching path not defined")
+		return
+	}
+
+	//Must start with /
+	if !strings.HasPrefix(matchingPath, "/") {
+		matchingPath = "/" + matchingPath
+	}
+
+	domain, err := utils.PostPara(r, "domain")
+	if err != nil {
+		utils.SendErrorResponse(w, "target domain not defined")
+		return
+	}
+
+	reqTLSStr, err := utils.PostPara(r, "reqTLS")
+	if err != nil {
+		//Assume false
+		reqTLSStr = "false"
+	}
+	reqTLS := (reqTLSStr == "true")
+
+	skipValidStr, err := utils.PostPara(r, "skipValid")
+	if err != nil {
+		//Assume false
+		skipValidStr = "false"
+	}
+
+	skipValid := (skipValidStr == "true")
+
+	//Load the target proxy endpoint from runtime
+	var targetProxyEndpoint *dynamicproxy.ProxyEndpoint
+	if eptype == "root" {
+		//Check if root is running at reverse proxy mode
+		if dynamicProxyRouter.Root.DefaultSiteOption != dynamicproxy.DefaultSite_ReverseProxy {
+			utils.SendErrorResponse(w, "virtual directory can only be added to root router under proxy mode")
+			return
+		}
+		targetProxyEndpoint = dynamicProxyRouter.Root
+	} else if eptype == "host" {
+		endpointID, err := utils.PostPara(r, "endpoint")
+		if err != nil {
+			utils.SendErrorResponse(w, "endpoint not defined")
+			return
+		}
+
+		loadedEndpoint, err := dynamicProxyRouter.LoadProxy(endpointID)
+		if err != nil {
+			utils.SendErrorResponse(w, "selected proxy host not exists")
+			return
+		}
+
+		targetProxyEndpoint = loadedEndpoint
+	} else {
+		utils.SendErrorResponse(w, "invalid proxy type given")
+		return
+	}
+
+	// Create a virtual directory entry base on the above info
+	newVirtualDirectoryRouter := dynamicproxy.VirtualDirectoryEndpoint{
+		MatchingPath:        matchingPath,
+		Domain:              domain,
+		RequireTLS:          reqTLS,
+		SkipCertValidations: skipValid,
+	}
+
+	//Add Virtual Directory Rule to this Proxy Endpoint
+	activatedProxyEndpoint, err := targetProxyEndpoint.AddVirtualDirectoryRule(&newVirtualDirectoryRouter)
+	if err != nil {
+		utils.SendErrorResponse(w, err.Error())
+		return
+	}
+
+	//Save it to file
+	SaveReverseProxyConfig(activatedProxyEndpoint)
+
+	// Update uptime monitor
+	UpdateUptimeMonitorTargets()
+	utils.SendOK(w)
+}
+
+func ReverseProxyDeleteVdir(w http.ResponseWriter, r *http.Request) {
+	eptype, err := utils.PostPara(r, "type") //Support root and host
+	if err != nil {
+		utils.SendErrorResponse(w, "type not defined")
+		return
+	}
+
+	vdir, err := utils.PostPara(r, "vdir")
+	if err != nil {
+		utils.SendErrorResponse(w, "vdir matching key not defined")
+		return
+	}
+
+	var targetEndpoint *dynamicproxy.ProxyEndpoint
+	if eptype == "root" {
+		targetEndpoint = dynamicProxyRouter.Root
+	} else if eptype == "host" {
+		//Proxy rule
+		matchingPath, err := utils.PostPara(r, "path")
+		if err != nil {
+			utils.SendErrorResponse(w, "matching path not defined")
+			return
+		}
+
+		ept, err := dynamicProxyRouter.LoadProxy(matchingPath)
+		if err != nil {
+			utils.SendErrorResponse(w, "target proxy rule not found")
+			return
+		}
+
+		targetEndpoint = ept
+	} else {
+		utils.SendErrorResponse(w, "invalid endpoint type")
+		return
+	}
+
+	//Delete the Vdir from endpoint
+	err = targetEndpoint.RemoveVirtualDirectoryRuleByMatchingPath(vdir)
+	if err != nil {
+		utils.SendErrorResponse(w, err.Error())
+		return
+	}
+
+	err = SaveReverseProxyConfig(targetEndpoint)
+	if err != nil {
+		SystemWideLogger.PrintAndLog("Config", "Fail to write vdir rules update to config file", err)
+		utils.SendErrorResponse(w, "unable to write changes to file")
+		return
+	}
+
+	utils.SendOK(w)
+}
+
+// Handle update of reverse proxy vdir rules
+func ReverseProxyEditVdir(w http.ResponseWriter, r *http.Request) {
+	eptype, err := utils.PostPara(r, "type") //Support root and host
+	if err != nil {
+		utils.SendErrorResponse(w, "type not defined")
+		return
+	}
+
+	vdir, err := utils.PostPara(r, "vdir")
+	if err != nil {
+		utils.SendErrorResponse(w, "vdir matching key not defined")
+		return
+	}
+
+	domain, err := utils.PostPara(r, "domain")
+	if err != nil {
+		utils.SendErrorResponse(w, "target domain not defined")
+		return
+	}
+
+	reqTLSStr, err := utils.PostPara(r, "reqTLS")
+	if err != nil {
+		//Assume false
+		reqTLSStr = "false"
+	}
+	reqTLS := (reqTLSStr == "true")
+
+	skipValidStr, err := utils.PostPara(r, "skipValid")
+	if err != nil {
+		//Assume false
+		skipValidStr = "false"
+	}
+
+	skipValid := (skipValidStr == "true")
+
+	var targetEndpoint *dynamicproxy.ProxyEndpoint
+	if eptype == "root" {
+		targetEndpoint = dynamicProxyRouter.Root
+
+	} else if eptype == "host" {
+		//Proxy rule
+		matchingPath, err := utils.PostPara(r, "path")
+		if err != nil {
+			utils.SendErrorResponse(w, "matching path not defined")
+			return
+		}
+
+		ept, err := dynamicProxyRouter.LoadProxy(matchingPath)
+		if err != nil {
+			utils.SendErrorResponse(w, "target proxy rule not found")
+			return
+		}
+
+		targetEndpoint = ept
+	} else {
+		utils.SendErrorResponse(w, "invalid endpoint type given")
+		return
+	}
+
+	//Check if the target vdir exists
+	if targetEndpoint.GetVirtualDirectoryRuleByMatchingPath(vdir) == nil {
+		utils.SendErrorResponse(w, "target virtual directory rule not exists")
+		return
+	}
+
+	//Overwrite the target endpoint
+	newVdirRule := dynamicproxy.VirtualDirectoryEndpoint{
+		MatchingPath:        vdir,
+		Domain:              domain,
+		RequireTLS:          reqTLS,
+		SkipCertValidations: skipValid,
+		Disabled:            false,
+	}
+
+	targetEndpoint.RemoveVirtualDirectoryRuleByMatchingPath(vdir)
+	activatedProxyEndpoint, err := targetEndpoint.AddVirtualDirectoryRule(&newVdirRule)
+	if err != nil {
+		utils.SendErrorResponse(w, err.Error())
+		return
+	}
+
+	//Save changes to file
+	SaveReverseProxyConfig(activatedProxyEndpoint)
+
+	UpdateUptimeMonitorTargets()
+
+	utils.SendOK(w)
+}

src/web/components/cert.html

@@ -16,7 +16,7 @@
     
     <div class="ui divider"></div>
     <h4>Default Certificates</h4>
-        <small>When there are no matching certificate for the requested server name, reverse proxy router will always fallback to this one.<br>Note that you need both of them uploaded for it to fallback properly</small></p>
+        <p>When there are no matching certificate for the requested server name, reverse proxy router will always fallback to this one.<br>Note that you need both of them uploaded for it to fallback properly</p>
         <table class="ui very basic unstackable celled table">
             <thead>
                 <tr><th class="no-sort">Key Type</th>

src/web/components/httprp.html

@@ -0,0 +1,235 @@
+<div class="standardContainer">
+    <div class="ui basic segment">
+        <h2>HTTP Proxy</h2>
+        <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
+    </div>
+    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em; min-width: 400px;">
+        <table class="ui celled sortable unstackable basic compact table">
+            <thead>
+                <tr>
+                    <th>Host</th>
+                    <th>Destination</th>
+                    <!-- <th>Virtual Directory</th> -->
+                    <th>Basic Auth</th>
+                    <th class="no-sort" style="min-width: 7.2em;">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="httpProxyList">
+            
+            </tbody>
+        </table>
+    </div>
+    <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
+    <br><br>
+</div>
+
+<script>
+    function listProxyEndpoints(){
+        $.get("/api/proxy/list?type=host", function(data){
+            $("#httpProxyList").html(``);
+            if (data.error !== undefined){
+                    $("#httpProxyList").append(`<tr>
+                    <td data-label="" colspan="4"><i class="remove icon"></i> ${data.error}</td>
+                </tr>`);
+            }else if (data.length == 0){
+                $("#httpProxyList").append(`<tr>
+                    <td data-label="" colspan="4"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
+                </tr>`);
+            }else{
+                data.forEach(subd => {
+                    let tlsIcon = "";
+                    let subdData = encodeURIComponent(JSON.stringify(subd));
+                    if (subd.RequireTLS){
+                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
+                        if (subd.SkipCertValidations){
+                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
+                        }
+                    }
+
+                    let inboundTlsIcon = "";
+                    if ($("#tls").checkbox("is checked")){
+                        inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
+                        if (subd.BypassGlobalTLS){
+                            inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
+                        }
+                    }else{
+                        inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
+                    }
+                    
+                    //Build the virtual directory list
+                    var vdList = `<div class="ui list">`;
+                    subd.VirtualDirectories.forEach(vdir => {
+                        vdList += `<div class="item">${vdir.MatchingPath} <i class="green angle double right icon"></i> ${vdir.Domain}</div>`;
+                    });
+                    vdList += `</div>`;
+
+                    if (subd.VirtualDirectories.length == 0){
+                        vdList = `<i class="ui green circle check icon"></i> No Virtual Directory Rule`;
+                    }
+
+                    $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
+                        <td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
+                        <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
+                        <td data-label="" editable="true" datatype="basicauth">${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
+                        <td class="center aligned" editable="true" datatype="action" data-label="">
+                            <button class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
+                            <button class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button>
+                        </td>
+                    </tr>`);
+                });
+            }
+        });
+    }
+
+    
+    /*
+        Inline editor for httprp.html
+    */
+
+    function editEndpoint(uuid) {
+        uuid = uuid.hexDecode();
+        var row = $('tr[eptuuid="' + uuid + '"]');
+        var columns = row.find('td[data-label]');
+        var payload = $(row).attr("payload");
+        payload = JSON.parse(decodeURIComponent(payload));
+        console.log(payload);
+        //console.log(payload);
+        columns.each(function(index) {
+            var column = $(this);
+            var oldValue = column.text().trim();
+
+            if ($(this).attr("editable") == "false"){
+                //This col do not allow edit. Skip
+                return;
+            }
+
+            // Create an input element based on the column content
+            var input;
+            var datatype = $(this).attr("datatype");
+            if (datatype == "domain"){
+                let domain = payload.Domain;
+                //Target require TLS for proxying
+                let tls = payload.RequireTLS;
+                if (tls){
+                    tls = "checked";
+                }else{
+                    tls = "";
+                }
+
+                //Require TLS validation
+                let skipTLSValidation = payload.SkipCertValidations;
+                let checkstate = "";
+                if (skipTLSValidation){
+                    checkstate = "checked";
+                }
+
+                input = `
+                    <div class="ui mini fluid input">
+                        <input type="text" class="Domain" value="${domain}">
+                    </div>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="RequireTLS" ${tls}>
+                        <label>Require TLS<br>
+                            <small>Proxy target require HTTPS connection</small></label>
+                    </div><br>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="SkipCertValidations" ${checkstate}>
+                        <label>Skip Verification<br>
+                        <small>Check this if proxy target is using self signed certificates</small></label>
+                    </div>
+                `;
+                column.empty().append(input);
+            }else if (datatype == "basicauth"){
+                let requireBasicAuth = payload.RequireBasicAuth;
+                let checkstate = "";
+                if (requireBasicAuth){
+                    checkstate = "checked";
+                }
+                column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
+                    <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
+                    <label>Require Basic Auth</label>
+                    </div>
+                    <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');">Edit Credentials</button>`);
+
+            }else if (datatype == 'action'){
+                column.empty().append(`
+                <button title="Save" onclick="saveProxyInlineEdit('${uuid.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
+                <button title="Cancel" onclick="exitProxyInlineEdit();" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui remove icon"></i></button>
+                
+                `);
+            }else if (datatype == "inbound"){
+                let originalContent = $(column).html();
+                column.empty().append(`${originalContent}
+                    <div class="ui divider"></div>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="BypassGlobalTLS" ${payload.BypassGlobalTLS?"checked":""}>
+                        <label>Allow plain HTTP access<br>
+                            <small>Allow inbound connections without TLS/SSL</small></label>
+                    </div><br>
+                `);
+            }else{
+                //Unknown field. Leave it untouched
+            }
+        });
+
+        $("#httpProxyList").find(".editBtn").addClass("disabled");
+    }
+
+    function exitProxyInlineEdit(){
+        listProxyEndpoints();
+        $("#httpProxyList").find(".editBtn").removeClass("disabled");
+    }
+
+    function saveProxyInlineEdit(uuid){
+        uuid = uuid.hexDecode();
+        var row = $('tr[eptuuid="' + uuid + '"]');
+        if (row.length == 0){
+            return;
+        }
+        
+        var epttype = "host";
+        let newDomain =  $(row).find(".Domain").val();
+        let requireTLS = $(row).find(".RequireTLS")[0].checked;
+        let skipCertValidations = $(row).find(".SkipCertValidations")[0].checked;
+        let requireBasicAuth = $(row).find(".RequireBasicAuth")[0].checked;
+        let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
+
+        console.log(newDomain, requireTLS, skipCertValidations, requireBasicAuth)
+
+        $.ajax({
+            url: "/api/proxy/edit",
+            method: "POST",
+            data: {
+                "type": epttype,
+                "rootname": uuid,
+                "ep":newDomain,
+                "bpgtls": bypassGlobalTLS,
+                "tls" :requireTLS,
+                "tlsval": skipCertValidations,
+                "bauth" :requireBasicAuth,
+            },
+            success: function(data){
+                if (data.error !== undefined){
+                    msgbox(data.error, false, 6000);
+                }else{
+                    msgbox("Proxy endpoint updated");
+                    listProxyEndpoints();
+                }
+            }
+        })
+    }
+    
+    function editBasicAuthCredentials(uuid){
+        let payload = encodeURIComponent(JSON.stringify({
+            ept: "host",
+            ep: uuid
+        }));
+        showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
+    }
+    
+
+    //Bind on tab switch events
+    tabSwitchEventBind["httprp"] = function(){
+        listProxyEndpoints();
+    }
+</script>

src/web/components/redirection.html

@@ -72,25 +72,10 @@
           <i class="ui green checkmark icon"></i> Redirection Rules Added
         </div>
         <br><br>
-
-        <div class="advancezone ui basic segment">
-          <div class="ui accordion advanceSettings">
-            <div class="title">
-              <i class="dropdown icon"></i>
-              Advance Options
-            </div>
-            <div class="content">
-              <p>If you need custom header, content or status code other than basic redirects, you can use the advance path rules editor.</p>
-              <button class="ui black basic button" onclick="createAdvanceRules();"><i class="ui black external icon"></i> Open Advance Rules Editor</button>
-            </div>
-          </div>
-        </div>
-
     </div>
   </div>
 </div>
 <script>
-    $(".advanceSettings").accordion();
     
   /*
     Redirection functions
@@ -151,10 +136,6 @@
         }
     }
 
-    function createAdvanceRules(){
-      showSideWrapper("snippet/advancePathRules.html?t=" + Date.now(), true);
-    }
-
     function initRedirectionRuleList(){
         $("#redirectionRuleList").html("");
         $.get("/api/redirect/list", function(data){
@@ -169,7 +150,7 @@
             });
 
             if (data.length == 0){
-              $("#redirectionRuleList").append(`<tr colspan="4"><td><i class="checkmark icon"></i> No redirection rule</td></tr>`);
+              $("#redirectionRuleList").append(`<tr colspan="4"><td><i class="green check circle icon"></i> No redirection rule</td></tr>`);
             }
             
         });

src/web/components/rproot.html

@@ -84,6 +84,7 @@
         let selectedDefaultSite = $('input[name="defaultsiteOption"]:checked').val();
 
         $(".defaultSiteOptionDetails").hide();
+        $("#useRootProxyRouterForVdir").parent().addClass("disabled");
         if (selectedDefaultSite == "webserver"){
             //Use build in web server as target
             let staticWebServerURL = "127.0.0.1:" + $("#webserv_listenPort").val();
@@ -91,11 +92,13 @@
             $("#proxyRoot").parent().addClass("disabled");
             $("#rootReqTLS").parent().checkbox("set unchecked");
             $("#rootReqTLS").parent().addClass("disabled");
+            $("#useRootProxyRouterForVdir").parent().removeClass("disabled");
             currentDefaultSiteOption = 0;
         }else if (selectedDefaultSite == "proxy"){
             $("#defaultSiteProxyOptions").show();
             $("#rootReqTLS").parent().removeClass("disabled");
             $("#proxyRoot").parent().removeClass("disabled");
+            $("#useRootProxyRouterForVdir").parent().removeClass("disabled");
             currentDefaultSiteOption = 1;
         }else if (selectedDefaultSite == "redirect"){
             $("#defaultSiteRedirectOptions").show();

src/web/components/rules.html

@@ -87,7 +87,7 @@
                         </div>
                     </div>
                     <br>
-                    <button class="ui basic button" onclick="newProxyEndpoint();"><i class="blue add icon"></i> Create Endpoint</button>
+                    <button class="ui basic button" onclick="newProxyEndpoint();"><i class="green add icon"></i> Create Endpoint</button>
                     <br><br>
                 </div>
             </div>
@@ -117,6 +117,8 @@
 <script>
     $("#advanceProxyRules").accordion();
 
+   
+
     //New Proxy Endpoint
     function newProxyEndpoint(){
         var rootname = $("#rootname").val();
@@ -157,9 +159,6 @@
                 if (data.error != undefined){
                     msgbox(data.error, false, 5000);
                 }else{
-                    //OK
-                   
-
                     //Clear old data
                     $("#rootname").val("");
                     $("#proxyDomain").val("");
@@ -193,13 +192,15 @@
     }
 
     //Generic functions for delete rp endpoints 
-    function deleteEndpoint(ptype, epoint){
+    function deleteEndpoint(epoint){
+        epoint = decodeURIComponent(epoint);
         if (confirm("Confirm remove proxy for :" + epoint + "?")){
             $.ajax({
                 url: "/api/proxy/del",
                 data: {ep: epoint, },
                 success: function(){
                     listProxyEndpoints();
+                    msgbox("Proxy Rule Deleted", true);
                 }
             })
         }
@@ -299,149 +300,6 @@
         updateTable();
     }
 
-    /*
-        Inline editor for subd.html and vdir.html
-    */
-
-    function editEndpoint(endpointType, uuid) {
-        var row = $('tr[eptuuid="' + uuid + '"]');
-        var columns = row.find('td[data-label]');
-        var payload = $(row).attr("payload");
-        payload = JSON.parse(decodeURIComponent(payload));
-        console.log(payload);
-        //console.log(payload);
-        columns.each(function(index) {
-            var column = $(this);
-            var oldValue = column.text().trim();
-
-            if ($(this).attr("editable") == "false"){
-                //This col do not allow edit. Skip
-                return;
-            }
-
-            // Create an input element based on the column content
-            var input;
-            var datatype = $(this).attr("datatype");
-            if (datatype == "domain"){
-                let domain = payload.Domain;
-                //Target require TLS for proxying
-                let tls = payload.RequireTLS;
-                if (tls){
-                    tls = "checked";
-                }else{
-                    tls = "";
-                }
-
-                //Require TLS validation
-                let skipTLSValidation = payload.SkipCertValidations;
-                let checkstate = "";
-                if (skipTLSValidation){
-                    checkstate = "checked";
-                }
-
-                input = `
-                    <div class="ui mini fluid input">
-                        <input type="text" class="Domain" value="${domain}">
-                    </div>
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="RequireTLS" ${tls}>
-                        <label>Require TLS<br>
-                            <small>Proxy target require HTTPS connection</small></label>
-                    </div><br>
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="SkipCertValidations" ${checkstate}>
-                        <label>Skip Verification<br>
-                        <small>Check this if proxy target is using self signed certificates</small></label>
-                    </div>
-                `;
-                column.empty().append(input);
-            }else if (datatype == "basicauth"){
-                let requireBasicAuth = payload.RequireBasicAuth;
-                let checkstate = "";
-                if (requireBasicAuth){
-                    checkstate = "checked";
-                }
-                column.empty().append(`<div class="ui checkbox" style="margin-top: 0.4em;">
-                    <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
-                    <label>Require Basic Auth</label>
-                    </div>
-                    <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${endpointType}','${uuid}');"><i class="ui blue lock icon"></i> Edit Settings</button>`);
-
-            }else if (datatype == 'action'){
-                column.empty().append(`
-                <button title="Cancel" onclick="exitProxyInlineEdit('${endpointType}');" class="ui basic small circular icon button"><i class="ui remove icon"></i></button>
-                <button title="Save" onclick="saveProxyInlineEdit('${uuid}');" class="ui basic small circular icon button"><i class="ui green save icon"></i></button>
-                `);
-            }else if (datatype == "inbound"){
-                let originalContent = $(column).html();
-                column.empty().append(`${originalContent}
-                    <div class="ui divider"></div>
-                    <div class="ui checkbox" style="margin-top: 0.4em;">
-                        <input type="checkbox" class="BypassGlobalTLS" ${payload.BypassGlobalTLS?"checked":""}>
-                        <label>Allow plain HTTP access<br>
-                            <small>Allow inbound connections without TLS/SSL</small></label>
-                    </div><br>
-                `);
-            }else{
-                //Unknown field. Leave it untouched
-            }
-        });
-
-        $("#" + endpointType).find(".editBtn").addClass("disabled");
-    }
-
-    function exitProxyInlineEdit(endpointType){
-        listProxyEndpoints();
-        $("#" + endpointType).find(".editBtn").removeClass("disabled");
-    }
-
-    function saveProxyInlineEdit(uuid){
-        var row = $('tr[eptuuid="' + uuid + '"]');
-        if (row.length == 0){
-            return;
-        }
-        
-        var epttype = "host";
-        let newDomain =  $(row).find(".Domain").val();
-        let requireTLS = $(row).find(".RequireTLS")[0].checked;
-        let skipCertValidations = $(row).find(".SkipCertValidations")[0].checked;
-        let requireBasicAuth = $(row).find(".RequireBasicAuth")[0].checked;
-        let bypassGlobalTLS = $(row).find(".BypassGlobalTLS")[0].checked;
-
-        console.log(newDomain, requireTLS, skipCertValidations, requireBasicAuth)
-
-        $.ajax({
-            url: "/api/proxy/edit",
-            method: "POST",
-            data: {
-                "type": epttype,
-                "rootname": uuid,
-                "ep":newDomain,
-                "bpgtls": bypassGlobalTLS,
-                "tls" :requireTLS,
-                "tlsval": skipCertValidations,
-                "bauth" :requireBasicAuth,
-            },
-            success: function(data){
-                if (data.error !== undefined){
-                    msgbox(data.error, false, 6000);
-                }else{
-                    msgbox("Proxy endpoint updated");
-                    listProxyEndpoints();
-                }
-            }
-        })
-    }
-    
-    function editBasicAuthCredentials(endpointType, uuid){
-        let payload = encodeURIComponent(JSON.stringify({
-            ept: endpointType,
-            ep: uuid
-        }));
-        showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
-    }
-
-
     /*
         Obtain Certificate via ACME
     */
@@ -503,4 +361,32 @@
             }
         });
     }
+
+    //Update v3.0.0
+    //Since some proxy rules now contains wildcard characters
+    //all uuid are converted to hex code before use in DOM selector
+
+    String.prototype.hexEncode = function(){
+        var hex, i;
+
+        var result = "";
+        for (i=0; i<this.length; i++) {
+            hex = this.charCodeAt(i).toString(16);
+            result += ("000"+hex).slice(-4);
+        }
+
+        return result
+    }
+
+    String.prototype.hexDecode = function(){
+        var j;
+        var hexes = this.match(/.{1,4}/g) || [];
+        var back = "";
+        for(j = 0; j<hexes.length; j++) {
+            back += String.fromCharCode(parseInt(hexes[j], 16));
+        }
+
+        return back;
+    }
+
 </script>

src/web/components/vdir.html

@@ -3,73 +3,415 @@
         <h2>Virtual Directory</h2>
         <p>A virtual directory is a consolidated view of multiple directories that provides a unified entry point for users to access disparate sources.</p>
     </div>
-    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
-        <table class="ui celled sortable unstackable compact table">
-            <thead>
-                <tr>
-                    <th>Virtual Directory</th>
-                    <th>Proxy To</th>
-                    <th>Basic Auth</th>
-                    <th class="no-sort" style="min-width: 7.2em;">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="vdirList">
-                <tr>
-                    <td data-label=""><button class="ui circular mini red basic button"><i class="remove icon"></i> Remove Proxy</button></td>
-                </tr>
-            </tbody>
-        </table>
+    <div id="currentVirtualDirectoryAttachingHost" class="ui basic segment">
+        Select a host / routing rule to start editing Virtual Directory
+    </div>  
+    <div class="ui stackable grid">
+        <div class="six wide column">
+            <h4>Select a Target Host / Site</h4>
+            <p>Attach Virtual Directory routing rule to root proxy router</p>
+            <div class="ui checkbox">
+                <input type="checkbox" id="useRootProxyRouterForVdir" onchange="handleVdirAttachTargetChange(this);">
+                <label>Root Proxy Router<br>
+                <small>Only applicable when Default Site is set to "Reverse Proxy" mode</small></label>
+            </div>
+            <div class="ui horizontal divider">OR</div>
+            <p>Create Virtual Directory routing in existing host / routing rule entries</p>
+            <div class="ui fluid search selection dropdown">
+                <input type="hidden" id="vdirBaseRoutingRule" name="vdirBaseRoutingRule" onchange="handleVdirAttachTargetChange();">
+                <i class="dropdown icon"></i>
+                <div class="default text">Select a host to edit</div>
+                <div class="menu" id="hostDomainList">
+                    
+                </div>
+            </div>
+        </div>
+        <div class="ten wide column">
+            <h4>Edit Virtual Directory Routing Rules</h4>
+            <p>The following are the list of Virtual Directories currently handled by the host router above</p>
+            <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
+                <table class="ui celled sortable basic unstackable compact table">
+                    <thead>
+                        <tr>
+                            <th>Virtual Directory</th>
+                            <th>Destination</th>
+                            <th class="no-sort" style="min-width: 7.2em;">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="vdirList">
+                        <tr>
+                            <td data-label="" colspan="3">No Selected Host</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <button class="ui icon right floated basic button" onclick="reloadVdirList();"><i class="green refresh icon"></i> Refresh</button>
+            <br><br>
+            <div class="ui divider"></div>
+            <div id="newVDSection" class="disabled section">
+                <h4>New Virtual Directory Rule</h4>
+                <form class="ui form">
+                    <div class="field">
+                        <label>Matching Path Prefix</label>
+                        <input type="text" id="virtualDirectoryPath" placeholder="/mysite/">
+                        <small>Path that follows your select host / domain, e.g. <code>/mysite/</code> as path prefix will forward all request that matches <code>mydomain.com/mysite/*</code></small>
+                    </div>
+                    <div class="field">
+                        <label>Target IP Address or Domain Name with port</label>
+                        <input type="text" id="virtualDirectoryDomain" onchange="updateVDTargetTLSState();">
+                        <small>E.g. 192.168.0.101:8000 or example.com</small>
+                    </div>
+                    <div class="field">
+                        <div class="ui checkbox">
+                            <input type="checkbox" id="vdReqTls">
+                            <label>Proxy Target require TLS Connection <br><small>(i.e. Your proxy target starts with https://)</small></label>
+                        </div>
+                    </div>
+
+                    <!-- Advance configs -->
+                    <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
+                        <div id="advanceProxyRules" class="ui fluid accordion">
+                            <div class="title">
+                            <i class="dropdown icon"></i>
+                            Advance Settings
+                            </div>
+                            <div class="content">
+                                <p></p>
+                                <div class="field">
+                                    <div class="ui checkbox">
+                                        <input type="checkbox" id="vdSkipTLSValidation">
+                                        <label>Ignore TLS/SSL Verification Error<br><small>For targets that is using self-signed, expired certificate (Not Recommended)</small></label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="ui basic button" onclick="addVdirToHost(); event.preventDefault();"><i class="green add icon"></i> Create Virtual Directory</button>
+                </form>
+            </div>
+        </div>
     </div>
-    <button class="ui icon right floated basic button" onclick="listVdirs();"><i class="green refresh icon"></i> Refresh</button>
     <br><br>
 </div>
 <script>
     //Virtual directories functions
-    function listVdirs(){
-        $.get("/api/proxy/list?type=vdir", function(data){
-            $("#vdirList").html(``);
-            if (data.error !== undefined){
-                $("#vdirList").append(`<tr>
-                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
-                </tr>`);
-            }else if (data.length == 0){
-                $("#vdirList").append(`<tr>
-                    <td data-label="" colspan="3"><i class="checkmark icon"></i> No Virtual Directory Record</td>
-                </tr>`);
+
+    //Initialize the list of hosts that can be used to attach vdirs config
+    function initVdirList(){
+        //Load the hosts into the dropdown
+        $("#hostDomainList").html("");
+        $.get("/api/proxy/list?type=host", function(data){
+            if (data.error != undefined){
+                msgbox(data.error, false);
             }else{
-                data.forEach(vdir => {
-                    let tlsIcon = "";
-                    let vdirData = encodeURIComponent(JSON.stringify(vdir));
-                    if (vdir.RequireTLS){
-                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                        if (vdir.SkipCertValidations){
-                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
-                        }
-                    }
+                if (data.length == 0){
+                    //No hosts found
+                }else{
+                    data.forEach(proxyEndpoint => {
+                        let domain = proxyEndpoint.RootOrMatchingDomain;
+                        $("#hostDomainList").append(`<div class="item" data-value="${domain}">${domain}</div>`);
+                    });
 
-                    let tlsVerificationField = "";
-                    if (vdir.RequireTLS){
-                        tlsVerificationField = !vdir.SkipCertValidations?`<i class="ui green check icon"></i>`:`<i class="ui yellow exclamation circle icon" title="TLS/SSL Verification will be skipped on this host"></i>`
-                    }else{
-                        tlsVerificationField = "N/A"
-                    }
-
-                    $("#vdirList").append(`<tr eptuuid="${vdir.RootOrMatchingDomain}" payload="${vdirData}" class="vdirEntry">
-                        <td data-label="" editable="false">${vdir.RootOrMatchingDomain}</td>
-                        <td data-label="" editable="true" datatype="domain">${vdir.Domain} ${tlsIcon}</td>
-                        <td data-label="" editable="true" datatype="basicauth">${vdir.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
-                        <td class="center aligned" editable="true" datatype="action" data-label="">
-                            <button class="ui circular mini basic icon button editBtn" onclick='editEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
-                            <button class="ui circular mini red basic icon button"  onclick='deleteEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
-                        </td>
-                    </tr>`);
-                });
+                    //Update the dropdown events
+                    $("#vdirBaseRoutingRule").parent().dropdown();
+                }
             }
         });
     }
 
+    
+    function handleVdirAttachTargetChange(targetCheckbox=undefined){
+        if (targetCheckbox != undefined && targetCheckbox.checked){
+            $("#vdirBaseRoutingRule").parent().addClass("disabled");
+
+            //Load the vdir list for root
+            loadVdirList("root");
+            $("#newVDSection").removeClass("disabled");
+        }else{
+            $("#vdirBaseRoutingRule").parent().removeClass("disabled");
+            let selectedEndpointRule = $("#vdirBaseRoutingRule").val();
+            if (selectedEndpointRule != ""){
+                loadVdirList(selectedEndpointRule);
+                $("#newVDSection").removeClass("disabled");
+            }else{
+                $("#newVDSection").addClass("disabled");
+            }
+        }
+    }
+
+    //List the Vdir of the given endpoint, use "root" for root router
+    function loadVdirList(endpoint){
+        $("#currentVirtualDirectoryAttachingHost").html(`Editing Host: ${endpoint}`);
+        let reqURL = "/api/proxy/vdir/list?type=host&ep=" + endpoint;
+        if (endpoint == "root"){
+            //Load root endpoint vdir list
+            reqURL = "/api/proxy/vdir/list?type=root";
+        }
+        
+        $.get(reqURL, function(data){
+            if (data.error != undefined){
+                msgbox(data.error, false);
+            }else{
+                $("#vdirList").html("");
+                if (data.length == 0){
+                    //No virtual directory for this host
+                    $("#vdirList").append(`<tr>
+                        <td data-label="" colspan="3"><i class="green check circle icon"></i> No Virtual Directory Routing Rule</td>
+                    </tr>`);
+                }else{
+                    //List the vdirs
+                    console.log(data);
+                    data.forEach(vdir => {
+                        if (vdir.RequireTLS){
+                            tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
+                            if (vdir.SkipCertValidations){
+                                tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
+                            }
+                        }
+
+                        let payload = JSON.stringify(vdir).hexEncode();
+
+                        $("#vdirList").append(`<tr vdirid="${vdir.MatchingPath.hexEncode()}" class="vdirEntry" payload="${payload}">
+                            <td data-label="" editable="false" >${vdir.MatchingPath}</td>
+                            <td data-label="" editable="true" datatype="domain">${vdir.Domain} ${tlsIcon}</td>
+                            <td class="center aligned" editable="true" datatype="action" data-label="">
+                                <button class="ui circular mini basic icon button editBtn" onclick='editVdir("${vdir.MatchingPath}", "${endpoint}")'><i class="edit icon"></i></button>
+                                <button class="ui circular mini red basic icon button"  onclick='deleteVdir("${vdir.MatchingPath}", "${endpoint}")'><i class="trash icon"></i></button>
+                            </td>
+                        </tr>`);
+                    })
+                }
+            }
+        });
+    }
+
+    //Check if the entered domain require TLS
+    function updateVDTargetTLSState(){
+        var targetDomain = $("#virtualDirectoryDomain").val().trim();
+        if (targetDomain != ""){
+            $.ajax({
+                url: "/api/proxy/tlscheck",
+                data: {url: targetDomain},
+                success: function(data){
+                    if (data.error != undefined){
+
+                    }else if (data == "https"){
+                        $("#vdReqTls").parent().checkbox("set checked");
+                    }else if (data == "http"){
+                        $("#vdReqTls").parent().checkbox("set unchecked");
+                    }
+                }
+            });
+        }
+    }
+
+    function reloadVdirList(){
+        if ($("#useRootProxyRouterForVdir")[0].checked){
+            loadVdirList("root");
+            return;
+        }
+        let endpoint = $("#vdirBaseRoutingRule").val().trim();
+        if (endpoint != ""){
+            loadVdirList(endpoint);
+        }
+    }
+
+    //Create a virtual directory routing rule and attach to this endpoint
+    function addVdirToHost(){
+        var matchingPath = $("#virtualDirectoryPath").val().trim();
+        var targetDomain = $("#virtualDirectoryDomain").val().trim();
+        var reqTLS = $("#vdReqTls")[0].checked;
+        var skipTLSValidation = $("#vdSkipTLSValidation")[0].checked;
+
+        //Validate the input data
+        if (matchingPath == ""){
+            $("#virtualDirectoryPath").parent().addClass('error');
+            return;
+        }else{
+            $("#virtualDirectoryPath").parent().removeClass('error');
+        }
+
+        if (targetDomain == ""){
+            $("#virtualDirectoryDomain").parent().addClass('error');
+            return;
+        }else{
+            $("#virtualDirectoryDomain").parent().removeClass('error');
+        }
+
+        //Check if we are editing host
+        let epType = "host";
+        let endpoint = "root";
+        if ($("#useRootProxyRouterForVdir")[0].checked){
+            //Editing root virtual directory
+            epType = "root";
+        }else{
+            //Editing hosts virtual directory
+            endpoint = $("#vdirBaseRoutingRule").val().trim();
+        }
+
+        //Create a virtual directory endpoint
+        $.ajax({
+            url: "/api/proxy/vdir/add",
+            method: "POST",
+            data: {
+                "type": epType,
+                "endpoint": endpoint,
+                "path": matchingPath,
+                "domain":targetDomain,
+                "reqTLS":reqTLS,
+                "skipValid":skipTLSValidation,
+            },
+            success: function(data){
+                if (data.error != undefined){
+                    msgbox(data.error, false);
+                }else{
+                    msgbox("New Virtual Directory rule added");
+                    reloadVdirList();
+                    resetVdirForm();
+                }
+            }, 
+            error: function(){
+                msgbox("Add Virtual Directory failed due to unknown reasons", false);
+            }
+        })
+        
+    }
+
+    //Reset the vdir form
+    function resetVdirForm(){
+        $("#virtualDirectoryPath").val("");
+        $("#virtualDirectoryDomain").val("");
+        $("#vdReqTls").parent().checkbox("set unchecked");
+        $("#vdSkipTLSValidation").parent().checkbox("set unchecked");
+    }
+
+    //Remove Vdir 
+    function deleteVdir(matchingPath, endpoint){
+        var epType = "host";
+        var path = $("#vdirBaseRoutingRule").val().trim();
+        if (endpoint.trim() == "root"){
+            epType = "root";
+            path = "";
+        }
+        $.ajax({
+            url: "/api/proxy/vdir/del",
+            method: "POST",
+            data: {
+                "type":epType,
+                "vdir": matchingPath,
+                "path": path
+            },
+            success: function(data){
+                if (data.error != undefined){
+                    msgbox(data.error, false);
+                }else{
+                    msgbox("Virtual Directory rule removed", true);
+                    reloadVdirList();
+                }
+            }
+        })
+    }
+
+    function editVdir(matchingPath, ept){
+        let targetDOM = $(".vdirEntry[vdirid='" + matchingPath.hexEncode() + "']") 
+        let payload = $(targetDOM).attr("payload").hexDecode();
+        payload = JSON.parse(payload);
+        console.log(payload);
+        $(targetDOM).find("td[editable='true']").each(function(){
+            let datatype = $(this).attr("datatype");
+            let column = $(this);
+
+            if (datatype == "domain"){
+                let domain = payload.Domain;
+                //Target require TLS for proxying
+                let tls = payload.RequireTLS;
+                if (tls){
+                    tls = "checked";
+                }else{
+                    tls = "";
+                }
+
+                //Require TLS validation
+                let skipTLSValidation = payload.SkipCertValidations;
+                let checkstate = "";
+                if (skipTLSValidation){
+                    checkstate = "checked";
+                }
+
+                input = `
+                    <div class="ui mini fluid input">
+                        <input type="text" class="Domain" value="${domain}">
+                    </div>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="RequireTLS" ${tls}>
+                        <label>Require TLS<br>
+                            <small>Proxy target require HTTPS connection</small></label>
+                    </div><br>
+                    <div class="ui checkbox" style="margin-top: 0.4em;">
+                        <input type="checkbox" class="SkipCertValidations" ${checkstate}>
+                        <label>Skip Verification<br>
+                        <small>Check this if proxy target is using self signed certificates</small></label>
+                    </div>
+                `;
+                column.empty().append(input);
+            }else if (datatype == 'action'){
+                column.empty().append(`
+                    <button title="Save" onclick="saveVdirInlineEdit('${payload.MatchingPath.hexEncode()}');" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui green save icon"></i></button>
+                    <button title="Cancel" onclick="exitVdirInlineEdit();" class="ui basic small icon circular button inlineEditActionBtn"><i class="ui remove icon"></i></button>
+                `);
+            }
+        }); 
+
+    }
+
+    function saveVdirInlineEdit(mathingPath){
+        mathingPath = mathingPath.hexDecode();
+
+        var epType = "host";
+        var path = $("#vdirBaseRoutingRule").val().trim();
+        if ($("#useRootProxyRouterForVdir")[0].checked){
+            epType = "root";
+            path = "";
+        }
+
+        //Load new setting from inline editor
+        let newDomain = $("#vdirList").find(".Domain").val();
+        let requireTLS = $("#vdirList").find(".RequireTLS")[0].checked;
+        let skipValidation = $("#vdirList").find(".SkipCertValidations")[0].checked;
+
+        //console.log(mathingPath, newDomain, requireTLS, skipValidation);
+
+        $.ajax({
+            url: "/api/proxy/vdir/edit",
+            method: "POST",
+            data: {
+                "type": epType,
+                "vdir": mathingPath,
+                "domain":newDomain,
+                "path":path,
+                "reqTLS":requireTLS,
+                "skipValid": skipValidation
+            },
+            success: function(data){
+                if (data.error != undefined){
+                    msgbox(data.error, false);
+                }else{
+                    msgbox("Virtual Directory rule updated", true);
+                    exitVdirInlineEdit();
+                }
+            },
+            error: function(){
+                msgbox("unknown error occured", false)
+            }
+        })
+    }
+
+    function exitVdirInlineEdit(){
+        reloadVdirList();
+    }
+
     //Bind on tab switch events
     tabSwitchEventBind["vdir"] = function(){
-        listVdirs();
+        initVdirList();
     }
 </script>

src/web/index.html

@@ -40,7 +40,7 @@
                         <i class="simplistic home icon"></i> Default Site
                     </a>
                     <div class="ui divider menudivider">Reverse Proxy</div>
-                    <a class="item" tag="subd">
+                    <a class="item" tag="httprp">
                         <i class="simplistic sitemap icon"></i> HTTP Proxy
                     </a>
                     <a class="item" tag="vdir">
@@ -101,7 +101,7 @@
                 <div id="vdir" class="functiontab" target="vdir.html"></div>
 
                 <!-- Subdomain Proxy -->
-                <div id="subd" class="functiontab" target="subd.html"></div>
+                <div id="httprp" class="functiontab" target="httprp.html"></div>
 
                 <!-- Create Rules -->
                 <div id="rules" class="functiontab" target="rules.html"></div>

src/web/main.css

@@ -464,6 +464,23 @@ body{
     }
   }
 
+/*
+  HTTP Proxy & Virtual Directory
+*/
+
+#currentVirtualDirectoryAttachingHost{
+    background: var(--theme_background); 
+    color: white;
+    border-radius: 1em;
+    font-weight: bolder;
+}
+
+.section.disabled{
+    opacity: 0.5;
+    user-select: none;
+    pointer-events: none;
+}
+
 /*
     Access Control
 */
@@ -494,11 +511,11 @@ body{
 }
 
 .tcproxConfig.running td:first-child{
-    border-left: 0.6em solid #21ba45 !important;
+    border-left: 0.6em solid #02cb59 !important;
 }
 
 .tcproxConfig.stopped td:first-child{
-    border-left: 0.6em solid #414141 !important;
+    border-left: 0.6em solid #02032a !important;
 }
 
 .tcproxConfig td:first-child .statusText{