IntenseWebs/boringproxy
3
0
Fork 0
mirror of https://github.com/boringproxy/boringproxy.git synced 2025-02-25 18:55:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Change delete to work without a page navigation.

Browse Source 
Uses more CSS checkbox hackery.
This commit is contained in:
Anders Pitman 2020-10-17 08:42:29 -06:00
parent bdc1721870
commit 18e09120a7
4 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
todo.md
View File

@ -12,3 +12,5 @@
* Maybe add a DNS/Domains page and require users to add domains their before
they can use them for tunnels. This creates a natural place to explain what
is wrong when domain stuff breaks.
* Responses to unauthorized requests are leaking information about the current
tunnels through the genereated CSS.

2
ui_handler.go
View File

@ -272,7 +272,7 @@ func (h *WebUiHandler) handleWebUiRequest(w http.ResponseWriter, r *http.Request
return
}
http.Redirect(w, r, "/#/tunnels", 307)
//http.Redirect(w, r, "/#/tunnels", 307)
case "/tokens":
h.handleTokens(w, r, user, tokenData)

44
webui/index.tmpl
View File

@ -21,15 +21,35 @@
<div class='content'>
<div class='list'>
{{range $domain, $tunnel:= .Tunnels}}
<input type='checkbox' class='toggle' id='toggle-tunnel-hide-deleted-{{$tunnel.CssId}}'>
<div class='list-item'>
<div>
<a href="https://{{$domain}}">{{$domain}}</a>:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}}
</div>
<label class='button' for='toggle-tunnel-delete-{{$tunnel.CssId}}'>
<label class='button' for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}'>
Delete
</label>
</div>
<input type='checkbox' id='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}'>
<div class='confirm-dialog'>
<label for='toggle-tunnel-delete-dialog-{{$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'>
<label for='toggle-tunnel-hide-deleted-{{$tunnel.CssId}}' class='button'>
Confirm
</label>
<label for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}' class='button'>
Cancel
</button>
</div>
</div>
</div>
{{end}}
</div>
@ -114,27 +134,5 @@
</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'>
<form action="/delete-tunnel" method="GET">
<input type="hidden" name="domain" value='{{$domain}}'>
<button class='button' type="submit">Confirm</button>
</form>
<label for='toggle-tunnel-delete-{{$tunnel.CssId}}' class='button'>Cancel</button>
</div>
</div>
</div>
{{end}}
</body>
</html>

20
webui/styles.css
View File

@ -49,6 +49,10 @@ main {
color: #000;
}
.toggle {
display: none;
}
#menu-toggle {
display: none;
}
@ -160,12 +164,24 @@ main *:target {
}
{{range $domain, $tunnel:= .Tunnels}}
#toggle-tunnel-delete-{{$tunnel.CssId}} {
#toggle-tunnel-delete-dialog-{{$tunnel.CssId}} {
display: none;
}
#toggle-tunnel-delete-{{$tunnel.CssId}}:checked + .confirm-dialog {
#toggle-tunnel-delete-dialog-{{$tunnel.CssId}}:checked + .confirm-dialog {
display: block;
}
#toggle-tunnel-hide-deleted-{{$tunnel.CssId}}:checked + .list-item {
/* This is a trick to make the delete request after the delete button is
* clicked. The background will never actually be displayed, because it's
* moved offscreen. */
position: absolute;
left: -999em;
background: url("/delete-tunnel?domain={{$domain}}");
}
#toggle-tunnel-hide-deleted-{{$tunnel.CssId}}:checked ~ .confirm-dialog {
display: none;
}
{{end}}
@media (min-width: 900px) {