Make tunnel delete buttons pure CSS

database.go

@@ -33,6 +33,7 @@ type Tunnel struct {
 	TunnelPrivateKey string `json:"tunnel_private_key"`
 	ClientName       string `json:"client_name"`
 	ClientPort       int    `json:"client_port"`
+	CssId            string `json:"css_id"`
 }
 
 func NewDatabase() (*Database, error) {

ui_handler.go

@@ -55,6 +55,10 @@ type HeadData struct {
 	Styles template.CSS
 }
 
+type StylesData struct {
+	Tunnels map[string]Tunnel
+}
+
 type MenuData struct {
 	IsAdmin bool
 }
@@ -82,6 +86,8 @@ func NewWebUiHandler(config *BoringProxyConfig, db *Database, api *Api, auth *Au
 
 func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request) {
 
+	homePath := "/#/tunnel"
+
 	token, err := extractToken("access_token", r)
 	if err != nil {
 		h.sendLoginPage(w, r, 401)
@@ -112,6 +118,24 @@ func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request
 		return
 	}
 
+	stylesTmpl, err := template.New("styles").Parse(stylesText)
+	if err != nil {
+		w.WriteHeader(500)
+		h.alertDialog(w, r, err.Error(), homePath)
+		return
+	}
+
+	tunnels := h.api.GetTunnels(tokenData)
+
+	for domain, tun := range tunnels {
+		// TODO: might yield non-unique names
+		tun.CssId = strings.ReplaceAll(domain, ".", "-")
+		tunnels[domain] = tun
+	}
+
+	var stylesBuilder strings.Builder
+	stylesTmpl.Execute(&stylesBuilder, StylesData{Tunnels: tunnels})
+
 	headTmplStr, err := box.String("head.tmpl")
 	if err != nil {
 		w.WriteHeader(500)
@@ -128,7 +152,7 @@ func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request
 	}
 
 	var headBuilder strings.Builder
-	headTmpl.Execute(&headBuilder, HeadData{Styles: template.CSS(stylesText)})
+	headTmpl.Execute(&headBuilder, HeadData{Styles: template.CSS(stylesBuilder.String())})
 
 	h.headHtml = template.HTML(headBuilder.String())
 
@@ -190,7 +214,7 @@ func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request
 
 		indexData := IndexData{
 			Head:    h.headHtml,
-			Tunnels: h.api.GetTunnels(tokenData),
+			Tunnels: tunnels,
 			Tokens:  tokens,
 			Users:   users,
 			IsAdmin: user.IsAdmin,

webui/index.tmpl

@@ -25,9 +25,10 @@
               <div>
                 <a href="https://{{$domain}}">{{$domain}}</a>:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}}
               </div>
-              <a href="/confirm-delete-tunnel?domain={{$domain}}">
+
-                <button class='button'>Delete</button>
+              <label class='button' for='toggle-tunnel-delete-{{$tunnel.CssId}}'>
-              </a>
+                Delete
+              </label>
             </div>
             {{end}}
           </div>
@@ -35,11 +36,11 @@
           <div class='tunnel-adder'>
             <form action="/tunnels" method="POST">
                <label for="domain">Domain:</label>
-               <input type="text" id="domain" name="domain">
+               <input type="text" id="domain" name="domain" required>
                <label for="client-name">Client Name:</label>
-               <input type="text" id="client-name" name="client-name">
+               <input type="text" id="client-name" name="client-name" required>
                <label for="client-port">Client Port:</label>
-               <input type="text" id="client-port" name="client-port">
+               <input type="text" id="client-port" name="client-port" required>
                <button class='button' type="submit">Add/Update Tunnel</button>
             </form>
           </div>
@@ -103,7 +104,7 @@
           <div class='user-adder'>
             <form action="/users" method="POST">
                <label for="username">Username:</label>
-               <input type="text" id="username" name="username">
+               <input type="text" id="username" name="username" required>
                <label for="is-admin">Is Admin:</label>
                <input type="checkbox" id="is-admin" name="is-admin">
                <button class='button' type="submit">Add User</button>
@@ -113,5 +114,26 @@
       </div>
       {{end}}
     </main>
+
+    {{range $domain, $tunnel:= .Tunnels}}
+    <input type='checkbox' id='toggle-tunnel-delete-{{$tunnel.CssId}}'>
+    <div class='confirm-dialog'>
+      <label for='toggle-tunnel-delete-{{$tunnel.CssId}}' class='confirm-dialog__overlay'></label>
+
+      <div class='confirm-dialog__content'>
+        <p class='confirm-dialog__text'>
+          Are you sure you want to delete {{$domain}}?
+        </p>
+        <div class='button-row'>
+          <a href="/delete-tunnel?domain={{$domain}}">
+            <button class='button'>Confirm</button>
+          </a>
+
+          <label for='toggle-tunnel-delete-{{$tunnel.CssId}}' class='button'>Cancel</button>
+        </div>
+      </div>
+    </div>
+    {{end}}
+
   </body>
 </html>

webui/styles.css

@@ -74,6 +74,10 @@ main {
   text-decoration: none;
   user-select: none;
   cursor: pointer;
+  font-family: -system-ui, sans-serif;
+  font-size: 1em;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
 .button:hover {
@@ -132,6 +136,37 @@ main *:target {
   background: #000;
 }
 
+.confirm-dialog {
+  display: none;
+}
+.confirm-dialog__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+  z-index: 1000;
+}
+.confirm-dialog__content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--background-color);
+  padding: 1em;
+  border: 1px solid #ccc;
+  z-index: 1010;
+}
+
+{{range $domain, $tunnel:= .Tunnels}}
+#toggle-tunnel-delete-{{$tunnel.CssId}} {
+  display: none;
+}
+#toggle-tunnel-delete-{{$tunnel.CssId}}:checked + .confirm-dialog {
+  display: block;
+}
+{{end}}
 
 @media (min-width: 900px) {