Change delete to work without a page navigation.

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

View File

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

View File

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

View File

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

View File

@ -49,6 +49,10 @@ main {
color: #000; color: #000;
} }
.toggle {
display: none;
}
#menu-toggle { #menu-toggle {
display: none; display: none;
} }
@ -160,12 +164,24 @@ main *:target {
} }
{{range $domain, $tunnel:= .Tunnels}} {{range $domain, $tunnel:= .Tunnels}}
#toggle-tunnel-delete-{{$tunnel.CssId}} { #toggle-tunnel-delete-dialog-{{$tunnel.CssId}} {
display: none; display: none;
} }
#toggle-tunnel-delete-{{$tunnel.CssId}}:checked + .confirm-dialog { #toggle-tunnel-delete-dialog-{{$tunnel.CssId}}:checked + .confirm-dialog {
display: block; 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}} {{end}}
@media (min-width: 900px) { @media (min-width: 900px) {