Refactor welcome page HTML template and update welcome handler

Ehco1996 · Jan 27, 2024 · 7bccb62 · 7bccb62
1 parent dc18b61
commit 7bccb62
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 31 deletions.
diff --git a/internal/constant/constant.go b/internal/constant/constant.go
@@ -10,32 +10,6 @@ var (
 	GitBranch   string
 	GitRevision string
 	BuildTime   string
-
-	WelcomeHTML = `<!doctype html>
-	<html>
-	<head>
-		<meta charset="UTF-8">
-	</head>
-	<body>
-		<h2>ehco is a network relay tool and a typo :)</h2>
-		<hr>
-		<h3>Version: ` + Version + `</h3>
-		<h3>GitBranch: ` + GitBranch + `</h3>
-		<h3>GitRevision: ` + GitRevision + `</h3>
-		<h3>BuildTime: ` + BuildTime + `</h3>
-		<hr>
-		<p><a href="/metrics/">Metrics</a></p>
-		<p><a href="/debug/pprof/">Debug</a></p>
-		<p><a href="/clash_proxy_provider/?sub_name=<your_sub_name>">Clash Proxy Provider</a></p>
-
-		<form action="/reload/" method="post">
-			<input type="submit" value="Reload Config">
-		</form>
-		<hr>
-		<p><a href="https://github.com/Ehco1996/ehco">More information here</a></p>
-	</body>
-	</html>
-	`
 )
 
 const (
@@ -61,3 +35,116 @@ const (
 	BUFFER_POOL_SIZE = 1024      // support 512 connections
 	BUFFER_SIZE      = 20 * 1024 // 20KB the maximum packet size of shadowsocks is about 16 KiB
 )
+
+const WelcomeHTML = `
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<style>
+		body {
+			display: flex;
+			flex-direction: column;
+			align-items: center; /* Center layout */
+			font-family: Arial, sans-serif;
+			text-align: left; /* Left-aligned text */
+			padding: 2em;
+		}
+		.container {
+			width: 60%; /* Control width */
+			lex-grow: 1;
+		}
+
+		.build-info, .links {
+			margin-bottom: 30px;
+			border: 1px solid black;
+			padding: 10px;
+			list-style-type: none;
+		}
+
+		.build-info h3 {
+			margin: 10px 0;
+		}
+
+		a {
+			text-decoration: none;
+			color: blue;
+		}
+
+		#reloadButton {
+			margin-top: 30px;
+			padding: 10px 20px;
+			text-align: center;
+		}
+		.btn-container {
+			text-align: center;
+			width: 100%;
+		}
+		footer {
+			text-align: center;
+			margin-top: 20px;
+		}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<h1>ehco is a network relay tool and a typo :)</h1>
+		<div class="build-info">
+			<h2>Build Info:</h2>
+			<h3>Version: {{.Version}}</h3>
+			<h3>GitBranch: {{.GitBranch}}</h3>
+			<h3>GitRevision: {{.GitRevision}}</h3>
+			<h3>BuildTime: {{.BuildTime}}</h3>
+		</div>
+
+		<div class="links">
+			<h3>Links:</h3>
+			<ul>
+				<li><a href="/metrics/">Metrics</a></li>
+				<li><a href="/debug/pprof/">Debug</a></li>
+			</ul>
+
+			{{if .SubConfigs}}
+			<h3>Clash Providers:</h3>
+			<ul>
+				{{range .SubConfigs}}
+					<li><a href="/clash_proxy_provider/?sub_name={{.Name}}">{{.Name}}</a></li>
+				{{end}}
+			</ul>
+			{{end}}
+		</div>
+
+		<div class="btn-container">
+		<button id="reloadButton">Reload Config</button>
+		</div>
+
+		<footer>
+		<a href="https://github.com/Ehco1996/ehco">More information here</a>
+		</footer>
+	</div>
+</body>
+
+
+<script>
+document.getElementById("reloadButton").addEventListener("click", function() {
+	var request = new XMLHttpRequest();
+	request.open("POST", "/reload/");
+	request.onreadystatechange = function() {
+		if (request.readyState === XMLHttpRequest.DONE) {
+			if (request.status === 200) {
+				// 处理请求成功的逻辑
+				msg = "Reload config success." + "response: " + request.responseText;
+				alert(msg);
+			} else {
+				// 处理请求失败的逻辑
+				msg = "Failed to reload config." + "response: " + request.responseText;
+				alert(msg);;
+			}
+		}
+	};
+	request.send();
+});
+</script>
+</html>
+`
diff --git a/internal/web/handlers.go b/internal/web/handlers.go
@@ -3,7 +3,9 @@ package web
 import (
 	"fmt"
 	"net/http"
+	"text/template"
 
+	"github.com/Ehco1996/ehco/internal/config"
 	"github.com/Ehco1996/ehco/internal/constant"
 	"go.uber.org/zap"
 )
@@ -15,15 +17,32 @@ func MakeIndexF() http.HandlerFunc {
 	}
 }
 
-func welcome(w http.ResponseWriter, r *http.Request) {
-	fmt.Fprintf(w, constant.WelcomeHTML)
-}
-
 func writerBadRequestMsg(w http.ResponseWriter, msg string) {
 	w.WriteHeader(http.StatusBadRequest)
 	_, _ = w.Write([]byte(msg))
 }
 
+func (s *Server) welcome(w http.ResponseWriter, r *http.Request) {
+	tmpl := template.Must(template.New("").Parse(constant.WelcomeHTML))
+	data := struct {
+		Version     string
+		GitBranch   string
+		GitRevision string
+		BuildTime   string
+		SubConfigs  []*config.SubConfig
+	}{
+		Version:     "1.0",
+		GitBranch:   "master",
+		GitRevision: "1a2b3c",
+		BuildTime:   "2022-01-01T00:00:00Z",
+		SubConfigs:  s.cfg.SubConfigs,
+	}
+	if err := tmpl.Execute(w, data); err != nil {
+		writerBadRequestMsg(w, err.Error())
+		return
+	}
+}
+
 func (s *Server) HandleClashProxyProvider(w http.ResponseWriter, r *http.Request) {
 	subName := r.URL.Query().Get("sub_name")
 	if subName == "" {

diff --git a/internal/web/server.go b/internal/web/server.go
@@ -50,7 +50,7 @@ func NewServer(cfg *config.Config, relayReloader reloader.Reloader) (*Server, er
 	}
 
 	// register handler
-	e.GET("/", echo.WrapHandler(http.HandlerFunc(welcome)))
+	e.GET("/", echo.WrapHandler(http.HandlerFunc(s.welcome)))
 	e.GET("/metrics/", echo.WrapHandler(promhttp.Handler()))
 	e.GET("/debug/pprof/*", echo.WrapHandler(http.DefaultServeMux))
 	e.GET("/clash_proxy_provider/", echo.WrapHandler(http.HandlerFunc(s.HandleClashProxyProvider)))